跳到主要内容
版本：Next

watchman-logo

Molecule

一个轻量的 Web IDE UI 框架

CI CII Best Practices Codecov NPM downloads NPM version Chat

简介​

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 2 种语言
  • 内置一个简单的 Settings 模块，支持在线编辑修改以及扩展
  • 内置默认的 Explorer, Search 等组件，并支持扩展
  • Typescript 支持

安装​

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

基本使用​

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

const moInstance = create({
    extensions: [],
});

const App = () => moInstance.render(<Workbench />);

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

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

贡献​

更多请参考 CONTRIBUTING.

交流​

我们使用钉钉 沟通交流，可以搜索群号 30537511 或者扫描下面的二维码进入钉钉群

License​

Copyright © DTStack. All rights reserved.

Licensed under the MIT license.