separated ace linters and error handling from main playground file;

restore tabState on page reload; indicate that result tab is outdated
mkslanc · Mar 31, 2023 · 89201bf · 89201bf
1 parent 8adaeaa
commit 89201bf
Show file tree

Hide file tree

Showing 7 changed files with 207 additions and 146 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "ace-code": "latest",
-    "ace-layout": "1.3.0",
+    "ace-layout": "1.3.1",
     "ace-linters": "^0.5.0",
     "typescript": "latest"
   },

diff --git a/src/error_handler.ts b/src/error_handler.ts
@@ -0,0 +1,63 @@
+import {Ace, EditorType, TabManager} from "ace-layout";
+
+function ctorName(obj) {
+    let ctor = obj.constructor?.name;
+    if (ctor)
+        return ctor;
+    let m = /\[object (\w+)\]/.exec(obj + "");
+    return m ? m[1] : null;
+}
+
+function serialize(val) {
+    let seen = new Set;
+    function inner(val) {
+        if (val instanceof Error)
+            return {error: val.toString(), stack: val.stack};
+        if (typeof val == "function")
+            return {function: val.name || "?"};
+        if (val == null || typeof val != "object")
+            return val;
+        if (seen.has(val))
+            return {cycle: true};
+        seen.add(val);
+        if (Array.isArray(val))
+            return {array: val.map(inner)};
+        let result = {object: Object.create(null), ctor: ctorName(val)};
+        for (let prop of Object.keys(val)) {
+            try {
+                result.object[prop] = inner(val[prop]);
+            } catch {
+
+            }
+        }
+        return result;
+    }
+    return inner(val);
+}
+
+export function windowError (e: MessageEvent) {
+    let errorData = e.data;
+    if (errorData?.type?.startsWith("webpack"))
+        return;
+    let errorMessage = "";
+    if (errorData.log) {
+        let log = errorData.log;
+        errorMessage = errorData.elements.filter((el) => el != null).map((el) => {
+            let element = serialize(el);
+            return log + ": " + (log == "error" || log == "warning" ? element.error : element);
+        }).join("\n");
+    }
+
+    displayError(errorMessage);
+}
+
+export function displayError(errorMessage: string) {
+    let tabManager = TabManager.getInstance();
+    let terminal = tabManager.open<Ace.EditSession>({
+        title: "Log",
+        path: 'terminal',
+        editorType: EditorType.ace
+    }, "console");
+    terminal.session.setValue(errorMessage);
+    tabManager.loadFile(terminal);
+}
diff --git a/src/linters/linters.ts b/src/linters/linters.ts
@@ -0,0 +1,77 @@
+import {LanguageProvider} from "ace-linters";
+import {request} from "../utils";
+import {AceEditor, Box} from "ace-layout";
+import {LayoutEditor} from "ace-layout/src/widgets/widget";
+let event = require("ace-code/src/lib/event");
+let {HashHandler} = require("ace-code/src/keyboard/hash_handler");
+let keyUtil = require("ace-code/src/lib/keys");
+let languageProvider: LanguageProvider;
+
+function requestDeclarations() {
+    request('ace.d.ts').then(function (response: XMLHttpRequest) {
+        languageProvider.setGlobalOptions("typescript", {
+            extraLibs: {
+                "ace.d.ts": {
+                    content: correctDeclaration(response.responseText),
+                    version: 1
+                },
+            },
+            compilerOptions: {
+                allowJs: true,
+                checkJs: true
+            }
+        }, true);
+    });
+}
+
+
+function correctDeclaration(declaration) {
+    return declaration.replace(/export\s+namespace\s+Ace/, "declare namespace Ace")
+            .replace(/export\s+const\s+version/, "declare namespace ace {\nexport const version") + "}" +
+        `\ndeclare class LanguageProvider {
+    private $activeEditor;
+    private $descriptionTooltip;
+    private readonly $markdownConverter;
+    private readonly $messageController;
+    private $sessionLanguageProviders;
+    private $editors;
+    static fromCdn(cdnUrl: string): LanguageProvider;
+    registerEditor(editor: Ace.Editor)
+    setOptions(session: Ace.EditSession, options);
+    setGlobalOptions(serviceName, options, merge?:boolean)
+}
+`;
+}
+
+function registerCommands() {
+    let menuKb = new HashHandler([
+        {
+            bindKey: "Ctrl-Shift-B",
+            name: "format",
+            exec: function () {
+                languageProvider.format();
+            }
+        }
+    ]);
+
+    event.addCommandKeyListener(window, function (e, hashId, keyCode) {
+        let keyString = keyUtil.keyCodeToString(keyCode);
+        let command = menuKb.findKeyCommand(hashId, keyString);
+        if (command) {
+            command.exec();
+            e.preventDefault();
+        }
+    });
+}
+
+export function registerLanguageProvider(box: Box) {
+    let worker = new Worker(new URL('./webworker.ts', import.meta.url));
+    languageProvider = LanguageProvider.create(worker);
+    requestDeclarations();
+    registerCommands();
+
+    box.on("editorAdded", (editor: LayoutEditor) => {
+        if (editor instanceof AceEditor)
+            languageProvider.registerEditor(editor.editor);
+    });
+}
diff --git a/src/webworker.ts → src/linters/webworker.ts b/src/webworker.ts → src/linters/webworker.ts