hookstore - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

es/action.js

@@ -5,3 +5,3 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import invariant from 'invariant';
-import { isPlainObject, compose, isPromise, isFunction } from './util';
+import { isPlainObject, compose, isPromise, isFunction, isString } from './util';
 import { ContextMap, createCtx, getContextValue, doUpdate } from './context';
@@ -28,3 +28,4 @@ import { getState } from './stateRef';
               key = "".concat(namespace, "/").concat(action);
-              prevStatus = getState(ACTION_STATUS_NAMESPACE)[key];
+              prevStatus = getState(ACTION_STATUS_NAMESPACE)[key]; // let ret = handler(ctx, ...args);
+
               ret = handler.apply({
@@ -149,4 +150,5 @@ ctx: ctx
 export function useStatus(actionWithNamespace) {
+  invariant(actionWithNamespace && isString(actionWithNamespace), 'You must pass [namespace/action] to useStatus()');
   var Context = ContextMap.get(ACTION_STATUS_NAMESPACE);
-  invariant(Context, 'Please use <Provider /> first!');
+  invariant(Context, 'Please ensure the component is wrapped in a <Provider>');
   useDebugValue(actionWithNamespace);
@@ -153,0 +155,0 @@

es/provider.js

 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { createElement, createContext, useContext, useEffect, useMemo, useRef, useState, useDebugValue } from 'react';
+import { diff } from 'deep-diff';
 import invariant from 'invariant';
 import clonedeep from 'lodash.clonedeep';
-import { isFunction, checkModels } from './util';
+import { isFunction, isString, checkModels } from './util';
 import { actionStatusModel } from './statusModel';
@@ -96,10 +97,10 @@ import { ContextMap } from './context';
 } // access state in FC
+// compatible with `useSelector` in react-redux
 
 
 export function useStore(namespace, selector) {
+  invariant(namespace && isString(namespace), 'You must pass a namespace to useStore()');
   var Context = ContextMap.get(namespace);
-  invariant(Context, "model with namespace[".concat(namespace, "] has not created!")); // if (!Context) {
-  //   throw new Error(`model ${namespace} has not created!`);
-  // }
-
+  var isFn = isFunction(selector);
+  invariant(Context, "store with namespace[".concat(namespace, "] has not created, please ensure the component is wrapped in a <Provider>"));
   useDebugValue(namespace);
@@ -111,6 +112,4 @@
 
-  var selectState = isFunction(selector) ? selector(state) : state;
-  return useMemo(function () {
-    return [selectState, actions];
-  }, [selectState, actions]);
+  var selectedState = isFn ? selector(state) : state;
+  return [selectedState, actions]; // return useMemo(() => [selectedState, actions], [selectedState, actions]);
 }

es/util.js

@@ -0,4 +1,8 @@
+import { useReducer } from 'react';
 import invariant from 'invariant';
 import isPlainObject from 'is-plain-object';
 export { isPlainObject };
+export var isString = function isString(str) {
+  return typeof str === 'string';
+};
 export var isFunction = function isFunction(fn) {
@@ -76,2 +80,7 @@ return typeof fn === 'function';
   invariant(Array.isArray(middlewares), 'typeof middlewares should be array!');
+}
+export function useForceRender() {
+  return useReducer(function (c) {
+    return c + 1;
+  }, 0)[1];
 }

lib/action.js

@@ -46,3 +46,4 @@ "use strict";
               key = "".concat(namespace, "/").concat(action);
-              prevStatus = (0, _stateRef.getState)(_statusModel.ACTION_STATUS_NAMESPACE)[key];
+              prevStatus = (0, _stateRef.getState)(_statusModel.ACTION_STATUS_NAMESPACE)[key]; // let ret = handler(ctx, ...args);
+
               ret = handler.apply({
@@ -169,5 +170,7 @@ ctx: ctx
 function useStatus(actionWithNamespace) {
+  (0, _invariant.default)(actionWithNamespace && (0, _util.isString)(actionWithNamespace), 'You must pass [namespace/action] to useStatus()');
+
   var Context = _context3.ContextMap.get(_statusModel.ACTION_STATUS_NAMESPACE);
 
-  (0, _invariant.default)(Context, 'Please use <Provider /> first!');
+  (0, _invariant.default)(Context, 'Please ensure the component is wrapped in a <Provider>');
   (0, _react.useDebugValue)(actionWithNamespace);
@@ -174,0 +177,0 @@

lib/provider.js

@@ -17,2 +17,4 @@ "use strict";
 
+var _deepDiff = require("deep-diff");
+
 var _invariant = _interopRequireDefault(require("invariant"));
@@ -124,11 +126,12 @@
 } // access state in FC
+// compatible with `useSelector` in react-redux
 
 
 function useStore(namespace, selector) {
+  (0, _invariant.default)(namespace && (0, _util.isString)(namespace), 'You must pass a namespace to useStore()');
+
   var Context = _context.ContextMap.get(namespace);
 
-  (0, _invariant.default)(Context, "model with namespace[".concat(namespace, "] has not created!")); // if (!Context) {
-  //   throw new Error(`model ${namespace} has not created!`);
-  // }
-
+  var isFn = (0, _util.isFunction)(selector);
+  (0, _invariant.default)(Context, "store with namespace[".concat(namespace, "] has not created, please ensure the component is wrapped in a <Provider>"));
   (0, _react.useDebugValue)(namespace);
@@ -140,6 +143,4 @@
 
-  var selectState = (0, _util.isFunction)(selector) ? selector(state) : state;
-  return (0, _react.useMemo)(function () {
-    return [selectState, actions];
-  }, [selectState, actions]);
+  var selectedState = isFn ? selector(state) : state;
+  return [selectedState, actions]; // return useMemo(() => [selectedState, actions], [selectedState, actions]);
 }

lib/util.js

@@ -11,2 +11,3 @@ "use strict";
 exports.checkMiddlewares = checkMiddlewares;
+exports.useForceRender = useForceRender;
 Object.defineProperty(exports, "isPlainObject", {
@@ -18,4 +19,6 @@ enumerable: true,
 });
-exports.isPromise = exports.isFunction = void 0;
+exports.isPromise = exports.isFunction = exports.isString = void 0;
 
+var _react = require("react");
+
 var _invariant = _interopRequireDefault(require("invariant"));
@@ -25,2 +28,8 @@
 
+var isString = function isString(str) {
+  return typeof str === 'string';
+};
+
+exports.isString = isString;
+
 var isFunction = function isFunction(fn) {
@@ -105,2 +114,8 @@ return typeof fn === 'function';
   (0, _invariant.default)(Array.isArray(middlewares), 'typeof middlewares should be array!');
+}
+
+function useForceRender() {
+  return (0, _react.useReducer)(function (c) {
+    return c + 1;
+  }, 0)[1];
 }

package.json

 {
   "name": "hookstore",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "React useContext Hook based and lightweight state manage library.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -1,2 +0,2 @@
-[简体中文](./README.zh-CN.md)
+English|[简体中文](./README.zh-CN.md)
 
@@ -13,2 +13,4 @@ # hookstore
 
+Try it on [Codesandbox](https://codesandbox.io/s/hookstore-counter-wbdh1)!
+
 ## Features
@@ -15,0 +17,0 @@

README.zh-CN.md

@@ -1,2 +0,2 @@
-[English](./README.md)
+简体中文|[English](./README.md)
 
@@ -13,2 +13,4 @@ # hookstore
 
+查看在线demo [Codesandbox](https://codesandbox.io/s/hookstore-counter-wbdh1)。
+
 ## 特性
@@ -15,0 +17,0 @@

src/action.js

 import { useContext, useDebugValue, useEffect } from 'react';
 import invariant from 'invariant';
 
-import { isPlainObject, compose, isPromise, isFunction } from './util';
+import { isPlainObject, compose, isPromise, isFunction, isString } from './util';
 import { ContextMap, createCtx, getContextValue, doUpdate } from './context';
@@ -17,2 +17,3 @@ import { getState } from './stateRef';
     const prevStatus = getState(ACTION_STATUS_NAMESPACE)[key];
+    // let ret = handler(ctx, ...args);
     let ret = handler.apply({ ctx }, args);
@@ -76,5 +77,11 @@
 export function useStatus(actionWithNamespace) {
+  invariant(
+    actionWithNamespace && isString(actionWithNamespace),
+    'You must pass [namespace/action] to useStatus()',
+  );
+
   const Context = ContextMap.get(ACTION_STATUS_NAMESPACE);
 
-  invariant(Context, 'Please use <Provider /> first!');
+  invariant(Context, 'Please ensure the component is wrapped in a <Provider>');
+
   useDebugValue(actionWithNamespace);
@@ -81,0 +88,0 @@

src/provider.js

@@ -11,6 +11,7 @@ import React, {
 } from 'react';
+import { diff } from 'deep-diff';
 import invariant from 'invariant';
 import clonedeep from 'lodash.clonedeep';
 
-import { isFunction, checkModels } from './util';
+import { isFunction, isString, checkModels } from './util';
 import { actionStatusModel } from './statusModel';
@@ -95,17 +96,21 @@ import { ContextMap } from './context';
 // access state in FC
+// compatible with `useSelector` in react-redux
 export function useStore(namespace, selector) {
+  invariant(namespace && isString(namespace), 'You must pass a namespace to useStore()');
+
   const Context = ContextMap.get(namespace);
+  const isFn = isFunction(selector);
 
-  invariant(Context, `model with namespace[${namespace}] has not created!`);
+  invariant(
+    Context,
+    `store with namespace[${namespace}] has not created, please ensure the component is wrapped in a <Provider>`,
+  );
 
-  // if (!Context) {
-  //   throw new Error(`model ${namespace} has not created!`);
-  // }
-
   useDebugValue(namespace);
 
   const { state, actions } = useContext(Context);
-  const selectState = isFunction(selector) ? selector(state) : state;
+  const selectedState = isFn ? selector(state) : state;
 
-  return useMemo(() => [selectState, actions], [selectState, actions]);
+  return [selectedState, actions];
+  // return useMemo(() => [selectedState, actions], [selectedState, actions]);
 }

src/util.js

@@ -0,1 +1,2 @@
+import { useReducer } from 'react';
 import invariant from 'invariant';
@@ -6,2 +7,3 @@ import isPlainObject from 'is-plain-object';
 
+export const isString = str => typeof str === 'string';
 export const isFunction = fn => typeof fn === 'function';
@@ -93,1 +95,5 @@ // export const isObject = obj => obj && typeof obj === 'object' && !Array.isArray(obj);
 }
+
+export function useForceRender() {
+  return useReducer(c => c + 1, 0)[1];
+}

No alert changes

Improved metrics

Total package byte prevSize

67056

increased by3.21%

Lines of code

1356

increased by2.81%

Number of lines in readme file

308

increased by0.65%

No dependency changes