Replace callback w/ promise in sandbox code

marijnh · marijnh · commit 69a24f850635 · 2017-11-16T14:44:50.000+01:00
diff --git a/html/js/code.js b/html/js/code.js
@@ -168,20 +168,20 @@ addEventListener("load", function() {
   function runCode() {
     clearSandbox();
     var val = editor.getValue(), type = context.type || guessType(val);
-    sandbox = new SandBox({
+    SandBox.create({
       loadFiles: hasIncludes(val, context.include) ? [] : context.include,
       place: type == "html" &&
         function(node) {
           var out = document.querySelector(".sandbox-output");
           out.parentNode.insertBefore(node, out);
         }
-    }, function(box) {
+    }.then(box => {
       output.clear();
       if (type == "html")
         box.setHTML(val, output);
       else
         box.run(val, output);
-    });
+    })
   }
 
   document.querySelector("#solution").addEventListener("click", function() {
diff --git a/html/js/ejs.js b/html/js/ejs.js
@@ -196,12 +196,12 @@ window.addEventListener("load", function() {
       options.place = function(node) { placeFrame(node, snippet); };
       if (!forHTML) html = snippet.textContent;
     }
-    new SandBox(options, function(box) {
+    SandBox.create(options).then(box => {
       if (html != null)
         box.win.document.documentElement.innerHTML = html;
       sandboxes[name] = box;
       callback(box);
-    });
+    })
   }
 
   function resetSandbox(name) {
diff --git a/html/js/sandbox.js b/html/js/sandbox.js
@@ -17,60 +17,60 @@
   }
 
   let SandBox = window.SandBox = class {
-    constructor(options, callback) {
-      this.callbacks = {}
+    static create(options) {
+      return new Promise(done => {
+        let frame = document.createElement("iframe")
+        frame.addEventListener("load", loaded)
+        frame.src = "empty.html"
+        if (options.place) {
+          options.place(frame)
+        } else {
+          frame.style.display = "none"
+          document.body.appendChild(frame)
+        }
+
+        function loaded() {
+          frame.removeEventListener("load", loaded)
+          let box = new SandBox(options, frame)
 
+          promiseChain((options.loadFiles || []).map(file => () => {
+            let script = box.win.document.createElement("script")
+            script.src = file
+            box.win.document.body.appendChild(script)
+            return new Promise(done => script.addEventListener("load", done))
+          })).then(() => done(box))
+        }
+      })
+    }
+
+    constructor(options, frame) {
+      this.startedAt = null
+      this.extraSecs = 2
+      this.output = null
+
+      this.callbacks = {}
       // Used to cancel existing events when new code is loaded
-      this.timeouts = []; this.intervals = []; this.frames = []; this.framePos = 0
+      this.timeouts = []; this.intervals = []; this.frames = []
+      this.framePos = 0
 
+      // Loaded CommonJS modules
       this.loaded = new Cached(name => resolved.compute(name).then(({name, code}) => this.evalModule(name, code)))
 
-      const loaded = () => {
-        frame.removeEventListener("load", loaded)
-        this.win = frame.contentWindow
-        this.setupEnv()
+      this.frame = frame
+      this.win = frame.contentWindow
+      this.setupEnv()
 
-        const resize = () => {
-          if (this.frame.style.display != "none") this.resizeFrame()
-        }
-        this.frame.addEventListener("load", resize)
-        let resizeTimeout = null
-        const scheduleResize = () => {
-          this.win.clearTimeout(resizeTimeout)
-          this.win.__setTimeout(resize, 200)
-        }
-        this.win.addEventListener("keydown", scheduleResize)
-        this.win.addEventListener("mousedown", scheduleResize)
-
-        if (options.loadFiles) {
-          let i = 0
-          let loadNext = () => {
-            if (i == options.loadFiles.length) return callback(this)
-            let script = this.win.document.createElement("script")
-            script.src = options.loadFiles[i]
-            this.win.document.body.appendChild(script)
-            ++i
-            script.addEventListener("load", loadNext)
-          }
-          loadNext()
-        } else {
-          callback(this)
-        }
+      const resize = () => {
+        if (this.frame.style.display != "none") this.resizeFrame()
       }
-
-      let frame = this.frame = document.createElement("iframe")
-      frame.addEventListener("load", loaded)
-      frame.src = "empty.html"
-      if (options.place) {
-        options.place(frame)
-      } else {
-        frame.style.display = "none"
-        document.body.appendChild(frame)
+      this.frame.addEventListener("load", resize)
+      let resizeTimeout = null
+      const scheduleResize = () => {
+        this.win.clearTimeout(resizeTimeout)
+        this.win.__setTimeout(resize, 200)
       }
-
-      this.startedAt = null
-      this.extraSecs = 2
-      this.output = null
+      this.win.addEventListener("keydown", scheduleResize)
+      this.win.addEventListener("mousedown", scheduleResize)
     }
 
     run(code, output) {
@@ -531,4 +531,12 @@
     wrap.appendChild(document.createTextNode(type == "array" ? "]" : "}"))
     node.parentNode.replaceChild(wrap, node)
   }
+
+  function promiseChain(thunks) {
+    function proceed(i, value) {
+      if (i == thunks.length) return Promise.resolve(value)
+      else return thunks[i](value).then(value => proceed(i + 1, value))
+    }
+    return proceed(0, null)
+  }
 })()

Original file line number	Diff line number	Diff line change
`@@ -196,12 +196,12 @@ window.addEventListener("load", function() {`
`196`	`196`	`options.place = function(node) { placeFrame(node, snippet); };`
`197`	`197`	`if (!forHTML) html = snippet.textContent;`
`198`	`198`	`}`
`199`		`- new SandBox(options, function(box) {`
	`199`	`+ SandBox.create(options).then(box => {`
`200`	`200`	`if (html != null)`
`201`	`201`	`box.win.document.documentElement.innerHTML = html;`
`202`	`202`	`sandboxes[name] = box;`
`203`	`203`	`callback(box);`
`204`		`- });`
	`204`	`+ })`
`205`	`205`	`}`
`206`	`206`
`207`	`207`	`function resetSandbox(name) {`