Fix babel warning when downloading dynamic files in worker (codesandbox#2464)

Whenever we try to download dynamic files in a worker we need to write the
downloaded files to the filesystem. The reason for this is that we have a
separate fs in the worker that's synced eagerly, because when we need to execute
files in the worker we can only retrieve the files synchronously. We used to
save the files to the WorkerFS, the WorkerFS is responsible for downloading the
files from the main thread. But this FS would get confused by also writing to it
from the worker, and then get out of sync.

I now wrapped the WorkerFS with an OverlayFS so that writes are written on top of
the FS, but not to the FS. I had to bump our browserfs version for this.

Author: CompuIves

packages/app/config/build.js

@@ -29,6 +29,13 @@ const staticAssets = [
     from: 'packages/app/static',
     to: 'static',
   },
+  {
+    from: isDev
+      ? 'standalone-packages/codesandbox-browserfs/build'
+      : 'standalone-packages/codesandbox-browserfs/dist',
+    to: 'static/browserfs4',
+  },
+  // For caching purposes
   {
     from: isDev
       ? 'standalone-packages/codesandbox-browserfs/build'

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

@@ -3,7 +3,7 @@ import Linter from 'eslint/lib/linter';
 import monkeypatch from './monkeypatch-babel-eslint';
 
 self.importScripts(
-  `${process.env.CODESANDBOX_HOST}/static/browserfs3/browserfs.min.js`
+  `${process.env.CODESANDBOX_HOST}/static/browserfs4/browserfs.min.js`
 );
 
 /* eslint-disable global-require */

packages/app/src/app/index.html

@@ -48,7 +48,7 @@
 	</script>
 	<!-- End Google Tag Manager -->
 	<!-- <script async src="//cdn.headwayapp.co/widget.js"></script> -->
-	<script src="<%= webpackConfig.output.publicPath %>static/browserfs3/browserfs<%=process.env.NODE_ENV
+	<script src="<%= webpackConfig.output.publicPath %>static/browserfs4/browserfs<%=process.env.NODE_ENV
       === 'development' ? '' : '.min'%>.js"
 	 type="text/javascript"></script>
 

packages/app/src/app/vscode/extensionHostWorker/common/global.ts

@@ -1,3 +1,4 @@
+/* eslint-disable global-require */
 import { EventEmitter } from 'events';
 import requirePolyfills from '@codesandbox/common/lib/load-dynamic-polyfills';
 
@@ -19,13 +20,12 @@ export const initializePolyfills = () => {
 
 export const loadBrowserFS = () => {
   ctx.importScripts(
-    `${process.env.CODESANDBOX_HOST}/static/browserfs3/browserfs.js`
+    `${process.env.CODESANDBOX_HOST}/static/browserfs4/browserfs.js`
   );
 };
 
 export const initializeGlobals = () => {
   // We need to initialize some node environment stubs
-  ctx.BrowserFS = ctx.BrowserFS;
   ctx.process = ctx.BrowserFS.BFSRequire('process');
   ctx.process.platform = 'linux';
   ctx.process.stdin = new EventEmitter();

packages/app/src/embed/index.html

@@ -37,7 +37,7 @@
     </script>
     <!-- End Google Tag Manager -->
 
-    <script src="<%= webpackConfig.output.publicPath %>static/browserfs3/browserfs<%=process.env.NODE_ENV
+    <script src="<%= webpackConfig.output.publicPath %>static/browserfs4/browserfs<%=process.env.NODE_ENV
       === 'development' ? '' : '.min'%>.js"
       type="text/javascript"></script>
 

packages/app/src/sandbox/eval/npm/fetch-npm-module.ts

@@ -79,7 +79,7 @@ const urlProtocols = {
   },
   unpkg: {
     file: async (name: string, version: string, path: string) =>
-      `https://unpkg.com/${name}@${version}/${path}`,
+      `https://unpkg.com/${name}@${version}${path}`,
     meta: async (name: string, version: string) =>
       `https://unpkg.com/${name}@${version}/?meta`,
     normalizeMeta: normalize,

packages/app/src/sandbox/eval/transpilers/babel/worker/babel-worker.js

@@ -12,7 +12,7 @@ import dynamicCSSModules from './plugins/babel-plugin-dynamic-css-modules';
 
 import { buildWorkerError } from '../../utils/worker-error-handler';
 import getDependencies from './get-require-statements';
-import { downloadFromError } from './dynamic-download';
+import { downloadFromError, downloadPath } from './dynamic-download';
 
 import { evaluateFromPath, resetCache } from './evaluate';
 import {
@@ -85,10 +85,16 @@ async function initializeBrowserFS() {
   return new Promise(resolve => {
     BrowserFS.configure(
       {
-        fs: 'AsyncMirror',
+        fs: 'OverlayFS',
         options: {
-          sync: { fs: 'InMemory' },
-          async: { fs: 'WorkerFS', options: { worker: self } },
+          writable: { fs: 'InMemory' },
+          readable: {
+            fs: 'AsyncMirror',
+            options: {
+              sync: { fs: 'InMemory' },
+              async: { fs: 'WorkerFS', options: { worker: self } },
+            },
+          },
         },
       },
       e => {
@@ -127,6 +133,7 @@ async function installPlugin(Babel, BFSRequire, plugin, currentPath, isV7) {
   let evaluatedPlugin = null;
 
   try {
+    await downloadPath(plugin);
     evaluatedPlugin = evaluateFromPath(
       fs,
       BFSRequire,

packages/app/src/sandbox/eval/transpilers/babel/worker/index.js

@@ -3,7 +3,7 @@ import loadPolyfills from '@codesandbox/common/lib/load-dynamic-polyfills';
 require('app/config/polyfills');
 
 self.importScripts(
-  `${process.env.CODESANDBOX_HOST}/static/browserfs3/browserfs.min.js`
+  `${process.env.CODESANDBOX_HOST}/static/browserfs4/browserfs.min.js`
 );
 
 self.process = self.BrowserFS.BFSRequire('process');

packages/app/src/sandbox/eval/transpilers/sass/worker/index.js

@@ -1,5 +1,5 @@
 self.importScripts(
-  `${process.env.CODESANDBOX_HOST}/static/browserfs3/browserfs.min.js`
+  `${process.env.CODESANDBOX_HOST}/static/browserfs4/browserfs.min.js`
 );
 
 self.process = self.BrowserFS.BFSRequire('process');

packages/app/src/sandbox/index.html

@@ -7,7 +7,7 @@
     <title>Sandbox - CodeSandbox</title>
     <link rel="manifest" href="/manifest.json">
     <link rel="shortcut icon" href="/favicon.ico">
-    <script src="<%= webpackConfig.output.publicPath %>static/browserfs3/browserfs.min.js"
+    <script src="<%= webpackConfig.output.publicPath %>static/browserfs4/browserfs.min.js"
       type="text/javascript"></script>
 
     <script>