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

64json · 64json · commit 7271b3465af2 · 2019-02-05T15:47:41.000-05:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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.",
diff --git a/src/backend/common/util.js b/src/backend/common/util.js
@@ -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,
 };
diff --git a/src/backend/controllers/tracers.js b/src/backend/controllers/tracers.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));
   }
 });
 
diff --git a/src/backend/tracers/WorkerBuilder.js b/src/backend/tracers/WorkerBuilder.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);
   }
 }
 
diff --git a/src/backend/tracers/js/worker.js b/src/backend/tracers/js/worker.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);
diff --git a/src/frontend/apis/index.js b/src/frontend/apis/index.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();
diff --git a/src/frontend/core/renderers/Array2DRenderer/index.jsx b/src/frontend/core/renderers/Array2DRenderer/index.jsx
@@ -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>
             ))

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "algorithm-visualizer",`
	`2`	`+ "name": "@algorithm-visualizer/algorithm-visualizer",`
`3`	`3`	`"version": "2.0.0",`
`4`	`4`	`"title": "Algorithm Visualizer",`
`5`	`5`	`"description": "Algorithm Visualizer is an interactive online platform that visualizes algorithms from code.",`
Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,8 @@ Object.keys(builderMap).forEach(lang => {`
`73`	`73`	`if (builder instanceof ImageBuilder) {`
`74`	`74`	router.post(`/${lang}`, trace(lang));
`75`	`75`	`} else if (builder instanceof WorkerBuilder) {`
`76`		- router.get(`/${lang}`, (req, res) => res.sendFile(builder.workerPath));
	`76`	+ router.get(`/${lang}`, (req, res) => res.sendFile(builder.tracerPath));
	`77`	+ router.get(`/${lang}/worker`, (req, res) => res.sendFile(builder.workerPath));
`77`	`78`	`}`
`78`	`79`	`});`
`79`	`80`
Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,17 @@`
`1`	`1`	`import path from 'path';`
	`2`	`+import { download } from '/common/util';`
`2`	`3`
`3`	`4`	`class WorkerBuilder {`
`4`	`5`	`constructor() {`
	`6`	`+ this.tracerPath = path.resolve(__dirname, '..', 'public', 'algorithm-visualizer.js');`
`5`	`7`	`this.workerPath = path.resolve(__dirname, 'js', 'worker.js');`
`6`	`8`
`7`	`9`	`this.build = this.build.bind(this);`
`8`	`10`	`}`
`9`	`11`
`10`	`12`	`build(release) {`
	`13`	`+ const { tag_name } = release;`
	`14`	+ return download(`https://github.com/algorithm-visualizer/tracers.js/releases/download/${tag_name}/algorithm-visualizer.js`, this.tracerPath);
`11`	`15`	`}`
`12`	`16`	`}`
`13`	`17`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ class Array2DRenderer extends Renderer {`
`28`	`28`	`}`
`29`	`29`	`{`
`30`	`30`	`longestRow.map((_, i) => (`
`31`		`- <td className={classes(styles.col, styles.index)}>`
	`31`	`+ <td className={classes(styles.col, styles.index)} key={i}>`
`32`	`32`	`<span className={styles.value}>{i}</span>`
`33`	`33`	`</td>`
`34`	`34`	`))`