feat(1.0.0-rc.5): update to 1.0.0-rc.5

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: {

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,15 +440,15 @@ 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
                   // disable-patch-request
                   // fiber
                   // ssr
                   // clear-data
-                  // iframe
+                  iframe
                 >
                 </micro-app>
               )

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'
       >
       </micro-app>

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

@@ -91,7 +91,7 @@ function Vue2 () {
         // disableSandbox
         // clear-data
         // iframe
-        router-mode='pure'
+        router-mode='native'
       >
       </micro-app>
     </div>

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**
 
+  - 🚀 优化了生命周期全局监听函数的传递参数。
   - 🚀 更新了路由相关文档。
 
 

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}加载出错`)
     }
   }
 })

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配置如下：
 <micro-app url='http://子应用域名/index.html' baseroute='/my-page'></micro-app>
 ```
 
-##### 栗子4 🌰 :
+##### 例4:
 
 场景：主应用是history路由，子应用是hash路由，我们要跳转主应用的`my-app`页面，页面中嵌入子应用，我们要展现子应用的`page1`页面。
 

docs/zh-cn/router.md

@@ -11,18 +11,19 @@ search是默认模式，通常不需要特意设置，search模式下子应用
 
 ![alt](https://img12.360buyimg.com/imagetools/jfs/t1/204018/30/36539/9736/6523add2F41753832/31f5ad7e48ea6570.png ':size=700')
 
-**使用方式：**
+**切换方式：**
 
 设置单个子应用：
 ```html
+<!-- 单个子应用设置为search模式 -->
 <micro-app name='xx' url='xx' router-mode='search'></micro-app>
 ```
 全局设置：
 ```js
 import microApp from '@micro-zoe/micro-app'
 
 microApp.start({
-  'router-mode': 'search',
+  'router-mode': 'search', // 所有子应用都设置为search模式
 })
 ```
 
@@ -57,58 +58,83 @@ microApp.start({
 ```
 
 #### ** native模式 **
-native模式下子应用完全基于浏览器路由系统进行渲染，比search模式拥有更加简洁优雅的的浏览器地址，但相应的需要更加复杂的路由配置，详情参考[native-mode](/zh-cn/native-mode)
+native模式是指放开路由隔离，子应用和主应用共同基于浏览器路由进行渲染，它拥有更加直观和友好的路由体验，但更容易导致主应用和子应用的路由冲突，且需要更加复杂的路由配置，详情参考[native-mode](/zh-cn/native-mode)
 
-**使用方式：**
+**切换方式：**
 
 设置单个子应用：
 ```html
+<!-- 单个子应用设置为native模式 -->
 <micro-app name='xx' url='xx' router-mode='native'></micro-app>
 ```
 全局设置：
 ```js
 import microApp from '@micro-zoe/micro-app'
 
 microApp.start({
-  'router-mode': 'native',
+  'router-mode': 'native', // 所有子应用都设置为native模式
 })
 ```
 
 #### ** native-scope模式 **
 native-scope模式的功能和用法和native模式一样，唯一不同点在于native-scope模式下子应用的域名指向自身而非主应用。
 
-**使用方式：**
+**切换方式：**
 
 设置单个子应用：
 ```html
+<!-- 单个子应用设置为native-scope模式 -->
 <micro-app name='xx' url='xx' router-mode='native-scope'></micro-app>
 ```
 全局设置：
 ```js
 import microApp from '@micro-zoe/micro-app'
 
 microApp.start({
-  'router-mode': 'native-scope',
+  'router-mode': 'native-scope', // 所有子应用都设置为native-scope模式
 })
 ```
 
 #### ** pure模式 **
-pure模式下子应用独立于浏览器进行渲染，即不修改浏览器地址，也不增加路由堆栈，更像是一个组件。
+pure模式是指子应用独立于浏览器进行渲染，即不修改浏览器地址，也不增加路由堆栈，pure模式下的子应用更像是一个组件。
 
-**使用方式：**
+**切换方式：**
 
 设置单个子应用：
 ```html
+<!-- 单个子应用设置为pure模式 -->
 <micro-app name='xx' url='xx' router-mode='pure'></micro-app>
 ```
 全局设置：
 ```js
 import microApp from '@micro-zoe/micro-app'
 
 microApp.start({
-  'router-mode': 'pure',
+  'router-mode': 'pure', // 所有子应用都设置为pure模式
 })
 ```
+
+#### ** state模式 **
+state模式是指基于浏览器history.state进行渲染的路由模式，在不修改浏览器地址的情况下模拟各种路由行为，相比其它路由模式更加简洁优雅。
+
+state模式的表现和iframe类似，但却没有iframe存在的问题。
+
+**切换方式：**
+
+设置单个子应用：
+```html
+<!-- 单个子应用设置为state模式 -->
+<micro-app name='xx' url='xx' router-mode='state'></micro-app>
+```
+全局设置：
+```js
+import microApp from '@micro-zoe/micro-app'
+
+microApp.start({
+  'router-mode': 'state', // 所有子应用都设置为state模式
+})
+```
+
 <!-- tabs:end -->
 
 

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",

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)

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;