@dtinsight/molecule

Molecule

A lightweight Web IDE UI Framework

中文 | English

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.

Online Preview

Features

• Builtin the VSCode Workbench UI
• Compatible with the VSCode ColorTheme
• Customize the Workbench via React Component easily
• Builtin Monaco-Editor Command Palette, Keybinding features
• Support the i18n, builtin zhCN, and English
• Builtin Settings, support to edit and extend via the Extension
• Builtin 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

• Introduction
• Quick Start
• API
• Extend Workbench
• More Docs.
• Examples

Development

git clone [e-mail]: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.

License

Copyright © DTStack. All rights reserved.

Licensed under the MIT license.

Changelog

0.9.0-beta.1 (2021-12-06)

Features

• support a new Welcome page (#508) (e5e0a0c)
• support sort in folderTree (#524) (8802b1f)

Bug Fixes

• adjust the menu icon size (ed9cb8d)
• fix can't clear the notifications (#518) (2503f4a)
• fix create file node incorrect on contextMenu (#522) (14c6057)
• improve the circular dep error when execute yarn link (#528) (486182b)
• improve the exports of models (#507) (4b7ab03)
• improve the insert strategy in folderTree (#486) (3061b68)
• initView will override the setDefaultValue (#513) (586335e)
• remove the warning in console (#529) (059016c)
• show the SubMenu in right place when the Menu is horizontal mode (#526) (0d76520)