Fix JSX syntax highlighting, fix concurrent transpiling jobs

Author: Ives van Hoorne

src/app/components/sandbox/CodeEditor/monaco/workers/syntax-highlighter.js

@@ -5,21 +5,35 @@ self.importScripts([
 function getLineNumberAndOffset(start, lines) {
   let line = 0;
   let offset = 0;
-  while (offset + lines[line] <= start) {
+  while (offset + lines[line] < start) {
     offset += lines[line] + 1;
     line += 1;
   }
 
   return { line: line + 1, offset };
 }
 
+function nodeToRange(node) {
+  if (
+    typeof node.getStart === 'function' &&
+    typeof node.getEnd === 'function'
+  ) {
+    return [node.getStart(), node.getEnd()];
+  } else if (
+    typeof node.pos !== 'undefined' &&
+    typeof node.end !== 'undefined'
+  ) {
+    return [node.pos, node.end];
+  }
+  return [0, 0];
+}
+
 function addChildNodes(node, lines, classifications) {
   self.ts.forEachChild(node, id => {
-    const { offset, line: startLine } = getLineNumberAndOffset(
-      id.getStart(),
-      lines
-    );
-    const { line: endLine } = getLineNumberAndOffset(id.getEnd(), lines);
+    const [start, end] = nodeToRange(id);
+
+    const { offset, line: startLine } = getLineNumberAndOffset(start, lines);
+    const { line: endLine } = getLineNumberAndOffset(end, lines);
     classifications.push({
       start: id.getStart() + 1 - offset,
       end: id.getEnd() + 1 - offset,

src/sandbox/eval/manager.js

@@ -22,6 +22,13 @@ 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>,
@@ -33,6 +40,7 @@ export default class Manager {
     this.directories = directories;
     this.preset = preset;
     this.transpiledModules = {};
+    this.transpiling = false;
 
     console.log(this);
   }
@@ -42,14 +50,18 @@ export default class Manager {
   }
 
   evaluateModule(module: Module) {
-    const transpiledModule = this.getTranspiledModule(module);
+    if (!this.transpiling) {
+      const transpiledModule = this.getTranspiledModule(module);
+
+      // Run post evaluate first
+      const exports = this.evaluateTranspiledModule(transpiledModule, []);
 
-    // Run post evaluate first
-    const exports = this.evaluateTranspiledModule(transpiledModule, []);
+      this.getTranspiledModules().forEach(t => t.postEvaluate(this));
 
-    this.getTranspiledModules().forEach(t => t.postEvaluate(this));
+      return exports;
+    }
 
-    return exports;
+    return null;
   }
 
   evaluateTranspiledModule(
@@ -197,6 +209,7 @@ 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) => ({
@@ -259,11 +272,21 @@ export default class Manager {
 
     return Promise.all(
       transpiledModulesToUpdate.map(tModule => tModule.transpile(this))
-    ).then(x => {
-      this.modules = modules;
-      this.directories = directories;
-
-      return x;
-    });
+    )
+      .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

@@ -317,6 +317,7 @@ export default class TranspiledModule {
 
     let code = this.module.code || '';
     let finalSourceMap = null;
+
     for (let i = 0; i < transpilers.length; i += 1) {
       const transpilerConfig = transpilers[i];
       const loaderContext = this.getLoaderContext(
@@ -338,6 +339,7 @@ export default class TranspiledModule {
       } catch (e) {
         e.fileName = loaderContext.path;
         e.module = this.module;
+        this.resetTranspilation();
         throw e;
       }
     }