feat: add vue3 use vue2 demo

empjs · Oct 28, 2024 · fcdd5ab · fcdd5ab
1 parent c0ab34b
commit fcdd5ab
Show file tree

Hide file tree

Showing 14 changed files with 232 additions and 58 deletions.
diff --git a/demos/vue2/vue-2-base/src/components/Content.vue b/demos/vue2/vue-2-base/src/components/Content.vue
@@ -32,8 +32,8 @@ export default {
     DynamicButton: () => import('./Button'),
   },
   props: {
-    dataProps: {type: Number, required: false},
-    methodProps: {type: Function, required: false},
+    // dataProps: {type: Number, required: false},
+    // methodProps: {type: Function, required: false},
   },
   data() {
     return {
@@ -42,7 +42,7 @@ export default {
     }
   },
   mounted() {
-    this.methodProps && this.methodProps()
+    // this.methodProps && this.methodProps()
     // console.log(this.$props)
     // console.log(this.$attrs)
     // console.log(this.$listeners)

diff --git a/demos/vue3_2/README.md b/demos/vue3_2/README.md
@@ -0,0 +1,9 @@
+# vue3中使用vue2
+
+本`demo`展示如何在`vue3`项目中使用`vue2`基站的远程组件
+
+# 运行
+```bash
+pnpm i
+pnpm dev
+```
diff --git a/demos/vue3_2/package.json b/demos/vue3_2/package.json
@@ -0,0 +1,12 @@
+{
+    "name": "v3u2-demo",
+    "ignored": true,
+    "version": "0.0.1",
+    "scripts": {
+      "dev": "pnpm --filter 'v3u2-*' --parallel dev",
+      "build": "pnpm --filter v3u2-* --parallel build",
+      "serve": "pnpm --filter v3u2-* --parallel serve",
+      "stat": "pnpm --filter v3u2-* --parallel stat"
+    }
+  }
+
diff --git a/demos/vue3_2/vue-2-base/emp.config.ts b/demos/vue3_2/vue-2-base/emp.config.ts
@@ -15,9 +15,8 @@ export default defineConfig(store => {
         },
         empRuntime: {
           runtimeLib: "https://unpkg.yy.com/@empjs/share@3.1.5/output/sdk.js",
+          frameworkLib: "https://unpkg.com/@empjs/lib-vue-2@0.0.1/dist",
           shareLib: {
-            vue: 'Vue@https://unpkg.com/vue@2.7.14/dist/vue.min.js',
-            vuex: "Vuex@https://unpkg.com/vuex@3.6.2/dist/vuex.min.js",
             'element-ui': [
               'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
               "https://unpkg.com/element-ui/lib/theme-chalk/index.css",

diff --git a/demos/vue3_2/vue-2-base/package.json b/demos/vue3_2/vue-2-base/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vue2-base",
+  "name": "v3u2-vue2-base",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",

diff --git a/demos/vue3_2/vue-2-base/src/components/Content.vue b/demos/vue3_2/vue-2-base/src/components/Content.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <button class="button bigSize" @click="increment">Vuex Store : {{ $store.state.count }}</button>
+    <!-- <button class="button bigSize" @click="increment">Vuex Store : {{ $store.state.count }}</button> -->
     <p @click="showMore">More... update from base</p>
     <div class="more">
       <ul v-if="isMore === true">
         <li>
-          <button class="button" @click="increment">Vuex Store : {{ $store.state.count }}</button>
+          <!-- <button class="button" @click="increment">Vuex Store : {{ $store.state.count }}</button> -->
         </li>
         <li>
           <h2>{{ title }}</h2>
@@ -19,7 +19,7 @@
       </ul>
     </div>
     <h2>JSX Dynamic Component</h2>
-    <Hello />
+    <!-- <Hello /> -->
   </div>
 </template>
 
@@ -28,7 +28,7 @@ import Button from './Button.vue'
 export default {
   components: {
     Button,
-    Hello: () => import('./Hello'),
+    // Hello: () => import('./Hello'),
     DynamicButton: () => import('./Button'),
   },
   props: {
@@ -52,7 +52,7 @@ export default {
       this.isMore = !this.isMore
     },
     increment() {
-      this.$store.commit('increment')
+      // this.$store.commit('increment')
       // console.log(this.$store.state.count)
     },
     add() {

diff --git a/demos/vue3_2/vue-2-base/src/components/Hello.jsx b/demos/vue3_2/vue-2-base/src/components/Hello.jsx
diff --git a/demos/vue3_2/vue-2-base/src/views/Home.vue b/demos/vue3_2/vue-2-base/src/views/Home.vue
@@ -3,7 +3,6 @@
     <h1>SVGA COMPONENT LOGO:</h1>
     <!-- <Logo class="svg-logo" /> -->
     <h2>Hello JSX Component</h2>
-    <Hello />
     <h2>Img Example in src</h2>
     <ul class="imgbox">
       <li>
@@ -26,7 +25,6 @@
 <script>
 import CompositionApi from '../components/CompositionApi'
 import Content from '../components/Content'
-import Hello from '../components/Hello'
 // import Logo from './logo.svg'
 import Table from '../components/table'
 export default {
@@ -35,7 +33,6 @@ export default {
     // Logo,
     Table,
     CompositionApi,
-    Hello,
   },
 }
 </script>

diff --git a/demos/vue3_2/vue-3-project/emp.config.ts b/demos/vue3_2/vue-3-project/emp.config.ts
@@ -23,14 +23,13 @@ export default defineConfig(store => {
         },
         empRuntime: {
           runtimeLib: "https://unpkg.yy.com/@empjs/share@3.1.5/output/sdk.js",
-          shareLib: {
-            vue: 'Vue@https://unpkg.com/vue@2.7.14/dist/vue.min.js',
-            vuex: "Vuex@https://unpkg.com/vuex@3.6.2/dist/vuex.min.js",
-            'element-ui': [
-              'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
-              "https://unpkg.com/element-ui/lib/theme-chalk/index.css",
-            ],
-          },
+          frameworkLib: "https://unpkg.com/@empjs/lib-vue-2@0.0.2/dist",
+          // shareLib: {
+          //   'element-ui': [
+          //     'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
+          //     "https://unpkg.com/element-ui/lib/theme-chalk/index.css",
+          //   ],
+          // },
           framework: undefined,
         },
       }),

diff --git a/demos/vue3_2/vue-3-project/package.json b/demos/vue3_2/vue-3-project/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vue3-project",
+  "name": "v3u2-vue3-project",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",

diff --git a/demos/vue3_2/vue-3-project/src/Home.vue b/demos/vue3_2/vue-3-project/src/Home.vue
@@ -2,22 +2,24 @@
   <div>
     <h1>Vue 3 Project</h1>
     <h2>=== @v2b/Content ===</h2>
-    <Content />
+    <div id="vue2Content"></div>
+    <vue2-content />
     <h2>CompositionApi</h2>
-    <CompositionApi />
+    <!-- <CompositionApi /> -->
     <h2>=== @v2b/Table ===</h2>
-    <Table />
+    <!-- <Table /> -->
   </div>
 </template>
 
-
 <script>
-//import Content from "@v2b/Content"
+import Content from "@v2b/Content"
+import {vue2ToVue3} from './util'
 export default {
   components: {
-    Content: () => import('@v2b/Content'),
-    Table: () => import('@v2b/Table'),
-    CompositionApi: () => import('@v2b/CompositionApi'),
+    vue2Content: vue2ToVue3(Content, 'vue2Content')
+    // Content: defineAsyncComponent(() => import('@v2b/Content')),
+    // Table: defineAsyncComponent(() => import('@v2b/Table')),
+    // CompositionApi: defineAsyncComponent(() => import('@v2b/CompositionApi')),
   },
 }
 </script>

diff --git a/demos/vue3_2/vue-3-project/src/bootstrap.ts b/demos/vue3_2/vue-3-project/src/bootstrap.ts
@@ -1,9 +1,9 @@
 // import Antd from '@v3/Antd'
 import {createApp} from 'vue'
 import App from './App.vue'
-import {router} from './router'
+import Home from './home.vue'
 // console.log('Antd', Antd)
-const app = createApp(App)
+const app = createApp(Home)
 // app.use(Antd)
-app.use(router)
+// app.use(router)
 app.mount('#emp-root')
diff --git a/demos/vue3_2/vue-3-project/src/util.ts b/demos/vue3_2/vue-3-project/src/util.ts
@@ -0,0 +1,41 @@
+
+function bindSlotContext(target = {}, context) {
+    return Object.keys(target).map(key => {
+      const vnode = target[key];
+      vnode.context = context;
+      return vnode;
+    });
+  }
+
+  /*
+   * Transform vue2 components to DOM.
+   */
+  export function vue2ToVue3(WrapperComponent, wrapperId) {
+    const Vue2 = EMP_ADAPTER_VUE.Vue
+    const defineAsyncComponent = Vue2.defineAsyncComponent;
+    let vm;
+    return {
+      mounted() {
+        const slots = bindSlotContext(this.$slots, this.__self);
+        vm = new Vue2({
+          render: createElement => {
+            return createElement(
+              WrapperComponent,
+              {
+                on: this.$attrs,
+                attrs: this.$attrs,
+                props: this.$props,
+                scopedSlots: this.$scopedSlots,
+              },
+              slots,
+            );
+          },
+        });
+        vm.$mount(`#${wrapperId}`);
+      },
+      props: WrapperComponent.props,
+      render() {
+        vm && vm.$forceUpdate();
+      },
+    };
+  }