fix: Fix a bunch of race conditions and replace fs with gensync equivalent

packages/app/src/sandbox/eval/transpilers/babel/index.ts

@@ -26,11 +26,32 @@ interface TranspilationResult {
 const global = window as any;
 const WORKER_COUNT = process.env.SANDPACK ? 1 : 3;
 
+interface IDep {
+  path: string;
+  isAbsolute?: boolean;
+  isEntry?: boolean;
+  isGlob?: boolean;
+}
+
 function addCollectedDependencies(
   loaderContext: LoaderContext,
-  deps: Array<string>
+  deps: Array<IDep>
 ): Promise<Array<void>> {
-  return Promise.all(deps.map(dep => loaderContext.addDependency(dep)));
+  return Promise.all(
+    deps.map(async dep => {
+      if (dep.isGlob) {
+        loaderContext.addDependenciesInDirectory(dep.path, {
+          isAbsolute: dep.isAbsolute,
+          isEntry: dep.isEntry,
+        });
+      } else {
+        await loaderContext.addDependency(dep.path, {
+          isAbsolute: dep.isAbsolute,
+          isEntry: dep.isEntry,
+        });
+      }
+    })
+  );
 }
 
 // Right now this is in a worker, but when we're going to allow custom plugins
@@ -100,7 +121,12 @@ class BabelTranspiler extends WorkerTranspiler {
             // We collect requires instead of doing this in convertESModule as some modules also use require
             // Which is actually invalid but we probably don't wanna break anyone's code if it works in other bundlers...
             const deps = collectDependenciesFromAST(ast);
-            await addCollectedDependencies(loaderContext, deps);
+            await addCollectedDependencies(
+              loaderContext,
+              deps.map(d => ({
+                path: d,
+              }))
+            );
             rewriteImportMeta(ast, {
               url: loaderContext.url,
             });
@@ -113,7 +139,12 @@ class BabelTranspiler extends WorkerTranspiler {
           // If the code is commonjs and does not contain any more jsx, we generate and return the code.
           measure(`dep-collection-${path}`);
           const deps = collectDependenciesFromAST(ast);
-          await addCollectedDependencies(loaderContext, deps);
+          await addCollectedDependencies(
+            loaderContext,
+            deps.map(d => ({
+              path: d,
+            }))
+          );
           endMeasure(`dep-collection-${path}`, { silent: true });
           return {
             transpiledCode: code,
@@ -175,21 +206,7 @@ class BabelTranspiler extends WorkerTranspiler {
       loaderContext
     );
 
-    await Promise.all(
-      foundDependencies.map(async dep => {
-        if (dep.isGlob) {
-          loaderContext.addDependenciesInDirectory(dep.path, {
-            isAbsolute: dep.isAbsolute,
-            isEntry: dep.isEntry,
-          });
-        } else {
-          await loaderContext.addDependency(dep.path, {
-            isAbsolute: dep.isAbsolute,
-            isEntry: dep.isEntry,
-          });
-        }
-      })
-    );
+    await addCollectedDependencies(loaderContext, foundDependencies);
 
     return { transpiledCode };
   }

packages/app/src/sandbox/eval/transpilers/babel/worker/dynamic-download.ts

@@ -114,7 +114,7 @@ function downloadRequires(
             filename: currentPath,
             extensions: ['.js', '.json'],
             moduleDirectory: ['node_modules'],
-            packageFilter: packageFilter(),
+            packageFilter,
           });
         } catch (err) {
           await downloadFromError({

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

@@ -136,7 +136,7 @@ export default function evaluate(
         filename: path,
         extensions: ['.js', '.json'],
         moduleDirectory: ['node_modules'],
-        packageFilter: packageFilter(),
+        packageFilter,
       });
 
     cachedPaths[dirName][requirePath] = resolvedPath;
@@ -210,7 +210,7 @@ export function evaluateFromPath(
     filename: currentPath,
     extensions: ['.js', '.json'],
     moduleDirectory: ['node_modules'],
-    packageFilter: packageFilter(),
+    packageFilter,
   });
 
   const code = fs.readFileSync(resolvedPath).toString();

packages/app/src/sandbox/eval/transpilers/babel/worker/utils/resolvePatch.ts

@@ -9,8 +9,7 @@ export function patchedResolve() {
   const handler = {
     get(target, prop) {
       if (prop === 'sync') {
-        return (p, options) =>
-          target.sync(p, { ...options, packageFilter: packageFilter() });
+        return (p, options) => target.sync(p, { ...options, packageFilter });
       }
 
       return target[prop];

packages/app/src/sandbox/eval/transpilers/vue/v2/css-loader/get-modules.ts

@@ -24,7 +24,7 @@ export default async (code: string, loaderContext: LoaderContext) => {
     }
   );
 
-  await depPromises;
+  await Promise.all(depPromises);
 
   return {
     css: injectableSource,

packages/app/src/sandbox/eval/transpilers/vue/v2/index.ts

@@ -9,14 +9,12 @@ class VueTranspiler extends Transpiler {
     super('vue-loader');
   }
 
-  doTranspilation(code: string, loaderContext: LoaderContext) {
-    return import(/* webpackChunkName: 'vue-loader' */ './loader').then(
-      loader => {
-        const transpiledCode = loader.default(code, loaderContext);
-
-        return Promise.resolve({ transpiledCode });
-      }
+  async doTranspilation(code: string, loaderContext: LoaderContext) {
+    const loader = await import(
+      /* webpackChunkName: 'vue-loader' */ './loader'
     );
+    const transpiledCode = await loader.default(code, loaderContext);
+    return { transpiledCode };
   }
 }
 

packages/app/src/sandbox/eval/transpilers/vue/v2/loader.js

@@ -35,7 +35,12 @@ const postcssExtensions = ['postcss', 'pcss', 'sugarss', 'sss'];
 
 const rewriterInjectRE = /\b(css(?:-loader)?(?:\?[^!]+)?)(?:!|$)/;
 
-export default function (content: string, loaderContext: LoaderContext) {
+export default async function (content: string, loaderContext: LoaderContext) {
+  const dependencyPromises = [];
+  const addDependency = (p: string) => {
+    dependencyPromises.push(loaderContext.addDependency(p, options));
+  };
+
   // Emit the vue-hot-reload-api so it's available in the sandbox
   loaderContext.emitModule(
     hotReloadAPIPath,
@@ -45,7 +50,7 @@ export default function (content: string, loaderContext: LoaderContext) {
     false
   );
 
-  const { path, _module } = loaderContext;
+  const path = loaderContext.path;
   const query = loaderContext.options;
   const options = {
     // Always disable esModule as sandpack is CommonJS
@@ -55,7 +60,7 @@ export default function (content: string, loaderContext: LoaderContext) {
   };
 
   const rawRequest = getRawRequest(loaderContext);
-  const filePath = _module.module.path;
+  const filePath = loaderContext._module.module.path;
   const fileName = basename(filePath);
 
   const sourceRoot = dirname(path);
@@ -348,6 +353,8 @@ export default function (content: string, loaderContext: LoaderContext) {
       '\nreturn Component.exports\n}';
   }
 
+  await Promise.all(dependencyPromises);
+
   // done
   return output;
 
@@ -371,7 +378,7 @@ export default function (content: string, loaderContext: LoaderContext) {
     // loaderContext.emitModule(rawPath, part.content, dirname(filePath), false, false);
 
     const depPath = loaderUtils.stringifyRequest(loaderContext, rawPath);
-    loaderContext.addDependency(JSON.parse(depPath));
+    addDependency(JSON.parse(depPath));
 
     return depPath;
   }
@@ -386,7 +393,7 @@ export default function (content: string, loaderContext: LoaderContext) {
       '!!' + getLoaderString(type, impt, -1, scoped) + impt.src
     );
 
-    loaderContext.addDependency(JSON.parse(depPath));
+    addDependency(JSON.parse(depPath));
 
     return depPath;
   }

packages/app/src/sandbox/eval/transpilers/vue/v2/style-compiler/loader.ts

@@ -103,16 +103,17 @@ export default async function (
     };
   }
 
-  // Explcitly give undefined if code is null, otherwise postcss crashses
+  // Explicitly give undefined if code is null, otherwise postcss crashses
   const postcssResult = await postcss(plugins).process(code || '', options);
 
   if (postcssResult.messages) {
     const messages = postcssResult.messages as any[];
     await Promise.all(
-      messages.map(async m => {
+      messages.map(m => {
         if (m.type === 'dependency') {
-          await loaderContext.addDependency(m.file);
+          return loaderContext.addDependency(m.file);
         }
+        return Promise.resolve();
       })
     );
   }

packages/app/src/sandbox/eval/transpilers/vue/v2/style-loader/index.ts

@@ -7,10 +7,10 @@ class VueStyleLoader extends Transpiler {
     super('vue-style-loader');
   }
 
-  doTranspilation(content: string, loaderContext: LoaderContext) {
-    const transpiledCode = loader(content, loaderContext);
+  async doTranspilation(content: string, loaderContext: LoaderContext) {
+    const transpiledCode = await loader(content, loaderContext);
 
-    return Promise.resolve({ transpiledCode });
+    return { transpiledCode };
   }
 }
 

packages/app/src/sandbox/eval/transpilers/vue/v2/style-loader/loader.js

@@ -9,11 +9,10 @@ import loaderUtils from 'sandpack-core/lib/transpiler/utils/loader-utils';
 import addStylesClientRaw from '!raw-loader!./addStylesClient';
 import listToStylesRaw from '!raw-loader!./listToStyles';
 
-
 const addStylesClientPath = '/node_modules/vue-style-loader/addStylesClient.js';
 const listToStylesPath = '/node_modules/vue-style-loader/listToStyles.js';
 
-export default function(content: string, loaderContext) {
+export default async function (content: string, loaderContext) {
   const isServer = false;
   const isProduction = false;
 
@@ -40,7 +39,7 @@ export default function(content: string, loaderContext) {
   );
 
   const id = JSON.stringify(hash(request));
-  loaderContext.addDependency(JSON.parse(request));
+  await loaderContext.addDependency(JSON.parse(request));
 
   const shared = [
     '// style-loader: Adds some css to the DOM by adding a <style> tag',

packages/app/src/sandbox/eval/transpilers/vue/v2/template-compiler/index.ts

@@ -5,14 +5,12 @@ class VueTemplateTranspiler extends Transpiler {
     super('vue-template-compiler');
   }
 
-  doTranspilation(code: string, loaderContext: LoaderContext) {
-    return import(
+  async doTranspilation(code: string, loaderContext: LoaderContext) {
+    const loader = await import(
       /* webpackChunkName: 'vue-template-compiler' */ './loader'
-    ).then(loader => {
-      const transpiledCode = loader.default(code, loaderContext);
-
-      return Promise.resolve({ transpiledCode });
-    });
+    );
+    const transpiledCode = await loader.default(code, loaderContext);
+    return { transpiledCode };
   }
 }
 

packages/app/src/sandbox/eval/transpilers/vue/v2/template-compiler/loader.ts

@@ -11,7 +11,10 @@ import transformRequire from './modules/transform-require';
 import transformSrcset from './modules/transform-srcset';
 
 const hotReloadAPIPath = '!noop-loader!/node_modules/vue-hot-reload-api.js';
-export default function (html: string, loaderContext: LoaderContext) {
+export default async function (
+  html: string,
+  loaderContext: LoaderContext
+): Promise<string> {
   loaderContext.emitModule(
     hotReloadAPIPath,
     vueHotReloadAPIRaw,
@@ -24,8 +27,13 @@ export default function (html: string, loaderContext: LoaderContext) {
   const vueOptions = options.vueOptions || {};
   const needsHotReload = true;
 
+  const depPromises = [];
+  const addDependency = (p: string) => {
+    depPromises.push(loaderContext.addDependency(p));
+  };
+
   const defaultModules = [
-    transformRequire(options.transformRequire, loaderContext),
+    transformRequire(options.transformRequire, addDependency),
     transformSrcset(),
   ];
   const userModules = vueOptions.compilerModules || options.compilerModules;
@@ -114,6 +122,8 @@ export default function (html: string, loaderContext: LoaderContext) {
       '}';
   }
 
+  await Promise.all(depPromises);
+
   return code;
 }
 

packages/app/src/sandbox/eval/transpilers/vue/v2/template-compiler/modules/transform-require.js

@@ -7,34 +7,34 @@ var defaultOptions = {
   image: 'xlink:href',
 };
 
-export default (userOptions, loaderContext: LoaderContext) => {
+export default (userOptions, addDependency) => {
   var options = userOptions
     ? { ...defaultOptions, userOptions }
     : defaultOptions;
 
   return {
     postTransformNode: node => {
-      transform(node, options, loaderContext);
+      transform(node, options, addDependency);
     },
   };
 };
 
-function transform(node, options, loaderContext: LoaderContext) {
+function transform(node, options, addDependency) {
   for (var tag in options) {
     if (node.tag === tag && node.attrs) {
       var attributes = options[tag];
       if (typeof attributes === 'string') {
-        node.attrs.some(attr => rewrite(attr, attributes, loaderContext));
+        node.attrs.some(attr => rewrite(attr, attributes, addDependency));
       } else if (Array.isArray(attributes)) {
         attributes.forEach(item =>
-          node.attrs.some(attr => rewrite(attr, item, loaderContext))
+          node.attrs.some(attr => rewrite(attr, item, addDependency))
         );
       }
     }
   }
 }
 
-function rewrite(attr, name, loaderContext: LoaderContext) {
+function rewrite(attr, name, addDependency) {
   if (attr.name === name) {
     var value = attr.value;
     var isStatic =
@@ -51,7 +51,7 @@ function rewrite(attr, name, loaderContext: LoaderContext) {
       attr.value = `require(${value})`;
 
       const rawDependency = value.slice(1).slice(0, -1);
-      loaderContext.addDependency(rawDependency);
+      addDependency(rawDependency);
     }
     return true;
   }

packages/app/src/sandbox/eval/utils/resolve-utils.ts

@@ -1,9 +1,6 @@
 import { PackageJSON } from '@codesandbox/common/lib/types';
 
-export const packageFilter = (isFile: (p: string) => boolean = () => true) => (
-  p: PackageJSON,
-  pkgLocation: string
-) => {
+export const packageFilter = (p: PackageJSON) => {
   if (p.module) {
     p.main = p.module;
   }