Molecule

경량 웹 IDE UI 프레임워크

中文 | English | 한국어

Molecule은 React.js로 구축되었으며 VSCode에서 영감을 받은 경량 웹 IDE UI 프레임워크입니다. 개발자가 워크벤치를 더 쉽게 확장할 수 있도록 VSCode와 유사한 확장 API를 설계했습니다. Molecule을 React.js 애플리케이션과 통합하는 것이 편리합니다. DTStack의 많은 제품들에 이 코드가 적용되었습니다.

온라인 미리보기

기능들

• Visual Studio Code 워크벤치 UI 제공
  (https://code.visualstudio.com/api/extension-capabilities/extending-workbench)
• VSCode ColorTheme 와 호환
• React Component를 통해 워크벤치를 쉽게 사용자 정의
• Monaco-Editor Command Palette, Keybinding 기능 내장
• i18n 지원, 중국어 간체, 영어 , 한국어 지원
• 설정 지원 , Extension을 통한 편집 및 확장 지원
• 기본 Explorer, Search 컴포넌트 지원, Extension을 통환 확장 지원
• 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은 확장 응용 프로그램 항목입니다. 확장에 대한 자세한 내용은 빠른 시작을 참조하십시오.

문서

• 소개
• 빠른 시작
• API
• 확장 워크벤치
• 예제들

개발

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

로컬에 소스코드를 클론 하세요

개발 모드

yarn # Install dependencies

yarn dev # Start dev mode

Molecule은 React 컴포넌트를 개발,관리하기 위해 Storybook을 사용합니다. 기본 링크는 http://localhost:6006/ 입니다.

테스트

yarn test -u

빌드 & 미리보기

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

소스 코드를 ES6 모듈로 컴파일하고 esm 폴더에 출력 합니다. 스토리북 개발 모드 외에도 ESM 모듈을 사용하는 Web Preview 모드도 내장되어 있습니다.

기여

자세한 사항은 기여을 참조하세요.

라이선스

Copyright © DTStack. All rights reserved.

MIT 라이선스에 따라 라이선스가 부여됩니다.