Server Side Evaluation (codesandbox#1109)

Author: CompuIves

.circleci/config.yml

@@ -77,15 +77,15 @@ jobs:
           background: true
       - run:
           name: Setup BrowserStack local environment
-          command: "[ -n \"$BROWSER_STACK_KEY\" ] && ./packages/app/integration-tests/BrowserStackLocal --key $BROWSER_STACK_KEY || true"
+          command: '[ -n "$BROWSER_STACK_KEY" ] && ./packages/app/integration-tests/BrowserStackLocal --key $BROWSER_STACK_KEY || true'
           background: true
       - run:
           name: Test Integrations
           command: |
             sleep 15
             yarn test:integrations --ci --testResultsProcessor="jest-junit"
           environment:
-            JEST_JUNIT_OUTPUT: "/tmp/test-results/js-test-results.xml"
+            JEST_JUNIT_OUTPUT: '/tmp/test-results/js-test-results.xml'
       - store_test_results:
           path: /tmp/test-results
       - store_artifacts:
@@ -103,7 +103,7 @@ jobs:
           name: Test
           command: yarn test --ci --testResultsProcessor="jest-junit"
           environment:
-            JEST_JUNIT_OUTPUT: "reports/junit/js-test-results.xml"
+            JEST_JUNIT_OUTPUT: 'reports/junit/js-test-results.xml'
 
   lint:
     docker:
@@ -125,22 +125,22 @@ jobs:
           key: v12-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"
+          command: '[ -n "$DOCKER_USER" ] && echo $DOCKER_PWD | docker login -u $DOCKER_USER --password-stdin || true'
       - run:
           name: Create Image
-          command: "[ -n \"$DOCKER_USER\" ] && docker build -t codesandbox/client:${CIRCLE_SHA1:0:7} . || true"
+          command: '[ -n "$DOCKER_USER" ] && docker build -t codesandbox/client:${CIRCLE_SHA1:0:7} . || true'
       - deploy:
           name: Push Image
-          command: "[ -n \"$DOCKER_USER\" ] && docker push codesandbox/client:${CIRCLE_SHA1:0:7} || true"
+          command: '[ -n "$DOCKER_USER" ] && docker push codesandbox/client:${CIRCLE_SHA1:0:7} || true'
 
 workflows:
   version: 2
   build-and-test:
     jobs:
       - build-dependencies
-      - test-integrations:
-          requires:
-            - build-dependencies
+      # - test-integrations:
+      #     requires:
+      #       - build-dependencies
       - test-jest:
           requires:
             - build-dependencies
@@ -154,4 +154,5 @@ workflows:
           requires:
             - build-prod
             - lint
+            # - test-integrations
             - test-jest

.eslintrc

@@ -10,7 +10,8 @@
   "globals": {
     "Raven": true,
     "VERSION": true,
-    "$PropertyType": true
+    "$PropertyType": true,
+    "TimeoutID": true
   },
   "rules": {
     "react/jsx-filename-extension": 0,

package.json

@@ -20,7 +20,7 @@
     "add-contributor": "all-contributors add",
     "generate": "all-contributors generate",
     "precommit": "lint-staged",
-    "postinstall": "rimraf packages/app/node_modules/styled-components && yarn lerna run install-dependencies --scope codesandbox-browserfs --stream"
+    "postinstall": "rimraf packages/app/node_modules/styled-components && yarn lerna run install-dependencies --scope codesandbox-browserfs --scope sse-loading-screen --stream"
   },
   "lint-staged": {
     "*.{js,css,json}": [
@@ -35,7 +35,9 @@
       "packages/codesandbox-api",
       "packages/sandpack",
       "packages/react-sandpack",
-      "packages/homepage"
+      "packages/homepage",
+      "packages/sandbox-hooks",
+      "packages/sse-hooks"
     ],
     "nohoist": ["**/gatsby", "**/gatsby/**"]
 },

packages/app/config/webpack.common.js

@@ -114,6 +114,7 @@ module.exports = {
           new RegExp(`${sepRe}node_modules${sepRe}.*ansi-styles`),
           new RegExp(`${sepRe}node_modules${sepRe}.*chalk`),
           new RegExp(`${sepRe}node_modules${sepRe}.*jest`),
+          new RegExp(`sandbox-hooks`),
           new RegExp(`${sepRe}node_modules${sepRe}.*monaco-textmate`),
           new RegExp(`${sepRe}node_modules${sepRe}.*onigasm`),
           new RegExp(

packages/app/package.json

@@ -128,7 +128,7 @@
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
     "codesandbox-api": "^0.0.18",
-    "codesandbox-import-utils": "1.2.10",
+    "codesandbox-import-utils": "^1.3.0",
     "color": "^0.11.4",
     "compare-versions": "^3.1.0",
     "console-feed": "^2.8.0",
@@ -209,6 +209,7 @@
     "react-virtualized": "^9.19.1",
     "shelljs": "^0.7.8",
     "shortid": "^2.2.8",
+    "socket.io-client": "^2.1.1",
     "store": "^2.0.12",
     "string-replace-loader": "^2.1.1",
     "styled-components": "^3.2.1",
@@ -218,7 +219,8 @@
     "vue-eslint-parser": "^2.0.3",
     "vue-hot-reload-api": "^2.2.4",
     "vue-template-compiler": "^2.5.2",
-    "vue-template-es2015-compiler": "^1.6.0"
+    "vue-template-es2015-compiler": "^1.6.0",
+    "xterm": "3.7.0"
   },
   "jest": {
     "roots": [
@@ -232,7 +234,7 @@
       "/create-zip\\/.*\\/files/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(common|lodash-es|react-icons))"
+      "node_modules/(?!(common|lodash-es|sandbox-hooks|react-icons))"
     ],
     "moduleNameMapper": {
       "\\.css$": "<rootDir>/__mocks__/styleMock.js",

packages/app/scripts/start.js

@@ -203,10 +203,19 @@ function addMiddleware(devServer, index) {
     devServer.use(
       '/api',
       proxy({
-        target: 'https://codesandbox.io',
+        target: 'https://codesandbox.stream',
         changeOrigin: true,
       })
     );
+
+    devServer.use(
+      '/socket.io',
+      proxy({
+        target: 'https://sse.codesandbox.stream',
+        changeOrigin: true,
+        secure: false,
+      })
+    );
   }
   // Finally, by now we have certainly resolved the URL.
   // It may be /index.html, so let the dev server try serving it again.

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

@@ -349,7 +349,7 @@ self.addEventListener('message', async event => {
   let config = defaultConfig;
   let options = { filename };
 
-  if (template === 'vue-cli') {
+  if (template === 'vue-cli' || template === 'nuxt') {
     const {
       getConfig: getVueConfig,
       getVerifyOptions: getVueVerifyOptions,

packages/app/src/app/components/CodeEditor/types.js

@@ -1,23 +1,28 @@
 // @flow
+
 import type {
   Module,
   Sandbox,
   ModuleError,
   ModuleCorrection,
+  Preferences,
 } from 'common/types';
 
-export type Settings = {
-  autoCompleteEnabled: boolean,
-  autoDownloadTypes: boolean,
-  codeMirror: boolean,
-  fontFamily?: string,
-  fontSize: number,
-  lineHeight: number,
-  lintEnabled: boolean,
-  vimMode: boolean,
-  tabWidth: number,
-  enableLigatures: boolean,
-};
+export type Settings =
+  | Preferences
+  | {
+      autoCompleteEnabled: boolean,
+      autoDownloadTypes: boolean,
+      codeMirror: boolean,
+      fontFamily?: string,
+      fontSize: number,
+      lineHeight: number,
+      lintEnabled: boolean,
+      vimMode: boolean,
+      tabWidth: number,
+      enableLigatures: boolean,
+      forceRefresh: boolean,
+    };
 
 type ModuleTab = {
   type: 'MODULE',