feat: with targe attach microWindow

hetianhe · Dec 26, 2021 · 01e7bb8 · 01e7bb8
1 parent 50c39b8
commit 01e7bb8
Show file tree

Hide file tree

Showing 15 changed files with 124 additions and 101 deletions.
diff --git a/dev/children/react16/src/index.js b/dev/children/react16/src/index.js
@@ -194,3 +194,27 @@ if (window.__MICRO_APP_ENVIRONMENT__) {
 //   console.log(document)
 //   console.log(window.document)
 // }, 5000);
+
+// window.a = 1111111
+// console.log(a, alert, window.alert) // eslint-disable-line
+
+// window.abc1111111111111()
+// abc1111111111111() // eslint-disable-line
+
+// window.abc222 = function () {
+//   console.log(33333333, this)
+// }
+
+// window.abc222()
+
+// abc222() // eslint-disable-line
+
+// console.log(
+//   66666,
+//   window.hasOwnProperty('microApp'),
+//   window.top,
+//   window.parent,
+//   window.window,
+//   window.self,
+//   window.globalThis,
+// )
diff --git a/dev/children/vue2/src/pages/table.vue b/dev/children/vue2/src/pages/table.vue
@@ -395,6 +395,7 @@ export default {
         this.$nextTick(function () {
           console.timeEnd('render')
           // console.log(window.a1)
+          // console.log(window.a2)
         })
       }, 100);
     },

