docs: update docs

README-koKR.md

@@ -50,14 +50,14 @@ yarn add @dtinsight/molecule
 ```javascript
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
+import { create, Workbench } from '@dtinsight/molecule';
 import '@dtinsight/molecule/esm/style/mo.css';
 
-const App = () => (
-    <MoleculeProvider extensions={[]}>
-        <Workbench />
-    </MoleculeProvider>
-);
+const moInstance = create({
+    extensions: [],
+});
+
+const App = () => moInstance.render(<Workbench />);
 
 ReactDOM.render(<App />, document.getElementById('root'));
 ```

README-zhCN.md

@@ -49,14 +49,14 @@ yarn add @dtinsight/molecule
 ```javascript
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
+import { create, Workbench } from '@dtinsight/molecule';
 import '@dtinsight/molecule/esm/style/mo.css';
 
-const App = () => (
-    <MoleculeProvider extension={[]}>
-        <Workbench />
-    </MoleculeProvider>
-);
+const moInstance = create({
+    extensions: [],
+});
+
+const App = () => moInstance.render(<Workbench />);
 
 ReactDOM.render(<App />, document.getElementById('root'));
 ```

README.md

@@ -49,14 +49,14 @@ yarn add @dtinsight/molecule
 ```javascript
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
+import { create, Workbench } from '@dtinsight/molecule';
 import '@dtinsight/molecule/esm/style/mo.css';
 
-const App = () => (
-    <MoleculeProvider extensions={[]}>
-        <Workbench />
-    </MoleculeProvider>
-);
+const moInstance = create({
+    extensions: [],
+});
+
+const App = () => moInstance.render(<Workbench />);
 
 ReactDOM.render(<App />, document.getElementById('root'));
 ```

website/docs/guides/extend-color-theme.md

@@ -93,13 +93,9 @@ Finally, we add the extension package in `App.js`
 ```js title="src/App.js"
 import { OneDarkPro } from './extensions/OneDark-Pro';
 
-function App() {
-    return (
-        <MoleculeProvider extensions={[OneDarkPro]}>
-            <Workbench />
-        </MoleculeProvider>
-    );
-}
+const moInstance = create({
+    extensions: [OneDarkPro],
+});
 ```
 
 We can use the shortcut key `Command/Ctrl + K` to quickly access the **Color Theme Panel**.
@@ -215,19 +211,15 @@ export { MyTheme };
 
 ### Apply color theme extension
 
