Improved asm editor performance with a web worker.

.eslintrc.json

@@ -22,6 +22,7 @@
         "@typescript-eslint/explicit-member-accessibility": "off",
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-inferrable-types": "warn",
+        "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/no-object-literal-type-assertion": [
             "warn",
             { "allowAsParameter": true }
@@ -34,8 +35,7 @@
         "no-empty": "warn",
         "no-useless-escape": "warn",
         "prettier/prettier": "warn",
-        "react/no-unescaped-entities": "off",
-        "@typescript-eslint/no-non-null-assertion": "off"
+        "react/no-unescaped-entities": "off"
     },
     "settings": {
         "react": {

craco.config.js

@@ -12,5 +12,17 @@ module.exports = {
     ],
     eslint: {
         mode: "file"
+    },
+    webpack: {
+        configure: config => {
+            config.module.rules.push({
+                test: /\.worker\.js$/,
+                use: { loader: 'worker-loader' }
+            });
+            // Work-around until create-react-app uses webpack-dev-server 4.
+            // See https://github.com/webpack/webpack/issues/6642
+            config.output.globalObject = "this";
+            return config;
+        }
     }
 };

package.json

@@ -64,6 +64,7 @@
     "eslint-config-react": "^1.1.7",
     "eslint-plugin-prettier": "^3.1.0",
     "prettier": "1.18.2",
-    "ts-node": "^8.3.0"
+    "ts-node": "^8.3.0",
+    "worker-loader": "^2.0.0"
   }
 }

src/domain/index.ts

