chore: update deps

.eslintignore

@@ -6,3 +6,4 @@ node_modules
 /docs
 /plugins
 /src/__tests__/demos
+/src/__tests__

.github/workflows/close_inactive_issue.yml

@@ -13,19 +13,19 @@ jobs:
         with:
           actions: 'close-issues'
           labels: 'Need Reproduction'
-          inactive-day: 30
+          inactive-day: 7
           body: |
-            Since the issue was labeled with `Need Reproduction`, but no response in 30 days. This issue will be close. If you have any questions, you can comment and reply.
-            由于该 issue 被标记为需要可复现步骤，却 30 天未收到回应。现关闭 issue，若有任何问题，可评论回复。
+            Since the issue was labeled with `Need Reproduction`, but no response in 7 days. This issue will be close. If you have any questions, you can comment and reply.
+            由于该 issue 被标记为需要可复现步骤，却 7 天未收到回应。现关闭 issue，若有任何问题，可评论回复。
       - name: close inactive issue not use template
         uses: actions-cool/[email protected]
         with:
           actions: 'close-issues'
           labels: 'pls use issue template'
-          inactive-day: 30
+          inactive-day: 7
           body: |
-            Since the issue was labeled with `pls use issue template`, but no response in 30 days. This issue will be close. If you have any questions, you can comment and reply.
-            由于该 issue 被标记为需要使用模板，却 30 天未收到回应。现关闭 issue，若有任何问题，可评论回复。
+            Since the issue was labeled with `pls use issue template`, but no response in 7 days. This issue will be close. If you have any questions, you can comment and reply.
+            由于该 issue 被标记为需要使用模板，却 7 天未收到回应。现关闭 issue，若有任何问题，可评论回复。
       - name: close inactive issue
         uses: actions-cool/[email protected]
         with:

Contact.md

