reactish-state 0.6.0 → 0.7.1

package/dist/cjs/index.js

@@ -4,8 +4,8 @@ var shim = require('use-sync-external-store/shim');
 
 var createState = function createState(_temp) {
   var _ref = _temp === void 0 ? {} : _temp,
-    enhancer = _ref.enhancer;
-  return function (initialValue, actionCreator) {
+    middleware = _ref.middleware;
+  return function (initialValue, actionCreator, context) {
     var value = initialValue;
     var listeners = new Set();
     var get = function get() {
@@ -20,7 +20,7 @@ var createState = function createState(_temp) {
         });
       }
     };
-    if (enhancer) set = enhancer(set, get);
+    if (middleware) set = middleware(set, get, context);
     return {
       get: get,
       set: set,

package/dist/es/vanilla/state.js

@@ -1,7 +1,7 @@
 var createState = function createState(_temp) {
   var _ref = _temp === void 0 ? {} : _temp,
-    enhancer = _ref.enhancer;
-  return function (initialValue, actionCreator) {
+    middleware = _ref.middleware;
+  return function (initialValue, actionCreator, context) {
     var value = initialValue;
     var listeners = new Set();
     var get = function get() {
@@ -16,7 +16,7 @@ var createState = function createState(_temp) {
         });
       }
     };
-    if (enhancer) set = enhancer(set, get);
+    if (middleware) set = middleware(set, get, context);
     return {
       get: get,
       set: set,

package/dist/middleware/cjs/index.js

@@ -4,12 +4,59 @@ 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) {
-    middlewares.forEach(function (middleware) {
-      return set = middleware(set, get);
+  return function (set, get, context) {
+    return middlewares.reduceRight(function (prev, curr) {
+      return curr(prev, get, context);
+    }, set);
+  };
+};
+
+var devtools = function devtools(set, get, context) {
+  if (typeof window === 'undefined') return set;
+  var devtoolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__;
+  var extension = devtoolsExtension.connect({
+    name: context.key
+  });
+  extension.init(get());
+  return function (vaule) {
+    set(vaule);
+    extension.send({
+      type: 'anonymous',
+      vaule: vaule
+    }, get());
+  };
+};
+
+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));
     });
-    return set;
+    states.length = 0;
   };
+  return middleware;
 };
 
 exports.applyMiddleware = applyMiddleware;
+exports.devtools = devtools;
+exports.persist = persist;

package/dist/middleware/es/applyMiddleware.js

@@ -2,11 +2,10 @@ 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) {
-    middlewares.forEach(function (middleware) {
-      return set = middleware(set, get);
-    });
-    return set;
+  return function (set, get, context) {
+    return middlewares.reduceRight(function (prev, curr) {
+      return curr(prev, get, context);
+    }, set);
   };
 };
 

package/dist/middleware/es/devtools.js

@@ -0,0 +1,17 @@
+var devtools = function devtools(set, get, context) {
+  if (typeof window === 'undefined') return set;
+  var devtoolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__;
+  var extension = devtoolsExtension.connect({
+    name: context.key
+  });
+  extension.init(get());
+  return function (vaule) {
+    set(vaule);
+    extension.send({
+      type: 'anonymous',
+      vaule: vaule
+    }, get());
+  };
+};
+
+export { devtools };

package/dist/middleware/es/index.js

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

package/dist/middleware/es/logger.js

@@ -0,0 +1,10 @@
+/* eslint-disable no-console */
+var logger = function logger(set, get) {
+  return function (value) {
+    console.log('setting', value);
+    set(value);
+    console.log('next state', get());
+  };
+};
+
+export { logger };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactish-state",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "",
   "author": "Zheng Song",
   "license": "MIT",

package/types/common.d.ts

@@ -5,4 +5,6 @@ export interface Reactish<T> {
     get: Getter<T>;
     subscribe: (listener: Listener) => () => void;
 }
-export declare type Enhancer<T> = (set: Setter<T>, get: Getter<T>) => Setter<T>;
+export interface Middleware {
+    <T, X>(set: Setter<T>, get: Getter<T>, context?: X): Setter<T>;
+}

package/types/middleware/applyMiddleware.d.ts

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

package/types/middleware/devtools.d.ts

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

package/types/middleware/index.d.ts

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

@@ -1,13 +1,13 @@
-import type { Setter, Reactish, Enhancer } from '../common';
-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 type StateCreator = <T, A>(initialValue: T, actionCreator?: ActionCreator<T, A>) => State<T, A, ActionCreator<T, A>>;
-declare const createState: <T, A>({ enhancer }?: {
-    enhancer?: Enhancer<T> | undefined;
-}) => (initialValue: T, actionCreator?: ActionCreator<T, A>) => State<T, A, ActionCreator<T, A>>;
+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 };