diff --git a/dev/main-react16/src/global.jsx b/dev/main-react16/src/global.jsx
@@ -106,9 +106,9 @@ microApp.start({
     let config = null
     if (url === 'http://localhost:3001/micro-app/react16/?a=1') {
       config = {
-        headers: {
-          'custom-head': 'custom-head',
-        },
+        // headers: {
+        //   'custom-head': 'custom-head',
+        // },
         // micro-app默认不带cookie，如果需要添加cookie需要设置credentials
         // credentials: 'include',
       }

diff --git a/docs/zh-cn/advanced.md b/docs/zh-cn/advanced.md
@@ -182,7 +182,7 @@ async function mount () {
 
 // 👇 将卸载操作放入 unmount 函数 -- 必填
 function unmount () {
-  // angular在部分场景下执行destory时会删除根元素app-root，此时可删除app.destroy()以避免这个问题
+  // angular在部分场景下执行destroy时会删除根元素app-root，此时可删除app.destroy()以避免这个问题
   app.destroy();
   app = null;
 }

diff --git a/docs/zh-cn/api.md b/docs/zh-cn/api.md
@@ -126,7 +126,7 @@ window.eventCenterForAppName = new EventCenterForMicroApp(appName)
 // unmountApp 参数配置
 interface unmountAppParams {
   /**
-   * destory: 是否强制卸载应用并删除缓存资源，默认值：false
+   * destroy: 是否强制卸载应用并删除缓存资源，默认值：false
    * 优先级: 高于 clearAliveState
    * 场景1: 当子应用已经卸载或keep-alive应用已经推入后台，则清除应用状态及缓存资源
    * 场景2: 当子应用正在运行，则卸载应用并删除状态及缓存资源
@@ -149,7 +149,7 @@ function unmountApp(appName: string, options?: unmountAppParams): Promise<void>
 unmountApp(子应用名称).then(() => console.log('卸载成功'))
 
 // 卸载应用并清空缓存资源
-unmountApp(子应用名称, { destory: true }).then(() => console.log('卸载成功'))
+unmountApp(子应用名称, { destroy: true }).then(() => console.log('卸载成功'))
 
 // 如果子应用是keep-alive应用，则卸载并清空状态，如果子应用不是keep-alive应用，则正常卸载
 unmountApp(子应用名称, { clearAliveState: true }).then(() => console.log('卸载成功'))
@@ -165,7 +165,7 @@ unmountApp(子应用名称, { clearAliveState: true }).then(() => console.log('
 // unmountAllApps 参数配置
 interface unmountAppParams {
   /**
-   * destory: 是否强制卸载应用并删除缓存资源，默认值：false
+   * destroy: 是否强制卸载应用并删除缓存资源，默认值：false
    * 优先级: 高于 clearAliveState
    * 场景1: 当子应用已经卸载或keep-alive应用已经推入后台，则清除应用状态及缓存资源
    * 场景2: 当子应用正在运行，则卸载应用并删除状态及缓存资源
@@ -188,7 +188,7 @@ function unmountAllApps(appName: string, options?: unmountAppParams): Promise<vo
 unmountAllApps().then(() => console.log('卸载成功'))
 
 // 卸载所有应用并清空缓存资源
-unmountAllApps({ destory: true }).then(() => console.log('卸载成功'))
+unmountAllApps({ destroy: true }).then(() => console.log('卸载成功'))
 
 // 如果子应用是keep-alive应用，则卸载并清空状态，如果子应用不是keep-alive应用，则正常卸载
 unmountAllApps({ clearAliveState: true }).then(() => console.log('卸载成功'))

diff --git a/docs/zh-cn/configure.md b/docs/zh-cn/configure.md
@@ -50,7 +50,7 @@
 
 默认情况下，子应用被卸载后会缓存静态资源，以便在重新渲染时获得更好的性能。
 
-开启destory，子应用在卸载后会清空缓存资源，再次渲染时重新请求数据。
+开启destroy，子应用在卸载后会清空缓存资源，再次渲染时重新请求数据。
 
 ## disableScopecss
 - Desc: `禁用样式隔离`
@@ -98,7 +98,7 @@
 
 开启keep-alive后，应用卸载时会进入缓存，而不是销毁它们，以便保留应用的状态和提升重复渲染的性能。
 
-keep-alive的优先级小于[destory](/zh-cn/configure?id=destroy)，当两者同时存在时，keep-alive将失效。
+keep-alive的优先级小于[destroy](/zh-cn/configure?id=destroy)，当两者同时存在时，keep-alive将失效。
 
 ## shadowDOM
 - Desc: `是否开启shadowDOM`

diff --git a/docs/zh-cn/framework/angular.md b/docs/zh-cn/framework/angular.md
@@ -179,7 +179,7 @@ window.addEventListener('unmount', function () {
 
 ## 常见问题
 #### 1、基座是react、nextjs应用，引入zone.js后导致micro-app元素生命周期异常
-**解决方式：** 在micro-app元素上设置destory
+**解决方式：** 在micro-app元素上设置destroy
 
 #### 2、@angular/material组件库样式失效
 **解决方式：** 关闭样式隔离

diff --git a/src/create_app.ts b/src/create_app.ts
@@ -280,7 +280,7 @@ export default class CreateApp implements AppInterface {
   private actionsForUnmount (destroy: boolean, unmountcb?: CallableFunction): void {
     this.sandBox?.stop()
     if (destroy) {
-      this.actionsForCompletelyDestory()
+      this.actionsForCompletelyDestroy()
     } else if (this.umdMode && (this.container as Element).childElementCount) {
       cloneContainer(this.container as Element, this.source.html as Element, false)
     }
@@ -299,7 +299,7 @@ export default class CreateApp implements AppInterface {
   }
 
   // actions for completely destroy
-  actionsForCompletelyDestory (): void {
+  actionsForCompletelyDestroy (): void {
     if (!this.useSandbox && this.umdMode) {
       delete window[this.libraryName as any]
     }

diff --git a/src/libs/utils.ts b/src/libs/utils.ts
@@ -65,6 +65,10 @@ export function isShadowRoot (target: unknown): boolean {
   return typeof ShadowRoot !== 'undefined' && target instanceof ShadowRoot
 }
 
+export const rawDefineProperty = Object.defineProperty
+
+export const rawDefineProperties = Object.defineProperties
+
 /**
  * format error log
  * @param msg message

diff --git a/src/micro_app.ts b/src/micro_app.ts
@@ -36,7 +36,7 @@ export function getAllApps (): string[] {
 }
 
 export interface unmountAppParams {
-  destroy?: boolean // destory app, default is false
+  destroy?: boolean // destroy app, default is false
   clearAliveState?: boolean // clear keep-alive app state, default is false
 }
 
@@ -52,7 +52,7 @@ export function unmountApp (appName: string, options?: unmountAppParams): Promis
     if (app) {
       if (app.getAppState() === appStates.UNMOUNT || app.isPrefetch) {
         if (options?.destroy) {
-          app.actionsForCompletelyDestory()
+          app.actionsForCompletelyDestroy()
         }
         reslove()
       } else if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {

diff --git a/src/micro_app_element.ts b/src/micro_app_element.ts
@@ -333,7 +333,7 @@ export function defineElement (tagName: string): void {
        * fix of unmounted umd app with disableSandbox
        */
       if (appInstanceMap.has(this.appName)) {
-        appInstanceMap.get(this.appName)!.actionsForCompletelyDestory()
+        appInstanceMap.get(this.appName)!.actionsForCompletelyDestroy()
       }
 
       const instance: AppInterface = new CreateApp({

diff --git a/src/sandbox/effect.ts b/src/sandbox/effect.ts
@@ -5,6 +5,7 @@ import {
   logWarn,
   isFunction,
   isBoundFunction,
+  rawDefineProperty,
 } from '../libs/utils'
 import { appInstanceMap } from '../create_app'
 import { getActiveApps } from '../micro_app'
@@ -38,7 +39,7 @@ function overwriteDocumentOnClick (): void {
     })
   }
 
-  Object.defineProperty(document, 'onclick', {
+  rawDefineProperty(document, 'onclick', {
     configurable: true,
     enumerable: true,
     get () {