Progress

Author: Ives van Hoorne

package.json

@@ -10,6 +10,7 @@
     "build:deps": "lerna run build:dev --scope codesandbox-api --scope codesandbox-browserfs",
     "start": "yarn build:deps && lerna run start --scope app --stream",
     "start:fast": "lerna run start --scope app --stream",
+    "start:vscode": "VSCODE=1 yarn start:fast & cd standalone-packages/monaco-editor && yarn simpleserver & cd standalone-packages/vscode && yarn watch",
     "start:home": "lerna run start --scope homepage --stream",
     "start:test": "lerna run start:test --scope app --stream",
     "start:dev_api": "lerna run start --parallel --scope codesandbox-api & lerna run start:dev_api --scope app --stream",
@@ -35,7 +36,8 @@
       "packages/codesandbox-api",
       "packages/sandpack",
       "packages/react-sandpack",
-      "packages/homepage"
+      "packages/homepage",
+      "packages/node-services"
     ],
     "nohoist": ["**/gatsby", "**/gatsby/**"]
 },

packages/app/config/webpack.common.js

@@ -260,7 +260,7 @@ module.exports = {
       /typescriptServices\.js$/,
       /browserfs\.js/,
       /browserfs\.min\.js/,
-      /standalone-packages/,
+      /standalone-packages\/codesandbox-browserfs/,
     ],
   },
 

packages/app/package.json

@@ -211,6 +211,7 @@
     "store": "^2.0.12",
     "string-replace-loader": "^2.1.1",
     "styled-components": "^3.2.1",
+    "subworkers": "^1.0.1",
     "svg-react-loader": "^0.4.4",
     "tern": "^0.21.0",
     "vue": "^2.5.2",

packages/app/src/app/components/CodeEditor/Monaco/MonacoReactComponent.js

@@ -83,137 +83,16 @@ class MonacoEditor extends React.PureComponent {
       );
 
       appliedOptions.fontFamily = fonts.slice(1).join(', ');