@@ -92,10 +92,10 @@ export class Quest {
     /**
      * (Partial) raw DAT data that can't be parsed yet by Phantasmal.
      */
-    dat_unknowns: DatUnknown[];
-    labels: Map<number, number>;
-    instructions: Instruction[];
-    bin_unknown: ArrayBuffer;
+    readonly dat_unknowns: DatUnknown[];
+    readonly labels: Map<number, number>;
+    readonly instructions: Instruction[];
+    readonly bin_unknown: ArrayBuffer;
 
     constructor(
         id: number,

src/scripting/Assembler.ts

@@ -0,0 +1,53 @@
+import { observable } from "mobx";
+import { editor } from "monaco-editor";
+import AssemblyWorker from "worker-loader!./assembly_worker_init";
+import { Instruction } from "../data_formats/parsing/quest/bin";
+import { AssemblyChangeInput, NewAssemblyInput, ScriptWorkerOutput } from "./assembler_messages";
+import { AssemblyError } from "./assembly";
+import { disassemble } from "./disassembly";
+
+export class Assembler {
+    @observable errors: AssemblyError[] = [];
+
+    private worker = new AssemblyWorker();
+    private instructions: Instruction[] = [];
+    private labels: Map<number, number> = new Map();
+
+    constructor() {
+        this.worker.onmessage = this.process_worker_message;
+    }
+
+    disassemble(instructions: Instruction[], labels: Map<number, number>): string[] {
+        this.instructions = instructions;
+        this.labels = labels;
+        const assembly = disassemble(instructions, labels);
+        const message: NewAssemblyInput = { type: "new_assembly_input", assembly };
+        this.worker.postMessage(message);
+        return assembly;
+    }
+
+    update_assembly(changes: editor.IModelContentChange[]): void {
+        const message: AssemblyChangeInput = { type: "assembly_change_input", changes };
+        this.worker.postMessage(message);
+    }
+
+    dispose(): void {
+        this.worker.terminate();
+    }
+
+    private process_worker_message = (e: MessageEvent): void => {
+        const message: ScriptWorkerOutput = e.data;
+
+        if (message.type === "new_errors_output") {
+            this.instructions.splice(0, this.instructions.length, ...message.instructions);
+
+            this.labels.clear();
+
+            for (const [l, i] of message.labels) {
+                this.labels.set(l, i);
+            }
+
+            this.errors = message.errors;
+        }
+    };
+}

src/scripting/assembler_messages.ts

@@ -0,0 +1,24 @@
+import { editor } from "monaco-editor";
+import { AssemblyError } from "./assembly";
+import { Instruction } from "../data_formats/parsing/quest/bin";
+
+export type ScriptWorkerInput = NewAssemblyInput | AssemblyChangeInput;
+
+export type NewAssemblyInput = {
+    readonly type: "new_assembly_input";
+    readonly assembly: string[];
+};
+
+export type AssemblyChangeInput = {
+    readonly type: "assembly_change_input";
+    readonly changes: editor.IModelContentChange[];
+};
+
+export type ScriptWorkerOutput = NewErrorsOutput;
+
+export type NewErrorsOutput = {
+    readonly type: "new_errors_output";
+    readonly instructions: Instruction[];
+    readonly labels: Map<number,number>;
+    readonly errors: AssemblyError[];
+};

src/scripting/assembly_worker_init.ts

@@ -1,23 +1,75 @@
-import { editor } from "monaco-editor";
-import { assemble, AssemblyError } from "./assembly";
+import { NewErrorsOutput, ScriptWorkerInput } from "./assembler_messages";
+import { assemble } from "./assembly";
 
-interface ScriptWorkerInput {}
-
-class NewModelInput implements ScriptWorkerInput {
-    constructor(readonly value: string) {}
-}
-
-class ModelChangeInput implements ScriptWorkerInput {
-    constructor(readonly changes: editor.IModelContentChange[]) {}
-}
-
-interface ScriptWorkerOutput {}
-
-class NewErrorsOutput implements ScriptWorkerOutput {
-    constructor(readonly errors: AssemblyError[]) {}
-}
+const ctx: Worker = self as any;
 
 let lines: string[] = [];
+const messages: ScriptWorkerInput[] = [];
+let timeout: any;
+
+ctx.onmessage = (e: MessageEvent) => {
+    messages.push(e.data);
+
+    if (!timeout) {
+        process_messages();
+
+        timeout = setTimeout(() => {
+            timeout = undefined;
+            process_messages();
+        }, 100);
+    }
+};
+
+function process_messages(): void {
+    if (messages.length === 0) return;
+
+    for (const message of messages.splice(0, messages.length)) {
+        if (message.type === "new_assembly_input") {
+            lines = message.assembly;
+        } else if (message.type === "assembly_change_input") {
+            for (const change of message.changes) {
+                const { startLineNumber, endLineNumber, startColumn, endColumn } = change.range;
+                const lines_changed = endLineNumber - startLineNumber + 1;
+                const new_lines = change.text.split("\n");
+
+                if (lines_changed === 1) {
+                    replace_line_part(startLineNumber, startColumn, endColumn, new_lines);
+                } else if (new_lines.length === 1) {
+                    replace_lines_and_merge_line_parts(
+                        startLineNumber,
+                        endLineNumber,
+                        startColumn,
+                        endColumn,
+                        new_lines[0]
+                    );
+                } else {
+                    // Keep the left part of the first changed line.
+                    replace_line_part_right(startLineNumber, startColumn, new_lines[0]);
+
+                    // Replace all the lines in between.
+                    replace_lines(
+                        startLineNumber + 1,
+                        endLineNumber - 1,
+                        new_lines.slice(1, new_lines.length - 1)
+                    );
+
+                    // Keep the right part of the last changed line.
+                    replace_line_part_left(
+                        endLineNumber,
+                        endColumn,
+                        new_lines[new_lines.length - 1]
+                    );
+                }
+            }
+        }
+    }
+
+    const response: NewErrorsOutput = {
+        type: "new_errors_output",
+        ...assemble(lines),
+    };
+    ctx.postMessage(response);
+}
 
 function replace_line_part(
     line_no: number,
@@ -28,7 +80,7 @@ function replace_line_part(
     const line = lines[line_no - 1];
     // We keep the parts of the line that weren't affected by the edit.
     const line_start = line.slice(0, start_col - 1);
-    const line_end = line.slice(end_col);
+    const line_end = line.slice(end_col - 1);
 
     if (new_line_parts.length === 1) {
         lines.splice(line_no - 1, 1, line_start + new_line_parts[0] + line_end);
@@ -44,7 +96,7 @@ function replace_line_part(
 }
 
 function replace_line_part_left(line_no: number, end_col: number, new_line_part: string): void {
-    lines.splice(line_no - 1, 1, new_line_part + lines[line_no - 1].slice(end_col));
+    lines.splice(line_no - 1, 1, new_line_part + lines[line_no - 1].slice(end_col - 1));
 }
 
 function replace_line_part_right(line_no: number, start_col: number, new_line_part: string): void {
@@ -66,7 +118,7 @@ function replace_lines_and_merge_line_parts(
     const end_line = lines[end_line_no - 1];
     // We keep the parts of the lines that weren't affected by the edit.
     const start_line_start = start_line.slice(0, start_col - 1);
-    const end_line_end = end_line.slice(end_col);
+    const end_line_end = end_line.slice(end_col - 1);
 
     lines.splice(
         start_line_no - 1,
@@ -74,47 +126,3 @@ function replace_lines_and_merge_line_parts(
         start_line_start + new_line_part + end_line_end
     );
 }
-
-window.onmessage = (e: MessageEvent) => {
-    const message: ScriptWorkerInput = e.data;
-
-    if (message instanceof NewModelInput) {
-        lines = message.value.split("\n");
-        window.postMessage(assemble(lines).errors, window.origin);
-    } else if (message instanceof ModelChangeInput) {
-        for (const change of message.changes) {
-            const { startLineNumber, endLineNumber, startColumn, endColumn } = change.range;
-            const lines_changed = endLineNumber - startLineNumber + 1;
-            const new_lines = change.text.split("\n");
-
-            if (lines_changed === 1) {
-                replace_line_part(startLineNumber, startColumn, endColumn, new_lines);
-            } else if (new_lines.length === 1) {
-                replace_lines_and_merge_line_parts(
-                    startLineNumber,
-                    endLineNumber,
-                    startColumn,
-                    endColumn,
-                    new_lines[0]
-                );
-            } else {
-                // Keep the left part of the first changed line.
-                replace_line_part_right(startLineNumber, startColumn, new_lines[0]);
-
-                // Replace all the lines in between.
-                replace_lines(
-                    startLineNumber + 1,
-                    endLineNumber - 1,
-                    new_lines.slice(1, new_lines.length - 2)
-                );
-
-                // Keep the right part of the last changed line.
-                replace_line_part_left(startLineNumber, endColumn, new_lines[new_lines.length - 1]);
-            }
-        }
-
-        window.postMessage(assemble(lines).errors, window.origin);
-    } else {
-        throw new Error("Couldn't process message.");
-    }
-};

src/scripting/disassembly.ts

@@ -7,7 +7,7 @@ export function disassemble(
     instructions: Instruction[],
     labels: Map<number, number>,
     manual_stack: boolean = false
-): string {
+): string[] {
     const lines: string[] = [];
     const index_to_label = new Map([...labels.entries()].map(([l, i]) => [i, l]));
 
@@ -47,7 +47,7 @@ export function disassemble(
         lines.push("");
     }
 
-    return lines.join("\n");
+    return lines;
 }
 
 function args_to_strings(params: Param[], args: Arg[]): string[] {

src/ui/quest_editor/ScriptEditorComponent.tsx

@@ -3,8 +3,7 @@ import { editor, languages, MarkerSeverity } from "monaco-editor";
 import React, { Component, createRef, ReactNode } from "react";
 import { AutoSizer } from "react-virtualized";
 import { OPCODES } from "../../data_formats/parsing/quest/bin";
-import { assemble } from "../../scripting/assembly";
-import { disassemble } from "../../scripting/disassembly";
+import { Assembler } from "../../scripting/Assembler";
 import { quest_editor_store } from "../../stores/QuestEditorStore";
 import "./ScriptEditorComponent.less";
 
@@ -72,7 +71,7 @@ languages.registerCompletionItemProvider("psoasm", {
             startLineNumber: position.lineNumber,
             endLineNumber: position.lineNumber,
             startColumn: 1,
-            endColumn: position.column + 1,
+            endColumn: position.column,
         });
         const suggestions = /^\s*([a-z][a-z0-9_=<>!]*)?$/.test(value)
             ? INSTRUCTION_SUGGESTIONS
@@ -133,6 +132,7 @@ type MonacoProps = {
 class MonacoComponent extends Component<MonacoProps> {
     private div_ref = createRef<HTMLDivElement>();
     private editor?: editor.IStandaloneCodeEditor;
+    private assembler?: Assembler;
     private disposers: (() => void)[] = [];
 
     render(): ReactNode {
@@ -149,29 +149,12 @@ class MonacoComponent extends Component<MonacoProps> {
                 wordBasedSuggestions: false,
             });
 
+            this.assembler = new Assembler();
+
             this.disposers.push(
-                () => {
-                    if (this.editor) {
-                        this.editor.dispose();
-                        const model = this.editor.getModel();
-                        if (model) model.dispose();
-                        this.editor = undefined;
-                    }
-                },
-                autorun(() => {
-                    const quest = quest_editor_store.current_quest;
-                    const model =
-                        quest &&
-                        editor.createModel(disassemble(quest.instructions, quest.labels), "psoasm");
-
-                    if (model && this.editor) {
-                        const disposable = model.onDidChangeContent(this.validate);
-                        this.disposers.push(() => disposable.dispose());
-
-                        this.editor.setModel(model);
-                        this.validate();
-                    }
-                })
+                this.dispose,
+                autorun(this.update_model),
+                autorun(this.update_model_markers)
             );
         }
     }
@@ -195,29 +178,36 @@ class MonacoComponent extends Component<MonacoProps> {
         }
     }
 
-    private validate = (e?: editor.IModelContentChangedEvent) => {
-        if (!this.editor) return;
+    private update_model = () => {
+        const quest = quest_editor_store.current_quest;
+
+        if (quest && this.editor && this.assembler) {
+            const assembly = this.assembler.disassemble(quest.instructions, quest.labels);
+            const model = editor.createModel(assembly.join("\n"), "psoasm");
+
+            const disposable = model.onDidChangeContent(e => {
+                if (!this.assembler) return;
+                this.assembler.update_assembly(e.changes);
+            });
+
+            this.disposers.push(() => disposable.dispose());
+            this.editor.setModel(model);
+        }
+    };
+
+    private update_model_markers = () => {
+        if (!this.editor || !this.assembler) return;
+
+        // Reference errors here to make sure we get mobx updates.
+        this.assembler.errors.length;
 
         const model = this.editor.getModel();
         if (!model) return;
 
-        if (e) {
-            e.changes.forEach(change => {
-                console.log(change);
-            });
-        }
-
-        const { instructions, labels, errors } = assemble(model.getLinesContent());
-
-        if (quest_editor_store.current_quest) {
-            quest_editor_store.current_quest.instructions = instructions;
-            quest_editor_store.current_quest.labels = labels;
-        }
-
         editor.setModelMarkers(
             model,
             "psoasm",
-            errors.map(error => ({
+            this.assembler.errors.map(error => ({
                 severity: MarkerSeverity.Error,
                 message: error.message,
                 startLineNumber: error.line_no,
@@ -227,4 +217,17 @@ class MonacoComponent extends Component<MonacoProps> {
             }))
         );
     };
+
+    private dispose = () => {
+        if (this.editor) {
+            this.editor.dispose();
+            const model = this.editor.getModel();
+            if (model) model.dispose();
+            this.editor = undefined;
+        }
+
+        if (this.assembler) {
+            this.assembler.dispose();
+        }
+    };
 }

src/webworkers.d.ts

@@ -0,0 +1,7 @@
+declare module "worker-loader!*" {
+    class WebpackWorker extends Worker {
+        constructor();
+    }
+
+    export default WebpackWorker;
+}

yarn.lock

@@ -6439,7 +6439,7 @@ loader-runner@^2.3.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
-loader-utils@1.2.3, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
+loader-utils@1.2.3, loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
   integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
@@ -9677,6 +9677,14 @@ scheduler@^0.13.6:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+schema-utils@^0.4.0:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
+  integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -11292,6 +11300,14 @@ worker-farm@^1.5.2, worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
+worker-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac"
+  integrity sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==
+  dependencies:
+    loader-utils "^1.0.0"
+    schema-utils "^0.4.0"
+
 worker-rpc@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/worker-rpc/-/worker-rpc-0.1.1.tgz#cb565bd6d7071a8f16660686051e969ad32f54d5"