feat(1.0.0-beta.4): Optimize iframe support for disable memory router

dev/children/vite2/.gitignore

@@ -1,6 +1,7 @@
 node_modules
 .DS_Store
 dist
+vite2
 dist-ssr
 *.local
 /vite

dev/children/vite2/components.d.ts

@@ -66,8 +66,6 @@ declare module '@vue/runtime-core' {
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
-    NButton: typeof import('naive-ui')['NButton']
-    NPopover: typeof import('naive-ui')['NPopover']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

dev/children/vite4/.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+vite4
 dist-ssr
 *.local
 

dev/children/vite4/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "start": "vite --force",
+    "start": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },

dev/main-react16/src/pages/vite4/vite4.js

@@ -40,17 +40,21 @@ function vite4 (props) {
     microApp.router.push({name: 'vite4', path: '/micro-app/vite4/ant-design-vue'})
   }
 
+  function consoleRouteCurrent () {
+    console.log('router.current', microApp.router.current.get('vite4'))
+  }
+
   useEffect(() => {
     console.time('vite4')
-    // const releaseBeforeEach1 = microApp.router.beforeEach((to, from, appName) => {
-    //   console.log('全局 beforeEach: ', to, from, appName)
-    // })
+    const releaseBeforeEach1 = microApp.router.beforeEach((to, from, appName) => {
+      console.log('全局 beforeEach: ', to, from, appName)
+    })
 
-    // const releaseBeforeEach2 = microApp.router.beforeEach({
-    //   vite4 (to, from) {
-    //     console.log('指定 beforeEach: ', to, from)
-    //   }
-    // })
+    const releaseBeforeEach2 = microApp.router.beforeEach({
+      vite4 (to, from) {
+        console.log('指定 beforeEach: ', to, from)
+      }
+    })
 
     // const releaseAfterEach1 = microApp.router.afterEach((to, from, appName) => {
     //   console.log('全局 afterEach: ', to, from, appName)
@@ -65,8 +69,8 @@ function vite4 (props) {
     microApp.router.setBaseAppRouter(props.history)
 
     return () => {
-      // releaseBeforeEach1()
-      // releaseBeforeEach2()
+      releaseBeforeEach1()
+      releaseBeforeEach2()
       // releaseAfterEach1()
       // releaseAfterEach2()
     }
@@ -82,6 +86,7 @@ function vite4 (props) {
           <Button type="primary" onClick={jumpToHome}>控制子应用跳转首页</Button>
           <Button type="primary" onClick={jumpToPage2}>控制子应用跳转element-plus</Button>
           <Button type="primary" onClick={jumpToPage3}>控制子应用跳转ant-design-vue</Button>
+          <Button type="primary" onClick={consoleRouteCurrent}>打印router.current</Button>
         </Col>
       </div>
       {
@@ -106,7 +111,7 @@ function vite4 (props) {
         keep-router-state
         disable-memory-router
         // disable-patch-request
-        // keep-alive
+        keep-alive
         // default-page='/micro-app/vite4/page2'
         baseroute='/micro-app/demo/vite4'
       >

src/create_app.ts

@@ -503,6 +503,7 @@ export default class CreateApp implements AppInterface {
       keepRouteState: keepRouteState && !destroy,
       destroy,
       clearData: clearData || destroy,
+      useMemoryRouter: this.useMemoryRouter,
     })
 
     // dispatch unmount event to base app
@@ -589,6 +590,12 @@ export default class CreateApp implements AppInterface {
       false,
     )
 
+    /**
+     * TODO:
+     * 1. iframe沙箱在关闭虚拟路由系统时，重新展示时不更新浏览器地址，这样和with沙箱保持一致。
+     *    但是iframe是可以做到重新展示时更新浏览器地址的，这里临时不支持，等待后续with沙箱也支持的时候再优化
+     *    只需要去除 if (this.useMemoryRouter) 的判断即可
+     */
     if (this.useMemoryRouter) {
       // called before lifeCyclesEvent
       this.sandBox?.setRouteInfoForKeepAliveApp()

src/sandbox/iframe/index.ts

@@ -28,7 +28,6 @@ import {
 } from '../../interact'
 import {
   patchIframeRoute,
-  actionsForDisableMemoryRoute,
 } from './route'
 import {
   router,
@@ -160,19 +159,33 @@ export default class IframeSandbox {
   }: SandBoxStartParams): void {
     if (this.active) return
     this.active = true
-    if (useMemoryRouter) {
-      this.initRouteState(defaultPage)
-      // unique listener of popstate event for sub app
-      this.removeHistoryListener = addHistoryListener(
-        this.microAppWindow.__MICRO_APP_NAME__,
-      )
-    } else {
-      // actions when memory-route disable
-      actionsForDisableMemoryRoute(
-        this.microAppWindow.__MICRO_APP_NAME__,
-        this.microAppWindow,
-        baseroute,
-      )
+    /**
+     * Sync router info to iframe when exec sandbox.start with disable or enable memory-router
+     * e.g.:
+     *  vue-router@4.x get target path by remove the base section from rawLocation.pathname
+     *  code: window.location.pathname.slice(base.length) || '/'; (base is baseroute)
+     * NOTE:
+     *  1. iframe router and browser router are separated, we should update iframe router manually
+     *  2. withSandbox location is browser location when disable memory-router, so no need to do anything
+     */
+    /**
+     * 做一些记录：
+     * 1. iframe关闭虚拟路由系统后，default-page无法使用，推荐用户直接使用浏览器地址控制首页渲染
+     *    补充：keep-router-state 也无法配置，因为keep-router-state一定为true。
+     * 2. 导航拦截、current.route 可以正常使用
+     * 3. 可以正常控制子应用跳转，方式还是自上而下(也可以是子应用内部跳转，这种方式更好一点，减小对基座的影响，不会导致vue的循环刷新)
+     * 4. 关闭虚拟路由以后会对应 route-mode='custom' 模式，包括with沙箱也会这么做
+     * 5. 关闭虚拟路由是指尽可能模式没有虚拟路由的情况，子应用直接获取浏览器location和history，控制浏览器跳转
+     */
+    this.initRouteState(defaultPage)
+
+    // unique listener of popstate event for child app
+    this.removeHistoryListener = addHistoryListener(
+      this.microAppWindow.__MICRO_APP_NAME__,
+    )
+
+    if (!useMemoryRouter) {
+      this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute
     }
 
     /**
@@ -198,15 +211,16 @@ export default class IframeSandbox {
     keepRouteState,
     destroy,
     clearData,
+    useMemoryRouter,
   }: SandBoxStopParams): void {
     if (!this.active) return
     this.recordAndReleaseEffect({ clearData }, !umdMode || destroy)
 
-    if (this.removeHistoryListener) {
-      this.clearRouteState(keepRouteState)
-      // release listener of popstate
-      this.removeHistoryListener()
-    }
+    // if keep-route-state is true or disable memory-router, preserve microLocation state
+    this.clearRouteState(keepRouteState || !useMemoryRouter)
+
+    // release listener of popstate for child app
+    this.removeHistoryListener?.()
 
     if (!umdMode || destroy) {
       this.deleteIframeElement()

src/sandbox/iframe/route.ts

@@ -12,7 +12,6 @@ import {
 import {
   assign,
 } from '../../libs/utils'
-import globalEnv from '../../libs/global_env'
 
 export function patchIframeRoute (
   appName: string,
@@ -52,34 +51,3 @@ export function patchIframeRoute (
     childHost,
   )
 }
-
-/**
- * actions when memory-route disable
- * @param appName app name
- * @param microAppWindow iframeWindow
- * @param baseroute base route for child app
- */
-export function actionsForDisableMemoryRoute (
-  appName: string,
-  microAppWindow: microAppWindowType,
-  baseroute: string,
-): void {
-  microAppWindow.__MICRO_APP_BASE_ROUTE__ = microAppWindow.__MICRO_APP_BASE_URL__ = baseroute
-
-  /**
-   * Sync browser router info to iframe when disable memory-router
-   * e.g.:
-   *  vue-router@4.x get target path by remove the base section from location.pathname
-   *  code: window.location.pathname.slice(base.length) || '/'; (base is baseroute)
-   * NOTE:
-   *  1. iframe router and browser router are separated, we should update iframe router manually
-   *  2. withSandbox location is browser location when disable memory-router, so no need to do anything
-   */
-  const rawLocation = globalEnv.rawWindow.location
-  updateMicroLocation(
-    appName,
-    rawLocation.href,
-    rawLocation,
-    'prevent'
-  )
-}