fix(0.5.3): 修复了在不支持ESModule的项目中，引入polyfill/jsx-custom-event报错的问题

README.md

@@ -57,7 +57,7 @@ microApp.start()
 ```html
 <!-- my-page.vue -->
 <template>
-  <!-- 👇 name is the application name, url is the html address -->
+  <!-- 👇 name is the app name, url is the app address -->
   <micro-app name='my-app' url='http://localhost:3000/'></micro-app>
 </template>
 ```

README.zh-cn.md

@@ -56,7 +56,7 @@ microApp.start()
 ```html
 <!-- my-page.vue -->
 <template>
-  <!-- 👇 name为应用名称，url为html地址 -->
+  <!-- 👇 name为应用名称，url为应用地址 -->
   <micro-app name='my-app' url='http://localhost:3000/'></micro-app>
 </template>
 ```

docs/sidebar.md

@@ -1,7 +1,6 @@
 - 指南
   - [介绍](/)
   - [快速开始](zh-cn/start)
-  <!-- - [API](zh-cn/api) -->
 
 - 功能
   - [配置项](zh-cn/configure)
@@ -16,10 +15,10 @@
   - [插件系统](zh-cn/plugins)
   - [多层嵌套](zh-cn/nest)
   - [高级功能](zh-cn/advanced)
+  - [API](zh-cn/api)
   - [路由](zh-cn/route)
   - [应用之间跳转](zh-cn/jump)
   - [部署](zh-cn/deploy)
-  - [API](zh-cn/api)
 
 - 手把手
   - [说明](zh-cn/framework/introduce)

docs/zh-cn/api.md

@@ -10,7 +10,6 @@ preFetch([
     url: string,
     disableScopecss?: boolean,
     disableSandbox?: boolean,
-    macro?: boolean,
   },
 ])
 ```

docs/zh-cn/changelog.md

@@ -10,11 +10,12 @@
 
 ### 0.5.3
 
-`2021-12-03`
+`2021-12-02`
 
 - **Bug Fix**
 
   - 🐞 修复了沙箱中注册的全局变量的映射key在部分场景下没有及时删除的问题。
+  - 🐞 修复了在不支持ESModule的项目中，引入`polyfill/jsx-custom-event`报错的问题。
 
 
 ### 0.5.2

docs/zh-cn/configure.md

@@ -60,7 +60,7 @@
 在禁用样式隔离前，请确保基座应用和子应用，以及子应用之间样式不会相互污染。
 
 > [!NOTE]
-> 禁用样式隔离，CSS中的资源地址补全功能失效，需要设置[publicpath](/zh-cn/static-source?id=publicpath)防止资源加载失败。
+> 禁用样式隔离，CSS中的资源路径补全功能失效，需要设置[publicpath](/zh-cn/static-source?id=publicpath)防止资源加载失败。
 
 ## disableSandbox
 - Desc: `禁用js沙箱`
@@ -76,7 +76,7 @@
 >
 > 2、元素隔离
 >
-> 3、静态资源地址补全
+> 3、静态资源路径补全
 >
 > 4、`__MICRO_APP_ENVIRONMENT__`、`__MICRO_APP_PUBLIC_PATH__`等全局变量
 >
@@ -93,12 +93,19 @@ shadowDOM具有更强的样式隔离能力，开启后，`<micro-app>`标签会
 
 但shadowDOM在React框架及一些UI库中的兼容不是很好，请谨慎使用。
 
+## ssr
+- Desc: `是否开启ssr模式`
+- Type: `string(boolean)`
+- Default: `false`
+- 使用方式: `<micro-app name='xx' url='xx' ssr></micro-app>`
+
+当子应用是ssr应用时，需要设置ssr属性，此时micro-app会根据ssr模式加载子应用。
+
 ## 全局配置
-全局配置会影响每一个子应用，上述几个选项都可以配置到全局。
+全局配置会影响每一个子应用，请小心使用！
 
 **使用方式**
 
-只在入口文件定义一次，不要多次定义。
 ```js
 import microApp from '@micro-zoe/micro-app'
 
@@ -108,6 +115,7 @@ microApp.start({
   disableScopecss: true, // 默认值false
   disableSandbox: true, // 默认值false
   shadowDOM: true, // 默认值false
+  ssr: true, // 默认值false
 })
 ```
 
@@ -121,6 +129,7 @@ microApp.start({
   disableScopecss='false'
   disableSandbox='false'
   shadowDOM='false'
+  ssr='false'
 ></micro-app>
 ```
 

docs/zh-cn/framework/angular.md

