feat: support selector (#13)

* feat: add optional selector support

* chore: remove unnecessary code

* chore: use lodash.isequal to filter changes

* test: add test cases

example/pages/index.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 import { useModel, Models } from 'umi';
 
 export default () => {
-  const { counter, increment, decrement } = useModel('counter');
+  const fullRet = useModel('counter');
+  const partialRet = useModel('counter', c => c.counter);
+
   return (<>
-    {counter}
-    <button onClick={increment}>add</button>
-    <button onClick={decrement}>minus</button>
+    {partialRet}
+    <button onClick={fullRet.increment}>add</button>
+    <button onClick={fullRet.decrement}>minus</button>
   </>);
 }

package.json

@@ -41,6 +41,7 @@
     "src"
   ],
   "dependencies": {
-    "globby": "7.1.1"
+    "globby": "7.1.1",
+    "lodash.isequal": "^4.5.0"
   }
 }

src/helpers/isEqual.ts

@@ -0,0 +1,2 @@
+// @ts-ignore
+export { default as isEqual } from 'lodash.isequal';

src/utils/getUseModelContent.ts

@@ -1,20 +1,37 @@
 import { join } from 'path';
 
 export default function() {
-  return `
-import { useState, useEffect, useContext } from 'react';
-//@ts-ignore
+  return `import { useState, useEffect, useContext, useRef } from 'react';
 import { UmiContext } from '${join(__dirname, '..', 'helpers', 'constant')}';
-import { Model } from './Provider';
+import { Model } from './provider';
+import { isEqual } from 'lodash';
 
-export const useModel = <T extends keyof Model<T>>(namespace: T) : Model<T>[T] => {
+export function useModel<T extends keyof Model<T>>(model: T): Model<T>[T]
+export function useModel<T extends keyof Model<T>, U>(model: T, selector: (model: Model<T>[T]) => U): U
+
+export function useModel<T extends keyof Model<T>, U>(
+  namespace: T, 
+  updater?: (model: Model<T>[T]) => U
+) : typeof updater extends undefined ? Model<T>[T] : ReturnType<NonNullable<typeof updater>>{
+
+  type RetState = typeof updater extends undefined ? Model<T>[T] : ReturnType<NonNullable<typeof updater>>
   const dispatcher = useContext<any>(UmiContext);
-  const [state, setState] = useState<Model<T>[T]>(
-    () => dispatcher.data![namespace] as Model<T>[T]
+  const updaterRef = useRef(updater);
+  updaterRef.current = updater;
+  const [state, setState] = useState<RetState>(
+    () => updaterRef.current ? updaterRef.current(dispatcher.data![namespace]) : dispatcher.data![namespace]
   );
+
   useEffect(() => {
     const handler = (e: any) => {
-      setState(e);
+      if(updater && updaterRef.current){
+        const ret = updaterRef.current(e);
+        if(!isEqual(ret, state)){
+          setState(ret);
+        }
+      } else {
+        setState(e);
+      }
     }
     try {
       dispatcher.callbacks![namespace]!.add(handler);
@@ -26,7 +43,7 @@ export const useModel = <T extends keyof Model<T>>(namespace: T) : Model<T>[T] =
       dispatcher.callbacks![namespace]!.delete(handler);
     }
   }, [namespace])
-  return state!;
+  return state;
 };
 `;
 }

test/fixtures/modelDNE/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useModel } from './.umi/useModel';
+
+export default () => {
+  const ret = useModel('user');
+  return (<>
+    <h2 data-testid="error">component should not break</h2>
+    <h2 data-testid="ret">{`ret is: ${ret}`}</h2>
+  </>);
+}

test/fixtures/modelDNE/test.js

@@ -0,0 +1,5 @@
+
+export default async function ({ getByTestId }) {
+  expect(getByTestId('error').innerHTML).toEqual('component should not break');
+  expect(getByTestId('ret').innerHTML).toEqual('ret is: undefined');
+}

test/fixtures/modelWithDependencies/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useModel } from './.umi/useModel';
+
+export default () => {
+  const { switchRole } = useModel('auth');
+  const message = useModel('message');
+  return (<>
+    <h2 data-testid="message">{message}</h2>
+    <button onClick={switchRole}>switch</button>
+  </>);
+}

test/fixtures/modelWithDependencies/models/auth.js

@@ -0,0 +1,7 @@
+import { useState } from 'react';
+
+export default () => {
+  const [ role, setRole ] = useState('admin');
+  const switchRole = () => setRole(r => r === 'admin' ? 'user' : 'admin')
+  return { role, switchRole };
+}

test/fixtures/modelWithDependencies/models/message.js

@@ -0,0 +1,7 @@
+import { useState } from 'react';
+import { useModel } from '../.umi/useModel';
+
+export default () => {
+  const { role } = useModel('auth');
+  return role === 'admin' ? 'Hello admin' : 'Hello user';
+}

test/fixtures/modelWithDependencies/test.js

@@ -0,0 +1,8 @@
+
+export default async function ({ getByTestId, getByText, fireEvent }) {
+  expect(getByTestId('message').innerHTML).toEqual('Hello admin');
+  fireEvent.click(getByText('switch'));
+  expect(getByTestId('message').innerHTML).toEqual('Hello user');
+  fireEvent.click(getByText('switch'));
+  expect(getByTestId('message').innerHTML).toEqual('Hello admin');
+}

test/fixtures/modelWithError/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useModel } from './.umi/useModel';
+
+export default () => {
+  const ret = useModel('name');
+  return (<>
+    <h2 data-testid="count">{`${ret}`}</h2>
+  </>);
+}

test/fixtures/modelWithError/models/name.js

@@ -0,0 +1,6 @@
+import { useState } from 'react';
+
+export default () => {
+  const data = {};
+  return { name: data.user.name };
+}

test/fixtures/modelWithError/test.js

@@ -0,0 +1,6 @@
+
+export default async function ({ getByTestId }) {
+  console.error = jest.fn();
+  // expect(console.error).toHaveBeenCalledTimes(1);
+  expect(getByTestId('count').innerHTML).toEqual('undefined');
+}

test/fixtures/modelWithSelector/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useModel } from './.umi/useModel';
+
+export default () => {
+  const { isAdult, name } = useModel('user', user => ({ name: user.name, isAdult: user.age > 18 }));
+  return (<>
+    <h2 data-testid="user">{name} is {isAdult ? 'an adult' : 'a teen'}</h2>
+  </>);
+}

test/fixtures/modelWithSelector/models/user.js

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+export default () => {
+  return {
+    name: 'Troy',
+    email: '[email protected]',
+    gender: 'male',
+    height: '6\'2',
+    age: 24,
+  }
+}

test/fixtures/modelWithSelector/test.js

@@ -0,0 +1,4 @@
+
+export default async function ({ getByTestId }) {
+  expect(getByTestId('user').innerHTML).toEqual('Troy is an adult');
+}

test/index.test.tsx

@@ -34,7 +34,7 @@ readdirSync(fixtures)
       const renderRet = render(
         <Provider><App /></Provider>
       );
-      await require(join(fixture, 'test.ts')).default({
+      await require(join(fixture, 'test.js')).default({
         ...renderRet,
         fireEvent,
         delay,