Allow resolving of /@/

Author: Ives van Hoorne

src/common/sandbox/resolve-module.js

@@ -16,12 +16,20 @@ const throwError = (path: string) => {
 };
 
 export function getModulesInDirectory(
-  path: ?string,
+  _path: ?string,
   modules: Array<Module>,
   directories: Array<Directory>,
-  startdirectoryShortid: ?string = undefined
+  _startdirectoryShortid: ?string = undefined
 ) {
-  if (!path) return throwError('');
+  if (!_path) return throwError('');
+
+  let path = _path;
+  let startdirectoryShortid = _startdirectoryShortid;
+  // If paths start with {{sandboxRoot}} we see them as root paths
+  if (path.startsWith('{{sandboxRoot}}')) {
+    startdirectoryShortid = undefined;
+    path = _path.replace('{{sandboxRoot}}/', './');
+  }
 
   // Split path
   const splitPath = path.replace(/^.\//, '').split('/');

src/sandbox/eval/presets/vue-cli/index.js

@@ -15,7 +15,9 @@ import base64Transpiler from '../../transpilers/base64';
 
 import Preset from '../';
 
-const vuePreset = new Preset('vue-cli', ['vue', 'json', 'js']);
+const vuePreset = new Preset('vue-cli', ['vue', 'json', 'js'], {
+  '@': '{{sandboxRoot}}',
+});
 
 const sassWithConfig = {
   transpiler: sassTranspiler,

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

@@ -58,7 +58,7 @@ self.addEventListener('message', async event => {
     const dependencies = getDependencies(result.ast);
 
     dependencies.forEach(dependency => {
-      if (/^(\w|@)/.test(dependency.path) && !dependency.path.includes('!')) {
+      if (/^(\w|@\w)/.test(dependency.path) && !dependency.path.includes('!')) {
         // Don't push dependencies
         return;
       }

src/sandbox/eval/transpilers/css/get-modules.js

@@ -7,6 +7,7 @@ const core = new Core();
 export default (code: string, loaderContext: LoaderContext) =>
   core
     .load(code, loaderContext.path, (dependencyPath: string) => {
+      console.log(dependencyPath);
       const tModule = loaderContext.addDependency(dependencyPath);
 
       return tModule.source ? tModule.source.compiledCode : tModule.module.code;

src/sandbox/eval/transpilers/vue/loader.js

@@ -84,7 +84,7 @@ export default function(code: string, loaderContext: LoaderContext) {
     parts.styles.forEach(function(style, i) {
       // require style
       const requireLocation = style.src
-        ? style.src
+        ? getRequireForImport('style', style, i, style.scoped)
         : getRequire('style', style, i, style.scoped);
 
       const requireString = `require('${requireLocation}')`;
@@ -127,7 +127,9 @@ export default function(code: string, loaderContext: LoaderContext) {
   output += '  /* script */\n  ';
   var script = parts.script;
   if (script) {
-    const file = script.src ? script.src : getRequire('script', script);
+    const file = script.src
+      ? getRequireForImport('script', script)
+      : getRequire('script', script);
 
     output += `require('${file}')`;
   } else {
@@ -140,7 +142,7 @@ export default function(code: string, loaderContext: LoaderContext) {
   var template = parts.template;
   if (template) {
     const file = template.src
-      ? template.src
+      ? getRequireForImport('template', template)
       : getTemplateRequire(templateOptions, template);
 
     output += `require('${file}')`;
@@ -229,9 +231,28 @@ export default function(code: string, loaderContext: LoaderContext) {
     return `${tModule.query}!./${tModule.module.title}`;
   }
 
+  function getRequireForImport(type, impt, i = 0, scoped) {
+    if (type === 'style') {
+      const styleCompiler = `!!${getStyleLoaders(
+        impt.attrs,
+        moduleId,
+        !!scoped
+      )}!${impt.src}`;
+
+      const tModule = loaderContext.addDependency(styleCompiler);
+
+      return `${tModule.query}!./${tModule.module.title}`;
+    } else if (type === 'script' || type === 'template') {
+      const tModule = loaderContext.addDependency(impt.src);
+
+      return `./${tModule.module.title}`;
+    }
+    return '';
+  }
+
   function getRequire(type, impt, i = 0, scoped) {
     if (type === 'style') {
-      const styleCompiler = `${getStyleLoaders(
+      const styleCompiler = `!!${getStyleLoaders(
         impt.attrs,
         moduleId,
         !!scoped