From 6e64e7d5cf29ab28003a2dd30f236abf915c9fc2 Mon Sep 17 00:00:00 2001 From: bailicangdu <1264889788@qq.com> Date: Mon, 29 Apr 2024 16:41:54 +0800 Subject: [PATCH] feat(1.0.0-rc.5): update to 1.0.0-rc.5 --- dev/main-react16/src/global.jsx | 34 +++++++------- dev/main-react16/src/pages/react16/react16.js | 6 +-- dev/main-react16/src/pages/vite2/vite2.js | 2 +- dev/main-react16/src/pages/vue2/vue2.js | 2 +- docs/zh-cn/changelog.md | 3 +- docs/zh-cn/life-cycles.md | 30 ++++++------ docs/zh-cn/native-mode.md | 12 ++--- docs/zh-cn/router.md | 46 +++++++++++++++---- package.json | 2 +- src/interact/lifecycles_event.ts | 2 +- typings/global.d.ts | 16 +++---- 11 files changed, 91 insertions(+), 64 deletions(-) diff --git a/dev/main-react16/src/global.jsx b/dev/main-react16/src/global.jsx index e5ba49362..0d432c285 100644 --- a/dev/main-react16/src/global.jsx +++ b/dev/main-react16/src/global.jsx @@ -75,7 +75,7 @@ microApp.start({ // 'disable-patch-request': true, // 'keep-router-state': true, // 'hidden-router': true, - // 'router-mode': 'custom', + // 'router-mode': 'state', // esmodule: true, // ssr: true, // preFetchApps: prefetchConfig, @@ -87,29 +87,29 @@ microApp.start({ // }, // iframeSrc: 'http://localhost:3000/', lifeCycles: { - created (e) { - console.log('created 全局监听', 'name:', e.detail.name) + created (e, appName) { + console.log(`子应用${appName}被创建 -- 全局监听`) }, - beforemount (e) { - console.log('beforemount 全局监听', 'name:', e.detail.name) + beforemount (e, appName) { + console.log(`子应用${appName}即将渲染 -- 全局监听`) }, - mounted (e) { - console.log('mounted 全局监听', 'name:', e.detail.name) + mounted (e, appName) { + console.log(`子应用${appName}已经渲染完成 -- 全局监听`) }, - unmount (e) { - console.log('unmount 全局监听', 'name:', e.detail.name) + unmount (e, appName) { + console.log(`子应用${appName}已经卸载 -- 全局监听`) }, - error (e) { - console.log('error 全局监听', 'name:', e.detail.name) + error (e, appName) { + console.log(`子应用${appName}加载出错 -- 全局监听`) }, - beforeshow (e) { - console.log('beforeshow 全局监听', 'name:', e.detail.name) + beforeshow (e, appName) { + console.log(`子应用${appName} beforeshow -- 全局监听`) }, - aftershow (e) { - console.log('aftershow 全局监听', 'name:', e.detail.name) + aftershow (e, appName) { + console.log(`子应用${appName} aftershow -- 全局监听`) }, - afterhidden (e) { - console.log('afterhidden 全局监听', 'name:', e.detail.name) + afterhidden (e, appName) { + console.log(`子应用${appName} afterhidden -- 全局监听`) }, }, plugins: { diff --git a/dev/main-react16/src/pages/react16/react16.js b/dev/main-react16/src/pages/react16/react16.js index b69f3c21d..eb94b436b 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: 'pure', + routerMode: 'state', baseroute: '/micro-app/demo/react16', } @@ -440,7 +440,7 @@ export default class App extends React.Component { // disable-scopecss // shadowDOM // disable-memory-router - router-mode={this.state.routerMode} + // router-mode={this.state.routerMode} // keep-router-state // default-page='/micro-app/react16/page2' // hidden-router @@ -448,7 +448,7 @@ export default class App extends React.Component { // fiber // ssr // clear-data - // iframe + iframe > ) diff --git a/dev/main-react16/src/pages/vite2/vite2.js b/dev/main-react16/src/pages/vite2/vite2.js index 311a6fc0a..b3ecf9081 100644 --- a/dev/main-react16/src/pages/vite2/vite2.js +++ b/dev/main-react16/src/pages/vite2/vite2.js @@ -109,7 +109,7 @@ function vite2 (props) { // keep-alive // default-page='/micro-app/vite2/element-plus' // disable-memory-router - // router-mode='native' + router-mode='state' baseroute='/micro-app/demo/vite2' > diff --git a/dev/main-react16/src/pages/vue2/vue2.js b/dev/main-react16/src/pages/vue2/vue2.js index 5fc1dc36d..4e68b786e 100644 --- a/dev/main-react16/src/pages/vue2/vue2.js +++ b/dev/main-react16/src/pages/vue2/vue2.js @@ -91,7 +91,7 @@ function Vue2 () { // disableSandbox // clear-data // iframe - router-mode='pure' + router-mode='native' > diff --git a/docs/zh-cn/changelog.md b/docs/zh-cn/changelog.md index 3e6d8d2d7..5009394a7 100644 --- a/docs/zh-cn/changelog.md +++ b/docs/zh-cn/changelog.md @@ -10,7 +10,7 @@ ### 1.0.0-rc.5 -`2024-2-29` +`2024-4-29` - **New** @@ -33,6 +33,7 @@ - **Update** + - 🚀 优化了生命周期全局监听函数的传递参数。 - 🚀 更新了路由相关文档。 diff --git a/docs/zh-cn/life-cycles.md b/docs/zh-cn/life-cycles.md index 98ad72420..bdf409da3 100644 --- a/docs/zh-cn/life-cycles.md +++ b/docs/zh-cn/life-cycles.md @@ -15,7 +15,7 @@ 子应用卸载时触发。 #### 5. error -子应用渲染出错时触发,只有会导致渲染终止的错误才会触发此生命周期。 +子应用加载出错时触发,只有会导致渲染终止的错误才会触发此生命周期。 ## 监听生命周期 @@ -37,10 +37,10 @@ import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event' name='xx' url='xx' onCreated={() => console.log('micro-app元素被创建')} - onBeforemount={() => console.log('即将被渲染')} + onBeforemount={() => console.log('即将渲染')} onMounted={() => console.log('已经渲染完成')} onUnmount={() => console.log('已经卸载')} - onError={() => console.log('渲染出错')} + onError={() => console.log('加载出错')} /> ``` @@ -66,7 +66,7 @@ export default { console.log('micro-app元素被创建') }, beforemount () { - console.log('即将被渲染') + console.log('即将渲染') }, mounted () { console.log('已经渲染完成') @@ -75,7 +75,7 @@ export default { console.log('已经卸载') }, error () { - console.log('渲染出错') + console.log('加载出错') } } } @@ -117,20 +117,20 @@ import microApp from '@micro-zoe/micro-app' microApp.start({ lifeCycles: { - created (e) { - console.log('created') + created (e, appName) { + console.log(`子应用${appName}被创建`) }, - beforemount (e) { - console.log('beforemount') + beforemount (e, appName) { + console.log(`子应用${appName}即将渲染`) }, - mounted (e) { - console.log('mounted') + mounted (e, appName) { + console.log(`子应用${appName}已经渲染完成`) }, - unmount (e) { - console.log('unmount') + unmount (e, appName) { + console.log(`子应用${appName}已经卸载`) }, - error (e) { - console.log('error') + error (e, appName) { + console.log(`子应用${appName}加载出错`) } } }) diff --git a/docs/zh-cn/native-mode.md b/docs/zh-cn/native-mode.md index 679051e96..80c5c2a28 100644 --- a/docs/zh-cn/native-mode.md +++ b/docs/zh-cn/native-mode.md @@ -1,6 +1,6 @@ -native模式下子应用基于浏览器路由进行渲染,与主应用共用浏览器路由,具体原理参考[关于native模式的原理解析](/zh-cn/native-mode?id=关于native模式的原理解析)。 +native模式是指放开路由隔离,主应用和子应用同时基于浏览器路由进行渲染,共用同一套location和history,拥有更好的用户体验,但更容易导致主应用和子应用的路由冲突,具体原理参考[关于native模式的原理解析](/zh-cn/native-mode?id=关于native模式的原理解析)。 -此时需要更加复杂的路由配置,主应用和子应用的路由都要进行一些改造,相应的也会获得更好的路由体验。 +native模式需要更加复杂的路由配置,主应用和子应用的路由都要进行一些改造。 ### 路由类型约束 native模式下主、子应用需要遵循以下约束: @@ -155,7 +155,7 @@ let app = new Vue({ ### 关于native模式的原理解析 **原理:**子应用根据浏览器地址渲染对应的页面,而不是micro-app的url属性 -##### 举个栗子 🌰 : +##### 例1: 浏览器地址为:`http://localhost:3000/page1?id=1#hash`,此时pathname为`/page1`,search为`?id=1`,hash为`#hash`。 @@ -175,7 +175,7 @@ let app = new Vue({ 子应用加载完成后会根据浏览器的地址匹配并渲染对应的页面。 -##### 栗子2 🌰 : +##### 例2: 场景:主应用是history路由,子应用也是history路由,我们要跳转主应用的`my-app`页面,`my-app`页面中嵌入子应用,我们要展现子应用的`page1`页面。 @@ -190,7 +190,7 @@ micro-app配置如下: ``` -##### 栗子3 🌰 : +##### 例3: 场景:主应用是hash路由,子应用也是hash路由,我们要跳转主应用的`my-app`页面,`my-app`页面中嵌入子应用,我们要展现子应用的`page1`页面。 @@ -203,7 +203,7 @@ micro-app配置如下: ``` -##### 栗子4 🌰 : +##### 例4: 场景:主应用是history路由,子应用是hash路由,我们要跳转主应用的`my-app`页面,页面中嵌入子应用,我们要展现子应用的`page1`页面。 diff --git a/docs/zh-cn/router.md b/docs/zh-cn/router.md index 143dd78fe..bbb17182f 100644 --- a/docs/zh-cn/router.md +++ b/docs/zh-cn/router.md @@ -11,10 +11,11 @@ search是默认模式,通常不需要特意设置,search模式下子应用 ![alt](https://img12.360buyimg.com/imagetools/jfs/t1/204018/30/36539/9736/6523add2F41753832/31f5ad7e48ea6570.png ':size=700') -**使用方式:** +**切换方式:** 设置单个子应用: ```html + ``` 全局设置: @@ -22,7 +23,7 @@ search是默认模式,通常不需要特意设置,search模式下子应用 import microApp from '@micro-zoe/micro-app' microApp.start({ - 'router-mode': 'search', + 'router-mode': 'search', // 所有子应用都设置为search模式 }) ``` @@ -57,12 +58,13 @@ microApp.start({ ``` #### ** native模式 ** -native模式下子应用完全基于浏览器路由系统进行渲染,比search模式拥有更加简洁优雅的的浏览器地址,但相应的需要更加复杂的路由配置,详情参考[native-mode](/zh-cn/native-mode) +native模式是指放开路由隔离,子应用和主应用共同基于浏览器路由进行渲染,它拥有更加直观和友好的路由体验,但更容易导致主应用和子应用的路由冲突,且需要更加复杂的路由配置,详情参考[native-mode](/zh-cn/native-mode) -**使用方式:** +**切换方式:** 设置单个子应用: ```html + ``` 全局设置: @@ -70,17 +72,18 @@ native模式下子应用完全基于浏览器路由系统进行渲染,比searc import microApp from '@micro-zoe/micro-app' microApp.start({ - 'router-mode': 'native', + 'router-mode': 'native', // 所有子应用都设置为native模式 }) ``` #### ** native-scope模式 ** native-scope模式的功能和用法和native模式一样,唯一不同点在于native-scope模式下子应用的域名指向自身而非主应用。 -**使用方式:** +**切换方式:** 设置单个子应用: ```html + ``` 全局设置: @@ -88,17 +91,18 @@ native-scope模式的功能和用法和native模式一样,唯一不同点在 import microApp from '@micro-zoe/micro-app' microApp.start({ - 'router-mode': 'native-scope', + 'router-mode': 'native-scope', // 所有子应用都设置为native-scope模式 }) ``` #### ** pure模式 ** -pure模式下子应用独立于浏览器进行渲染,即不修改浏览器地址,也不增加路由堆栈,更像是一个组件。 +pure模式是指子应用独立于浏览器进行渲染,即不修改浏览器地址,也不增加路由堆栈,pure模式下的子应用更像是一个组件。 -**使用方式:** +**切换方式:** 设置单个子应用: ```html + ``` 全局设置: @@ -106,9 +110,31 @@ pure模式下子应用独立于浏览器进行渲染,即不修改浏览器地 import microApp from '@micro-zoe/micro-app' microApp.start({ - 'router-mode': 'pure', + 'router-mode': 'pure', // 所有子应用都设置为pure模式 }) ``` + +#### ** state模式 ** +state模式是指基于浏览器history.state进行渲染的路由模式,在不修改浏览器地址的情况下模拟各种路由行为,相比其它路由模式更加简洁优雅。 + +state模式的表现和iframe类似,但却没有iframe存在的问题。 + +**切换方式:** + +设置单个子应用: +```html + + +``` +全局设置: +```js +import microApp from '@micro-zoe/micro-app' + +microApp.start({ + 'router-mode': 'state', // 所有子应用都设置为state模式 +}) +``` + diff --git a/package.json b/package.json index e2da3b766..75b353d8f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@micro-zoe/micro-app", - "version": "1.0.0-rc.4", + "version": "1.0.0-rc.5", "description": "A lightweight, efficient and powerful micro front-end framework", "private": false, "main": "lib/index.min.js", diff --git a/src/interact/lifecycles_event.ts b/src/interact/lifecycles_event.ts index 0c3fcd0cf..53451488d 100644 --- a/src/interact/lifecycles_event.ts +++ b/src/interact/lifecycles_event.ts @@ -63,7 +63,7 @@ export default function dispatchLifecyclesEvent ( formatEventInfo(event, element) // global hooks if (isFunction(microApp.options.lifeCycles?.[lifecycleName])) { - microApp.options.lifeCycles![lifecycleName]!(event) + microApp.options.lifeCycles![lifecycleName]!(event, appName) } element.dispatchEvent(event) diff --git a/typings/global.d.ts b/typings/global.d.ts index 7ee074346..b28b71a1c 100644 --- a/typings/global.d.ts +++ b/typings/global.d.ts @@ -264,14 +264,14 @@ declare module '@micro-app/types' { // lifeCycles interface lifeCyclesType { - created?(e: CustomEvent): void - beforemount?(e: CustomEvent): void - mounted?(e: CustomEvent): void - unmount?(e: CustomEvent): void - error?(e: CustomEvent): void - beforeshow?(e: CustomEvent): void - aftershow?(e: CustomEvent): void - afterhidden?(e: CustomEvent): void + created?(e: CustomEvent, appName: string): void + beforemount?(e: CustomEvent, appName: string): void + mounted?(e: CustomEvent, appName: string): void + unmount?(e: CustomEvent, appName: string): void + error?(e: CustomEvent, appName: string): void + beforeshow?(e: CustomEvent, appName: string): void + aftershow?(e: CustomEvent, appName: string): void + afterhidden?(e: CustomEvent, appName: string): void } type AssetsChecker = (url: string) => boolean;