feat: 沙箱逻辑优化

McGorger · Dec 27, 2021 · ffe6d68 · ffe6d68
1 parent 01e7bb8
commit ffe6d68
Show file tree

Hide file tree

Showing 11 changed files with 147 additions and 118 deletions.
diff --git a/dev/children/react16/public/index.html b/dev/children/react16/public/index.html
@@ -21,6 +21,9 @@
     </script> -->
     <!-- <link rel="stylesheet" href="http://127.0.0.1:8080/test.css" global> -->
     <!-- <script defer src="http://127.0.0.1:8080/test.js"></script> -->
+    <script>
+      console.log(6666666, this)
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/dev/children/react16/src/index.js b/dev/children/react16/src/index.js
@@ -218,3 +218,5 @@ if (window.__MICRO_APP_ENVIRONMENT__) {
 //   window.self,
 //   window.globalThis,
 // )
+
+console.log(55555555, this)
diff --git a/dev/children/vue2/src/pages/page1.vue b/dev/children/vue2/src/pages/page1.vue
@@ -12,6 +12,12 @@
       <use xlink:href="#zoe-ui-right"></use>
     </svg>
     <div class='test-safari-before' title='sdfsfs'></div>
+    <div class="pt60">
+      <ul class="wrapper">
+        <li v-for="item in aaa" :key="item">{{ item }}</li>
+      </ul>
+      <button @click="test">test</button>
+    </div>
   </div>
 </template>
 
@@ -26,6 +32,7 @@ export default {
       version: Vue.version,
       centerDialogVisible: false,
       microDataStr: '',
+      aaa: 1,
     }
   },
   created () {
@@ -43,7 +50,20 @@ export default {
       console.log('vue2 来自基座应用的数据', data)
       this.centerDialogVisible = true
       this.microDataStr = JSON.stringify(data)
-    }
+    },
+    test() {
+      console.time("run loop", 10000);
+
+      for (let index = 2; index < 1 * 10000; index++) {
+        this.aaa = index;
+      }
+
+      console.timeLog("run loop", 10000);
+
+      this.$nextTick(() => {
+        console.timeEnd("run loop", 10000);
+      });
+    },
   }
 }
 </script>

diff --git a/dev/main-react16/src/pages/vue2/vue2.js b/dev/main-react16/src/pages/vue2/vue2.js
@@ -63,7 +63,7 @@ function Vue2 () {
         // shadowDOM
         // destroy
         // inline
-        disableScopecss
+        // disableScopecss
         // disableSandbox
       >
       </micro-app>

diff --git a/rollup.config.js b/rollup.config.js
@@ -32,7 +32,7 @@ const commonPlugins = [
   }),
   replace({
     preventAssignment: true,
-    __VERSION__: version,
+    __MICRO_APP_VERSION__: version,
     __TEST__: 'false',
   })
 ]

diff --git a/src/__tests__/sandbox/index.test.ts b/src/__tests__/sandbox/index.test.ts
@@ -142,7 +142,7 @@ describe('sandbox', () => {
   })
 
   // 逃离属性可以逃逸到外层真实window上&卸载时清空escapeKeys
