build: v0.3.21 cami.slice subscribe

Author: kennyfrc

README.md

@@ -2,7 +2,7 @@
 
 ⚠️ Expect API changes until v1.0.0 ⚠️
 
-Current version: 0.3.20.
+Current version: 0.3.21.
 
 Bundle Size: 14kb minified & gzipped.
 

build/cami.cdn.js

@@ -78,9 +78,12 @@ <h2>Cart</h2>
     products = [];
 
     onConnect() {
-      appStore.subscribe(state => {
-        this.cartItems = state.cart.cartItems;
-        this.products = state.products;
+      productSlice.subscribe(state => {
+        this.products = state;
+      });
+
+      cartSlice.subscribe(state => {
+        this.cartItems = state.cartItems;
       });
 
       productSlice.setStatus('pending');
@@ -133,8 +136,8 @@ <h2>Cart</h2>
   class CartElement extends ReactiveElement {
     cartItems = [];
     onConnect() {
-      appStore.subscribe(state => {
-        this.cartItems = state.cart.cartItems;
+      cartSlice.subscribe(state => {
+        this.cartItems = state.cartItems;
       });
     }
 

build/cami.cdn.js.map

@@ -70,9 +70,12 @@ <h2>Cart</h2>
     products = [];
 
     onConnect() {
-      appStore.subscribe(state => {
-        this.cartItems = state.cart.cartItems;
-        this.products = state.products;
+      productSlice.subscribe(state => {
+        this.products = state;
+      });
+
+      cartSlice.subscribe(state => {
+        this.cartItems = state.cartItems;
       });
 
       productSlice.setStatus('pending');
@@ -125,8 +128,8 @@ <h2>Cart</h2>
   class CartElement extends ReactiveElement {
     cartItems = [];
     onConnect() {
-      appStore.subscribe(state => {
-        this.cartItems = state.cart.cartItems;
+      cartSlice.subscribe(state => {
+        this.cartItems = state.cartItems;
       });
     }
 

build/cami.module.js

@@ -539,49 +539,50 @@ class ObservableStore extends Observable {
 }
 
 /**
+ * Creates a slice of the store with its own state and actions, namespaced to avoid conflicts.
+ *
  * @function slice
  * @param {Object} store - The main store instance.
  * @param {Object} options - The options for creating the slice.
  * @param {string} options.name - The name of the slice.
  * @param {Object} options.state - The initial state of the slice.
  * @param {Object} options.actions - The actions for the slice.
  * @returns {Object} - An object containing the action methods for the slice.
- * @description Creates a slice of the store with its own state and actions, namespaced to avoid conflicts.
+ *
  * @example
- * ```javascript
- * const userSlice = slice(appStore, {
- *   name: 'user',
+ * const cartSlice = slice(appStore, {
+ *   name: 'cart',
  *   state: {
- *     userInfo: null,
- *     isLoggedIn: false,
+ *     cartItems: [],
  *   },
  *   actions: {
- *     login(state, userInfo) {
- *       state.userInfo = userInfo;
- *       state.isLoggedIn = true;
+ *     add(state, product) {
+ *       const newItem = { ...product, id: Date.now() };
+ *       state.cartItems.push(newItem);
  *     },
- *     logout(state) {
- *       state.userInfo = null;
- *       state.isLoggedIn = false;
+ *     remove(state, product) {
+ *       state.cartItems = state.cartItems.filter(item => item.id !== product.id);
  *     },
  *   }
  * });
- * ```
+ *
+ * cartSlice.add({ name: 'Product 1', price: 100 });
+ * cartSlice.remove({ id: 123456789 });
  */
 const slice = (store, { name, state, actions }) => {
   if (store.slices && store.slices[name]) {
     throw new Error(`[Cami.js] Slice name ${name} is already in use.`);
   }
 
-  // Initialize slices if not already done
   if (!store.slices) {
     store.slices = {};
   }
 
-  store.slices[name] = true; // Mark the slice as registered
+  store.slices[name] = true;
   store.state[name] = state;
 
   const sliceActions = {};
+  const sliceSubscribers = [];
 
   Object.keys(actions).forEach(actionKey => {
     const namespacedAction = `${name}/${actionKey}`;
@@ -594,7 +595,22 @@ const slice = (store, { name, state, actions }) => {
     };
   });
 
-  return sliceActions;
+  const subscribe = (callback) => {
+    sliceSubscribers.push(callback);
+    return () => {
+      const index = sliceSubscribers.indexOf(callback);
+      if (index > -1) {
+        sliceSubscribers.splice(index, 1);
+      }
+    };
+  };
+
+  store.subscribe((newState) => {
+    const sliceState = newState[name];
+    sliceSubscribers.forEach(callback => callback(sliceState));
+  });
+
+  return { ...sliceActions, subscribe };
 };
 
 /**