feat: switch to TypeScript, custom ESLint config, update deps

.editorconfig

@@ -1,12 +1,11 @@
 # http://editorconfig.org
 
 root = true
-lib
 
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true

.eslintrc.js

@@ -1,14 +1,21 @@
 module.exports = {
-    extends: ['@webank/eslint-config-webank/vue.js'],
+  root: true,
+  extends: ['@daotl/eslint-config-vue/typescript'],
+  parserOptions: {
+    project: 'tsconfig.json',
+  },
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
   overrides: [
     {
       files: [
         '**/__tests__/*.{j,t}s?(x)',
-                '**/tests/unit/**/*.spec.{j,t}s?(x)'
+        '**/tests/unit/**/*.spec.{j,t}s?(x)',
-            ]
-        }
       ],
       env: {
-        jest: true
+        jest: true,
+      },
+    },
+  ],
 }
-};

.fes.js

@@ -1,26 +1,34 @@
 // .fes.js 只负责管理编译时配置，只能使用plain Object
 
-
 export default {
   publicPath: './',
+  // TODO: `alias` doesn't support TS for now
+  // alias: {
+  //   '~': 'src',
+  // },
   access: {
     roles: {
-            admin: ["*"],
+      admin: ['*'],
-            manager: ["/"]
+      manager: ['/'],
-        }
+    },
   },
   layout: {
-        title: "Fes.js",
+    title: 'Fes.js',
     footer: 'Created by MumbleFe',
     multiTabs: false,
-        menus: [{
+    menus: [
-            name: 'index'
+      {
-        }]
+        name: 'index',
+      },
+    ],
   },
   devServer: {
-        port: 8000
+    port: 8000,
   },
   enums: {
-        status: [['0', '无效的'], ['1', '有效的']]
+    status: [
+      ['0', '无效的'],
+      ['1', '有效的'],
+    ],
+  },
 }
-};

.fes.prod.js

@@ -1,6 +1,5 @@
 // .fes.js 只负责管理编译时配置，只能使用plain Object
 
-
 export default {
-    publicPath: ''
+  publicPath: '',
-};
+}

.prettierrc

@@ -1,4 +0,0 @@
-{
-    "singleQuote": true,
-    "trailingComma": "none"
-}

README.md

@@ -1,3 +1,3 @@
-# fes-template
+# fes-starter
 
-Template for [fes.js](https://github.com/WeBankFinTech/fes.js).
+A [fes.js](https://github.com/WeBankFinTech/fes.js) + TypeScript starter template.

package.json

@@ -1,14 +1,19 @@
 {
-  "name": "@fesjs/template",
+  "name": "@daotl/fes-starter",
   "version": "2.0.0",
-  "description": "fes项目模版",
+  "description": "A fes.js + TypeScript starter template",
   "scripts": {
     "build": "fes build",
     "prod": "FES_ENV=prod fes build",
     "analyze": "ANALYZE=1 fes build",
     "dev": "fes dev",
-    "test:unit": "fes test:unit"
+    "test:unit": "fes test:unit",
+    "lint": "npm run eslint && npm run stylelint",
+    "lint:fix": "npm run eslint:fix && npm run stylelint:fix",
+    "eslint": "npx eslint src/**/*.{js,ts,tsx,vue}",
+    "eslint:fix": "npx eslint src/**/*.{js,ts,tsx,vue} --fix"
   },
+  "prettier": "@daotl/prettier-config",
   "keywords": [
     "管理端",
     "fes",
@@ -16,44 +21,32 @@
     "easy",
     "strong"
   ],
-  "files": [
-    ".eslintrc.js",
-    ".gitignore",
-    ".fes.js",
-    ".fes.prod.js",
-    "mock.js",
-    "package.json",
-    "README.md",
-    "tsconfig.json",
-    "/src",
-    "/config"
-  ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+    "url": "git+https://github.com/daotl/fes-starter.git"
-    "directory": "packages/fes-template"
   },
-  "author": "harrywan",
+  "author": "Nex Zhu <hitnexup@gmail.com>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    "url": "https://github.com/daotl/fes-starter/issues"
   },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+  "homepage": "https://github.com/daotl/fes-starter#readme",
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "^3.2.6",
+    "@daotl/eslint-config-vue": "0.2.3",
-    "@webank/eslint-config-webank": "0.4.2"
+    "@daotl/prettier-config": "^0.1.2",
+    "@daotl/tsconfig": "^0.0.4",
+    "@vue/compiler-sfc": "^3.2.26"
   },
   "dependencies": {
-    "@fesjs/fes": "^2.0.0",
+    "@fesjs/fes": "^2.0.11",
-    "@fesjs/plugin-access": "^2.0.0",
+    "@fesjs/plugin-access": "^2.0.2",
-    "@fesjs/plugin-enums": "^2.0.0",
+    "@fesjs/plugin-enums": "^2.0.2",
-    "@fesjs/plugin-layout": "^2.0.0",
+    "@fesjs/plugin-layout": "^2.0.9",
-    "@fesjs/plugin-model": "^2.0.0",
+    "@fesjs/plugin-model": "^2.0.3",
     "ant-design-vue": "^2.2.0",
     "vue": "^3.2.6"
-  },
+  }
-  "private": true
 }

