feat: 初步跑起来

Author: chibing.fy

.eslintignore

@@ -6,4 +6,5 @@ test$.js
 packages/esbuild-import-plugin
 packages/transform-project
 packages/gogocode-vue-playground
+packages/gogocode-element-playground
 packages/gogocode-core/umd

packages/gogocode-element-playground/package.json

@@ -10,9 +10,13 @@
     "start:vue2": "yarn workspace vue2 run start",
     "start:vue3": "yarn workspace vue3 run start"
   },
-  "workspaces": [
-    "packages/*"
-  ],
+  "workspaces": {
+    "packages": ["packages/*"],
+    "nohoist": ["**/vue", "**/vue/**", 
+                "**/vuex", "**/vuex/**",
+                "**/vue-router", "**/vue-router/**",
+                "**/@vue/cli-service", "**/@vue/cli-service/**"]
+  },
   "repository": "[email protected]:mm/gogocode-vue-playground.git",
   "author": "chibing.fy",
   "license": "MIT",

packages/gogocode-element-playground/packages/main/index.html

@@ -50,10 +50,14 @@ <h2 class="tc mt20 mb10">
           >
         </div>
       </div>
-    </div>
-    <div class="compare">
-      <div id="vue2">Vue2 loading...</div>
-      <div id="vue3">Vue3 loading...</div>
+      <div class="compare">
+        <div id="vue2">
+          <iframe :src="'//localhost:7102'+ selected" frameborder="0"></iframe>
+        </div>
+        <div id="vue3">
+          <iframe :src="'//localhost:7103'+ selected" frameborder="0"></iframe>
+        </div>
+      </div>
     </div>
   </body>
 </html>

packages/gogocode-element-playground/packages/main/index.js

@@ -28,26 +28,22 @@ new Vue({
   },
 });
 
-const vue2App = loadMicroApp({
-  name: 'vue2',
-  entry: '//localhost:7102',
-  container: '#vue2',
-});
-
-const vue3App = loadMicroApp({
-  name: 'vue3',
-  entry: '//localhost:7103',
-  container: '#vue3',
-});
+// const vue2App = loadMicroApp({
+//   name: 'vue2',
+//   entry: '//localhost:7102',
+//   container: '#vue2',
+// }, {
+//   sandbox: {
+//     strictStyleIsolation: true
+//   }
+// });
 
-class TestEle extends HTMLElement {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    const div = document.createElement('div');
-    div.innerText = 'haha';
-    this.append(div);
-  }
-}
-window.customElements.define('test-ele', TestEle);
+// const vue3App = loadMicroApp({
+//   name: 'vue3',
+//   entry: '//localhost:7103',
+//   container: '#vue3',
+// }, {
+//   sandbox: {
+//     strictStyleIsolation: true
+//   }
+// });

packages/gogocode-element-playground/packages/main/package.json

