浏览代码

feat: add subAppRegister

zhangyuhan 3 年之前
当前提交
9cc4e72ce4
共有 5 个文件被更改,包括 160 次插入0 次删除
  1. 18 0
      .editorconfig
  2. 31 0
      .gitignore
  3. 34 0
      README.md
  4. 25 0
      package.json
  5. 52 0
      src/index.js

+ 18 - 0
.editorconfig

@@ -0,0 +1,18 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+

+ 31 - 0
.gitignore

@@ -0,0 +1,31 @@
+.DS_Store
+node_modules
+
+# local env files
+.env.local
+.env.*.local
+
+# npm
+package-lock.json
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# compressed files
+*.rar
+*.zip
+*.7z
+*.tar
+

+ 34 - 0
README.md

@@ -0,0 +1,34 @@
+# @jianyu/easy-inject-qiankun
+
+jianyu easy-inject-qiankun
+
+## Installation
+
+Next, install `@jianyu/easy-inject-qiankun`:
+
+```sh
+yarn add @jianyu/easy-inject-qiankun --dev
+```
+
+## Usage
+
+```javascript
+// main.js
+
+// 自动判断环境初始化子应用、注册子应用钩子
+export default easySubAppRegister({
+  Vue,
+  router,
+  store,
+  App,
+  el: '#app'
+})
+
+
+// 仅注册子应用钩子
+export default subAppRegister({
+  render
+})
+```
+
+

+ 25 - 0
package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@jianyu/easy-inject-qiankun",
+  "version": "0.1.0",
+  "description": "jianyu easy-inject-qiankun",
+  "keyword": "jianyu qiankun",
+  "main": "./src/index.js",
+  "exports": "./src/index.js",
+  "author": "zhangyuhan",
+  "files": [
+    "/src"
+  ],
+  "scripts": {},
+  "dependencies": {},
+  "devDependencies": {},
+  "engines": {
+    "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
+  },
+  "license": "ISC",
+  "homepage": "http://192.168.3.207:20080/packages/easy-inject-qiankun",
+  "repository": {
+    "type": "git",
+    "url": "http://192.168.3.207:20080/packages/easy-inject-qiankun"
+  },
+  "bugs": "http://192.168.3.207:20080/packages/easy-inject-qiankun/issues"
+}

+ 52 - 0
src/index.js

@@ -0,0 +1,52 @@
+/**
+ * 注册子应用钩子
+ * @param render
+ * @param instance
+ * @returns {{unmount: ((function(): Promise<void>)|*), bootstrap: ((function(*): Promise<void>)|*), mount: ((function(*): Promise<void>)|*)}}
+ */
+export function subAppRegister ({ render } = {}) {
+  let instance
+  return {
+    bootstrap: async function (props) {
+      console.log('[sub-app] bootstrap', props)
+    },
+    mount: async function (props) {
+      console.log('[sub-app] mount', props)
+      instance = render(props)
+    },
+    unmount: async function () {
+      console.log('[sub-app] unmount')
+      if (instance) {
+        instance.$destroy()
+        instance.$el.innerHTML = ''
+        instance = null
+      }
+    },
+  }
+}
+
+/**
+ * 自动判断环境初始化子应用、注册子应用钩子
+ * @param options - vue 实例化配置
+ * @param env - 环境,仅 development 下初始化子应用
+ * @returns {{unmount: ((function(): Promise<void>)|*), bootstrap: ((function(*): Promise<void>)|*), mount: ((function(*): Promise<void>)|*)}}
+ */
+export function easySubAppRegister (options, env = 'development') {
+  const { Vue, router, store, App, el } = options
+  function render (props = {}) {
+    const { container } = props
+    return new Vue({
+      router,
+      store,
+      render: (h) => h(App)
+    }).$mount(container ? container : el)
+  }
+
+  if (window.__POWERED_BY_QIANKUN__) {
+    return subAppRegister({ render: render })
+  } else if (env === 'development') {
+    render()
+  }
+}
+
+