feat(vue): introduce vue component binding (#2775)

.eslintrc.cjs

@@ -20,7 +20,7 @@ const tsConfig = {
   extends: ['plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking'],
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
+    project: ['./tsconfig.eslint.json', './packages/**/tsconfig.json'],
   },
   rules: {
     '@typescript-eslint/no-unnecessary-condition': 'error',

examples/main/package.json

@@ -5,6 +5,8 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server",
+    "start:vue": "cross-env MODE=vue webpack-dev-server",
+    "start:vue3": "cross-env MODE=vue3 webpack-dev-server",
     "start:multiple": "cross-env MODE=multiple webpack-dev-server",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -27,8 +29,14 @@
     "qiankun": "^2.10.10",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "vue": "^2.6.11",
-    "zone.js": "^0.10.2"
+    "vue": "^3.3.9",
+    "zone.js": "^0.10.2",
+    "@vue/composition-api": "1.7.2"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   },
   "repository": "[email protected]:umijs/qiankun.git"
 }

examples/main/render/VanillaRender.js

@@ -0,0 +1,32 @@
+import { loadMicroApp } from '../../../packages/qiankun/dist/esm';
+// import { loadMicroApp } from 'qiankun';
+import '../index.less';
+
+const microApps = [
+  { name: 'react15', entry: '//localhost:7102' },
+  { name: 'react16', entry: '//localhost:7100' },
+];
+
+let prevApp;
+let prevAppName;
+document.querySelector('.mainapp-sidemenu').addEventListener('click', async (e) => {
+  window.startTime = Date.now();
+  const app = microApps.find((app) => app.name === e.target.dataset.value);
+  if (app) {
+    if (app.name === prevAppName) return;
+
+    await prevApp?.unmount();
+
+    prevApp = loadMicroApp(
+      {
+        name: app.name,
+        entry: app.entry,
+        container: document.querySelector('#subapp-container'),
+      },
+      { sandbox: true },
+    );
+    prevAppName = app.name;
+  } else {
+    console.log('not found any app');
+  }
+});

examples/main/render/Vue3Render.js

@@ -0,0 +1,44 @@
+import { createApp, h } from 'vue';
+import { MicroApp } from '../../../packages/ui-bindings/vue/dist/esm';
+
+
+function vueRender() {
+  const application = createApp({
+    components: {
+    },
+    render() {
+      return h('div', [
+        this.message,
+        h(MicroApp, { name: 'react15', entry: '//localhost:7102' }),
+        this.message,
+      ]);
+    },
+    setup() {
+      const message = 'abc';
+
+      return {
+        message,
+      };
+      // return () => h('div', [
+      //   message.value,
+      //   h(MicroApp, { name: 'react15', entry: '//localhost:7102' }),
+      //   message.value,
+      // ]);
+    }
+  });
+
+  application.mount('#subapp-container');
+
+  return application;
+}
+
+let app = null;
+
+function render() {
+  if (!app) {
+    app = vueRender();
+    console.log(app)
+  }
+}
+
+render();

examples/main/render/VueRender.js

@@ -1,28 +1,44 @@
-import Vue from 'vue/dist/vue.esm';
+import Vue from 'vue/dist/vue.esm.js';
+import compositionApi  from '@vue/composition-api';
+import { MicroApp } from '../../../packages/ui-bindings/vue/dist/esm/';
 
-function vueRender({ loading }) {
+Vue.use(compositionApi);
+// Vue.component('MicroApp', MicroApp)
+function vueRender() {
   return new Vue({
+    components: {
+      MicroApp,
+    },
+    data: {
+      message: 'abc',
+    },
+    name: 'vueRender',
     template: `
-      <div id="subapp-container">
-        <h4 v-if="loading" class="subapp-loading">Loading...</h4>
-        <div id="subapp-viewport"></div>
+      <div>
+        <MicroApp name="react15" entry="//localhost:7102" />
       </div>
     `,
+    // render(h) {
+    //   return h('div', [
+    //     h(MicroApp, {
+    //       props: {
+    //         name: 'react15',
+    //         entry: '//localhost:7102',
+    //       }
+    //     }),
+    //   ]);
+    // },
     el: '#subapp-container',
-    data() {
-      return {
-        loading,
-      };
-    },
   });
 }
 
 let app = null;
 
-export default function render({ loading }) {
+function render() {
   if (!app) {
-    app = vueRender({ loading });
-  } else {
-    app.loading = loading;
+    app = vueRender();
+    console.log(app)
   }
 }
+
+render();

examples/main/webpack.config.js

@@ -1,8 +1,23 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { name } = require('./package');
+const path = require('path');
+
+const modeEntryMap = {
+  multiple: './multiple.js',
+  vue: './render/VueRender.js',
+  vue3: './render/Vue3Render.js',
+  undefined: './render/VanillaRender.js',
+}
+
+const modeHTMLMap = {
+  multiple: './multiple.html',
+  vue: './index.html',
+  vue3: './index.html',
+  undefined: './index.html',
+}
 
 module.exports = {
-  entry: process.env.MODE === 'multiple' ? './multiple.js' : './index.js',
+  entry: modeEntryMap[process.env.MODE],
   devtool: 'source-map',
   devServer: {
     open: true,
@@ -22,6 +37,10 @@ module.exports = {
   mode: 'development',
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    alias: {
+      vue: path.join(__dirname, 'node_modules/vue')
+      // '@vue/composition-api': path.join(__dirname, 'node_modules/@vue/composition-api')
+    }
   },
   module: {
     rules: [
@@ -45,7 +64,7 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({
       filename: 'index.html',
-      template: process.env.MODE === 'multiple' ? './multiple.html' : './index.html',
+      template: modeHTMLMap[process.env.MODE],
       minify: {
         removeComments: true,
         collapseWhitespace: true,

packages/qiankun/src/version.ts

@@ -1 +1 @@
-export { version } from '../package.json';
+export const version = '3.0.0-rc.11';