@stencil/store - npm Package Compare versions

Comparing version 0.3.0 to 1.0.0

dist/index.d.ts

 export { createStore } from './store';
-export { createObservableMap } from './observable-map';
-export { computedSubscription } from './subscriptions/computed';
-export { stencilSubscription } from './subscriptions/stencil';
-export { ComputedReturn, ObservableMap, StoreSubscriptionObject, StoreSubscription } from './types';
+export { ObservableMap, StoreSubscriptionObject } from './types';

dist/index.js

@@ -52,3 +52,3 @@ 'use strict';
     }
-    on('get', propName => {
+    on('get', (propName) => {
         const elm = core.getRenderingRef();
@@ -59,3 +59,3 @@ if (elm) {
     });
-    on('set', propName => {
+    on('set', (propName) => {
         const elements = elmsToUpdate.get(propName);
@@ -68,3 +68,3 @@ if (elements) {
     on('reset', () => {
-        elmsToUpdate.forEach(elms => elms.forEach(core.forceUpdate));
+        elmsToUpdate.forEach((elms) => elms.forEach(core.forceUpdate));
         cleanupElements(elmsToUpdate);
@@ -75,3 +75,3 @@ });
 const createObservableMap = (defaultState) => {
-    let states = new Map(Object.entries((defaultState !== null && defaultState !== void 0 ? defaultState : {})));
+    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
     const setListeners = [];
@@ -81,7 +81,7 @@ const getListeners = [];
     const reset = () => {
-        states = new Map(Object.entries((defaultState !== null && defaultState !== void 0 ? defaultState : {})));
-        resetListeners.forEach(cb => cb());
+        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+        resetListeners.forEach((cb) => cb());
     };
     const get = (propName) => {
-        getListeners.forEach(cb => cb(propName));
+        getListeners.forEach((cb) => cb(propName));
         return states.get(propName);
@@ -93,14 +93,16 @@ };
             states.set(propName, value);
-            setListeners.forEach(cb => cb(propName, value, oldValue));
+            setListeners.forEach((cb) => cb(propName, value, oldValue));
         }
     };
-    const state = new Proxy(defaultState, {
-        get(_, propName) {
-            return get(propName);
-        },
-        set(_, propName, value) {
-            set(propName, value);
-            return true;
-        },
-    });
+    const state = (window.Proxy === undefined
+        ? {}
+        : new Proxy(defaultState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
     const on = (eventName, callback) => {
@@ -154,4 +156,2 @@ let listeners = setListeners;
         reset,
-        // Deprecated
-        subscribe,
     };
@@ -166,40 +166,2 @@ };
 
-const computedSubscription = ({ get, set, on }) => {
-    const computedStates = new Map();
-    on('reset', () => {
-        computedStates.forEach(computeds => computeds.forEach(h => h()));
-    });
-    on('set', propName => {
-        const computed = computedStates.get(propName);
-        if (computed) {
-            computed.forEach(h => h());
-        }
-    });
-    return (gen) => {
-        const states = new Proxy({}, {
-            get(_, propName) {
-                appendToMap(computedStates, propName, handler);
-                return get(propName);
-            },
-            set(_, propName, value) {
-                set(propName, value);
-                return true;
-            },
-        });
-        let beingCalled = false;
-        const handler = () => {
-            if (beingCalled) {
-                return;
-            }
-            beingCalled = true;
-            gen(states);
-            beingCalled = false;
-        };
-        handler();
-    };
-};
-
-exports.computedSubscription = computedSubscription;
-exports.createObservableMap = createObservableMap;
 exports.createStore = createStore;
-exports.stencilSubscription = stencilSubscription;

dist/types.d.ts

@@ -12,7 +12,2 @@ export declare type SetEventHandler<StoreType> = (key: keyof StoreType, newValue: any, oldValue: any) => void;
 }
-export interface StoreSubscription<StoreType> {
-    <KeyFromStoreType extends keyof StoreType>(action: 'set', key: KeyFromStoreType, newValue: StoreType[KeyFromStoreType], oldValue: StoreType[KeyFromStoreType]): void;
-    <KeyFromStoreType extends keyof StoreType>(action: 'get', key: KeyFromStoreType): void;
-    (action: 'reset'): void;
-}
 export interface StoreSubscriptionObject<StoreType> {
@@ -36,2 +31,6 @@ get?<KeyFromStoreType extends keyof StoreType>(key: KeyFromStoreType): void;
      * it was called and rerender it when the property changes.
+     *
+     * 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.
+     *
      */
@@ -79,9 +78,2 @@ state: T;
     use(...plugins: StoreSubscriptionObject<T>[]): void;
-    /**
-     * @deprecated Use `use()` instead.
-     */
-    subscribe(subscription: StoreSubscriptionObject<T>): void;
 }
-export interface ComputedReturn<T> {
-    (gen: (states: T) => void): void;
-}

package.json

 {
   "name": "@stencil/store",
-  "version": "0.3.0",
-  "description": "",
+  "version": "1.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",
@@ -9,4 +9,4 @@ "module": "dist/index.mjs",
   "scripts": {
-    "build": "rm -rf dist && tsc -p . & npm run rollup",
-    "lint.prettier": "node_modules/.bin/prettier --write 'src/**/*.ts'",
+    "build": "rm -rf dist && tsc -p . && npm run rollup",
+    "lint.prettier": "prettier --write 'src/**/*.ts'",
     "release": "np",
@@ -16,3 +16,3 @@ "rollup": "rollup -c rollup.config.js",
     "test.ci": "npm run test && npm run test.prettier",
-    "test.prettier": "node_modules/.bin/prettier --check 'src/**/*.ts'",
+    "test.prettier": "prettier --check 'src/**/*.ts'",
     "version": "npm run build"
@@ -33,13 +33,20 @@ },
   "license": "MIT",
+  "peerDependencies": {
+    "@stencil/core": ">=1.10.0"
+  },
   "devDependencies": {
-    "@stencil/core": "1.9.0-2",
-    "@types/jest": "^24.0.23",
-    "jest": "24.8.0",
-    "jest-cli": "24.8.0",
-    "np": "^5.1.3",
-    "prettier": "^1.19.1",
-    "rollup": "^1.29.1",
-    "ts-jest": "^24.2.0",
-    "typescript": "^3.7.3"
+    "@stencil/core": "1.12.1",
+    "@types/jest": "^24.9.1",
+    "jest": "24.9.0",
+    "jest-cli": "24.9.0",
+    "np": "^6.2.0",
+    "prettier": "^2.0.2",
+    "rollup": "^2.3.2",
+    "ts-jest": "^25.3.0",
+    "typescript": "^3.8.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/manucorporat/stencil-store.git"
   }
 }

README.md

 # @stencil/store
 
-Store is a simple global state library from StencilJS.
+Store is a lightweight shared state library by the [StencilJS](https://stenciljs.com/) core team. It implements a simple key/value map that efficiently re-renders components when necessary.
 
-Allows to share a global state across components that triggers re-render when necesary.
+**Highlights:**
 
+- Lightweight
+- Zero dependencies
+- Simple API, like a reactive Map
+- Best performance
 
+## Installation
+
+```
+npm install @stencil/store
+```
+
 ## Example
 
 **store.ts:**
+
 ```ts
@@ -15,10 +26,7 @@ import { createStore } from "@stencil/store";
 const { state, onChange } = createStore({
-  'clicks': 0,
-  'seconds': 0,
-  'sum': 0,
-  'squaredClicks': 0
+  clicks: 0,
+  seconds: 0,
+  squaredClicks: 0
 });
 
-// Can be used to memoize state
-// Subscribe is only executed when 'seconds' and 'click' changes!
 onChange('clicks', value => {
@@ -32,2 +40,3 @@ state.squaredClicks = value ** 2;
 **component.tsx:**
+
 ```tsx
@@ -50,5 +59,7 @@ import { Component, h } from '@stencil/core';
         <p>
-          <MyGlobalCounter></MyGlobalCounter>
+          <MyGlobalCounter />
           <p>
-            {store.sum}
+            Seconds: {store.seconds}
+            <br />
+            Squared Clicks: {store.squaredClicks}
           </p>
@@ -68,1 +79,40 @@ </p>
 };
+```
+
+## API
+
+### `createStore<T>(initialState)`
+
+Create a new store with the given initial state. The type is inferred from `initialState`, or can be passed as the generic type `T`.
+
+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.
+
+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.
+
+#### `store.on(event, listener)`
+
+Add a listener to the store for a certain action.
+
+#### `store.onChange(propName, listener)`
+
+Add a listener that is called when a specific property changes.
+
+#### `store.get(propName)`
+
+Get a property's value from the store.
+
+#### `store.set(propName, value)`
+
+Set a property's value in the store.
+
+#### `store.reset()`
+
+Reset the store to its initial state.
+
+#### `store.use(...subscriptions)`
+
+Use the given subscriptions in the store. A subscription is an object that defines one or more of the properties `get`, `set` or `reset`.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

115

increased by76.92%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

16733

decreased by-5.99%

Dependency count

1

increased byInfinity%

Number of package files

10

decreased by-9.09%

Lines of code

393

decreased by-17.61%

No dependency changes