@stencil/store 2.1.3 → 2.2.0

package/dist/index.cjs

@@ -78,6 +78,8 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         set: [],
         reset: [],
     };
+    // Track onChange listeners to enable removeListener functionality
+    const changeListeners = new Map();
     const reset = () => {
         // When resetting the state, the default state may be a function - unwrap it to invoke it.
         // otherwise, the state won't be properly reset
@@ -131,17 +133,21 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         };
     };
     const onChange = (propName, cb) => {
-        const unSet = on('set', (key, newValue) => {
+        const setHandler = (key, newValue) => {
             if (key === propName) {
                 cb(newValue);
             }
-        });
-        // We need to unwrap the defaultState because it might be a function.
-        // Otherwise we might not be sending the right reset value.
-        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        };
+        const resetHandler = () => cb(unwrap(defaultState)[propName]);
+        // Register the handlers
+        const unSet = on('set', setHandler);
+        const unReset = on('reset', resetHandler);
+        // Track the relationship between the user callback and internal handlers
+        changeListeners.set(cb, { setHandler, resetHandler, propName });
         return () => {
             unSet();
             unReset();
+            changeListeners.delete(cb);
         };
     };
     const use = (...subscriptions) => {
@@ -166,6 +172,15 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         const oldValue = states.get(key);
         handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
     };
+    const removeListener = (propName, listener) => {
+        const listenerInfo = changeListeners.get(listener);
+        if (listenerInfo && listenerInfo.propName === propName) {
+            // Remove the specific handlers that were created for this listener
+            removeFromArray(handlers.set, listenerInfo.setHandler);
+            removeFromArray(handlers.reset, listenerInfo.resetHandler);
+            changeListeners.delete(listener);
+        }
+    };
     return {
         state,
         get,
@@ -176,6 +191,7 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         dispose,
         reset,
         forceUpdate,
+        removeListener,
     };
 };
 const removeFromArray = (array, item) => {

package/dist/index.js

@@ -76,6 +76,8 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         set: [],
         reset: [],
     };
+    // Track onChange listeners to enable removeListener functionality
+    const changeListeners = new Map();
     const reset = () => {
         // When resetting the state, the default state may be a function - unwrap it to invoke it.
         // otherwise, the state won't be properly reset
@@ -129,17 +131,21 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         };
     };
     const onChange = (propName, cb) => {
-        const unSet = on('set', (key, newValue) => {
+        const setHandler = (key, newValue) => {
             if (key === propName) {
                 cb(newValue);
             }
-        });
-        // We need to unwrap the defaultState because it might be a function.
-        // Otherwise we might not be sending the right reset value.
-        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        };
+        const resetHandler = () => cb(unwrap(defaultState)[propName]);
+        // Register the handlers
+        const unSet = on('set', setHandler);
+        const unReset = on('reset', resetHandler);
+        // Track the relationship between the user callback and internal handlers
+        changeListeners.set(cb, { setHandler, resetHandler, propName });
         return () => {
             unSet();
             unReset();
+            changeListeners.delete(cb);
         };
     };
     const use = (...subscriptions) => {
@@ -164,6 +170,15 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         const oldValue = states.get(key);
         handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
     };
+    const removeListener = (propName, listener) => {
+        const listenerInfo = changeListeners.get(listener);
+        if (listenerInfo && listenerInfo.propName === propName) {
+            // Remove the specific handlers that were created for this listener
+            removeFromArray(handlers.set, listenerInfo.setHandler);
+            removeFromArray(handlers.reset, listenerInfo.resetHandler);
+            changeListeners.delete(listener);
+        }
+    };
     return {
         state,
         get,
@@ -174,6 +189,7 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         dispose,
         reset,
         forceUpdate,
+        removeListener,
     };
 };
 const removeFromArray = (array, item) => {

package/dist/types.d.ts

@@ -40,11 +40,15 @@ export interface ObservableMap<T> {
      * Note: Proxy objects are not supported by IE11 (not even with a polyfill)
      * so you need to use the store.get and store.set methods of the API if you wish to support IE11.
      *
+     * @returns The proxied object
      */
     state: T;
     /**
      * Only useful if you need to support IE11.
      *
+     * @param propName - The property name to get
+     * @returns The value of the property
+     *
      * @example
      * const { state, get } = createStore({ hola: 'hello', adios: 'goodbye' });
      * console.log(state.hola); // If you don't need to support IE11, use this way.
@@ -54,6 +58,10 @@ export interface ObservableMap<T> {
     /**
      * Only useful if you need to support IE11.
      *
+     * @param propName - The property name to set
+     * @param value - The value to set
+     * @returns void
+     *
      * @example
      * const { state, get } = createStore({ hola: 'hello', adios: 'goodbye' });
      * state.hola = 'ola'; // If you don't need to support IE11, use this way.
@@ -63,6 +71,10 @@ export interface ObservableMap<T> {
     /**
      * Register a event listener, you can listen to `set`, `get` and `reset` events.
      *
+     * @param eventName - The event name to listen for
+     * @param callback - The callback to call when the event occurs
+     * @returns A function to unsubscribe from the listener
+     *
      * @example
      * store.on('set', (prop, value) => {
      *   console.log(`Prop ${prop} changed to: ${value}`);
@@ -71,6 +83,10 @@ export interface ObservableMap<T> {
     on: OnHandler<T>;
     /**
      * Easily listen for value changes of the specified key.
+     *
+     * @param propName - The property name to listen for
+     * @param cb - The callback to call when the property changes
+     * @returns A function to unsubscribe from the listener
      */
     onChange: OnChangeHandler<T>;
     /**
@@ -79,19 +95,37 @@ export interface ObservableMap<T> {
      *
      * This method is intended for plugins to reset
      * all their internal state between tests.
+     *
+     * @returns void
      */
     dispose(): void;
     /**
      * Resets the state to its original state.
+     *
+     * @returns void
      */
     reset(): void;
     /**
      * Registers a subscription that will be called whenever the user gets, sets, or
      * resets a value.
+     *
+     * @param plugins - The plugins to use
+     * @returns A function to unsubscribe from the plugins
      */
     use(...plugins: Subscription<T>[]): () => void;
     /**
      * Force a rerender of the specified key, just like the value changed.
+     *
+     * @param key - The property name to force an update for
+     * @returns void
+     */
+    forceUpdate(key: keyof T): void;
+    /**
+     * Remove a listener
+     *
+     * @param propName - The property name to remove the listener from
+     * @param listener - The listener to remove
+     * @returns void
      */
-    forceUpdate(key: keyof T): any;
+    removeListener(propName: keyof T, listener: (value: any) => void): void;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stencil/store",
   "author": "StencilJS Team",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Store is a lightweight shared state library by the StencilJS core team. Implements a simple key/value map that efficiently re-renders components when necessary.",
   "license": "MIT",
   "homepage": "https://stenciljs.com/docs/stencil-store",
@@ -55,10 +55,10 @@
     "@ionic/prettier-config": "^4.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
     "@stencil/core": "^4.27.1",
-    "@types/node": "^22.13.5",
+    "@types/node": "^24.0.3",
     "@vitest/coverage-v8": "^3.0.7",
     "np": "^10.2.0",
-    "npm-run-all2": "^7.0.2",
+    "npm-run-all2": "^8.0.1",
     "prettier": "^3.5.2",
     "rollup": "^4.34.8",
     "typescript": "~5.8.2",