Add LIFO task queue for compiles (codesandbox#187)

* Fix Current Module View for non-required modules

* Queue all compile tasks instead of running parallel

* Fix compile arguments

* Fix task picking

* Fix child module errors and warnings

Author: CompuIves

src/sandbox/boilerplates/index.js

@@ -1,7 +1,7 @@
 // @flow
-import type { Module, Directory } from 'common/types';
+import type { Module } from 'common/types';
 
-import { getCurrentManager } from '../';
+import { getCurrentManager } from '../compile';
 
 let cachedBoilerplates = [];
 

src/sandbox/compile.js

@@ -0,0 +1,223 @@
+import { dispatch } from 'codesandbox-api';
+
+import { getModulePath } from 'app/store/entities/sandboxes/modules/selectors';
+import type { Module, Directory } from 'common/types';
+
+import getPreset from './eval';
+import Manager from './eval/manager';
+import resolveDependency from './eval/loaders/dependency-resolver';
+
+import { resetScreen } from './status-screen';
+
+import { inject, uninject } from './react-error-overlay/overlay';
+import handleExternalResources from './external-resources';
+
+import defaultBoilerplates from './boilerplates/default-boilerplates';
+import resizeEventListener from './resize-event-listener';
+import {
+  getBoilerplates,
+  evalBoilerplates,
+  findBoilerplate,
+} from './boilerplates';
+
+import loadDependencies from './npm';
+
+let initializedResizeListener = false;
+let manager: ?Manager = null;
+let actionsEnabled = false;
+
+export function areActionsEnabled() {
+  return actionsEnabled;
+}
+
+export function getCurrentManager(): ?Manager {
+  return manager;
+}
+
+function getIndexHtml(modules) {
+  const module = modules.find(
+    m => m.title === 'index.html' && m.directoryShortid == null
+  );
+  if (module) {
+    return module.code;
+  }
+  return '<div id="root"></div>';
+}
+
+function updateManager(sandboxId, template, module, modules, directories) {
+  if (!manager || manager.id !== sandboxId) {
+    manager = new Manager(sandboxId, modules, directories, getPreset(template));
+    return manager.transpileModules(module).catch(e => ({ error: e }));
+  }
+
+  return manager
+    .updateData(modules, directories)
+    .then(() => manager.transpileModules(module)) // We need to transpile the module if it was never an entry
+    .catch(e => ({ error: e }));
+}
+
+function initializeResizeListener() {
+  const listener = resizeEventListener();
+  listener.addResizeListener(document.body, () => {
+    if (document.body) {
+      dispatch({
+        type: 'resize',
+        height: document.body.getBoundingClientRect().height,
+      });
+    }
+  });
+  initializedResizeListener = true;
+}
+
+async function compile({
+  sandboxId,
+  modules,
+  directories,
+  module,
+  changedModule,
+  externalResources,
+  dependencies,
+  hasActions,
+  isModuleView = false,
+  template,
+}) {
+  try {
+    uninject();
+    inject();
+  } catch (e) {
+    console.error(e);
+  }
+
+  actionsEnabled = hasActions;
+  handleExternalResources(externalResources);
+
+  try {
+    const [{ manifest }, { error: managerError }] = await Promise.all([
+      loadDependencies(dependencies),
+      updateManager(sandboxId, template, module, modules, directories),
+    ]);
+
+    const { externals } = manifest;
+    manager.setExternals(externals);
+
+    if (managerError) {
+      throw managerError;
+    }
+
+    resetScreen();
+
+    try {
+      const children = document.body.children;
+      // Do unmounting for react
+      if (externals['react-dom']) {
+        const reactDOM = resolveDependency('react-dom', externals);
+        reactDOM.unmountComponentAtNode(document.body);
+        for (const child in children) {
+          if (
+            children.hasOwnProperty(child) &&
+            children[child].tagName === 'DIV'
+          ) {
+            reactDOM.unmountComponentAtNode(children[child]);
+          }
+        }
+      }
+    } catch (e) {
+      /* don't do anything with this error */
+    }
+
+    const html = getIndexHtml(modules);
+    document.body.innerHTML = html;
+
+    const evalled = manager.evaluateModule(module);
+
+    const domChanged = document.body.innerHTML !== html;
+
+    if (isModuleView && !domChanged && !module.title.endsWith('.html')) {
+      const isReact = module.code && module.code.includes('React');
+
+      if (isReact) {
+        // initiate boilerplates
+        if (getBoilerplates().length === 0 && externals != null) {
+          try {
+            await evalBoilerplates(defaultBoilerplates);
+          } catch (e) {
+            console.log("Couldn't load all boilerplates");
+          }
+        }
+
+        const boilerplate = findBoilerplate(module);
+        if (boilerplate) {
+          try {
+            boilerplate.module.default(evalled);
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      }
+    }
+
+    if (!initializedResizeListener) {
+      initializeResizeListener();
+    }
+
+    dispatch({
+      type: 'success',
+    });
+  } catch (e) {
+    if (manager) {
+      manager.clearCompiledCache();
+    }
+    console.log('Error in sandbox:');
+    console.error(e);
+
+    e.module = e.module || changedModule;
+    e.fileName = e.fileName || getModulePath(modules, directories, e.module);
+
+    const event = new Event('error');
+    event.error = e;
+
+    window.dispatchEvent(event);
+  }
+}
+
+type Arguments = {
+  sandboxId: string,
+  modules: Array<Module>,
+  directories: Array<Directory>,
+  module: Module,
+  changedModule: Module,
+  externalResources: Array<string>,
+  dependencies: Object,
+  hasActions: boolean,
+  isModuleView: boolean,
+  template: string,
+};
+
+const tasks: Array<Arguments> = [];
+let runningTask = false;
+
+async function executeTaskIfAvailable() {
+  if (tasks.length) {
+    const task = tasks.pop();
+
+    runningTask = true;
+    await compile(task);
+    runningTask = false;
+
+    executeTaskIfAvailable();
+  }
+}
+
+/**
+ * We want to ensure that no tasks (commands from the editor) are run in parallel,
+ * this could result in state inconsistency. That's why we execute tasks after eachother,
+ * and if there are 3 tasks we will remove the second task, this one is unnecessary as it is not the
+ * latest version.
+ */
+export default function queueTask(data: Arguments) {
+  tasks[0] = data;
+
+  if (!runningTask) {
+    executeTaskIfAvailable();
+  }
+}

src/sandbox/errors/index.js

@@ -2,7 +2,7 @@
 import { dispatch, actions } from 'codesandbox-api';
 
 import type { ErrorRecord } from '../react-error-overlay/utils/errorRegister';
-import { getCurrentManager } from '../';
+import { getCurrentManager } from '../compile';
 
 function buildErrorMessage(e) {
   const title = e.name;

src/sandbox/eval/manager.js

@@ -22,13 +22,6 @@ export default class Manager {
   modules: Array<Module>;
   directories: Array<Directory>;
 
-  // Mark if the manager is transpiling, because there is a chance that the
-  // manager gets concurrent render requests. When the first finishes with
-  // transpiling it will try to evaluate normally, but that's not possible
-  // since another transpilation is happening. That's why we check for this value
-  // first.
-  transpiling: boolean;
-
   constructor(
     id: string,
     modules: Array<Module>,
@@ -40,7 +33,6 @@ export default class Manager {
     this.directories = directories;
     this.preset = preset;
     this.transpiledModules = {};
-    this.transpiling = false;
 
     console.log(this);
   }
@@ -50,18 +42,14 @@ export default class Manager {
   }
 
   evaluateModule(module: Module) {
-    if (!this.transpiling) {
-      const transpiledModule = this.getTranspiledModule(module);
-
-      // Run post evaluate first
-      const exports = this.evaluateTranspiledModule(transpiledModule, []);
+    const transpiledModule = this.getTranspiledModule(module);
 
-      this.getTranspiledModules().forEach(t => t.postEvaluate(this));
+    // Run post evaluate first
+    const exports = this.evaluateTranspiledModule(transpiledModule, []);
 
-      return exports;
-    }
+    this.getTranspiledModules().forEach(t => t.postEvaluate(this));
 
-    return null;
+    return exports;
   }
 
   evaluateTranspiledModule(
@@ -209,7 +197,6 @@ export default class Manager {
    * delete caches accordingly
    */
   updateData(modules: Array<Module>, directories: Array<Directory>) {
-    this.transpiling = true;
     // Create an object with mapping from modules
     const moduleObject = this.modules.reduce(
       (prev, next) => ({
@@ -270,23 +257,11 @@ export default class Manager {
       ])
     );
 
+    this.modules = modules;
+    this.directories = directories;
+
     return Promise.all(
       transpiledModulesToUpdate.map(tModule => tModule.transpile(this))
-    )
-      .then(x => {
-        this.modules = modules;
-        this.directories = directories;
-        this.transpiling = false;
-
-        return x;
-      })
-      .catch(e => {
-        // Also set new module info for a catch
-        this.modules = modules;
-        this.directories = directories;
-        this.transpiling = false;
-
-        throw e;
-      });
+    );
   }
 }

src/sandbox/eval/transpiled-module.js

@@ -124,8 +124,6 @@ export default class TranspiledModule {
 
   reset() {
     this.childModules = [];
-    this.errors = [];
-    this.warnings = [];
     this.emittedAssets = [];
     this.setIsEntry(false);
     this.resetCompilation();
@@ -139,6 +137,8 @@ export default class TranspiledModule {
         dep.resetTranspilation();
       });
     this.source = null;
+    this.errors = [];
+    this.warnings = [];
   }
 
   resetCompilation() {