@stencil/store 1.4.1 → 2.0.0

package/README.md

@@ -77,9 +77,53 @@ const MyGlobalCounter = () => {
 
 ## API
 
-### `createStore<T>(initialState?: T, shouldUpdate?)`
+### `createStore<T>(initialState?: T | (() => T), shouldUpdate?)`
 
 Create a new store with the given initial state. The type is inferred from `initialState`, or can be passed as the generic type `T`.
+`initialState` can be a function that returns the actual initial state. This feature is just in case you have deep objects that mutate
+as otherwise we cannot keep track of those.
+
+```ts
+const { reset, state } = createStore(() => ({
+  pageA: {
+    count: 1
+  },
+  pageB: {
+    count: 1
+  }
+}));
+
+state.pageA.count = 2;
+state.pageB.count = 3;
+
+reset();
+
+state.pageA.count; // 1
+state.pageB.count; // 1
+```
+
+Please, bear in mind that the object needs to be created inside the function, not just referenced. The following example won't work
+as you might want it to, as the returned object is always the same one.
+
+```ts
+const object = {
+  pageA: {
+    count: 1
+  },
+  pageB: {
+    count: 1
+  }
+};
+const { reset, state } = createStore(() => object);
+
+state.pageA.count = 2;
+state.pageB.count = 3;
+
+reset();
+
+state.pageA.count; // 2
+state.pageB.count; // 3
+```
 
 By default, store performs a exact comparison (`===`) between the new value, and the previous one in order to prevent unnecessary rerenders, however, this behaviour can be changed by providing a `shouldUpdate` function through the second argument. When this function returns `false`, the value won't be updated. By providing a custom `shouldUpdate()` function, applications can create their own fine-grained change detection logic, beyond the default `===`. This may be useful for certain use-cases to avoid any expensive re-rendering.
 
@@ -93,7 +137,7 @@ Returns a `store` object with the following properties.
 
 #### `store.state`
 
-The state object is proxied, i. e. you can directly get and set properties and Store will automatically take care of component re-rendering when the state object is changed.
+The state object is proxied, i. e. you can directly get and set properties. If you access the state object in the `render` function of your component, Store will automatically re-render it when the state object is changed.
 
 Note: [`Proxy`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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.
 
@@ -121,6 +165,35 @@ Reset the store to its initial state.
 
 Use the given subscriptions in the store. A subscription is an object that defines one or more of the properties `get`, `set` or `reset`.
 
+```ts
+const { reset, state, use } = createStore({ a: 1, b: 2});
+
+const unlog = use({
+  get: (key) => {
+    console.log(`Someone's reading prop ${key}`);
+  },
+  set: (key, newValue, oldValue) => {
+    console.log(`Prop ${key} changed from ${oldValue} to ${newValue}`);
+  },
+  reset: () => {
+    console.log('Store got reset');
+  },
+  dispose: () => {
+    console.log('Store got disposed');
+  },
+})
+
+state.a; // Someone's reading prop a
+state.b = 3; // Prop b changed from 2 to 3
+reset(); // Store got reset
+
+unlog();
+
+state.a; // Nothing is logged
+state.b = 5; // Nothing is logged
+reset(); // Nothing is logged
+```
+
 #### `store.dispose()`
 
 Resets the store and all the internal state of the store that should not survive between tests.

package/dist/index.js

@@ -41,36 +41,39 @@ const cleanupElements = debounce((map) => {
         map.set(key, map.get(key).filter(isConnected));
     }
 }, 2000);
-const stencilSubscription = ({ on }) => {
-    const elmsToUpdate = new Map();
-    if (typeof core.getRenderingRef === 'function') {
+const stencilSubscription = () => {
+    if (typeof core.getRenderingRef !== 'function') {
         // If we are not in a stencil project, we do nothing.
         // This function is not really exported by @stencil/core.
-        on('dispose', () => {
-            elmsToUpdate.clear();
-        });
-        on('get', (propName) => {
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
             const elm = core.getRenderingRef();
             if (elm) {
                 appendToMap(elmsToUpdate, propName, elm);
             }
-        });
-        on('set', (propName) => {
+        },
+        set: (propName) => {
             const elements = elmsToUpdate.get(propName);
             if (elements) {
                 elmsToUpdate.set(propName, elements.filter(core.forceUpdate));
             }
             cleanupElements(elmsToUpdate);
-        });
-        on('reset', () => {
+        },
+        reset: () => {
             elmsToUpdate.forEach((elms) => elms.forEach(core.forceUpdate));
             cleanupElements(elmsToUpdate);
-        });
-    }
+        },
+    };
 };
 
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
 const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
     const handlers = {
         dispose: [],
         get: [],
@@ -78,7 +81,10 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         reset: [],
     };
     const reset = () => {
-        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+        var _a;
+        // 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((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
         handlers.reset.forEach((cb) => cb());
     };
     const dispose = () => {
@@ -100,7 +106,7 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
     };
     const state = (typeof Proxy === 'undefined'
         ? {}
-        : new Proxy(defaultState, {
+        : new Proxy(unwrappedState, {
             get(_, propName) {
                 return get(propName);
             },
@@ -133,23 +139,32 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
                 cb(newValue);
             }
         });
-        const unReset = on('reset', () => cb(defaultState[propName]));
+        // 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]));
         return () => {
             unSet();
             unReset();
         };
     };
-    const use = (...subscriptions) => subscriptions.forEach((subscription) => {
-        if (subscription.set) {
-            on('set', subscription.set);
-        }
-        if (subscription.get) {
-            on('get', subscription.get);
-        }
-        if (subscription.reset) {
-            on('reset', subscription.reset);
-        }
-    });
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
     const forceUpdate = (key) => {
         const oldValue = states.get(key);
         handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
@@ -176,7 +191,7 @@ const removeFromArray = (array, item) => {
 
 const createStore = (defaultState, shouldUpdate) => {
     const map = createObservableMap(defaultState, shouldUpdate);
-    stencilSubscription(map);
+    map.use(stencilSubscription());
     return map;
 };
 

package/dist/index.mjs

@@ -37,36 +37,39 @@ const cleanupElements = debounce((map) => {
         map.set(key, map.get(key).filter(isConnected));
     }
 }, 2000);
-const stencilSubscription = ({ on }) => {
-    const elmsToUpdate = new Map();
-    if (typeof getRenderingRef === 'function') {
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
         // If we are not in a stencil project, we do nothing.
         // This function is not really exported by @stencil/core.
-        on('dispose', () => {
-            elmsToUpdate.clear();
-        });
-        on('get', (propName) => {
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
             const elm = getRenderingRef();
             if (elm) {
                 appendToMap(elmsToUpdate, propName, elm);
             }
-        });
-        on('set', (propName) => {
+        },
+        set: (propName) => {
             const elements = elmsToUpdate.get(propName);
             if (elements) {
                 elmsToUpdate.set(propName, elements.filter(forceUpdate));
             }
             cleanupElements(elmsToUpdate);
-        });
-        on('reset', () => {
+        },
+        reset: () => {
             elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
             cleanupElements(elmsToUpdate);
-        });
-    }
+        },
+    };
 };
 
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
 const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
     const handlers = {
         dispose: [],
         get: [],
@@ -74,7 +77,10 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         reset: [],
     };
     const reset = () => {
-        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+        var _a;
+        // 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((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
         handlers.reset.forEach((cb) => cb());
     };
     const dispose = () => {
@@ -96,7 +102,7 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
     };
     const state = (typeof Proxy === 'undefined'
         ? {}
-        : new Proxy(defaultState, {
+        : new Proxy(unwrappedState, {
             get(_, propName) {
                 return get(propName);
             },
@@ -129,23 +135,32 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
                 cb(newValue);
             }
         });
-        const unReset = on('reset', () => cb(defaultState[propName]));
+        // 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]));
         return () => {
             unSet();
             unReset();
         };
     };
-    const use = (...subscriptions) => subscriptions.forEach((subscription) => {
-        if (subscription.set) {
-            on('set', subscription.set);
-        }
-        if (subscription.get) {
-            on('get', subscription.get);
-        }
-        if (subscription.reset) {
-            on('reset', subscription.reset);
-        }
-    });
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
     const forceUpdate = (key) => {
         const oldValue = states.get(key);
         handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
@@ -172,7 +187,7 @@ const removeFromArray = (array, item) => {
 
 const createStore = (defaultState, shouldUpdate) => {
     const map = createObservableMap(defaultState, shouldUpdate);
-    stencilSubscription(map);
+    map.use(stencilSubscription());
     return map;
 };
 

package/dist/observable-map.d.ts

@@ -1,4 +1,6 @@
 import { ObservableMap } from './types';
+declare type Invocable<T> = T | (() => T);
 export declare const createObservableMap: <T extends {
     [key: string]: any;
-}>(defaultState?: T, shouldUpdate?: (newV: any, oldValue: any, prop: keyof T) => boolean) => ObservableMap<T>;
+}>(defaultState?: Invocable<T>, shouldUpdate?: (newV: any, oldValue: any, prop: keyof T) => boolean) => ObservableMap<T>;
+export {};

package/dist/subscriptions/stencil.d.ts

@@ -1,2 +1,2 @@
-import { ObservableMap } from '../types';
-export declare const stencilSubscription: <T>({ on }: ObservableMap<T>) => void;
+import { Subscription } from '../types';
+export declare const stencilSubscription: <T>() => Subscription<T>;

package/dist/types.d.ts

@@ -18,6 +18,7 @@ export interface OnChangeHandler<StoreType> {
     <Key extends keyof StoreType>(propName: Key, cb: (newValue: StoreType[Key]) => void): () => void;
 }
 export interface Subscription<StoreType> {
+    dispose?(): void;
     get?<KeyFromStoreType extends keyof StoreType>(key: KeyFromStoreType): void;
     set?<KeyFromStoreType extends keyof StoreType>(key: KeyFromStoreType, newValue: StoreType[KeyFromStoreType], oldValue: StoreType[KeyFromStoreType]): void;
     reset?(): void;
@@ -88,7 +89,7 @@ export interface ObservableMap<T> {
      * Registers a subscription that will be called whenever the user gets, sets, or
      * resets a value.
      */
-    use(...plugins: Subscription<T>[]): void;
+    use(...plugins: Subscription<T>[]): () => void;
     /**
      * Force a rerender of the specified key, just like the value changed.
      */

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@stencil/store",
-  "version": "1.4.1",
+  "version": "2.0.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.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rm -rf dist && tsc -p . && npm run rollup",
-    "lint.prettier": "prettier --write 'src/**/*.ts'",
+    "prettier": "prettier --write 'src/**/*.ts'",
+    "prettier.dry-run": "prettier --check 'src/**/*.ts'",
     "release": "np",
     "rollup": "rollup -c rollup.config.js",
     "test": "jest",
-    "test.ci": "npm run test && npm run test.prettier",
-    "test.prettier": "prettier --check 'src/**/*.ts'",
+    "test.ci": "npm run test && npm run prettier.dry-run",
     "version": "npm run build"
   },
   "keywords": [
@@ -26,24 +26,29 @@
   "files": [
     "dist"
   ],
-  "author": "Manu Mtz.-Almeida",
+  "author": "Ionic Team",
   "license": "MIT",
+  "homepage": "https://stenciljs.com/docs/stencil-store",
   "peerDependencies": {
-    "@stencil/core": ">=1.9.0"
+    "@stencil/core": ">=2.0.0"
   },
   "devDependencies": {
-    "@stencil/core": "2.4.0",
-    "@types/jest": "^24.9.1",
-    "jest": "26.6.3",
-    "jest-cli": "26.6.3",
+    "@stencil/core": "^2.8.0",
+    "@types/jest": "^28.1.1",
+    "jest": "^28.1.1",
+    "jest-cli": "^28.1.1",
     "np": "^7.4.0",
     "prettier": "^2.2.1",
     "rollup": "^2.39.0",
-    "ts-jest": "^26.5.1",
-    "typescript": "^4.1.5"
+    "ts-jest": "^28.0.4",
+    "typescript": "^4.7.3"
   },
   "repository": {
     "type": "git",
-    "url": "git://github.com/manucorporat/stencil-store.git"
+    "url": "git://github.com/ionic-team/stencil-store.git"
+  },
+  "volta": {
+    "node": "16.15.0",
+    "npm": "8.11.0"
   }
 }