Merge pull request #1337 from micro-zoe/dev

release 1.0.0-rc.7
micro-zoe · Aug 20, 2024 · 03e623a · 03e623a
2 parents 43c0d33 + 44a03ef
commit 03e623a
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 30 deletions.
diff --git a/Contact.md b/Contact.md
@@ -1,7 +1,9 @@
 
 欢迎小伙伴们加入micro-app微信群交流^ ^
 
-![IMG_9187](https://github.com/user-attachments/assets/64d16edc-311a-46ea-8ce7-c6fcbe0651d3)
+![image](https://github.com/user-attachments/assets/35f37851-32e1-4751-aa80-2cfc28741988)
+
+
 
 
 

diff --git a/dev/main-react16/src/pages/react16/react16.js b/dev/main-react16/src/pages/react16/react16.js
@@ -23,7 +23,7 @@ export default class App extends React.Component {
     showMicroApp: true,
     testNum: 0,
     showModal: false,
-    routerMode: 'state',
+    routerMode: 'native',
     baseroute: '/micro-app/demo/react16',
   }
 
@@ -442,13 +442,13 @@ export default class App extends React.Component {
                   // disable-memory-router
                   router-mode={this.state.routerMode}
                   // keep-router-state
-                  // default-page='/micro-app/react16/page2'
+                  default-page='/micro-app/react16/page2'
                   // hidden-router
                   // disable-patch-request
                   // fiber
                   // ssr
                   // clear-data
-                  iframe
+                  // iframe
                 >
                 </micro-app>
               )

diff --git a/docs/navbar.md b/docs/navbar.md
@@ -1,6 +1,9 @@
 - [API](zh-cn/api/base-app)
 - [Micro-App-DevTools](zh-cn/micro-app-devtools)
 - [常见问题](zh-cn/questions)
+- API
+  - [主应用API](zh-cn/api/base-app)
+  - [子应用API](zh-cn/api/child-app)
 - Translations
   - [:cn: 中文](/zh-cn/)
   - [:uk: English](/en-us/)
diff --git a/docs/sidebar.md b/docs/sidebar.md
@@ -34,7 +34,7 @@
   - [子应用API](zh-cn/api/child-app)
 
 - 其他
+  - [常见问题](zh-cn/questions)
   - [Micro-App-DevTools](zh-cn/micro-app-devtools)
   - [部署](zh-cn/deploy)
-  - [常见问题](zh-cn/questions)
   - [更新日志](zh-cn/changelog)
diff --git a/docs/zh-cn/advanced.md b/docs/zh-cn/advanced.md
@@ -1,4 +1,4 @@
-## 1、自定义fetch
+## 1、自定义fetch :id=custom-fetch
 通过自定义fetch替换框架自带的fetch，可以修改fetch配置(添加cookie或header信息等等)，或拦截HTML、JS、CSS等静态资源。
 
 自定义的fetch必须是一个返回string类型的Promise。
@@ -33,4 +33,4 @@ microApp.start({
 ```
 
 > [!NOTE]
-> 1、如果跨域请求带cookie，那么`Access-Control-Allow-Origin`不能设置为`*`，必须指定域名，同时设置`Access-Control-Allow-Credentials: true`
+> 需要注意的是，如果跨域请求带cookie，那么`Access-Control-Allow-Origin`不能设置为`*`，必须指定域名，同时设置`Access-Control-Allow-Credentials: true`
diff --git a/docs/zh-cn/changelog.md b/docs/zh-cn/changelog.md
@@ -8,12 +8,22 @@
 
 ---
 
+### 1.0.0-rc.7
+
+`2024-8-20`
+
+- **Bug Fix**
+  - 🐞 修复 vue3子应用初始化时，`createWebHistory()`参数为空导致默认页面跳转异常的问题，[issue 1317](https://github.com/micro-zoe/micro-app/issues/1317)、[issue 1318](https://github.com/micro-zoe/micro-app/issues/1318)、[issue 1335](https://github.com/micro-zoe/micro-app/issues/1335)。
+
+- **Update**
+  - 🚀 更新 内存优化相关文档。
+
+
 ### 1.0.0-rc.6
 
 `2024-7-29`
 
 - **Bug Fix**
-
   - 🐞 修复 iframe沙箱下history.go传入的是非0数字时iframe被重置导致异常的问题，[PR 1112](https://github.com/micro-zoe/micro-app/pull/1112) by [keuby](https://github.com/keuby)。
   - 🐞 修复 iframe沙箱下子应用事件类型判断异常的问题，[issue 975](https://github.com/micro-zoe/micro-app/issues/975)，[issue 1120](https://github.com/micro-zoe/micro-app/issues/1120)，[PR 985](https://github.com/micro-zoe/micro-app/pull/985) by [keuby](https://github.com/keuby)。
   - 🐞 修复 UnoCSS等异步注册mount、unmount场景下导致umd模式加载失败的问题，[issue 881](https://github.com/micro-zoe/micro-app/issues/881)、[issue 1047](https://github.com/micro-zoe/micro-app/issues/1047)、[issue 1179](https://github.com/micro-zoe/micro-app/issues/1179)、[issue 1218](https://github.com/micro-zoe/micro-app/issues/1218)。
@@ -54,11 +64,9 @@
 `2024-4-29`
 
 - **New**
-
   - 🆕 新增虚拟路由系统`state`模式，用于适配更多使用场景。
 
 - **Bug Fix**
-
   - 🐞 修复了iframe沙箱下`unhandledrejection`事件失效的问题，[issue 1102](https://github.com/micro-zoe/micro-app/issues/1102)、[issue 1159](https://github.com/micro-zoe/micro-app/issues/1159)。
   - 🐞 修复了with沙箱下`keep-alive`子应用二次渲染后无法通过`microApp.router`控制跳转的问题，[issue 1115](https://github.com/micro-zoe/micro-app/issues/1115)。
   - 🐞 修复了with沙箱下预渲染子应用路由跳转异常的问题。
@@ -73,7 +81,6 @@
   - 🐞 修复了虚拟路由系统pure模式下，通过location进行跳转表现异常的问题，[issue 1135](https://github.com/micro-zoe/micro-app/issues/1135)。
 
 - **Update**
-
   - 🚀 优化了生命周期全局监听函数的传递参数。
   - 🚀 更新了路由相关文档。
 
@@ -83,15 +90,13 @@
 `2024-1-31`
 
 - **New**
-
   - 🆕 新增全局配置`iframeSrc`，用于动态设置iframe沙箱的src地址。
   - 🆕 新增micro-app元素公有变量`publicPath`、`baseRoute`，用于支持chrome插件，[PR 1052](https://github.com/micro-zoe/micro-app/pull/1052) by [raoenhui](https://github.com/raoenhui)。
   - 🆕 新增了在iframe沙箱下对`Document.prototype.createElementNS`、`Document.prototype.createDocumentFragment`的拦截和处理。
   - 🆕 新增了`removeDomScope`方法的配置项`force`，用于在一定时间内解除元素绑定，[issue 995](https://github.com/micro-zoe/micro-app/issues/995)。
   - 🆕 新增了with沙箱对于`Document.prototype.createElementNS`的直接处理，规避可能存在的元素泄漏风险。
 
 - **Bug Fix**
-
   - 🐞 修复了父应用非根目录下微应用无法正常渲染的问题，[PR 1037](https://github.com/micro-zoe/micro-app/pull/1037) by [xuhongbo](https://github.com/xuhongbo)。
   - 🐞 修复了iframe沙箱下antd `Dropdown`、`Tooltip`等组件渲染异常的问题，[PR 1015](https://github.com/micro-zoe/micro-app/pull/1015) by [keuby](https://github.com/keuby)。
   - 🐞 修复了micro-app url属性为相对地址时没有自动补全导致子应用渲染失败的问题，[PR 1056](https://github.com/micro-zoe/micro-app/pull/1056)。
@@ -142,13 +147,11 @@
 `2023-10-30`
 
 - **New**
-
   - 🆕 新增了子应用全局变量`__MICRO_APP_STATE__`，用于标记当前应用的状态。
   - 🆕 新增了子应用document变量`__MICRO_APP_NAME__`，用于标记document所属应用。
   - 🆕 重写了原型方法`Node.prototype.parentNode`，用于处理特殊元素parentNode的指向问题。
 
 - **Bug Fix**
-
   - 🐞 修复了在iframe沙箱下循环嵌套的问题。
   - 🐞 修复了在iframe沙箱下开启`inline`模式导致通过`getElementsByTagName`获取script元素失败的问题。
 

diff --git a/docs/zh-cn/configure.md b/docs/zh-cn/configure.md
@@ -7,7 +7,7 @@
 - 使用方式: `<micro-app name='xx'></micro-app>`
 - 注意事项: 必须以字母开头，且不可以带特殊符号(中划线、下划线除外)
 
-每个`name`都对应一个应用，当多个应用同时渲染时，name不可以重复。
+每个`name`对应一个子应用，当多个应用同时渲染时，name不可以重复。
 
 当`name`的值发生变化时，会卸载当前应用并重新渲染。
 

diff --git a/docs/zh-cn/questions.md b/docs/zh-cn/questions.md
@@ -138,3 +138,25 @@ micro-app依赖于CustomElements和Proxy两个较新的API。
 
 ## 17、一个页面加载过多个微前端 :id=17
 微前端在过多加载和深度嵌套时，要谨慎使用，尤其同个页面在不同版本微前端之间可能会有相互影响，使用者要酌情处理。
+
+## 18、子应用加载资源或请求接口时没有带上cookie :id=18
+
+<!-- tabs:start -->
+#### ** 场景1：加载子应用的静态资源时没有带上cookie **
+
+**原因：**MicroApp加载子应用的html、js等静态资源时默认不带cookie
+
+**解决方式：**通过自定义MicroApp的fetch方法，修改fetch的credentials配置，具体步骤参考[自定义fetch](/zh-cn/advanced?id=custom-fetch)
+
+> [!NOTE]
+> 需要注意的是，由于带了cookie，那么子应用的跨域配置`Access-Control-Allow-Origin`不能设置为`*`，必须指定域名，同时设置`Access-Control-Allow-Credentials: true`
+
+
+
+#### ** 场景2：子应用请求接口时没有带上cookie **
+
+**原因：**常见于子应用域名与接口域名相同，而与主应用域名不同的场景，主应用域名与cookie Domain不匹配，导致无法携带cookie
+
+**解决方式：**让后端在写入cookie时设置SameSite为None
+
+<!-- tabs:end -->
diff --git a/docs/zh-cn/sandbox.md b/docs/zh-cn/sandbox.md
@@ -163,10 +163,13 @@ window.stop虽然可以阻止脚本执行，但对于已经发送的js请求无
 
 初始化时占用的内存是一次性的，不会一直增长。
 
-如果在切换子应用时内存一直增长，造成内存泄漏风险，需要进行以下操作：
+如果在切换子应用时内存一直增长，造成内存泄漏风险，需要检查以下操作：
 
 - 1、将子应用切换到umd模式，切换方式参考[umd模式](/zh-cn/umd)
-- 2、不要设置[destroy](/zh-cn/configure?id=destroy)属性
-- 3、保证name和url一一对应
+- 2、不要设置[destroy](/zh-cn/configure?id=destroy)属性，destroy只适合一次性渲染的子应用。
+- 3、不要频繁使用新的[name](/zh-cn/configure?id=name)，因为内存是基于name进行缓存的，新的name会重新初始化应用，导致内存不断增长。
+
+    推荐的方式：一个子应用对应一个name，通过路由控制子应用渲染哪一个页面。
+
 
 做到以上几点基本上不会有内存泄漏问题，如果问题依然存在，可以试着切换到[iframe](/zh-cn/configure?id=iframe)沙箱。
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@micro-zoe/micro-app",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.7",
   "description": "A lightweight, efficient and powerful micro front-end framework",
   "private": false,
   "main": "lib/index.min.js",

diff --git a/src/sandbox/iframe/document.ts b/src/sandbox/iframe/document.ts
@@ -137,7 +137,19 @@ function patchDocumentPrototype (appName: string, microAppWindow: microAppWindow
       return rawMicroQuerySelector.call(_this, selectors)
     }
 
-    return appInstanceMap.get(appName)?.querySelector(selectors) ?? rawMicroQuerySelector.call(microDocument, selectors) ?? null
+    /**
+     * The child app cannot query the base element inside iframe
+     * Same for querySelectorAll
+     *
+     * Scenes:
+     *  1. vue-router@4.x --> createWebHistory(base?: string)
+     *    const baseEl = document.querySelector('base')
+     *    base = (baseEl && baseEl.getAttribute('href')) || '/'
+     *
+     * Issue: https://github.com/micro-zoe/micro-app/issues/1335
+     */
+    const result = appInstanceMap.get(appName)?.querySelector(selectors)
+    return result || selectors === 'base' ? result : rawMicroQuerySelector.call(microDocument, selectors)
   }
 
   function querySelectorAll (this: Document, selectors: string): any {
@@ -151,7 +163,7 @@ function patchDocumentPrototype (appName: string, microAppWindow: microAppWindow
     }
 
     const result = appInstanceMap.get(appName)?.querySelectorAll(selectors) ?? []
-    return result.length ? result : rawMicroQuerySelectorAll.call(microDocument, selectors)
+    return result.length || selectors === 'base' ? result : rawMicroQuerySelectorAll.call(microDocument, selectors)
   }
 
   microRootDocument.prototype.querySelector = querySelector
@@ -190,7 +202,8 @@ function patchDocumentPrototype (appName: string, microAppWindow: microAppWindow
       isInvalidQuerySelectorKey(key)
     ) {
       return rawMicroGetElementsByTagName.call(_this, key)
-    } else if (/^script|base$/i.test(key)) {
+    // just script, not base
+    } else if (/^script$/i.test(key)) {
       return rawMicroGetElementsByTagName.call(microDocument, key)
     }
 

diff --git a/src/sandbox/iframe/index.ts b/src/sandbox/iframe/index.ts
@@ -423,7 +423,7 @@ export default class IframeSandbox {
     this.microHead.appendChild(this.baseElement)
   }
 
-  // 初始化和每次跳转时都要更新base的href
+  // Update the base.href when initial and each redirect
   public updateIframeBase = (): void => {
     // origin must be child app origin
     this.baseElement?.setAttribute('href', createURL(this.url).origin + this.proxyLocation.pathname)

diff --git a/src/sandbox/router/location.ts b/src/sandbox/router/location.ts
@@ -364,12 +364,12 @@ export function updateMicroLocation (
   }
 
   /**
-   * native模式从state中取值，而浏览器地址的修改无法控制，很可能出现浏览器地址和__MICRO_APP_STATE__不一致的情况
-   * 尤其是在初始化和前进后退时，由于vue-router4会主动修改url地址，倒是上述情况经常出现
-   * 为了结局这个问题，在子应用初始化和响应popstate事件后，判断__MICRO_APP_STATE__和浏览器地址是否一致，如果不一致，则将浏览器地址更新为__MICRO_APP_STATE__的地址
-   * 说明：
-   *  1、如果__MICRO_APP_STATE__和url不一样，那么更新url的操作是对的，否则会产生url和渲染页面不一致的问题，开发者会更加困惑
-   *  2、当native模式有多个子应用同时存在，其中一个修改url地址，另外一个并不会改变__MICRO_APP_STATE__，刷新就产生问题，不一致，第二是根据谁更新url？
+   * The native mode also base of history.state, and the modification of the browser url cannot be controlled. It is very likely that the browser url and __MICRO_APP_STATE__ are different.
+   * Especially during init of child or forward and backward of browser, because vue-router@4 will actively modify the browser URL, the above situation often occurs
+   * To solve this problem, after child app is initialized and responds to the popstateEvent, it is determined whether __MICRO_APP_STATE__ and the browser url are different. If they are different, the browser url will updated to the address of __MICRO_APP_STATE__
+   * NOTE:
+   *  1. If __MICRO_APP_STATE__ is different from the URL, then the operation of updating the URL is correct, otherwise there will be a problem of inconsistency between the URL and the rendered page
+   *  2. When there are multiple child app in native mode, if one of them changes the URL address, the other one will not change __MICRO_APP_STATE__, and refresh browser will cause problems
    */
   const rawLocation = globalEnv.rawWindow.location
   if (