diff --git a/Contact.md b/Contact.md index 72332fee..1754b434 100644 --- 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 index 8657c03a..2f1445dd 100644 --- 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 > ) diff --git a/docs/navbar.md b/docs/navbar.md index 23b6cadd..6d1a1277 100755 --- 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 index 6f3c5c66..6d7aeb11 100755 --- 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 index 02d15b9b..2829f476 100644 --- 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` \ No newline at end of file +> 需要注意的是，如果跨域请求带cookie，那么`Access-Control-Allow-Origin`不能设置为`*`，必须指定域名，同时设置`Access-Control-Allow-Credentials: true` diff --git a/docs/zh-cn/changelog.md b/docs/zh-cn/changelog.md index 9eb54373..2a403d1b 100644 --- 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,7 +90,6 @@ `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`的拦截和处理。 @@ -91,7 +97,6 @@ - 🆕 新增了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 index f21ed709..fb50e2e3 100644 --- a/docs/zh-cn/configure.md +++ b/docs/zh-cn/configure.md @@ -7,7 +7,7 @@ - 使用方式: `` - 注意事项: 必须以字母开头，且不可以带特殊符号(中划线、下划线除外) -每个`name`都对应一个应用，当多个应用同时渲染时，name不可以重复。 +每个`name`对应一个子应用，当多个应用同时渲染时，name不可以重复。 当`name`的值发生变化时，会卸载当前应用并重新渲染。 diff --git a/docs/zh-cn/questions.md b/docs/zh-cn/questions.md index d8ff681e..e0f9e5f6 100644 --- 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 + + +#### ** 场景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 + + diff --git a/docs/zh-cn/sandbox.md b/docs/zh-cn/sandbox.md index 79809d80..6ccefc50 100644 --- 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 index 65ff663b..a8889a2f 100644 --- 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 index 2e868287..1d50b877 100644 --- 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 index e4f987a4..1e81338d 100644 --- 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 index b79b50d9..c515a9ff 100644 --- 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 (