@micro-zoe/micro-app 0.4.3 → 0.5.3

package/README.md

@@ -32,20 +32,20 @@ micro-app is a micro front-end framework launched by JD Retail. It renders based
 
 It is the lowest cost framework for accessing micro front-end, and provides a series of perfect functions such as JS sandbox, style isolation, element isolation, preloading, resource address completion, plugin system, data communication and so on.
 
-The micro-app has nothing to do with the technology stack, nor is it tied to the business, and can be used in any front-end framework.
+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.
 
-# Getting Start
-The micro front-end is divided into base application and micro application. We list the modifications required for base application and micro application respectively, and introduce the use of micro-app in detail.
+# How to use
+The micro front end is divided into a base application (also called main application) and a micro application.
 
-## base application
-> The base application takes the vue framework as an example
+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.
 
-1、Install
+## base application
+**1、Install**
 ```bash
 yarn add @micro-zoe/micro-app
 ```
 
-2、import at the entrance
+**2、import at the entrance**
 ```js
 // main.js
 import microApp from '@micro-zoe/micro-app'
@@ -53,63 +53,17 @@ import microApp from '@micro-zoe/micro-app'
 microApp.start()
 ```
 
-3、Assign a route to the micro application
-```js
-// router.js
-import Vue from 'vue'
-import VueRouter from 'vue-router' // vue-router@3.x
-import MyPage from './my-page.vue'
-
-Vue.use(VueRouter)
-
-const routes = [
-  {
-    // 👇 Non-strict matching, /my-page/xxx will be matched to the MyPage component
-    path: '/my-page/*', 
-    name: 'my-page',
-    component: MyPage,
-  },
-]
-
-export default routes
-```
-
-4、Use components in `my-page` pages
+**3、Use components in page**
 ```html
 <!-- my-page.vue -->
 <template>
-  <div>
-    <h1>micro application</h1>
-    <!-- 👇 name is the application name, globally unique, url is the html address -->
-    <micro-app name='app1' url='http://localhost:3000/' baseroute='/my-page'></micro-app>
-  </div>
+  <!-- 👇 name is the app name, url is the app address -->
+  <micro-app name='my-app' url='http://localhost:3000/'></micro-app>
 </template>
 ```
 
-> Please refer to [Routing Chapter](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/route) for the relationship between url and micro application routing
-
 ## micro application
-> The micro application takes the react framework as an example
-
-1、Add basename for route(If the base application is history route and the micro application is hash route, it is not necessary to set the baseroute, this step can be skipped)
-
-```js
-// router.js
-import { BrowserRouter, Switch, Route } from 'react-router-dom'
-
-export default function AppRoute () {
-  return (
-    // 👇 the micro application can get the baseroute issued by the base application through window.__MICRO_APP_BASE_ROUTE__
-    <BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}>
-      <Switch>
-        ...
-      </Switch>
-    </BrowserRouter>
-  )
-}
-```
-
-2、Set cross-domain support in the headers of webpack-dev-server.
+**Set cross-domain support in the headers of webpack-dev-server**
 ```js
 devServer: {
   headers: {
@@ -118,12 +72,10 @@ devServer: {
 },
 ```
 