src/app.js

@@ -1,25 +0,0 @@
-
-
-import { access } from '@fesjs/fes';
-import PageLoading from '@/components/PageLoading';
-import UserCenter from '@/components/UserCenter';
-
-export const beforeRender = {
-    loading: <PageLoading />,
-    action() {
-        const { setRole } = access;
-        return new Promise((resolve) => {
-            setTimeout(() => {
-                setRole('admin');
-                // 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件
-                resolve({
-                    userName: 'harrywan'
-                });
-            }, 1000);
-        });
-    }
-};
-
-export const layout = {
-    customHeader: <UserCenter />
-};

src/app.ts

@@ -0,0 +1,29 @@
+import { access } from '@fesjs/fes'
+import PageLoading from '@/components/PageLoading.vue'
+import UserCenter from '@/components/UserCenter.vue'
+
+export const beforeRender = {
+  loading: PageLoading,
+  action() {
+    const { setRole } = access
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        void setRole('admin')
+        // 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件
+        resolve(state)
+      }, 1000)
+    })
+  },
+}
+
+export type State = {
+  userName: string
+}
+
+const state: State = {
+  userName: 'harrywan',
+}
+
+export const layout = {
+  customHeader: UserCenter,
+}

src/components/PageLoading.vue

@@ -3,16 +3,12 @@
     <Spin size="large" />
   </div>
 </template>
-<script>
-import Spin from 'ant-design-vue/lib/spin';
-import 'ant-design-vue/lib/spin/style/css';
 
-export default {
+<script setup lang="ts">
-    components: {
+import Spin from 'ant-design-vue/lib/spin'
-        Spin
+import 'ant-design-vue/lib/spin/style/css'
-    }
-};
 </script>
+
 <style>
 .page-loading {
   position: fixed;

src/components/UserCenter.vue

@@ -1,18 +1,14 @@
 <template>
   <div class="right">{{ initialState.userName }}</div>
 </template>
-<script>
-import { useModel } from '@fesjs/fes';
 
-export default {
+<script setup lang="ts">
-    setup() {
+import { useModel } from '@fesjs/fes'
-        const initialState = useModel('@@initialState');
+import type { State } from '@/app'
-        return {
+
-            initialState
+const initialState = useModel('@@initialState') as State
-        };
-    }
-};
 </script>
+
 <style scope>
 .right {
   text-align: right;

src/pages/index.vue

@@ -1,8 +1,10 @@
 <template>
-    <div style="padding: 32px;">
+  <div style="padding: 32px">
     <h3>fes & 拉夫德鲁</h3>
     <h4>数据字典</h4>
-        <div v-for="item in enumsGet('status')" :key="item.key">{{item.value}}：{{item.key}}</div>
+    <div v-for="item in enumsGet('status')" :key="item.key">
+      {{ item.value }}：{{ item.key }}
+    </div>
 
     <section>
       计数器
@@ -11,28 +13,17 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from 'vue'
-import {
+import { enums } from '@fesjs/fes'
-    enums
+
-} from '@fesjs/fes';
+const count = ref(0)
 
-export default {
-    setup() {
-        const fes = ref('fes upgrade to vue3');
-        const count = ref(0);
 const increment = () => {
-            count.value++;
+  count.value++
-        };
-
-        return {
-            fes,
-            increment,
-            count,
-            enumsGet: enums.get
-        };
 }
-};
+
+const enumsGet = enums.get
 </script>
 
 <config>

src/types/shims.d.ts

@@ -0,0 +1,6 @@
+// shims.d.ts
+declare module '*.vue' {
+  import { ComponentOptions } from 'vue'
+  const component: ComponentOptions
+  export default component
+}

tsconfig.json

@@ -1,25 +1,13 @@
 {
+  "extends": "@daotl/tsconfig/vue.json",
   "compilerOptions": {
     "outDir": "build/dist",
-    "module": "esnext",
-    "target": "esnext",
-    "lib": ["esnext", "dom"],
-    "sourceMap": true,
     "baseUrl": ".",
-    "jsx": "preserve",
-    "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node",
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitReturns": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true,
-    "allowJs": true,
-    "skipLibCheck": true,
-    "experimentalDecorators": true,
-    "strict": true,
     "paths": {
-      "@/*": ["./src/*"],
+      // TODO: `.fes.js` > `alias` doesn't support TS for now
-      "@@/*": ["./src/.fes/*"]
+      // "~/*": ["src/*"],
+      "@/*": ["src/*"],
+      "@@/*": ["src/.fes/*"]
     }
   },
   "include": [
@@ -33,5 +21,13 @@
     ".stylelintrc.js",
     ".prettierrc.js"
   ],
-  "exclude": ["node_modules", "build", "dist", "scripts", "src/.fes/*", "webpack", "jest"]
+  "exclude": [
+    "node_modules",
+    "build",
+    "dist",
+    "scripts",
+    "src/.fes/*",
+    "webpack",
+    "jest"
+  ]
 }