observable version

Author: wewoor

.npmrc

@@ -0,0 +1,3 @@
+# Set default registry: npm config set registry https://registry.npmjs.com/
+# This project default install package by npm or yarn which will download from the below registry server.
+registry=http://registry.npm.dtstack.com/

.storybook/main.js

@@ -1,4 +1,6 @@
 const path = require('path');
+const webpack = require('webpack');
+
 module.exports = {
   stories: ['../stories/**/*.stories.tsx'],
   addons: ['@storybook/addon-actions', '@storybook/addon-links'],
@@ -14,15 +16,34 @@ module.exports = {
           loader: require.resolve('react-docgen-typescript-loader'),
         },
       ],
+    },
+    {
+        test: /\.worker\.js$/,
+        use: { loader: 'worker-loader' }
     }, {
         test: /\.scss$/,
         use: ['style-loader', 'css-loader', 'sass-loader'],
         include: path.resolve(__dirname, '../'),
     });
+
+    config.node = {
+        fs: 'empty',
+        module: "empty",
+    };
+
+    config.plugins.push(new webpack.ContextReplacementPlugin(
+        /monaco-editor(\\|\/)esm(\\|\/)vs(\\|\/)editor(\\|\/)common(\\|\/)services/,
+        __dirname
+    ))
+
+  
     config.resolve.alias = {
-      '@': path.resolve(__dirname, '../src')
+      '@': path.resolve(__dirname, '../src'),
+      '@stories': path.resolve(__dirname, '../stories'),
     }
-    config.resolve.extensions.push('.ts', '.tsx');
+    config.resolve.extensions.push('.ts', '.tsx', '.js', '.jsx');
+    config.devtool = 'cheap-module-eval-source-map';
+
     return config;
   },
 };

LICENSE

@@ -0,0 +1 @@
+MIT

README.md

@@ -1,3 +1,7 @@
 # Molecule
 
 A Web IDE UI library built by React.js, inspired by VSCode.
+
+## vscode codicons online address
+
+<https://microsoft.github.io/vscode-codicons/dist/codicon.html>

src/services/diService.ts build/web.js

