Introduction
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 inner projects.
Features
- Built-in the VSCode Workbench UI
- Compatible with the VSCode ColorTheme
- Customize the Workbench via React Component easily
- Built-in Monaco-Editor Command Palette, Keybinding features
- Support the i18n, built-in zhCN, 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 { 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'));
The extension
is the Extension applications entry, more details about Extension, please read the Quick Start.
Development
git clone [email protected]: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/
.
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.
Communication
- We use DingTalk to communicate,You can search the group number
30537511
or scan the QR code below to join the communication group
License
Copyright © DTStack. All rights reserved.
Licensed under the MIT license.