@@ -0,0 +1,182 @@
+本篇以`angular11`作为案例介绍angular的接入方式，其它版本angular接入方式会在后续补充，如果你在使用时出现问题，请在github上提issue告知我们。
+
+## 作为基座应用
+我们强烈建议基座应用采用history模式，hash路由的基座应用只能加载hash路由的子应用，history模式的基座应用对这两种子应用都支持。
+
+在以下案例中，我们默认基座的路由为history模式。
+
+#### 1、安装依赖
+```bash
+npm i @micro-zoe/micro-app --save
+```
+
+#### 2、在入口处引入
+```js
+// entry
+import microApp from '@micro-zoe/micro-app'
+
+microApp.start()
+```
+
+#### 3、增加对WebComponent的支持
+
+在`app/app.module.ts`中添加 `CUSTOM_ELEMENTS_SCHEMA` 到 @NgModule.schemas
+```js
+// app/app.module.ts
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+```
+
+#### 4、分配一个路由给子应用
+
+```js
+// app/app-routing.module.ts
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MyPage } from './my-page/my-page.component';
+
+const routes: Routes = [
+  {
+    // 👇 非严格匹配，/my-page/* 都指向 MyPage 页面
+    path: 'my-page',
+    children: [{
+      path: '**',
+      component: MyPage
+    }]
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+
+export class AppRoutingModule { }
+```
+
+#### 4、在页面中嵌入子应用
+
+```html
+<!-- app/my-page/my-page.component.html -->
+<div>
+  <h1>子应用</h1>
+  <!-- 
+    name(必传)：应用名称
+    url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html
+    baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/my-page`
+    -->
+  <micro-app name='app1' url='http://localhost:3000/' baseroute='/my-page'></micro-app>
+</div>
+```
+
+## 作为子应用
+
+#### 1、在基座应用中引入`zone.js`
+如果基座应用非angular，那么基座应用需要引入`zone.js`才能正确加载angular子应用。
+
+步骤1、安装依赖
+```
+npm i zone.js --save
+```
+
+步骤2、在基座应用中引入zone.js
+```js
+import 'zone.js'
+```
+
+#### 2、设置跨域支持
+angular官方脚手架创建的项目在开发环境下默认支持跨域访问，不需要特殊处理。
+
+其它项目在`webpack-dev-server`中添加headers。
+
+```js
+headers: {
+  'Access-Control-Allow-Origin': '*',
+}
+```
+
+#### 3、关闭热更新
+```bash
+"scripts": {
+  "start": "ng serve --live-reload false",
+},
+```
+
+#### 4、设置基础路由`(如果基座是history路由，子应用是hash路由，这一步可以省略)`
+
+```js
+// app/app-routing.module.ts
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { APP_BASE_HREF } from '@angular/common';
+
+const routes: Routes = [...];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+  // 👇 设置基础路由
+  providers: [{
+    provide: APP_BASE_HREF,
+    // @ts-ignore __MICRO_APP_BASE_ROUTE__ 为micro-app传入的基础路由
+    useValue: window.__MICRO_APP_BASE_ROUTE__ || '/',
+  }]
+})
+
+export class AppRoutingModule { }
+```
+
+#### 5、设置 publicPath
+
+这一步借助了webpack的功能，避免子应用的静态资源使用相对地址时加载失败的情况，详情参考webpack文档 [publicPath](https://webpack.docschina.org/guides/public-path/#on-the-fly)
+
+*如果子应用不是webpack构建的，这一步可以省略。*
+
+**步骤1:** 在子应用src目录下创建名称为`public-path.js`的文件，并添加如下内容
+```js
+// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
+if (window.__MICRO_APP_ENVIRONMENT__) {
+  // eslint-disable-next-line
+  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
+}
+```
+
+**步骤2:** 在子应用入口文件的`最顶部`引入`public-path.js`
+```js
+// entry
+import './public-path'
+```
+
+#### 6、监听卸载
+子应用被卸载时会接受到一个名为`unmount`的事件，在此可以进行卸载相关操作。
+
+```js
+// main.ts
+
+let app = null;
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .then((res: NgModuleRef<AppModule>) => {
+    app = res
+  })
+
+
+// 监听卸载操作
+window.addEventListener('unmount', function () {
+  app.destroy();
+  app = null;
+})
+```
+
+
+## 实战案例
+以上介绍了angular如何接入微前端，但在实际使用中会涉及更多功能，如数据通信、路由跳转、打包部署，为此我们提供了一套案例，用于展示angular作为基座嵌入(或作为子应用被嵌入) react、vue、angular、vite、nextjs、nuxtjs等框架，在案例中我们使用尽可能少的代码实现尽可能多的功能。
+
+案例地址：https://github.com/micro-zoe/micro-app-demo
+
+## 常见问题
+#### 1、基座是react、nextjs应用，引入zone.js后导致micro-app元素生命周期异常
+**解决方式：** 在micro-app元素上设置destory