-Similarly, custom theme extensions are also need to be introduced in the [MoleculeProvider](../api/classes/MoleculeProvider) component in `App.js`:
+Similarly, custom theme extensions are also need to be introduced in the params of [create](../api#create) component in `App.js`:
 
 ```js title="src/App.js"
 import { OneDarkPro } from './extensions/OneDark-Pro';
 import { MyTheme } from './extensions/MyTheme';
 
-function App() {
-    return (
-        <MoleculeProvider extensions={[OneDarkPro, MyTheme]}>
-            <Workbench />
-        </MoleculeProvider>
-    );
-}
+const moInstance = create({
+    extensions: [OneDarkPro, MyTheme],
+});
 ```
 
 Open **the color theme quick access panel**, we should be able to see the theme of `My Theme`. After selecting this theme, the **background color** of the [StatusBar](extend-workbench#statusbar) at the bottom changes to red.

website/docs/guides/extension.md

@@ -66,33 +66,30 @@ In some cases, you may want to **disable** some built-in extensions in Molecule.
 
 ```ts
 import React from 'react';
-import molecule from '@dtinsight/molecule';
-import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
+import molecule, { create, Workbench } from '@dtinsight/molecule';
 import '@dtinsight/molecule/esm/style/mo.css';
 
 // All Extension instances
 import extensions from './extensions';
 
-molecule.extension.inactive((extension: IExtension) => {
-    // Inactive the Extension which id is ExampleExt
-    if (extension.id === 'ExampleExt') {
-        return true;
-    }
+const moInstance = create({
+    extensions,
 });
 
-function App() {
-    return (
-        <MoleculeProvider extensions={extensions}>
-            <Workbench />
-        </MoleculeProvider>
-    );
-}
+moInstance.onBeforeLoad(() => {
+    molecule.extension.inactive((ext) => {
+        // Inactive the Extension which id is ExampleExt
+        return extension.id === 'ExampleExt';
+    });
+});
+
+const App = () => moInstance.render(<Workbench />);
 
 export default App;
 ```
 
 :::caution
-It should be noted that the [inactive][inactive-url] method needs to be declared before [MoleculeProvider](../api/classes/MoleculeProvider).
+It should be noted that the [inactive][inactive-url] method needs to be declared after [create](../api#create).
 :::
 
 [inactive-url]: ../api/interfaces/molecule.IExtensionService#inactive

website/docs/introduction.md

@@ -52,14 +52,14 @@ yarn add @dtinsight/molecule
 ```javascript
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
+import { create, Workbench } from '@dtinsight/molecule';
 import '@dtinsight/molecule/esm/style/mo.css';
 
-const App = () => (
-    <MoleculeProvider extensions={[]}>
-        <Workbench />
-    </MoleculeProvider>
-);
+const moInstance = create({
+    extensions: [],
+});
+
+const App = () => moInstance.render(<Workbench />);
 
 ReactDOM.render(<App />, document.getElementById('root'));
 ```

website/docs/quick-start.md

@@ -47,16 +47,14 @@ Open the `src/App.js` file and replace the contents of the file with the followi
 
 ```js title="src/App.js"
 import React from 'react';
-import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
+import { create, Workbench } from '@dtinsight/molecule';
 import '@dtinsight/molecule/esm/style/mo.css';
 
-function App() {
-    return (
-        <MoleculeProvider extensions={[]}>
-            <Workbench />
-        </MoleculeProvider>
-    );
-}
+const moInstance = create({
+    extensions: [],
+});
+
+const App = () => moInstance.render(<Workbench />);
 
 export default App;
 ```

website/docs/the-first-extension.md

@@ -99,7 +99,7 @@ Pay more attention: In reality, the **data type** returned by `API.getFolderTree
 
 ### Use extension
 
-After defining class `FirstExtension`, it is used with [MoleculeProvider][provider-url]. Here we export all **extension objects** that need to be loaded in `extensions/index.ts` by default:
+After defining class `FirstExtension`, it is used with [create][create-url]. Here we export all **extension objects** that need to be loaded in `extensions/index.ts` by default:
 
 ```ts title="/src/extensions/index.ts"
 import { IExtension } from '@dtinsight/molecule/esm/model';
@@ -115,12 +115,12 @@ Import the `FirstExtension` object and instantiate it, and finally use `extensio
 ```tsx title="/src/app.tsx"
 import extensions from './extensions';
 
-<MoleculeProvider extensions={extensions}>
-    <Workbench />
-</MoleculeProvider>;
+const moInstance = create({
+    extensions,
+});
 ```
 
-Finally, introduce `extensions` and pass in the `extensions` property of [MoleculeProvider][provider-url].
+Finally, introduce `extensions` and pass in the `extensions` property of [create][create-url].
 
 :::info
 The above example is just a very simple application scenario. If you want to achieve a richer extension to [Workbench](/guides/extend-workbench.md), you can refer to [Workbench Extension Guide](./guides/extend-workbench.md) ).
@@ -137,4 +137,4 @@ Please [view][demo-url] the complete source code of **First Extension**
 
 [demo-url]: https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo/src/extensions/theFirstExtension
 [foldertree-url]: ./guides/extend-builtin-ui#foldertree
-[provider-url]: ./api/classes/MoleculeProvider
+[create-url]: ./api#create

website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extend-color-theme.md

@@ -93,13 +93,11 @@ export { OneDarkPro };
 ```js title="src/App.js"
 import { OneDarkPro } from './extensions/OneDark-Pro';
 
-function App() {
-    return (
-        <MoleculeProvider extensions={[OneDarkPro]}>
-            <Workbench />
-        </MoleculeProvider>
-    );
-}
+const moInstance = create({
+    extensions: [OneDarkPro],
+});
+
+const App = () => moInstance.render(<Workbench />);
 ```
 
 我们可以通过快捷键 `Command/Ctrl + K` 快速访问**「颜色主题面板」**。
@@ -216,19 +214,17 @@ export { MyTheme };
 
 ### 应用颜色主题扩展
 
-同样, 自定义的主题扩展程序也是在 `App.js` 中的 [MoleculeProvider](../api/classes/MoleculeProvider) 组件中引入：
+同样, 自定义的主题扩展程序也是在 `App.js` 中的 [create](../api#create) 方法中传入：
 
 ```js title="src/App.js"
 import { OneDarkPro } from './extensions/OneDark-Pro';
 import { MyTheme } from './extensions/MyTheme';
 
-function App() {
-    return (
-        <MoleculeProvider extensions={[OneDarkPro, MyTheme]}>
-            <Workbench />
-        </MoleculeProvider>
-    );
-}
+const moInstance = create({
+    extensions: [OneDarkPro, MyTheme],
+});
+
+const App = () => moInstance.render(<Workbench />);
 ```
 
 打开在**颜色主题快速访问面板**，我们应该就能看到 `My Theme` 的主题了。选择该主题后，底部 [StatusBar](extend-workbench#状态栏statusbar) 的**背景颜色**即变成了红色。

website/i18n/zh-CN/docusaurus-plugin-content-docs/current/guides/extension.md

@@ -67,32 +67,30 @@ molecule.extension.getExtension(extensionId);
 ```ts
 import React from 'react';
 import molecule from '@dtinsight/molecule';
-import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
+import { create, Workbench } from '@dtinsight/molecule';
 import '@dtinsight/molecule/esm/style/mo.css';
 
 // All Extension instances
 import extensions from './extensions';
 
-molecule.extension.inactive((extension: IExtension) => {
-    // Inactive the Extension which id is ExampleExt
-    if (extension.id === 'ExampleExt') {
-        return true;
-    }
+const moInstance = create({
+    extensions,
 });
 
-function App() {
-    return (
-        <MoleculeProvider extensions={extensions}>
-            <Workbench />
-        </MoleculeProvider>
-    );
-}
+moInstance.onBeforeLoad(() => {
+    molecule.extension.inactive((ext) => {
+        // Inactive the Extension which id is ExampleExt
+        return extension.id === 'ExampleExt';
+    });
+});
+
+const App = () => moInstance.render(<Workbench />);
 
 export default App;
 ```
 
 :::caution
-需要注意到是，[inactive][inactive-url] 方法，需要在 [MoleculeProvider](../api/classes/MoleculeProvider) 之前声明
+需要注意到是，[inactive][inactive-url] 方法，需要在 [create](../api#create) 导出的生命周期 onBeforeLoad 中使用。
 :::
 
 [inactive-url]: ../api/interfaces/molecule.IExtensionService#inactive

website/i18n/zh-CN/docusaurus-plugin-content-docs/current/introduction.md

@@ -52,14 +52,14 @@ yarn add @dtinsight/molecule
 ```javascript
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
+import { create, Workbench } from '@dtinsight/molecule';
 import '@dtinsight/molecule/esm/style/mo.css';
 
-const App = () => (
-    <MoleculeProvider extensions={[]}>
-        <Workbench />
-    </MoleculeProvider>
-);
+const moInstance = create({
+    extensions: [],
+});
+
+const App = () => moInstance.render(<Workbench />);
 
 ReactDOM.render(<App />, document.getElementById('root'));
 ```

website/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-start.md

@@ -47,16 +47,14 @@ npm install @dtinsight/molecule
 
 ```js title="src/App.js"
 import React from 'react';
-import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
+import { create, Workbench } from '@dtinsight/molecule';
 import '@dtinsight/molecule/esm/style/mo.css';
 
-function App() {
-    return (
-        <MoleculeProvider extensions={[]}>
-            <Workbench />
-        </MoleculeProvider>
-    );
-}
+const moInstance = create({
+    extensions: [],
+});
+
+const App = () => moInstance.render(<Workbench />);
 
 export default App;
 ```

website/i18n/zh-CN/docusaurus-plugin-content-docs/current/the-first-extension.md

@@ -98,7 +98,7 @@ export function handleSelectFolderTree() {
 
 ### 使用扩展
 
-定义好的 `FirstExtension` 对象，最后需要配合 [MoleculeProvider][provider-url] 来使用。这里我们默认在 `extensions/index.ts` 中导出所有需要加载的**扩展对象**：
+定义好的 `FirstExtension` 对象，最后需要配合 [create][create-url] 来使用。这里我们默认在 `extensions/index.ts` 中导出所有需要加载的**扩展对象**：
 
 ```ts title="/src/extensions/index.ts"
 import { IExtension } from '@dtinsight/molecule/esm/model';
@@ -109,17 +109,17 @@ const extensions: IExtension[] = [new FirstExtension()];
 export default extensions;
 ```
 
-导入 `FirstExtension` 对象并将其实例化，最后使用 `extensions` 导出所有**扩展对象实例**。
+导入 `FirstExtension` 对象并将其实例化，最后使用 `create` 传入所有**扩展对象实例**。
 
 ```tsx title="/src/app.tsx"
 import extensions from './extensions';
 
-<MoleculeProvider extensions={extensions}>
-    <Workbench />
-</MoleculeProvider>;
+const moInstance = create({
+    extensions,
+});
 ```
 
-最后，引入 `extensions` 并传入 [MoleculeProvider][provider-url] 的 `extensions` 属性。
+最后，引入 `extensions` 并传入 [create][create-url] 的 `extensions` 参数。
 
 :::info
 上例只是一个很简单的应用场景，想要实现对 [Workbench](/guides/extend-workbench.md) 更丰富的扩展，可以参考 [工作台扩展指南](./guides/extend-workbench.md)。
@@ -135,4 +135,4 @@ import extensions from './extensions';
 
 [demo-url]: https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo/src/extensions/theFirstExtension
 [foldertree-url]: ./guides/extend-builtin-ui#文件树foldertree
-[provider-url]: ./api/classes/MoleculeProvider
+[create-url]: ./api#create