Remove dependencies on unpkg.com (algorithm-visualizer#234)

Author: 64json

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "algorithm-visualizer",
+  "name": "@algorithm-visualizer/algorithm-visualizer",
   "version": "2.0.0",
   "title": "Algorithm Visualizer",
   "description": "Algorithm Visualizer is an interactive online platform that visualizes algorithms from code.",

package.json

@@ -1,4 +1,5 @@
 import Promise from 'bluebird';
+import axios from 'axios';
 import child_process from 'child_process';
 import path from 'path';
 import fs from 'fs-extra';
@@ -32,11 +33,20 @@ const getDescription = files => {
   return removeMarkdown(descriptionLines.join(' '));
 };
 
+const download = (url, localPath) => axios({ url, method: 'GET', responseType: 'stream' })
+  .then(response => new Promise((resolve, reject) => {
+    const writer = fs.createWriteStream(localPath);
+    writer.on('finish', resolve);
+    writer.on('error', reject);
+    response.data.pipe(writer);
+  }));
+
 export {
   execute,
   createKey,
   isDirectory,
   listFiles,
   listDirectories,
   getDescription,
+  download,
 };

src/backend/common/util.js

@@ -73,7 +73,8 @@ Object.keys(builderMap).forEach(lang => {
   if (builder instanceof ImageBuilder) {
     router.post(`/${lang}`, trace(lang));
   } else if (builder instanceof WorkerBuilder) {
-    router.get(`/${lang}`, (req, res) => res.sendFile(builder.workerPath));
+    router.get(`/${lang}`, (req, res) => res.sendFile(builder.tracerPath));
+    router.get(`/${lang}/worker`, (req, res) => res.sendFile(builder.workerPath));
   }
 });
 

src/backend/controllers/tracers.js

@@ -1,13 +1,17 @@
 import path from 'path';
+import { download } from '/common/util';
 
 class WorkerBuilder {
   constructor() {
+    this.tracerPath = path.resolve(__dirname, '..', 'public', 'algorithm-visualizer.js');
     this.workerPath = path.resolve(__dirname, 'js', 'worker.js');
 
     this.build = this.build.bind(this);
   }
 
   build(release) {
+    const { tag_name } = release;
+    return download(`https://github.com/algorithm-visualizer/tracers.js/releases/download/${tag_name}/algorithm-visualizer.js`, this.tracerPath);
   }
 }
 

src/backend/tracers/WorkerBuilder.js

@@ -1,13 +1,13 @@
 const process = { env: { ALGORITHM_VISUALIZER: '1' } };
-importScripts('https://unpkg.com/algorithm-visualizer@latest/dist/algorithm-visualizer.js');
+importScripts('/api/tracers/js');
 
 const sandbox = code => {
   const require = name => ({ 'algorithm-visualizer': AlgorithmVisualizer }[name]); // fake require
   eval(code);
 };
 
 onmessage = e => {
-  const lines = e.data.split('\n').map((line, i) => line.replace(/(.+\. *delay *)(\( *\))/g, `$1(${i})`));
+  const lines = e.data.split('\n').map((line, i) => line.replace(/(\.\s*delay\s*)\(\s*\)/g, `$1(${i})`));
   const code = lines.join('\n');
   sandbox(code);
   postMessage(AlgorithmVisualizer.Tracer.traces);

src/backend/tracers/js/worker.js

@@ -79,7 +79,7 @@ const TracerApi = {
   }]),
   json: ({ code }) => new Promise(resolve => resolve(JSON.parse(code))),
   js: ({ code }, params, cancelToken) => new Promise((resolve, reject) => {
-    const worker = new Worker('/api/tracers/js');
+    const worker = new Worker('/api/tracers/js/worker');
     if (cancelToken) {
       cancelToken.promise.then(cancel => {
         worker.terminate();

src/frontend/apis/index.js

@@ -28,7 +28,7 @@ class Array2DRenderer extends Renderer {
           }
           {
             longestRow.map((_, i) => (
-              <td className={classes(styles.col, styles.index)}>
+              <td className={classes(styles.col, styles.index)} key={i}>
                 <span className={styles.value}>{i}</span>
               </td>
             ))