@stencil/store 2.1.3 → 2.2.1-dev.1763338163.54383e1

package/dist/index.cjs

@@ -1,6 +1,25 @@
 'use strict';
 
-var core = require('@stencil/core');
+var StencilCore = require('@stencil/core');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var StencilCore__namespace = /*#__PURE__*/_interopNamespaceDefault(StencilCore);
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);
@@ -39,17 +58,22 @@ const cleanupElements = debounce((map) => {
         map.set(key, map.get(key).filter(isConnected));
     }
 }, 2_000);
+const core = StencilCore__namespace;
+const forceUpdate = core.forceUpdate;
+const getRenderingRef = core.getRenderingRef;
 const stencilSubscription = () => {
-    if (typeof core.getRenderingRef !== 'function') {
+    if (typeof getRenderingRef !== 'function' || typeof forceUpdate !== 'function') {
         // If we are not in a stencil project, we do nothing.
         // This function is not really exported by @stencil/core.
         return {};
     }
+    const ensureForceUpdate = forceUpdate;
+    const ensureGetRenderingRef = getRenderingRef;
     const elmsToUpdate = new Map();
     return {
         dispose: () => elmsToUpdate.clear(),
         get: (propName) => {
-            const elm = core.getRenderingRef();
+            const elm = ensureGetRenderingRef();
             if (elm) {
                 appendToMap(elmsToUpdate, propName, elm);
             }
@@ -57,12 +81,12 @@ const stencilSubscription = () => {
         set: (propName) => {
             const elements = elmsToUpdate.get(propName);
             if (elements) {
-                elmsToUpdate.set(propName, elements.filter(core.forceUpdate));
+                elmsToUpdate.set(propName, elements.filter(ensureForceUpdate));
             }
             cleanupElements(elmsToUpdate);
         },
         reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(core.forceUpdate));
+            elmsToUpdate.forEach((elms) => elms.forEach(ensureForceUpdate));
             cleanupElements(elmsToUpdate);
         },
     };
@@ -70,18 +94,26 @@ const stencilSubscription = () => {
 
 const unwrap = (val) => (typeof val === 'function' ? val() : val);
 const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState ?? {}));
+    const resolveDefaultState = () => (unwrap(defaultState) ?? {});
+    const initialState = resolveDefaultState();
+    let states = new Map(Object.entries(initialState));
+    const proxyAvailable = typeof Proxy !== 'undefined';
+    const plainState = proxyAvailable ? null : {};
     const handlers = {
         dispose: [],
         get: [],
         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
-        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
+        states = new Map(Object.entries(resolveDefaultState()));
+        if (!proxyAvailable) {
+            syncPlainStateKeys();
+        }
         handlers.reset.forEach((cb) => cb());
     };
     const dispose = () => {
@@ -98,12 +130,14 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         const oldValue = states.get(propName);
         if (shouldUpdate(value, oldValue, propName)) {
             states.set(propName, value);
+            if (!proxyAvailable) {
+                ensurePlainProperty(propName);
+            }
             handlers.set.forEach((cb) => cb(propName, value, oldValue));
         }
     };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(unwrappedState, {
+    const state = (proxyAvailable
+        ? new Proxy(initialState, {
             get(_, propName) {
                 return get(propName);
             },
@@ -123,7 +157,11 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
                 set(propName, value);
                 return true;
             },
-        }));
+        })
+        : (() => {
+            syncPlainStateKeys();
+            return plainState;
+        })());
     const on = (eventName, callback) => {
         handlers[eventName].push(callback);
         return () => {
@@ -131,17 +169,24 @@ 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 = () => {
+            const snapshot = resolveDefaultState();
+            cb(snapshot[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 +211,47 @@ 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);
+        }
+    };
+    function ensurePlainProperty(key) {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        if (Object.prototype.hasOwnProperty.call(plainState, key)) {
+            return;
+        }
+        Object.defineProperty(plainState, key, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return get(key);
+            },
+            set(value) {
+                set(key, value);
+            },
+        });
+    }
+    function syncPlainStateKeys() {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        const knownKeys = new Set(states.keys());
+        for (const key of Object.keys(plainState)) {
+            if (!knownKeys.has(key)) {
+                delete plainState[key];
+            }
+        }
+        for (const key of knownKeys) {
+            ensurePlainProperty(key);
+        }
+    }
     return {
         state,
         get,
@@ -176,6 +262,7 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         dispose,
         reset,
         forceUpdate,
+        removeListener,
     };
 };
 const removeFromArray = (array, item) => {

package/dist/index.js

@@ -1,4 +1,4 @@
-import { getRenderingRef, forceUpdate } from '@stencil/core';
+import * as StencilCore from '@stencil/core';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);
@@ -37,17 +37,22 @@ const cleanupElements = debounce((map) => {
         map.set(key, map.get(key).filter(isConnected));
     }
 }, 2_000);
