diff --git a/src/code_runner.js b/src/code_runner.js index cc6e5b3..ffa38d0 100644 --- a/src/code_runner.js +++ b/src/code_runner.js @@ -48,7 +48,7 @@ export class CodeRunner { } evaluateCode(code) { - // Move evalScope to globalThis + // Move evalScope to global scope const oldGlobalThis = {}; for (const prop in this.evalScope) { if (!Object.hasOwn(this.evalScope, prop)) continue; diff --git a/src/index.js b/src/index.js index 5f3cc7d..f12cbb8 100644 --- a/src/index.js +++ b/src/index.js @@ -38,14 +38,14 @@ const playgroundConsole = new PlaygroundConsole( ); addEventListener("DOMContentLoaded", () => { - playgroundConsole.log("Karlkode 1.0"); + playgroundConsole.getInterface().log("Karlkode 1.0"); }); const codeStopper = new CodeStopper(); const assetProvider = new AssetProvider(); -const codeRunner = new CodeRunner(playgroundConsole, codeStopper); +const codeRunner = new CodeRunner(playgroundConsole.getInterface(), codeStopper); const assetEditor = new AssetEditor(document.querySelector("#asset-editor-container"), []); new ConsoleInput(document.querySelector("#console-input"), playgroundConsole, codeRunner); @@ -53,7 +53,7 @@ new ConsoleInput(document.querySelector("#console-input"), playgroundConsole, co const htmlExporter = new HtmlExporter(assetProvider); const gamelib = new Gamelib( - playgroundConsole, + playgroundConsole.getInterface(), codeStopper, assetProvider, document.querySelector("canvas"), @@ -89,7 +89,9 @@ loadButton.onclick = async () => { `unreachable: something went wrong ! files.length > 1 : files.length = ${files.length}`, ); } - const items = KarlkoderCodec.de(await fetch(URL.createObjectURL(files[0])).then((x) => x.bytes())); + const items = KarlkoderCodec.de( + await fetch(URL.createObjectURL(files[0])).then((x) => x.bytes()), + ); const assets = items .filter((x) => x.tag === "asset") .map((x) => { diff --git a/src/playground_console.js b/src/playground_console.js index 802e761..1f95aa6 100644 --- a/src/playground_console.js +++ b/src/playground_console.js @@ -9,7 +9,7 @@ export class PlaygroundConsole { }; } - #formatStacktrace(stack) { + formatStacktrace(stack) { return stack .replaceAll(globalThis.origin + "/", "") .replace( @@ -18,7 +18,7 @@ export class PlaygroundConsole { ); } - #getTypeName(arg) { + getTypeName(arg) { if (arg instanceof Error) { return "error"; } @@ -30,7 +30,7 @@ export class PlaygroundConsole { return typeof arg; } - #addKeyValue(_entryType, parent, property, arg) { + addKeyValue(_entryType, parent, property, arg) { if (property) { const keyEl = document.createElement("span"); keyEl.className = property === "__proto__" ? "prototype" : "property"; @@ -42,11 +42,11 @@ export class PlaygroundConsole { const value = document.createElement("span"); value.textContent = argString; - value.dataset.type = this.#getTypeName(arg); + value.dataset.type = this.getTypeName(arg); parent.appendChild(value); } - #addEntry(entryType, property, parent, ...args) { + addEntry(entryType, property, parent, ...args) { for (const arg of args) { // For objects, show a collapsed list of properties if (typeof arg === "object" && arg !== null) { @@ -55,7 +55,7 @@ export class PlaygroundConsole { summary.dataset.type = "object"; summary.style.marginLeft = "-1rem"; - this.#addKeyValue(entryType, summary, property, arg); + this.addKeyValue(entryType, summary, property, arg); const details = document.createElement("details"); details.className = entryType; @@ -66,14 +66,12 @@ export class PlaygroundConsole { if (arg instanceof Error) { // Add error stack trace const el = document.createElement("p"); - el.innerHTML = this.#formatStacktrace(arg.stack); + el.innerHTML = this.formatStacktrace(arg.stack); details.appendChild(el); } else { // Add object properties - for (const prop in arg) { - if (!Object.hasOwn(arg, prop)) continue; - - this.#addEntry( + for (const prop of Object.getOwnPropertyNames(arg)) { + this.addEntry( entryType, prop, details, @@ -82,10 +80,9 @@ export class PlaygroundConsole { } // Add prototype if one exists - if ( - Object.getPrototypeOf(arg) && Object.keys(Object.getPrototypeOf(arg)).length - ) { - this.#addEntry(entryType, "__proto__", details, Object.getPrototypeOf(arg)); + const prototype = Object.getPrototypeOf(arg); + if (prototype && Object.getOwnPropertyNames(prototype).length > 0) { + this.addEntry(entryType, "__proto__", details, prototype); } } @@ -97,46 +94,62 @@ export class PlaygroundConsole { // For non-object values, show it directly const wrapper = document.createElement("p"); wrapper.className = entryType; - this.#addKeyValue(entryType, wrapper, property, arg); + this.addKeyValue(entryType, wrapper, property, arg); parent.appendChild(wrapper); } } - #addTopLevelEntry(entryType, ...args) { - this.#addEntry(entryType, "", this.elem, ...args); + addTopLevelEntry(entryType, ...args) { + this.addEntry(entryType, "", this.elem, ...args); this.elem.scrollTop = this.elem.scrollHeight; } addInput() { - this.#addTopLevelEntry("input", ...arguments); + this.addTopLevelEntry("input", ...arguments); } - log() { - this.#addTopLevelEntry("log", ...arguments); - } - - dir() { - this.#addTopLevelEntry("dir", ...arguments); - } - - debug() { - this.#addTopLevelEntry("debug", ...arguments); - } - - info() { - this.#addTopLevelEntry("info", ...arguments); - } - - warn() { - this.#addTopLevelEntry("warn", ...arguments); - } - - error() { - this.#addTopLevelEntry("error", ...arguments); + getInterface() { + return new PlaygroundConsoleInterface(this); } clear() { this.elem.textContent = ""; } } + +class PlaygroundConsoleInterface { + #console; + + constructor(console) { + this.#console = console; + } + + log() { + this.#console.addTopLevelEntry("log", ...arguments); + } + + dir() { + this.#console.addTopLevelEntry("dir", ...arguments); + } + + debug() { + this.#console.addTopLevelEntry("debug", ...arguments); + } + + info() { + this.#console.addTopLevelEntry("info", ...arguments); + } + + warn() { + this.#console.addTopLevelEntry("warn", ...arguments); + } + + error() { + this.#console.addTopLevelEntry("error", ...arguments); + } + + clear() { + this.#console.clear(); + } +}