Editor Redesign & Extensions (codesandbox#1593)

Author: CompuIves

.circleci/config.yml

@@ -9,36 +9,42 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-            - v14-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
-            - v14-dependency-cache-{{ .Branch }}
-            - v14-dependency-cache
+            - v17-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+            - v17-dependency-cache-{{ .Branch }}
+            - v17-dependency-cache
       - restore_cache:
           keys:
-            - v14-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
-            - v14-standalone-dependency-cache-{{ .Branch }}
-            - v14-standalone-dependency-cache
+            - v17-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
+            - v17-standalone-dependency-cache-{{ .Branch }}
+            - v17-standalone-dependency-cache
       - run:
           name: Install Dependencies
           command: yarn install
       - save_cache:
-          key: v14-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          key: v17-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:
             - node_modules
             - packages/app/node_modules
+            - packages/chrome-extension/node_modules
             - packages/codesandbox-api/node_modules
             - packages/common/node_modules
+            - packages/dynamic-pages/node_modules
             - packages/homepage/node_modules
+            - packages/node-services/node_modules
+            - packages/react-embed/node_modules
             - packages/react-sandpack/node_modules
+            - packages/sandbox-hooks/node_modules
             - packages/sandpack/node_modules
+            - packages/sse-hooks/node_modules
       - save_cache:
-          key: v14-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
+          key: v17-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
           paths:
             - standalone-packages/codesandbox-browserfs/node_modules
       - run:
           name: Build
           command: yarn build:deps
       - save_cache:
-          key: v14-repo-{{ .Environment.CIRCLE_SHA1 }}
+          key: v17-repo-{{ .Environment.CIRCLE_SHA1 }}
           paths:
             - ~/codesandbox-client
 
@@ -48,19 +54,19 @@ jobs:
     working_directory: ~/codesandbox-client
     steps:
       - restore_cache:
-          key: v14-repo-{{ .Environment.CIRCLE_SHA1 }}
+          key: v17-repo-{{ .Environment.CIRCLE_SHA1 }}
       # We do this to compare sizes from these builds with master
       - restore_cache:
-          key: v14-prod-app-build-cache-master
+          key: v17-prod-app-build-cache-master
       - run:
           name: Build Application
           command: yarn build:prod
       - save_cache:
-          key: v14-prod-app-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: v17-prod-app-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
           paths:
             - ./packages/app/www
       - save_cache:
-          key: v14-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: v17-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
           paths:
             - ./www
 
@@ -70,7 +76,7 @@ jobs:
     working_directory: ~/codesandbox-client
     steps:
       - restore_cache:
-          key: v14-repo-{{ .Environment.CIRCLE_SHA1 }}
+          key: v17-repo-{{ .Environment.CIRCLE_SHA1 }}
       - run:
           name: Start Test Server
           command: yarn start:test
@@ -98,7 +104,7 @@ jobs:
     working_directory: ~/codesandbox-client
     steps:
       - restore_cache:
-          key: v14-repo-{{ .Environment.CIRCLE_SHA1 }}
+          key: v17-repo-{{ .Environment.CIRCLE_SHA1 }}
       - run:
           name: Test
           command: yarn test --ci --testResultsProcessor="jest-junit"
@@ -111,18 +117,29 @@ jobs:
     working_directory: ~/codesandbox-client
     steps:
       - restore_cache:
-          key: v14-repo-{{ .Environment.CIRCLE_SHA1 }}
+          key: v17-repo-{{ .Environment.CIRCLE_SHA1 }}
       - run:
           name: Lint
           command: yarn lint
 
+  typecheck:
+    docker:
+      - image: circleci/node:10
+    working_directory: ~/codesandbox-client
+    steps:
+      - restore_cache:
+          key: v17-repo-{{ .Environment.CIRCLE_SHA1 }}
+      - run:
+          name: Lint
+          command: yarn typecheck
+
   create-docker-image:
     machine: true
     working_directory: ~/codesandbox-client
     steps:
       - checkout
       - restore_cache:
-          key: v14-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: v17-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
       - run:
           name: Docker Sign In
           command: '[ -n "$DOCKER_USER" ] && echo $DOCKER_PWD | docker login -u $DOCKER_USER --password-stdin || true'
@@ -141,6 +158,9 @@ workflows:
       - test-integrations:
           requires:
             - build-dependencies
+      - typecheck:
+          requires:
+            - build-dependencies
       - test-jest:
           requires:
             - build-dependencies

.eslintrc

@@ -11,7 +11,9 @@
     "Raven": true,
     "VERSION": true,
     "$PropertyType": true,
-    "TimeoutID": true
+    "TimeoutID": true,
+    "object": true,
+    "__DEV__": true
   },
   "rules": {
     "react/jsx-filename-extension": 0,
@@ -28,6 +30,17 @@
     "no-nested-ternary": "warn",
     "react/require-default-props": "off",
     "import/no-named-default": 0,
-    "no-param-reassign": ["error", { "props": false }]
+    "import/no-webpack-loader-syntax": 0,
+    "import/extensions": [
+      "error",
+      "always",
+      {
+        "ts": "never",
+        "tsx": "never",
+        "js": "never"
+      }
+    ],
+    "no-param-reassign": ["error", { "props": false }],
+    "camelcase": "error"
   }
 }

