Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the-first-extension.md #892

Merged
merged 3 commits into from
Jun 26, 2024
Merged

Update the-first-extension.md #892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3cd4045
Update the-first-extension.md
baoyachi Jun 26, 2024
337ce89
Update the-first-extension.md
baoyachi Jun 26, 2024
72f0c3c
Merge pull request #1 from baoyachi/patch-2
baoyachi Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions website/docs/the-first-extension.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ sidebar_position: 1
In Molecule, all custom functions are done using [Extension](./guides/extension). Next, let us quickly learn how to write an extended application based on the [molecule-demo][demo-url] project.

:::tip
All the codes are based on the [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo) project in [Quick Start](./quick-start).
All the codes are based on the [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/molecule-demo) project in [Quick Start](./quick-start).
:::

## A simple scene
Expand Down Expand Up @@ -94,7 +94,7 @@ export function handleSelectFolderTree() {
After fetching the data of FolderTree successfully through `API.getFolderTree` ,we use the [`molecule.folderTree.add`](./api/classes/molecule.FolderTreeService#add) method to add and display data to the [FolderTree] component; next, monitor **the selected file** through the [`molecule.folderTree.onSelectFile`](./api/classes/molecule.FolderTreeService#onselectfile) method; finally,open the file through the [`molecule.editor.open`](./api/interfaces/molecule.IEditorService#open) method.

:::caution
Pay more attention: In reality, the **data type** returned by `API.getFolderTree` is not [IFolderTreeNodeProps](./api/interfaces/molecule.model.IFolderTreeNodeProps) type, we often need to go through a **conversion** method. The mock data of the `API.getFolderTree` function in the example can be [View](https://github.com/DTStack/molecule-examples/blob/main/packages/molecule-demo/public/mock/folderTree.json). The `transformToEditorTab` in the `handleSelectFolderTree` method is a **transformation** method, which mainly converts `file` to [IEditorTab](./api/interfaces/molecule.model.IEditorTab) type.
Pay more attention: In reality, the **data type** returned by `API.getFolderTree` is not [IFolderTreeNodeProps](./api/interfaces/molecule.model.IFolderTreeNodeProps) type, we often need to go through a **conversion** method. The mock data of the `API.getFolderTree` function in the example can be [View](https://github.com/DTStack/molecule-examples/blob/main/molecule-demo/public/mock/folderTree.json). The `transformToEditorTab` in the `handleSelectFolderTree` method is a **transformation** method, which mainly converts `file` to [IEditorTab](./api/interfaces/molecule.model.IEditorTab) type.
:::

### Use extension
Expand Down Expand Up @@ -135,6 +135,6 @@ Through it, we can extend many core modules such as [**ColorTheme**](./guides/ex

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
[demo-url]: https://github.com/DTStack/molecule-examples/tree/main/molecule-demo/src/extensions/theFirstExtension
[foldertree-url]: ./guides/extend-builtin-ui#foldertree
[create-url]: ./api#create
6 changes: 3 additions & 3 deletions ...te/i18n/zh-CN/docusaurus-plugin-content-docs/version-1.x/the-first-extension.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ sidebar_position: 1
在 Molecule 中，所有的自定义的功能，都是利用[扩展（Extension）](./guides/extension)来完成的。接下来让我们基于 [molecule-demo][demo-url] 项目，快速学习一下如何编写一个扩展应用。

:::tip
本文内容中的所有代码，都以 [Quick Start](./quick-start) 中的 [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo) 项目为基础演示。
本文内容中的所有代码，都以 [Quick Start](./quick-start) 中的 [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/molecule-demo) 项目为基础演示。
:::

## 一个简单的场景
Expand Down Expand Up @@ -93,7 +93,7 @@ export function handleSelectFolderTree() {
在`API.getFolderTree` 方法获取文件树数据成功后，我们通过 [`molecule.folderTree.add`](./api/classes/molecule.FolderTreeService#add) 方法，将数据添加并展示到 [FolderTree](./api/classes/molecule.FolderTreeService) 组件中；通过 [`molecule.folderTree.onSelectFile`](./api/classes/molecule.FolderTreeService#onselectfile) 方法监听**选中文件**；最后通过 [`molecule.editor.open`](./api/interfaces/molecule.IEditorService#open) 方法打开文件。

:::caution
需要注意的是，在现实情况中，`API.getFolderTree` 返回的**数据类型**并不是 [IFolderTreeNodeProps](./api/interfaces/molecule.model.IFolderTreeNodeProps) 类型，我们往往需要经过一个**转换**方法。示例中 `API.getFolderTree` 函数的 Mock 数据可以[查看](https://github.com/DTStack/molecule-examples/blob/main/packages/molecule-demo/public/mock/folderTree.json)。`handleSelectFolderTree` 方法中的 `transformToEditorTab` 为一个**转换**方法，主要是将`file`转换为[IEditorTab](./api/interfaces/molecule.model.IEditorTab) 类型。
需要注意的是，在现实情况中，`API.getFolderTree` 返回的**数据类型**并不是 [IFolderTreeNodeProps](./api/interfaces/molecule.model.IFolderTreeNodeProps) 类型，我们往往需要经过一个**转换**方法。示例中 `API.getFolderTree` 函数的 Mock 数据可以[查看](https://github.com/DTStack/molecule-examples/blob/main/molecule-demo/public/mock/folderTree.json)。`handleSelectFolderTree` 方法中的 `transformToEditorTab` 为一个**转换**方法，主要是将`file`转换为[IEditorTab](./api/interfaces/molecule.model.IEditorTab) 类型。
:::

### 使用扩展
Expand Down Expand Up @@ -133,6 +133,6 @@ const moInstance = create({

**第一个扩展**的完整源码，请[浏览][demo-url]。

[demo-url]: https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo/src/extensions/theFirstExtension
[demo-url]: https://github.com/DTStack/molecule-examples/tree/main/molecule-demo/src/extensions/theFirstExtension
[foldertree-url]: ./guides/extend-builtin-ui#文件树foldertree
[create-url]: ./api#create