feat(plugins/dva): support immer and dva-loading, Close umijs#399, Close

umijs#398
xierenyuan · Mar 14, 2022 · 2606ea9 · 2606ea9
1 parent 5f91ac5
commit 2606ea9
Show file tree

Hide file tree

Showing 6 changed files with 380 additions and 826 deletions.
diff --git a/examples/with-dva/.umirc.ts b/examples/with-dva/.umirc.ts
@@ -1,4 +1,9 @@
 export default {
   plugins: ['@umijs/plugins/dist/dva'],
-  dva: {},
+  dva: {
+    immer: {
+      enableES5: true,
+      enableAllPlugins: true,
+    },
+  },
 };
diff --git a/examples/with-dva/models/count.ts b/examples/with-dva/models/count.ts
@@ -1,9 +1,19 @@
+const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
+
 export default {
   namespace: 'count',
-  state: 0,
+  state: {
+    num: 0,
+  },
   reducers: {
-    add(state: number) {
-      return state + 1;
+    add(state: any) {
+      state.num += 1;
+    },
+  },
+  effects: {
+    *addAsync(_action: any, { put }: any) {
+      yield delay(1000);
+      yield put({ type: 'add' });
     },
   },
 };
diff --git a/examples/with-dva/pages/index.tsx b/examples/with-dva/pages/index.tsx
@@ -7,22 +7,35 @@ import { connect } from 'umi';
 function mapStateToProps(state: any) {
   return {
     count: state.count,
+    loading: state.loading,
   };
 }
 
 export default connect(mapStateToProps)(function Page(props: any) {
   return (
     <div>
-      <h1 className={styles.title}>Count {props.count}</h1>
-      <button
-        onClick={() => {
-          props.dispatch({
-            type: 'count/add',
-          });
-        }}
-      >
-        Add
-      </button>
+      <h1 className={styles.title}>Count {props.count.num}</h1>
+      <div>
+        <button
+          onClick={() => {
+            props.dispatch({
+              type: 'count/add',
+            });
+          }}
+        >
+          Add
+        </button>
+        <button
+          onClick={() => {
+            props.dispatch({
+              type: 'count/addAsync',
+            });
+          }}
+        >
+          Add Async
+        </button>
+      </div>
+      <div>{props.loading.global ? 'loading... ' : ''}</div>
     </div>
   );
 });
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
@@ -31,6 +31,8 @@
     "babel-plugin-import": "^1.13.3",
     "dayjs": "^1.10.8",
     "dva-core": "^2.0.4",
+    "dva-immer": "^1.0.0",
+    "dva-loading": "^3.0.22",
     "event-emitter": "~0.3.5",
     "fast-deep-equal": "3.1.3",
     "lodash": "^4.17.21",

diff --git a/packages/plugins/src/dva.ts b/packages/plugins/src/dva.ts
@@ -4,6 +4,7 @@ import { IApi } from 'umi';
 import { chalk } from 'umi/plugin-utils';
 import { Model, ModelUtils } from './utils/modelUtils';
 import { withTmpPath } from './utils/withTmpPath';
+import { winPath } from '@umijs/utils';
 
 export default (api: IApi) => {
   const pkgPath = join(__dirname, '../libs/dva.ts');
@@ -13,6 +14,7 @@ export default (api: IApi) => {
       schema(Joi) {
         return Joi.object({
           extraModels: Joi.array().items(Joi.string()),
+          immer: Joi.object(),
         });
       },
     },
@@ -52,6 +54,16 @@ export default (api: IApi) => {
 // It's faked dva
 // aliased to @umijs/plugins/templates/dva
 import { create, Provider } from 'dva';
+import createLoading from '${winPath(require.resolve('dva-loading'))}';
+${
+  api.config.dva?.immer
+    ? `
+import dvaImmer, { enableES5, enableAllPlugins } from '${winPath(
+        require.resolve('dva-immer'),
+      )}';
+`
+    : ''
+}
 import React, { useRef } from 'react';
 import { history } from 'umi';
 import { models } from './models';
@@ -73,6 +85,10 @@ export function RootContainer(props: any) {
         },
       },
     );
+    app.current.use(createLoading());
+    ${api.config.dva?.immer ? `app.current.use(dvaImmer());` : ''}
+    ${api.config.dva?.immer?.enableES5 ? `enableES5();` : ''}
+    ${api.config.dva?.immer?.enableAllPlugins ? `enableAllPlugins();` : ''}
     for (const id of Object.keys(models)) {
       app.current.model(models[id].model);
     }