@stencil/store 1.5.0 → 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.
 
@@ -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

@@ -70,8 +70,10 @@ const stencilSubscription = () => {
     };
 };
 
+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: [],
@@ -79,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 = () => {
@@ -101,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);
             },
@@ -134,7 +139,9 @@ 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();

package/dist/index.mjs

@@ -66,8 +66,10 @@ const stencilSubscription = () => {
     };
 };
 
+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: [],
@@ -75,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 = () => {
@@ -97,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);
             },
@@ -130,7 +135,9 @@ 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();

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/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@stencil/store",
-  "version": "1.5.0",
+  "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": [
@@ -30,21 +30,25 @@
   "license": "MIT",
   "homepage": "https://stenciljs.com/docs/stencil-store",
   "peerDependencies": {
-    "@stencil/core": ">=1.9.0"
+    "@stencil/core": ">=2.0.0"
   },
   "devDependencies": {
     "@stencil/core": "^2.8.0",
-    "@types/jest": "^26",
-    "jest": "^26",
-    "jest-cli": "^26",
+    "@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",
-    "typescript": "^4.1.5"
+    "ts-jest": "^28.0.4",
+    "typescript": "^4.7.3"
   },
   "repository": {
     "type": "git",
     "url": "git://github.com/ionic-team/stencil-store.git"
+  },
+  "volta": {
+    "node": "16.15.0",
+    "npm": "8.11.0"
   }
 }