Cleanup sandbox code

Author: Ives van Hoorne

src/sandbox/boilerplates/index.js

@@ -1,10 +1,7 @@
 // @flow
-import evalModule from '../eval';
+import type { Module, Directory } from 'common/types';
 
-import type { Module } from '../../app/store/entities/sandboxes/modules/entity';
-import type {
-  Directory,
-} from '../../app/store/entities/sandboxes/directories/entity';
+import evalModule from '../eval';
 
 let cachedBoilerplates = [];
 
@@ -17,6 +14,7 @@ export function evalBoilerplates(
   cachedBoilerplates = boilerplates.map(boilerplate => {
     const fakeModule: Module = {
       id: boilerplate.id,
+      shortid: boilerplate.id,
       title: `boilerplate-${boilerplate.condition}`,
       code: boilerplate.code,
       directoryShortid: null,
@@ -25,7 +23,7 @@ export function evalBoilerplates(
       type: '',
     };
 
-    const module = evalModule(fakeModule, '', modules, directories, externals);
+    const module = evalModule(fakeModule, modules, directories, externals);
     return { ...boilerplate, module };
   });
 }

src/sandbox/eval/css.js

@@ -1,14 +1,5 @@
 const getStyleId = id => id + '-css'; // eslint-disable-line
 
-function getGeneratedClassNameCode(code: string, alteredClassNames) {
-  let newCode = code;
-  Object.keys(alteredClassNames).forEach(cn => {
-    const regex = new RegExp(`.${cn} `);
-    newCode = newCode.replace(regex, `.${alteredClassNames[cn]} `);
-  });
-  return newCode;
-}
-
 function createStyleNode(id: string, content: string) {
   const styleNode =
     document.getElementById(getStyleId(id)) || document.createElement('style');
@@ -26,7 +17,7 @@ function createStyleNode(id: string, content: string) {
 /**
  * Adds CSS to HEAD and creates a mapping of classname -> generatedClassname
  */
-export default (module, sandboxId) => {
+export default module => {
   const css = module.code;
 
   const classNameRegex = /\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)/g;
@@ -35,7 +26,7 @@ export default (module, sandboxId) => {
   // const alteredClassNames = getGeneratedClassNames(module.id, classNames);
 
   // const newCode = getGeneratedClassNameCode(module.code, alteredClassNames);
-  createStyleNode(`${sandboxId}${module.id}`, css);
+  createStyleNode(`${module.id}`, css);
 
   return classNames;
 };

src/sandbox/eval/index.js

@@ -1,9 +1,5 @@
 // @flow
-import type { Module } from 'app/store/entities/sandboxes/modules/entity';
-
-import type {
-  Directory,
-} from 'app/store/entities/sandboxes/directories/entity';
+import type { Module, Directory } from 'common/types';
 
 import evalJS, { deleteCache as deleteJSCache } from './js';
 import evalHTML from './html';
@@ -12,56 +8,34 @@ import evalJson from './json';
 
 const MAX_DEPTH = 20;
 
-function doEval(mainModule, sandboxId, modules, directories, externals, depth) {
+function doEval(mainModule, modules, directories, externals, depth) {
   const html = /\.html$/;
   const css = /\.css$/;
   const json = /\.json$/;
 
   if (html.test(mainModule.title)) {
-    return evalHTML(
-      mainModule,
-      sandboxId,
-      modules,
-      directories,
-      externals,
-      depth,
-    );
+    return evalHTML(mainModule, modules, directories, externals, depth);
   }
 
   if (css.test(mainModule.title)) {
-    return evalCSS(
-      mainModule,
-      sandboxId,
-      modules,
-      directories,
-      externals,
-      depth,
-    );
+    return evalCSS(mainModule, modules, directories, externals, depth);
   }
 
   if (json.test(mainModule.title)) {
-    return evalJson(
-      mainModule,
-      sandboxId,
-      modules,
-      directories,
-      externals,
-      depth,
-    );
+    return evalJson(mainModule, modules, directories, externals, depth);
   }
 
-  return evalJS(mainModule, sandboxId, modules, directories, externals, depth);
+  return evalJS(mainModule, modules, directories, externals, depth);
 }
 
-export function deleteCache(sandboxId, module: Module) {
+export function deleteCache(module: Module) {
   if (module.title.includes('.js')) {
-    deleteJSCache(sandboxId, module);
+    deleteJSCache(module);
   }
 }
 
 const evalModule = (
   mainModule: Module,
-  sandboxId: string,
   modules: Array<Module>,
   directories: Array<Directory>,
   externals: Object,
@@ -71,14 +45,7 @@ const evalModule = (
     throw new Error(`Exceeded the maximum require depth of ${MAX_DEPTH}.`);
   }
   try {
-    return doEval(
-      mainModule,
-      sandboxId,
-      modules,
-      directories,
-      externals,
-      depth,
-    );
+    return doEval(mainModule, modules, directories, externals, depth);
   } catch (e) {
     e.module = e.module || mainModule;
     throw e;

src/sandbox/eval/js.js

@@ -7,24 +7,24 @@ import restSpread from 'babel-plugin-transform-object-rest-spread';
 import classProperties from 'babel-plugin-transform-class-properties';
 import decoratorPlugin from 'babel-plugin-transform-decorators-legacy';
 
+import type { Module, Directory } from 'common/types';
+
 import evalModule from './';
 import resolveModule from '../utils/resolve-module';
 import DependencyNotFoundError from '../errors/dependency-not-found-error';
 
 const moduleCache = new Map();
 
-const getId = (sandboxId, module) => `${sandboxId}${module.id}`;
-
 /**
  * Deletes the cache of all modules that use module and module itself
  */
-export function deleteCache(sandboxId, module) {
+export function deleteCache(module: Module) {
   moduleCache.forEach(value => {
-    if (value.requires.includes(getId(sandboxId, module))) {
-      deleteCache(sandboxId, value.module);
+    if (value.requires.includes(module.id)) {
+      deleteCache(value.module);
     }
   });
-  moduleCache.delete(getId(sandboxId, module));
+  moduleCache.delete(module.id);
 }
 
 const compileCode = (code: string = '', moduleName: string = 'unknown') => {
@@ -47,12 +47,11 @@ function evaluate(code, require) {
 }
 
 export default function evaluateJS(
-  mainModule,
-  sandboxId,
-  modules,
-  directories,
-  externals,
-  depth,
+  mainModule: Module,
+  modules: Array<Module>,
+  directories: Array<Directory>,
+  externals: Object,
+  depth: number,
 ) {
   try {
     const requires = [];
@@ -88,38 +87,31 @@ export default function evaluateJS(
 
         if (!module) throw new Error(`Cannot find module in path: ${path}`);
 
-        requires.push(getId(sandboxId, module));
+        requires.push(module.id);
         // Check if this module has been evaluated before, if so return that
-        const cache = moduleCache.get(getId(sandboxId, module));
+        const cache = moduleCache.get(module.id);
 
         return cache
           ? cache.exports
-          : evalModule(
-              module,
-              sandboxId,
-              modules,
-              directories,
-              externals,
-              depth + 1,
-            );
+          : evalModule(module, modules, directories, externals, depth + 1);
       }
     };
 
-    const compiledCode = compileCode(mainModule.code, mainModule.title);
+    const compiledCode = compileCode(mainModule.code || '', mainModule.title);
 
     // don't use Function() here since it changes source locations
     const exports = evaluate(compiledCode, require);
 
     // Always set a (if no error) new cache for this module, because we know this changed
-    moduleCache.set(getId(sandboxId, mainModule), {
+    moduleCache.set(mainModule.id, {
       exports,
       requires,
       module: mainModule,
     });
     return exports;
   } catch (e) {
     // Remove cache
-    moduleCache.delete(getId(sandboxId, mainModule));
+    moduleCache.delete(mainModule.id);
     throw e;
   }
 }

src/sandbox/index.js

@@ -72,7 +72,6 @@ async function compile(message) {
     url: newUrl,
     changedModule,
     externalResources,
-    sandboxId,
   } = message.data;
 
   if (fetching) return;
@@ -90,15 +89,9 @@ async function compile(message) {
   try {
     const html = getIndexHtml(modules);
     document.body.innerHTML = html;
-    deleteCache(sandboxId, changedModule);
-
-    const evalled = evalModule(
-      module,
-      sandboxId,
-      modules,
-      directories,
-      externals,
-    );
+    deleteCache(changedModule);
+
+    const evalled = evalModule(module, modules, directories, externals);
     const domChanged = document.body.innerHTML !== html;
 
     if (!domChanged && !module.title.endsWith('.html')) {