feat: 新增globalAssets配置，用于设置资源共享

.travis.yml

@@ -19,4 +19,4 @@ install:
 script:
   - npm run test:coverage
   - ./node_modules/coveralls/bin/coveralls.js < ./coverage/lcov.info
-  
+

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/zoe-community/zoe-room">
-    <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
+  <a href="https://gitter.im/microzoe/micro-app">
+    <img src="https://badges.gitter.im/microzoe/micro-app.svg" alt="gitter">
   </a>
   <a href="https://travis-ci.com/github/bailicangdu/micro-app">
     <img src="https://travis-ci.com/bailicangdu/micro-app.svg?branch=master" alt="travis"/>
@@ -25,7 +25,7 @@
   </a>
 </p>
 
-English｜[简体中文](https://github.com/micro-zoe/micro-app/blob/master/README.zh-cn.md)｜[Discussions](https://github.com/micro-zoe/micro-app/discussions)｜[Gitter](https://gitter.im/zoe-community/zoe-room)
+English｜[简体中文](https://github.com/micro-zoe/micro-app/blob/master/README.zh-cn.md)｜[Discussions](https://github.com/micro-zoe/micro-app/discussions)｜[Gitter](https://gitter.im/microzoe/micro-app)
 
 # 📖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. 

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/zoe-community/zoe-room">
-    <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
+  <a href="https://gitter.im/microzoe/micro-app">
+    <img src="https://badges.gitter.im/microzoe/micro-app.svg" alt="gitter">
   </a>
   <a href="https://travis-ci.com/github/bailicangdu/micro-app">
     <img src="https://travis-ci.com/bailicangdu/micro-app.svg?branch=master" alt="travis"/>
@@ -25,7 +25,7 @@
   </a>
 </p>
 
-[English](https://github.com/micro-zoe/micro-app)｜简体中文｜[讨论组](https://github.com/micro-zoe/micro-app/discussions)｜[Gitter群聊](https://gitter.im/zoe-community/zoe-room)
+[English](https://github.com/micro-zoe/micro-app)｜简体中文｜[讨论组](https://github.com/micro-zoe/micro-app/discussions)｜[Gitter群聊](https://gitter.im/microzoe/micro-app)
 
 # 📖简介
 micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。

docs/docs.html

@@ -77,7 +77,7 @@
   <script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
   <script>
     ((window.gitter = {}).chat = {}).options = {
-      room: 'zoe-community/zoe-room'
+      room: 'microzoe/micro-app'
     }
   </script>
   <script src="//sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

docs/index.html

@@ -154,7 +154,7 @@ <h4>预加载</h4>
         <dl>
           <dt>相关地址</dt>
           <dd><a target="blank" href="https://github.com/micro-zoe/micro-app/issues">BUG反馈</a></dd>
-          <dd><a target="blank" href="https://gitter.im/zoe-community/zoe-room">Gitter群聊</a></dd>
+          <dd><a target="blank" href="https://gitter.im/microzoe/micro-app">Gitter群聊</a></dd>
           <dd><a target="blank" href="https://github.com/micro-zoe/micro-app/discussions">GitHub讨论组</a></dd>
         </dl>
         <dl>

docs/zh-cn/chat.md

@@ -1,3 +1,3 @@
-- [Gitter群聊](https://gitter.im/zoe-community/zoe-room)
+- [Gitter群聊](https://gitter.im/microzoe/micro-app)
 - [GitHub讨论组](https://github.com/micro-zoe/micro-app/discussions)
 - [BUG反馈](https://github.com/micro-zoe/micro-app/issues)

docs/zh-cn/configure.md

@@ -149,8 +149,8 @@ microApp.start({
 ```
 
 ## 其它配置
-### exclude
-如果子应用的一些静态资源不希望被基座应用加载并渲染，可以在标签上添加`exclude`属性进行过滤。
+### exclude(过滤资源)
+当子应用不需要加载某个js或css，可以通过在link、script、style设置exclude属性过滤这些资源，当micro-app遇到带有exclude属性的元素会进行删除。
 
 **使用方式**
 ```html
@@ -159,13 +159,31 @@ microApp.start({
 <style exclude></style>
 ```
 
-### global
-当多个子应用使用相同的js或css资源，在link、script设置`global`属性会将文件提取为公共缓存。
+### global(资源共享)
+当多个子应用使用相同的js或css资源，在link、script设置`global`属性会将文件提取为公共文件，共享给其它应用。
 
-设置`global`后文件第一次加载会放入公共缓存，其它子应用加载相同的资源时直接从缓存中读取内容并渲染，从而提升性能、节省流量。
+设置`global`属性后文件第一次加载会放入公共缓存，其它子应用加载相同的资源时直接从缓存中读取内容并渲染，从而提升性能、节省流量。
 
 **使用方式**
 ```html
 <link rel="stylesheet" href="xx.css" global>
 <script src="xx.js" global></script>
 ```
+
+### globalAssets(资源共享)
+globalAssets用于设置全局共享资源，它和预加载的思路相同，在浏览器空闲时加载资源并放入缓存，提高渲染效率。
+
+当子应用加载相同地址的js或css资源时，会直接从缓存中提取数据。
+
+**使用方式**
+```js
+// index.js
+import microApp from '@micro-zoe/micro-app'
+
+microApp.start({
+  globalAssets: {
+    js: ['js地址1', 'js地址2', ...], // js地址
+    css: ['css地址1', 'css地址2', ...], // css地址
+  }
+})
+```

docs/zh-cn/other.md

@@ -22,9 +22,9 @@ import microApp from '@micro-zoe/micro-app'
 microApp.start({
   /**
    * 自定义fetch
-   * @param url 静态资源地址
-   * @param options fetch请求配置项
-   * @param appName 应用名称
+   * @param {string} url 静态资源地址
+   * @param {object} options fetch请求配置项
+   * @param {string|null} appName 应用名称
    * @returns Promise<string>
   */
   fetch (url, options, appName) {

docs/zh-cn/static-source.md

@@ -36,3 +36,46 @@ import './public-path'
 ```
 
 更多详细配置请查看webpack文档 [public-path](https://webpack.docschina.org/guides/public-path/#on-the-fly)
+
+### 资源共享
+当多个子应用拥有相同的js或css资源，可以指定这些资源在多个子应用之间共享，在子应用加载时直接从缓存中提取数据，从而提高渲染效率和性能。
+
+设置资源共享的方式有两种：
+#### 1、设置 globalAssets
+globalAssets用于设置全局共享资源，它和预加载的思路相同，在浏览器空闲时加载资源并放入缓存。
+
+当子应用加载相同地址的js或css资源时，会直接从缓存中提取数据。
+
+**使用方式**
+```js
+// index.js
+import microApp from '@micro-zoe/micro-app'
+
+microApp.start({
+  globalAssets: {
+    js: ['js地址1', 'js地址2', ...], // js地址
+    css: ['css地址1', 'css地址2', ...], // css地址
+  }
+})
+```
+
+#### 2、设置 global 属性
+在link、script设置`global`属性会将文件提取为公共文件，共享给其它应用。
+
+设置`global`属性后文件第一次加载会放入公共缓存，其它子应用加载相同的资源时直接从缓存中读取内容。
+
+**使用方式**
+```html
+<link rel="stylesheet" href="xx.css" global>
+<script src="xx.js" global></script>
+```
+
+### 资源过滤
+当子应用不需要加载某个js或css，可以通过在link、script、style设置exclude属性过滤这些资源，当micro-app遇到带有exclude属性的元素会进行删除。
+
+**使用方式**
+```html
+<link rel="stylesheet" href="xx.css" exclude>
+<script src="xx.js" exclude></script>
+<style exclude></style>
+```

examples/children/vue2/src/App.vue

@@ -16,7 +16,7 @@ export default {
   name: 'App',
   data () {
     return {
-      activeName: window.location.href.includes('page2') ? 'page2': '/',
+      activeName: window.location.href.includes('#/page2') ? 'page2': '/',
     }
   },
   created () {

examples/main-react16/src/global.jsx

@@ -113,7 +113,7 @@ microApp.start({
     return fetch(url, Object.assign(options, config)).then((res) => {
       return res.text()
     })
-  }
+  },
 })
 
 if (pwa) {

src/__tests__/common.ts

@@ -20,6 +20,7 @@ export const ports = {
   source_scripts: 9011,
   source_scripts2: 9012,
   source_patch: 9013,
+  prefetch: 9014,
 }
 
 // 启动服务

src/__tests__/demo/ssr-render/index.html

@@ -18,7 +18,6 @@
     <!-- 这些地址在初始化时需要被补全，否则无法正常加载 -->
     <img src="/path-a/img.jpg" alt="" id='app2-img1'>
     <iframe src="/path-b/" frameborder="0" id='app2-iframe1'></iframe>
-    <a href="path-c/index.html" id='app2-a1'></a>
   </div>
   <!-- 测试元素查询的patch函数 -->
   <div id='patch-element-con'>

src/__tests__/index.test.ts

@@ -80,7 +80,9 @@ describe('main process', () => {
             url: '',
           }
         ]
-      }
+      },
+      // globalAssets 测试分支覆盖
+      globalAssets: 'xxx' as any,
     })
 
     preFetch([{

src/__tests__/prefetch.test.ts

@@ -1,19 +1,49 @@
 /* eslint-disable promise/param-names */
-import './common'
+import { commonStartEffect, releaseAllEffect, ports } from './common'
 import microApp from '..'
 import preFetch from '../prefetch'
+import { globalLinks } from '../source/links'
+import { globalScripts } from '../source/scripts'
 
-global.console.warn = jest.fn()
-global.console.error = jest.fn()
+describe('prefetch', () => {
+  // let appCon: Element
+  beforeAll(() => {
+    commonStartEffect(ports.prefetch)
+    // appCon = document.querySelector('#app-container')!
 
-test('coverage branch for prefetch', async () => {
-  microApp.start()
+    microApp.start({
+      globalAssets: {
+        js: [
+          `http://127.0.0.1:${ports.prefetch}/common/script1.js`,
+          `http://127.0.0.1:${ports.prefetch}/common/script1.js`,
+          'http://not-exist.com/xxx.js'
+        ],
+        css: [
+          `http://127.0.0.1:${ports.prefetch}/common/link1.css`,
+          `http://127.0.0.1:${ports.prefetch}/common/link1.css`,
+          'http://not-exist.com/xxx.css'
+        ],
+      }
+    })
+  })
+
+  afterAll(() => {
+    return releaseAllEffect()
+  })
+
+  // sepecial case
+  test('coverage branch for prefetch', async () => {
+    preFetch(123 as any) // 非法的入参
+    preFetch([{ name: 'test-app1', url: 'http://www.micro-app-test.com' }]) // 正常入参
+    await new Promise((reslove) => {
+      setTimeout(() => {
+        reslove(true)
+      }, 100)
+    })
+  })
 
-  preFetch(123 as any) // 非法的入参
-  preFetch([{ name: 'test-app1', url: 'http://www.micro-app-test.com' }]) // 正常入参
-  await new Promise((reslove) => {
-    setTimeout(() => {
-      reslove(true)
-    }, 100)
+  test('globalAssets should work normal', async () => {
+    expect(globalLinks.get(`http://127.0.0.1:${ports.prefetch}/common/link1.css`)).not.toBeNull()
+    expect(globalScripts.get(`http://127.0.0.1:${ports.prefetch}/common/script1.js`)).not.toBeNull()
   })
 })

src/__tests__/source/index.test.ts

@@ -14,7 +14,13 @@ describe('source index', () => {
   let appCon: Element
   beforeAll(() => {
     commonStartEffect(ports.source_index)
-    microApp.start()
+    microApp.start({
+      // globalAssets 测试分支覆盖
+      globalAssets: {
+        js: 'xx' as any,
+        css: 'xx' as any,
+      }
+    })
     appCon = document.querySelector('#app-container')!
   })
 
@@ -112,7 +118,6 @@ describe('source index', () => {
       microappElement6.addEventListener('mounted', () => {
         expect(document.getElementById('app2-img1')?.src).toBe(`http://127.0.0.1:${ports.source_index}/path-a/img.jpg`)
         expect(document.getElementById('app2-iframe1')?.src).toBe(`http://127.0.0.1:${ports.source_index}/path-b/`)
-        expect(document.getElementById('app2-a1')?.href).toBe(`http://127.0.0.1:${ports.source_index}/ssr-render/path-c/index.html`)
         reslove(true)
       }, false)
     })

src/libs/utils.ts

@@ -125,12 +125,12 @@ export function promiseStream <T> (
   promiseList: Array<Promise<T> | T>,
   successsCb: CallableFunction,
   errorCb: CallableFunction,
-  finallyCb: CallableFunction,
+  finallyCb?: CallableFunction,
 ): void {
   let finishedNum = 0
 
   function isFinished () {
-    if (++finishedNum === promiseList.length) finallyCb()
+    if (++finishedNum === promiseList.length && finallyCb) finallyCb()
   }
 
   promiseList.forEach((p, i) => {

src/micro_app.ts

@@ -1,6 +1,6 @@
 import type { OptionsType, MicroAppConfigType, lifeCyclesType, plugins, fetchType } from '@micro-app/types'
 import { defineElement } from './micro_app_element'
-import preFetch from './prefetch'
+import preFetch, { getGlobalAssets } from './prefetch'
 import { formatLogMessage, isFunction } from './libs/utils'
 import { EventCenterForBaseApp } from './interact'
 
@@ -46,9 +46,15 @@ class MicroApp extends EventCenterForBaseApp implements MicroAppConfigType {
         this.plugins = options.plugins
       }
 
+      // load app assets when browser is idle
       if (options.preFetchApps) {
         preFetch(options.preFetchApps)
       }
+
+      // load global assets when browser is idle
+      if (options.globalAssets) {
+        getGlobalAssets(options.globalAssets)
+      }
     }
   }
 }

src/micro_app_element.ts

@@ -149,7 +149,7 @@ export default class MicroAppElement extends HTMLElement implements MicroAppElem
   }
 
   /**
-   * judge the attribute is correct
+   * judge the attribute is legal
    * @param name attribute name
    * @param val attribute value
    */
@@ -201,7 +201,7 @@ export default class MicroAppElement extends HTMLElement implements MicroAppElem
   }
 
   /**
-   * Get configuration results
+   * Get configuration
    * Global setting is lowest priority
    * @param name Configuration item name
    */