moved instantiation of vscode to effect, written components, re… (#2510)

moved instantiation of vscode to effect, written components, reviewed

Author: christianalfoni

.drone.yml

@@ -26,7 +26,7 @@ steps:
       - yarn build
 
   - name: deploy
-    image: lbogdan/codesandbox-deploy-plugin:2
+    image: lbogdan/codesandbox-deploy-plugin:3
     settings:
       domain: &domain build.csb.dev
     volumes:
@@ -177,6 +177,6 @@ trigger:
   branch: master
 ---
 kind: signature
-hmac: 015a8ddaa2fa145808e3c30ad05da71d03e3b8653b6bddb41547f13611397070
+hmac: e625eaf2e469b9b6763641d4cc1f089900ef8d8c41db32c6f6aacb27bee8c19c
 
 ...

.gitignore

@@ -21,6 +21,7 @@ npm-debug.log
 yarn-error.log
 .idea
 jest
+stats.json
 
 lerna-debug.log
 

packages/app/config/build.js

@@ -3,7 +3,7 @@ const { SANDBOX_ONLY } = process.env;
 const staticAssets = [
   !SANDBOX_ONLY && {
     from: 'standalone-packages/vscode-editor/release/min/vs',
-    to: 'public/vscode24/vs',
+    to: 'public/vscode25/vs',
   },
   !SANDBOX_ONLY && {
     from: 'standalone-packages/vscode-extensions/out',
@@ -30,6 +30,13 @@ const staticAssets = [
     from: 'packages/app/static',
     to: 'static',
   },
+  {
+    from: isDev
+      ? 'standalone-packages/codesandbox-browserfs/build'
+      : 'standalone-packages/codesandbox-browserfs/dist',
+    to: 'static/browserfs7',
+  },
+  // For caching purposes
   {
     from: isDev
       ? 'standalone-packages/codesandbox-browserfs/build'

packages/app/config/webpack.common.js

@@ -384,6 +384,7 @@ module.exports = {
       /browserfs\.min\.js/,
       /standalone-packages\/codesandbox-browserfs/,
       /standalone-packages\/vscode\//,
+      /fontfaceobserver\.standalone\.js/,
     ],
   },
 

packages/app/config/webpack.prod.js

@@ -180,7 +180,7 @@ module.exports = merge(commonConfig, {
           },
         },
         {
-          urlPattern: /\/vscode24/,
+          urlPattern: /\/vscode25/,
           handler: 'cacheFirst',
           options: {
             cache: {

packages/app/package.json

@@ -10,6 +10,7 @@
   "license": "MIT",
   "scripts": {
     "build": "cross-env NODE_ENV=production NODE_OPTIONS=\"--max-old-space-size=4096\"   node scripts/build.js",
+    "build:stats": "cross-env NODE_ENV=production NODE_OPTIONS=\"--max-old-space-size=4096\"   webpack --env production --config config/webpack.prod.js --json --profile --progress > stats.json && node scripts/stats",
     "build:clean": "rimraf www",
     "build:embed": "cross-env NODE_ENV=production webpack --config config/webpack.embed.js",
     "build:sandbox": "cross-env NODE_ENV=production SANDBOX_ONLY=true node scripts/build.js && yarn copy-assets",
@@ -69,8 +70,6 @@
     "@apollo/react-hooks": "^0.1.0-beta.2",
     "@babel/plugin-transform-destructuring": "^7.5.0",
     "@babel/preset-env": "^7.5.5",
-    "@cerebral/http": "^4.0.0",
-    "@cerebral/mobx-state-tree": "^3.0.0",
     "@codesandbox/executors": "^0.1.0",
     "@codesandbox/template-icons": "^1.0.1",
     "@emmetio/codemirror-plugin": "^0.3.5",
@@ -97,7 +96,6 @@
     "base64-loader": "^1.0.0",
     "browser-detect": "^0.2.28",
     "browser-resolve": "CompuIves/node-browser-resolve",
-    "cerebral": "^4.0.0",
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
     "codesandbox-api": "0.0.23",

packages/app/scripts/copy-assets.js

@@ -25,7 +25,7 @@ const assets = [
   },
   !SANDBOX_ONLY && {
     from: 'standalone-packages/vscode-editor/release/min/vs',
-    to: 'public/vscode22/vs',
+    to: 'public/vscode24/vs',
   },
   {
     from: 'packages/app/public',

packages/app/scripts/stats.js

@@ -0,0 +1,23 @@
+/* eslint-disable */
+const stats = require('../stats.json');
+
+const longTime = stats.modules.filter(stat => {
+  if (stat.profile && stat.profile.building > 1000) {
+    return stat;
+  }
+});
+
+longTime
+  .sort((a, b) => (a.profile.building > b.profile.building ? 1 : -1))
+  .forEach(stat => {
+    console.log(
+      JSON.stringify(
+        {
+          id: stat.id,
+          profile: stat.profile,
+        },
+        null,
+        2
+      )
+    );
+  });

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

@@ -1,28 +1,24 @@
 // @flow
 
-import * as React from 'react';
-import CodeMirror from 'codemirror';
-import { withTheme } from 'styled-components';
-
-import type { ModuleError, Module } from '@codesandbox/common/lib/types';
-import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
-import { getCodeMirror } from 'app/utils/codemirror';
-
-import { listen } from 'codesandbox-api';
-
 import 'codemirror/addon/dialog/dialog';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/tern/tern';
 import 'codemirror/addon/lint/lint.css';
 import 'codemirror/addon/lint/lint';
 
-import FuzzySearch from '../FuzzySearch';
-import { Container, CodeContainer } from './elements';
-
+import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
+import type { Module, ModuleError } from '@codesandbox/common/lib/types';
+import { getCodeMirror } from 'app/utils/codemirror';
+import CodeMirror from 'codemirror';
+import { listen } from 'codesandbox-api';
+import * as React from 'react';
+import { withTheme } from 'styled-components';
 // eslint-disable-next-line
-import LinterWorker from 'worker-loader?publicPath=/&name=monaco-linter.[hash:8].worker.js!../Monaco/workers/linter';
+import LinterWorker from 'worker-loader?publicPath=/&name=monaco-linter.[hash:8].worker.js!app/overmind/effects/vscode/LinterWorker/index';
 
-import type { Props, Editor } from '../types';
+import FuzzySearch from '../FuzzySearch';
+import type { Editor, Props } from '../types';
+import { CodeContainer, Container } from './elements';
 
 type State = { fuzzySearchEnabled: boolean };
 

packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx

@@ -2,22 +2,21 @@ import { ConfigurationFile } from '@codesandbox/common/lib/templates/configurati
 import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 import theme from '@codesandbox/common/lib/theme';
 import { Module } from '@codesandbox/common/lib/types';
-import { TextOperation } from 'ot';
-import React from 'react';
-
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import getType from 'app/utils/get-type';
+import { TextOperation } from 'ot';
+import React from 'react';
 
-import { Props as EditorProps, Editor } from '../../types'; // eslint-disable-line
-
-import { Container, Title, Description } from './elements';
+import { Editor, Props as EditorProps } from '../../types'; // eslint-disable-line
+import { Container, Description, Title } from './elements';
 
 type Disposable = {
   dispose: () => void;
 };
 
 type Props = EditorProps & {
   config: ConfigurationFile;
+  onChange: (code: string, moduleShortid: string) => void;
   toggleConfigUI: () => void;
   onDidChangeDirty: (cb: () => void) => Disposable;
   getCode: () => string;