fix: 添加vuex插件

.fatherrc.js

@@ -17,6 +17,7 @@ const headPkgs = [
     "fes-plugin-locale",
     "fes-plugin-enums",
     "fes-plugin-jest",
+    "fes-plugin-vuex",
     "create-fes-app",
 ];
 const tailPkgs = [];

packages/fes-plugin-jest/package.json

@@ -42,7 +42,7 @@
     "jest-transform-stub": "^2.0.0",
     "jest-watch-typeahead": "^0.6.1",
     "babel-jest": "^26.6.3",
-    "vue-jest": "^5.0.5-0",
+    "vue-jest": "^5.0.0-0",
     "ts-jest": "^26.5.0",
     "whatwg-fetch": "^3.4.1",
     "typescript": "~4.1.2"

packages/fes-plugin-vuex/.fatherrc.js

@@ -0,0 +1,3 @@
+export default {
+  disableTypeCheck: false,
+};

packages/fes-plugin-vuex/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-present webank
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/fes-plugin-vuex/README.md

@@ -0,0 +1,2 @@
+
+

packages/fes-plugin-vuex/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@webank/fes-plugin-vuex",
+  "version": "2.0.0-alpha.2",
+  "description": "@webank/fes-plugin-vuex",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+    "directory": "packages/fes-plugin-vuex"
+  },
+  "keywords": [
+    "fes"
+  ],
+  "author": "aringlai",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/WeBankFinTech/fes.js/issues"
+  },
+  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@webank/fes": "^2.0.0-alpha.0",
+    "vue": "^3.0.4",
+    "vuex": "^4.0.0-rc.2"
+  }
+}

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

@@ -0,0 +1,83 @@
+import { readdirSync, readFileSync, statSync } from 'fs';
+import { join } from 'path';
+
+const namespace = 'plugin-vuex';
+
+export default (api) => {
+    const {
+        paths,
+        utils: { Mustache }
+    } = api;
+
+    /**
+     * 获取文件夹所有JS文件路径
+     * @param {string} dir
+     */
+    function getDirFilePaths(dir) {
+        const dirs = readdirSync(dir);
+        let pathList = [];
+        for (const name of dirs) {
+            const path = join(dir, name);
+            const info = statSync(path);
+            if (info.isDirectory()) {
+                pathList = pathList.concat(getDirFilePaths(path));
+            } else if (path.endsWith('.js')) {
+                pathList.push(path);
+            }
+        }
+        return pathList;
+    }
+
+    /**
+     * 解析vuex模块及插件文件
+     * @param {Array<string>} pathList 文件路径
+     * @param {string} root
+     */
+    function parseStore(pathList, root) {
+        const store = {
+            modules: [],
+            plugins: [],
+            importModules: [],
+            importPlugins: []
+        };
+        for (const path of pathList) {
+            const moduleName = path.replace(root, '').replace('.js', '').replace(/(\/|\.|-|_)\S/g, text => text[1].toUpperCase());
+            if (path.indexOf('plugin') > -1) {
+                store.importPlugins.push(`import ${moduleName} from '${path}'`);
+                store.plugins.push(moduleName);
+            } else {
+                store.importModules.push(`import ${moduleName} from '${path}'`);
+                store.modules.push(`${moduleName}`);
+            }
+        }
+        return store;
+    }
+
+    const absRuntimeFilePath = join(namespace, 'runtime.js');
+    api.onGenerateFiles(() => {
+        const root = join(paths.absSrcPath, 'stores');
+        const storePaths = getDirFilePaths(root);
+        const store = parseStore(storePaths, join(root, '/'));
+
+        // 文件写出
+        api.writeTmpFile({
+            path: absRuntimeFilePath,
+            content: Mustache.render(
+                readFileSync(join(__dirname, 'runtime/runtime.tpl'), 'utf-8'),
+                {
+                    IMPORT_MODULES: store.importModules.join('\n'),
+                    IMPORT_PLUGINS: store.importPlugins.join('\n'),
+                    MODULES: `{ ${store.modules.join(', ')} }`,
+                    PLUGINS: `[${store.plugins.join(', ')}]`
+                }
+            )
+        });
+
+        api.copyTmpFiles({
+            namespace,
+            path: join(__dirname, 'runtime'),
+            ignore: ['.tpl']
+        });
+    });
+    api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
+};

