diff --git a/.github/workflows/test-deploy.yml b/.github/workflows/test-deploy.yml
index 63fe583d2..82b33bb71 100644
--- a/.github/workflows/test-deploy.yml
+++ b/.github/workflows/test-deploy.yml
@@ -13,7 +13,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
- node-version: 14.x
+ node-version: 16.x
cache: yarn
cache-dependency-path: website/yarn.lock
- name: Install dependencies
diff --git a/.prettierignore b/.prettierignore
index 0e2030d0b..3a899fb39 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -11,3 +11,4 @@ website/build
website/docs/api
website/.docusaurus
website/node_modules
+lib
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9096e512e..800b1d45d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+### [1.1.1](https://github.com/DTStack/molecule/compare/v1.1.0...v1.1.1) (2022-08-31)
+
+### Bug Fixes
+
+- prevent call loadData when editing ([#789](https://github.com/DTStack/molecule/issues/789)) ([80d99bc](https://github.com/DTStack/molecule/commit/80d99bcfed349a27345ac602a0f373f3c004f856))
+- remove findDOMNode usage ([#790](https://github.com/DTStack/molecule/issues/790)) ([289288b](https://github.com/DTStack/molecule/commit/289288b83fccec277215152ca912c74ea170d542))
+- remove useless generic type ([bee51e2](https://github.com/DTStack/molecule/commit/bee51e2b46a942442195999c2b4eea58567003de))
+
## [1.1.0](https://github.com/DTStack/molecule/compare/v1.0.2...v1.1.0) (2022-07-15)
### Features
diff --git a/MIGRATION.md b/MIGRATION.md
new file mode 100644
index 000000000..469e7fe94
--- /dev/null
+++ b/MIGRATION.md
@@ -0,0 +1,10 @@
+Migration
+
+- [From version 1.0.x to 1.1.0](#from-version-10x-to-110)
+ - [React18 upgrade](#react18-upgrade)
+
+## From version 1.0.x to 1.1.0
+
+### React18 upgrade
+
+React 18 introduced a [new root API](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis). Starting from 1.1.0, Molecule itself will auto-detect your version of react and use the new root API automatically if you're on React18. But It's attentioned that there are several dependencies of Molecule still incompatible of React18's strict mode. So Molecule now still not compatible with `React.StrictMode` in React@18.x. For exmaple: [react-scrollbars-custom](https://github.com/xobotyi/react-scrollbars-custom/issues/234).
diff --git a/README-koKR.md b/README-koKR.md
index 748947ceb..b5975ddcc 100644
--- a/README-koKR.md
+++ b/README-koKR.md
@@ -4,7 +4,7 @@
Molecule
경량 웹 IDE UI 프레임워크
-[![CI][ci-image]][ci-url] [![Codecov][codecov-image]][codecov-url] [![NPM downloads][download-img]][download-url] [![NPM version][npm-version]][npm-version-url] [![Chat][online-chat-img]][online-chat-url]
+[![CI][ci-image]][ci-url] [![CII Best Practices][cii-img]][cii-url] [![Codecov][codecov-image]][codecov-url] [![NPM downloads][download-img]][download-url] [![NPM version][npm-version]][npm-version-url] [![Chat][online-chat-img]][online-chat-url]
@@ -18,6 +18,8 @@
[npm-version-url]: https://www.npmjs.com/package/@dtinsight/molecule
[online-chat-img]: https://img.shields.io/discord/920616811261743104?logo=Molecule
[online-chat-url]: https://discord.com/invite/b62gpHwNA7
+[cii-img]: https://bestpractices.coreinfrastructure.org/projects/6307/badge
+[cii-url]: https://bestpractices.coreinfrastructure.org/projects/6307
[中文](./README-zhCN.md) | [English](./README.md) | [한국어](./README-koKR.md)
diff --git a/README-zhCN.md b/README-zhCN.md
index 6f8b11f76..5f82d8dc6 100644
--- a/README-zhCN.md
+++ b/README-zhCN.md
@@ -4,7 +4,7 @@
Molecule
一个轻量的 Web IDE UI 框架
-[![CI][ci-image]][ci-url] [![Codecov][codecov-image]][codecov-url] [![NPM downloads][download-img]][download-url] [![NPM version][npm-version]][npm-version-url] [![Chat][online-chat-img]][online-chat-url]
+[![CI][ci-image]][ci-url] [![CII Best Practices][cii-img]][cii-url] [![Codecov][codecov-image]][codecov-url] [![NPM downloads][download-img]][download-url] [![NPM version][npm-version]][npm-version-url] [![Chat][online-chat-img]][online-chat-url]
@@ -18,6 +18,8 @@
[npm-version-url]: https://www.npmjs.com/package/@dtinsight/molecule
[online-chat-img]: https://img.shields.io/discord/920616811261743104?logo=Molecule
[online-chat-url]: https://discord.com/invite/b62gpHwNA7
+[cii-img]: https://bestpractices.coreinfrastructure.org/projects/6307/badge
+[cii-url]: https://bestpractices.coreinfrastructure.org/projects/6307
[中文](./README-zhCN.md) | [English](./README.md) | [한국어](./README-koKR.md)
diff --git a/README.md b/README.md
index 89ef42ff0..abf9691cc 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
Molecule
A lightweight Web IDE UI Framework
-[![CI][ci-image]][ci-url] [![Codecov][codecov-image]][codecov-url] [![NPM downloads][download-img]][download-url] [![NPM version][npm-version]][npm-version-url] [![Chat][online-chat-img]][online-chat-url]
+[![CI][ci-image]][ci-url] [![CII Best Practices][cii-img]][cii-url] [![Codecov][codecov-image]][codecov-url] [![NPM downloads][download-img]][download-url] [![NPM version][npm-version]][npm-version-url] [![Chat][online-chat-img]][online-chat-url]
@@ -18,6 +18,8 @@
[npm-version-url]: https://www.npmjs.com/package/@dtinsight/molecule
[online-chat-img]: https://img.shields.io/discord/920616811261743104?logo=Molecule
[online-chat-url]: https://discord.com/invite/b62gpHwNA7
+[cii-img]: https://bestpractices.coreinfrastructure.org/projects/6307/badge
+[cii-url]: https://bestpractices.coreinfrastructure.org/projects/6307
[中文](./README-zhCN.md) | [English](./README.md) | [한국어](./README-koKR.md)
diff --git a/package.json b/package.json
index b74e9f977..85bd42259 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@dtinsight/molecule",
- "version": "1.1.0",
+ "version": "1.1.1",
"description": "A Web IDE UI Framework built with React.js, inspired by VSCode.",
"module": "./esm/index.js",
"typings": "./esm/index.d.ts",
diff --git a/src/common/css.ts b/src/common/css.ts
index 5ec52cea1..d7874c3f2 100644
--- a/src/common/css.ts
+++ b/src/common/css.ts
@@ -1,7 +1,6 @@
/**
* px = em * parentElementFontSize
* @param em em value
- * TODO: Use Template Literal Types replace fontSize typing
*/
export function em2Px(em: number, fontSize: number): number {
return em * fontSize;
diff --git a/src/components/dialog/confirm.tsx b/src/components/dialog/confirm.tsx
index 6fbbf0f3e..5a4757ca5 100644
--- a/src/components/dialog/confirm.tsx
+++ b/src/components/dialog/confirm.tsx
@@ -44,19 +44,14 @@ export default function confirm(config: IModalFuncProps) {
}
function render({ okText, cancelText, ...props }: any) {
- /**
- * TODO: Please determine if this really needs to be a macro task
- */
- setTimeout(() => {
- renderUtils(
- ,
- div
- );
- });
+ renderUtils(
+ ,
+ div
+ );
}
function close(...args: any[]) {
diff --git a/src/components/dialog/style.scss b/src/components/dialog/style.scss
index be1637963..0b2502087 100644
--- a/src/components/dialog/style.scss
+++ b/src/components/dialog/style.scss
@@ -15,7 +15,6 @@
user-select: none;
width: auto;
- // TODO rc-dialog提pr解决
&-mask {
background-color: var(--widgetShadow);
bottom: 0;
diff --git a/src/components/tabs/index.tsx b/src/components/tabs/index.tsx
index 805f77874..7e5c09e0a 100644
--- a/src/components/tabs/index.tsx
+++ b/src/components/tabs/index.tsx
@@ -17,9 +17,9 @@ import type { UniqueId } from 'mo/common/types';
export type TabsType = 'line' | 'card';
/**
- * TODO: Get rid of the generic and remove the ComponentProps
+ * TODO: Get rid of the ComponentProps in next version
*/
-export interface ITabsProps extends React.ComponentProps {
+export interface ITabsProps extends React.ComponentProps {
className?: string;
style?: React.CSSProperties;
role?: string;
diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx
index 8ac62ef04..dbe05b3d1 100644
--- a/src/components/tabs/tab.tsx
+++ b/src/components/tabs/tab.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { useRef } from 'react';
-import { findDOMNode } from 'react-dom';
import { useDrag, useDrop } from 'react-dnd';
import { IEditorGroup } from 'mo/model';
@@ -95,14 +94,7 @@ export function Tab({ tab, active, ...restEvents }: ITabComponent) {
hover(item: ITabProps, monitor) {
if (!ref.current) return;
const component = ref.current;
- /**
- * TODO: bad code needs to be removed
- */
- /* eslint-disable */
- const hoverBoundingRect = (
- findDOMNode(component) as Element
- )?.getBoundingClientRect();
- /* eslint-enable */
+ const hoverBoundingRect = component?.getBoundingClientRect();
const hoverMiddleX =
(hoverBoundingRect.right - hoverBoundingRect.left) / 2;
const clientOffset = monitor.getClientOffset();
diff --git a/src/controller/menuBar.ts b/src/controller/menuBar.ts
index dfe9f6192..f0016ee36 100644
--- a/src/controller/menuBar.ts
+++ b/src/controller/menuBar.ts
@@ -121,11 +121,6 @@ export class MenuBarController
public readonly onClick = (event: React.MouseEvent, item: IMenuBarItem) => {
const menuId = item.id || '';
- /**
- * TODO: Two issues remain to be addressed
- * 1、the default event is executed twice
- * 2、we have no way of knowing whether user-defined events are executed internally
- */
this.emit(MenuBarEvent.onSelect, menuId);
this._automation[menuId]?.();
diff --git a/src/model/workbench/editor.ts b/src/model/workbench/editor.ts
index ab5a29c54..ec7c875a3 100644
--- a/src/model/workbench/editor.ts
+++ b/src/model/workbench/editor.ts
@@ -45,7 +45,7 @@ export interface IEditorAction {
actions?: IEditorActionsProps[];
menu?: IMenuItemProps[];
}
-export interface IEditorGroup extends ITabsProps {
+export interface IEditorGroup extends ITabsProps {
id: UniqueId;
/**
* Current editor group tab
diff --git a/src/workbench/sidebar/__tests__/folderTree.test.tsx b/src/workbench/sidebar/__tests__/folderTree.test.tsx
index 8746113c8..1b0efb85b 100644
--- a/src/workbench/sidebar/__tests__/folderTree.test.tsx
+++ b/src/workbench/sidebar/__tests__/folderTree.test.tsx
@@ -148,6 +148,24 @@ describe('The FolderTree Component', () => {
).toContain(folderTreeEditClassName);
});
+ test('Should NOT call loadData in editing', () => {
+ const mockFn = jest.fn(() => Promise.resolve());
+ const { getByRole } = render(
+
+ );
+
+ const input = getByRole('input') as HTMLInputElement;
+ expect(input).toBeInTheDocument();
+
+ fireEvent.click(input);
+ expect(mockFn).not.toBeCalled();
+ });
+
test('Should support to update file name via blur or keypress', () => {
const mockFn = jest.fn();
const { getByRole } = render(
diff --git a/src/workbench/sidebar/explore/folderTree.tsx b/src/workbench/sidebar/explore/folderTree.tsx
index 5ba8c4f56..2fe8d20c1 100644
--- a/src/workbench/sidebar/explore/folderTree.tsx
+++ b/src/workbench/sidebar/explore/folderTree.tsx
@@ -205,6 +205,7 @@ const FolderTree: React.FunctionComponent = (props) => {
autoComplete="off"
autoFocus
onBlur={(e) => handleInputBlur(e, node)}
+ onClick={(e) => e.stopPropagation()}
/>
) : (
name!
diff --git a/src/workbench/sidebar/explore/style.scss b/src/workbench/sidebar/explore/style.scss
index f2e3a31e5..ed76680fe 100644
--- a/src/workbench/sidebar/explore/style.scss
+++ b/src/workbench/sidebar/explore/style.scss
@@ -34,12 +34,12 @@
font-family: inherit;
font-size: 13px;
height: 20px;
- left: -2px;
+ left: 0;
margin: 0;
outline: none;
padding: 0;
position: relative;
- width: 100%;
+ width: calc(100% - 2px);
&:focus,
&:active {
diff --git a/website/docs/introduction.md b/website/docs/introduction.md
index 89821910e..d07d2f3a9 100644
--- a/website/docs/introduction.md
+++ b/website/docs/introduction.md
@@ -9,7 +9,7 @@ sidebar_position: 1
Molecule
A lightweight Web IDE UI Framework
-[![CI][ci-image]][ci-url] [![Codecov][codecov-image]][codecov-url] [![NPM downloads][download-img]][download-url] [![NPM version][npm-version]][npm-version-url] [![Chat][online-chat-img]][online-chat-url]
+[![CI][ci-image]][ci-url] [![CII Best Practices][cii-img]][cii-url] [![Codecov][codecov-image]][codecov-url] [![NPM downloads][download-img]][download-url] [![NPM version][npm-version]][npm-version-url] [![Chat][online-chat-img]][online-chat-url]
@@ -23,6 +23,8 @@ sidebar_position: 1
[npm-version-url]: https://www.npmjs.com/package/@dtinsight/molecule
[online-chat-img]: https://img.shields.io/discord/920616811261743104?logo=Molecule
[online-chat-url]: https://discord.com/invite/b62gpHwNA7
+[cii-img]: https://bestpractices.coreinfrastructure.org/projects/6307/badge
+[cii-url]: https://bestpractices.coreinfrastructure.org/projects/6307
The **Molecule** is a lightweight **Web IDE UI** Framework built with React.js，and inspired by the VSCode. We also provide the Extension APIs the seem like VSCode, to help developers extend the Workbench easily. The Molecule integrates with React.js applications is simple. It has applied to many [DTStack](https://www.dtstack.com/) inner projects.
diff --git a/website/docs/quick-start.md b/website/docs/quick-start.md
index 5094f98a7..7438f7c81 100644
--- a/website/docs/quick-start.md
+++ b/website/docs/quick-start.md
@@ -14,7 +14,43 @@ sidebar_position: 2
use the `node -v` command to view the current Node version. It is recommended to use [nvm](https://github.com/nvm-sh/nvm) on Mac systems to manage multiple versions of Node.js.
:::
-## Create a Project
+## Create a Project in One Line
+
+We provide a command line tool to create a project quickly. It uses [create-react-app](https://github.com/facebook/create-react-app) to create this project.
+
+### npx
+
+```bash
+npx @dtinsight/create molecule-demo
+```
+
+Or create the project based on the **TypeScript** template
+
+```bash
+npx @dtinsight/create molecule-demo -t
+```
+
+_[npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f)_
+
+### Yarn
+
+```bash
+yarn create @dtinsight/ molecule-demo
+```
+
+Or create the project based on the **TypeScript** template
+
+```bash
+yarn create @dtinsight/ molecule-demo -t
+```
+
+_`yarn create` is available in Yarn 0.25+_
+
+### Startup Project
+
+After waiting a second, you could see `Happy coding!😊` in terminal. And then just following the guide to start up your project.
+
+## Create a Project Manually
We use the [create-react-app](https://github.com/facebook/create-react-app) scaffolding tool officially recommended by React as an example,
Here we **strongly recommend** the use of the **Typescript** template:
@@ -29,7 +65,7 @@ This command will create a directory called `molecule-demo` in the current direc
cd molecule-demo
```
-## Install Molecule
+### Install Molecule
Then, you need to install the dependency of molecule:
@@ -41,7 +77,7 @@ npm install @dtinsight/molecule
This command will automatically install Molecule's dependencies in the `molecule-demo` project.
-## Basic Use
+### Basic Use
Open the `src/App.js` file and replace the contents of the file with the following:
@@ -61,7 +97,21 @@ export default App;
`extensions` are extensions that need to be customized.
-## Startup Project
+And open the `src/index.js` file and change it to the following:
+
+```diff title="src/index.js"
+root.render(
+-
+
+-
+);
+```
+
+:::caution
+It's **noticed** that the Molecule for now is not compatible with `React.StrictMode`. So we should remove `React.StrictMode` from `src/index.js`.
+:::
+
+### Startup Project
Finally, run the `start` command in the terminal:
@@ -77,8 +127,10 @@ This command will automatically open the address [http://localhost:3000](http://
## Use Monaco Editor language pack
-To use the language pack of Monaco Editor, you need to use the plug-in `monaco-editor-webpack-plugin`, so here we have to extend the default configuration of **Webpack**.
-First, we first install the [react-app-rewired](https://github.com/timarney/react-app-rewired) tool, and then create a `config-overrides.js` file in the project root directory to override the default Webpack configuration. The specific usage of the `monaco-editor-webpack-plugin` plugin is as follows:
+Now, you can see the page in browser, but that's not enough. If you want to develop an Web IDE with specific language. You should use the language pack of Monaco Editor to highlight the language in Web IDE.
+
+To use the language pack of Monaco Editor, you need to use the plugin [`monaco-editor-webpack-plugin`](https://www.npmjs.com/package/monaco-editor-webpack-plugin), so here we have to extend the default configuration of **Webpack**.
+First, we install the [react-app-rewired](https://github.com/timarney/react-app-rewired), and then create a `config-overrides.js` file in the project's root directory to override the default Webpack configuration. The specific usage of the `monaco-editor-webpack-plugin` plugin is as follows:
```js title="config-overrides.js"
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/introduction.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/introduction.md
index f65de9727..5f99c26e6 100644
--- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/introduction.md
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/introduction.md
@@ -9,7 +9,7 @@ sidebar_position: 1
Molecule
一个轻量的 Web IDE UI 框架
-[![CI][ci-image]][ci-url] [![Codecov][codecov-image]][codecov-url] [![NPM downloads][download-img]][download-url] [![NPM version][npm-version]][npm-version-url] [![Chat][online-chat-img]][online-chat-url]
+[![CI][ci-image]][ci-url] [![CII Best Practices][cii-img]][cii-url] [![Codecov][codecov-image]][codecov-url] [![NPM downloads][download-img]][download-url] [![NPM version][npm-version]][npm-version-url] [![Chat][online-chat-img]][online-chat-url]
@@ -23,6 +23,8 @@ sidebar_position: 1
[npm-version-url]: https://www.npmjs.com/package/@dtinsight/molecule
[online-chat-img]: https://img.shields.io/discord/920616811261743104?logo=Molecule
[online-chat-url]: https://discord.com/invite/b62gpHwNA7
+[cii-img]: https://bestpractices.coreinfrastructure.org/projects/6307/badge
+[cii-url]: https://bestpractices.coreinfrastructure.org/projects/6307
## 简介
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-start.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-start.md
index 312233eef..098495241 100644
--- a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-start.md
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-start.md
@@ -14,7 +14,43 @@ sidebar_position: 2
可以通过 `node -v` 命令查看当前 Node 版本。 推荐在 Mac 系统中使用 [nvm](https://github.com/nvm-sh/nvm) 来管理 Node.js 多版本
:::
-## 创建项目
+## 命令行创建项目
+
+我们提供了命令行工具快速创建 Molecule 项目。该工具是基于 [create-react-app](https://github.com/facebook/create-react-app) 创建项目的
+
+### npx
+
+```bash
+npx @dtinsight/create molecule-demo
+```
+
+或者你需要创建一个基于 **TypeScript** 的项目
+
+```bash
+npx @dtinsight/create molecule-demo -t
+```
+
+_[npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) 要求 npm 的版本是 5.2+ 或更高, [低版本的 npm 使用方式参考](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f)_
+
+### Yarn
+
+```bash
+yarn create @dtinsight/ molecule-demo
+```
+
+或者你需要创建一个基于 **TypeScript** 的项目
+
+```bash
+yarn create @dtinsight/ molecule-demo -t
+```
+
+_`yarn create` 要求 Yarn 的版本在 0.25+_
+
+### 启动项目
+
+在等待安装依赖一会儿后，终端显示 `Happy coding!😊` 则表示安装成功。接下来只需要按照终端上的向导启动项目即可。
+
+## 手动创建项目
我们使用 React 官方推荐的 [create-react-app](https://github.com/facebook/create-react-app) 脚手架工具作为示例，
这里我们**强烈推荐**使用 **Typescript** 模板：
@@ -29,7 +65,7 @@ npx create-react-app molecule-demo --template typescript
cd molecule-demo
```
-## 安装 Molecule
+### 安装 Molecule
然后，你需要安装 molecule 的依赖：
@@ -41,7 +77,7 @@ npm install @dtinsight/molecule
这个命令会在 `molecule-demo` 项目中自动安装 Molecule 的依赖。
-## 基本使用
+### 基本使用
打开 `src/App.js` 文件，将该文件的内容替换成如下：
@@ -61,7 +97,21 @@ export default App;
`extensions` 是需要自定义的扩展程序。
-## 启动项目
+然后，打开 `src/index.js` 文件，并修改如下的部分:
+
+```diff title="src/index.js"
+root.render(
+-
+
+-
+);
+```
+
+:::caution
+需要注意的是目前 Molecule 还无法与 `React.StrictMode` 兼容，所以我们需要在 `src/index.js` 中移除 `React.StrictMode`。
+:::
+
+### 启动项目
最后，在终端中运行`start` 命令：
@@ -77,7 +127,9 @@ npm run start
## 使用 Monaco Editor 语言包
-使用 Monaco Editor 的语言包，需要使用插件 `monaco-editor-webpack-plugin`，所以这里我们得扩展下 **Webpack** 的默认配置。
+现在，你可以在浏览器中打开并看到 Molecule 的页面了，但是这仍然是远远不够的。如果你想要开发一个特定语法的 Web IDE 应用，你需要借助 Monaco Editor 的语言包来使得你的语法能够在 Web IDE 中高亮。
+
+使用 Monaco Editor 的语言包，需要使用插件 [`monaco-editor-webpack-plugin`](https://www.npmjs.com/package/monaco-editor-webpack-plugin)，所以这里我们得扩展下 **Webpack** 的默认配置。
首先我们先安装 [react-app-rewired](https://github.com/timarney/react-app-rewired) 工具，然后在项目根目录创建一个`config-overrides.js` 文件，用来覆盖默认 Webpack 配置。 `monaco-editor-webpack-plugin` 插件具体使用如下：
```js title="config-overrides.js"
diff --git a/website/package.json b/website/package.json
index 74d8018bb..64ea851fe 100644
--- a/website/package.json
+++ b/website/package.json
@@ -5,6 +5,7 @@
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
+ "start:chinese": "docusaurus start --locale zh-CN",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",