kj-micro-app 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 JD.com, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,156 @@
+<p align="center">
+  <a href="https://jd-opensource.github.io/micro-app/">
+    <img src="https://jd-opensource.github.io/micro-app/home/assets/logo.png" alt="logo" width="200"/>
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@micro-zoe/micro-app">
+    <img src="https://img.shields.io/npm/v/@micro-zoe/micro-app.svg" alt="version"/>
+  </a>
+  <a href="https://www.npmjs.com/package/@micro-zoe/micro-app">
+    <img src="https://img.shields.io/npm/dt/@micro-zoe/micro-app.svg" alt="downloads"/>
+  </a>
+  <a href="https://github.com/jd-opensource/micro-app/blob/master/LICENSE">
+    <img src="https://img.shields.io/npm/l/@micro-zoe/micro-app.svg" alt="license"/>
+  </a>
+  <a href="https://github.com/jd-opensource/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/jd-opensource/micro-app">
+    <img src="https://api.travis-ci.com/jd-opensource/micro-app.svg?branch=master" alt="travis"/>
+  </a>
+  <a href="https://coveralls.io/github/jd-opensource/micro-app?branch=master">
+    <img src="https://coveralls.io/repos/github/jd-opensource/micro-app/badge.svg?branch=master" alt="coveralls"/>
+  </a>
+</p>
+
+English｜[简体中文](./README.zh-cn.md)｜[Documentation](https://jd-opensource.github.io/micro-app/)｜[Discussions](https://github.com/jd-opensource/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. 
+
+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.
+
+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
+## Base application
+**1、Install**
+```bash
+yarn add @micro-zoe/micro-app
+```
+
+**2、import at the entrance**
+```js
+// main.js
+import microApp from '@micro-zoe/micro-app'
+
+microApp.start()
+```
+
+**3、Use components in page**
+```html
+<!-- my-page.vue -->
+<template>
+  <!-- 👇 name is the app name, url is the app address -->
+  <micro-app name='my-app' url='http://localhost:3000/'></micro-app>
+</template>
+```
+
+## Sub application
+**Set cross-domain support in the headers of webpack-dev-server**
+```js
+devServer: {
+  headers: {
+    'Access-Control-Allow-Origin': '*',
+  },
+},
+```
+
+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)
+
+More detailed configuration can be viewed [Documentation](https://jd-opensource.github.io/micro-app/docs.html#/zh-cn/start).
+
+# 🤝 Contribution
+If you're interested in this project, you're welcome to mention pull request, and also welcome your "Star" ^_^
+
+### development
+1、Clone
+```
+git clone https://github.com/jd-opensource/micro-app.git
+```
+
+2、Install dependencies
+```
+yarn bootstrap
+```
+
+3、Run project
+```
+yarn start
+```
+
+For more commands, see [DEVELOP](https://github.com/jd-opensource/micro-app/blob/master/DEVELOP.md)
+
+# FAQ
+<details>
+
+  <summary>What are the advantages of micro-app?</summary>
+  It is easy to use and low invasive. It only needs to change a small amount of code to access the micro front-end, and provides rich functions at the same time.
+
+</details>
+<details>
+  <summary>How compatible?</summary>
+  The micro-app relies on two newer APIs, CustomElements and Proxy.
+
+  For browsers that do not support CustomElements, they can be compatible by introducing polyfills. For details, please refer to: [webcomponents/polyfills](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements)。
+
+  However, Proxy is not compatible for the time being, so the micro-app cannot be run on browsers that do not support Proxy.
+
+  Browser compatibility can be viewed: [Can I Use](https://caniuse.com/?search=Proxy)
+
+  The general is as follows:
+  - desktop: Except IE browser, other browsers are basically compatible.
+  - mobile: ios10+、android5+
+</details>
+
+<details>
+  <summary>Must micro applications support cross-domain?</summary>
+  yes!
+
+  If it is a development environment, you can set headers in webpack-dev-server to support cross-domain.
+
+  ```js
+  devServer: {
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  }
+  ```
+
+  If it is a production environment, you can support cross-domain through [Configuration nginx](https://segmentfault.com/a/1190000012550346).
+
+</details>
+
+<details>
+  <summary>Does it support vite?</summary>
+  
+  Yes, please see [adapt vite](https://jd-opensource.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://jd-opensource.github.io/micro-app/docs.html#/zh-cn/framework/nextjs), [nuxtjs](https://jd-opensource.github.io/micro-app/docs.html#/zh-cn/framework/nuxtjs) for details.
+</details>
+
+# Contributors
+<a href="https://github.com/jd-opensource/micro-app/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=jd-opensource/micro-app" />
+</a>
+
+# License
+[MIT License](https://github.com/jd-opensource/micro-app/blob/master/LICENSE)

package/README.zh-cn.md

@@ -0,0 +1,156 @@
+<p align="center">
+  <a href="https://jd-opensource.github.io/micro-app/">
+    <img src="https://zeroing.jd.com/micro-app/media/logo.png" alt="logo" width="200"/>
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@micro-zoe/micro-app">
+    <img src="https://img.shields.io/npm/v/@micro-zoe/micro-app.svg" alt="version"/>
+  </a>
+  <a href="https://www.npmjs.com/package/@micro-zoe/micro-app">
+    <img src="https://img.shields.io/npm/dt/@micro-zoe/micro-app.svg" alt="downloads"/>
+  </a>
+  <a href="https://github.com/jd-opensource/micro-app/blob/master/LICENSE">
+    <img src="https://img.shields.io/npm/l/@micro-zoe/micro-app.svg" alt="license"/>
+  </a>
+  <a href="https://github.com/jd-opensource/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/jd-opensource/micro-app">
+    <img src="https://api.travis-ci.com/jd-opensource/micro-app.svg?branch=master" alt="travis"/>
+  </a>
+  <a href="https://coveralls.io/github/jd-opensource/micro-app?branch=master">
+    <img src="https://coveralls.io/repos/github/jd-opensource/micro-app/badge.svg?branch=master" alt="coveralls"/>
+  </a>
+</p>
+
+[English](https://github.com/jd-opensource/micro-app)｜简体中文｜[官网文档](https://jd-opensource.github.io/micro-app/)｜[讨论组](https://github.com/jd-opensource/micro-app/discussions)｜[微信群](./Contact.md)
+
+# 📖简介
+micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、虚拟路由系统、插件系统、数据通信等一系列完善的功能。
+
+micro-app与技术栈无关，对前端框架没有限制，任何框架都可以作为基座应用嵌入任何类型的子应用。
+
+# 如何使用
+## 主应用
+
+**1、安装依赖**
+```bash
+yarn add @micro-zoe/micro-app
+```
+
+**2、在入口文件引入**
+```js
+// main.js
+import microApp from '@micro-zoe/micro-app'
+
+microApp.start()
+```
+
+**3、在页面中嵌入微前端应用**
+```html
+<!-- 👇 name为应用名称，url为应用地址 -->
+<micro-app name='my-app' url='http://localhost:3000/'></micro-app>
+```
+
+## 子应用
+
+**在webpack-dev-server的headers中设置跨域支持。**
+```js
+devServer: {
+  headers: {
+    'Access-Control-Allow-Origin': '*',
+  },
+},
+```
+
+以上即完成微前端的嵌入，效果如下：
+
+<img src="https://img12.360buyimg.com/imagetools/jfs/t1/196940/34/1541/38365/610a14fcE46c21374/c321b9f8fa50a8fc.png" alt="result" width='900'/>
+
+更多详细配置可以查看[官网文档](https://jd-opensource.github.io/micro-app/docs.html#/zh-cn/start)
+
+# 🤝 参与共建
+如果您对这个项目感兴趣，欢迎参与贡献，也欢迎 "Star" 支持一下 ^_^
+
+### 本地运行
+1、克隆项目
+```
+git clone https://github.com/jd-opensource/micro-app.git
+```
+
+2、安装依赖
+```
+yarn bootstrap
+```
+
+3、运行项目
+```
+yarn start # 访问 http://localhost:3000
+```
+
+更多命令请查看[DEVELP](https://github.com/jd-opensource/micro-app/blob/master/DEVELOP.zh-cn.md)
+
+# FAQ
+[问题汇总](https://jd-opensource.github.io/micro-app/docs.html#/zh-cn/questions)
+<details>
+
+  <summary>micro-app的优势在哪里？</summary>
+  上手简单、侵入性低，只需改动少量的代码即可接入微前端，同时提供丰富的功能。
+
+  具体细节请参考文章：[micro-app介绍](https://github.com/jd-opensource/micro-app/issues/8)
+
+</details>
+<details>
+  <summary>兼容性如何？</summary>
+  micro-app依赖于CustomElements和Proxy两个较新的API。
+
+  对于不支持CustomElements的浏览器，可以通过引入polyfill进行兼容，详情可参考：[webcomponents/polyfills](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements)。
+
+  但是Proxy暂时没有做兼容，所以对于不支持Proxy的浏览器无法运行micro-app。
+
+  浏览器兼容性可以查看：[Can I Use](https://caniuse.com/?search=Proxy)
+
+  总体如下：
+  - PC端：除了IE浏览器，其它浏览器基本兼容。
+  - 移动端：ios10+、android5+
+</details>
+
+<details>
+  <summary>子应用一定要支持跨域吗？</summary>
+  是的！
+
+  如果是开发环境，可以在webpack-dev-server中设置headers支持跨域。
+  ```js
+  devServer: {
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  }
+  ```
+
+  如果是线上环境，可以通过[配置nginx](https://segmentfault.com/a/1190000012550346)支持跨域。
+</details>
+
+<details>
+  <summary>支持vite吗?</summary>
+  
+  支持，详情请查看[适配vite](https://jd-opensource.github.io/micro-app/docs.html#/zh-cn/framework/vite)
+</details>
+
+<details>
+  <summary>支持ssr吗?</summary>
+  
+  支持，详情请查看[nextjs](https://jd-opensource.github.io/micro-app/docs.html#/zh-cn/framework/nextjs)、[nuxtjs](https://jd-opensource.github.io/micro-app/docs.html#/zh-cn/framework/nuxtjs)
+</details>
+
+
+# 贡献者们
+<a href="https://github.com/jd-opensource/micro-app/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=jd-opensource/micro-app" />
+</a>
+
+
+# License
+[MIT License](https://github.com/jd-opensource/micro-app/blob/master/LICENSE)