reactish-state 0.7.2 → 0.8.1

package/dist/middleware/cjs/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var immer$1 = require('immer');
+
 var applyMiddleware = function applyMiddleware() {
   for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) {
     middlewares[_key] = arguments[_key];
@@ -11,17 +13,12 @@ var applyMiddleware = function applyMiddleware() {
   };
 };
 
-var reduxDevtools = function reduxDevtools(set, get, config) {
-  if (typeof window === 'undefined' || !window.__REDUX_DEVTOOLS_EXTENSION__) return set;
-  var devtools = window.__REDUX_DEVTOOLS_EXTENSION__.connect({
-    name: config == null ? void 0 : config.key
-  });
-  devtools.init(get());
-  return function (vaule) {
-    set(vaule);
-    devtools.send({
-      type: 'SET_STATE'
-    }, get());
+var immer = function immer(set) {
+  return function (value) {
+    for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      rest[_key - 1] = arguments[_key];
+    }
+    return set.apply(void 0, [typeof value === 'function' ? immer$1.produce(value) : value].concat(rest));
   };
 };
 
@@ -34,12 +31,12 @@ var persist = function persist(_temp) {
     } : _ref$getStorage;
   var states = [];
   var middleware = function middleware(set, get, config) {
-    var key = config ? config.key : '';
+    var key = (config == null ? void 0 : config.key) || '';
     if (!key) throw new Error('[reactish-state] state should be provided with a string `key` in the config object when the `persist` middleware is used.');
     if (prefix) key = prefix + key;
     states.push([key, set]);
-    return function (value) {
-      set(value);
+    return function () {
+      set.apply(void 0, arguments);
       getStorage().setItem(key, JSON.stringify(get()));
     };
   };
@@ -48,13 +45,31 @@ var persist = function persist(_temp) {
       var key = _ref2[0],
         set = _ref2[1];
       var value = getStorage().getItem(key);
-      value && set(JSON.parse(value));
+      value && set(JSON.parse(value), 'HYDRATE');
     });
     states.length = 0;
   };
   return middleware;
 };
 
+var reduxDevtools = function reduxDevtools(set, get, config) {
+  if (typeof window === 'undefined' || !window.__REDUX_DEVTOOLS_EXTENSION__) return set;
+  var devtools = window.__REDUX_DEVTOOLS_EXTENSION__.connect({
+    name: config == null ? void 0 : config.key
+  });
+  devtools.init(get());
+  return function (value, action) {
+    set.apply(null, arguments);
+    devtools.send(typeof action === 'string' ? {
+      type: action
+    } : action || {
+      type: 'SET',
+      value: value
+    }, get());
+  };
+};
+
 exports.applyMiddleware = applyMiddleware;
+exports.immer = immer;
 exports.persist = persist;
 exports.reduxDevtools = reduxDevtools;

package/dist/middleware/es/immer.js

@@ -0,0 +1,12 @@
+import { produce } from 'immer';
+
+var immer = function immer(set) {
+  return function (value) {
+    for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      rest[_key - 1] = arguments[_key];
+    }
+    return set.apply(void 0, [typeof value === 'function' ? produce(value) : value].concat(rest));
+  };
+};
+
+export { immer };

package/dist/middleware/es/index.js

@@ -1,3 +1,4 @@
 export { applyMiddleware } from './applyMiddleware.js';
-export { reduxDevtools } from './reduxDevtools.js';
+export { immer } from './immer.js';
 export { persist } from './persist.js';
+export { reduxDevtools } from './reduxDevtools.js';

package/dist/middleware/es/persist.js

@@ -7,12 +7,12 @@ var persist = function persist(_temp) {
     } : _ref$getStorage;
   var states = [];
   var middleware = function middleware(set, get, config) {
-    var key = config ? config.key : '';
+    var key = (config == null ? void 0 : config.key) || '';
     if (!key) throw new Error('[reactish-state] state should be provided with a string `key` in the config object when the `persist` middleware is used.');
     if (prefix) key = prefix + key;
     states.push([key, set]);
-    return function (value) {
-      set(value);
+    return function () {
+      set.apply(void 0, arguments);
       getStorage().setItem(key, JSON.stringify(get()));
     };
   };
@@ -21,7 +21,7 @@ var persist = function persist(_temp) {
       var key = _ref2[0],
         set = _ref2[1];
       var value = getStorage().getItem(key);
-      value && set(JSON.parse(value));
+      value && set(JSON.parse(value), 'HYDRATE');
     });
     states.length = 0;
   };

