0.9.0

dist/cjs/index.js

@@ -90,8 +90,10 @@ var createSelector = function createSelector(_temp) {
 };
 var selector = /*#__PURE__*/createSelector();
 
-var useSnapshot = function useSnapshot(state) {
-  return shim.useSyncExternalStore(state.subscribe, state.get, state.get);
+var useSnapshot = function useSnapshot(_ref) {
+  var subscribe = _ref.subscribe,
+    get = _ref.get;
+  return shim.useSyncExternalStore(subscribe, get, get);
 };
 
 exports.createSelector = createSelector;

dist/es/react/useSnapshot.js

@@ -1,7 +1,9 @@
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
-var useSnapshot = function useSnapshot(state) {
-  return useSyncExternalStore(state.subscribe, state.get, state.get);
+var useSnapshot = function useSnapshot(_ref) {
+  var subscribe = _ref.subscribe,
+    get = _ref.get;
+  return useSyncExternalStore(subscribe, get, get);
 };
 
 export { useSnapshot };

dist/middleware/cjs/index.js

@@ -65,29 +65,42 @@ var persist = function persist(_temp) {
       var key = _ref3[0],
         set = _ref3[1];
       var value = getStorage().getItem(key);
-      value && set(JSON.parse(value), 'HYDRATE');
+      value && set(JSON.parse(value), "HYDRATE_" + key);
     });
     states.length = 0;
   };
   return middleware;
 };
 
