Upgrade Sandpack and support custom root URLs (codesandbox#2489)

* Update dependencies

* Make sandpack and react-sandpack work standalone

Author: CompuIves

.eslintignore

@@ -1,2 +1,3 @@
 **/cra-files/*.*
 **/eslint-lint.js
+**/stories/*.*

package.json

@@ -13,8 +13,6 @@
       "packages/homepage",
       "packages/common",
       "packages/codesandbox-api",
-      "packages/sandpack",
-      "packages/react-sandpack",
       "packages/node-services",
       "packages/sandbox-hooks",
       "packages/sse-hooks",
@@ -39,9 +37,9 @@
     "build:embed": "lerna run build:embed --scope app --stream && gulp",
     "build:prod": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" lerna run build  --scope homepage --stream && lerna run build --scope app --stream && lerna run copy-assets --scope app --stream",
     "commit": "concurrently \"yarn typecheck\" \"yarn lint\" && git commit -m",
+    "postinstall": "yarn lerna run install-dependencies --stream && opencollective postinstall",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
-    "postinstall": "yarn lerna run install-dependencies --scope vscode-textmate --scope codesandbox-browserfs --scope sse-loading-screen --stream && opencollective postinstall",
     "lint": "lerna run lint --stream",
     "now-build": "yarn build:deps && lerna run build:storybook --scope @codesandbox/common",
     "start": "yarn build:deps && lerna run start --scope @codesandbox/common --scope app --parallel",

packages/app/config/build.js

@@ -1,27 +1,28 @@
 const isDev = process.env.NODE_ENV === 'development';
+const { SANDBOX_ONLY } = process.env;
 const staticAssets = [
-  {
+  !SANDBOX_ONLY && {
     from: 'standalone-packages/vscode-editor/release/min/vs',
     to: 'public/vscode24/vs',
   },
-  {
+  !SANDBOX_ONLY && {
     from: 'standalone-packages/vscode-extensions/out',
     to: 'public/vscode-extensions/v10',
   },
-  {
+  !SANDBOX_ONLY && {
     from: 'node_modules/onigasm/lib/onigasm.wasm',
     to: 'public/onigasm/2.2.1/onigasm.wasm',
   },
-  {
+  !SANDBOX_ONLY && {
     from:
       'standalone-packages/vscode-textmate/node_modules/onigasm/lib/onigasm.wasm',
     to: 'public/onigasm/2.1.0/onigasm.wasm',
   },
-  {
+  !SANDBOX_ONLY && {
     from: 'node_modules/monaco-vue/release/min',
     to: 'public/14/vs/language/vue',
   },
-  {
+  !SANDBOX_ONLY && {
     from: 'standalone-packages/monaco-editor/release/min/vs',
     to: 'public/14/vs',
   },
@@ -56,7 +57,7 @@ const staticAssets = [
       : 'standalone-packages/codesandbox-browserfs/dist',
     to: 'static/browserfs3',
   },
-];
+].filter(Boolean);
 
 module.exports = {
   staticAssets,

packages/app/config/webpack.common.js

@@ -2,15 +2,15 @@
 const webpack = require('webpack');
 const path = require('path');
 const fs = require('fs');
-const paths = require('./paths');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const threadLoader = require('thread-loader');
-const WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin');
 const env = require('@codesandbox/common/lib/config/env');
 const getHost = require('@codesandbox/common/lib/utils/host');
 const postcssNormalize = require('postcss-normalize');
+const WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin');
+const paths = require('./paths');
 
 const babelDev = require('./babel.dev');
 const babelProd = require('./babel.prod');
@@ -426,7 +426,7 @@ module.exports = {
           new HtmlWebpackPlugin({
             inject: true,
             chunks: ['sandbox-startup', 'vendors~sandbox', 'sandbox'],
-            filename: 'frame.html',
+            filename: 'index.html',
             template: paths.sandboxHtml,
             minify: __PROD__ && {
               removeComments: true,

packages/app/config/webpack.prod.js

@@ -227,7 +227,9 @@ module.exports = merge(commonConfig, {
       minify: true,
       // For unknown URLs, fallback to the index page
       navigateFallback: 'https://new.codesandbox.io/frame.html',
-      staticFileGlobs: ['www/frame.html'],
+      staticFileGlobs: process.env.SANDBOX_ONLY
+        ? ['www/index.html']
+        : ['www/frame.html'],
       stripPrefix: 'www/',
       // Ignores URLs starting from /__ (useful for Firebase):
       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219

packages/app/package.json

@@ -12,7 +12,8 @@
     "build": "cross-env NODE_ENV=production NODE_OPTIONS=\"--max-old-space-size=4096\"   node scripts/build.js",
     "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",
+    "build:sandbox": "cross-env NODE_ENV=production SANDBOX_ONLY=true node scripts/build.js && yarn copy-assets",
+    "build:sandpack-sandbox": "cross-env NODE_ENV=production SANDPACK=true SANDBOX_ONLY=true node scripts/build.js && cross-env SANDBOX_ONLY=true yarn copy-assets",
     "copy-assets": "cross-env NODE_ENV=production node scripts/copy-assets.js",
     "integrations:start": "docker run -v $(pwd):/app/ -it codesandbox/test yarn start:test",
     "lint": "npm run lint:app && npm run lint:embed && npm run lint:sandbox",
@@ -22,6 +23,7 @@
     "start": "cross-env LOCAL_SERVER=1 LOCAL_DEV=1 NODE_OPTIONS=\"--max-old-space-size=4096\" node scripts/start.js",
     "start:dev_api": "node scripts/start.js",
     "start:sandbox": "cross-env SANDBOX_ONLY=true node scripts/start.js",
+    "start:sandpack-sandbox": "cross-env SANDPACK=true LOCAL_SERVER=1 SANDBOX_ONLY=true node scripts/start.js",
     "start:test": "cross-env LOCAL_SERVER=1 SANDBOX_ONLY=true node scripts/start.js",
     "test": "jest --env=jsdom",
     "test:integrations": "jest --config integration-tests/jest.config.json --maxWorkers=2",
@@ -98,7 +100,7 @@
     "cerebral": "^4.0.0",
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
-    "codesandbox-api": "^0.0.22",
+    "codesandbox-api": "0.0.23",
     "codesandbox-import-utils": "2.1.2",
     "color": "^0.11.4",
     "compare-versions": "^3.1.0",

packages/app/scripts/copy-assets.js

@@ -3,33 +3,35 @@ const fs = require('fs-extra');
 const path = require('path');
 const { staticAssets } = require('../config/build');
 
+const { SANDBOX_ONLY } = process.env;
+
 const assets = [
   ...staticAssets,
   {
     from: 'packages/app/www',
     to: '',
   },
-  {
+  !SANDBOX_ONLY && {
     from: 'packages/homepage/public',
     to: '',
   },
-  {
+  !SANDBOX_ONLY && {
     from: 'standalone-packages/monaco-editor/release/min/vs',
     to: 'public/14/vs',
   },
   {
     from: 'standalone-packages/codesandbox-browserfs/dist',
     to: 'static/browserfs2',
   },
-  {
+  !SANDBOX_ONLY && {
     from: 'standalone-packages/vscode-editor/release/min/vs',
     to: 'public/vscode22/vs',
   },
   {
     from: 'packages/app/public',
     to: '',
   },
-];
+].filter(Boolean);
 
 const rootPath = path.resolve(__dirname, '../../..');
 const buildPath = path.resolve(rootPath, 'www');

packages/codesandbox-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codesandbox-api",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "",
   "keywords": [],
   "repository": {

packages/common/package.json

@@ -48,7 +48,7 @@
     "@tippy.js/react": "^2.1.1",
     "babel-plugin-preval": "^3.0.1",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "codesandbox-api": "^0.0.22",
+    "codesandbox-api": "0.0.23",
     "color": "0.11.4",
     "date-fns": "^2.0.0",
     "dot-object": "1.9.0",

packages/common/src/utils/host.ts

@@ -1,6 +1,10 @@
 const IS_LOCAL_SERVER = Boolean(JSON.stringify(process.env.LOCAL_SERVER));
 
 export default () => {
+  if ('SANDPACK' in process.env) {
+    return '';
+  }
+
   if (IS_LOCAL_SERVER) {
     return 'http://localhost:3000';
   }