Fix transpile queue getting ahead of itself

Author: Ives van Hoorne

src/sandbox/eval/presets/index.js

@@ -5,12 +5,12 @@ import type { Module } from 'common/types';
 import Transpiler from '../transpilers';
 
 export type TranspiledModule = Module & {
-  transpiledCode: string,
+  transpiledCode: string
 };
 
 type TranspilerDefinition = {
   transpiler: Transpiler,
-  config?: Object,
+  options: ?Object
 };
 
 /**
@@ -27,7 +27,7 @@ type TranspilerDefinition = {
 export default class Preset {
   loaders: Array<{
     test: (module: Module) => boolean,
-    transpilers: Array<TranspilerDefinition>,
+    transpilers: Array<TranspilerDefinition>
   }>;
   transpilers: Set<Transpiler>;
   name: string;
@@ -37,7 +37,7 @@ export default class Preset {
   constructor(
     name: string,
     ignoredExtensions: ?Array<string>,
-    alias: { [path: string]: string },
+    alias: { [path: string]: string }
   ) {
     this.loaders = [];
     this.transpilers = new Set();
@@ -57,7 +57,7 @@ export default class Preset {
     // Find matching aliases
     const matchingAliases = aliases.filter(a => path.startsWith(a));
     const orderedAliases = orderBy(matchingAliases, alias => alias.length, [
-      'desc',
+      'desc'
     ]);
 
     const foundAlias = orderedAliases[0];
@@ -72,11 +72,11 @@ export default class Preset {
 
   registerTranspiler(
     test: (module: Module) => boolean,
-    transpilers: Array<TranspilerDefinition>,
+    transpilers: Array<TranspilerDefinition>
   ) {
     this.loaders.push({
       test,
-      transpilers,
+      transpilers
     });
 
     transpilers.forEach(t => this.transpilers.add(t.transpiler));
@@ -104,7 +104,7 @@ export default class Preset {
         const [name, options] = loaderName.split('?');
 
         const transpiler = Array.from(this.transpilers).find(
-          t => t.name === name,
+          t => t.name === name
         );
 
         if (!transpiler) {

src/sandbox/eval/transpiled-module.js

@@ -1,6 +1,7 @@
 // @flow
-import type { Module } from 'common/types';
 import { flattenDeep } from 'lodash';
+
+import type { Module } from 'common/types';
 import getModulePath from 'common/sandbox/get-module-path';
 
 import type { SourceMap } from './transpilers/utils/get-source-map';
@@ -35,7 +36,7 @@ export type LoaderContext = {
     title: string,
     code: string,
     directoryShortid: ?string
-  ) => TranspiledModule,
+  ) => TranspiledModule, // eslint-disable-line no-use-before-define
   emitFile: (name: string, content: string, sourceMap: SourceMap) => void,
   options: {
     context: '/'
@@ -51,13 +52,13 @@ export type LoaderContext = {
     options: ?{
       isAbsolute: boolean
     }
-  ) => TranspiledModule,
+  ) => TranspiledModule, // eslint-disable-line no-use-before-define
   addDependenciesInDirectory: (
     depPath: string,
     options: {
       isAbsolute: boolean
     }
-  ) => Array<TranspiledModule>,
+  ) => Array<TranspiledModule>, // eslint-disable-line no-use-before-define
   _module: TranspiledModule // eslint-disable-line no-use-before-define
 };
 
@@ -168,7 +169,7 @@ export default class TranspiledModule {
 
   getLoaderContext(
     manager: Manager,
-    transpilerOptions: Object = {}
+    transpilerOptions: ?Object = {}
   ): LoaderContext {
     const path = getModulePath(
       manager.getModules(),
@@ -329,6 +330,7 @@ export default class TranspiledModule {
         if (this.errors.length) {
           throw this.errors[0];
         }
+
         code = transpiledCode;
         finalSourceMap = sourceMap;
       } catch (e) {
@@ -348,7 +350,8 @@ export default class TranspiledModule {
     code = `${code}\n//# sourceURL=${path}`;
 
     this.source = new ModuleSource(this.module.title, code, finalSourceMap);
-    await Promise.all(
+
+    return Promise.all(
       flattenDeep([
         ...Array.from(this.transpilationInitiators).map(t =>
           t.transpile(manager)
@@ -357,8 +360,6 @@ export default class TranspiledModule {
         ...this.childModules.map(t => t.transpile(manager))
       ])
     );
-
-    return this;
   }
 
   getChildTranspiledModules(): Array<TranspiledModule> {

src/sandbox/react-error-overlay/styles.js

@@ -24,7 +24,7 @@ const iframeStyle = {
   width: '100%',
   height: '100%',
   border: 'none',
-  'z-index': 2147483647 - 1, // below the compile error overlay
+  'z-index': 2147483647 - 1 // below the compile error overlay
 };
 
 const overlayStyle = {
@@ -40,7 +40,7 @@ const overlayStyle = {
   'text-rendering': 'optimizeLegibility',
   'font-smooth': 'always',
   '-webkit-tap-highlight-color': 'transparent',
-  '-webkit-touch-callout': 'none',
+  '-webkit-touch-callout': 'none'
 };
 
 const containerStyle = {
@@ -60,16 +60,16 @@ const containerStyle = {
   'white-space': 'pre-wrap',
   'word-break': 'break-word',
   'line-height': 1.5,
-  color: black,
+  color: black
 };
 
 const hintsStyle = {
-  color: darkGray,
+  color: darkGray
 };
 
 const hintStyle = {
   padding: '0.5em 1em',
-  cursor: 'pointer',
+  cursor: 'pointer'
 };
 
 const closeButtonStyle = {
@@ -80,11 +80,11 @@ const closeButtonStyle = {
   cursor: 'pointer',
   position: 'absolute',
   right: 0,
-  top: 0,
+  top: 0
 };
 
 const additionalChildStyle = {
-  'margin-bottom': '0.5rem',
+  'margin-bottom': '0.5rem'
 };
 
 const headerStyle = {
@@ -98,59 +98,60 @@ const headerStyle = {
   flex: '0 0 auto',
   'max-height': '50%',
   overflow: 'auto',
-  'font-weight': '400',
+  'font-weight': '400'
 };
 
 const messageHeaderStyle = {
   ...headerStyle,
   color: 'black',
   'font-weight': '300',
-  'font-size': '1.75em',
+  'font-size': '1.5em',
+  'font-family': 'Consolas, Menlo, monospace',
   margin: 0,
   'padding-bottom': '1rem',
-  'border-bottom': '1px solid #ddd',
+  'border-bottom': '1px solid #ddd'
 };
 
 const functionNameStyle = {};
 
 const linkStyle = {
   'font-size': '0.9em',
-  'margin-bottom': '0.9em',
+  'margin-bottom': '0.9em'
 };
 
 const anchorStyle = {
   'text-decoration': 'none',
-  color: darkGray,
+  color: darkGray
 };
 
 const traceStyle = {
   'font-size': '1em',
   flex: '0 1 auto',
   'min-height': '0px',
   overflow: 'auto',
-  'padding-top': '1rem',
+  'padding-top': '1rem'
 };
 
 const depStyle = {};
 
 const primaryErrorStyle = {
-  'background-color': lightRed,
+  'background-color': lightRed
 };
 
 const secondaryErrorStyle = {
-  'background-color': yellow,
+  'background-color': yellow
 };
 
 const omittedFramesCollapsedStyle = {
   color: black,
   cursor: 'pointer',
-  'margin-bottom': '1.5em',
+  'margin-bottom': '1.5em'
 };
 
 const omittedFramesExpandedStyle = {
   color: black,
   cursor: 'pointer',
-  'margin-bottom': '0.6em',
+  'margin-bottom': '0.6em'
 };
 
 const _preStyle = {
@@ -160,31 +161,31 @@ const _preStyle = {
   'margin-bottom': '0.5em',
   'overflow-x': 'auto',
   'white-space': 'pre-wrap',
-  'border-radius': '0.25rem',
+  'border-radius': '0.25rem'
 };
 const primaryPreStyle = Object.assign({}, _preStyle, {
-  'background-color': redTransparent,
+  'background-color': redTransparent
 });
 const secondaryPreStyle = Object.assign({}, _preStyle, {
-  'background-color': yellowTransparent,
+  'background-color': yellowTransparent
 });
 
 const toggleStyle = {
   'margin-bottom': '1.5em',
   color: darkGray,
-  cursor: 'pointer',
+  cursor: 'pointer'
 };
 
 const codeStyle = {
-  'font-family': 'Consolas, Menlo, monospace',
+  'font-family': 'Consolas, Menlo, monospace'
 };
 
 const hiddenStyle = {
-  display: 'none',
+  display: 'none'
 };
 
 const groupStyle = {
-  'margin-right': '1em',
+  'margin-right': '1em'
 };
 
 const _groupElemStyle = {
@@ -193,35 +194,35 @@ const _groupElemStyle = {
   border: 'none',
   'border-radius': '4px',
   padding: '3px 6px',
-  cursor: 'pointer',
+  cursor: 'pointer'
 };
 
 const groupElemLeft = Object.assign({}, _groupElemStyle, {
   'border-top-right-radius': '0px',
   'border-bottom-right-radius': '0px',
-  'margin-right': '1px',
+  'margin-right': '1px'
 });
 
 const groupElemRight = Object.assign({}, _groupElemStyle, {
   'border-top-left-radius': '0px',
-  'border-bottom-left-radius': '0px',
+  'border-bottom-left-radius': '0px'
 });
 
 const footerStyle = {
   'font-family': 'sans-serif',
   color: darkGray,
   'margin-top': '0.5rem',
-  flex: '0 0 auto',
+  flex: '0 0 auto'
 };
 
 const suggestionsContainerStyle = {
   'font-family': 'Roboto, sans-serif',
-  'padding-top': '1rem',
+  'padding-top': '1rem'
 };
 
 const suggestionsTitleStyle = {
   'font-size': '1rem',
-  'font-weight': '300',
+  'font-weight': '300'
 };
 
 const suggestionsButtonStyle = {
@@ -234,7 +235,7 @@ const suggestionsButtonStyle = {
   'font-size': '.75rem',
   'border-radius': '4px',
   border: '1px solid #6CAEDD',
-  cursor: 'pointer',
+  cursor: 'pointer'
 };
 
 export {
@@ -267,5 +268,5 @@ export {
   footerStyle,
   suggestionsContainerStyle,
   suggestionsTitleStyle,
-  suggestionsButtonStyle,
+  suggestionsButtonStyle
 };