stook - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/emitter.d.ts

@@ -1,2 +0,1 @@
-import mitt from 'mitt';
 interface Data {
@@ -6,3 +5,3 @@ key: any;
 }
-export declare const emitter: mitt.Emitter;
+export declare const emitter: import("mitt").Emitter;
 export declare const STORE_INITED = "STORE_INITED";
@@ -9,0 +8,0 @@ export declare const STORE_UPDATED = "STORE_UPDATED";

dist/getState.d.ts

@@ -1,1 +0,6 @@
-export declare function getState<S = any>(key: string): S;
+import { keyType } from './types';
+/**
+ * Get store by Key
+ * @param key
+ */
+export declare function getState<S = any, K = string>(key: K | keyType): S;

dist/index.d.ts

 export * from './Storage';
 export * from './useStore';
-export * from './createUseStore';
 export * from './getState';
@@ -5,0 +4,0 @@ export * from './mutate';

dist/mutate.d.ts

@@ -1,1 +0,8 @@
-export declare function mutate<S>(key: string, value?: S): void;
+import { keyType } from './types';
+/**
+ * update store by key
+ *
+ * @param key unique store key (唯一key)
+ * @param nextValue  next value
+ */
+export declare function mutate<S, K = string>(key: K | keyType, nextValue?: S): void;

dist/stook.cjs.development.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var react = require('react');
-var isEqual = _interopDefault(require('react-fast-compare'));
 var immer = require('immer');
@@ -13,5 +14,3 @@ var mitt = _interopDefault(require('mitt'));
  */