-  test('escapeProperties should escape from microWindow to rawWindow', () => {
+  test('escapeProperties should escape from microAppWindow to rawWindow', () => {
     const sandbox = new Sandbox('test-app-escapeProperties', `http://127.0.0.1:${ports.sandbox}/common/`)
     sandbox.start('')
     const proxyWindow: any = sandbox.proxyWindow
@@ -195,7 +195,7 @@ describe('sandbox', () => {
 
     proxyWindow.location = 'https://www.micro-app-test.com'
 
-    expect(sandbox.microWindow.location).toBeUndefined()
+    expect(sandbox.microAppWindow.location).toBeUndefined()
   })
 
   // has方法从proxyWindow和rawWindow上同时判断

diff --git a/src/libs/utils.ts b/src/libs/utils.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-new-func, indent, @typescript-eslint/explicit-module-boundary-types */
 import type { Func } from '@micro-app/types'
 
-export const version = '__VERSION__'
+export const version = '__MICRO_APP_VERSION__'
 
 // do not use isUndefined
 export const isBrowser = typeof window !== 'undefined'

diff --git a/src/sandbox/effect.ts b/src/sandbox/effect.ts
@@ -1,4 +1,4 @@
-import type { microWindowType } from '@micro-app/types'
+import type { microAppWindowType } from '@micro-app/types'
 import {
   getCurrentAppName,
   setCurrentAppName,
@@ -8,7 +8,7 @@ import {
   rawDefineProperty,
 } from '../libs/utils'
 import { appInstanceMap } from '../create_app'
-import { getActiveApps } from '../micro_app'
+// import { getActiveApps } from '../micro_app'
 import globalEnv from '../libs/global_env'
 
 type MicroEventListener = EventListenerOrEventListenerObject & Record<string, any>
@@ -134,21 +134,21 @@ const formatEventList = ['unmount', 'appstate-change']
 /**
  * Format event name
  * @param type event name
- * @param microWindow micro window
+ * @param microAppWindow micro window
  */
-function formatEventType (type: string, microWindow: microWindowType): string {
+function formatEventType (type: string, microAppWindow: microAppWindowType): string {
   if (formatEventList.includes(type)) {
-    return `${type}-${microWindow.__MICRO_APP_NAME__}`
+    return `${type}-${microAppWindow.__MICRO_APP_NAME__}`
   }
   return type
 }
 
 /**
  * Rewrite side-effect events
- * @param microWindow micro window
+ * @param microAppWindow micro window
  */
-export default function effect (microWindow: microWindowType): Record<string, CallableFunction> {
-  const appName = microWindow.__MICRO_APP_NAME__
+export default function effect (microAppWindow: microAppWindowType): Record<string, CallableFunction> {
+  const appName = microAppWindow.__MICRO_APP_NAME__
   const eventListenerMap = new Map<string, Set<MicroEventListener>>()
   const intervalIdMap = new Map<number, timeInfo>()
   const timeoutIdMap = new Map<number, timeInfo>()
@@ -165,12 +165,12 @@ export default function effect (microWindow: microWindowType): Record<string, Ca
   } = globalEnv
 
   // listener may be null, e.g test-passive
-  microWindow.addEventListener = function (
+  microAppWindow.addEventListener = function (
     type: string,
     listener: MicroEventListener,
     options?: boolean | AddEventListenerOptions,
   ): void {
-    type = formatEventType(type, microWindow)
+    type = formatEventType(type, microAppWindow)
     const listenerList = eventListenerMap.get(type)
     if (listenerList) {
       listenerList.add(listener)
@@ -181,20 +181,20 @@ export default function effect (microWindow: microWindowType): Record<string, Ca
     rawWindowAddEventListener.call(rawWindow, type, listener, options)
   }
 
-  microWindow.removeEventListener = function (
+  microAppWindow.removeEventListener = function (
     type: string,
     listener: MicroEventListener,
     options?: boolean | AddEventListenerOptions,
   ): void {
-    type = formatEventType(type, microWindow)
+    type = formatEventType(type, microAppWindow)
     const listenerList = eventListenerMap.get(type)
     if (listenerList?.size && listenerList.has(listener)) {
       listenerList.delete(listener)
     }
     rawWindowRemoveEventListener.call(rawWindow, type, listener, options)
   }
 
-  microWindow.setInterval = function (
+  microAppWindow.setInterval = function (
     handler: TimerHandler,
     timeout?: number,
     ...args: any[]
@@ -204,7 +204,7 @@ export default function effect (microWindow: microWindowType): Record<string, Ca
     return intervalId
   }
 
-  microWindow.setTimeout = function (
+  microAppWindow.setTimeout = function (
     handler: TimerHandler,
     timeout?: number,
     ...args: any[]
@@ -214,12 +214,12 @@ export default function effect (microWindow: microWindowType): Record<string, Ca
     return timeoutId
   }
 
-  microWindow.clearInterval = function (intervalId: number) {
+  microAppWindow.clearInterval = function (intervalId: number) {
     intervalIdMap.delete(intervalId)
     rawClearInterval.call(rawWindow, intervalId)
   }
 
-  microWindow.clearTimeout = function (timeoutId: number) {
+  microAppWindow.clearTimeout = function (timeoutId: number) {
     timeoutIdMap.delete(timeoutId)
     rawClearTimeout.call(rawWindow, timeoutId)
   }
@@ -267,17 +267,17 @@ export default function effect (microWindow: microWindowType): Record<string, Ca
     // rebuild window event
     umdWindowListenerMap.forEach((listenerList, type) => {
       for (const listener of listenerList) {
-        microWindow.addEventListener(type, listener, listener?.__MICRO_MARK_OPTIONS__)
+        microAppWindow.addEventListener(type, listener, listener?.__MICRO_MARK_OPTIONS__)
       }
     })
 
     // rebuild timer
     umdIntervalIdMap.forEach((info: timeInfo) => {
-      microWindow.setInterval(info.handler, info.timeout, ...info.args)
+      microAppWindow.setInterval(info.handler, info.timeout, ...info.args)
     })
 
     umdTimeoutIdMap.forEach((info: timeInfo) => {
-      microWindow.setTimeout(info.handler, info.timeout, ...info.args)
+      microAppWindow.setTimeout(info.handler, info.timeout, ...info.args)
     })
 
     // rebuild onclick event
@@ -342,31 +342,31 @@ export default function effect (microWindow: microWindowType): Record<string, Ca
   }
 }
 
-window.addEventListener('mousedown', (e: Event) => {
-  const targetNode = e.target
-  const activeApps = getActiveApps(true)
-  let isScopeOfMicroApp = false
-  for (const appName of activeApps) {
-    const app = appInstanceMap.get(appName)!
-    if (targetNode instanceof Node && app.container!.contains(targetNode)) {
-      isScopeOfMicroApp = true
-      // console.log(111111, appName)
-      setCurrentAppName(appName)
-      break
-    }
-  }
-  if (!isScopeOfMicroApp) {
-    setCurrentAppName(null)
-  }
-}, false)
-
-let isWaitingForMacroReset = false
-window.addEventListener('mouseup', () => {
-  if (!isWaitingForMacroReset && getCurrentAppName()) {
-    isWaitingForMacroReset = true
-    setTimeout(() => {
-      setCurrentAppName(null)
-      isWaitingForMacroReset = false
-    })
-  }
-}, false)
+// window.addEventListener('mousedown', (e: Event) => {
+//   const targetNode = e.target
+//   const activeApps = getActiveApps(true)
+//   let isScopeOfMicroApp = false
+//   for (const appName of activeApps) {
+//     const app = appInstanceMap.get(appName)!
+//     if (targetNode instanceof Node && app.container!.contains(targetNode)) {
+//       isScopeOfMicroApp = true
+//       // console.log(111111, appName)
+//       setCurrentAppName(appName)
+//       break
+//     }
+//   }
+//   if (!isScopeOfMicroApp) {
+//     setCurrentAppName(null)
+//   }
+// }, false)
+
+// let isWaitingForMacroReset = false
+// window.addEventListener('mouseup', () => {
+//   if (!isWaitingForMacroReset && getCurrentAppName()) {
+//     isWaitingForMacroReset = true
+//     setTimeout(() => {
+//       setCurrentAppName(null)
+//       isWaitingForMacroReset = false
+//     })
+//   }
+// }, false)