feat: add mount/unmount hook for umd mode

jd-opensource · Aug 1, 2022 · 0a9e7f2 · 0a9e7f2
1 parent 0415ba9
commit 0a9e7f2
Show file tree

Hide file tree

Showing 14 changed files with 178 additions and 553 deletions.
diff --git a/dev/children/angular11/src/main.ts b/dev/children/angular11/src/main.ts
@@ -11,7 +11,8 @@ if (environment.production) {
 declare global {
   interface Window {
     microApp: any
-    __MICRO_APP_NAME__: string
+    mount: CallableFunction
+    unmount: CallableFunction
     __MICRO_APP_ENVIRONMENT__: string
   }
 }
@@ -25,37 +26,36 @@ declare global {
 //   })
 //   .catch(err => console.error(err))
 
-// console.log('微应用child-angular11渲染了');
+// console.log('微应用child-angular11渲染了 -- 默认模式');
 
 // // 监听卸载操作
-// window.addEventListener("unmount", function () {
+// window.unmount = () => {
 //   app.destroy();
 //   app = null;
-//   console.log('微应用child-angular11卸载了');
-// })
+//   console.log('微应用child-angular11卸载了 --- 默认模式');
+// }
 
 // ----------分割线---umd模式------两种模式任选其一-------------- //
 let app = null;
-// 将渲染操作放入 mount 函数
-async function mount () {
+// 👇 将渲染操作放入 mount 函数，子应用初始化时会自动执行
+window.mount = async () => {
   app = await platformBrowserDynamic()
   .bootstrapModule(AppModule)
   .catch(err => console.error(err))
 
-  console.log('微应用child-angular11渲染了');
+  console.log('微应用child-angular11渲染了 -- UMD模式');
 }
 
-// 将卸载操作放入 unmount 函数
-function unmount () {
+// 👇 将卸载操作放入 unmount 函数
+window.unmount = () => {
   app.destroy();
   app = null;
-  console.log('微应用child-angular11卸载了');
+  console.log('微应用child-angular11卸载了 --- UMD模式');
 }
 
-// 微前端环境下，注册mount和unmount方法
-if (window.__MICRO_APP_ENVIRONMENT__) {
-  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
-} else {
-  // 非微前端环境直接渲染
-  mount();
+// 如果不在微前端环境，则直接执行mount渲染
+if (!window.__MICRO_APP_ENVIRONMENT__) {
+  window.mount();
 }
+
+// -------------------分割线-------------------- //
diff --git a/dev/children/react16/src/index.js b/dev/children/react16/src/index.js
@@ -53,40 +53,38 @@ window.addEventListener('appstate-change', function (e) {
 //   document.getElementById('root')
 // );
 
-// // 监听卸载
-// window.addEventListener('unmount', function () {
+// // 注册unmount函数，卸载时会自动执行
+// window.unmount = () => {
 //   ReactDOM.unmountComponentAtNode(document.getElementById('root'));
-//   console.log('微应用react16卸载了 -- 自定义事件unmount');
-// })
+//   console.log('微应用react16卸载了 -- 默认模式');
+// }
 
 // console.timeEnd('react#16');
 
 /* ----------------------分割线-umd模式--------------------- */
-function mount () {
+// 👇 将渲染操作放入 mount 函数，子应用初始化时会自动执行
+window.mount = () => {
   ReactDOM.render(
     <React.StrictMode>
       <Router />
     </React.StrictMode>,
     document.getElementById('root')
   );
-  console.log('微应用react16渲染了 -- 来自umd-mount');
+  console.log('微应用react16渲染了 -- UMD模式');
   console.timeEnd('react#16');
 }
 
-function unmount () {
-  console.log('微应用react16卸载了 -- 来自umd-unmount');
+// 👇 将卸载操作放入 unmount 函数
+window.unmount = () => {
   // 卸载时关闭弹窗
   notification.destroy()
-  // 卸载应用
   ReactDOM.unmountComponentAtNode(document.getElementById('root'));
+  console.log('微应用react16卸载了 -- UMD模式');
 }
 
-// 微前端环境下，注册mount和unmount方法
-if (window.__MICRO_APP_ENVIRONMENT__) {
-  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
-} else {
-  // 非微前端环境直接渲染
-  mount();
+// 如果不在微前端环境，则直接执行mount渲染
+if (!window.__MICRO_APP_ENVIRONMENT__) {
+  window.mount()
 }
 
 

diff --git a/dev/children/react17/src/index.js b/dev/children/react17/src/index.js
@@ -8,40 +8,30 @@ import reportWebVitals from './reportWebVitals';
 // 发送数据
 window.microApp?.dispatch({'from': '来自微应用react17的数据' + (+new Date())})
 
-function mount () {
+// 👇 将渲染操作放入 mount 函数，子应用初始化时会自动执行
+window.mount = () => {
   ReactDOM.render(
     <React.StrictMode>
       <App />
     </React.StrictMode>,
     document.getElementById('root')
   );
 
-  console.log("微应用react17渲染来了 -- 来自umd-mount");
+  console.log("微应用react17渲染来了 -- UMD模式");
 }
 
-function unmount () {
-  console.log("微应用react17卸载了 -- 来自umd-unmount");
-  // 卸载应用
+// 👇 将卸载操作放入 unmount 函数
+window.unmount = () => {
   ReactDOM.unmountComponentAtNode(document.getElementById("root"));
+  console.log("微应用react17卸载了 -- UMD模式");
 }
 
-// 微前端环境下，注册mount和unmount方法
-if (window.__MICRO_APP_ENVIRONMENT__) {
-  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
-} else {
-  // 非微前端环境直接渲染
-  mount();
+// 如果不在微前端环境，则直接执行mount渲染
+if (!window.__MICRO_APP_ENVIRONMENT__) {
+  window.mount()
 }
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
-
-window.addEventListener('popstate', (e) => {
-  console.log('popstate', e)
-})
-
-window.addEventListener('hashchange', (e) => {
-  console.log('hashchange', e)
-})
diff --git a/dev/children/vue2/src/main.js b/dev/children/vue2/src/main.js
@@ -36,47 +36,35 @@ let app = null
 // }).$mount('#app')
 
 // // 监听卸载
-// window.addEventListener('unmount', function () {
+// window.unmount = () => {
 //   app.$destroy()
 //   app.$el.innerHTML = ''
 //   app = null
-//   console.log('微应用vue2卸载了 -- 自定义事件unmount')
-// })
+//   console.log('微应用vue2卸载了 -- 默认模式')
+// }
 
 
 // -------------------分割线-umd模式------------------ //
-export function mount (props) {
+// 👇 将渲染操作放入 mount 函数，子应用初始化时会自动执行
+window.mount = () => {
   app = new Vue({
     router,
     render: h => h(App),
-  }).$mount(props?.container?.querySelector('#app') || '#app')
-  console.log("微应用vue2渲染了 -- 来自umd-mount")
+  }).$mount('#app')
+  console.log("微应用vue2渲染了 -- UMD模式")
 }
 
-// 卸载应用
-export function unmount () {
+// 👇 将卸载操作放入 unmount 函数
+window.unmount = () => {
   app.$destroy()
   app.$el.innerHTML = ''
   app = null
-  console.log("微应用vue2卸载了 -- 来自umd-unmount")
+  console.log("微应用vue2卸载了 -- UMD模式")
 }
 
-export function bootstrap() {
-
-}
-
-// 微前端环境下，注册mount和unmount方法
-if (window.__MICRO_APP_ENVIRONMENT__) {
-  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
-} else {
-  // 非微前端环境直接渲染
-  mount()
+// 如果不在微前端环境，则直接执行mount渲染
+if (!window.__MICRO_APP_ENVIRONMENT__) {
+  window.mount()
 }
 
-window.addEventListener('popstate', (e) => {
-  console.log('子应用vue2 popstate', e)
-})
-
-window.addEventListener('hashchange', (e) => {
-  console.log('子应用vue2 hashchange', e, e.newURL, e.oldURL)
-})
+// -------------------分割线------------------ //
diff --git a/dev/children/vue3/src/main.js b/dev/children/vue3/src/main.js
@@ -1,33 +1,42 @@
 // import './public-path'
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
-// import ElementPlus from 'element-plus'
+import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/antd.css';
 import routes from './router'
 import App from './App.vue'
 
+
+// -------------------分割线-默认模式------------------ //
 // const app = createApp(App)
+// const router = createRouter({
+//   history: createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || '/micro-app/vue3/'),
+//   routes,
+// })
 // app.use(ElementPlus)
 // app.use(Antd)
 // app.use(router)
 // app.mount('#app')
 
-// console.log('微应用vue3渲染了')
+// console.log('微应用vue3渲染了 -- 默认模式')
 
 // // 监听卸载
-// window.addEventListener('unmount', function () {
-//   console.log('微应用vue3卸载了')
+// window.unmount = () => {
+//   console.log('微应用vue3卸载了 -- 默认模式')
 //   // 卸载应用
 //   app.unmount()
-// })
+// }
+
+
+// -------------------分割线-umd模式------------------ //
 
 let app = null
 let router = null
 let history = null
-// 将渲染操作放入 mount 函数
-function mount () {
+// 👇 将渲染操作放入 mount 函数，子应用初始化时会自动执行
+window.mount = () => {
   history = createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || '/micro-app/vue3/')
   router = createRouter({
     history,
@@ -40,24 +49,22 @@ function mount () {
   app.use(router)
   app.mount('#app')
 
-  console.log('微应用child-vue3渲染了')
+  console.log('微应用child-vue3渲染了 -- UMD模式')
 }
 
-// 将卸载操作放入 unmount 函数
-function unmount () {
+// 👇 将卸载操作放入 unmount 函数
+window.unmount = () => {
   app?.unmount()
   history?.destroy()
   app = null
   router = null
   history = null
-  console.log('微应用child-vue3卸载了')
+  console.log('微应用child-vue3卸载了 -- UMD模式')
 }
 
-// 微前端环境下，注册mount和unmount方法
-if (window.__MICRO_APP_ENVIRONMENT__) {
-  // @ts-ignore
-  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
-} else {
-  // 非微前端环境直接渲染
-  mount()
+// 如果不在微前端环境，则直接执行mount渲染
+if (!window.__MICRO_APP_ENVIRONMENT__) {
+  window.mount()
 }
+
+// -------------------分割线------------------ //