Merge pull request #1 from micro-zoe/dev

async rc.4 docs

.prettierignore

@@ -0,0 +1 @@
+**/*.md

docs/.vuepress/styles/index.scss

@@ -16,6 +16,7 @@
 }
 
 .page .theme-default-content,
-.page-meta {
+.page-meta,
+.page-nav {
   margin-left: 10%;
 }

docs/v0/zh/api.md

@@ -217,7 +217,7 @@ import { EventCenterForMicroApp } from '@micro-zoe/micro-app'
 window.eventCenterForAppName = new EventCenterForMicroApp(appName)
 ```
 
-详情查看：[关闭沙箱后的通信方式](/v0/zh/data#关闭沙箱后的通信方式)
+详情查看：[关闭沙箱后的通信方式](./data.md#关闭沙箱后的通信方式)
 
 
 ## unmountApp

docs/v0/zh/configure.md

@@ -96,7 +96,7 @@
 
 开启keep-alive后，应用卸载时会进入缓存，而不是销毁它们，以便保留应用的状态和提升重复渲染的性能。
 
-keep-alive的优先级小于[destroy](/v0/zh/configure#destroy)，当两者同时存在时，keep-alive将失效。
+keep-alive的优先级小于[destroy](./configure.md#destroy)，当两者同时存在时，keep-alive将失效。
 
 ## shadowDOM
 - Desc: `是否开启shadowDOM`

docs/v0/zh/env.md

@@ -40,7 +40,7 @@ import './public-path'
 
 **描述：子应用的基础路由**
 
-详情见[路由-基础路由](/v0/zh/route#基础路由)一章。
+详情见[路由-基础路由](./route.md#基础路由)一章。
 
 ### `__MICRO_APP_BASE_APPLICATION__`
 

docs/v0/zh/framework/vue.md

@@ -279,7 +279,7 @@ export default defineConfig({
 
 **解决方式：** 
 
-  1、关闭样式隔离[disablescopecss](/v0/zh/configure#disablescopecss)
+  1、关闭样式隔离[disablescopecss](./configure.md#disablescopecss)
 
   2、部分组件，如`Select`提供了`popper-append-to-body`配置，用于设置弹框不插入body，可以避免这个问题。如果组件没有提供类似的功能，则暂且只能通过关闭样式隔离解决。 -->
 

docs/v0/zh/plugins.md

@@ -106,32 +106,63 @@ microApp.start({
 ```
 
 ## 插件列表
-#### 1、子午线埋点插件
-子午线埋点文件中使用function定义将函数泄漏为全局变量，这在沙箱中是不允许的，所以我们需要将其修改为
-`window.xx = funnction xx` 的形式进行适配。
+## 1、地图插件
+微前端 Micro-app 地图插件，适配高德、百度、腾讯地图 🎉🎉🎉
+
+### 使用
+
+Installation安装地图插件
 
 ```bash
-# 安装子午线埋点插件
-npm i @micro-zoe/plugin-painful-joya -S
+  # with npm
+  npm install @micro-zoe/micro-plugin-map --save-dev
+  # with yarn
+  yarn add @micro-zoe/micro-plugin-map --dev
 ```
 
+Usage
+we use the package like this step:
+
+1、主用，在入口处安装对应地图的sdk
+
+- 高德sdk `https://webapi.amap.com/maps?v=2.0&key=xxxxxx`
+- 腾讯sdk `https://map.qq.com/api/gljs?v=1.exp&key=xxxxxx`
+- 百度sdk `https://api.map.baidu.com/api?type=webgl&v=1.0&ak=xxxxxx`
+
+2、在主应用中，使用该包
+
 ```js
-import microApp from '@micro-zoe/micro-app'
-import painfulJoya from '@micro-zoe/plugin-painful-joya'
+  import microApp from '@micro-zoe/micro-app'
+  import microPluginMap from '@micro-zoe/micro-plugin-map'
 
-// 设置为全局插件，作用于所有子应用
-microApp.start({
-  plugins: {
-    global: [painfulJoya],
-  }
-})
+  // 设置为全局插件，作用于所有子应用
+  microApp.start({
+    plugins: {
+      global: [microPluginMap],
+    }
+  })
 
-// 或者设置为某个子应用的插件，只作用于当前子应用
-microApp.start({
-  plugins: {
-    modules: {
-      'appName': [painfulJoya],
+  // 或者设置为某个子应用的插件，只作用于当前子应用
+  microApp.start({
+    plugins: {
+      modules: {
+        'appName': [microPluginMap],
+      }
     }
-  }
-})
+  })
 ```
+
+### 注意
+
+- 目前插件目前仅在with沙箱下适用
+
+- 插件以umd同步的方式引入sdk，异步加载的方式暂不支持
+
+- 高德地图的不存在跨域问题，可以不用进行任何操作，高德地图若设置了使用白名单，需将白名单范围囊括主应用域名
+
+- 腾讯地图，使用时候只是常规的跨越，用此插件进行常规使用即可，腾讯地图若设置了使用白名单，需将白名单范围囊括主应用域名
+
+- 百度地图，使用时有跨域问题，可用此插件进行处理，百度地图若设置了使用白名单，需将白名单范围囊括主应用域名
+
+### 源码
+micro-plugin-map 源码地址：[https://github.com/micro-zoe/micro-plugin-map](https://github.com/micro-zoe/micro-plugin-map)

docs/v0/zh/prefetch.md

@@ -43,6 +43,6 @@ microApp.start({
 ```
 
 ::: note
-1. 预加载入参：`disableScopecss`、`disableSandbox` 必须和 `<micro-app>`[配置项](/v0/zh/configure)保持一致。如果产生冲突，以先执行的一方为准。
+1. 预加载入参：`disableScopecss`、`disableSandbox` 必须和 `<micro-app>`[配置项](./configure.md)保持一致。如果产生冲突，以先执行的一方为准。
 2. 如果子应用开启了shadowDOM，则预加载中的`disableScopecss`需要设置为true
 :::

docs/v0/zh/questions.md

@@ -39,7 +39,7 @@ micro-app依赖于CustomElements和Proxy两个较新的API。
 - 移动端：ios10+、android5+
 
 ## 4、微应用无法渲染但没有报错
-请检查路由配置是否正确，详情查看[路由](/v0/zh/route)一章，或者[下面第5条：jsonpFunction是否冲突](/v0/zh/questions#_5、webpack-jsonpfunction-冲突导致渲染失败)
+请检查路由配置是否正确，详情查看[路由](./route.md)一章，或者[下面第5条：jsonpFunction是否冲突](./questions.md#_5、webpack-jsonpfunction-冲突导致渲染失败)
 
 ## 5、webpack-jsonpfunction-冲突导致渲染失败
 这种情况常见于多个应用都是通过create-react-app等类似脚手架创建的项目，或一个应用多次重复渲染。
@@ -85,11 +85,11 @@ module.exports = {
 ## 7、vue3的问题
 **1、样式失效**
 
-通过[禁用样式隔离](/v0/zh/configure#disablescopecss)解决。
+通过[禁用样式隔离](./configure.md#disablescopecss)解决。
 
 **2、图片等静态资源无法正常加载**
 
-vue3中需要配置publicPath补全资源路径，详情请查看[publicPath](/v0/zh/static-source#publicpath)
+vue3中需要配置publicPath补全资源路径，详情请查看[publicPath](./static-source.md#publicpath)
 
 
 ## 8、开发环境中渲染angular子应用报错
@@ -193,13 +193,13 @@ microApp.start({
   如果还是报跨域问题，则是服务端做了限制，此时需要撤除上述操作，并将子应用的代理放到基座应用中。
 
 ## 16、子应用多次渲染后内存越来越大
-  参考[内存优化](/v0/zh/advanced#_3、内存优化)一章
+  参考[内存优化](./advanced.md#_3、内存优化)一章
 
 ## 17、子应用之间如何跳转
-  参考[应用之间如何跳转](/v0/zh/route#应用之间如何跳转)一章
+  参考[应用之间如何跳转](./route.md#应用之间如何跳转)一章
 
 ## 18、jsonp请求如何处理？
-  参考[ignore](/v0/zh/configure#ignore忽略元素)
+  参考[ignore](./configure.md#ignore忽略元素)
 
 
 ## 19、子应用通过a标签下载文件失败

docs/v0/zh/route.md

@@ -221,7 +221,7 @@ micro-app配置如下：
 
 micro-app配置如下：
 
-这就是在[快速开始](/v0/zh/start)一章中提到的案例。
+这就是在[快速开始](./start.md)一章中提到的案例。
 ```html
 <!-- 子应用通过baseroute设置基础路由，路由 /page1 变为 /my-page/page1 -->
 <micro-app url='http://www.xxx.com/index.html' baseroute='/my-page'></micro-app>

docs/v0/zh/sandbox.md

@@ -5,7 +5,7 @@
 
 沙箱是默认开启的，正常情况下不建议关闭，以避免出现不可预知的问题。
 
-如何关闭沙箱请查看：[disableSandbox](/v0/zh/configure#disablesandbox)
+如何关闭沙箱请查看：[disableSandbox](./configure.md#disablesandbox)
 
 ### 注意事项
 

docs/v0/zh/scopecss.md

@@ -99,4 +99,4 @@ shadowDOM具有更好的隔离性，但一些框架(如React)对shadowDOM的兼
 
 开启shadowDOM后，默认的样式隔离将失效。
 
-开启方式：[shadowDOM](/v0/zh/configure#shadowdom)
+开启方式：[shadowDOM](./configure.md#shadowdom)

docs/v0/zh/start.md

@@ -171,7 +171,7 @@ devServer: {
 
 ::: note
 1. name必须以字母开头，且不可以带有除中划线和下划线外的特殊符号
-2. url只是html地址，子应用的页面渲染还是基于浏览器地址的，关于这点请查看[路由一章](/v0/zh/route)
-3. baseroute的作用请查看[路由配置](/v0/zh/route#路由配置)
-4. 子应用必须支持跨域访问，跨域配置参考[这里](/v0/zh/questions#_2、子应用一定要支持跨域吗)
+2. url只是html地址，子应用的页面渲染还是基于浏览器地址的，关于这点请查看[路由一章](./route.md)
+3. baseroute的作用请查看[路由配置](./route.md#路由配置)
+4. 子应用必须支持跨域访问，跨域配置参考[这里](./questions.md#_2、子应用一定要支持跨域吗)
 :::

docs/zh/api.md

@@ -7,13 +7,20 @@
 **介绍：**
 ```js
 start (options?: {
-  tagName?: string, // 标签名称，默认为micro-app
-  shadowDOM?: boolean, // 是否开启shadowDOM，默认为false
-  destroy?: boolean, // 是否在子应用卸载时强制销毁所有缓存资源，默认为false
-  inline?: boolean, // 是否使用内联script方式执行js，默认为false
-  disableScopecss?: boolean, // 是否全局禁用样式隔离，默认为false
-  disableSandbox?: boolean, // 是否全局禁用沙箱，默认为false
-  ssr?: boolean, // 是否全局启用ssr模式，默认为false
+  tagName?: string, // 设置标签名称，默认为micro-app
+  iframe?: boolean, // 全局开启iframe沙箱，默认为false
+  inline?: boolean, // 全局开启内联script模式运行js，默认为false
+  destroy?: boolean, // 全局开启destroy模式，卸载时强制删除缓存资源，默认为false
+  // shadowDOM?: boolean, // 全局开启shadowDOM模式，默认为false
+  ssr?: boolean, // 全局开启ssr模式，默认为false
+  'disable-scopecss'?: boolean, // 全局禁用样式隔离，默认为false
+  'disable-sandbox'?: boolean, // 全局禁用沙箱，默认为false
+  'keep-alive'?: boolean, // 全局开启保活模式，默认为false
+  'disable-memory-router'?: boolean, // 全局关闭虚拟路由系统，默认值false
+  'keep-router-state'?: boolean, // 子应用在卸载时保留路由状态，默认值false
+  'disable-patch-request'?: boolean, // 关闭子应用请求的自动补全功能，默认值false
+  'router-mode'?: string, // 设置路由模式，共四种：search、native、native-scope、pure，默认为search
+  iframeSrc?: string, // 设置iframe沙箱中iframe的src地址，默认为子应用所在页面地址
   // 全局生命周期
   lifeCycles?: {
     created?(e?: CustomEvent): void
@@ -28,13 +35,13 @@ start (options?: {
     url: string,
     disableScopecss?: boolean,
     disableSandbox?: boolean,
-    shadowDOM?: boolean
+    // shadowDOM?: boolean
   }> | (() => Array<{
     name: string,
     url: string,
     disableScopecss?: boolean,
     disableSandbox?: boolean,
-    shadowDOM?: boolean
+    // shadowDOM?: boolean
   }>),
   // 插件系统，用于处理子应用的js文件
   plugins?: {
@@ -211,12 +218,23 @@ document.body.appendChild(pureDiv)
 ## removeDomScope
 **描述：** 解除元素绑定，通常用于受子应用元素绑定影响，导致主应用元素错误绑定到子应用的情况
 
+**介绍：**
+```js
+/**
+ * @param force 解除元素绑定，并且一定时间内(一个微任务Promise时间)阻止再次绑定。
+ */
+function removeDomScope(force?: boolean): void
+```
+
 **使用方式：**
 ```js
 import { removeDomScope } from '@micro-zoe/micro-app'
 