-Then micro front-end can be rendered normally, and the react micro application is embedded in the vue base application. The effect is as follows：
+The above micro front-end rendering is completed, and the effect is as follows:
 
 ![image](https://img10.360buyimg.com/imagetools/jfs/t1/188373/14/17696/41854/6111f4a0E532736ba/4b86f4f8e2044519.png)
 
-The above lists the usage of react and Vue framework. They can be combined freely. For example, the base application is react, the micro application is Vue, or the base application is Vue, the micro application is react, or both the base application and the micro application are react and Vue. The 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.
-
 More detailed configuration can be viewed [Documentation](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/start).
 
 # 🤝 Contribution
@@ -190,7 +142,13 @@ For more commands, see [DEVELP](https://github.com/micro-zoe/micro-app/blob/mast
 <details>
   <summary>Does it support vite?</summary>
   
-  Yes, please see [adapt vite](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/advanced?id=_2%e3%80%81%e9%80%82%e9%85%8dvite) for details.
+  Yes, please see [adapt vite](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite) for details.
+</details>
+
+<details>
+  <summary>Does it support ssr?</summary>
+  
+  Yes, please see [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) for details.
 </details>
 
 # Contributors

package/README.zh-cn.md

@@ -30,20 +30,21 @@
 # 📖简介
 micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。
 
-micro-app与技术栈无关，也不和业务绑定，可以用于任何前端框架。
+micro-app与技术栈无关，对前端框架没有限制，任何框架都可以作为基座应用嵌入任何类型的子应用。
 
-# 🔧开始使用
-微前端分为基座应用和子应用，我们分别列出基座应用和子应用需要进行的修改，具体介绍micro-app的使用方式。
+# 如何使用
+微前端分为基座应用（也可以叫做主应用）和子应用。
+
+这里以一种比较常见的情况举例：基座应用使用vue框架，采用history路由，子应用使用react框架，采用hash路由，我们分别列出基座应用和子应用需要进行的修改，具体介绍micro-app的使用方式。
 
 ## 基座应用
-> 基座应用以vue框架为例
 
-1、安装依赖
+**1、安装依赖**
 ```bash
 yarn add @micro-zoe/micro-app
 ```
 
-2、在入口处引入依赖
+**2、在入口处引入**
 ```js
 // main.js
 import microApp from '@micro-zoe/micro-app'
@@ -51,63 +52,18 @@ import microApp from '@micro-zoe/micro-app'
 microApp.start()
 ```
 
-3、分配一个路由给子应用
-```js
-// router.js
-import Vue from 'vue'
-import VueRouter from 'vue-router' // vue-router@3.x
-import MyPage from './my-page.vue'
-
-Vue.use(VueRouter)
-
-const routes = [
-  {
-    // 👇 非严格匹配，/my-page/xxx 都将匹配到 MyPage 页面
-    path: '/my-page/*', 
-    name: 'my-page',
-    component: MyPage,
-  },
-]
-
-export default routes
-```
-
-4、在`MyPage`页面中嵌入微前端应用
+**3、在页面中嵌入微前端应用**
 ```html
 <!-- my-page.vue -->
 <template>
-  <div>
-    <h1>子应用</h1>
-    <!-- 👇 name为应用名称，url为html地址 -->
-    <micro-app name='app1' url='http://localhost:3000/' baseroute='/my-page'></micro-app>
-  </div>
+  <!-- 👇 name为应用名称，url为应用地址 -->
+  <micro-app name='my-app' url='http://localhost:3000/'></micro-app>
 </template>
 ```
 
-> url和子应用路由的关系请查看[路由一章](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/route)
-
 ## 子应用
-> 子应用以react框架为例
-
-1、设置基础路由(如果基座应用是history路由，子应用是hash路由，不需要设置基础路由，这一步可以省略)
 
-```js
-// router.js
-import { BrowserRouter, Switch, Route } from 'react-router-dom'
-
-export default function AppRoute () {
-  return (
-    // 👇 设置基础路由，子应用可以通过window.__MICRO_APP_BASE_ROUTE__获取基座应用下发的baseroute
-    <BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}>
-      <Switch>
-        ...
-      </Switch>
-    </BrowserRouter>
-  )
-}
-```
-
-2、在webpack-dev-server的headers中设置跨域支持。
+**在webpack-dev-server的headers中设置跨域支持。**
 ```js
 devServer: {
   headers: {
@@ -116,12 +72,10 @@ devServer: {
 },
 ```
 
-以上微前端就可以正常渲染，实现了在vue基座应用中嵌入react子应用，效果如下：
+以上微前端基本渲染完成，效果如下：
 
 <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196940/34/1541/38365/610a14fcE46c21374/c321b9f8fa50a8fc.png" alt="result" width='900'/>
 
-上面列出了react和vue框架的使用方式，它们是可以自由组合的，比如基座应用是react，子应用是vue，或者基座应用是vue，子应用是react，或者基座应用和子应用都是react、vue。 micro-app对前端框架没有限制，任何框架都可以作为基座应用嵌入任何类型框架的子应用。
-
 更多详细配置可以查看[官网文档](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/start)
 
 # 🤝 参与共建
@@ -189,7 +143,13 @@ yarn start # 访问 http://localhost:3000
 <details>
   <summary>支持vite吗?</summary>
   
-  支持，详情请查看[适配vite](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/advanced?id=_2%e3%80%81%e9%80%82%e9%85%8dvite)
+  支持，详情请查看[适配vite](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite)
+</details>
+
+<details>
+  <summary>支持ssr吗?</summary>
+  
+  支持，详情请查看[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>
 
 # 贡献者们

package/lib/index.d.ts

@@ -5,9 +5,10 @@
 
 declare module '@micro-zoe/micro-app' {
     export { default } from '@micro-zoe/micro-app/micro_app';
-    export { default as preFetch } from '@micro-zoe/micro-app/prefetch';
-    export { removeDomScope, pureCreateElement, version, setCurrentAppName } from '@micro-zoe/micro-app/libs/utils';
-    export { EventCenterForMicroApp } from '@micro-zoe/micro-app/interact';
+    export { default as preFetch, } from '@micro-zoe/micro-app/prefetch';
+    export { removeDomScope, pureCreateElement, version, } from '@micro-zoe/micro-app/libs/utils';
+    export { EventCenterForMicroApp, } from '@micro-zoe/micro-app/interact';
+    export { getActiveApps, getAllApps, } from '@micro-zoe/micro-app/create_app';
 }
 
 declare module '@micro-zoe/micro-app/micro_app' {
@@ -22,6 +23,7 @@ declare module '@micro-zoe/micro-app/micro_app' {
         disableScopecss?: boolean;
         disableSandbox?: boolean;
         macro?: boolean;
+        ssr?: boolean;
         lifeCycles?: lifeCyclesType;
         plugins?: plugins;
         fetch?: fetchType;
@@ -97,10 +99,22 @@ declare module '@micro-zoe/micro-app/libs/utils' {
         */
     export function addProtocol(url: string): string;
     /**
-        * Format URL address
-        * @param url address
+        * format URL address
+        * note the scenes:
+        * 1. micro-app -> attributeChangedCallback
+        * 2. preFetch
+        */
+    export function formatAppURL(url: string | null, appName?: string | null): string;
+    /**
+        * format name
+        * note the scenes:
+        * 1. micro-app -> attributeChangedCallback
+        * 2. event_center -> EventCenterForMicroApp -> constructor
+        * 3. event_center -> EventCenterForBaseApp -> all methods
+        * 4. preFetch
+        * 5. plugins
         */
-    export function formatURL(url: string | null, appName?: string | null): string;
+    export function formatAppName(name: string | null): string;
     /**
         * Get valid address, such as https://xxx/xx/xx.html to https://xxx/xx/
         * @param url app.url
@@ -144,9 +158,14 @@ declare module '@micro-zoe/micro-app/libs/utils' {
         * @param target Accept cloned elements
         * @param deep deep clone or transfer dom
         */
-    export function cloneNode<T extends Element, Q extends Element>(origin: T, target: Q, deep: boolean): void;
+    export function cloneContainer<T extends Element, Q extends Element>(origin: T, target: Q, deep: boolean): void;
     export function isInvalidQuerySelectorKey(key: string): boolean;
     export function isUniqueElement(key: string): boolean;
+    /**
+        * get micro-app element
+        * @param target app container
+        */
+    export function getRootContainer(target: HTMLElement | ShadowRoot): HTMLElement;
 }
 
 declare module '@micro-zoe/micro-app/interact' {
@@ -256,3 +275,66 @@ declare module '@micro-zoe/micro-app/interact' {
     export {};
 }
 
+declare module '@micro-zoe/micro-app/create_app' {
+    import type { AppInterface, sourceType, SandBoxInterface } from '@micro-app/types';
+    export const appInstanceMap: Map<string, AppInterface>;
+    export interface CreateAppParam {
+            name: string;
+            url: string;
+            ssrUrl?: string;
+            scopecss: boolean;
+            useSandbox: boolean;
+            macro?: boolean;
+            inline?: boolean;
+            baseroute?: string;
+            container?: HTMLElement | ShadowRoot;
+    }
+    export default class CreateApp implements AppInterface {
+            umdMode: boolean;
+            isPrefetch: boolean;
+            name: string;
+            url: string;
+            ssrUrl: string;
+            container: HTMLElement | ShadowRoot | null;
+            inline: boolean;
+            scopecss: boolean;
+            useSandbox: boolean;
+            macro: boolean;
+            baseroute: string;
+            source: sourceType;
+            sandBox: SandBoxInterface | null;
+            constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, macro, baseroute, }: CreateAppParam);
+            loadSourceCode(): void;
+            /**
+                * When resource is loaded, mount app if it is not prefetch or unmount
+                */
+            onLoad(html: HTMLElement): void;
+            /**
+                * Error loading HTML
+                * @param e Error
+                */
+            onLoadError(e: Error): void;
+            /**
+                * mount app
+                * @param container app container
+                * @param inline js runs in inline mode
+                * @param baseroute route prefix, default is ''
+                */
+            mount(container?: HTMLElement | ShadowRoot, inline?: boolean, baseroute?: string): void;
+            /**
+                * unmount app
+                * @param destroy completely destroy, delete cache resources
+                */
+            unmount(destroy: boolean): void;
+            actionsForCompletelyDestory(): void;
+            /**
+                * app rendering error
+                * @param e Error
+                */
+            onerror(e: Error): void;
+            getAppStatus(): string;
+    }
+    export function getActiveApps(): string[];
+    export function getAllApps(): string[];
+}
+