Molecule

一个轻量的 Web IDE UI 框架

中文 | English | 한국어

Molecule 是一款受 VSCode 启发，使用 React.js 构建的 Web IDE UI 框架。我们设计了类似 VSCode 的扩展（Extension)机制，可以帮助我们使用 React 组件快速完成对 Workbench 的自定义。Molecule 与 React 项目集成非常方便，我们已经在 DTStack 多个产品、项目中使用。

在线预览

核心功能

• 内置 React 版本的 Visual Studio Code Workbench UI
• 基本兼容 Visual Studio Code 的 ColorTheme
• 支持使用 React 组件自定义 Workbench UI 样式
• 内置 Monaco Editor Command Palette、Keybinding等模块，并支持扩展
• 支持 i18n，简体中文、English 、한국어 3 种语言
• 内置一个简单的 Settings 模块，支持在线编辑修改以及扩展
• 内置默认的 Explorer, Search 等组件，并支持扩展
• Typescript 支持

安装

npm install @dtinsight/molecule
# Or
yarn add @dtinsight/molecule

基本使用

import React from 'react';
import ReactDOM from 'react-dom';
import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
import '@dtinsight/molecule/esm/style/mo.css';

const App = () => (
    <MoleculeProvider extension={[]}>
        <Workbench />
    </MoleculeProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

extension 为 Workbench 应用的扩展入口，如何编写扩展，请参考快速开始。

文档

• 简介
• 快速开始
• API 文档
• 扩展 Workbench
• Examples

开发

git clone git@github.com:DTStack/molecule.git
``
`
首先 Clone 源码到本地
**开发模式**

```bash
yarn # install dependencies

yarn dev # 启动开发模式

Molecule 中的组件是基于 Storybook 开发并管理的，预览地址：http://localhost:6006/默认地址浏览。

测试

yarn test -u

构建 & 预览

yarn build
yarn web # 预览打包后的 Web

当前我们默认将 Molecule 以 ES6 模块的方式构建到 esm 目录。另外， 这里除了 Storybook 提供的组件预览模式以外，我们同时内置了一个使用 ESM 模块的 Web 预览模式。

贡献

更多请参考 CONTRIBUTING.

License

Copyright © DTStack. All rights reserved.

Licensed under the MIT license.