Merge pull request #17 from szhsin/feat/prod-devtools

feat: prod devtools
szhsin · Jan 8, 2023 · 55bba92 · 55bba92
2 parents feb021c + 713d9bc
commit 55bba92
Show file tree

Hide file tree

Showing 20 changed files with 55 additions and 59 deletions.
diff --git a/dist/middleware/cjs/index.js b/dist/middleware/cjs/index.js
@@ -22,9 +22,9 @@ var applyMiddleware = function applyMiddleware(middlewares, _temp) {
     fromRight = _ref.fromRight;
   return function (api, config) {
     return middlewares[fromRight ? 'reduceRight' : 'reduce'](function (set, middleware) {
-      return middleware(_extends({}, api, {
+      return middleware ? middleware(_extends({}, api, {
         set: set
-      }), config);
+      }), config) : set;
     }, api.set);
   };
 };
@@ -75,17 +75,14 @@ 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;
-  };
+  if (process.env.NODE_ENV === 'production' || typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)) return;
   var devtools = devtoolsExt.connect({
     name: name
   });
   var mergedState = {};
-  return function (_ref3, config) {
-    var set = _ref3.set,
-      get = _ref3.get;
+  return function (_ref2, config) {
+    var set = _ref2.set,
+      get = _ref2.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();

diff --git a/dist/middleware/es/applyMiddleware.js b/dist/middleware/es/applyMiddleware.js
@@ -5,9 +5,9 @@ var applyMiddleware = function applyMiddleware(middlewares, _temp) {
     fromRight = _ref.fromRight;
   return function (api, config) {
     return middlewares[fromRight ? 'reduceRight' : 'reduce'](function (set, middleware) {
-      return middleware(_extends({}, api, {
+      return middleware ? middleware(_extends({}, api, {
         set: set
-      }), config);
+      }), config) : set;
     }, api.set);
   };
 };

diff --git a/dist/middleware/es/reduxDevtools.js b/dist/middleware/es/reduxDevtools.js
@@ -2,17 +2,14 @@ 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;
-  };
+  if (process.env.NODE_ENV === 'production' || typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)) return;
   var devtools = devtoolsExt.connect({
     name: name
   });
   var mergedState = {};
-  return function (_ref3, config) {
-    var set = _ref3.set,
-      get = _ref3.get;
+  return function (_ref2, config) {
+    var set = _ref2.set,
+      get = _ref2.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();

diff --git a/dist/plugin/cjs/index.js b/dist/plugin/cjs/index.js
@@ -3,7 +3,7 @@
 var applyPlugin = function applyPlugin(plugins) {
   return function (reactish, config) {
     return plugins.forEach(function (plugin) {
-      return plugin(reactish, config);
+      return plugin == null ? void 0 : plugin(reactish, config);
     });
   };
 };
@@ -12,9 +12,7 @@ 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*/
-  };
+  if (process.env.NODE_ENV === 'production' || typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)) return;
   var devtools = devtoolsExt.connect({
     name: name
   });

diff --git a/dist/plugin/es/applyPlugin.js b/dist/plugin/es/applyPlugin.js
@@ -1,7 +1,7 @@
 var applyPlugin = function applyPlugin(plugins) {
   return function (reactish, config) {
     return plugins.forEach(function (plugin) {
-      return plugin(reactish, config);
+      return plugin == null ? void 0 : plugin(reactish, config);
     });
   };
 };

diff --git a/dist/plugin/es/reduxDevtools.js b/dist/plugin/es/reduxDevtools.js
@@ -2,9 +2,7 @@ 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*/
-  };
+  if (process.env.NODE_ENV === 'production' || typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)) return;
   var devtools = devtoolsExt.connect({
     name: name
   });

diff --git a/examples/examples/todo/Filters.tsx b/examples/examples/todo/Filters.tsx
@@ -2,7 +2,7 @@ import { useSnapshot } from 'reactish-state';
 import { visibilityFilterState, VisibilityFilter } from './todo';
 import styles from './styles.module.css';
 
-const filterList: VisibilityFilter[] = ['ALL', 'IN_PROGRESS', 'COMPLETED'];
+const filterList: VisibilityFilter[] = ['ALL', 'ACTIVE', 'COMPLETED'];
 
 const Filters = () => {
   const visibilityFilter = useSnapshot(visibilityFilterState);

diff --git a/examples/examples/todo/todo.ts b/examples/examples/todo/todo.ts
@@ -39,7 +39,7 @@ const todoListState = state(
   { key: 'todoList' }
 );
 
-type VisibilityFilter = 'ALL' | 'COMPLETED' | 'IN_PROGRESS';
+type VisibilityFilter = 'ALL' | 'ACTIVE' | 'COMPLETED';
 const visibilityFilterState = state('ALL' as VisibilityFilter, null, { key: 'filter' });
 
 const selector = createSelector({ plugin: devtoolsPlugin({ name: 'todoApp-selector' }) });
@@ -52,7 +52,7 @@ const visibleTodoList = selector(
         return todoList;
       case 'COMPLETED':
         return todoList.filter(({ isCompleted }) => isCompleted);
-      case 'IN_PROGRESS':
+      case 'ACTIVE':
         return todoList.filter(({ isCompleted }) => !isCompleted);
     }
   },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactish-state",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "",
   "author": "Zheng Song",
   "license": "MIT",
@@ -11,7 +11,8 @@
   "files": [
     "dist/",
     "types/",
-    "middleware"
+    "middleware/",
+    "plugin/"
   ],
   "scripts": {
     "start": "run-p watch \"types -- --watch\"",

diff --git a/src/__tests__/middleware/applyMiddleware.test.ts b/src/__tests__/middleware/applyMiddleware.test.ts
@@ -11,7 +11,7 @@ const createMiddleware: (arg: unknown) => Middleware =
     middleware(arg, ...args);
   };
 
