Молекула — это легковесный фреймворк для Web IDE UI, созданный на React.js и вдохновлённый VSCode. Мы разработали API расширений, аналогичные VSCode, чтобы помочь разработчикам легче расширять Workbench. Молекулу удобно интегрировать в приложения React.js. Она применяется во многих продуктах DTStack.

Онлайн-превью: https://dtstack.github.io/molecule-examples/#/.

Особенности

• Встроенный пользовательский интерфейс Visual Studio Code Workbench;
• Совместимость с цветовой темой Visual Studio Code;
• Простая настройка Workbench через компонент React;
• Встроенные функции Command Palette и Keybinding редактора Monaco;
• Поддержка i18n, встроенные упрощённый китайский, корейский и английский языки;
• Встроенные настройки, поддержка редактирования и расширения через расширение;
• Встроенные базовые компоненты Explorer и Search, а также поддержка расширения через расширение;
• Готовность к Typescript.

Установка

npm install @dtinsight/molecule
# Или
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 extensions={[]}>
        <Workbench />
    </MoleculeProvider>
);

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

Расширение — это запись приложений расширения, более подробную информацию о расширении см. в разделе «Быстрый старт».

Документация

• Введение: https://dtstack.github.io/molecule/docs/introduction;
• Быстрый старт: https://dtstack.github.io/molecule/docs/quick-start;
• API: https://dtstack.github.io/molecule/docs/api;
• Расширение Workbench: https://dtstack.github.io/molecule/docs/guides/extend-workbench;
• Примеры: https://github.com/DTStack/molecule-examples.

Разработка

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

Клонируйте исходный код в локальный каталог.

Режим разработки

yarn # Установить зависимости

yarn dev # Запустить режим разработки

Молекула использует Storybook для управления и разработки компонентов React, адрес по умолчанию — http://localhost:6006/.

Тест

yarn test -u

Сборка и предварительный просмотр

yarn build # Компиляция в ESM
yarn web # Режим предварительного просмотра в Интернете

Мы компилируем исходный код в модули ES6 и выводим их в папку esm. Помимо режима разработки Storybook, существует встроенный режим предварительного просмотра веб-страниц с использованием модулей ESM.

Вклад

См. CONTRIBUTING.md.

Лицензия

Copyright © DTStack. Все права защищены.

Лицензия MIT.