qiankun-rewrite

针对 qiankun 关于 Element, Document 原型链上部分方法打上补丁，从而满足元素隔离的需求。

🤔 Motivation

当使用 qiankun 中loadMicroApp方法加载两个相同子应用时，其中会产生样式冲突、选择器冲突，由于 sandbox 中开启strictStyleIsolation模式会导致兼容性问题，进而选择了experimentalStyleIsolation模式来解决样式冲突的问题。

而开启该模式会导致类似 antd 中 Modal 框样式丢失的问题

因此萌发了代理 Document\Element 原型链上的的方法，使得子应用操作元素的范围在缩小在其容器内，以下该项目的修改点，可以让你清楚评估风险：

👀 Change Points

• 📍 基础版本：[email protected]版本拓展。
• 新增：<qiankun-body>{template}</qiankun-body>容器。
• 新增：appInstanceMap用于存储 app 实例信息（最外层容器节点）。
• 注入：document, document.body, document.head打上标记（用于判断是否需要执行 patch）
• 补丁：Document\Element 原型链上的方法

| Document | Element | | -------------------------- | ---------------------- | | getElementById | querySelector | | getElementsByName | querySelectorAll | | getElementsByClassName | getElementsByClassName | | getElementsByTagName | getElementsByTagName | | querySelector | appendChild | | querySelectorAll | append | | createElement | prepend | | createElementNS | insertBefore | | rawDocumentCreateElementNS | cloneNode | | | removeChild | | | replaceChild |

📦 Installation

$ yarn add qiankun-rewrite  # or npm i qiankun-rewrite -S

📖 TODO

• [x] 元素隔离
• [ ] 路由响应隔离（doing）
• [ ] history 隔离

💿 SelfTest

Inside the examples folder, there is a sample Shell app and multiple mounted Micro FE apps. To get it running, first clone qiankun:

$ git clone https://github.com/umijs/qiankun.git
$ cd qiankun

Now install and run the example:

$ yarn install
$ yarn examples:install
$ yarn examples:start

Visit http://localhost:3000.

🎁 Acknowledgements

• MicroApp inspired by DOM sandbox!