-var Storage =
-/*#__PURE__*/
-function () {
+var Storage = /*#__PURE__*/function () {
   function Storage() {}
@@ -35,5 +34,3 @@
 
-var emitter =
-/*#__PURE__*/
-mitt();
+var emitter = /*#__PURE__*/mitt();
 var STORE_INITED = 'STORE_INITED';
@@ -62,5 +59,3 @@ var STORE_UPDATED = 'STORE_UPDATED';
 
-var Store =
-/*#__PURE__*/
-function () {
+var Store = /*#__PURE__*/function () {
   function Store(value) {
@@ -118,44 +113,52 @@ var _this = this;
 
-function createUseStore(useState, useEffect, useRef) {
-  return function useStore(key, value) {
-    var storageStore = Storage.get(key);
-    var initalValue = storageStore ? storageStore.state : value;
+/**
+ * Returns a stateful value, similar to useState, but need a key;
+ *
+ * 用法和 useState 几乎一模一样，只是第一个参数是唯一key;
+ *
+ * @param key unique store key (唯一key)
+ * @param initialValue  initial value, can not override, use first useStore to init
+ * @see https://stook-cn.now.sh/docs/stook/use-store
+ *
+ * 需要注意的是，如果调用多个相同key的 useStore, 第一个被调用的 useStore 的 initialValue 才是有效的 initialValue
+ */
 
-    var _useRef = useRef(initalValue),
-        initialState = _useRef.current; // check multi init
+function useStore(key, initialValue) {
+  var storageStore = Storage.get(key);
+  var initalValue = storageStore ? storageStore.state : initialValue;
 
+  var _useRef = react.useRef(initalValue),
+      initialState = _useRef.current;
 
-    if (!isEqual(initialState, value) && value !== undefined) ;
+  Storage.set(key, new Store(initialState));
+  var newStore = Storage.get(key);
 
-    Storage.set(key, new Store(initialState));
-    var newStore = Storage.get(key);
+  var _useState = react.useState(initialState),
+      state = _useState[0],
+      set = _useState[1];
 
-    var _useState = useState(initialState),
-        state = _useState[0],
-        set = _useState[1];
+  var setters = newStore.setters;
+  react.useEffect(function () {
+    setters.push(set);
+    emitStoreInit(key);
+    return function () {
+      setters.splice(setters.indexOf(set), 1);
+    };
+  }, []);
 
-    var setters = newStore.setters;
-    useEffect(function () {
-      setters.push(set);
-      emitStoreInit(key);
-      return function () {
-        setters.splice(setters.indexOf(set), 1);
-      };
-    }, []);
+  function act(key) {
+    return function (value) {
+      return newStore.setState(key, value);
+    };
+  }
 
-    function act(key) {
-      return function (value) {
-        return newStore.setState(key, value);
-      };
-    }
-
-    return [state, act(key)];
-  };
+  return [state, act(key)];
 }
 
-var useStore =
-/*#__PURE__*/
-createUseStore(react.useState, react.useEffect, react.useRef);
+var undefined_as_any = undefined;
+/**
+ * Get store by Key
+ * @param key
+ */
 
-var undefined_as_any = undefined;
 function getState(key) {
@@ -166,11 +169,18 @@ var store = Storage.get(key);
 
-function mutate(key, value) {
+/**
+ * update store by key
+ *
+ * @param key unique store key (唯一key)
+ * @param nextValue  next value
+ */
+
+function mutate(key, nextValue) {
   var store = Storage.get(key);
 
   if (store && store.setState) {
-    store.setState(key, value);
+    store.setState(key, nextValue);
   } else {
     // init state, if no store exist
     Storage.set(key, {
-      state: value
+      state: nextValue
     });
@@ -181,3 +191,2 @@ }
 exports.Storage = Storage;
-exports.createUseStore = createUseStore;
 exports.getState = getState;
@@ -184,0 +193,0 @@ exports.mutate = mutate;

dist/stook.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}var e=require("react"),r=t(require("react-fast-compare")),n=require("immer"),o=t(require("mitt")),u=function(){function t(){}return t.set=function(e,r){var n=t.stores[e];n&&n.setState||(t.stores[e]=r)},t.get=function(e){return t.stores[e]},t}();u.stores={};var s=o(),i="STORE_INITED",a="STORE_UPDATED",f=function(){function t(t){var e=this;this.setters=[],this.setState=function(t,r){var n=e.getNextState(r);return s.emit(a,{key:t,nextState:n}),e.state=n,e.setters.forEach((function(t){return t(n)})),n},this.state=t}return t.prototype.getNextState=function(t){var e;if("function"!=typeof t)return t;if("object"!=typeof this.state)return t(this.state);var r=!0,o=n.produce(this.state,(function(n){var o=t(n);o&&"object"==typeof o&&(e=o,r=!1)}));return r&&(e=o),e},t}();function c(t,e,n){return function(o,a){var c=u.get(o),p=n(c?c.state:a).current;r(p,a),u.set(o,new f(p));var S=u.get(o),v=t(p),x=v[0],g=v[1],h=S.setters;return e((function(){return h.push(g),function(t){s.emit(i,t)}(o),function(){h.splice(h.indexOf(g),1)}}),[]),[x,function(t){return function(e){return S.setState(t,e)}}(o)]}}var p=c(e.useState,e.useEffect,e.useRef);exports.Storage=u,exports.createUseStore=c,exports.getState=function(t){var e=u.get(t);return e?e.state:void 0},exports.mutate=function(t,e){var r=u.get(t);r&&r.setState?r.setState(t,e):u.set(t,{state:e})},exports.onStoreInit=function(t){s.on(i,(function(e){t(e)}))},exports.onStoreUpdate=function(t){s.on(a,(function(e){t(e)}))},exports.useStore=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react"),r=require("immer"),n=(t=require("mitt"))&&"object"==typeof t&&"default"in t?t.default:t,o=function(){function t(){}return t.set=function(e,r){var n=t.stores[e];n&&n.setState||(t.stores[e]=r)},t.get=function(e){return t.stores[e]},t}();o.stores={};var s=n(),u=function(){function t(t){var e=this;this.setters=[],this.setState=function(t,r){var n=e.getNextState(r);return s.emit("STORE_UPDATED",{key:t,nextState:n}),e.state=n,e.setters.forEach((function(t){return t(n)})),n},this.state=t}return t.prototype.getNextState=function(t){var e;if("function"!=typeof t)return t;if("object"!=typeof this.state)return t(this.state);var n=!0,o=r.produce(this.state,(function(r){var o=t(r);o&&"object"==typeof o&&(e=o,n=!1)}));return n&&(e=o),e},t}();exports.Storage=o,exports.getState=function(t){var e=o.get(t);return e?e.state:void 0},exports.mutate=function(t,e){var r=o.get(t);r&&r.setState?r.setState(t,e):o.set(t,{state:e})},exports.onStoreInit=function(t){s.on("STORE_INITED",(function(e){t(e)}))},exports.onStoreUpdate=function(t){s.on("STORE_UPDATED",(function(e){t(e)}))},exports.useStore=function(t,r){var n=o.get(t),i=e.useRef(n?n.state:r).current;o.set(t,new u(i));var a=o.get(t),f=e.useState(i),c=f[0],p=f[1],S=a.setters;return e.useEffect((function(){return S.push(p),function(t){s.emit("STORE_INITED",t)}(t),function(){S.splice(S.indexOf(p),1)}}),[]),[c,function(t){return function(e){return a.setState(t,e)}}(t)]};
 //# sourceMappingURL=stook.cjs.production.min.js.map

dist/stook.esm.js

@@ -1,3 +0,2 @@
-import { useRef, useEffect, useState } from 'react';
-import isEqual from 'react-fast-compare';
+import { useRef, useState, useEffect } from 'react';
 import { produce } from 'immer';
@@ -9,5 +8,3 @@ import mitt from 'mitt';
  */
-var Storage =
-/*#__PURE__*/
-function () {
+var Storage = /*#__PURE__*/function () {
   function Storage() {}
@@ -31,5 +28,3 @@
 
-var emitter =
-/*#__PURE__*/
-mitt();
+var emitter = /*#__PURE__*/mitt();
 var STORE_INITED = 'STORE_INITED';
@@ -58,5 +53,3 @@ var STORE_UPDATED = 'STORE_UPDATED';
 
-var Store =
-/*#__PURE__*/
-function () {
+var Store = /*#__PURE__*/function () {
   function Store(value) {
@@ -114,44 +107,52 @@ var _this = this;
 
-function createUseStore(useState, useEffect, useRef) {
-  return function useStore(key, value) {
-    var storageStore = Storage.get(key);
-    var initalValue = storageStore ? storageStore.state : value;
+/**
+ * Returns a stateful value, similar to useState, but need a key;
+ *
+ * 用法和 useState 几乎一模一样，只是第一个参数是唯一key;
+ *
+ * @param key unique store key (唯一key)
+ * @param initialValue  initial value, can not override, use first useStore to init
+ * @see https://stook-cn.now.sh/docs/stook/use-store
+ *
+ * 需要注意的是，如果调用多个相同key的 useStore, 第一个被调用的 useStore 的 initialValue 才是有效的 initialValue
+ */
 
-    var _useRef = useRef(initalValue),
-        initialState = _useRef.current; // check multi init
+function useStore(key, initialValue) {
+  var storageStore = Storage.get(key);
+  var initalValue = storageStore ? storageStore.state : initialValue;
 
+  var _useRef = useRef(initalValue),
+      initialState = _useRef.current;
 
-    if (!isEqual(initialState, value) && value !== undefined) ;
+  Storage.set(key, new Store(initialState));
+  var newStore = Storage.get(key);
 
-    Storage.set(key, new Store(initialState));
-    var newStore = Storage.get(key);
+  var _useState = useState(initialState),
+      state = _useState[0],
+      set = _useState[1];
 
-    var _useState = useState(initialState),
-        state = _useState[0],
-        set = _useState[1];
+  var setters = newStore.setters;
+  useEffect(function () {
+    setters.push(set);
+    emitStoreInit(key);
+    return function () {
+      setters.splice(setters.indexOf(set), 1);
+    };
+  }, []);
 
-    var setters = newStore.setters;
-    useEffect(function () {
-      setters.push(set);
-      emitStoreInit(key);
-      return function () {
-        setters.splice(setters.indexOf(set), 1);
-      };
-    }, []);
+  function act(key) {
+    return function (value) {
+      return newStore.setState(key, value);
+    };
+  }
 
-    function act(key) {
-      return function (value) {
-        return newStore.setState(key, value);
-      };
-    }
-
-    return [state, act(key)];
-  };
+  return [state, act(key)];
 }
 
-var useStore =
-/*#__PURE__*/
-createUseStore(useState, useEffect, useRef);
+var undefined_as_any = undefined;
+/**
+ * Get store by Key
+ * @param key
+ */
 
-var undefined_as_any = undefined;
 function getState(key) {
@@ -162,11 +163,18 @@ var store = Storage.get(key);
 
-function mutate(key, value) {
+/**
+ * update store by key
+ *
+ * @param key unique store key (唯一key)
+ * @param nextValue  next value
+ */
+
+function mutate(key, nextValue) {
   var store = Storage.get(key);
 
   if (store && store.setState) {
-    store.setState(key, value);
+    store.setState(key, nextValue);
   } else {
     // init state, if no store exist
     Storage.set(key, {
-      state: value
+      state: nextValue
     });
@@ -176,3 +184,3 @@ }
 
-export { Storage, createUseStore, getState, mutate, onStoreInit, onStoreUpdate, useStore };
+export { Storage, getState, mutate, onStoreInit, onStoreUpdate, useStore };
 //# sourceMappingURL=stook.esm.js.map

dist/Storage.d.ts

@@ -10,5 +10,5 @@ import { Store } from './Store';
     static stores: Stores;
-    static set(key: string, value: Store): void;
-    static get<S = any>(key: string): Store<S>;
+    static set(key: any, value: Store): void;
+    static get<S = any>(key: any): Store<S>;
 }
 export {};

dist/types.d.ts

 export declare type Action<S> = S | ((prevState: S) => S) | ((prevState: S) => void);
 export declare type SetStateAction<S> = S | ((prevState: S) => S);
 export declare type Dispatch<A> = (value: A) => void;
+export interface Key {
+}
+export declare type keyType = keyof Key;

dist/useStore.d.ts

@@ -1,1 +0,13 @@
-export declare const useStore: <S = any>(key: string, value?: S | undefined) => [S, import("./types").Dispatch<import("./types").Action<S>>];
+import { Dispatch, Action, keyType } from './types';
+/**
+ * Returns a stateful value, similar to useState, but need a key;
+ *
+ * 用法和 useState 几乎一模一样，只是第一个参数是唯一key;
+ *
+ * @param key unique store key (唯一key)
+ * @param initialValue  initial value, can not override, use first useStore to init
+ * @see https://stook-cn.now.sh/docs/stook/use-store
+ *
+ * 需要注意的是，如果调用多个相同key的 useStore, 第一个被调用的 useStore 的 initialValue 才是有效的 initialValue
+ */
+export declare function useStore<S = any, K = string>(key: K | keyType, initialValue?: S): [S, Dispatch<Action<S>>];

package.json

 {
   "name": "stook",
-  "version": "0.3.0",
+  "version": "0.4.0",
+  "description": "A minimalist design state management library for React",
   "license": "MIT",
@@ -35,4 +36,4 @@ "author": "forsigner",
   "devDependencies": {
-    "@testing-library/react-hooks": "^3.2.1",
-    "@types/jest": "^24.9.0",
+    "@testing-library/react-hooks": "^3.4.1",
+    "@types/jest": "^26.0.10",
     "@types/react": "^16.9.17",
@@ -42,13 +43,12 @@ "@types/react-dom": "^16.9.4",
     "react-dom": "^16.12.0",
-    "react-test-renderer": "^16.12.0",
-    "tsdx": "^0.12.3",
+    "react-test-renderer": "^16.13.1",
+    "tsdx": "^0.13.2",
     "tslib": "^1.10.0",
-    "typescript": "^3.7.4"
+    "typescript": "^3.9.7"
   },
   "dependencies": {
-    "immer": "^5.3.2",
-    "mitt": "^1.2.0",
-    "react-fast-compare": "^2.0.4"
+    "immer": "^7.0.7",
+    "mitt": "^2.1.0"
   },
-  "gitHead": "09bbabb923fe2dd677db9fb798e84cefe3bbad82"
+  "gitHead": "0b0a5a2d35ff0cc964b85ba8e68020b8a1419366"
 }

No alert changes

Improved metrics

Total package byte prevSize

39894

5.39%

Dependency count

3

-25%

Lines of code

384

11.3%

Worsened metrics

Number of package files

18

-5.26%

Dependency changes

• + Added

  immer@7.0.15
  (transitive)

• + Added

  mitt@2.1.0
  (transitive)

• - Removed

  react-fast-compare@^2.0.4

• - Removed

  immer@5.3.6
  (transitive)

• - Removed

  mitt@1.2.0
  (transitive)

• - Removed

  react-fast-compare@2.0.4
  (transitive)

• Updated

  immer@^7.0.7

• Updated

  mitt@^2.1.0