refactor: 将wujie-vue3组件修改为ts实现

packages/wujie-vue3/.eslintrc.cjs

@@ -0,0 +1,25 @@
+const { defineConfig } = require('eslint-define-config')
+
+module.exports = defineConfig({
+  env: {
+    node: true,
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'standard'
+  ],
+  parserOptions: {
+    ecmaVersion: 13,
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module'
+  },
+  plugins: [
+    'vue'
+  ],
+  ignorePatterns: [
+    '**/*.json',
+    'dist'
+  ]
+})

packages/wujie-vue3/build.sh

@@ -10,11 +10,6 @@ NC='\033[0m'
 
 echo -e "${GREEN}============WujieVue开始编译============${NC}"
 
-[ -d lib ] && rm -rf lib
-[ -d esm ] && rm -rf esm
+npm run build
 
-npm run lib
-
-npm run esm
-
-echo -e "${GREEN}============WujieVue编译成功============${NC}"
+echo -e "${GREEN}============WujieVue编译成功============${NC}"

packages/wujie-vue3/index.ts

@@ -0,0 +1,121 @@
+import { bus, preloadApp, startApp as rawStartApp, destroyApp, setupApp, startOptions } from 'wujie'
+import { h, defineComponent, PropType, App } from 'vue'
+
+const WujieVue = defineComponent({
+  name: 'WujieVue',
+  props: {
+    width: { type: String, default: '' },
+    height: { type: String, default: '' },
+    name: { type: String, default: '' },
+    loading: { type: HTMLElement, default: undefined },
+    url: { type: String, default: '' },
+    sync: { type: Boolean, default: undefined },
+    prefix: { type: Object, default: undefined },
+    alive: { type: Boolean, default: undefined },
+    props: { type: Object, default: undefined },
+    attrs: { type: Object, default: undefined },
+    replace: { type: Function as PropType<startOptions['replace']>, default: undefined },
+    fetch: { type: Function as PropType<startOptions['fetch']>, default: undefined },
+    fiber: { type: Boolean, default: undefined },
+    degrade: { type: Boolean, default: undefined },
+    plugins: { type: Array as PropType<startOptions['plugins']>, default: null },
+    beforeLoad: { type: Function as PropType<startOptions['beforeLoad']>, default: null },
+    beforeMount: { type: Function as PropType<startOptions['beforeMount']>, default: null },
+    afterMount: { type: Function as PropType<startOptions['afterMount']>, default: null },
+    beforeUnmount: { type: Function as PropType<startOptions['beforeUnmount']>, default: null },
+    afterUnmount: { type: Function as PropType<startOptions['afterUnmount']>, default: null },
+    activated: { type: Function as PropType<startOptions['activated']>, default: null },
+    deactivated: { type: Function as PropType<startOptions['deactivated']>, default: null },
+    loadError: { type: Function as PropType<startOptions['loadError']>, default: null }
+  },
+  data () {
+    return {
+      startAppQueue: Promise.resolve()
+    }
+  },
+  mounted () {
+    bus.$onAll(this.handleEmit)
+    this.execStartApp()
+    this.$watch(
+      () => this.name + this.url,
+      () => this.execStartApp()
+    )
+  },
+  beforeUnmount () {
+    bus.$offAll(this.handleEmit)
+  },
+  methods: {
+    handleEmit (event: string, ...args: any[]) {
+      this.$emit(event, ...args)
+    },
+    async startApp () {
+      try {
+        await rawStartApp({
+          name: this.name,
+          url: this.url,
+          el: this.$refs.wujie as HTMLElement,
+          loading: this.loading,
+          alive: this.alive,
+          fetch: this.fetch,
+          props: this.props,
+          attrs: this.attrs,
+          replace: this.replace,
+          sync: this.sync,
+          prefix: this.prefix,
+          fiber: this.fiber,
+          degrade: this.degrade,
+          plugins: this.plugins,
+          beforeLoad: this.beforeLoad,
+          beforeMount: this.beforeMount,
+          afterMount: this.afterMount,
+          beforeUnmount: this.beforeUnmount,
+          afterUnmount: this.afterUnmount,
+          activated: this.activated,
+          deactivated: this.deactivated,
+          loadError: this.loadError
+        })
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    execStartApp () {
+      this.startAppQueue = this.startAppQueue.then(this.startApp)
+    },
+    destroy () {
+      destroyApp(this.name)
+    }
+  },
+  render () {
+    return h('div', {
+      style: {
+        width: this.width,
+        height: this.height
+      },
+      ref: 'wujie'
+    })
+  }
+})
+
+WujieVue.setupApp = setupApp
+WujieVue.preloadApp = preloadApp
+WujieVue.bus = bus
+WujieVue.destroyApp = destroyApp
+WujieVue.install = function (app: App) {
+  app.component('WujieVue', WujieVue)
+}
+
+type WithInstall<T> = T & {
+  bus: typeof bus
+  setupApp: typeof setupApp
+  preloadApp: typeof preloadApp
+  destroyApp: typeof destroyApp
+  install(app: App): void
+}
+
+export default WujieVue as WithInstall<typeof WujieVue>
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    WujieVue: WithInstall<typeof WujieVue>
+  }
+}

packages/wujie-vue3/package.json

@@ -2,46 +2,43 @@
   "name": "wujie-vue3",
   "version": "1.0.18",
   "description": "无界微前端Vue3组件封装",
-  "main": "./lib/index.js",
-  "module": "./esm/index.js",
+  "main": "./dist/index.global.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
-    "esm",
-    "lib",
-    "index.d.ts"
+    "dist"
   ],
   "scripts": {
-    "lib": "webpack build --mode=production --config webpack.config.js",
-    "esm": "cross-env BABEL_ENV=esm babel index.js --out-dir ./esm --source-maps",
+    "build": "tsup",
     "prepack": "bash build.sh",
-    "start": "cross-env BABEL_ENV=esm babel index.js --out-dir ./esm --source-maps inline --watch",
+    "start": "tsup --watch",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "yiludege",
   "publishConfig": {
     "access": "public"
   },
-  "peerDependencies": {
-    "vue": "^3.0.0"
-  },
   "config": {
     "unsafe-perm": true,
     "registry": "https://registry.npmjs.org/"
   },
   "license": "MIT",
-  "dependencies": {
-    "wujie": "workspace:1.0.18"
-  },
   "devDependencies": {
-    "@babel/cli": "^7.18.6",
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "babel-loader": "^8.2.3",
+    "@typescript-eslint/parser": "^6.7.5",
     "cross-env": "^7.0.3",
     "csstype": "^3.1.1",
-    "eslint": "^8.2.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "vue": "^3.0.0",
-    "webpack": "^5.61.0",
-    "webpack-cli": "^4.9.1"
+    "eslint": "^8.51.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-define-config": "^1.24.1",
+    "eslint-plugin-vue": "^9.17.0",
+    "tsup": "^7.2.0",
+    "typescript": "^5.2.2",
+    "vue": "^3.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "wujie": "workspace:^"
   }
 }

packages/wujie-vue3/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true
+  }
+}