-const middlewares = [createMiddleware(1), createMiddleware(2), createMiddleware(3)];
+const middlewares = [createMiddleware(1), createMiddleware(2), createMiddleware(3), undefined];
 
 test('applyMiddleware from left', () => {
   const state = createState({

diff --git a/src/__tests__/middleware/reduxDevtools.test.ts b/src/__tests__/middleware/reduxDevtools.test.ts
@@ -52,8 +52,7 @@ describe('reduxDevtools', () => {
   });
 });
 
-test('reduxDevtools should return original set when there is no redux devtools extension', () => {
-  const set = jest.fn();
+test('reduxDevtools should do nothing when there is no redux devtools extension', () => {
   // eslint-disable-next-line
-  expect(reduxDevtools()({ set } as any)).toBe(set);
+  expect(reduxDevtools()).toBeUndefined();
 });
diff --git a/src/middleware/applyMiddleware.ts b/src/middleware/applyMiddleware.ts
@@ -1,13 +1,13 @@
 import type { Middleware } from '../common';
 
 const applyMiddleware: (
-  middlewares: Middleware[],
+  middlewares: (Middleware | undefined)[],
   options?: { fromRight?: boolean }
 ) => Middleware =
   (middlewares, { fromRight } = {}) =>
   (api, config) =>
     middlewares[fromRight ? 'reduceRight' : 'reduce'](
-      (set, middleware) => middleware({ ...api, set }, config),
+      (set, middleware) => (middleware ? middleware({ ...api, set }, config) : set),
       api.set
     );
 

diff --git a/src/middleware/reduxDevtools.ts b/src/middleware/reduxDevtools.ts
@@ -1,12 +1,16 @@
 import type {} from '@redux-devtools/extension';
 import type { Middleware } from '../common';
 
-type ReduxDevtools = (options?: { name?: string }) => Middleware;
+type ReduxDevtools = (options?: { name?: string }) => Middleware | undefined;
 
 const reduxDevtools: ReduxDevtools = ({ name } = {}) => {
   let devtoolsExt: Window['__REDUX_DEVTOOLS_EXTENSION__'];
-  if (typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__))
-    return ({ set }) => set;
+  if (
+    process.env.NODE_ENV === 'production' ||
+    typeof window === 'undefined' ||
+    !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)
+  )
+    return;
 
   const devtools = devtoolsExt.connect({ name });
   const mergedState: { [index: string]: unknown } = {};

diff --git a/src/plugin/applyPlugin.ts b/src/plugin/applyPlugin.ts
@@ -1,6 +1,6 @@
 import type { Plugin } from '../common';
 
-const applyPlugin: (plugins: Plugin[]) => Plugin = (plugins) => (reactish, config) =>
-  plugins.forEach((plugin) => plugin(reactish, config));
+const applyPlugin: (plugins: (Plugin | undefined)[]) => Plugin = (plugins) => (reactish, config) =>
+  plugins.forEach((plugin) => plugin?.(reactish, config));
 
 export { applyPlugin };
diff --git a/src/plugin/reduxDevtools.ts b/src/plugin/reduxDevtools.ts
@@ -1,14 +1,16 @@
 import type {} from '@redux-devtools/extension';
 import type { Plugin } from '../common';
 
-type ReduxDevtools = (options?: { name?: string }) => Plugin;
+type ReduxDevtools = (options?: { name?: string }) => Plugin | undefined;
 
 const reduxDevtools: ReduxDevtools = ({ name } = {}) => {
   let devtoolsExt: Window['__REDUX_DEVTOOLS_EXTENSION__'];
-  if (typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__))
-    return () => {
-      /*do nothing*/
-    };
+  if (
+    process.env.NODE_ENV === 'production' ||
+    typeof window === 'undefined' ||
+    !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)
+  )
+    return;
 
   const devtools = devtoolsExt.connect({ name });
   const mergedState: { [index: string]: unknown } = {};

diff --git a/types/middleware/applyMiddleware.d.ts b/types/middleware/applyMiddleware.d.ts
@@ -1,5 +1,5 @@
 import type { Middleware } from '../common';
-declare const applyMiddleware: (middlewares: Middleware[], options?: {
+declare const applyMiddleware: (middlewares: (Middleware | undefined)[], options?: {
     fromRight?: boolean;
 }) => Middleware;
 export { applyMiddleware };
diff --git a/types/middleware/reduxDevtools.d.ts b/types/middleware/reduxDevtools.d.ts
@@ -1,6 +1,6 @@
 import type { Middleware } from '../common';
 declare type ReduxDevtools = (options?: {
     name?: string;
-}) => Middleware;
+}) => Middleware | undefined;
 declare const reduxDevtools: ReduxDevtools;
 export { reduxDevtools };
diff --git a/types/plugin/applyPlugin.d.ts b/types/plugin/applyPlugin.d.ts
@@ -1,3 +1,3 @@
 import type { Plugin } from '../common';
-declare const applyPlugin: (plugins: Plugin[]) => Plugin;
+declare const applyPlugin: (plugins: (Plugin | undefined)[]) => Plugin;
 export { applyPlugin };
diff --git a/types/plugin/reduxDevtools.d.ts b/types/plugin/reduxDevtools.d.ts
@@ -1,6 +1,6 @@
 import type { Plugin } from '../common';
 declare type ReduxDevtools = (options?: {
     name?: string;
-}) => Plugin;
+}) => Plugin | undefined;
 declare const reduxDevtools: ReduxDevtools;
 export { reduxDevtools };