-      const r = context.require;
-
-      const [
-        { CodeSandboxCommandService },
-        { CodeSandboxHashService },
-        { CodeSandboxKeybindingService },
-        { CodeSandboxWindowsService },
-        { QuickOpenController },
-        { EditorPart },
-        { CodeSandboxWorkbench },
-        { CodeSandboxEnvironmentService },
-        { EditorService },
-        { UntitledEditorService },
-        { CodeSandboxFileService },
-        { StorageService },
-        { HistoryService },
-        { NullLifecycleService },
-        { TextFileService },
-        { WindowService },
-        { CodeSandboxBackupService },
-        { CodeSandboxExtensionService },
-        { FileDecorationsService },
-        { PreferencesService },
-        { JSONEditingService },
-        { CodeSandboxWorkspacesService },
-        { CodeSandboxSearchService },
-        { ViewletService },
-        { TextModelResolverService },
-      ] = [
-        r('vs/codesandbox/commandService'),
-        r('vs/codesandbox/hashService'),
-        r('vs/codesandbox/keybindingService'),
-        r('vs/codesandbox/windowsService'),
-        r('vs/workbench/browser/parts/quickopen/quickOpenController'),
-        r('vs/codesandbox/editorGroupsService'),
-        r('vs/codesandbox/workbench'),
-        r('vs/codesandbox/environmentService'),
-        // r('vs/codesandbox/editorService'),
-        r('vs/workbench/services/editor/browser/editorService'),
-        r('vs/workbench/services/untitled/common/untitledEditorService'),
-        r('vs/codesandbox/fileService'),
-        r('vs/platform/storage/common/storageService'),
-        r('vs/workbench/services/history/electron-browser/history'),
-        r('vs/platform/lifecycle/common/lifecycle'),
-        r('vs/workbench/services/textfile/electron-browser/textFileService'),
-        r('vs/platform/windows/electron-browser/windowService'),
-        r('vs/codesandbox/backupFileService'),
-        r('vs/codesandbox/extensionService'),
-        r('vs/workbench/services/decorations/browser/decorationsService'),
-        r('vs/workbench/services/preferences/browser/preferencesService'),
-        r('vs/workbench/services/configuration/node/jsonEditingService'),
-        r('vs/codesandbox/workspacesService'),
-        r('vs/codesandbox/searchService'),
-        r('vs/workbench/services/viewlet/browser/viewletService'),
-        r(
-          'vs/workbench/services/textmodelResolver/common/textModelResolverService'
-        ),
-      ];
 
       this.editor = context.monaco.editor[
         diffEditor ? 'createDiffEditor' : 'create'
-      ](this.containerElement, appliedOptions, {
-        backupFileService: i => i.createInstance(CodeSandboxBackupService),
-        hashService: i => i.createInstance(CodeSandboxHashService),
-        extensionService: i => i.createInstance(CodeSandboxExtensionService),
-        lifecycleService: NullLifecycleService,
-        windowsService: i => i.createInstance(CodeSandboxWindowsService),
-        quickOpenService: i => i.createInstance(QuickOpenController),
-        commandService: i => i.createInstance(CodeSandboxCommandService),
-        IFileDecorationsService: i => i.createInstance(FileDecorationsService),
-        textFileService: i => i.createInstance(TextFileService),
-        fileService: i => i.createInstance(CodeSandboxFileService),
-        keybindingService: i =>
-          i.createInstance(CodeSandboxKeybindingService, window),
-        editorGroupsService: i =>
-          i.createInstance(EditorPart, 'codesandbox', false),
-        untitledEditorService: i => i.createInstance(UntitledEditorService),
-        partService: i => i.createInstance(CodeSandboxWorkbench),
-        environmentService: i =>
-          i.createInstance(CodeSandboxEnvironmentService),
-        storageService: new StorageService(localStorage, localStorage),
-        historyService: i => i.createInstance(HistoryService),
-        editorService: i => i.createInstance(EditorService),
-        windowService: i => i.createInstance(WindowService),
-        preferencesService: i => i.createInstance(PreferencesService),
-        jsonEditingService: i => i.createInstance(JSONEditingService),
-        workspacesService: i => i.createInstance(CodeSandboxWorkspacesService),
-        searchService: i => i.createInstance(CodeSandboxSearchService),
-        viewletService: i =>
-          i.createInstance(ViewletService, {
-            onDidViewletOpen: () => true,
-            onDidViewletClose: () => true,
-          }),
-        textModelService: i => i.createInstance(TextModelResolverService),
-      });
-
+      ](this.containerElement, appliedOptions);
       if (theme) {
         context.monaco.editor.setTheme(theme);
       }
 
       // After initializing monaco editor
       this.editorDidMount(this.editor, context.monaco);
-
-      setTimeout(() => {
-        const container = document.createElement('div');
-        const part = document.createElement('div');
-
-        container.className = 'vs-dark monaco-workbench';
-        container.id = 'workbench.main.container';
-        part.className = 'part editor';
-
-        container.appendChild(part);
-
-        const editor = document.getElementsByClassName(
-          'react-monaco-editor-container'
-        )[0];
-        editor.parentNode.removeChild(editor);
-
-        const rootEl = document.getElementsByClassName(
-          'elements__CodeContainer-ghvvch'
-        )[0];
-        rootEl.appendChild(container);
-        window.EditorPart.create(part);
-
-        setTimeout(() => {
-          window.EditorPart.layout({
-            width: this.props.width,
-            height: this.props.height,
-          });
-        }, 500);
-      }, 3000);
     }
   };
 
@@ -230,9 +109,9 @@ class MonacoEditor extends React.PureComponent {
   render() {
     const { width, height } = this.props;
     const fixedWidth =
-      width && width.toString().indexOf('%') !== -1 ? width : `${width}px`;
+      width.toString().indexOf('%') !== -1 ? width : `${width}px`;
     const fixedHeight =
-      height && height.toString().indexOf('%') !== -1 ? height : `${height}px`;
+      height.toString().indexOf('%') !== -1 ? height : `${height}px`;
     const style = {
       width: fixedWidth,
       height: fixedHeight,

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -1563,7 +1563,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
   };
 
   render() {
-    const { hideNavigation, absoluteWidth, absoluteHeight } = this.props;
+    const { hideNavigation } = this.props;
 
     const sandbox = this.sandbox;
     const currentModule = this.currentModule;
@@ -1582,8 +1582,8 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
             />
           )}
           <MonacoEditorComponent
-            width={absoluteWidth}
-            height={absoluteHeight}
+            width="100%"
+            height="100%"
             theme="CodeSandbox"
             options={options}
             editorDidMount={this.configureEditor}