feat: 整合最新的jrender和egg-vite集成

.github/workflows/nodejs.yml

@@ -5,9 +5,13 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master ]
+    branches:
+      - main
+      - master
   pull_request:
-    branches: [ master ]
+    branches:
+      - main
+      - master
   schedule:
     - cron: '0 2 * * *'
 

app.ts

@@ -2,8 +2,13 @@ import { Application } from 'egg';
 // import plugin1 from 'plugin1';
 // import { Sequelize, STRING, INTEGER } from 'sequelize';
 
-const startup = async (app: Application) => {
-  console.log(app.name);
+const startup = async (app: Application & Record<string, any>) => {
+  app.addPageConfig(app.name);
+
+  app.router.get('*', app.viewInject(app.name, 'index.html'), () => {
+    //
+  });
+
   // await app.model.sync({
   //   alter: { drop: false },
   // });
@@ -26,5 +31,4 @@ const startup = async (app: Application) => {
 
 export default (app: Application) => {
   startup(app);
-  // plugin1(app);
 };

app/controller/home.ts

@@ -3,18 +3,6 @@ import { Route, HttpGet, HttpPost } from 'egg-decorator-router';
 
 @Route()
 export default class HomeController extends Controller {
-  @HttpGet('/')
-  @HttpGet('*')
-  public async index() {
-    const { ctx } = this;
-
-    const renderData: any = {
-      serverText: 'title text',
-    };
-
-    await ctx.vite.render('index.html', renderData);
-  }
-
   @HttpGet('/api')
   public api() {
     const { ctx } = this;

config/config.default.ts

@@ -1,6 +1,5 @@
 import { EggAppConfig, EggAppInfo, PowerPartial } from 'egg';
 import { EggSequelizeOptions } from 'egg-sequelize';
-import * as path from 'path';
 
 export default (appInfo: EggAppInfo) => {
   const config = {} as PowerPartial<EggAppConfig>;
@@ -19,20 +18,11 @@ export default (appInfo: EggAppInfo) => {
 
   config.view = {
     defaultViewEngine: 'nunjucks',
-    root: path.join(appInfo.baseDir, 'dist'),
     mapping: {
       '.html': 'nunjucks',
     },
   };
 
-  config.static = {
-    prefix: '/assets/',
-    dir: [
-      path.join(appInfo.baseDir, 'app/public'),
-      path.join(appInfo.baseDir, 'dist/assets'),
-    ],
-  };
-
   config.security = {
     csrf: { enable: false },
   };

config/config.local.ts

@@ -1,11 +1,20 @@
 import { EggAppConfig, PowerPartial } from 'egg';
 
-export default () => {
+export default (appInfo) => {
   const config: PowerPartial<EggAppConfig> = {};
 
-  config.vitePlugin = {
-    devServer: true,
-    targets: [/^(\/node_modules)/g],
+  config.statics = {
+    default: appInfo.name,
+    clients: {
+      [appInfo.name]: {
+        type: 'dev',
+        configFile: 'vite.config.ts',
+      },
+      'view-plugin': {
+        type: 'dev',
+        configFile: 'vite.config.ts',
+      },
+    },
   };
 
   return config;

config/plugin.ts

@@ -6,9 +6,9 @@ const plugin: EggPlugin = {
     enable: true,
     package: 'egg-view-nunjucks',
   },
-  vitePlugin: {
+  '@egglib/statics': {
     enable: true,
-    package: 'egg-vite-plugin',
+    package: '@egglib/statics-vite',
   },
   decoratorRouter: {
     enable: true,
@@ -26,6 +26,9 @@ const plugin: EggPlugin = {
   //   enable: true,
   //   package: 'plugin2',
   // },
+  'view-plugin': {
+    enable: true,
+  },
 };
 
 export default plugin;

index.html

@@ -14,6 +14,6 @@
       </strong>
     </noscript>
     <div id="app"></div>
-    <script type="module" src="./src/main.ts"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package.json

@@ -32,45 +32,45 @@
     "deploy": "sh ./scripts/build.sh"
   },
   "dependencies": {
-    "egg": "^2.29.3",
+    "@egglib/statics-vite": "^0.0.2",
+    "egg": "^2.33.1",
     "egg-decorator-router": "^1.0.7",
-    "egg-scripts": "^2.13.0",
+    "egg-scripts": "^2.15.2",
     "egg-sequelize": "^6.0.0",
-    "egg-view-nunjucks": "^2.3.0",
-    "egg-vite-plugin": "^1.1.4",
-    "mysql2": "^2.2.5",
-    "umzug": "^2.3.0"
+    "mysql2": "^2.3.3",
+    "umzug": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/standalone": "7.13.10",
-    "@json2render/vue-full": "^0.1.10",
+    "@babel/standalone": "7.16.9",
+    "@jrender-plus/core": "^0.3.2",
+    "@jrender-plus/extends": "^0.2.8",
     "@types/egg": "^1.5.0",
-    "@types/mocha": "^8.2.2",
-    "@types/node": "^14.14.35",
-    "@types/supertest": "^2.0.0",
-    "@vitejs/plugin-legacy": "^1.3.1",
-    "@vitejs/plugin-vue": "^1.1.5",
-    "@vue/compiler-sfc": "^3.0.7",
-    "autod": "^3.0.1",
+    "@types/mocha": "^9.0.0",
+    "@types/node": "^17.0.8",
+    "@types/supertest": "^2.0.11",
+    "@vitejs/plugin-legacy": "^1.6.4",
+    "@vitejs/plugin-vue": "^2.0.1",
+    "@vue/compiler-sfc": "^3.2.26",
+    "autod": "^3.1.2",
     "autod-egg": "^1.1.0",
-    "autoprefixer": "^10.2.5",
-    "egg-bin": "^4.15.0",
-    "egg-ci": "^1.18.0",
-    "egg-mock": "^4.0.1",
-    "element-plus": "^1.0.2-beta.35",
-    "eslint": "^7.22.0",
-    "eslint-config-egg": "^9.0.0",
+    "autoprefixer": "^10.4.2",
+    "egg-bin": "^4.16.4",
+    "egg-ci": "^1.19.0",
+    "egg-mock": "^4.2.0",
+    "element-plus": "^1.3.0-beta.5",
+    "eslint": "^8.6.0",
+    "eslint-config-egg": "^10.0.0",
     "lerna": "^4.0.0",
     "mkdirp": "^1.0.4",
     "mocha": "5.2.0",
-    "postcss": "^8.2.8",
-    "sequelize-cli": "^6.2.0",
-    "tailwindcss": "^2.0.4",
-    "tslib": "^2.1.0",
-    "typescript": "^4.2.3",
-    "vite": "^2.1.2",
-    "vue": "^3.0.7",
-    "vue-router": "^4.0.5"
+    "postcss": "^8.4.5",
+    "sequelize-cli": "^6.3.0",
+    "tailwindcss": "^3.0.13",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.4",
+    "vite": "^2.7.10",
+    "vue": "^3.2.26",
+    "vue-router": "^4.0.12"
   },
   "engines": {
     "node": ">=12.0.0"

packages/view-plugin/README.md

@@ -0,0 +1,11 @@
+# `view-plugin`
+
+> TODO: description
+
+## Usage
+
+```
+const viewPlugin = require('view-plugin');
+
+// TODO: DEMONSTRATE API
+```

packages/view-plugin/app.ts

@@ -0,0 +1,11 @@
+import { Application } from 'egg';
+
+import { name } from './package.json';
+
+export default (app: Application & Record<string, any>) => {
+  app.addPageConfig(name);
+
+  app.router.get('/viewplugin', app.viewInject(name, 'index.html'), () => {
+    //
+  });
+};

packages/view-plugin/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>plugin</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>
+        We're sorry but it doesn't work properly without JavaScript enabled.
+        Please enable it to continue.
+      </strong>
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

packages/view-plugin/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "view-plugin",
+  "version": "0.0.0",
+  "description": "> TODO: description",
+  "author": "fengyuanliang3 <[email protected]>",
+  "homepage": "https://github.com/fyl080801/egg-vite-vue3#readme",
+  "license": "ISC",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fyl080801/egg-vite-vue3.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/fyl080801/egg-vite-vue3/issues"
+  },
+  "eggPlugin": {
+    "name": "view-plugin"
+  }
+}

packages/view-plugin/src/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>plugin view</div>
+</template>

packages/view-plugin/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');

packages/view-plugin/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import legacy from '@vitejs/plugin-legacy';
+
+export default defineConfig({
+  build: {
+    manifest: true,
+  },
+  plugins: [vue(), legacy({ targets: ['defaults', 'not IE 11'] })],
+});

src/App.vue

@@ -3,6 +3,7 @@
     <ul class="flex space-x-4">
       <li><router-link to="/">Home</router-link></li>
       <li><router-link to="/about">About</router-link></li>
+      <li><a href="/viewplugin">视图插件</a></li>
     </ul>
     <router-view></router-view>
   </div>

src/components/DynamicView.vue → src/components/DynamicView/DynamicView.vue

@@ -1,9 +1,9 @@
 <template>
-  <v-jrender
+  <j-render
     v-model="config.model"
     :fields="config.fields"
-    :datasource="config.datasource"
-  ></v-jrender>
+    :data-source="config.datasource"
+  ></j-render>
 </template>
 
 <script lang="ts" setup>
@@ -16,14 +16,14 @@ const config = reactive({
   datasource: {
     submitdata: {
       type: 'fetch',
-      url: '/api',
-      defaultData: 0,
-      auto: false,
       props: {
-        method: 'POST',
-        body: '$:JSON.stringify(model)',
-        headers: {
-          'Content-Type': 'application/json',
+        url: '/api',
+        props: {
+          method: 'POST',
+          body: '$:JSON.stringify(model)',
+          headers: {
+            'Content-Type': 'application/json',
+          },
         },
       },
     },
@@ -55,7 +55,7 @@ const config = reactive({
           component: 'p',
           colProps: { span: 24 },
           formProps: {},
-          text: '#: Hello ${model.text} !!',
+          text: '$:`Hello ${model.text} !!`',
         },
         {
           component: 'el-select',
@@ -72,14 +72,14 @@ const config = reactive({
           text: '提交',
           colProps: { span: 24 },
           formProps: {},
-          props: { onClick: '@:submitdata.request()' },
+          props: { onClick: '$:()=>submitdata.fetch()' },
         },
       ],
     },
     {
       component: 'p',
       condition: '$:submitdata.data',
-      text: '#:提交的数据：${JSON.stringify(submitdata.data)}',
+      text: '$:`提交的数据：${JSON.stringify(submitdata.data)}`',
     },
   ],
 });

src/components/DynamicView/index.ts

@@ -0,0 +1 @@
+export { default as DynamicView } from './DynamicView.vue';