feat: fes-plugin-model done

.fatherrc.js

@@ -4,7 +4,7 @@ import { join } from 'path';
 // utils must build before core
 // runtime must build before renderer-react
 
-const headPkgs = ['fes-runtime', 'fes-core', 'fes', 'fes-plugin-built-in', 'fes-plugin-request', 'fes-plugin-access', 'fes-plugin-state'];
+const headPkgs = ['fes-runtime', 'fes-core', 'fes', 'fes-plugin-built-in', 'fes-plugin-request', 'fes-plugin-access', 'fes-plugin-model'];
 const tailPkgs = [];
 // const otherPkgs = readdirSync(join(__dirname, 'packages')).filter(
 //   (pkg) =>

packages/fes-plugin-model/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@webank/fes-plugin-state",
+  "name": "@webank/fes-plugin-model",
   "version": "1.0.0",
   "description": "",
   "main": "lib/index.js",

packages/fes-plugin-model/src/index.js

@@ -5,7 +5,7 @@ import { lodash, winPath } from '@umijs/utils';
 import { getModels } from './utils/getModels';
 import { getTmpFile } from './utils/getTmpFile';
 
-const namespace = 'plugin-state';
+const namespace = 'plugin-model';
 
 export default (api) => {
     const {
@@ -55,7 +55,6 @@ export default (api) => {
         });
 
         const tmpFiles = getTmpFile(files, additionalModels, paths.absSrcPath);
-        console.log(tmpFiles);
 
         api.writeTmpFile({
             path: absCoreFilePath,
@@ -77,6 +76,13 @@ export default (api) => {
         });
     });
 
+    api.addPluginExports(() => [
+        {
+            specifiers: ['useModel'],
+            source: absCoreFilePath
+        }
+    ]);
+
     // 注册 getInitialState 方法
     api.addRuntimePluginKey(() => 'getInitialState');
 

packages/fes-plugin-model/src/models/initialState.tpl

@@ -0,0 +1,34 @@
+import { reactive, toRefs, onMounted } from "vue";
+import { plugin, ApplyPluginsType } from "@@/core/coreExports";
+
+async function getInitialState() {
+    const appGetInitialState = plugin.applyPlugins({
+        key: "getInitialState",
+        type: ApplyPluginsType.modify,
+        initialValue: {},
+    });
+    return await appGetInitialState;
+}
+const initState = reactive({
+    initialState: undefined,
+    loading: true,
+    error: undefined,
+});
+
+export default function initalModel() {
+    const refresh = async () => {
+        initState.loading = true;
+        initState.error = undefined;
+        try {
+            const res = await getInitialState();
+            initState.initialState = res;
+            initState.loading = false;
+        } catch (e) {
+            console.error(e)
+            initState.loading = false;
+            initState.error = e;
+        }
+    };
+    onMounted(refresh);
+    return toRefs(initState);
+}

packages/fes-plugin-model/src/template/core.tpl

@@ -0,0 +1,25 @@
+{{{userImports}}}
+{{{extraImports}}}
+
+export const models = { 
+{{#extraModels}}
+    {{{extraModels}}},
+{{/extraModels}}
+{{#userModels}}
+    {{{userModels}}},
+{{/userModels}}
+}
+const cache = new Map();
+export const useModel = (name) => {
+    const model = models[name];
+    if(model === undefined){
+        throw new Error("[plugin-model]: useModel, name is undefined.");
+    }
+    if (typeof model !== "function") {
+        throw new Error("[plugin-model]: useModel is not a function.");
+    }
+    if(!cache.has(name)){
+        cache.set(name, model())
+    }
+    return cache.get(name)
+};

packages/fes-plugin-model/src/template/runtime.tpl

@@ -0,0 +1,26 @@
+import { plugin, ApplyPluginsType } from "@@/core/coreExports";
+import { useModel } from "./core.js";
+
+export function rootContainer(childComponent, args) {
+    const useRuntimeConfig =
+        plugin.applyPlugins({
+            key: "initialStateConfig",
+            type: ApplyPluginsType.modify,
+            initialValue: {},
+        }) || {};
+    return {
+        setup() {
+            const { loading } = useModel("@@initialState") || {};
+            return () => {
+                if (loading.value) {
+                    return useRuntimeConfig.loading ? (
+                        <useRuntimeConfig.loading />
+                    ) : (
+                        <></>
+                    );
+                }
+                return <childComponent />;
+            };
+        },
+    };
+}

packages/fes-plugin-state/src/template/core.tpl

@@ -1,14 +0,0 @@
-{{{userImports}}}
-{{{extraImports}}}
-
-export const models = { 
-{{#extraModels}}
-    {{{extraModels}}},
-{{/extraModels}}
-{{#userModels}}
-    {{{userModels}}},
-{{/userModels}}
-}
-export const useModel = ()=>{
-
-}

packages/fes-plugin-state/src/template/runtime.tpl

@@ -1,25 +0,0 @@
-import { defineComponent, reactive, onMounted } from "vue";
-import { plugin, ApplyPluginsType } from "@@/core/coreExports";
-import { useModel } from "./core.js";
-
-export function rootContainer(childComponent, args) {
-    const useRuntimeConfig =
-        plugin.applyPlugins({
-            key: "initialStateConfig",
-            type: ApplyPluginsType.modify,
-            initialValue: {},
-        }) || {};
-    return () => {
-        const { loading = false } = useModel("@@initialState") || {};
-        if (loading) {
-            return useRuntimeConfig.loading ? (
-                <useRuntimeConfig.loading />
-            ) : (
-                <>
-                    <div>loading</div>
-                </>
-            );
-        }
-        return <childComponent />;
-    };
-}

packages/fes-template/package.json

@@ -35,7 +35,7 @@
     "vue": "^3.0.2",
     "@webank/fes": "^2.0.0",
     "@webank/fes-plugin-access": "^1.0.0",
-    "@webank/fes-plugin-state": "^1.0.0",
+    "@webank/fes-plugin-model": "^1.0.0",
     "ant-design-vue": "2.0.0-rc.3"
   }
 }

packages/fes-template/src/app.js

@@ -7,3 +7,19 @@ import PageLoading from '@/components/PageLoading.vue';
 export const initialStateConfig = {
     loading: <PageLoading />
 };
+
+/**
+ * 设置页面初始化状态
+ */
+export async function getInitialState() {
+    const syncFunc = () => new Promise((resolve) => {
+        setTimeout(() => {
+            resolve({
+                a: 1,
+                b: 2
+            });
+        }, 3000);
+    });
+    const res = await syncFunc();
+    return res;
+}

packages/fes-template/src/pages/index.vue

@@ -7,15 +7,19 @@
 
 <script>
 import { ref, onMounted } from 'vue';
-import { useAccess, access, router } from '@webank/fes';
+import {
+    useAccess, access, router, useModel
+} from '@webank/fes';
 
 const { setAccess } = access;
 export default {
     setup() {
         const fes = ref('fes upgrade to vue3');
         const accessOnepicess = useAccess('/onepiece');
+        const { initialState } = useModel('@@initialState');
         onMounted(() => {
-            console.log('mounted!!!');
+            console.log(initialState);
+            console.log('mounted1!!!');
             console.log(router);
             setAccess(new Promise((resolve) => {
                 setTimeout(() => {
@@ -24,6 +28,9 @@ export default {
             }));
             // router.push('/onepiece');
         });
+        onMounted(() => {
+            console.log('mounted2!!!');
+        });
         return {
             fes,
             accessOnepicess