new version

Author: CompuIves

.prettierignore

@@ -1,4 +1,8 @@
+!/standalone-packages/vscode/src/vs/codesandbox/
+!/standalone-packages/vscode/src/vs/codesandbox/*
+!/standalone-packages/vscode/src/vs/codesandbox/**/*.ts
+!/standalone-packages/vscode/src/vs/codesandbox/**/*.*
+
 static/
-package.json
-standalone-packages/vscode
-standalone-packages/
+/package.json
+/standalone-packages/*

Gulpfile.js

@@ -1,15 +1,44 @@
 const gulp = require('gulp');
+const _rimraf = require('rimraf');
 
-gulp.task('app', function() {
-  return gulp.src('packages/app/www/**/*').pipe(gulp.dest('www'));
-});
+function rimraf(dir) {
+  let retries = 0;
 
-gulp.task('homepage', function() {
-  return gulp.src('packages/homepage/public/**/*').pipe(gulp.dest('www'));
-});
+  const retry = cb => {
+    _rimraf(dir, { maxBusyTries: 1 }, err => {
+      if (!err) {
+        return cb();
+      }
 
-gulp.task('statics', function() {
-  return gulp.src('packages/app/public/**/*').pipe(gulp.dest('www'));
-});
+      if (err.code === 'ENOTEMPTY' && ++retries < 5) {
+        return setTimeout(() => retry(cb), 10);
+      }
+
+      return cb(err);
+    });
+  };
+
+  return cb => retry(cb);
+}
+
+gulp.task('app', () =>
+  gulp.src('packages/app/www/**/*').pipe(gulp.dest('www'))
+);
+
+gulp.task('homepage', () =>
+  gulp.src('packages/homepage/public/**/*').pipe(gulp.dest('www'))
+);
+
+gulp.task('statics', () =>
+  gulp.src('packages/app/public/**/*').pipe(gulp.dest('www'))
+);
 
 gulp.task('default', ['app', 'homepage', 'statics']);
+
+gulp.task('clean-vscode', rimraf('standalone-packages/monaco-editor-core'));
+
+gulp.task('prepare-vscode', ['clean-vscode'], () =>
+  gulp
+    .src('standalone-packages/vscode/out-monaco-editor-core/**/*')
+    .pipe(gulp.dest('standalone-packages/monaco-editor-core'))
+);

packages/app/config/webpack.common.js

