load all scripts in order to ensure correctness

englercj · Sep 11, 2018 · 45e01fc · 45e01fc
1 parent 5d6ada7
commit 45e01fc
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -20,11 +20,13 @@ locally. Finally, visit http://localhost:8080. Details can be found in the respe
 
 ### Should Have (v1 or v2)
 
-1. Data attachments like images, or json to power a demo.
-2. Embed view that embeds just the preview with a link back
+1. Add ability to use custom URL for pixi versions.
+2. Load all scripts at once in results, then only execute in order.
+3. Data attachments like images, or json to power a demo.
+4. Embed view that embeds just the preview with a link back
     * Useful for blog/forums posts and such.
-3. UI to star a playground
-4. Add homepage and search results
+5. UI to star a playground
+6. Add homepage and search results
     * Show highly starred/trending playgrounds on homepage
     * Also use official/features flags for homepage
 

diff --git a/client/src/results.ts b/client/src/results.ts
@@ -42,47 +42,23 @@ function handleMessage(event: MessageEvent) {
 }
 
 function updateDemo(data: IPlayground) {
-    updatePixi(data, () => {
-        updateExternalScripts(data, () => {
-            updateDemoCode(data);
-        });
-    });
+    updateScripts(data, () => updateDemoCode(data));
 }
 
-function updatePixi(data: IPlayground, cb: () => void) {
-    const script = document.createElement('script');
-    script.src = `https://d157l7jdn8e5sf.cloudfront.net/${data.pixiVersion || 'release'}/pixi.js`;
-    script.onload = cb;
-    script.onerror = cb;
+function updateScripts(data: IPlayground, cb: () => void) {
+    let scripts = [];
 
-    document.body.appendChild(script);
-}
+    // Add pixi version
+    scripts.push(`https://d157l7jdn8e5sf.cloudfront.net/${data.pixiVersion || 'release'}/pixi.js`);
 
-function updateExternalScripts(data: IPlayground, cb: () => void) {
-    if (!data.externaljs || data.externaljs.length === 0)
+    // Add external scripts
+    if (data.externaljs && data.externaljs.length > 0)
     {
-        cb();
-        return;
+        scripts = scripts.concat(data.externaljs.map((v) => v.url));
     }
 
-    let loadsDone = 0;
-    const loadsNeeded = data.externaljs.length;
-    const loadCallback = () => {
-        console.log(loadsDone);
-        loadsDone++;
-        if (loadsDone === loadsNeeded)
-            cb();
-    };
-
-    for (let i = 0; i < data.externaljs.length; ++i)
-    {
-        const script = document.createElement('script');
-        script.src = data.externaljs[i].url;
-        script.onload = loadCallback;
-        script.onerror = loadCallback;
-
-        document.body.appendChild(script);
-    }
+    // load each in series
+    eachSeries(scripts, loadScript, cb);
 }
 
 function updateDemoCode(data: IPlayground) {
@@ -91,3 +67,29 @@ function updateDemoCode(data: IPlayground) {
 
     document.body.appendChild(script);
 }
+
+function loadScript(url: string, cb: () => void)
+{
+    const script = document.createElement('script');
+    script.src = url;
+    script.onload = cb;
+    script.onerror = cb;
+
+    document.body.appendChild(script);
+}
+
+type TNextCallback = () => void;
+type TIterator<T> = (value: T, next: TNextCallback) => void;
+function eachSeries<T>(array: T[], iter: TIterator<T>, done: TNextCallback)
+{
+    let index = 0;
+    const next = () =>
+    {
+        if (index === array.length)
+            return done();
+
+        iter(array[index++], next);
+    };
+
+    next();
+}