-var reduxDevtools = function reduxDevtools(_ref, config) {
-  var set = _ref.set,
-    get = _ref.get;
-  if (typeof window === 'undefined' || !window.__REDUX_DEVTOOLS_EXTENSION__) return set;
-  var devtools = window.__REDUX_DEVTOOLS_EXTENSION__.connect({
-    name: config == null ? void 0 : config.key
+var reduxDevtools = function reduxDevtools(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    name = _ref.name;
+  var devtoolsExt;
+  if (typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)) return function (_ref2) {
+    var set = _ref2.set;
+    return set;
+  };
+  var devtools = devtoolsExt.connect({
+    name: name
   });
-  devtools.init(get());
-  return function (value, action) {
-    set.apply(null, arguments);
-    devtools.send(typeof action === 'string' ? {
-      type: action
-    } : action || {
-      type: 'SET',
-      value: value
-    }, get());
+  var mergedState = {};
+  return function (_ref3, config) {
+    var set = _ref3.set,
+      get = _ref3.get;
+    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 `reduxDevtools` middleware is used.');
+    mergedState[key] = get();
+    devtools.init(mergedState);
+    return function (value, action) {
+      set.apply(null, arguments);
+      mergedState[key] = get();
+      devtools.send(typeof action === 'string' ? {
+        type: action
+      } : action || {
+        type: "SET_" + key,
+        value: value
+      }, mergedState);
+    };
   };
 };
 

dist/middleware/es/persist.js

@@ -23,7 +23,7 @@ var persist = function persist(_temp) {
       var key = _ref3[0],
         set = _ref3[1];
       var value = getStorage().getItem(key);
-      value && set(JSON.parse(value), 'HYDRATE');
+      value && set(JSON.parse(value), "HYDRATE_" + key);
     });
     states.length = 0;
   };

dist/middleware/es/reduxDevtools.js

@@ -1,19 +1,32 @@
-var reduxDevtools = function reduxDevtools(_ref, config) {
-  var set = _ref.set,
-    get = _ref.get;
-  if (typeof window === 'undefined' || !window.__REDUX_DEVTOOLS_EXTENSION__) return set;
-  var devtools = window.__REDUX_DEVTOOLS_EXTENSION__.connect({
-    name: config == null ? void 0 : config.key
+var reduxDevtools = function reduxDevtools(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    name = _ref.name;
+  var devtoolsExt;
+  if (typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)) return function (_ref2) {
+    var set = _ref2.set;
+    return set;
+  };
+  var devtools = devtoolsExt.connect({
+    name: name
   });
-  devtools.init(get());
-  return function (value, action) {
-    set.apply(null, arguments);
-    devtools.send(typeof action === 'string' ? {
-      type: action
-    } : action || {
-      type: 'SET',
-      value: value
-    }, get());
+  var mergedState = {};
+  return function (_ref3, config) {
+    var set = _ref3.set,
+      get = _ref3.get;
+    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 `reduxDevtools` middleware is used.');
+    mergedState[key] = get();
+    devtools.init(mergedState);
+    return function (value, action) {
+      set.apply(null, arguments);
+      mergedState[key] = get();
+      devtools.send(typeof action === 'string' ? {
+        type: action
+      } : action || {
+        type: "SET_" + key,
+        value: value
+      }, mergedState);
+    };
   };
 };
 

dist/plugin/cjs/index.js

@@ -14,17 +14,29 @@ var applyPlugin = function applyPlugin() {
   };
 };
 
-var reduxDevtools = function reduxDevtools(_ref, config) {
-  var get = _ref.get,
-    subscribe = _ref.subscribe;
-  if (typeof window === 'undefined' || !window.__REDUX_DEVTOOLS_EXTENSION__) return;
-  var devtools = window.__REDUX_DEVTOOLS_EXTENSION__.connect({
-    name: config == null ? void 0 : config.key
-  });
-  devtools.init(get());
-  subscribe(function () {
-    return devtools.init(get());
+var reduxDevtools = function reduxDevtools(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    name = _ref.name;
+  var devtoolsExt;
+  if (typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)) return function () {
+    /*do nothing*/
+  };
+  var devtools = devtoolsExt.connect({
+    name: name
   });
+  var mergedState = {};
+  return function (_ref2, config) {
+    var get = _ref2.get,
+      subscribe = _ref2.subscribe;
+    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 `reduxDevtools` plugin is used.');
+    var updateState = function updateState() {
+      mergedState[key] = get();
+      devtools.init(mergedState);
+    };
+    updateState();
+    subscribe(updateState);
+  };
 };
 
 exports.applyPlugin = applyPlugin;

dist/plugin/es/reduxDevtools.js

@@ -1,14 +1,26 @@
-var reduxDevtools = function reduxDevtools(_ref, config) {
-  var get = _ref.get,
-    subscribe = _ref.subscribe;
-  if (typeof window === 'undefined' || !window.__REDUX_DEVTOOLS_EXTENSION__) return;
-  var devtools = window.__REDUX_DEVTOOLS_EXTENSION__.connect({
-    name: config == null ? void 0 : config.key
-  });
-  devtools.init(get());
-  subscribe(function () {
-    return devtools.init(get());
+var reduxDevtools = function reduxDevtools(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    name = _ref.name;
+  var devtoolsExt;
+  if (typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)) return function () {
+    /*do nothing*/
+  };
+  var devtools = devtoolsExt.connect({
+    name: name
   });
+  var mergedState = {};
+  return function (_ref2, config) {
+    var get = _ref2.get,
+      subscribe = _ref2.subscribe;
+    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 `reduxDevtools` plugin is used.');
+    var updateState = function updateState() {
+      mergedState[key] = get();
+      devtools.init(mergedState);
+    };
+    updateState();
+    subscribe(updateState);
+  };
 };
 
 export { reduxDevtools };

package.json

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

types/middleware/reduxDevtools.d.ts

@@ -1,3 +1,6 @@
 import type { Middleware } from '../common';
-declare const reduxDevtools: Middleware;
+declare type ReduxDevtools = (options?: {
+    name?: string;
+}) => Middleware;
+declare const reduxDevtools: ReduxDevtools;
 export { reduxDevtools };

types/plugin/reduxDevtools.d.ts

@@ -1,3 +1,6 @@
 import type { Plugin } from '../common';
-declare const reduxDevtools: Plugin;
+declare type ReduxDevtools = (options?: {
+    name?: string;
+}) => Plugin;
+declare const reduxDevtools: ReduxDevtools;
 export { reduxDevtools };

types/react/useSnapshot.d.ts

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