-// 重置作用域
+// 解除元素绑定
 removeDomScope()
+
+// 解除元素绑定，并且一定时间内阻止再次绑定
+removeDomScope(true)
 ```
 
 
@@ -364,7 +382,7 @@ interface RenderAppOptions {
   fiber?: boolean, // 开启fiber模式，可选
   baseroute?: string, // 设置子应用的基础路由，可选
   ssr?: boolean, // 开启ssr模式，可选
-  shadowDOM?: boolean, // 开启shadowDOM，可选
+  // shadowDOM?: boolean, // 开启shadowDOM，可选
   data?: Object, // 传递给子应用的数据，可选
   onDataChange?: Function, // 获取子应用发送数据的监听函数，可选
   // 注册子应用的生命周期
@@ -612,10 +630,21 @@ document.body.appendChild(pureDiv)
 
 **版本限制：** 0.8.2及以上版本
 
+**介绍：**
+```js
+/**
+ * @param force 解除元素绑定，并且一定时间内(一个微任务Promise时间)阻止再次绑定。
+ */
+function removeDomScope(force?: boolean): void
+```
+
 **使用方式：**
 ```js
-// 重置作用域
+// 解除元素绑定
 window.microApp.removeDomScope()
+
+// 解除元素绑定，并且一定时间内阻止再次绑定
+window.microApp.removeDomScope(true)
 ```
 
 ## rawWindow

docs/zh/browser-router.md

@@ -1,10 +1,11 @@
-关闭虚拟路由后，没有了路由隔离后的处理方式会复杂很多，子应用将基于浏览器地址进行渲染，此时需要设置子应用的基础路由。
+native模式下子应用完全基于浏览器路由系统进行渲染，此时需要更加复杂的路由配置，对主应用和子应用的路由都要进行一些改造。
 
-#### 路由类型约束
+### 路由类型约束
+native模式下主、子应用需要遵循以下约束：
 - 1、主应用是hash路由，子应用也必须是hash路由
 - 2、主应用是history路由，子应用可以是hash或history路由
 
-#### 基础路由
+### 基础路由
 **作用：**
 
 通常主应用和子应用各有一套路由系统，为了防止冲突，主应用需要分配一个路由给子应用，称之为基础路由，子应用可以在这个路由下渲染，但不能超出这个路由的范围，这就是基础路由的作用。
@@ -161,16 +162,8 @@ let app = new Vue({
 [email protected]设置base的方式请查看 https://next.router.vuejs.org/
 :::
 
-## 应用之间跳转 
-
-[应用之间跳转](/zh/jump)
-
-## url属性和子应用路由的关系
-答：没有关系！
-
-micro-app的url属性只是html的地址，它的作用就是加载html资源。
-
-#### 子应用不会根据micro-app的url属性渲染对应的页面，而是根据浏览器地址渲染对应的页面。
+### 关于native模式的原理解析
+**子应用不会根据micro-app的url属性渲染对应的页面，而是根据浏览器地址渲染对应的页面。**
 
 **举个栗子 🌰 :**
 
@@ -189,7 +182,10 @@ micro-app的url属性只是html的地址，它的作用就是加载html资源。
 
 **栗子2 🌰 :**
 
-子应用是hash路由，我们要渲染子应用的page1页面，那么在micro-app的url属性上设置hash值是无效的，`#/page1`应该添加到浏览器地址上。
+场景：子应用是hash路由，我们要渲染子应用的page1页面
+
+此时在micro-app的url属性上设置hash值是无效的，`#/page1`应该添加到浏览器地址上。
+
 ```html
 <!-- ❌ 这里的#/page1是无效的，应该添加到浏览器地址上 -->
 <micro-app url='http://www.xxx.com/#/page1'></micro-app>
@@ -200,7 +196,7 @@ micro-app的url属性只是html的地址，它的作用就是加载html资源。
 
 **栗子3 🌰 :**
 
-主应用是history路由，子应用是hash路由，我们要跳转主应用的`my-app`页面，页面中嵌入子应用，我们要展现子应用的`page1`页面。
+场景：主应用是history路由，子应用是hash路由，我们要跳转主应用的`my-app`页面，页面中嵌入子应用，我们要展现子应用的`page1`页面。
 
 那么浏览器地址应该为：`域名/my-page#/page1`，我们在主应用中跳转`my-app`页面的参数为：`router.push('/my-page#/page1')`
 
