reactish-state 0.11.0-alpha.0 → 0.11.1

package/README.md

@@ -1,6 +1,19 @@
 # Reactish-State
 
-> Simple, decentralized state management for React.
+> Simple, decentralized(atomic) state management for React.
+
+## ✨Highlights✨
+
+- Decentralized state management
+- Un-opinionated and easy-to-use API
+- No need of wrapping app in Context or prop drilling
+- React components re-render only on changes
+- Compatible with React 18 concurrent rendering
+- Selectors are memoized by default
+- Feature extensible with middleware or plugins
+- States persistable to browser storage
+- Support Redux dev tools via middleware
+- [~1KB](https://bundlephobia.com/package/reactish-state): simple and small
 
 ## Install
 
@@ -94,9 +107,9 @@ The state management solutions in the React ecosystem have popularized two state
 
 - **Centralized**: a single store that combines entire app states together and slices of the store are connected to React components through selectors. Examples: react-redux, Zustand.
 
-- **Decentralized**: consisting of many small states which can build up state dependency trees using a bottom-up approach. React components only need to connect with the states that they use. Examples: Recoil, Jotai.
+- **Decentralized**: consisting of many small(atomic) states which can build up state dependency trees using a bottom-up approach. React components only need to connect with the states that they use. Examples: Recoil, Jotai.
 
-This library adopts the decentralized state model, offering a _Recoil-like_ API, but with a much simpler and smaller implementation(similar to Zustand), which makes it the one of the smallest state management solutions with gzipped bundle size less than 1KB.
+This library adopts the decentralized state model, offering a _Recoil-like_ API, but with a much simpler and smaller implementation(similar to Zustand), which makes it the one of the smallest state management solutions with gzipped bundle size around 1KB.
 
 |  | State model | Bundle size |
 | --- | --- | --- |
@@ -142,19 +155,6 @@ The difference might sound insignificant, but imaging every single state update
 - No need to use a React Hook to extract actions from the store.
 - Actions come from outside React and no need to add them into the `useCallback/useEffect` dep array.
 
-## ✨Highlights✨
-
-- Decentralized state management
-- Un-opinionated and easy-to-use API
-- No need of wrapping app in Context or prop drilling
-- React components re-render only on changes
-- Compatible with React 18 concurrent rendering
-- Selectors are memoized by default
-- Feature extensible with middleware or plugins
-- States persistable to browser storage
-- Support Redux dev tools via middleware
-- Less than 1KB: simple and small
-
 # Recipes
 
 ## States should be updated immutably
@@ -303,6 +303,55 @@ const Example = () => {
 };
 ```
 
+## Selector that depends on props or local states
+
+The `selector` function allows us to create reusable derived states outside React components. In contrast, component-scoped derived states which depend on props or local states can be created by the `useSelector` hook.
+
+```jsx
+import { state, useSelector } from "reactish-state";
+
+const todosState = state([{ task: "Shop groceries", completed: false }]);
+
+const FilteredTodoList = ({ filter = "ALL" }) => {
+  const filteredTodos = useSelector(
+    () => [
+      todosState,
+      (todos) => {
+        switch (filter) {
+          case "ALL":
+            return todos;
+          case "COMPLETED":
+            return todos.filter((todo) => todo.completed);
+          case "ACTIVE":
+            return todos.filter((todo) => !todo.completed);
+        }
+      }
+    ],
+    [filter]
+  );
+  // Render filtered todos...
+};
+```
+
+The second parameter of `useSelector` is a dependency array (similar to React's `useMemo` hook), in which you can specify what props or local states the selector depends on. In the above example, `FilteredTodoList` component will re-render only if the global `todosState` state or local `filter` prop have been updated.
+
+### Linting the dependency array of useSelector
+
+You can take advantage of the [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) package to lint the dependency array of `useSelector`. Add the following configuration into your ESLint config file:
+
+```json
+{
+  "rules": {
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        "additionalHooks": "useSelector"
+      }
+    ]
+  }
+}
+```
+
 ## Still perfer Redux-like reducers?
 
 ```js

package/dist/cjs/index.js

@@ -70,7 +70,7 @@ const createSelector = ({
     },
     subscribe: createSubscriber(items)
   };
-  plugin == null ? void 0 : plugin(selector, config);
+  plugin == null || plugin(selector, config);
   return selector;
 };
 const selector = /*#__PURE__*/createSelector();

package/dist/esm/vanilla/selector.js

@@ -24,7 +24,7 @@ const createSelector = ({
     },
     subscribe: createSubscriber(items)
   };
-  plugin == null ? void 0 : plugin(selector, config);
+  plugin == null || plugin(selector, config);
   return selector;
 };
 const selector = /*#__PURE__*/createSelector();

package/dist/middleware/cjs/index.js

@@ -2,9 +2,10 @@
 
 const applyMiddleware = (middlewares, {
   fromRight
-} = {}) => (api, config) => middlewares[fromRight ? 'reduceRight' : 'reduce']((set, middleware) => middleware ? middleware(Object.assign({}, api, {
+} = {}) => (api, config) => middlewares[fromRight ? 'reduceRight' : 'reduce']((set, middleware) => middleware ? middleware({
+  ...api,
   set
-}), config) : set, api.set);
+}, config) : set, api.set);
 
 const persist = ({
   prefix,

package/dist/middleware/esm/applyMiddleware.js

@@ -1,7 +1,8 @@
 const applyMiddleware = (middlewares, {
   fromRight
-} = {}) => (api, config) => middlewares[fromRight ? 'reduceRight' : 'reduce']((set, middleware) => middleware ? middleware(Object.assign({}, api, {
+} = {}) => (api, config) => middlewares[fromRight ? 'reduceRight' : 'reduce']((set, middleware) => middleware ? middleware({
+  ...api,
   set
-}), config) : set, api.set);
+}, config) : set, api.set);
 
 export { applyMiddleware };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactish-state",
-  "version": "0.11.0-alpha.0",
+  "version": "0.11.1",
   "description": "Simple, decentralized state management for React.",
   "author": "Zheng Song",
   "license": "MIT",
@@ -27,13 +27,13 @@
     "bundle": "rollup -c",
     "watch": "rollup -c -w",
     "clean": "rm -Rf dist types",
-    "post-build": "rm -Rf types/__tests__",
     "types": "tsc",
+    "posttypes": "rm -Rf types/__tests__",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "pret": "prettier -c .",
     "pret:fix": "prettier -w .",
-    "build": "run-s pret clean lint types bundle post-build",
+    "build": "run-s pret clean lint types bundle",
     "test": "jest",
     "test:watch": "jest --watch",
     "eg": "npm run dev --prefix examples"
@@ -73,35 +73,35 @@
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.4",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
     "@redux-devtools/extension": "^3.2.5",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.0",
-    "@types/react": "^18.0.34",
-    "@types/use-sync-external-store": "^0.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.58.0",
-    "@typescript-eslint/parser": "^5.58.0",
+    "@types/jest": "^29.5.7",
+    "@types/react": "^18.2.34",
+    "@types/use-sync-external-store": "^0.0.5",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "babel-plugin-pure-annotations": "^0.1.2",
-    "eslint": "^8.38.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-hooks-addons": "^0.3.1",
-    "immer": "^9.0.21",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "immer": "^10.0.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.7",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.20.2",
-    "typescript": "^5.0.4"
+    "rollup": "^4.3.0",
+    "typescript": "^5.2.2"
   }
 }