package/dist/middleware/es/reduxDevtools.js

@@ -4,10 +4,13 @@ var reduxDevtools = function reduxDevtools(set, get, config) {
     name: config == null ? void 0 : config.key
   });
   devtools.init(get());
-  return function (vaule) {
-    set(vaule);
-    devtools.send({
-      type: 'SET_STATE'
+  return function (value, action) {
+    set.apply(null, arguments);
+    devtools.send(typeof action === 'string' ? {
+      type: action
+    } : action || {
+      type: 'SET',
+      value: value
     }, get());
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactish-state",
-  "version": "0.7.2",
+  "version": "0.8.1",
   "description": "",
   "author": "Zheng Song",
   "license": "MIT",
@@ -29,7 +29,13 @@
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",
-    "react-dom": "^16.8 || ^17.0 || ^18.0"
+    "react-dom": "^16.8 || ^17.0 || ^18.0",
+    "immer": ">=6.0"
+  },
+  "peerDependenciesMeta": {
+    "immer": {
+      "optional": true
+    }
   },
   "dependencies": {
     "use-sync-external-store": "^1.2.0"
@@ -53,6 +59,7 @@
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-hooks-addons": "^0.3.1",
+    "immer": "^9.0.16",
     "jest": "^29.2.2",
     "jest-environment-jsdom": "^29.2.2",
     "npm-run-all": "^4.1.5",

package/types/common.d.ts

@@ -1,10 +1,16 @@
 export declare type Getter<T> = () => T;
-export declare type Setter<T> = (newValue: T | ((value: T) => T)) => void;
+export declare type Setter<T> = (newValue: T | ((value: T) => T), action?: string | {
+    type: string;
+    [key: string]: unknown;
+}) => void;
 export declare type Listener = () => void;
 export interface Reactish<T> {
     get: Getter<T>;
     subscribe: (listener: Listener) => () => void;
 }
+export interface Config {
+    key?: string;
+}
 export interface Middleware {
-    <T, X>(set: Setter<T>, get: Getter<T>, config?: X): Setter<T>;
+    <T>(set: Setter<T>, get: Getter<T>, config?: Config): Setter<T>;
 }

package/types/index.d.ts

@@ -1,4 +1,3 @@
 export { state, createState } from './vanilla/state';
 export { selector } from './vanilla/selector';
 export { useSnapshot } from './react/useSnapshot';
-export type { StateCreator } from './vanilla/state';

package/types/middleware/immer.d.ts

@@ -0,0 +1,3 @@
+import type { Middleware } from '../common';
+declare const immer: Middleware;
+export { immer };

package/types/middleware/index.d.ts

@@ -1,3 +1,4 @@
 export { applyMiddleware } from './applyMiddleware';
-export { reduxDevtools } from './reduxDevtools';
+export { immer } from './immer';
 export { persist } from './persist';
+export { reduxDevtools } from './reduxDevtools';

package/types/vanilla/state.d.ts

@@ -1,13 +1,11 @@
-import type { Setter, Reactish, Middleware } from '../common';
+import type { Setter, Reactish, Config, Middleware } from '../common';
 declare type ActionCreator<T, A> = ((set: Setter<T>, get: () => T) => A) | null | undefined;
 interface State<T, A = unknown, C extends ActionCreator<T, A> = undefined> extends Reactish<T> {
     set: Setter<T>;
     actions: C extends undefined ? never : A;
 }
-declare type StateCreator = <T, A, X>(initialValue: T, actionCreator?: ActionCreator<T, A>, config?: X) => State<T, A, ActionCreator<T, A>>;
-declare const createState: <T, X>({ middleware }?: {
+declare const createState: ({ middleware }?: {
     middleware?: Middleware | undefined;
-}) => <A>(initialValue: T, actionCreator?: ActionCreator<T, A>, config?: X | undefined) => State<T, A, ActionCreator<T, A>>;
-declare const state: StateCreator;
-export type { StateCreator };
+}) => <T, A>(initialValue: T, actionCreator?: ActionCreator<T, A>, config?: Config) => State<T, A, ActionCreator<T, A>>;
+declare const state: <T, A>(initialValue: T, actionCreator?: ActionCreator<T, A>, config?: Config) => State<T, A, ActionCreator<T, A>>;
 export { state, createState };

package/types/middleware/logger.d.ts

@@ -1,3 +0,0 @@
-import type { Middleware } from '../common';
-declare const logger: Middleware;
-export { logger };