feat(middleware): support enable/disable sepecific middleware (#160)

* fix(ts): fix build error

* feat(middleware): support enable/disable sepecific middleware

* test(middleware): add test for middleware config

* fix(type): fix logger.enable return type

Author: ArrayZoneYour

README.md

@@ -665,13 +665,13 @@ export default connect(
 Just remove consoleDebugger middleware.
 
 ```typescript
-import { actionMiddlewares } from 'react-model'
+import { middlewares } from 'react-model'
 // Find the index of middleware
-const consoleDebuggerMiddlewareIndex = actionMiddlewares.indexOf(
-  middlewares.consoleDebugger
-)
-// Remove it
-actionMiddlewares.splice(consoleDebuggerMiddlewareIndex, 1)
+
+// Disable all actions' log
+middlewares.config.logger.enable = false
+// Disable logs from specific type of actions
+middlewares.config.logger.enable = ({ actionName }) => ['increment'].indexOf(actionName) !== -1
 ```
 
 [⇧ back to top](#table-of-contents)

__test__/disable-dubugger.spec.ts

@@ -0,0 +1,26 @@
+// @ts-ignore
+/// <reference path="./index.d.ts" />
+import { Model, middlewares } from '../src'
+import { Counter } from '.'
+import { renderHook } from '@testing-library/react-hooks'
+
+middlewares.config.logger.enable = ({ actionName }) =>
+  ['increment'].indexOf(actionName) !== -1
+
+describe('PubSub', () => {
+  test('run callback when specific action run', async () => {
+    let actions: any
+    let count = 0
+    const { useStore, subscribe } = Model({ Counter })
+    subscribe('Counter', 'increment', () => (count += 1))
+    subscribe('Counter', 'add', () => (count += 10))
+    renderHook(() => {
+      ;[, actions] = useStore('Counter')
+    })
+    await actions.increment()
+    await actions.add(1)
+    await actions.increment()
+    await actions.increment()
+    expect(count).toBe(13)
+  })
+})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-model",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "The State management library for React",
   "main": "./dist/react-model.js",
   "umd:main": "./dist/react-model.umd.js",
@@ -20,8 +20,8 @@
     "immer": "^6.0.0"
   },
   "peerDependencies": {
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0"
+    "react": ">=16.3.0",
+    "react-dom": ">=16.3.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.1.0",
@@ -44,7 +44,7 @@
     "react-dom": "^16.8.4",
     "react-test-renderer": "^16.8.6",
     "remark-cli": "^8.0.0",
-   "remark-lint": "^7.0.0",
+    "remark-lint": "^7.0.0",
     "remark-preset-lint-recommended": "^4.0.0",
     "ts-jest": "^25.1.0",
     "tslint": "^5.14.0",

src/helper.ts

@@ -58,11 +58,11 @@ const setPartialState = (
   if (typeof partialState === 'function') {
     let state = Global.State[name]
     state = produce(state, partialState)
-    Global.State = produce(Global.State, s => {
+    Global.State = produce(Global.State, (s) => {
       s[name] = state
     })
   } else {
-    Global.State = produce(Global.State, s => {
+    Global.State = produce(Global.State, (s) => {
       s[name] = {
         ...s[name],
         ...partialState
@@ -73,20 +73,20 @@ const setPartialState = (
 }
 
 const timeout = <T>(ms: number, data: T): Promise<T> =>
-  new Promise(resolve =>
+  new Promise((resolve) =>
     setTimeout(() => {
       console.log(ms)
       resolve(data)
     }, ms)
   )
 
-const getInitialState = async <T extends any>(
+const getInitialState = async <T extends { modelName: string }>(
   context?: T,
   config?: { isServer?: boolean }
 ) => {
   const ServerState: { [name: string]: any } = { __FROM_SERVER__: true }
   await Promise.all(
-    Object.keys(Global.State).map(async modelName => {
+    Object.keys(Global.State).map(async (modelName) => {
       if (
         !context ||
         !context.modelName ||

src/index.d.ts

@@ -94,6 +94,14 @@ type Context<S = {}> = InnerContext<S> & {
 
 type Middleware<S = {}> = (C: Context<S>, M: Middleware<S>[]) => void
 
+type MiddlewareConfig = {
+  logger: {
+    enable: boolean | ((context: BaseContext) => boolean)
+  }
+  devtools: { enable: boolean }
+  tryCatch: { enable: boolean }
+}
+
 interface Models<State = any, ActionKeys = any, ExtContext extends {} = {}> {
   [name: string]:
     | ModelType<State, ActionKeys, ExtContext>

src/middlewares.ts

@@ -1,9 +1,25 @@
 import { getCache, setPartialState, timeout } from './helper'
 // -- Middlewares --
 
+const config: MiddlewareConfig = {
+  logger: {
+    enable: process.env.NODE_ENV !== 'production'
+  },
+  devtools: {
+    enable: process.env.NODE_ENV !== 'production'
+  },
+  tryCatch: {
+    enable: process.env.NODE_ENV === 'production'
+  }
+}
+
 const tryCatch: Middleware = async (context, restMiddlewares) => {
   const { next } = context
-  await next(restMiddlewares).catch((e: any) => console.log(e))
+  if (config.tryCatch.enable) {
+    await next(restMiddlewares).catch((e: any) => console.log(e))
+  } else {
+    await next(restMiddlewares)
+  }
 }
 
 const getNewState: Middleware = async (context, restMiddlewares) => {
@@ -78,37 +94,46 @@ const subscription: Middleware = async (context, restMiddlewares) => {
 
 const consoleDebugger: Middleware = async (context, restMiddlewares) => {
   const { Global } = context
-  console.group(
-    `%c ${
-      context.modelName
-    } State Change %c ${new Date().toLocaleTimeString()}`,
-    'color: gray; font-weight: lighter;',
-    'color: black; font-weight: bold;'
-  )
-  console.log(
-    '%c Previous',
-    `color: #9E9E9E; font-weight: bold`,
-    Global.State[context.modelName]
-  )
-  console.log(
-    '%c Action',
-    `color: #03A9F4; font-weight: bold`,
-    context.actionName,
-    `payload: ${context.params}`
-  )
-  await context.next(restMiddlewares)
-  console.log(
-    '%c Next',
-    `color: #4CAF50; font-weight: bold`,
-    Global.State[context.modelName]
-  )
-  console.groupEnd()
+
+  if (
+    config.logger.enable === true ||
+    (typeof config.logger.enable === 'function' &&
+      config.logger.enable(context))
+  ) {
+    console.group(
+      `%c ${
+        context.modelName
+      } State Change %c ${new Date().toLocaleTimeString()}`,
+      'color: gray; font-weight: lighter;',
+      'color: black; font-weight: bold;'
+    )
+    console.log(
+      '%c Previous',
+      `color: #9E9E9E; font-weight: bold`,
+      Global.State[context.modelName]
+    )
+    console.log(
+      '%c Action',
+      `color: #03A9F4; font-weight: bold`,
+      context.actionName,
+      `payload: ${context.params}`
+    )
+    await context.next(restMiddlewares)
+    console.log(
+      '%c Next',
+      `color: #4CAF50; font-weight: bold`,
+      Global.State[context.modelName]
+    )
+    console.groupEnd()
+  } else {
+    await context.next(restMiddlewares)
+  }
 }
 
 const devToolsListener: Middleware = async (context, restMiddlewares) => {
   const { Global } = context
   await context.next(restMiddlewares)
-  if (Global.withDevTools) {
+  if (Global.withDevTools && config.devtools.enable) {
     Global.devTools.send(
       `${context.modelName}_${context.actionName}`,
       Global.State
@@ -137,20 +162,17 @@ const communicator: Middleware = async (context, restMiddlewares) => {
   await next(restMiddlewares)
 }
 
-let actionMiddlewares = [
+const actionMiddlewares = [
+  tryCatch,
+  consoleDebugger,
+  devToolsListener,
   getNewState,
   setNewState,
   stateUpdater,
   communicator,
   subscription
 ]
 
-if (process.env.NODE_ENV === 'production') {
-  actionMiddlewares = [tryCatch, ...actionMiddlewares]
-} else {
-  actionMiddlewares = [consoleDebugger, devToolsListener, ...actionMiddlewares]
-}
-
 const middlewares = {
   communicator,
   consoleDebugger,
@@ -160,7 +182,8 @@ const middlewares = {
   setNewState,
   stateUpdater,
   subscription,
-  tryCatch
+  tryCatch,
+  config
 }
 
 const applyMiddlewares = async (