@@ -24,7 +24,7 @@
     "webpack-dev-server": "^3.9.0"
   },
   "dependencies": {
-    "qiankun": "^2.4.0",
+    "qiankun": "2.6.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "vue": "^2.6.11",

packages/gogocode-element-playground/packages/vue2/src/components/icon/Comp.vue

@@ -2,11 +2,7 @@
   <div>
     <p>迁移：{{ name }}</p>
     <p>Vue版本：{{ version }}</p>
-	<button v-on:click="add">Add</button>
-    <button v-on:click="remove">Remove</button>
-	<ul>
-		<li v-for="(item,index) in items" v-bind:key="index">{{ item }}</li>
-	</ul>
+    <el-button type="primary" icon="el-icon-search">Search</el-button>
   </div>
 </template>
 
@@ -15,35 +11,16 @@ import Vue from 'vue';
 /* 迁移指南: https://v3.cn.vuejs.org/guide/migration/watch.html */
 // vue2 https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B
 export default {
-  name: 'Watch on Arrays',
+  name: 'icon',
   props: {
     msg: String,
   },
   data() {
     return {
-      name: 'Watch on Arrays',
+      name: 'icon',
       version: Vue.version,
-	  items: [1, 2, 3, 4, 5]
     };
   },
-  methods: {
-	randomIndex: function () {
-      return Math.floor(Math.random() * this.items.length);
-    },
-    add: function () {
-      this.items.push(this.randomIndex());
-    },
-    remove: function () {
-      this.items.splice(this.randomIndex(), 1);
-    },
-  },
-  watch: {
-    items: {
-      handler(val, oldVal) {
-        console.log('items list changed');
-      },
-    },
-  },
 };
 </script>
 

packages/gogocode-element-playground/packages/vue2/src/router/index.js

@@ -10,7 +10,7 @@ const routes = [
     component: () => import(/* webpackChunkName: "home" */ '@/components/Home.vue'),
   },
   {
-    path: '/',
+    path: '/icon',
     name: 'icon',
     component: () => import(/* webpackChunkName: "icon" */ '@/components/icon/Comp.vue'),
   },

packages/gogocode-element-playground/packages/vue3/package.json

@@ -9,18 +9,19 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@element-plus/icons": "^0.0.11",
     "core-js": "^3.6.5",
+    "element-plus": "^2.0.2",
     "mitt": "^2.1.0",
-    "vue": "^3.0.9",
-    "vue-router": "^4.0.0-beta.11",
-    "vuex": "^4.0.0-beta.4",
-    "tiny-emitter": "^2.1.0"
+    "tiny-emitter": "^2.1.0",
+    "vue": "^3.2.31",
+    "vue-router": "^4.0.12",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.9",
+    "@vue/cli-plugin-babel": "5.0.1",
+    "@vue/cli-plugin-eslint": "5.0.1",
+    "@vue/cli-service": "5.0.1",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.23.0",
     "eslint-plugin-vue": "^7.8.0"

packages/gogocode-element-playground/packages/vue3/src/components/icon/Comp.vue

@@ -2,49 +2,26 @@
   <div>
     <p>迁移：{{ name }}</p>
     <p>Vue版本：{{ version }}</p>
-    <button v-on:click="add">Add</button>
-    <button v-on:click="remove">Remove</button>
-    <ul>
-      <li v-for="(item,index) in items" v-bind:key="index">{{ item }}</li>
-    </ul>
+    <el-button type="primary" :icon="ElIconSearch">Search</el-button>
   </div>
 </template>
 
 <script>
 import { version } from 'vue';
-/* 迁移指南: https://v3.cn.vuejs.org/guide/migration/watch.html */
+import { Search as ElIconSearch } from '@element-plus/icons'
+
 export default {
-  name: 'Watch on Arrays',
+  name: 'icon',
   props: {
     msg: String,
   },
   data() {
     return {
-      name: 'Watch on Arrays',
+      name: 'icon',
       version: version,
-      items: [1, 2, 3, 4, 5],
+      ElIconSearch,
     };
   },
-  methods: {
-    randomIndex: function () {
-      return Math.floor(Math.random() * this.items.length);
-    },
-    add: function () {
-      this.items.push(this.randomIndex());
-    },
-    remove: function () {
-      this.items.splice(this.randomIndex(), 1);
-    },
-  },
-  watch: {
-	//如何知道items是数组类型？
-    items: {
-      handler(val, oldVal) {
-        console.log('items list changed');
-      },
-      deep: true,
-    },
-  },
 };
 </script>
 

packages/gogocode-element-playground/packages/vue3/src/main.js

@@ -1,5 +1,7 @@
 import './public-path';
 import { createApp } from 'vue';
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 import { createRouter, createWebHistory } from 'vue-router';
 import App from './App.vue';
 import routes from './router';
@@ -22,6 +24,7 @@ function render(props = {}) {
   window.$vueApp = instance;
   instance.use(router);
   instance.use(store);
+  instance.use(ElementPlus);
   instance.mount(container ? container.querySelector('#app') : '#app');
 }
 

packages/gogocode-element-playground/packages/vue3/vue.config.js

@@ -14,12 +14,7 @@ module.exports = {
   lintOnSave: false,
   devServer: {
     hot: true,
-    disableHostCheck: true,
     port,
-    overlay: {
-      warnings: false,
-      errors: true,
-    },
     headers: {
       'Access-Control-Allow-Origin': '*',
     },
@@ -35,7 +30,6 @@ module.exports = {
       // 把子应用打包成 umd 库格式
       library: `${name}-[name]`,
       libraryTarget: 'umd',
-      jsonpFunction: `webpackJsonp_${name}`,
     },
   },
   chainWebpack: config => {