From 76a066ab74c6f1551de1a77b6a1572c0c41550b6 Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Sat, 21 Apr 2018 12:25:48 +0100
Subject: [PATCH 1/3] The raw, unpresented dish is now returned to the app
 after baking, where it can be retrieved as various different data types.

---
 src/core/Chef.mjs                          | 22 ++++++-
 src/core/ChefWorker.js                     | 19 ++++++
 src/core/Dish.mjs                          | 17 +++--
 src/core/FlowControl.js                    |  4 +-
 src/core/Recipe.mjs                        | 26 +++++---
 src/core/Utils.mjs                         | 37 ++++-------
 src/core/config/scripts/generateConfig.mjs |  2 +-
 src/web/HighlighterWaiter.js               |  4 +-
 src/web/Manager.js                         |  1 -
 src/web/OutputWaiter.js                    | 75 ++++++++++++++--------
 src/web/WorkerWaiter.js                    | 28 ++++++++
 src/web/stylesheets/utils/_overrides.css   |  1 +
 12 files changed, 163 insertions(+), 73 deletions(-)

diff --git a/src/core/Chef.mjs b/src/core/Chef.mjs
index a935d75c..79172479 100755
--- a/src/core/Chef.mjs
+++ b/src/core/Chef.mjs
@@ -89,7 +89,14 @@ class Chef {
         const threshold = (options.ioDisplayThreshold || 1024) * 1024;
         const returnType = this.dish.size > threshold ? Dish.ARRAY_BUFFER : Dish.STRING;
 
+        // Create a raw version of the dish, unpresented
+        const rawDish = new Dish(this.dish);
+
+        // Present the raw result
+        await recipe.present(this.dish);
+
         return {
+            dish: rawDish,
             result: this.dish.type === Dish.HTML ?
                 await this.dish.get(Dish.HTML, notUTF8) :
                 await this.dish.get(returnType, notUTF8),
@@ -123,7 +130,7 @@ class Chef {
 
         const startTime = new Date().getTime(),
             recipe = new Recipe(recipeConfig),
-            dish = new Dish("", Dish.STRING);
+            dish = new Dish();
 
         try {
             recipe.execute(dish);
@@ -167,6 +174,19 @@ class Chef {
         };
     }
 
+
+    /**
+     * Translates the dish to a specified type and returns it.
+     *
+     * @param {Dish} dish
+     * @param {string} type
+     * @returns {Dish}
+     */
+    async getDishAs(dish, type) {
+        const newDish = new Dish(dish);
+        return await newDish.get(type);
+    }
+
 }
 
 export default Chef;
diff --git a/src/core/ChefWorker.js b/src/core/ChefWorker.js
index 604189e7..dbbda126 100644
--- a/src/core/ChefWorker.js
+++ b/src/core/ChefWorker.js
@@ -60,6 +60,9 @@ self.addEventListener("message", function(e) {
         case "silentBake":
             silentBake(r.data);
             break;
+        case "getDishAs":
+            getDishAs(r.data);
+            break;
         case "docURL":
             // Used to set the URL of the current document so that scripts can be
             // imported into an inline worker.
@@ -125,6 +128,22 @@ function silentBake(data) {
 }
 
 
+/**
+ * Translates the dish to a given type.
+ */
+async function getDishAs(data) {
+    const value = await self.chef.getDishAs(data.dish, data.type);
+
+    self.postMessage({
+        action: "dishReturned",
+        data: {
+            value: value,
+            id: data.id
+        }
+    });
+}
+
+
 /**
  * Checks that all required modules are loaded and loads them if not.
  *
diff --git a/src/core/Dish.mjs b/src/core/Dish.mjs
index 6aeaf3e9..c799b122 100755
--- a/src/core/Dish.mjs
+++ b/src/core/Dish.mjs
@@ -17,14 +17,17 @@ class Dish {
     /**
      * Dish constructor
      *
-     * @param {byteArray|string|number|ArrayBuffer|BigNumber} [value=null]
-     *     - The value of the input data.
-     * @param {number} [type=Dish.BYTE_ARRAY]
-     *     - The data type of value, see Dish enums.
+     * @param {Dish} [dish=null] - A dish to clone
      */
-    constructor(value=null, type=Dish.BYTE_ARRAY) {
-        this.value = value;
-        this.type = type;
+    constructor(dish=null) {
+        this.value = [];
+        this.type = Dish.BYTE_ARRAY;
+
+        if (dish &&
+            dish.hasOwnProperty("value") &&
+            dish.hasOwnProperty("type")) {
+            this.set(dish.value, dish.type);
+        }
     }
 
 
diff --git a/src/core/FlowControl.js b/src/core/FlowControl.js
index 92440c49..f1bb8dab 100755
--- a/src/core/FlowControl.js
+++ b/src/core/FlowControl.js
@@ -68,7 +68,9 @@ const FlowControl = {
                 op.ingValues = JSON.parse(JSON.stringify(ingValues[i]));
             });
 
-            const dish = new Dish(inputs[i], inputType);
+            const dish = new Dish();
+            dish.set(inputs[i], inputType);
+
             try {
                 progress = await recipe.execute(dish, 0, state);
             } catch (err) {
diff --git a/src/core/Recipe.mjs b/src/core/Recipe.mjs
index 006e431c..95dab22b 100755
--- a/src/core/Recipe.mjs
+++ b/src/core/Recipe.mjs
@@ -130,10 +130,12 @@ class Recipe  {
      *     - The final progress through the recipe
      */
     async execute(dish, startFrom=0, forkState={}) {
-        let op, input, output, lastRunOp,
+        let op, input, output,
             numJumps = 0,
             numRegisters = forkState.numRegisters || 0;
 
+        if (startFrom === 0) this.lastRunOp = null;
+
         log.debug(`[*] Executing recipe of ${this.opList.length} operations, starting at ${startFrom}`);
 
         for (let i = startFrom; i < this.opList.length; i++) {
@@ -169,7 +171,7 @@ class Recipe  {
                     numRegisters = state.numRegisters;
                 } else {
                     output = await op.run(input, op.ingValues);
-                    lastRunOp = op;
+                    this.lastRunOp = op;
                     dish.set(output, op.outputType);
                 }
             } catch (err) {
@@ -188,18 +190,24 @@ class Recipe  {
             }
         }
 
-        // Present the results of the final operation
-        if (lastRunOp) {
-            // TODO try/catch
-            output = await lastRunOp.present(output);
-            dish.set(output, lastRunOp.presentType);
-        }
-
         log.debug("Recipe complete");
         return this.opList.length;
     }
 
 
+    /**
+     * Present the results of the final operation.
+     *
+     * @param {Dish} dish
+     */
+    async present(dish) {
+        if (!this.lastRunOp) return;
+
+        const output = await this.lastRunOp.present(await dish.get(this.lastRunOp.outputType));
+        dish.set(output, this.lastRunOp.presentType);
+    }
+
+
     /**
      * Returns the recipe configuration in string format.
      *
diff --git a/src/core/Utils.mjs b/src/core/Utils.mjs
index 88cfa52e..f90bc394 100755
--- a/src/core/Utils.mjs
+++ b/src/core/Utils.mjs
@@ -7,7 +7,7 @@
 import utf8 from "utf8";
 import moment from "moment-timezone";
 import {fromBase64} from "./lib/Base64";
-import {toHexFast, fromHex} from "./lib/Hex";
+import {fromHex} from "./lib/Hex";
 
 
 /**
@@ -833,39 +833,24 @@ class Utils {
 
         const formatFile = async function(file, i) {
             const buff = await Utils.readFile(file);
-            const fileStr = Utils.arrayBufferToStr(buff.buffer);
             const blob = new Blob(
                 [buff],
                 {type: "octet/stream"}
             );
-            const blobUrl = URL.createObjectURL(blob);
-
-            const viewFileElem = `<a href='#collapse${i}'
-                class='collapsed'
-                data-toggle='collapse'
-                aria-expanded='true'
-                aria-controls='collapse${i}'
-                title="Show/hide contents of '${Utils.escapeHtml(file.name)}'">&#x1f441;&#xfe0f;</a>`;
-
-            const downloadFileElem = `<a href='${blobUrl}'
-                title='Download ${Utils.escapeHtml(file.name)}'
-                download='${Utils.escapeHtml(file.name)}'>&#x1f4be;</a>`;
-
-            const hexFileData = toHexFast(buff);
-
-            const switchToInputElem = `<a href='#switchFileToInput${i}'
-                class='file-switch'
-                title='Move file to input as hex'
-                fileValue='${hexFileData}'>&#x21e7;</a>`;
 
             const html = `<div class='panel panel-default' style='white-space: normal;'>
                     <div class='panel-heading' role='tab' id='heading${i}'>
                         <h4 class='panel-title'>
                             <div>
-                                ${Utils.escapeHtml(file.name)}
-                                ${viewFileElem}
-                                ${downloadFileElem}
-                                ${switchToInputElem}
+                                <a href='#collapse${i}'
+                                    class='collapsed'
+                                    data-toggle='collapse'
+                                    aria-expanded='true'
+                                    aria-controls='collapse${i}'
+                                    title="Show/hide contents of '${Utils.escapeHtml(file.name)}'">${Utils.escapeHtml(file.name)}</a>
+                                <a href='${URL.createObjectURL(blob)}'
+                                    title='Download ${Utils.escapeHtml(file.name)}'
+                                    download='${Utils.escapeHtml(file.name)}'>&#x1f4be;</a>
                                 <span class='pull-right'>
                                     ${file.size.toLocaleString()} bytes
                                 </span>
@@ -875,7 +860,7 @@ class Utils {
                     <div id='collapse${i}' class='panel-collapse collapse'
                         role='tabpanel' aria-labelledby='heading${i}'>
                         <div class='panel-body'>
-                            <pre><code>${Utils.escapeHtml(fileStr)}</code></pre>
+                            <pre><code>${Utils.escapeHtml(Utils.arrayBufferToStr(buff.buffer))}</code></pre>
                         </div>
                     </div>
                 </div>`;
diff --git a/src/core/config/scripts/generateConfig.mjs b/src/core/config/scripts/generateConfig.mjs
index f124e0d0..778b6e30 100644
--- a/src/core/config/scripts/generateConfig.mjs
+++ b/src/core/config/scripts/generateConfig.mjs
@@ -99,7 +99,7 @@ export default OpModules;
         path.join(dir, `modules/${module}.mjs`),
         code
     );
-    console.log(`Written ${module} module`); 
+    console.log(`Written ${module} module`);
 }
 
 
diff --git a/src/web/HighlighterWaiter.js b/src/web/HighlighterWaiter.js
index 3960e846..cfc36128 100755
--- a/src/web/HighlighterWaiter.js
+++ b/src/web/HighlighterWaiter.js
@@ -393,13 +393,13 @@ HighlighterWaiter.prototype.displayHighlights = function(pos, direction) {
  * @param {number} pos.start - The start offset.
  * @param {number} pos.end - The end offset.
  */
-HighlighterWaiter.prototype.highlight = function(textarea, highlighter, pos) {
+HighlighterWaiter.prototype.highlight = async function(textarea, highlighter, pos) {
     if (!this.app.options.showHighlighter) return false;
     if (!this.app.options.attemptHighlight) return false;
 
     // Check if there is a carriage return in the output dish as this will not
     // be displayed by the HTML textarea and will mess up highlighting offsets.
-    if (this.manager.output.containsCR()) return false;
+    if (await this.manager.output.containsCR()) return false;
 
     const startPlaceholder = "[startHighlight]";
     const startPlaceholderRegex = /\[startHighlight\]/g;
diff --git a/src/web/Manager.js b/src/web/Manager.js
index 878077c1..8e5e7374 100755
--- a/src/web/Manager.js
+++ b/src/web/Manager.js
@@ -158,7 +158,6 @@ Manager.prototype.initialiseEventListeners = function() {
     document.getElementById("output-html").addEventListener("mousemove", this.highlighter.outputHtmlMousemove.bind(this.highlighter));
     this.addMultiEventListener("#output-text", "mousedown dblclick select",  this.highlighter.outputMousedown, this.highlighter);
     this.addMultiEventListener("#output-html", "mousedown dblclick select",  this.highlighter.outputHtmlMousedown, this.highlighter);
-    this.addDynamicListener(".file-switch", "click", this.output.fileSwitch, this.output);
     this.addDynamicListener("#output-file-download", "click", this.output.downloadFile, this.output);
     this.addDynamicListener("#output-file-slice", "click", this.output.displayFileSlice, this.output);
     document.getElementById("show-file-overlay").addEventListener("click", this.output.showFileOverlayClick.bind(this.output));
diff --git a/src/web/OutputWaiter.js b/src/web/OutputWaiter.js
index 18d64075..6d2f3840 100755
--- a/src/web/OutputWaiter.js
+++ b/src/web/OutputWaiter.js
@@ -40,7 +40,7 @@ OutputWaiter.prototype.get = function() {
  * @param {number} duration - The length of time (ms) it took to generate the output
  * @param {boolean} [preserveBuffer=false] - Whether to preserve the dishBuffer
  */
-OutputWaiter.prototype.set = function(data, type, duration, preserveBuffer) {
+OutputWaiter.prototype.set = async function(data, type, duration, preserveBuffer) {
     log.debug("Output type: " + type);
     const outputText = document.getElementById("output-text");
     const outputHtml = document.getElementById("output-html");
@@ -51,6 +51,7 @@ OutputWaiter.prototype.set = function(data, type, duration, preserveBuffer) {
 
     if (!preserveBuffer) {
         this.closeFile();
+        this.dishStr = null;
         document.getElementById("show-file-overlay").style.display = "none";
     }
 
@@ -64,9 +65,6 @@ OutputWaiter.prototype.set = function(data, type, duration, preserveBuffer) {
 
             outputText.value = "";
             outputHtml.innerHTML = data;
-            this.dishStr = Utils.unescapeHtml(Utils.stripHtmlTags(data, true));
-            length = data.length;
-            lines = this.dishStr.count("\n") + 1;
 
             // Execute script sections
             scriptElements = outputHtml.querySelectorAll("script");
@@ -77,6 +75,10 @@ OutputWaiter.prototype.set = function(data, type, duration, preserveBuffer) {
                     log.error(err);
                 }
             }
+
+            await this.getDishStr();
+            length = this.dishStr.length;
+            lines = this.dishStr.count("\n") + 1;
             break;
         case "ArrayBuffer":
             outputText.style.display = "block";
@@ -86,7 +88,6 @@ OutputWaiter.prototype.set = function(data, type, duration, preserveBuffer) {
 
             outputText.value = "";
             outputHtml.innerHTML = "";
-            this.dishStr = "";
             length = data.byteLength;
 
             this.setFile(data);
@@ -151,10 +152,10 @@ OutputWaiter.prototype.closeFile = function() {
 /**
  * Handler for file download events.
  */
-OutputWaiter.prototype.downloadFile = function() {
+OutputWaiter.prototype.downloadFile = async function() {
     this.filename = window.prompt("Please enter a filename:", this.filename || "download.dat");
+    await this.getDishBuffer();
     const file = new File([this.dishBuffer], this.filename);
-
     if (this.filename) FileSaver.saveAs(file, this.filename, false);
 };
 
@@ -254,9 +255,6 @@ OutputWaiter.prototype.adjustWidth = function() {
  * Saves the current output to a file.
  */
 OutputWaiter.prototype.saveClick = function() {
-    if (!this.dishBuffer) {
-        this.dishBuffer = new Uint8Array(Utils.strToCharcode(this.dishStr)).buffer;
-    }
     this.downloadFile();
 };
 
@@ -265,8 +263,10 @@ OutputWaiter.prototype.saveClick = function() {
  * Handler for copy click events.
  * Copies the output to the clipboard.
  */
-OutputWaiter.prototype.copyClick = function() {
-    // Create invisible textarea to populate with the raw dishStr (not the printable version that
+OutputWaiter.prototype.copyClick = async function() {
+    await this.getDishStr();
+
+    // Create invisible textarea to populate with the raw dish string (not the printable version that
     // contains dots instead of the actual bytes)
     const textarea = document.createElement("textarea");
     textarea.style.position = "fixed";
@@ -303,7 +303,7 @@ OutputWaiter.prototype.copyClick = function() {
  * Handler for switch click events.
  * Moves the current output into the input textarea.
  */
-OutputWaiter.prototype.switchClick = function() {
+OutputWaiter.prototype.switchClick = async function() {
     this.switchOrigData = this.manager.input.get();
     document.getElementById("undo-switch").disabled = false;
     if (this.dishBuffer) {
@@ -315,6 +315,7 @@ OutputWaiter.prototype.switchClick = function() {
             }
         });
     } else {
+        await this.getDishStr();
         this.app.setInput(this.dishStr);
     }
 };
@@ -329,17 +330,6 @@ OutputWaiter.prototype.undoSwitchClick = function() {
     document.getElementById("undo-switch").disabled = true;
 };
 
-/**
- * Handler for file switch click events.
- * Moves a file's data for items created via Utils.displayFilesAsHTML to the input.
- */
-OutputWaiter.prototype.fileSwitch = function(e) {
-    e.preventDefault();
-    this.switchOrigData = this.manager.input.get();
-    this.app.setInput(e.target.getAttribute("fileValue"));
-    document.getElementById("undo-switch").disabled = false;
-};
-
 
 /**
  * Handler for maximise output click events.
@@ -409,8 +399,43 @@ OutputWaiter.prototype.setStatusMsg = function(msg) {
  *
  * @returns {boolean}
  */
-OutputWaiter.prototype.containsCR = function() {
+OutputWaiter.prototype.containsCR = async function() {
+    await this.getDishStr();
     return this.dishStr.indexOf("\r") >= 0;
 };
 
+
+/**
+ * Retrieves the current dish as a string, returning the cached version if possible.
+ *
+ * @returns {string}
+ */
+OutputWaiter.prototype.getDishStr = async function() {
+    if (this.dishStr) return this.dishStr;
+
+    this.dishStr = await new Promise(resolve => {
+        this.manager.worker.getDishAs(this.app.dish, "string", r => {
+            resolve(r.value);
+        });
+    });
+    return this.dishStr;
+};
+
+
+/**
+ * Retrieves the current dish as an ArrayBuffer, returning the cached version if possible.
+ *
+ * @returns {ArrayBuffer}
+ */
+OutputWaiter.prototype.getDishBuffer = async function() {
+    if (this.dishBuffer) return this.dishBuffer;
+
+    this.dishBuffer = await new Promise(resolve => {
+        this.manager.worker.getDishAs(this.app.dish, "ArrayBuffer", r => {
+            resolve(r.value);
+        });
+    });
+    return this.dishBuffer;
+};
+
 export default OutputWaiter;
diff --git a/src/web/WorkerWaiter.js b/src/web/WorkerWaiter.js
index 1473e101..4f3bad1b 100755
--- a/src/web/WorkerWaiter.js
+++ b/src/web/WorkerWaiter.js
@@ -14,6 +14,9 @@ import ChefWorker from "worker-loader?inline&fallback=false!../core/ChefWorker.j
 const WorkerWaiter = function(app, manager) {
     this.app = app;
     this.manager = manager;
+
+    this.callbacks = {};
+    this.callbackID = 0;
 };
 
 
@@ -52,6 +55,9 @@ WorkerWaiter.prototype.handleChefMessage = function(e) {
             this.app.handleError(r.data);
             this.setBakingStatus(false);
             break;
+        case "dishReturned":
+            this.callbacks[r.data.id](r.data);
+            break;
         case "silentBakeComplete":
             break;
         case "workerLoaded":
@@ -117,6 +123,7 @@ WorkerWaiter.prototype.bakingComplete = function(response) {
     }
 
     this.app.progress = response.progress;
+    this.app.dish = response.dish;
     this.manager.recipe.updateBreakpointIndicator(response.progress);
     this.manager.output.set(response.result, response.type, response.duration);
     log.debug("--- Bake complete ---");
@@ -185,6 +192,27 @@ WorkerWaiter.prototype.highlight = function(recipeConfig, direction, pos) {
 };
 
 
+/**
+ * Asks the ChefWorker to return the dish as the specified type
+ *
+ * @param {Dish} dish
+ * @param {string} type
+ * @param {Function} callback
+ */
+WorkerWaiter.prototype.getDishAs = function(dish, type, callback) {
+    const id = this.callbackID++;
+    this.callbacks[id] = callback;
+    this.chefWorker.postMessage({
+        action: "getDishAs",
+        data: {
+            dish: dish,
+            type: type,
+            id: id
+        }
+    });
+};
+
+
 /**
  * Sets the console log level in the worker.
  *
diff --git a/src/web/stylesheets/utils/_overrides.css b/src/web/stylesheets/utils/_overrides.css
index 23f83bd8..43c5b1d2 100755
--- a/src/web/stylesheets/utils/_overrides.css
+++ b/src/web/stylesheets/utils/_overrides.css
@@ -62,6 +62,7 @@ a:focus {
 .form-control,
 .popover,
 .alert,
+.panel,
 .modal-content,
 .tooltip-inner,
 .dropdown-menu,

From a8aa1bc5e863fbae88b27fce8e941d967c36d5f8 Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Sat, 21 Apr 2018 13:41:42 +0100
Subject: [PATCH 2/3] Added File and JSON Dish types and updated types for
 compression ops.

---
 src/core/Dish.mjs                   | 47 +++++++++++++++++++++++++++--
 src/core/operations/Gunzip.mjs      | 15 ++++-----
 src/core/operations/Gzip.mjs        | 12 ++++----
 src/core/operations/RawDeflate.mjs  | 12 ++++----
 src/core/operations/RawInflate.mjs  | 17 +++++------
 src/core/operations/Unzip.mjs       |  6 ++--
 src/core/operations/Zip.mjs         | 17 ++++++-----
 src/core/operations/ZlibDeflate.mjs | 12 ++++----
 src/core/operations/ZlibInflate.mjs | 15 ++++-----
 9 files changed, 94 insertions(+), 59 deletions(-)

diff --git a/src/core/Dish.mjs b/src/core/Dish.mjs
index c799b122..eee404fc 100755
--- a/src/core/Dish.mjs
+++ b/src/core/Dish.mjs
@@ -54,6 +54,10 @@ class Dish {
             case "bignumber":
             case "big number":
                 return Dish.BIG_NUMBER;
+            case "json":
+                return Dish.JSON;
+            case "file":
+                return Dish.FILE;
             case "list<file>":
                 return Dish.LIST_FILE;
             default:
@@ -82,6 +86,10 @@ class Dish {
                 return "ArrayBuffer";
             case Dish.BIG_NUMBER:
                 return "BigNumber";
+            case Dish.JSON:
+                return "JSON";
+            case Dish.FILE:
+                return "File";
             case Dish.LIST_FILE:
                 return "List<File>";
             default:
@@ -160,6 +168,13 @@ class Dish {
             case Dish.BIG_NUMBER:
                 this.value = this.value instanceof BigNumber ? Utils.strToByteArray(this.value.toFixed()) : [];
                 break;
+            case Dish.JSON:
+                this.value = this.value ? Utils.strToByteArray(JSON.stringify(this.value)) : [];
+                break;
+            case Dish.FILE:
+                this.value = await Utils.readFile(this.value);
+                this.value = Array.prototype.slice.call(this.value);
+                break;
             case Dish.LIST_FILE:
                 this.value = await Promise.all(this.value.map(async f => Utils.readFile(f)));
                 this.value = this.value.map(b => Array.prototype.slice.call(b));
@@ -194,8 +209,15 @@ class Dish {
                 }
                 this.type = Dish.BIG_NUMBER;
                 break;
-            case Dish.LIST_FILE:
+            case Dish.JSON:
+                this.value = JSON.parse(byteArrayToStr(this.value));
+                this.type = Dish.JSON;
+                break;
+            case Dish.FILE:
                 this.value = new File(this.value, "unknown");
+                break;
+            case Dish.LIST_FILE:
+                this.value = [new File(this.value, "unknown")];
                 this.type = Dish.LIST_FILE;
                 break;
             default:
@@ -235,6 +257,11 @@ class Dish {
                 return this.value instanceof ArrayBuffer;
             case Dish.BIG_NUMBER:
                 return this.value instanceof BigNumber;
+            case Dish.JSON:
+                // All values can be serialised in some manner, so we return true in all cases
+                return true;
+            case Dish.FILE:
+                return this.value instanceof File;
             case Dish.LIST_FILE:
                 return this.value instanceof Array &&
                     this.value.reduce((acc, curr) => acc && curr instanceof File, true);
@@ -262,6 +289,10 @@ class Dish {
                 return this.value.toString().length;
             case Dish.ARRAY_BUFFER:
                 return this.value.byteLength;
+            case Dish.JSON:
+                return JSON.stringify(this.value).length;
+            case Dish.FILE:
+                return this.value.size;
             case Dish.LIST_FILE:
                 return this.value.reduce((acc, curr) => acc + curr.size, 0);
             default:
@@ -308,12 +339,24 @@ Dish.ARRAY_BUFFER = 4;
  * @enum
  */
 Dish.BIG_NUMBER = 5;
+/**
+ * Dish data type enum for JSON.
+ * @readonly
+ * @enum
+ */
+Dish.JSON = 6;
 /**
  * Dish data type enum for lists of files.
  * @readonly
  * @enum
  */
-Dish.LIST_FILE = 6;
+Dish.FILE = 7;
+/**
+* Dish data type enum for lists of files.
+* @readonly
+* @enum
+*/
+Dish.LIST_FILE = 8;
 
 
 export default Dish;
diff --git a/src/core/operations/Gunzip.mjs b/src/core/operations/Gunzip.mjs
index 60e29d6f..7e456525 100644
--- a/src/core/operations/Gunzip.mjs
+++ b/src/core/operations/Gunzip.mjs
@@ -5,7 +5,6 @@
  */
 
 import Operation from "../Operation";
-import Utils from "../Utils";
 import zlibAndGzip from "zlibjs/bin/zlib_and_gzip.min";
 
 const Zlib = zlibAndGzip.Zlib;
@@ -24,21 +23,19 @@ class Gunzip extends Operation {
         this.name = "Gunzip";
         this.module = "Compression";
         this.description = "Decompresses data which has been compressed using the deflate algorithm with gzip headers.";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.args = [];
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
-     * @returns {byteArray}
+     * @returns {File}
      */
     run(input, args) {
-        // Deal with character encoding issues
-        input = Utils.strToByteArray(Utils.byteArrayToUtf8(input));
-        const gunzip = new Zlib.Gunzip(input);
-        return Array.prototype.slice.call(gunzip.decompress());
+        const gunzip = new Zlib.Gunzip(new Uint8Array(input));
+        return new Uint8Array(gunzip.decompress()).buffer;
     }
 
 }
diff --git a/src/core/operations/Gzip.mjs b/src/core/operations/Gzip.mjs
index 86a96763..878959ab 100644
--- a/src/core/operations/Gzip.mjs
+++ b/src/core/operations/Gzip.mjs
@@ -24,8 +24,8 @@ class Gzip extends Operation {
         this.name = "Gzip";
         this.module = "Compression";
         this.description = "Compresses data using the deflate algorithm with gzip headers.";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.args = [
             {
                 name: "Compression type",
@@ -51,9 +51,9 @@ class Gzip extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
-     * @returns {byteArray}
+     * @returns {ArrayBuffer}
      */
     run(input, args) {
         const filename = args[1],
@@ -76,8 +76,8 @@ class Gzip extends Operation {
             options.comment = comment;
         }
 
-        const gzip = new Zlib.Gzip(input, options);
-        return Array.prototype.slice.call(gzip.compress());
+        const gzip = new Zlib.Gzip(new Uint8Array(input), options);
+        return new Uint8Array(gzip.compress()).buffer;
     }
 
 }
diff --git a/src/core/operations/RawDeflate.mjs b/src/core/operations/RawDeflate.mjs
index a1a30981..55a922b0 100644
--- a/src/core/operations/RawDeflate.mjs
+++ b/src/core/operations/RawDeflate.mjs
@@ -30,8 +30,8 @@ class RawDeflate extends Operation {
         this.name = "Raw Deflate";
         this.module = "Compression";
         this.description = "Compresses data using the deflate algorithm with no headers.";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.args = [
             {
                 name: "Compression type",
@@ -42,15 +42,15 @@ class RawDeflate extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
-     * @returns {byteArray}
+     * @returns {ArrayBuffer}
      */
     run(input, args) {
-        const deflate = new Zlib.RawDeflate(input, {
+        const deflate = new Zlib.RawDeflate(new Uint8Array(input), {
             compressionType: RAW_COMPRESSION_TYPE_LOOKUP[args[0]]
         });
-        return Array.prototype.slice.call(deflate.compress());
+        return new Uint8Array(deflate.compress()).buffer;
     }
 
 }
diff --git a/src/core/operations/RawInflate.mjs b/src/core/operations/RawInflate.mjs
index 5ec74649..93a7b91f 100644
--- a/src/core/operations/RawInflate.mjs
+++ b/src/core/operations/RawInflate.mjs
@@ -5,7 +5,6 @@
  */
 
 import Operation from "../Operation";
-import Utils from "../Utils";
 import {INFLATE_BUFFER_TYPE} from "../lib/Zlib";
 import rawinflate from "zlibjs/bin/rawinflate.min";
 
@@ -30,8 +29,8 @@ class RawInflate extends Operation {
         this.name = "Raw Inflate";
         this.module = "Compression";
         this.description = "Decompresses data which has been compressed using the deflate algorithm with no headers.";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.args = [
             {
                 name: "Start index",
@@ -62,21 +61,19 @@ class RawInflate extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
-     * @returns {byteArray}
+     * @returns {ArrayBuffer}
      */
     run(input, args) {
-        // Deal with character encoding issues
-        input = Utils.strToByteArray(Utils.byteArrayToUtf8(input));
-        const inflate = new Zlib.RawInflate(input, {
+        const inflate = new Zlib.RawInflate(new Uint8Array(input), {
                 index: args[0],
                 bufferSize: args[1],
                 bufferType: RAW_BUFFER_TYPE_LOOKUP[args[2]],
                 resize: args[3],
                 verify: args[4]
             }),
-            result = Array.prototype.slice.call(inflate.decompress());
+            result = new Uint8Array(inflate.decompress());
 
         // Raw Inflate somethimes messes up and returns nonsense like this:
         // ]....]....]....]....]....]....]....]....]....]....]....]....]....]...
@@ -97,7 +94,7 @@ class RawInflate extends Operation {
             }
         }
         // This seems to be the easiest way...
-        return result;
+        return result.buffer;
     }
 
 }
diff --git a/src/core/operations/Unzip.mjs b/src/core/operations/Unzip.mjs
index 07f2a65e..e94b1858 100644
--- a/src/core/operations/Unzip.mjs
+++ b/src/core/operations/Unzip.mjs
@@ -24,7 +24,7 @@ class Unzip extends Operation {
         this.name = "Unzip";
         this.module = "Compression";
         this.description = "Decompresses data using the PKZIP algorithm and displays it per file, with support for passwords.";
-        this.inputType = "byteArray";
+        this.inputType = "ArrayBuffer";
         this.outputType = "List<File>";
         this.presentType = "html";
         this.args = [
@@ -42,7 +42,7 @@ class Unzip extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
      * @returns {File[]}
      */
@@ -51,7 +51,7 @@ class Unzip extends Operation {
                 password: Utils.strToByteArray(args[0]),
                 verify: args[1]
             },
-            unzip = new Zlib.Unzip(input, options),
+            unzip = new Zlib.Unzip(new Uint8Array(input), options),
             filenames = unzip.getFilenames();
 
         return filenames.map(fileName => {
diff --git a/src/core/operations/Zip.mjs b/src/core/operations/Zip.mjs
index c487ccbb..aaa75dbb 100644
--- a/src/core/operations/Zip.mjs
+++ b/src/core/operations/Zip.mjs
@@ -36,8 +36,8 @@ class Zip extends Operation {
         this.name = "Zip";
         this.module = "Compression";
         this.description = "Compresses data using the PKZIP algorithm with the given filename.<br><br>No support for multiple files at this time.";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "File";
         this.args = [
             {
                 name: "Filename",
@@ -73,14 +73,15 @@ class Zip extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
-     * @returns {byteArray}
+     * @returns {File}
      */
     run(input, args) {
-        const password = Utils.strToByteArray(args[2]),
+        const filename = args[0],
+            password = Utils.strToByteArray(args[2]),
             options = {
-                filename: Utils.strToByteArray(args[0]),
+                filename: Utils.strToByteArray(filename),
                 comment: Utils.strToByteArray(args[1]),
                 compressionMethod: ZIP_COMPRESSION_METHOD_LOOKUP[args[3]],
                 os: ZIP_OS_LOOKUP[args[4]],
@@ -92,8 +93,8 @@ class Zip extends Operation {
 
         if (password.length)
             zip.setPassword(password);
-        zip.addFile(input, options);
-        return Array.prototype.slice.call(zip.compress());
+        zip.addFile(new Uint8Array(input), options);
+        return new File([zip.compress()], filename);
     }
 
 }
diff --git a/src/core/operations/ZlibDeflate.mjs b/src/core/operations/ZlibDeflate.mjs
index 99948f93..40f09dc5 100644
--- a/src/core/operations/ZlibDeflate.mjs
+++ b/src/core/operations/ZlibDeflate.mjs
@@ -24,8 +24,8 @@ class ZlibDeflate extends Operation {
         this.name = "Zlib Deflate";
         this.module = "Compression";
         this.description = "Compresses data using the deflate algorithm adding zlib headers.";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.args = [
             {
                 name: "Compression type",
@@ -36,15 +36,15 @@ class ZlibDeflate extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
-     * @returns {byteArray}
+     * @returns {ArrayBuffer}
      */
     run(input, args) {
-        const deflate = new Zlib.Deflate(input, {
+        const deflate = new Zlib.Deflate(new Uint8Array(input), {
             compressionType: ZLIB_COMPRESSION_TYPE_LOOKUP[args[0]]
         });
-        return Array.prototype.slice.call(deflate.compress());
+        return new Uint8Array(deflate.compress()).buffer;
     }
 
 }
diff --git a/src/core/operations/ZlibInflate.mjs b/src/core/operations/ZlibInflate.mjs
index bb7d95ba..e50ddd05 100644
--- a/src/core/operations/ZlibInflate.mjs
+++ b/src/core/operations/ZlibInflate.mjs
@@ -5,7 +5,6 @@
  */
 
 import Operation from "../Operation";
-import Utils from "../Utils";
 import {INFLATE_BUFFER_TYPE} from "../lib/Zlib";
 import zlibAndGzip from "zlibjs/bin/zlib_and_gzip.min";
 
@@ -30,8 +29,8 @@ class ZlibInflate extends Operation {
         this.name = "Zlib Inflate";
         this.module = "Compression";
         this.description = "Decompresses data which has been compressed using the deflate algorithm with zlib headers.";
-        this.inputType = "byteArray";
-        this.outputType = "byteArray";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
         this.args = [
             {
                 name: "Start index",
@@ -62,21 +61,19 @@ class ZlibInflate extends Operation {
     }
 
     /**
-     * @param {byteArray} input
+     * @param {ArrayBuffer} input
      * @param {Object[]} args
-     * @returns {byteArray}
+     * @returns {ArrayBuffer}
      */
     run(input, args) {
-        // Deal with character encoding issues
-        input = Utils.strToByteArray(Utils.byteArrayToUtf8(input));
-        const inflate = new Zlib.Inflate(input, {
+        const inflate = new Zlib.Inflate(new Uint8Array(input), {
             index: args[0],
             bufferSize: args[1],
             bufferType: ZLIB_BUFFER_TYPE_LOOKUP[args[2]],
             resize: args[3],
             verify: args[4]
         });
-        return Array.prototype.slice.call(inflate.decompress());
+        return new Uint8Array(inflate.decompress()).buffer;
     }
 
 }

From cc20ad956742464078ec7e03638dc6860ddbfd02 Mon Sep 17 00:00:00 2001
From: d98762625 <d98762625@gmail.com>
Date: Fri, 27 Apr 2018 09:59:10 +0100
Subject: [PATCH 3/3] Add OperationError error type and use for errors to be
 printed to the output panel

---
 .babelrc                                    |  5 +++
 package-lock.json                           | 47 ++++++++-------------
 package.json                                |  1 +
 src/core/Recipe.mjs                         | 27 +++++++-----
 src/core/errors/OperationError.mjs          | 20 +++++++++
 src/core/operations/CartesianProduct.mjs    | 11 +++--
 src/core/operations/SetDifference.mjs       | 10 ++---
 src/core/operations/SetIntersection.mjs     | 10 ++---
 src/core/operations/SetUnion.mjs            | 10 ++---
 src/core/operations/SymmetricDifference.mjs | 10 ++---
 10 files changed, 82 insertions(+), 69 deletions(-)
 create mode 100644 src/core/errors/OperationError.mjs

diff --git a/.babelrc b/.babelrc
index 094c0592..08b4065a 100644
--- a/.babelrc
+++ b/.babelrc
@@ -10,5 +10,10 @@
             "modules": false,
             "useBuiltIns": true
         }]
+    ],
+    "plugins": [
+        ["babel-plugin-transform-builtin-extend", {
+            "globals": ["Error"]
+        }]
     ]
 }
diff --git a/package-lock.json b/package-lock.json
index 8df6b2dd..1bcdb061 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -228,14 +228,12 @@
     "ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
     },
     "ansi-styles": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-      "dev": true
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
     },
     "anymatch": {
       "version": "2.0.0",
@@ -471,7 +469,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
       "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
-      "dev": true,
       "requires": {
         "chalk": "1.1.3",
         "esutils": "2.0.2",
@@ -681,7 +678,6 @@
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
       "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=",
-      "dev": true,
       "requires": {
         "babel-runtime": "6.26.0"
       }
@@ -724,6 +720,15 @@
         "babel-runtime": "6.26.0"
       }
     },
+    "babel-plugin-transform-builtin-extend": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-builtin-extend/-/babel-plugin-transform-builtin-extend-1.1.2.tgz",
+      "integrity": "sha1-Xpb+z1i4+h7XTvytiEdbKvPJEW4=",
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "babel-template": "6.26.0"
+      }
+    },
     "babel-plugin-transform-es2015-arrow-functions": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
@@ -1071,7 +1076,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz",
       "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=",
-      "dev": true,
       "requires": {
         "babel-runtime": "6.26.0",
         "babel-traverse": "6.26.0",
@@ -1084,7 +1088,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz",
       "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=",
-      "dev": true,
       "requires": {
         "babel-code-frame": "6.26.0",
         "babel-messages": "6.23.0",
@@ -1101,7 +1104,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
       "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
-      "dev": true,
       "requires": {
         "babel-runtime": "6.26.0",
         "esutils": "2.0.2",
@@ -1112,8 +1114,7 @@
     "babylon": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
-      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
-      "dev": true
+      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
     },
     "balanced-match": {
       "version": "1.0.0",
@@ -1674,7 +1675,6 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
       "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-      "dev": true,
       "requires": {
         "ansi-styles": "2.2.1",
         "escape-string-regexp": "1.0.5",
@@ -2505,7 +2505,6 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
       "requires": {
         "ms": "2.0.0"
       }
@@ -2934,8 +2933,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
       "version": "1.9.1",
@@ -5178,8 +5176,7 @@
     "globals": {
       "version": "9.18.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
-      "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==",
-      "dev": true
+      "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ=="
     },
     "globby": {
       "version": "5.0.0",
@@ -5598,7 +5595,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
       "requires": {
         "ansi-regex": "2.1.1"
       }
@@ -6329,7 +6325,6 @@
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.3.tgz",
       "integrity": "sha512-7Z5PPegwDTyjbaeCnV0efcyS6vdKAU51kpEmS7QFib3P4822l8ICYyMn7qvJnc+WzLoDsuI9gPMKbJ8pCu8XtA==",
-      "dev": true,
       "requires": {
         "loose-envify": "1.3.1"
       }
@@ -6747,8 +6742,7 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-      "dev": true
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
     },
     "js-yaml": {
       "version": "3.7.0",
@@ -7459,7 +7453,6 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
       "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
-      "dev": true,
       "requires": {
         "js-tokens": "3.0.2"
       }
@@ -7855,8 +7848,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -11251,7 +11243,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
       "requires": {
         "ansi-regex": "2.1.1"
       }
@@ -11322,8 +11313,7 @@
     "supports-color": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-      "dev": true
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
     },
     "svgo": {
       "version": "0.7.2",
@@ -11537,8 +11527,7 @@
     "to-fast-properties": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
-      "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=",
-      "dev": true
+      "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc="
     },
     "to-object-path": {
       "version": "0.3.0",
diff --git a/package.json b/package.json
index c44a3a1f..6943d205 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
   },
   "dependencies": {
     "babel-polyfill": "^6.26.0",
+    "babel-plugin-transform-builtin-extend": "1.1.2",
     "bcryptjs": "^2.4.3",
     "bignumber.js": "^6.0.0",
     "bootstrap": "^3.3.7",
diff --git a/src/core/Recipe.mjs b/src/core/Recipe.mjs
index 95dab22b..808a97b0 100755
--- a/src/core/Recipe.mjs
+++ b/src/core/Recipe.mjs
@@ -8,6 +8,7 @@
 import OpModules from "./config/modules/OpModules";
 import OperationConfig from "./config/OperationConfig.json";
 import log from "loglevel";
+import OperationError from "./errors/OperationError";
 
 /**
  * The Recipe controls a list of Operations and the Dish they operate on.
@@ -175,18 +176,24 @@ class Recipe  {
                     dish.set(output, op.outputType);
                 }
             } catch (err) {
-                const e = typeof err == "string" ? { message: err } : err;
-
-                e.progress = i;
-                if (e.fileName) {
-                    e.displayStr = op.name + " - " + e.name + " in " +
-                        e.fileName + " on line " + e.lineNumber +
-                        ".<br><br>Message: " + (e.displayStr || e.message);
+                // print expected errors in output pane
+                if (err instanceof OperationError) {
+                    dish.set(err.message, "string");
+                    return i;
                 } else {
-                    e.displayStr = op.name + " - " + (e.displayStr || e.message);
-                }
+                    const e = typeof err == "string" ? { message: err } : err;
 
-                throw e;
+                    e.progress = i;
+                    if (e.fileName) {
+                        e.displayStr = op.name + " - " + e.name + " in " +
+                            e.fileName + " on line " + e.lineNumber +
+                            ".<br><br>Message: " + (e.displayStr || e.message);
+                    } else {
+                        e.displayStr = op.name + " - " + (e.displayStr || e.message);
+                    }
+
+                    throw e;
+                }
             }
         }
 
diff --git a/src/core/errors/OperationError.mjs b/src/core/errors/OperationError.mjs
new file mode 100644
index 00000000..a87f3978
--- /dev/null
+++ b/src/core/errors/OperationError.mjs
@@ -0,0 +1,20 @@
+/**
+ * Create custom error type for handling operation input errors.
+ * i.e. where the operation can handle the error and print a
+ * message to the screen.
+ */
+class OperationError extends Error {
+    /**
+     * Standard error constructor. Adds no new behaviour.
+     * @param args standard error args
+     */
+    constructor(...args) {
+        super(...args);
+
+        if (Error.captureStackTrace) {
+            Error.captureStackTrace(this, OperationError);
+        }
+    }
+}
+
+export default OperationError;
diff --git a/src/core/operations/CartesianProduct.mjs b/src/core/operations/CartesianProduct.mjs
index 5cf546b0..5125511b 100644
--- a/src/core/operations/CartesianProduct.mjs
+++ b/src/core/operations/CartesianProduct.mjs
@@ -5,6 +5,7 @@
  */
 
 import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
 
 /**
  * Set cartesian product operation
@@ -44,7 +45,8 @@ class CartesianProduct extends Operation {
      */
     validateSampleNumbers(sets) {
         if (!sets || sets.length < 2) {
-            throw "Incorrect number of sets, perhaps you need to modify the sample delimiter or add more samples?";
+            throw new OperationError("Incorrect number of sets, perhaps you" +
+                " need to modify the sample delimiter or add more samples?");
         }
     }
 
@@ -54,16 +56,13 @@ class CartesianProduct extends Operation {
      * @param {string} input
      * @param {Object[]} args
      * @returns {string}
+     * @throws {OperationError}
      */
     run(input, args) {
         [this.sampleDelim, this.itemDelimiter] = args;
         const sets = input.split(this.sampleDelim);
 
-        try {
-            this.validateSampleNumbers(sets);
-        } catch (e) {
-            return e;
-        }
+        this.validateSampleNumbers(sets);
 
         return this.runCartesianProduct(...sets.map(s => s.split(this.itemDelimiter)));
     }
diff --git a/src/core/operations/SetDifference.mjs b/src/core/operations/SetDifference.mjs
index 4b0f3118..0962fda2 100644
--- a/src/core/operations/SetDifference.mjs
+++ b/src/core/operations/SetDifference.mjs
@@ -5,6 +5,7 @@
  */
 
 import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
 
 /**
  * Set Difference operation
@@ -44,7 +45,7 @@ class SetDifference extends Operation {
      */
     validateSampleNumbers(sets) {
         if (!sets || (sets.length !== 2)) {
-            throw "Incorrect number of sets, perhaps you need to modify the sample delimiter or add more samples?";
+            throw new OperationError("Incorrect number of sets, perhaps you need to modify the sample delimiter or add more samples?");
         }
     }
 
@@ -54,16 +55,13 @@ class SetDifference extends Operation {
      * @param {string} input
      * @param {Object[]} args
      * @returns {string}
+     * @throws {OperationError}
      */
     run(input, args) {
         [this.sampleDelim, this.itemDelimiter] = args;
         const sets = input.split(this.sampleDelim);
 
-        try {
-            this.validateSampleNumbers(sets);
-        } catch (e) {
-            return e;
-        }
+        this.validateSampleNumbers(sets);
 
         return this.runSetDifference(...sets.map(s => s.split(this.itemDelimiter)));
     }
diff --git a/src/core/operations/SetIntersection.mjs b/src/core/operations/SetIntersection.mjs
index e576be07..4ede1f98 100644
--- a/src/core/operations/SetIntersection.mjs
+++ b/src/core/operations/SetIntersection.mjs
@@ -5,6 +5,7 @@
  */
 
 import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
 
 /**
  * Set Intersection operation
@@ -44,7 +45,7 @@ class SetIntersection extends Operation {
      */
     validateSampleNumbers(sets) {
         if (!sets || (sets.length !== 2)) {
-            throw "Incorrect number of sets, perhaps you need to modify the sample delimiter or add more samples?";
+            throw new OperationError("Incorrect number of sets, perhaps you need to modify the sample delimiter or add more samples?");
         }
     }
 
@@ -54,16 +55,13 @@ class SetIntersection extends Operation {
      * @param {string} input
      * @param {Object[]} args
      * @returns {string}
+     * @throws {OperationError}
      */
     run(input, args) {
         [this.sampleDelim, this.itemDelimiter] = args;
         const sets = input.split(this.sampleDelim);
 
-        try {
-            this.validateSampleNumbers(sets);
-        } catch (e) {
-            return e;
-        }
+        this.validateSampleNumbers(sets);
 
         return this.runIntersect(...sets.map(s => s.split(this.itemDelimiter)));
     }
diff --git a/src/core/operations/SetUnion.mjs b/src/core/operations/SetUnion.mjs
index 56e12f4d..6975ffb5 100644
--- a/src/core/operations/SetUnion.mjs
+++ b/src/core/operations/SetUnion.mjs
@@ -5,6 +5,7 @@
  */
 
 import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
 
 /**
  * Set Union operation
@@ -44,7 +45,7 @@ class SetUnion extends Operation {
      */
     validateSampleNumbers(sets) {
         if (!sets || (sets.length !== 2)) {
-            throw "Incorrect number of sets, perhaps you need to modify the sample delimiter or add more samples?";
+            throw new OperationError("Incorrect number of sets, perhaps you need to modify the sample delimiter or add more samples?");
         }
     }
 
@@ -54,16 +55,13 @@ class SetUnion extends Operation {
      * @param {string} input
      * @param {Object[]} args
      * @returns {string}
+     * @throws {OperationError}
      */
     run(input, args) {
         [this.sampleDelim, this.itemDelimiter] = args;
         const sets = input.split(this.sampleDelim);
 
-        try {
-            this.validateSampleNumbers(sets);
-        } catch (e) {
-            return e;
-        }
+        this.validateSampleNumbers(sets);
 
         return this.runUnion(...sets.map(s => s.split(this.itemDelimiter)));
     }
diff --git a/src/core/operations/SymmetricDifference.mjs b/src/core/operations/SymmetricDifference.mjs
index bc2bb434..071a49d4 100644
--- a/src/core/operations/SymmetricDifference.mjs
+++ b/src/core/operations/SymmetricDifference.mjs
@@ -6,6 +6,7 @@
 
 import Utils from "../Utils";
 import Operation from "../Operation";
+import OperationError from "../errors/OperationError";
 
 /**
  * Set Symmetric Difference operation
@@ -45,7 +46,7 @@ class SymmetricDifference extends Operation {
      */
     validateSampleNumbers(sets) {
         if (!sets || (sets.length !== 2)) {
-            throw "Incorrect number of sets, perhaps you need to modify the sample delimiter or add more samples?";
+            throw new OperationError("Incorrect number of sets, perhaps you need to modify the sample delimiter or add more samples?");
         }
     }
 
@@ -55,16 +56,13 @@ class SymmetricDifference extends Operation {
      * @param {string} input
      * @param {Object[]} args
      * @returns {string}
+     * @throws {OperationError}
      */
     run(input, args) {
         [this.sampleDelim, this.itemDelimiter] = args;
         const sets = input.split(this.sampleDelim);
 
-        try {
-            this.validateSampleNumbers(sets);
-        } catch (e) {
-            return e;
-        }
+        this.validateSampleNumbers(sets);
 
         return this.runSymmetricDifference(...sets.map(s => s.split(this.itemDelimiter)));
     }