feat(selector): support selector for useStore (#167)

* fix(type): fix useStore type issue

* feat(selector): support selector for useStore

* test(middleware): update middlewares' config's testcases

Author: ArrayZoneYour

__test__/dubugger.spec.ts

@@ -1,12 +1,13 @@
 // @ts-ignore
 console.group = undefined
 /// <reference path="./index.d.ts" />
-import { Model } from '../src'
+import { Model, middlewares } from '../src'
 import { Counter } from '.'
 import { renderHook } from '@testing-library/react-hooks'
 
 describe('PubSub', () => {
   test('run callback when specific action run', async () => {
+    middlewares.config.logger.enable = true
     let actions: any
     let count = 0
     const { useStore, subscribe } = Model({ Counter })
@@ -20,5 +21,6 @@ describe('PubSub', () => {
     await actions.increment()
     await actions.increment()
     expect(count).toBe(13)
+    middlewares.config.logger.enable = false
   })
 })

__test__/middlewares/devToolsListener.spec.ts

@@ -4,9 +4,11 @@
   send: () => {}
 }
 import { renderHook } from '@testing-library/react-hooks'
-import { Model } from '../../src'
+import { Model, middlewares } from '../../src'
 import { Counter } from '..'
 
+middlewares.config.devtools.enable = true
+
 describe('withDevTools', () => {
   test("won't break the behavior without DevTools", async () => {
     let state: any

__test__/middlewares/tryCatch.spec.ts

@@ -1,6 +1,6 @@
 /// <reference path="../index.d.ts" />
 process.env.NODE_ENV = 'production'
-import { Model } from '../../src'
+import { Model, middlewares } from '../../src'
 import { ErrorCounter } from '..'
 import { renderHook } from '@testing-library/react-hooks'
 
@@ -17,4 +17,18 @@ describe('tryCatch', () => {
     })
     expect(errNum).toBe(0)
   })
+
+  test("throw actions' error when turn off tryCatch middleware", async () => {
+    let actions: any
+    let errNum = 0
+    middlewares.config.tryCatch.enable = false
+    const { useStore } = Model({ ErrorCounter })
+    renderHook(() => {
+      ;[, actions] = useStore('ErrorCounter')
+    })
+    await actions.increment().catch(() => {
+      errNum += 1
+    })
+    expect(errNum).toBe(1)
+  })
 })

package.json

@@ -1,12 +1,13 @@
 {
   "name": "react-model",
-  "version": "4.0.0-rc.1",
+  "version": "4.0.0-rc.6",
   "description": "The State management library for React",
   "main": "./dist/react-model.js",
+  "module": "./dist/react-model.esm.js",
   "umd:main": "./dist/react-model.umd.js",
   "types": "./src/index",
   "scripts": {
-    "build": "microbundle --sourcemap false --jsx React.createElement",
+    "build": "microbundle --sourcemap false --jsx React.createElement --output dist --tsconfig ./tsconfig.json",
     "commit": "git-cz",
     "lint-ts": "tslint -c tslint.json 'src/**/*.ts'",
     "lint-md": "remark .",
@@ -67,5 +68,13 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  }
+  },
+  "browserslist": [
+    "edge 17",
+    "firefox 70",
+    "chrome 48",
+    "safari 12.1",
+    "android 4.0",
+    "samsung 9.2"
+  ]
 }

src/helper.ts

@@ -43,8 +43,9 @@ const consumerActions = (
   modelContext: { modelName: string }
 ) => {
   const ret: any = {}
-  Object.entries<Action>(actions).forEach(([key, action]) => {
-    ret[key] = consumerAction(action, modelContext)
+  Object.keys(actions).forEach((key) => {
+    // @ts-ignore
+    ret[key] = consumerAction(actions[key], modelContext)
   })
   return ret
 }

src/index.tsx

@@ -1,5 +1,7 @@
+// Remember to remove types: ./src/index when run `yarn build` command
 /// <reference path="./index.d.ts" />
-import produce from 'immer'
+import produce, { enableES5 } from 'immer'
+enableES5()
 import * as React from 'react'
 import { PureComponent, useEffect, useState, useRef } from 'react'
 import Global from './global'
@@ -84,7 +86,8 @@ function Model<M extends Models, MT extends ModelType, E>(
       })
     }
     extContext && (Global.Context['__global'] = extContext)
-    Object.entries(models).forEach(([name, model]) => {
+    Object.keys(models).forEach((name) => {
+      const model = models[name]
       if (model.__ERROR__) {
         // Fallback State and Actions when model schema is invalid
         console.error(name + " model's schema is invalid")
@@ -193,11 +196,11 @@ const getActions = (
   baseContext: Partial<Context> = { type: 'outer' }
 ) => {
   const updaters: any = {}
-  Object.entries(Global.Actions[modelName]).forEach(
-    ([key, action]) =>
+  Object.keys(Global.Actions[modelName]).forEach(
+    (key) =>
       (updaters[key] = async (params: any, middlewareConfig?: any) => {
         const context: InnerContext = {
-          action,
+          action: Global.Actions[modelName][key],
           actionName: key,
           consumerActions,
           middlewareConfig,

src/middlewares.ts

@@ -3,13 +3,13 @@ import { getCache, setPartialState, timeout, shallowEqual } from './helper'
 
 const config: MiddlewareConfig = {
   logger: {
-    enable: process.env.NODE_ENV !== 'production'
+    enable: false
   },
   devtools: {
-    enable: process.env.NODE_ENV !== 'production'
+    enable: false
   },
   tryCatch: {
-    enable: process.env.NODE_ENV === 'production'
+    enable: true
   }
 }
 
@@ -59,7 +59,17 @@ const getNewStateWithCache = (maxTime: number = 5000): Middleware => async (
 }
 
 const setNewState: Middleware = async (context, restMiddlewares) => {
-  const { modelName, newState, next } = context
+  const { modelName, newState, next, Global } = context
+  if (Global.Setter.functionSetter[modelName]) {
+    Object.keys(Global.Setter.functionSetter[modelName]).map((key) => {
+      const setter = Global.Setter.functionSetter[modelName][key]
+      if (setter) {
+        if (setter.selector && !setter.selectorRef) {
+          setter.selectorRef = setter.selector(Global.State[modelName])
+        }
+      }
+    })
+  }
   if (newState) {
     setPartialState(modelName, newState)
     await next(restMiddlewares)

tsconfig.json

@@ -16,5 +16,5 @@
     "strict": true
   },
   "include": ["./src/*"],
-  "exclude": ["node_modules", "./dist/*"]
+  "exclude": ["node_modules", "dist"]
 }