📝 update docs (#1010)
This commit is contained in:
Kuitos
GitHub
parent
08c0202a8e
commit
7deb05cae2
|
|
@ -140,7 +140,7 @@ By linking the micro-application to some url rules, the function of automaticall
|
|||
|
||||
And qiankun offered an experimental way to support css isolation, when experimentalStyleIsolation is set to true, qiankun will limit their scope of influence by add selector constraint, thereforce styles of sub-app will like following case:
|
||||
|
||||
```javascript
|
||||
```css
|
||||
// if app name is react16
|
||||
.app-main {
|
||||
font-size: 14px;
|
||||
|
|
@ -153,7 +153,6 @@ By linking the micro-application to some url rules, the function of automaticall
|
|||
|
||||
notice:
|
||||
@keyframes, @font-face, @import, @page are not supported (i.e. will not be rewritten)
|
||||
P.S: In current stage, we're not support the case: Inserting external styles by `<link>` yet, we're consider add this part in the future.
|
||||
|
||||
- singular - `boolean | ((app: RegistrableApp<any>) => Promise<boolean>);` - Optional, whether it is a singleton scenario, singleton means just rendered one micro app at one time. default is `true`.
|
||||
|
||||
|
|
@ -234,20 +233,36 @@ A criterion for judging whether the business is closely related: <strong>Look at
|
|||
|
||||
* configuration - `Configuration` - Optional, configuration information of the micro application
|
||||
|
||||
* sandbox - `boolean` | `{ strictStyleIsolation?: boolean }` - Optional, whether to enable the sandbox, the default is `true`.
|
||||
* sandbox - `boolean` | `{ strictStyleIsolation?: boolean, experimentalStyleIsolation?: boolean }` - optional, whether to open the js sandbox, default is `true`.
|
||||
|
||||
When configured as `{strictStyleIsolation: true}`, it means that strict style isolation mode is enabled. In this mode, qiankun will wrap a [shadow dom](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM) node for each micro-application container, so as to ensure that the style of the micro application will not affect the whole world.
|
||||
When configured as `{strictStyleIsolation: true}`, qiankun will convert the container dom of each application to a [shadow dom](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), to ensure that the style of the application will not leak to the global.
|
||||
|
||||
And qiankun offered an experimental way to support css isolation, when experimentalStyleIsolation is set to true, qiankun will limit their scope of influence by add selector constraint, thereforce styles of sub-app will like following case:
|
||||
|
||||
```css
|
||||
// if app name is react16
|
||||
.app-main {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
div[data-qiankun-react16] .app-main {
|
||||
font-size: 14px;
|
||||
}
|
||||
```
|
||||
|
||||
notice:
|
||||
@keyframes, @font-face, @import, @page are not supported (i.e. will not be rewritten)
|
||||
|
||||
* singular - `boolean | ((app: RegistrableApp<any>) => Promise<boolean>);` - Optional, whether it is a singleton scenario, singleton means just rendered one micro app at one time. Default is `false`.
|
||||
|
||||
|
||||
* fetch - `Function` - Optional, custom fetch method.
|
||||
|
||||
|
||||
* getPublicPath - `(url: string) => string` - Optional，The parameter is the entry value of the micro application.
|
||||
|
||||
|
||||
* getTemplate - `(tpl: string) => string` - Optional
|
||||
|
||||
* excludeAssetFilter - `(assetUrl: string) => boolean` - optional，some special dynamic loaded micro app resources should not be handled by qiankun hijacking
|
||||
|
||||
|
||||
* 返回值 - `MicroApp` - Micro application examples
|
||||
* mount(): Promise<null>;
|
||||
* unmount(): Promise<null>;
|
||||
|
|
|
|||
|
|
@ -157,7 +157,6 @@ toc: menu
|
|||
|
||||
注意:
|
||||
@keyframes, @font-face, @import, @page 将不被支持 (i.e. 不会被改写)
|
||||
P.S: 在目前的阶段，该功能还不支持动态的、使用 `<link />`标签来插入外联的样式，但考虑在未来支持这部分场景。
|
||||
|
||||
- singular - `boolean | ((app: RegistrableApp<any>) => Promise<boolean>);` - 可选，是否为单实例场景，单实例指的是同一时间只会渲染一个微应用。默认为 `true`。
|
||||
|
||||
|
|
@ -262,8 +261,6 @@ toc: menu
|
|||
注意事项:
|
||||
目前 @keyframes, @font-face, @import, @page 等规则不会支持 (i.e. 不会被改写)
|
||||
|
||||
在目前阶段, 我们还不支持以动态的外联形式 (`<link />`) 形式加入的样式，但我们考虑将来支持这一部分。
|
||||
|
||||
* singular - `boolean | ((app: RegistrableApp<any>) => Promise<boolean>);` - 可选，是否为单实例场景，单实例指的是同一时间只会渲染一个微应用。默认为 `false`。
|
||||
|
||||
* fetch - `Function` - 可选，自定义的 fetch 方法。
|
||||
|
|
|
|||
|
|
@ -368,6 +368,11 @@ Example for antd：
|
|||
|
||||
Detailed documentation pls check [antd official guide](https://ant.design/docs/react/customize-theme).
|
||||
|
||||
<Alert type="info">
|
||||
In the latest version, you can also try to config ` {scope: {experimentalStyleIsolation: true}} ` to open the runtime scoped CSS feature, thus solving the problem of the style of the isolation between applications.
|
||||
PS: Currently, this feature is still in the experimental stage, if encounter some problems please submit an [issue](https://github.com/umijs/qiankun/issues/new?assignees=&labels=&template=bug_report.md&title=) to help us improve together.
|
||||
</Alert>
|
||||
|
||||
## How to make sub app to run independently?
|
||||
|
||||
Use the builtin global variable to identify the environment which provided by qiankun master:
|
||||
|
|
|
|||
|
|
@ -435,6 +435,11 @@ qiankun 将会自动隔离微应用之间的样式（开启沙箱的情况下）
|
|||
|
||||
详细文档参考 [antd 官方指南](https://ant.design/docs/react/customize-theme)。
|
||||
|
||||
<Alert type="info">
|
||||
在最新的 qiankun 版本中，你也可以尝试通过配置 `{ scope: { experimentalStyleIsolation: true } }` 的方式开启运行时的 scoped css 功能，从而解决应用间的样式隔离问题。
|
||||
PS：目前该特性还处于实验阶段，如果碰到一些问题欢迎提 [issue](https://github.com/umijs/qiankun/issues/new?assignees=&labels=&template=bug_report_cn.md&title=%5BBug%5D%E8%AF%B7%E9%81%B5%E5%BE%AA%E4%B8%8B%E6%96%87%E6%A8%A1%E6%9D%BF%E6%8F%90%E4%BA%A4%E9%97%AE%E9%A2%98%EF%BC%8C%E5%90%A6%E5%88%99%E6%82%A8%E7%9A%84%E9%97%AE%E9%A2%98%E4%BC%9A%E8%A2%AB%E5%85%B3%E9%97%AD) 来帮助我们一起改善。
|
||||
</Alert>
|
||||
|
||||
## 如何独立运行微应用？
|
||||
|
||||
有些时候我们希望直接启动微应用从而更方便的开发调试，你可以使用这个全局变量来区分当前是否运行在 qiankun 的主应用的上下文中：
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ Sub applications do not need to install any additional dependencies to integrate
|
|||
|
||||
The child application needs to export `bootstrap`,`mount`, `unmount` three lifecycle hooks in its own entry js (usually the entry js of webpack you configure) for the main application to call at the appropriate time.
|
||||
|
||||
```ts
|
||||
```jsx
|
||||
/**
|
||||
* The bootstrap will only be called once when the child application is initialized.
|
||||
* The next time the child application re-enters, the mount hook will be called directly, and bootstrap will not be triggered repeatedly.
|
||||
|
|
@ -58,16 +58,22 @@ export async function bootstrap() {
|
|||
* usually we trigger the application's rendering method here.
|
||||
*/
|
||||
export async function mount(props) {
|
||||
console.log(props);
|
||||
ReactDOM.render(<App />, document.getElementById('react15Root'));
|
||||
ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Methods that are called each time the application is switched/unloaded,
|
||||
* usually in this case we uninstall the application instance of the subapplication.
|
||||
*/
|
||||
export async function unmount() {
|
||||
ReactDOM.unmountComponentAtNode(document.getElementById('react15Root'));
|
||||
export async function unmount(props) {
|
||||
ReactDOM.unmountComponentAtNode(props.container ? props.container.querySelector('#root') : document.getElementById('root'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Optional lifecycle，just available with loadMicroApp way
|
||||
*/
|
||||
export async function update(props) {
|
||||
console.log('update props', props);
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ loadMicroApp(
|
|||
|
||||
微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 `bootstrap`、`mount`、`unmount` 三个生命周期钩子，以供主应用在适当的时机调用。
|
||||
|
||||
```ts
|
||||
```jsx
|
||||
/**
|
||||
* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
|
||||
* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
|
||||
|
|
@ -70,15 +70,14 @@ export async function bootstrap() {
|
|||
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
|
||||
*/
|
||||
export async function mount(props) {
|
||||
console.log(props);
|
||||
ReactDOM.render(<App />, document.getElementById('react15Root'));
|
||||
ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
|
||||
}
|
||||
|
||||
/**
|
||||
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
|
||||
*/
|
||||
export async function unmount() {
|
||||
ReactDOM.unmountComponentAtNode(document.getElementById('react15Root'));
|
||||
export async function unmount(props) {
|
||||
ReactDOM.unmountComponentAtNode(props.container ? props.container.querySelector('#root') : document.getElementById('root'));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user