From f7612a50ceeefb3d70ca68c40ddabd4f570ba07d Mon Sep 17 00:00:00 2001
From: bailicangdu <1264889788@qq.com>
Date: Fri, 17 Mar 2023 20:41:36 +0800
Subject: [PATCH] docs(1.0.0-beta.0): update docs
---
dev/main-react16/src/pages/vite2/vite2.js | 2 +-
docs/1.x/zh-cn/changelog.md | 16 +-
docs/1.x/zh-cn/configure.md | 12 ++
docs/1.x/zh-cn/framework/angular.md | 7 +-
docs/1.x/zh-cn/framework/introduce.md | 12 +-
docs/1.x/zh-cn/framework/nextjs.md | 8 +-
docs/1.x/zh-cn/framework/nuxtjs.md | 8 +-
docs/1.x/zh-cn/framework/react.md | 7 +-
docs/1.x/zh-cn/framework/vite.md | 181 ++--------------------
docs/1.x/zh-cn/framework/vue.md | 25 ++-
docs/1.x/zh-cn/start.md | 2 +-
docs/1.x/zh-cn/transfer.md | 2 +-
package.json | 2 +-
13 files changed, 93 insertions(+), 191 deletions(-)
diff --git a/dev/main-react16/src/pages/vite2/vite2.js b/dev/main-react16/src/pages/vite2/vite2.js
index c51d4ab1a..a7e984790 100644
--- a/dev/main-react16/src/pages/vite2/vite2.js
+++ b/dev/main-react16/src/pages/vite2/vite2.js
@@ -105,7 +105,7 @@ function vite2 (props) {
iframe
keep-router-state
// disable-patch-request
- keep-alive
+ // keep-alive
// default-page='/micro-app/vite2/page2'
>
diff --git a/docs/1.x/zh-cn/changelog.md b/docs/1.x/zh-cn/changelog.md
index 211edca54..0a1a06c29 100644
--- a/docs/1.x/zh-cn/changelog.md
+++ b/docs/1.x/zh-cn/changelog.md
@@ -12,18 +12,26 @@
- **New**
- - 🆕 新增了iframe沙箱功能，更好的兼容vite等开发工具。
+ - 🆕 新增了iframe沙箱功能，兼容vite等开发环境。
+ - 🆕 新增了虚拟路由系统的iframe沙箱模式。
+ - 🆕 新增了`video`、`audio`、`source`、`embed`等资源标签的自动补全功能。
- **Bug Fix**
- - 🐞 修复了`unmountApp`无法卸载预渲染应用的问题。
+ - 🐞 修复了通过`unmountApp`方法卸载预渲染应用报错的问题。
- 🐞 修复了主动卸载keep-alive、预渲染应用时全局事件缓存错误的问题。
+ - 🐞 修复了html静态元素无法标记和处理的问题。
+ - 🐞 修复了根元素下`parentNode`表现异常的问题。
+ - 🐞 修复了低版本浏览器不支持`String.prototype.replaceAll`的问题。
+ - 🐞 修复了忽略的脚本内获取 currentScript 出错的问题。
+ - 🐞 修复了数据通信在部分场景下快照备份数据监听函数报错的问题。
- **Update**
- - 🚀 优化了虚拟路由，增加对iframe沙箱的支持。
- - 🚀 优化了资源管理系统，提升资源复用效率。
+ - 🚀 优化了资源管理系统，支持多种沙箱之间动态切换，提升资源复用效率。
- 🚀 移除了`esmodule`配置，iframe沙箱环境下默认开启。
+ - 🚀 优化了预加载、预渲染相关功能，增加用户体验。
+ - 🚀 优化了umd模式下对子应用定时器的处理逻辑。
### 1.0.0-alpha.10
diff --git a/docs/1.x/zh-cn/configure.md b/docs/1.x/zh-cn/configure.md
index ecdb02a1b..a06b51523 100644
--- a/docs/1.x/zh-cn/configure.md
+++ b/docs/1.x/zh-cn/configure.md
@@ -23,6 +23,16 @@ MicroApp会根据url地址自动补全子应用的静态资源，如js、css、
当`url`的值发生变化时，会卸载当前应用并根据新的`url`值重新渲染。
+## iframe
+- Desc: `开启iframe沙箱`
+- Default: `false`
+- 使用方式: ``
+
+MicroApp有两种沙箱方案：`with沙箱`和`iframe沙箱`。
+
+默认开启with沙箱，如果with沙箱无法正常运行，可以尝试切换到iframe沙箱，比如vite。
+
+
## inline
- Desc: `使用内联script`
- Default: `false`
@@ -207,6 +217,7 @@ shadowDOM具有更强的样式隔离能力，开启后，``标签会
import microApp from '@micro-zoe/micro-app'
microApp.start({
+ iframe: true, // 默认值false
inline: true, // 默认值false
destroy: true, // 默认值false
shadowDOM: true, // 默认值false
@@ -225,6 +236,7 @@ microApp.start({
[!TIP]
> 以上框架可以任意组合，换句话说任何一个框架都可以作为主应用嵌入其它类型的子应用，任何一个框架也可以作为子应用被其它框架嵌入，包括上面没有列举出的其它库，如 svelte、umi ...
diff --git a/docs/1.x/zh-cn/framework/nextjs.md b/docs/1.x/zh-cn/framework/nextjs.md
index ff0e4083d..aca0c4fe0 100644
--- a/docs/1.x/zh-cn/framework/nextjs.md
+++ b/docs/1.x/zh-cn/framework/nextjs.md
@@ -4,7 +4,7 @@
#### 1、安装依赖
```bash
-npm i @micro-zoe/micro-app@alpha --save
+npm i @micro-zoe/micro-app@beta --save
```
#### 2、初始化micro-app
@@ -167,6 +167,12 @@ window.addEventListener('unmount', function () {
> [!NOTE]
> nextjs默认支持css module功能，如果你使用了此功能，建议关闭样式隔离以提升性能：``
+#### 5、切换到iframe沙箱
+MicroApp有两种沙箱方案：`with沙箱`和`iframe沙箱`。
+
+默认开启with沙箱，如果with沙箱无法正常运行，可以尝试切换到iframe沙箱。
+
+
## 常见问题
#### 1、使用`next/image`组件加载图片失败
diff --git a/docs/1.x/zh-cn/framework/nuxtjs.md b/docs/1.x/zh-cn/framework/nuxtjs.md
index 825bcf014..d3d94a7bc 100644
--- a/docs/1.x/zh-cn/framework/nuxtjs.md
+++ b/docs/1.x/zh-cn/framework/nuxtjs.md
@@ -4,7 +4,7 @@
#### 1、安装依赖
```bash
-npm i @micro-zoe/micro-app@alpha --save
+npm i @micro-zoe/micro-app@beta --save
```
#### 2、初始化micro-app
@@ -175,6 +175,12 @@ window.addEventListener('unmount', function () {
})
```
+#### 5、切换到iframe沙箱
+MicroApp有两种沙箱方案：`with沙箱`和`iframe沙箱`。
+
+默认开启with沙箱，如果with沙箱无法正常运行，可以尝试切换到iframe沙箱。
+
+
## 常见问题
#### 1、控制台抛出警告`[Vue warn]: Unknown custom element: `
diff --git a/docs/1.x/zh-cn/framework/react.md b/docs/1.x/zh-cn/framework/react.md
index 264053e84..c91e0fac9 100644
--- a/docs/1.x/zh-cn/framework/react.md
+++ b/docs/1.x/zh-cn/framework/react.md
@@ -4,7 +4,7 @@
#### 1、安装依赖
```bash
-npm i @micro-zoe/micro-app@alpha --save
+npm i @micro-zoe/micro-app@beta --save
```
#### 2、初始化micro-app
@@ -149,6 +149,11 @@ if (window.__MICRO_APP_ENVIRONMENT__) {
import './public-path'
```
+#### 4、切换到iframe沙箱
+MicroApp有两种沙箱方案：`with沙箱`和`iframe沙箱`。
+
+默认开启with沙箱，如果with沙箱无法正常运行，可以尝试切换到iframe沙箱。
+
## 常见问题
无
diff --git a/docs/1.x/zh-cn/framework/vite.md b/docs/1.x/zh-cn/framework/vite.md
index c71ae3d34..5d4447c37 100644
--- a/docs/1.x/zh-cn/framework/vite.md
+++ b/docs/1.x/zh-cn/framework/vite.md
@@ -1,185 +1,30 @@
-> [!ATTENTION]
-> vite作为子应用时需要关闭沙箱，这会导致很多问题，暂时不建议接入。
->
-> 我们正在规划为vite打造一套独立的沙箱方案，敬请期待。
-
-本篇介绍了`vite 2`的接入方式，vite1暂不支持。
+本篇介绍了`vite`的接入方式，如果在使用时出现问题，请在github上联系我们。
## 作为主应用
vite作为主应用时没有特殊之处，具体方式参考各框架接入文档。
## 作为子应用
+vite作为子应用只需`切换到iframe沙箱`，其它操作参考各框架接入文档。
-当子应用是vite应用时需要做特别的适配，适配vite的代价是巨大的，我们必须关闭沙箱功能，因为沙箱在`module script`下不支持，这导致大部分功能失效，包括：环境变量、样式隔离、元素隔离、资源路径补全、baseroute 等。
-
-在嵌入vite子应用时，`micro-app`的功能只负责渲染，其它的行为由应用自行决定，这包括如何防止样式、JS变量、元素的冲突。
-
-在module模式下，引入的资源大多为相对地址，兼容主要做的事情就是将地址补全。
-
-### 👇 子应用的修改
-
-**1、修改vite.config.js**
-```js
-import { join } from 'path'
-import { writeFileSync } from 'fs'
-
-// vite.config.js
-export default defineConfig({
- base: `${process.env.NODE_ENV === 'production' ? 'http://my-site.com' : ''}/basename/`,
- plugins: [
- // 自定义插件
- (function () {
- let basePath = ''
- return {
- name: "vite:micro-app",
- apply: 'build',
- configResolved(config) {
- basePath = `${config.base}${config.build.assetsDir}/`
- },
- writeBundle (options, bundle) {
- for (const chunkName in bundle) {
- if (Object.prototype.hasOwnProperty.call(bundle, chunkName)) {
- const chunk = bundle[chunkName]
- if (chunk.fileName && chunk.fileName.endsWith('.js')) {
- chunk.code = chunk.code.replace(/(from|import\()(\s*['"])(\.\.?\/)/g, (all, $1, $2, $3) => {
- return all.replace($3, new URL($3, basePath))
- })
- const fullPath = join(options.dir, chunk.fileName)
- writeFileSync(fullPath, chunk.code)
- }
- }
- }
- },
- }
- })(),
- ],
-})
-```
-
-**2、修改容器元素id**
-
-因为vite子应用没有元素隔离的保护，建议修改容器元素的id值，以确保与其它元素不冲突。
-
-*1、修改index.html中容器元素的id值*
+##### 切换到iframe沙箱
```html
-
-
-
-
+
```
-*2、使用新的id渲染*
-```js
-// main.js
-createApp(App).mount('#my-vite-app')
-```
-
-当多个vite子应用同时渲染时，必须修改容器元素的id值，确保每个子应用容器元素id的唯一性，否则无法正常渲染。
+## 常见问题
-**3、路由**
+#### 1、子应用中操作location异常
-推荐主应用使用history路由，vite子应用使用hash路由，避免一些可能出现的问题。
+**原因：**vite构建script的type为module，导致无法拦截location操作。
-子应用如果是vue3，在初始化时路由时，createWebHashHistory不要传入参数，如下：
+**解决方式：** 使用MicroApp提供的location进行操作
+如：
```js
-import { createRouter, createWebHashHistory } from 'vue-router'
-
-const router = createRouter({
- history: createWebHashHistory(),
- routes,
-})
+window.microApp.location.host
+window.microApp.location.origin
+window.microApp.location.href = 'xxx'
+window.microApp.location.pathname = 'xxx'
```
-**4、静态资源**
-
-图片等静态资源需要使用绝对地址，可以使用 `new URL('../assets/logo.png', import.meta.url).href` 等方式获取资源的全链接地址。
-
-### 👇 主应用的修改
-注意这里的主应用是指嵌入了vite子应用的主应用，它可以是任何框架，和上面`作为主应用`一节无关。
-
-**1、关闭沙箱并使用内联script模式**
-```js
-
-```
-
-**2、处理子应用静态资源**
-
-写一个简易的插件，对开发环境的子应用进行处理，补全静态资源路径。
-
-```js
-import microApp from '@micro-zoe/micro-app'
-
-microApp.start({
- plugins: {
- modules: {
- // appName即应用的name值
- appName: [{
- loader(code) {
- if (process.env.NODE_ENV === 'development') {
- // 这里 basename 需要和子应用vite.config.js中base的配置保持一致
- code = code.replace(/(from|import)(\s*['"])(\/basename\/)/g, all => {
- return all.replace('/basename/', '子应用域名/basename/')
- })
- }
-
- return code
- }
- }]
- }
- }
-})
-```
-
-### 👇 数据通信
-沙箱关闭后，子应用默认的通信功能失效，此时可以通过手动注册通信对象实现一致的功能。
-
-**注册方式：在主应用中为子应用初始化通信对象**
-
-```js
-import { EventCenterForMicroApp } from '@micro-zoe/micro-app'
-
-// 注意：每个vite子应用根据appName单独分配一个通信对象
-window.eventCenterForViteApp1 = new EventCenterForMicroApp(appName)
-```
-
-vite子应用就可以通过注册的`eventCenterForViteApp1`对象进行通信，其api和`window.microApp`一致，*主应用通信方式没有任何变化。*
-
-**子应用通信方式：**
-```js
-/**
- * 绑定监听函数
- * dataListener: 绑定函数
- * autoTrigger: 在初次绑定监听函数时有缓存数据，是否需要主动触发一次，默认为false
- */
-window.eventCenterForViteApp1.addDataListener(dataListener: (data: Object) => void, autoTrigger?: boolean)
-
-// 解绑指定函数
-window.eventCenterForViteApp1.removeDataListener(dataListener)
-
-// 清空当前子应用的所有绑定函数(全局数据函数除外)
-window.eventCenterForViteApp1.clearDataListener()
-
-// 主动获取数据
-window.eventCenterForViteApp1.getData()
-
-// 子应用向主应用发送数据
-window.eventCenterForViteApp1.dispatch({type: '子应用发送的数据'})
-```
-
-> [!WARNING]
-> 1、请确保vite版本>=2.5.0
->
-> 2、适配vite本质上是适配module脚本，其它非vite构建的module脚本也可以采用相同的思路处理。
-
-
-## 实战案例
-以上介绍了vite如何接入微前端，但在实际使用中会涉及更多功能，如数据通信、路由跳转、打包部署，为此我们提供了一套案例，用于展示vite作为主应用嵌入(或作为子应用被嵌入) react、vue、angular、vite、nextjs、nuxtjs等框架，在案例中我们使用尽可能少的代码实现尽可能多的功能。
-
-案例地址：https://github.com/micro-zoe/micro-app-demo
diff --git a/docs/1.x/zh-cn/framework/vue.md b/docs/1.x/zh-cn/framework/vue.md
index 06ff3fc26..8b34b252e 100644
--- a/docs/1.x/zh-cn/framework/vue.md
+++ b/docs/1.x/zh-cn/framework/vue.md
@@ -4,7 +4,7 @@
#### 1、安装依赖
```bash
-npm i @micro-zoe/micro-app@alpha --save
+npm i @micro-zoe/micro-app@beta --save
```
#### 2、初始化micro-app
@@ -36,16 +36,25 @@ microApp.start()
#### 1、设置跨域支持
-在`vue.config.js`中添加配置
+
+
+#### ** vue.config.js **
```js
-devServer: {
- headers: {
- 'Access-Control-Allow-Origin': '*',
+module.exports = {
+ devServer: {
+ headers: {
+ 'Access-Control-Allow-Origin': '*',
+ }
}
}
```
+#### ** vite.config.js **
+vite默认开启跨域支持，不需要额外配置。
+
+
+
#### 2、注册卸载函数
子应用卸载时会自动执行`window.unmount`，在此可以进行卸载相关操作。
@@ -232,6 +241,12 @@ if (window.__MICRO_APP_ENVIRONMENT__) {
import './public-path'
```
+#### 4、切换到iframe沙箱
+MicroApp有两种沙箱方案：`with沙箱`和`iframe沙箱`。
+
+默认开启with沙箱，如果with沙箱无法正常运行，可以尝试切换到iframe沙箱。
+
+
## 常见问题
#### 1、主应用中抛出警告，micro-app未定义
diff --git a/docs/1.x/zh-cn/start.md b/docs/1.x/zh-cn/start.md
index a8b1002e0..6884afe8c 100755
--- a/docs/1.x/zh-cn/start.md
+++ b/docs/1.x/zh-cn/start.md
@@ -4,7 +4,7 @@
1、安装依赖
```bash
-npm i @micro-zoe/micro-app@alpha --save
+npm i @micro-zoe/micro-app@beta --save
```
2、初始化`micro-app`
diff --git a/docs/1.x/zh-cn/transfer.md b/docs/1.x/zh-cn/transfer.md
index fdfe68910..729a25d3b 100644
--- a/docs/1.x/zh-cn/transfer.md
+++ b/docs/1.x/zh-cn/transfer.md
@@ -3,7 +3,7 @@
### 迁移步骤
**1、安装最新版本**
```bash
-npm i @micro-zoe/micro-app@alpha --save
+npm i @micro-zoe/micro-app@beta --save
```
**2、在start中增加配置**
diff --git a/package.json b/package.json
index 327528c7a..67b2ea25d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@micro-zoe/micro-app",
- "version": "1.0.0-alpha.10",
+ "version": "1.0.0-beta.0",
"description": "A lightweight, efficient and powerful micro front-end framework",
"private": false,
"main": "lib/index.min.js",