6 Star 60 Fork 10

袋鼠云 / molecule

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md
watchman-logo

Molecule

A lightweight Web IDE UI Framework

CI Codecov NPM downloads NPM version Chat

中文 | English | 한국어

The Molecule is a lightweight Web IDE UI framework which is built with React.js and inspired by the VSCode. We have designed the Extension APIs similar to the VSCode, to help developers extend the Workbench in an easier way. It's convenient to integrate the Molecule with React.js applications. It has been applied to many products in DTStack

Online Preview

Features

  • Built-in the Visual Studio Code Workbench UI
  • Compatible with the Visual Studio Code ColorTheme
  • Customize the Workbench via React Component easily
  • Built-in Monaco-Editor Command Palette, Keybinding features
  • Support the i18n, built-in Simplified Chinese, Korean and English
  • Built-in Settings, support to edit and extend via the Extension
  • Built-in basic Explorer, Search components, and support extending via the Extension
  • Typescript Ready

Installation

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

Basic Usage

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 extensions={[]}>
        <Workbench />
    </MoleculeProvider>
);

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

The extension is the Extension applications entry, more details about Extension, please read the Quick Start.

Document

Development

git clone git@github.com:DTStack/molecule.git

Clone the source code into your local

Development Mode

yarn # Install dependencies

yarn dev # Start dev mode

The Molecule using the Storybook to manage and develop the React components, the default visiting address is http://localhost:6006/.

Test

yarn test -u

Build & Preview

yarn build # Compile to ESM
yarn web # Web Preview Mode

We compile the source code into the ES6 modules and output to the esm folder. Besides the Storybook development mode, there also builtin a Web Preview mode using the ESM modules.

Contributing

Refer to the CONTRIBUTING.

License

Copyright © DTStack. All rights reserved.

Licensed under the MIT license.

Repository Comments ( 0 )

Sign in to post a comment

About

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

Releases

No release

molecule

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/dtstack_dev_0/molecule.git
git@gitee.com:dtstack_dev_0/molecule.git
dtstack_dev_0
molecule
molecule
main

Search

184635 d8eb8a04 1850385 161156 f1cf3f24 1850385