packages/fes-plugin-vuex/src/runtime/runtime.tpl

@@ -0,0 +1,10 @@
+import { createStore } from 'vuex'
+{{{IMPORT_MODULES}}}
+{{{IMPORT_PLUGINS}}}
+
+export function onAppCreated({ app }) {
+    app.use(createStore({
+        modules: {{{MODULES}}},
+        plugins: {{{PLUGINS}}}
+    }))
+}

packages/fes-template/.eslintrc.js

@@ -1,8 +1,12 @@
 module.exports = {
-    extends: [require.resolve('@webank/eslint-config-webank')],
+    extends: ['@webank/eslint-config-webank/vue.js'],
+    overrides: [
+        {
             files: [
                 '**/__tests__/*.{j,t}s?(x)',
                 '**/tests/unit/**/*.spec.{j,t}s?(x)'
+            ]
+        }
     ],
     env: {
         jest: true

packages/fes-template/package.json

@@ -54,8 +54,10 @@
     "@webank/fes-plugin-model": "^2.0.0-alpha.0",
     "@webank/fes-plugin-enums": "^2.0.0-alpha.0",
     "@webank/fes-plugin-jest": "^2.0.0-alpha.0",
+    "@webank/fes-plugin-vuex": "^2.0.0-alpha.0",
     "ant-design-vue": "2.0.0-rc.3",
-    "vue": "3.0.4"
+    "vue": "3.0.4",
+    "vuex": "^4.0.0-rc.2"
   },
   "private": true
 }

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

@@ -9,6 +9,7 @@
         <div v-for="item in enumsGet('status')" :key="item.key">{{item.value}}：{{item.key}}</div>
         <div v-for="item in roles" :key="item.key">{{item.name}}：{{item.disabled}}</div>
         <div>{{enumsGet('roles', '2', { dir: 'eName' })}}</div>
+        <h4>Vuex <button @click="increment">click me：{{count}}</button></h4>
     </div>
 </template>
 <config>
@@ -18,7 +19,8 @@
 }
 </config>
 <script>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
+import { useStore } from 'vuex';
 import {
     access, useAccess, useRouter, useI18n, locale, enums
 } from '@webank/fes';
@@ -63,6 +65,8 @@ export default {
             ]
         });
         console.log(roles);
+        const store = useStore();
+        console.log('store==>', store);
         onMounted(() => {
             console.log(router);
             setTimeout(() => {
@@ -82,7 +86,9 @@ export default {
             accessOnepicess,
             t: localI18n.t,
             enumsGet: enums.get,
-            roles
+            roles,
+            count: computed(() => store.state.counter.count),
+            increment: () => store.commit('counter/increment')
         };
     }
 };

packages/fes-template/src/stores/counter.js

@@ -0,0 +1,23 @@
+export default {
+    namespaced: true,
+    state: () => ({
+        count: 0
+    }),
+    mutations: {
+        increment(state) {
+            state.count++;
+        }
+    },
+    getters: {
+        doubleCount(state) {
+            return state.count * 2;
+        }
+    },
+    actions: {
+        asyncIncrement({ commit }) {
+            setTimeout(() => {
+                commit('increment');
+            }, 2000);
+        }
+    }
+};

packages/fes-template/src/stores/plugin-loger.js

@@ -0,0 +1,3 @@
+import { createLogger } from 'vuex';
+
+export default createLogger();

packages/fes-template/src/stores/user.js

@@ -0,0 +1,25 @@
+export default {
+    namespaced: true,
+    state: () => ({
+        name: 'aring',
+        age: 20,
+        count: 0
+    }),
+    mutations: {
+        increment(state) {
+            state.count++;
+        }
+    },
+    getters: {
+        doubleCount(state) {
+            return state.count * 2;
+        }
+    },
+    actions: {
+        asyncIncrement({ commit }) {
+            setTimeout(() => {
+                commit('increment');
+            }, 2000);
+        }
+    }
+};