+const core = StencilCore;
+const forceUpdate = core.forceUpdate;
+const getRenderingRef = core.getRenderingRef;
 const stencilSubscription = () => {
-    if (typeof getRenderingRef !== 'function') {
+    if (typeof getRenderingRef !== 'function' || typeof forceUpdate !== 'function') {
         // If we are not in a stencil project, we do nothing.
         // This function is not really exported by @stencil/core.
         return {};
     }
+    const ensureForceUpdate = forceUpdate;
+    const ensureGetRenderingRef = getRenderingRef;
     const elmsToUpdate = new Map();
     return {
         dispose: () => elmsToUpdate.clear(),
         get: (propName) => {
-            const elm = getRenderingRef();
+            const elm = ensureGetRenderingRef();
             if (elm) {
                 appendToMap(elmsToUpdate, propName, elm);
             }
@@ -55,12 +60,12 @@ const stencilSubscription = () => {
         set: (propName) => {
             const elements = elmsToUpdate.get(propName);
             if (elements) {
-                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+                elmsToUpdate.set(propName, elements.filter(ensureForceUpdate));
             }
             cleanupElements(elmsToUpdate);
         },
         reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            elmsToUpdate.forEach((elms) => elms.forEach(ensureForceUpdate));
             cleanupElements(elmsToUpdate);
         },
     };
@@ -68,18 +73,26 @@ const stencilSubscription = () => {
 
 const unwrap = (val) => (typeof val === 'function' ? val() : val);
 const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState ?? {}));
+    const resolveDefaultState = () => (unwrap(defaultState) ?? {});
+    const initialState = resolveDefaultState();
+    let states = new Map(Object.entries(initialState));
+    const proxyAvailable = typeof Proxy !== 'undefined';
+    const plainState = proxyAvailable ? null : {};
     const handlers = {
         dispose: [],
         get: [],
         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
-        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
+        states = new Map(Object.entries(resolveDefaultState()));
+        if (!proxyAvailable) {
+            syncPlainStateKeys();
+        }
         handlers.reset.forEach((cb) => cb());
     };
     const dispose = () => {
@@ -96,12 +109,14 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         const oldValue = states.get(propName);
         if (shouldUpdate(value, oldValue, propName)) {
             states.set(propName, value);
+            if (!proxyAvailable) {
+                ensurePlainProperty(propName);
+            }
             handlers.set.forEach((cb) => cb(propName, value, oldValue));
         }
     };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(unwrappedState, {
+    const state = (proxyAvailable
+        ? new Proxy(initialState, {
             get(_, propName) {
                 return get(propName);
             },
@@ -121,7 +136,11 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
                 set(propName, value);
                 return true;
             },
-        }));
+        })
+        : (() => {
+            syncPlainStateKeys();
+            return plainState;
+        })());
     const on = (eventName, callback) => {
         handlers[eventName].push(callback);
         return () => {
@@ -129,17 +148,24 @@ 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 = () => {
+            const snapshot = resolveDefaultState();
+            cb(snapshot[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 +190,47 @@ 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);
+        }
+    };
+    function ensurePlainProperty(key) {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        if (Object.prototype.hasOwnProperty.call(plainState, key)) {
+            return;
+        }
+        Object.defineProperty(plainState, key, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return get(key);
+            },
+            set(value) {
+                set(key, value);
+            },
+        });
+    }
+    function syncPlainStateKeys() {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        const knownKeys = new Set(states.keys());
+        for (const key of Object.keys(plainState)) {
+            if (!knownKeys.has(key)) {
+                delete plainState[key];
+            }
+        }
+        for (const key of knownKeys) {
+            ensurePlainProperty(key);
+        }
+    }
     return {
         state,
         get,
@@ -174,6 +241,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.1-dev.1763338163.54383e1",
   "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",
@@ -33,11 +33,11 @@
     "npm": ">=6.0.0"
   },
   "scripts": {
-    "build": "run-s build.*",
-    "build.clean": "rm -rf dist",
+    "build": "run-s build.clean build.rollup",
+    "build.clean": "rimraf dist",
     "build.rollup": "rollup -c rollup.config.js",
     "prettier": "npm run prettier.base -- --write",
-    "prettier.base": "prettier --cache 'src/**/*.ts'",
+    "prettier.base": "prettier --cache \"src/**/*.ts\"",
     "prettier.dry-run": "npm run prettier.base -- --list-different",
     "release": "np",
     "test": "run-s test.*",
@@ -53,16 +53,17 @@
   },
   "devDependencies": {
     "@ionic/prettier-config": "^4.0.0",
-    "@rollup/plugin-typescript": "^12.1.2",
-    "@stencil/core": "^4.27.1",
-    "@types/node": "^22.13.5",
-    "@vitest/coverage-v8": "^3.0.7",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@stencil/core": "^4.38.2",
+    "@types/node": "^24.9.2",
+    "@vitest/coverage-v8": "^4.0.5",
     "np": "^10.2.0",
-    "npm-run-all2": "^7.0.2",
-    "prettier": "^3.5.2",
-    "rollup": "^4.34.8",
-    "typescript": "~5.8.2",
-    "vitest": "^3.0.7"
+    "npm-run-all2": "^8.0.4",
+    "prettier": "^3.6.2",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.52.5",
+    "typescript": "~5.9.3",
+    "vitest": "^4.0.5"
   },
   "prettier": "@ionic/prettier-config"
 }