Support for Vue 3 (codesandbox#1059)

Author: CompuIves

packages/app/package.json

@@ -101,6 +101,7 @@
     "@cerebral/http": "^4.0.0",
     "@cerebral/mobx-state-tree": "^3.0.0",
     "@emmetio/codemirror-plugin": "^0.3.5",
+    "@vue/babel-preset-app": "^3.0.1",
     "apollo-boost": "^0.1.7",
     "apollo-link-batch-http": "^1.2.2",
     "apollo-link-context": "^1.0.8",

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

@@ -32,7 +32,8 @@ const DEFAULT_BABEL_CONFIG = {
 export default function getBabelConfig(
   config: ?Object,
   loaderOptions: Object,
-  path: string
+  path: string,
+  isV7: boolean = false
 ) {
   const resolvedConfig = config || DEFAULT_BABEL_CONFIG;
 
@@ -47,17 +48,16 @@ export default function getBabelConfig(
     filename: path,
   };
 
+  const commonjsPluginName = isV7
+    ? 'transform-modules-commonjs'
+    : 'transform-es2015-modules-commonjs';
+
   if (finalConfig.plugins) {
-    if (
-      finalConfig.plugins.indexOf('transform-es2015-modules-commonjs') === -1
-    ) {
-      finalConfig.plugins = [
-        ...finalConfig.plugins,
-        'transform-es2015-modules-commonjs',
-      ];
+    if (finalConfig.plugins.indexOf(commonjsPluginName) === -1) {
+      finalConfig.plugins = [...finalConfig.plugins, commonjsPluginName];
     }
   } else {
-    finalConfig.plugins = ['transform-es2015-modules-commonjs'];
+    finalConfig.plugins = [commonjsPluginName];
   }
 
   return finalConfig;

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

@@ -67,15 +67,20 @@ class BabelTranspiler extends WorkerTranspiler {
 
       const loaderOptions = loaderContext.options || {};
 
-      const babelConfig = getBabelConfig(foundConfig, loaderOptions, path);
-
       const isV7 = !!(
         configs.package &&
         configs.package.parsed &&
         configs.package.parsed.devDependencies &&
         configs.package.parsed.devDependencies['@vue/cli-plugin-babel']
       );
 
+      const babelConfig = getBabelConfig(
+        foundConfig,
+        loaderOptions,
+        path,
+        isV7
+      );
+
       this.queueTask(
         {
           code,

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

@@ -249,7 +249,7 @@ self.addEventListener('message', async event => {
   }
 
   const stringifiedConfig = JSON.stringify(babelTranspilerOptions);
-  if (lastConfig !== stringifiedConfig) {
+  if (stringifiedConfig && lastConfig !== stringifiedConfig) {
     resetCache();
     lastConfig = stringifiedConfig;
   }
@@ -274,6 +274,19 @@ self.addEventListener('message', async event => {
       Babel.registerPreset('env', Babel.availablePresets.es2015);
     }
 
+    // Future vue preset
+    // if (
+    //   flattenedPresets.indexOf('@vue/app') > -1 &&
+    //   Object.keys(Babel.availablePresets).indexOf('@vue/app') === -1 &&
+    //   version === 7
+    // ) {
+    //   const vuePreset = await import(/* webpackChunkName: 'babel-preset-vue' */ '@vue/babel-preset-app');
+
+    //   Babel.registerPreset('@vue/app', vuePreset);
+    //   Babel.registerPreset('@vue/babel-preset-app', vuePreset);
+
+    // }
+
     if (
       flattenedPlugins.indexOf('transform-vue-jsx') > -1 &&
       Object.keys(Babel.availablePlugins).indexOf('transform-vue-jsx') === -1

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

@@ -1,13 +1,16 @@
 import resolve from 'browser-resolve';
 import hashsum from 'hash-sum';
+import { dirname } from 'path';
 import type FSType from 'fs';
 import evaluateCode from '../../../loaders/eval';
 
 let cache = {};
+let cachedPaths = {};
 let transpileBeforeExec = false;
 
 export const resetCache = () => {
   cache = {};
+  cachedPaths = {};
   transpileBeforeExec = false;
 };
 
@@ -63,17 +66,24 @@ export default function evaluate(
       return preset;
     }
 
-    const resolvedPath = resolve.sync(requirePath, {
-      filename: path,
-      extensions: ['.js', '.json'],
-      moduleDirectory: ['node_modules'],
-    });
+    const dirName = dirname(path);
+    cachedPaths[dirName] = cachedPaths[dirName] || {};
+
+    const resolvedPath =
+      cachedPaths[dirName][requirePath] ||
+      resolve.sync(requirePath, {
+        filename: path,
+        extensions: ['.js', '.json'],
+        moduleDirectory: ['node_modules'],
+      });
+
+    cachedPaths[dirName][requirePath] = resolvedPath;
 
     let resolvedCode = fs.readFileSync(resolvedPath).toString();
     const id = hashsum(resolvedCode + resolvedPath);
 
     if (cache[id]) {
-      return cache[id];
+      return cache[id].exports;
     }
 
     cache[id] = {};
@@ -84,16 +94,14 @@ export default function evaluate(
       resolvedCode = transpiledCode;
     }
 
-    cache[id] = evaluate(
+    return evaluate(
       fs,
       BFSRequire,
       resolvedCode,
       resolvedPath,
       availablePlugins,
       availablePresets
     );
-
-    return cache[id];
   };
 
   // require.resolve is often used in .babelrc configs to resolve the correct plugin path,
@@ -106,7 +114,8 @@ export default function evaluate(
   //   moduleDirectory: ['node_modules'],
   // });
 
-  const module = {
+  const id = hashsum(code + path);
+  cache[id] = {
     id: path,
     exports: {},
   };
@@ -117,11 +126,11 @@ export default function evaluate(
   }
   finalCode += `\n//# sourceURL=${location.origin}${path}`;
 
-  evaluateCode(finalCode, require, module, {
+  const exports = evaluateCode(finalCode, require, cache[id], {
     VUE_CLI_BABEL_TRANSPILE_MODULES: true,
   });
 
-  return module.exports;
+  return exports;
 }
 
 export function evaluateFromPath(