@@ -1,11 +1,11 @@
 {
   "name": "molecule",
   "version": "0.9.0",
-  "description": "A Web IDE UI library built by React.js, inspired by VSCode. ",
+  "description": "A Web IDE UI Framework built by React.js, inspired by VSCode.",
   "main": "lib/core/index.js",
   "scripts": {
     "test": "jest --coverage",
-    "dev": "start-storybook -p 6006",
+    "dev": "start-storybook -s ./public -p 6006",
     "build-storybook": "build-storybook",
     "check-types": "tsc --skipLibCheck",
     "eslint": "npx eslint ./src/**/*.ts ./src/**/*.tsx",
@@ -21,10 +21,17 @@
   "license": "ISC",
   "dependencies": {
     "@types/react": "^16.9.35",
+    "classnames": "^2.2.6",
+    "dt-react-monaco-editor": "^0.0.6",
+    "dt-utils": "^1.0.1",
+    "loadsh": "^0.0.4",
+    "rc-collapse": "^2.0.1",
+    "rc-tree": "^3.10.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-split-pane": "^0.1.92",
-    "tsyringe": "^4.3.0"
+    "tsyringe": "^4.3.0",
+    "vscode-codicons": "^0.0.10"
   },
   "devDependencies": {
     "@babel/core": "7.8.7",

package.json

@@ -0,0 +1,5 @@
+export const ErrorMsg = {
+    LoadExtensionFail: 'Load Extension failed',
+    NotFoundActivate: 'Not found activate function, the extension must export an activate function as entry.',
+};
+

src/common/error.ts

@@ -0,0 +1,45 @@
+export interface IObservable<T = any> {
+    observe: (handler: (nextObject: T) => void) => void;
+}
+
+export function observable<T>(object, callback?): IObservable & T {
+    object.handlers = [];
+    object.observe = function(handler: Function) {
+        object.handlers.push(handler);
+    };
+
+    const handler = {
+        get(target, property, receiver) {
+            if (target.hasOwnProperty(property)) {
+                try {
+                    return new Proxy(target[property], handler);
+                } catch (err) {
+                    return Reflect.get(target, property, receiver);
+                }
+            }
+            return Reflect.get(target, property, receiver);
+        },
+        set: function(target, property, value, receiver) {
+            console.log('set value:', target, property, value, receiver);
+            let nextTarget = target;
+            if (target.hasOwnProperty(property)) {
+                try {
+                    Reflect.set(target, property, value, receiver);
+                    nextTarget = new Proxy(target[property], handler);
+                } catch (err) {
+                    nextTarget = Reflect.set(target, property, value, receiver);
+                }
+            } else {
+                nextTarget = Reflect.set(target, property, value, receiver);
+            }
+            if (callback) {
+                callback(target, property, value);
+            }
+            if (object.handlers) {
+                object.handlers.forEach((handler) => handler(nextTarget));
+            }
+            return nextTarget;
+        },
+    };
+    return new Proxy(object, handler);
+}

src/common/observable.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import RcCollapse from 'rc-collapse';
+import classNames from 'classnames';
+
+import './style.scss';
+import { prefixClaName } from '@/common/className';
+
+interface ICollapseProps {
+    className?: string;
+}
+
+export const Collapse: React.FunctionComponent<ICollapseProps> = (props: ICollapseProps) => {
+    return (
+        <RcCollapse
+            className={classNames(prefixClaName('collapse'), props.className)}
+            {...props}
+        />
+    );
+};
+
+export const Panel = RcCollapse.Panel;
+export default Collapse;

src/components/collapse/index.tsx

@@ -0,0 +1,5 @@
+@import '@/style/const.scss';
+
+.#{prefix}-collapse {
+    font-size: 13px;
+}

src/components/collapse/style.scss

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import { prefixClaName } from '@/common/className';
+
+export interface ITab<T = any, K = any> {
+    id?: number;
+    name?: string;
+    mode?: string;
+    data?: T;
+    options?: K;
+    value?: string;
+    renderPane?: () => React.ReactElement;
+}
+
+interface ITabsProps {
+    data: ITab[];
+}
+
+const Tabs: React.FunctionComponent<ITabsProps> = (props: ITabsProps) => {
+    const { data } = props;
+    const tabs = data.map((tab: ITab) => {
+        return (<a key={tab.id}>{tab.name}</a>);
+    });
+    return (
+        <div className={prefixClaName('tabs')}>
+            {tabs}
+        </div>
+    );
+};
+
+export default Tabs;

src/components/tabs/index.tsx

@@ -0,0 +1,4 @@
+.scroll {
+    width: 10px;
+    pointer-events: none;
+}

src/components/tabs/style.scss

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import RcTree from 'rc-tree';
+import classNames from 'classnames';
+
+import './style.scss';
+import { prefixClaName } from '@/common/className';
+
+export interface ITree {
+
+}
+
+interface ITreeProps {
+    className?: string;
+    data?: ITree;
+}
+
+export const Tree: React.FunctionComponent<ITreeProps> = (props: ITreeProps) => {
+    return (
+        <RcTree
+            className={classNames(prefixClaName('tree'), props.className)}
+            {...props}
+        />
+    );
+};
+
+export default Tree;

src/components/tree/index.tsx

@@ -0,0 +1,5 @@
+@import '@/style/const.scss';
+
+.#{prefix}-tree {
+    font-size: 13px;
+}

src/components/tree/style.scss

@@ -1,19 +1,23 @@
 // import { ReactType } from '@/typings';
 import * as React from 'react';
 
-export interface IActivityBarData {
-    id: string;
+export interface IActivityBarItem {
+    id?: string;
     name?: string;
     data?: any;
+    iconName?: string;
+    checked?: boolean;
     // render?: <T>() => T;
     render?: () => any;
+    onClick?:(e: React.MouseEvent, option: IActivityBarItem) => any;
 }
 
 export interface IActivityBar {
-    readonly data: IActivityBarData[];
-    onSelect: (key: string, item: IActivityBarData) => void;
-    onClick: (event: React.MouseEvent, item: IActivityBarData) => void;
-    push: (data: IActivityBarData) => void;
+    data: IActivityBarItem[];
+    selected: string;
+    onSelect: (key: string, item?: IActivityBarItem) => void;
+    onClick: (event: React.MouseEvent, item: IActivityBarItem) => void;
+    push: (data: IActivityBarItem | IActivityBarItem []) => void;
     remove: (index: number) => void;
     update: () => void;
     get: (id: string) => void;

src/core/activityBar.ts

@@ -1,3 +1,21 @@
-export interface IEditor {
-    value: string;
+import { ITab } from '@/components/tabs';
+
+export interface IEditorInstance<E = any> {
+    id: number;
+    activeTab: ITab;
+    tabs: ITab[];
+    breadcrumb: any[];
+    actions: any[];
+    menu: any[];
+    editorInstance?: E | null;
+}
+
+export interface IEditor<T = any> {
+    current: IEditorInstance | null;
+    group: IEditorInstance [];
+    open: (tab: ITab<T>, instanceId: number) => void;
+    close?: (index: number, callback: () => void) => void;
+    closeAll?: () => void;
+    onClose?: () => void;
+    render?:() => React.ReactElement;
 }