@@ -443,16 +443,16 @@ module.exports = {
     new CopyWebpackPlugin(
       [
         // Our own custom version of monaco
-        !process.env.VSCODE && {
+        {
           from: __DEV__
             ? '../../standalone-packages/monaco-editor/release/dev/vs'
             : '../../standalone-packages/monaco-editor/release/min/vs',
           to: 'public/13/vs',
           force: true,
         },
         {
-          from: '../../standalone-packages/resolver/out',
-          to: 'public/vscode',
+          from: '../../standalone-packages/monaco-editor/release/min/vs',
+          to: 'public/vscode/vs',
           force: true,
         },
         __PROD__ && {

packages/app/package.json

@@ -144,7 +144,7 @@
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
     "codesandbox-api": "^0.0.18",
-    "codesandbox-import-utils": "^1.3.0",
+    "codesandbox-import-utils": "^1.3.3",
     "color": "^0.11.4",
     "compare-versions": "^3.1.0",
     "console-feed": "^2.8.0",

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

@@ -52,7 +52,7 @@ class MonacoEditor extends React.PureComponent {
         openModel: model => this.props.openReference(model),
       };
 
-      const appliedOptions = { ...options };
+      let appliedOptions = { ...options };
 
       const fonts = appliedOptions.fontFamily.split(',').map(x => x.trim());
       // We first just set the default fonts for the editor. When the custom font has loaded
@@ -78,6 +78,10 @@ class MonacoEditor extends React.PureComponent {
 
       appliedOptions.fontFamily = fonts.slice(1).join(', ');
 
+      if (localStorage.getItem('settings.experimentVSCode') === 'true') {
+        appliedOptions = {};
+      }
+
       this.editor = context.monaco.editor[
         diffEditor ? 'createDiffEditor' : 'create'
       ](this.containerElement, appliedOptions);

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

@@ -39,8 +39,6 @@ class MonacoEditor extends React.PureComponent {
   };
 
   afterViewInit = () => {
-    const context = this.props.context || window;
-
     require('app/vscode/dev-bootstrap').default([
       'vs/editor/codesandbox.editor.main',
     ])(() => {
@@ -91,7 +89,7 @@ class MonacoEditor extends React.PureComponent {
         { IEditorService },
         { ICodeEditorService },
         { ITextFileService },
-        { ILifecycleService, LifecyclePhase },
+        { ILifecycleService },
         { IEditorGroupsService },
       ] = [
         r('vs/codesandbox/services/codesandbox/browser/codesandboxService'),
@@ -106,14 +104,6 @@ class MonacoEditor extends React.PureComponent {
 
       const container = document.createElement('div');
       const part = document.createElement('div');
-
-      const editorElement = document.getElementById('workbench.main.container');
-      container.className = 'monaco-workbench';
-      editorElement.className += ' monaco-workbench mac nopanel';
-      editorElement.id = 'workbench.main.container';
-
-      part.className = 'part editor has-watermark';
-
       container.appendChild(part);
 
       const rootEl = document.getElementById('vscode-container');
@@ -127,6 +117,14 @@ class MonacoEditor extends React.PureComponent {
             i.createInstance(CodeSandboxService, controller),
         },
         services => {
+          const editorElement = document.getElementById(
+            'workbench.main.container'
+          );
+
+          container.className = 'monaco-workbench';
+          part.className = 'part editor has-watermark';
+          editorElement.className += ' monaco-workbench mac nopanel';
+
           const EditorPart = services.get(IEditorGroupsService);
           EditorPart.create(part);
 
@@ -141,7 +139,7 @@ class MonacoEditor extends React.PureComponent {
 
           const lifecycleService = services.get(ILifecycleService);
 
-          lifecycleService.phase = LifecyclePhase.Running;
+          lifecycleService.phase = 3; // Running
 
           const editorApi = {
             openFile(path: string) {
@@ -156,7 +154,9 @@ class MonacoEditor extends React.PureComponent {
             editorPart: EditorPart,
             editorService,
           };
-          console.log(services);
+          if (process.env.NODE_ENV === 'development') {
+            console.log(services);
+          }
 
           // After initializing monaco editor
           this.editorDidMount(editorApi, context.monaco);

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

@@ -26,7 +26,7 @@ import LinterWorker from 'worker-loader?publicPath=/&name=monaco-linter.[hash:8]
 
 import MonacoEditorComponent from './MonacoReactComponent';
 import type { EditorAPI } from './MonacoReactComponent';
-import { Container, CodeContainer } from './elements';
+import { Container } from './elements';
 import defineTheme from '../Monaco/define-theme';
 import getSettings from '../Monaco/settings';
 
@@ -220,7 +220,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     this.monaco = monaco;
 
     // Load Vue eagerly
-    // getMode('stub.vue', monaco)
+    getMode('stub.vue', monaco)
 
     monaco.languages.registerDocumentFormattingEditProvider('typescript', this);
     monaco.languages.registerDocumentFormattingEditProvider('javascript', this);
@@ -340,9 +340,8 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
 
     this.registerAutoCompletions();
 
-    setTimeout(() => {
-      liftOff(monaco);
-    }, 1000);
+
+    liftOff(monaco);
   };
 
   setCompilerOptions = () => {
@@ -699,7 +698,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       code !== this.getCode() &&
       (!moduleId || this.currentModule.id === moduleId)
     ) {
-      this.updateCode(code);
+      // this.updateCode(code);
       this.lint(
         code,
         this.currentModule.title,

packages/app/src/app/components/Preview/index.js

@@ -177,6 +177,8 @@ class BasePreview extends React.Component<Props, State> {
     if (props.delay) {
       this.executeCode = debounce(this.executeCode, 800);
     }
+
+    window.openNewWindow = this.openNewWindow;
   }
 
   componentWillUpdate(nextProps: Props, nextState: State) {

packages/app/src/app/index.html

@@ -66,12 +66,12 @@
       }
     </script>
 
-    <link data-name="/vscode/out-editor/vs/editor/editor.main"
+    <link data-name="/public/vscode/vs/editor/editor.main"
       rel="preload"
       as="style"
-      href="/vscode/out-editor/vs/editor/editor.main.css">
+      href="/public/vscode/vs/editor/editor.main.css">
     </link>
-    <link rel="preload" as="script" href="/vscode/out-editor/vs/editor/editor.main.js"></link>
+    <link rel="preload" as="script" href="/public/vscode/vs/editor/editor.main.js"></link>
   </head>
   <body style="margin: 0; padding: 0;">
     <!-- Google Tag Manager (noscript) -->

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/FlyingContainer.js

@@ -318,7 +318,7 @@ class FlyingContainer extends React.Component<Props, State> {
             flex: width ? `0 0 ${width}px` : undefined,
             height,
             boxShadow: hide ? 'none' : '0 3px 8px rgba(0, 0, 0, 0.5)',
-            zIndex: 60,
+            zIndex: 2,
 
             visiblity: hide ? 'hidden' : undefined,
             pointerEvents: hide ? 'none' : undefined,