Gulpfile.js

@@ -32,20 +32,20 @@ gulp.task('homepage', () =>
 gulp.task('monaco', () =>
   gulp
     .src('standalone-packages/monaco-editor/release/min/vs/**/*')
-    .pipe(gulp.dest('www/public/13/vs'))
+    .pipe(gulp.dest('www/public/14/vs'))
 );
 
 // Used for cases where HTML is cached
 gulp.task('old-browserfs', () =>
   gulp
     .src('standalone-packages/codesandbox-browserfs/dist/**/*')
-    .pipe(gulp.dest('www/static/browserfs'))
+    .pipe(gulp.dest('www/static/browserfs2'))
 );
 
 gulp.task('old-vscode', () =>
   gulp
     .src('standalone-packages/vscode-editor/release/min/vs/**/*')
-    .pipe(gulp.dest('public/vscode8/vs'))
+    .pipe(gulp.dest('www/public/vscode8/vs'))
 );
 
 gulp.task('statics', () =>

package.json

@@ -8,7 +8,7 @@
     "build:prod": "lerna run build  --scope homepage --stream && lerna run build --scope app --stream && gulp",
     "build:embed": "lerna run build:embed --scope app --stream && gulp",
     "build:clean": "lerna run build:clean --scope app --scope homepage && rimraf www",
-    "build:deps": "lerna run build:dev --scope codesandbox-api --scope codesandbox-browserfs --scope node-services --scope common && lerna run build:dev --scope sse-hooks",
+    "build:deps": "lerna run build:dev --scope common && lerna run build:dev --scope vscode-textmate --scope codesandbox-api --scope codesandbox-browserfs --scope node-services && lerna run build:dev --scope sse-hooks",
     "build:dynamic": "lerna run build --scope dynamic-pages --stream",
     "start": "yarn build:deps && lerna run start --scope app --stream",
     "start:fast": "lerna run start --scope app --stream",
@@ -24,7 +24,8 @@
     "add-contributor": "all-contributors add",
     "generate": "all-contributors generate",
     "precommit": "lint-staged",
-    "postinstall": "rimraf packages/app/node_modules/styled-components node_modules/react-split-pane/node_modules/react* && cp -R node_modules/uglify-es node_modules/terser && yarn lerna run install-dependencies --scope codesandbox-browserfs --scope sse-loading-screen --stream && opencollective postinstall"
+    "postinstall": "rimraf node_modules/@types packages/app/node_modules/styled-components node_modules/react-split-pane/node_modules/react* && cp -R node_modules/uglify-es node_modules/terser && yarn lerna run install-dependencies --scope vscode-textmate --scope codesandbox-browserfs --scope sse-loading-screen --stream && opencollective postinstall",
+    "typecheck": "lerna run typecheck --scope app"
   },
   "lint-staged": {
     "*.{js,css,json}": [
@@ -55,9 +56,10 @@
   },
   "resolutions": {
     "uglify-es": "npm:terser",
-    "react-split-pane/react-dom": "16.8.1"
+    "react-split-pane/react-dom": "^16.8.3"
   },
   "devDependencies": {
+    "@types/react": "^16.8.6",
     "all-contributors-cli": "^5.4.0",
     "babel-eslint": "^8.2.1",
     "eslint": "CompuIves/eslint#add/define-parser",

packages/app/config/webpack.common.js

@@ -98,6 +98,14 @@ module.exports = {
         loader: 'file-loader',
         type: 'javascript/auto',
       },
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader', // creates style nodes from JS strings
+          'css-loader', // translates CSS into CommonJS
+          'sass-loader', // compiles Sass to CSS, using Node Sass by default
+        ],
+      },
       // Transpile node dependencies, node deps are often not transpiled for IE11
       {
         test: [
@@ -155,6 +163,12 @@ module.exports = {
         loader: 'happypack/loader',
       },
 
+      {
+        test: /\.tsx?$/,
+        exclude: [/node_modules/],
+        loader: 'happypack/loader',
+      },
+
       // `eslint-plugin-vue/lib/index.js` depends on `fs` module we cannot use in browsers, so needs shimming.
       {
         test: new RegExp(`eslint-plugin-vue${sepRe}lib${sepRe}index\\.js$`),
@@ -419,6 +433,8 @@ module.exports = {
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'development') { ... }. See `env.js`.
     new webpack.DefinePlugin(env.default),
+
+    new webpack.DefinePlugin({ __DEV__ }),
     // Watcher doesn't work well if you mistype casing in a path so we use
     // a plugin that prints an error when you attempt to do this.
     // See https://github.com/facebookincubator/create-react-app/issues/240
@@ -449,16 +465,30 @@ module.exports = {
       [
         {
           from: '../../standalone-packages/vscode-editor/release/min/vs',
-          to: 'public/vscode9/vs',
+          to: 'public/vscode11/vs',
+          force: true,
+        },
+        {
+          from: '../../standalone-packages/vscode-extensions/out',
+          to: 'public/vscode-extensions/v1',
           force: true,
         },
         {
           from: '../../node_modules/onigasm/lib/onigasm.wasm',
           to: 'public/onigasm/2.2.1/onigasm.wasm',
         },
+        {
+          from:
+            '../../standalone-packages/vscode-textmate/node_modules/onigasm/lib/onigasm.wasm',
+          to: 'public/onigasm/2.1.0/onigasm.wasm',
+        },
         {
           from: '../../node_modules/monaco-vue/release/min',
-          to: 'public/13/vs/language/vue',
+          to: 'public/14/vs/language/vue',
+        },
+        {
+          from: '../../standalone-packages/monaco-editor/release/min/vs',
+          to: 'public/14/vs',
         },
         {
           from: '../sse-hooks/dist',
@@ -469,8 +499,10 @@ module.exports = {
           to: 'static',
         },
         {
-          from: '../../standalone-packages/codesandbox-browserfs/dist',
-          to: 'static/browserfs2',
+          from: __DEV__
+            ? '../../standalone-packages/codesandbox-browserfs/build'
+            : '../../standalone-packages/codesandbox-browserfs/dist',
+          to: 'static/browserfs3',
         },
       ].filter(x => x)
     ),

packages/app/config/webpack.dev.js

@@ -1,5 +1,5 @@
 const merge = require('webpack-merge');
-const webpack = require('webpack');
+// const webpack = require('webpack');
 const commonConfig = require('./webpack.common');
 
 const devEntries = [
@@ -28,8 +28,6 @@ module.exports = merge(
       removeEmptyChunks: false,
       splitChunks: false,
     },
-    plugins: [
-      // new webpack.HotModuleReplacementPlugin(),
-    ],
+    // plugins: [new webpack.HotModuleReplacementPlugin()],
   }
 );

packages/app/config/webpack.prod.js

@@ -107,8 +107,13 @@ module.exports = merge(commonConfig, {
       navigateFallback: publicPath + 'app.html',
       navigateFallbackWhitelist: [/\/s\//],
       // Don't precache sourcemaps (they're large) and build asset manifest:
-      staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
-      maximumFileSizeToCacheInBytes: 5242880,
+      staticFileGlobsIgnorePatterns: [
+        /\.map$/,
+        /vscode/,
+        /\/vs/,
+        /asset-manifest\.json$/,
+      ],
+      maximumFileSizeToCacheInBytes: 1024 * 1024 * 20, // 20mb
 
       runtimeCaching: [
         // Don't add this runtime cache as this causes us to give back *old*
@@ -144,6 +149,26 @@ module.exports = merge(commonConfig, {
             },
           },
         },
+        {
+          urlPattern: /\/vscode11/,
+          handler: 'cacheFirst',
+          options: {
+            cache: {
+              maximumFileSizeToCacheInBytes: 1024 * 1024 * 100, // 100mb
+              name: 'vscode',
+            },
+          },
+        },
+        {
+          urlPattern: /vscode-extensions\//,
+          handler: 'cacheFirst',
+          options: {
+            cache: {
+              maximumFileSizeToCacheInBytes: 1024 * 1024 * 100, // 100mb
+              name: 'vscode-extensions',
+            },
+          },
+        },
       ],
     }),
     // Generate a service worker script that will precache, and keep up to date,
@@ -178,7 +203,7 @@ module.exports = merge(commonConfig, {
       navigateFallbackWhitelist: [/^(?!\/__).*/],
       // Don't precache sourcemaps (they're large) and build asset manifest:
       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
-      maximumFileSizeToCacheInBytes: 5242880,
+      maximumFileSizeToCacheInBytes: 1024 * 1024 * 20, // 20mb
       runtimeCaching: [
         {
           urlPattern: /api\/v1\/sandboxes/,