reactish-state 0.5.3 → 0.7.0

package/dist/cjs/index.js

@@ -2,33 +2,39 @@
 
 var shim = require('use-sync-external-store/shim');
 
-var state = function state(initialValue, actionCreator) {
-  var value = initialValue;
-  var listeners = new Set();
-  function get() {
-    return value;
-  }
-  function set(newValue) {
-    var nextValue = typeof newValue === 'function' ? newValue(value) : newValue;
-    if (!Object.is(value, nextValue)) {
-      value = nextValue;
-      listeners.forEach(function (listener) {
-        listener();
-      });
-    }
-  }
-  return {
-    get: get,
-    set: set,
-    subscribe: function subscribe(listener) {
-      listeners.add(listener);
-      return function () {
-        listeners["delete"](listener);
-      };
-    },
-    actions: actionCreator && actionCreator(set, get)
+var createState = function createState(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    middleware = _ref.middleware;
+  return function (initialValue, actionCreator, context) {
+    var value = initialValue;
+    var listeners = new Set();
+    var get = function get() {
+      return value;
+    };
+    var set = function set(newValue) {
+      var nextValue = typeof newValue === 'function' ? newValue(value) : newValue;
+      if (!Object.is(value, nextValue)) {
+        value = nextValue;
+        listeners.forEach(function (listener) {
+          listener();
+        });
+      }
+    };
+    if (middleware) set = middleware(set, get, context);
+    return {
+      get: get,
+      set: set,
+      subscribe: function subscribe(listener) {
+        listeners.add(listener);
+        return function () {
+          listeners["delete"](listener);
+        };
+      },
+      actions: actionCreator && actionCreator(set, get)
+    };
   };
 };
+var state = /*#__PURE__*/createState();
 
 var isEqual = function isEqual(args1, args2) {
   for (var i = 0; i < args1.length; i++) {
@@ -74,6 +80,7 @@ var useSnapshot = function useSnapshot(state) {
   return shim.useSyncExternalStore(state.subscribe, state.get, state.get);
 };
 
+exports.createState = createState;
 exports.selector = selector;
 exports.state = state;
 exports.useSnapshot = useSnapshot;

package/dist/es/index.js

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

package/dist/es/vanilla/state.js

@@ -1,29 +1,35 @@
-var state = function state(initialValue, actionCreator) {
-  var value = initialValue;
-  var listeners = new Set();
-  function get() {
-    return value;
-  }
-  function set(newValue) {
-    var nextValue = typeof newValue === 'function' ? newValue(value) : newValue;
-    if (!Object.is(value, nextValue)) {
-      value = nextValue;
-      listeners.forEach(function (listener) {
-        listener();
-      });
-    }
-  }
-  return {
-    get: get,
-    set: set,
-    subscribe: function subscribe(listener) {
-      listeners.add(listener);
-      return function () {
-        listeners["delete"](listener);
-      };
-    },
-    actions: actionCreator && actionCreator(set, get)
+var createState = function createState(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    middleware = _ref.middleware;
+  return function (initialValue, actionCreator, context) {
+    var value = initialValue;
+    var listeners = new Set();
+    var get = function get() {
+      return value;
+    };
+    var set = function set(newValue) {
+      var nextValue = typeof newValue === 'function' ? newValue(value) : newValue;
+      if (!Object.is(value, nextValue)) {
+        value = nextValue;
+        listeners.forEach(function (listener) {
+          listener();
+        });
+      }
+    };
+    if (middleware) set = middleware(set, get, context);
+    return {
+      get: get,
+      set: set,
+      subscribe: function subscribe(listener) {
+        listeners.add(listener);
+        return function () {
+          listeners["delete"](listener);
+        };
+      },
+      actions: actionCreator && actionCreator(set, get)
+    };
   };
 };
+var state = /*#__PURE__*/createState();
 
-export { state };
+export { createState, state };

package/dist/middleware/cjs/index.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var applyMiddleware = function applyMiddleware() {
+  for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) {
+    middlewares[_key] = arguments[_key];
+  }
+  return function (set, get, context) {
+    middlewares.forEach(function (middleware) {
+      return set = middleware(set, get, context);
+    });
+    return set;
+  };
+};
+
+var persist = function persist(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    prefix = _ref.prefix,
+    _ref$getStorage = _ref.getStorage,
+    getStorage = _ref$getStorage === void 0 ? function () {
+      return localStorage;
+    } : _ref$getStorage;
+  var states = [];
+  var middleware = function middleware(set, get, context) {
+    var key = context ? context.key : '';
+    if (!key) throw new Error('[reactish-state] state should be provided with a string `key` in the context object when the `persist` middleware is used.');
+    if (prefix) key = prefix + key;
+    states.push([key, set]);
+    return function (value) {
+      set(value);
+      getStorage().setItem(key, JSON.stringify(get()));
+    };
+  };
+  middleware.hydrate = function () {
+    states.forEach(function (_ref2) {
+      var key = _ref2[0],
+        set = _ref2[1];
+      var value = getStorage().getItem(key);
+      value && set(JSON.parse(value));
+    });
+    states.length = 0;
+  };
+  return middleware;
+};
+
+exports.applyMiddleware = applyMiddleware;
+exports.persist = persist;

package/dist/middleware/es/applyMiddleware.js

@@ -0,0 +1,13 @@
+var applyMiddleware = function applyMiddleware() {
+  for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) {
+    middlewares[_key] = arguments[_key];
+  }
+  return function (set, get, context) {
+    middlewares.forEach(function (middleware) {
+      return set = middleware(set, get, context);
+    });
+    return set;
+  };
+};
+
+export { applyMiddleware };

package/dist/middleware/es/index.js

@@ -0,0 +1,2 @@
+export { applyMiddleware } from './applyMiddleware.js';
+export { persist } from './persist.js';

package/dist/middleware/es/persist.js

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

package/middleware/package.json

@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "main": "../dist/middleware/cjs/index.js",
+  "module": "../dist/middleware/es/index.js",
+  "types": "../types/middleware/index.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactish-state",
-  "version": "0.5.3",
+  "version": "0.7.0",
   "description": "",
   "author": "Zheng Song",
   "license": "MIT",
@@ -10,7 +10,8 @@
   "sideEffects": false,
   "files": [
     "dist/",
-    "types/"
+    "types/",
+    "middleware"
   ],
   "scripts": {
     "start": "run-p watch \"types -- --watch\"",

package/types/common.d.ts

@@ -0,0 +1,10 @@
+export declare type Getter<T> = () => T;
+export declare type Setter<T> = (newValue: T | ((value: T) => T)) => void;
+export declare type Listener = () => void;
+export interface Reactish<T> {
+    get: Getter<T>;
+    subscribe: (listener: Listener) => () => void;
+}
+export interface Middleware {
+    <T, X>(set: Setter<T>, get: Getter<T>, context?: X): Setter<T>;
+}

package/types/index.d.ts

@@ -1,3 +1,4 @@
-export { state } from './vanilla/state';
+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/applyMiddleware.d.ts

@@ -0,0 +1,3 @@
+import type { Middleware } from '../common';
+declare const applyMiddleware: (...middlewares: Middleware[]) => Middleware;
+export { applyMiddleware };

package/types/middleware/index.d.ts

@@ -0,0 +1,2 @@
+export { applyMiddleware } from './applyMiddleware';
+export { persist } from './persist';

package/types/middleware/logger.d.ts

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

package/types/middleware/persist.d.ts

@@ -0,0 +1,10 @@
+import type { Middleware } from '../common';
+interface PersistMiddleware extends Middleware {
+    hydrate(): void;
+}
+declare type Persist = (options?: {
+    prefix?: string;
+    getStorage?: () => Pick<Storage, 'getItem' | 'setItem'>;
+}) => PersistMiddleware;
+declare const persist: Persist;
+export { persist };

package/types/react/useSnapshot.d.ts

@@ -1,3 +1,3 @@
-import type { Reactish } from '../vanilla/common';
+import type { Reactish } from '../common';
 declare const useSnapshot: <T>(state: Reactish<T>) => T;
 export { useSnapshot };

package/types/vanilla/selector.d.ts

@@ -1,4 +1,4 @@
-import type { Reactish, Listener } from './common';
+import type { Reactish, Listener } from '../common';
 declare type ReactishArray = Reactish<unknown>[];
 declare type ReactishValueArray<R extends ReactishArray> = {
     [index in keyof R]: ReturnType<R[index]['get']>;

package/types/vanilla/state.d.ts

@@ -1,9 +1,13 @@
-import type { Reactish } from './common';
-declare type Setter<T> = (newValue: T | ((value: T) => T)) => void;
-declare type ActionCreator<T, A> = ((set: Setter<T>, get: () => T) => A) | undefined;
+import type { Setter, Reactish, 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 const state: <T, A>(initialValue: T, actionCreator?: ActionCreator<T, A>) => State<T, A, ActionCreator<T, A>>;
-export { state };
+declare type StateCreator = <T, A, X>(initialValue: T, actionCreator?: ActionCreator<T, A>, context?: X) => State<T, A, ActionCreator<T, A>>;
+declare const createState: <T, X>({ middleware }?: {
+    middleware?: Middleware | undefined;
+}) => <A>(initialValue: T, actionCreator?: ActionCreator<T, A>, context?: X | undefined) => State<T, A, ActionCreator<T, A>>;
+declare const state: StateCreator;
+export type { StateCreator };
+export { state, createState };

package/types/vanilla/common.d.ts

@@ -1,5 +0,0 @@
-export declare type Listener = () => void;
-export interface Reactish<T> {
-    get: () => T;
-    subscribe: (listener: Listener) => () => void;
-}