@@ -0,0 +1,31 @@
+欢迎小伙伴们加入micro-app微信群交流^ ^
+
+![image](https://github.com/micro-zoe/micro-app/assets/14011130/851dc743-6946-4d97-ab3d-360aa4ed94d6)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

README.md

@@ -14,8 +14,8 @@
   <a href="https://github.com/micro-zoe/micro-app/blob/master/LICENSE">
     <img src="https://img.shields.io/npm/l/@micro-zoe/micro-app.svg" alt="license"/>
   </a>
-  <a href="https://gitter.im/microzoe/micro-app">
-    <img src="https://badges.gitter.im/microzoe/micro-app.svg" alt="gitter">
+  <a href="https://github.com/micro-zoe/micro-app/blob/dev/Contact.md">
+    <img src="https://img.shields.io/badge/chat-wechat-blue" alt="WeChat">
   </a>
   <a href="https://travis-ci.com/github/micro-zoe/micro-app">
     <img src="https://api.travis-ci.com/micro-zoe/micro-app.svg?branch=master" alt="travis"/>
@@ -25,7 +25,7 @@
   </a>
 </p>
 
-English｜[简体中文](./README.zh-cn.md)｜[Documentation](https://micro-zoe.github.io/micro-app/)｜[Discussions](https://github.com/micro-zoe/micro-app/discussions)｜[Gitter](https://gitter.im/microzoe/micro-app)
+English｜[简体中文](./README.zh-cn.md)｜[Documentation](https://micro-zoe.github.io/micro-app/)｜[Discussions](https://github.com/micro-zoe/micro-app/discussions)｜[WeChat](./Contact.md)
 
 # 📖Introduction
 micro-app is a micro front-end framework launched by JD Retail. It renders based on webcomponent-like and realizes the micro front-end from component thinking, it aiming to reduce the difficulty of getting started and improve work efficiency. 
@@ -35,11 +35,7 @@ It is the lowest cost framework for accessing micro front-end, and provides a se
 micro-app has no restrictions on the front-end framework, and any framework can be used as a base application to embed any type of micro application of the framework.
 
 # How to use
-The micro front end is divided into a base application (also called main application) and a micro application.
-
-Here is a common example: the base application uses the Vue framework, uses history routing, the micro application uses the react framework, and uses hash routing. We list the modifications that need to be made by the base application and the micro application, and introduce the use of micro-app in detail.
-
-## base application
+## Base application
 **1、Install**
 ```bash
 yarn add @micro-zoe/micro-app
@@ -62,7 +58,7 @@ microApp.start()
 </template>
 ```
 
-## micro application
+## Sub application
 **Set cross-domain support in the headers of webpack-dev-server**
 ```js
 devServer: {
@@ -152,9 +148,9 @@ For more commands, see [DEVELOP](https://github.com/micro-zoe/micro-app/blob/mas
 </details>
 
 # Contributors
-<a href="https://github.com/micro-zoe/micro-app/graphs/contributors"><img src="https://micro-zoe.com/contributors.svg?height=55&people=13" /></a>
-<!-- opencollective is inaccurate  -->
-<!-- <a href="https://github.com/micro-zoe/micro-app/graphs/contributors"><img src="https://opencollective.com/micro-app/contributors.svg?width=890&button=false" /></a> -->
+<a href="https://github.com/micro-zoe/micro-app/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=micro-zoe/micro-app" />
+</a>
 
 # License
 [MIT License](https://github.com/micro-zoe/micro-app/blob/master/LICENSE)

README.zh-cn.md

@@ -14,8 +14,8 @@
   <a href="https://github.com/micro-zoe/micro-app/blob/master/LICENSE">
     <img src="https://img.shields.io/npm/l/@micro-zoe/micro-app.svg" alt="license"/>
   </a>
-  <a href="https://gitter.im/microzoe/micro-app">
-    <img src="https://badges.gitter.im/microzoe/micro-app.svg" alt="gitter">
+  <a href="https://github.com/micro-zoe/micro-app/blob/dev/Contact.md">
+    <img src="https://img.shields.io/badge/chat-wechat-blue" alt="WeChat">
   </a>
   <a href="https://travis-ci.com/github/micro-zoe/micro-app">
     <img src="https://api.travis-ci.com/micro-zoe/micro-app.svg?branch=master" alt="travis"/>
@@ -25,19 +25,15 @@
   </a>
 </p>
 
-[English](https://github.com/micro-zoe/micro-app)｜简体中文｜[官网文档](https://micro-zoe.github.io/micro-app/)｜[讨论组](https://github.com/micro-zoe/micro-app/discussions)｜[聊天室](https://gitter.im/microzoe/micro-app)
+[English](https://github.com/micro-zoe/micro-app)｜简体中文｜[官网文档](https://micro-zoe.github.io/micro-app/)｜[讨论组](https://github.com/micro-zoe/micro-app/discussions)｜[微信群](./Contact.md)
 
 # 📖简介
-micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。
+micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、虚拟路由系统、插件系统、数据通信等一系列完善的功能。
 
 micro-app与技术栈无关，对前端框架没有限制，任何框架都可以作为基座应用嵌入任何类型的子应用。
 
 # 如何使用
-微前端分为基座应用（也可以叫做主应用）和子应用。
-
-这里以一种比较常见的情况举例：基座应用使用vue框架，采用history路由，子应用使用react框架，采用hash路由，我们分别列出基座应用和子应用需要进行的修改，具体介绍micro-app的使用方式。
-
-## 基座应用
+## 主应用
 
 **1、安装依赖**
 ```bash
@@ -54,11 +50,8 @@ microApp.start()
 
 **3、在页面中嵌入微前端应用**
 ```html
-<!-- my-page.vue -->
-<template>
-  <!-- 👇 name为应用名称，url为应用地址 -->
-  <micro-app name='my-app' url='http://localhost:3000/'></micro-app>
-</template>
+<!-- 👇 name为应用名称，url为应用地址 -->
+<micro-app name='my-app' url='http://localhost:3000/'></micro-app>
 ```
 
 ## 子应用
@@ -72,14 +65,14 @@ devServer: {
 },
 ```
 
-以上微前端基本渲染完成，效果如下：
+以上即完成微前端的嵌入，效果如下：
 
 <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196940/34/1541/38365/610a14fcE46c21374/c321b9f8fa50a8fc.png" alt="result" width='900'/>
 
 更多详细配置可以查看[官网文档](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/start)
 
 # 🤝 参与共建
-如果您对这个项目感兴趣，欢迎提 pull request，也欢迎 "Star" 支持一下 ^_^
+如果您对这个项目感兴趣，欢迎参与贡献，也欢迎 "Star" 支持一下 ^_^
 
 ### 本地运行
 1、克隆项目
@@ -152,10 +145,12 @@ yarn start # 访问 http://localhost:3000
   支持，详情请查看[nextjs](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/nextjs)、[nuxtjs](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/nuxtjs)
 </details>
 
+
 # 贡献者们
-<a href="https://github.com/micro-zoe/micro-app/graphs/contributors"><img src="https://micro-zoe.com/contributors.svg?height=55&people=13" /></a>
-<!-- opencollective is inaccurate  -->
-<!-- <a href="https://github.com/micro-zoe/micro-app/graphs/contributors"><img src="https://opencollective.com/micro-app/contributors.svg?width=890&button=false" /></a> -->
+<a href="https://github.com/micro-zoe/micro-app/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=micro-zoe/micro-app" />
+</a>
+
 
 # License
 [MIT License](https://github.com/micro-zoe/micro-app/blob/master/LICENSE)

dev/children/angular11/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --port 6001 --live-reload false",
+    "start": "ng serve --port 6001",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
@@ -44,4 +44,4 @@
     "tslint": "~6.1.0",
     "typescript": "~4.1.2"
   }
-}
+}

dev/children/angular11/src/app/app.component.ts

@@ -1,10 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, NgZone } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.less']
 })
 export class AppComponent {
+  constructor(private router: Router, private ngZone: NgZone) {
+    // 解决点击浏览器前进、返回按钮，上一个页面不卸载的问题
+    if (window.__MICRO_APP_ENVIRONMENT__) {
+      window.addEventListener('popstate', () => {
+        const fullPath = location.pathname.replace('/micro-app/angular11', '') + location.search + location.hash
+        this.ngZone.run(() => {
+          this.router.navigateByUrl(fullPath)
+        })
+      })
+    }
+  }
   title = 'child-angular11';
 }

dev/children/angular11/src/main.ts

@@ -11,51 +11,54 @@ if (environment.production) {
 declare global {
   interface Window {
     microApp: any
-    __MICRO_APP_NAME__: string
+    mount: CallableFunction
+    unmount: CallableFunction
     __MICRO_APP_ENVIRONMENT__: string
   }
 }
 
 // ----------分割线---默认模式------两种模式任选其一-----放开注释即可运行------- //
-// let app = null;
+// let app: void | NgModuleRef<AppModule>
 // platformBrowserDynamic()
 //   .bootstrapModule(AppModule)
 //   .then((res: NgModuleRef<AppModule>) => {
 //     app = res
 //   })
 //   .catch(err => console.error(err))
 
-// console.log('微应用child-angular11渲染了');
+// console.log('微应用child-angular11渲染了 -- 默认模式');
 
 // // 监听卸载操作
-// window.addEventListener("unmount", function () {
-//   app.destroy();
-//   app = null;
-//   console.log('微应用child-angular11卸载了');
-// })
+// window.unmount = () => {
+//   app && app.destroy();
+//   app = undefined;
+//   console.log('微应用child-angular11卸载了 --- 默认模式');
+// }
 
 // ----------分割线---umd模式------两种模式任选其一-------------- //
-let app = null;
-// 将渲染操作放入 mount 函数
-async function mount () {
-  app = await platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch(err => console.error(err))
-
-  console.log('微应用child-angular11渲染了');
+let app: void | NgModuleRef<AppModule>
+// 👇 将渲染操作放入 mount 函数，子应用初始化时会自动执行
+window.mount = () => {
+  platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .then((res: NgModuleRef<AppModule>) => {
+      app = res
+    })
+    .catch(err => console.error(err))
+
+  console.log('微应用child-angular11渲染了 -- UMD模式');
 }
 
-// 将卸载操作放入 unmount 函数
-function unmount () {
-  app.destroy();
-  app = null;
-  console.log('微应用child-angular11卸载了');
+// 👇 将卸载操作放入 unmount 函数
+window.unmount = () => {
+  app && app.destroy();
+  app = undefined;
+  console.log('微应用child-angular11卸载了 --- UMD模式');
 }
 
-// 微前端环境下，注册mount和unmount方法
-if (window.__MICRO_APP_ENVIRONMENT__) {
-  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
-} else {
-  // 非微前端环境直接渲染
-  mount();
+// 如果不在微前端环境，则直接执行mount渲染
+if (!window.__MICRO_APP_ENVIRONMENT__) {
+  window.mount();
 }
+
+// -------------------分割线-------------------- //

dev/children/angular14/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

dev/children/angular14/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

dev/children/angular14/.gitignore

@@ -0,0 +1,43 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+/angular14
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db