@@ -214,20 +210,18 @@ micro-app配置如下：
 
 **栗子4 🌰 :**
 
-主应用是history路由，子应用也是history路由，我们要跳转主应用的`my-app`页面，`my-app`页面中嵌入子应用，我们要展现子应用的`page1`页面。
+场景：主应用是history路由，子应用也是history路由，我们要跳转主应用的`my-app`页面，`my-app`页面中嵌入子应用，我们要展现子应用的`page1`页面。
 
 那么浏览器地址应该为：`域名/my-page/page1`，我们在主应用中跳转的参数为：`router.push('/my-page/page1')`
 
 此时流程为：主应用匹配到`/my-page`路径并渲染`my-app`页面，因为`my-app`页面中嵌入了子应用，此时子应用开始加载并渲染，子应用在渲染时会匹配到`/my-page/page1`并渲染`page1`页面。
 
 micro-app配置如下：
-
-这就是在[快速开始](/zh/start)一章中提到的案例。
 ```html
-<!-- 子应用通过baseroute设置基础路由，路由 /page1 变为 /my-page/page1 -->
+<!-- 子应用通过baseroute设置基础路由/my-page -->
 <micro-app url='http://www.xxx.com/index.html' baseroute='/my-page'></micro-app>
 ```
 
 :::tip
-如果你看到这里还是无法正确设置路由，那么将主应用设置为history路由，子应用设置为hash路由，可以一劳永逸解决所有问题，此时不需要设置baseroute，也不需要修改主应用和子应用的任何路由设置。
+如果你看到这里还是无法正确设置路由，不妨试试其它路由模式
 :::