wasm-idle 0.1.0 → 0.2.1

package/README.md

@@ -6,4 +6,4 @@ Executes C++, Python Code with working stdio.
 
 Refer to src/lib/clang.
 
-Powered by [wasm-clang](https://github.com/binji/wasm-clang) and Pyodide.
+Powered by [wasm-clang](https://github.com/binji/wasm-clang) and Pyodide.

package/dist/clang/app.d.ts

@@ -1,4 +1,4 @@
-import { Memory, type MemFS } from "./memory";
+import { Memory, type MemFS } from './memory';
 export default class App {
     ready: Promise<void>;
     mem: Memory;

package/dist/clang/app.js

@@ -1,9 +1,9 @@
-import { bindNew } from "./apply";
-import { Memory } from "./memory";
-import { getInstance } from "./wasm";
-import { NotImplemented, ProcExit } from "./error";
+import { bindNew } from './apply';
+import { Memory } from './memory';
+import { getInstance } from './wasm';
+import { NotImplemented, ProcExit } from './error';
 const ESUCCESS = 0;
-const RAF_PROC_EXIT_CODE = 0xC0C0A;
+const RAF_PROC_EXIT_CODE = 0xc0c0a;
 export default class App {
     ready;
     mem = null;
@@ -20,9 +20,10 @@ export default class App {
         this.memfs = memfs;
         const env = bindNew(this);
         const wasi_unstable = {
-            ...bindNew(this, 'proc_exit', 'environ_sizes_get', 'environ_get', 'args_sizes_get', 'args_get', 'random_get', 'clock_time_get', 'poll_oneoff'), ...this.memfs.exports
+            ...bindNew(this, 'proc_exit', 'environ_sizes_get', 'environ_get', 'args_sizes_get', 'args_get', 'random_get', 'clock_time_get', 'poll_oneoff'),
+            ...this.memfs.exports
         };
-        this.ready = getInstance(module, { wasi_unstable, env }).then(instance => {
+        this.ready = getInstance(module, { wasi_unstable, env }).then((instance) => {
             this.instance = instance;
             this.exports = this.instance.exports;
             this.mem = new Memory(this.exports.memory);
@@ -79,8 +80,7 @@ export default class App {
         for (const name of names) {
             this.mem.write32(environ_ptrs, environ_buf);
             environ_ptrs += 4;
-            environ_buf +=
-                this.mem.writeStr(environ_buf, `${name}=${this.environ[name]}`);
+            environ_buf += this.mem.writeStr(environ_buf, `${name}=${this.environ[name]}`);
         }
         this.mem.write32(environ_ptrs, 0);
         return ESUCCESS;

package/dist/clang/encode.d.ts

@@ -1,4 +1,4 @@
 export declare function readStr(u8: Uint8Array, o: number, len?: number): string;
 export declare function readStrR(u8: Uint8Array, o: number, len?: number): string;
 export declare function readOct(u8: Uint8Array, o: number, len: number): number;
-export declare function readUint8(u8: Uint8Array, o: number, len: number): Uint8Array;
+export declare function readUint8(u8: Uint8Array, o: number, len: number): Uint8Array<ArrayBufferLike>;

package/dist/clang/index.d.ts

@@ -1,6 +1,6 @@
-import App from "./app";
-import { MemFS } from "./memory";
-import { type Writable } from "svelte/store";
+import App from './app';
+import { MemFS } from './memory';
+import { type Writable } from 'svelte/store';
 interface APIOption {
     stdin: () => string;
     stdout: (str: string) => void;

package/dist/clang/index.js

@@ -1,18 +1,24 @@
-import App from "./app";
-import { MemFS, untar } from "./memory";
-import { green, yellow, normal } from "./color";
-import { compile, readBuffer } from "./wasm";
-import { clangUrl, lldUrl, rootUrl } from "./url";
-import { derived, writable } from "svelte/store";
+import App from './app';
+import { MemFS, untar } from './memory';
+import { green, yellow, normal } from './color';
+import { compile, readBuffer } from './wasm';
+import { clangUrl, lldUrl, rootUrl } from './url';
+import { derived, writable } from 'svelte/store';
 const clangCommonArgs = [
     '-disable-free',
-    '-isysroot', '/',
-    '-internal-isystem', '/include/c++/v1',
-    '-internal-isystem', '/include',
-    '-internal-isystem', '/lib/clang/8.0.1/include',
-    '-ferror-limit', '19',
-    '-fmessage-length', '80',
-    '-fcolor-diagnostics',
+    '-isysroot',
+    '/',
+    '-internal-isystem',
+    '/include/c++/v1',
+    '-internal-isystem',
+    '/include',
+    '-internal-isystem',
+    '/lib/clang/8.0.1/include',
+    '-ferror-limit',
+    '19',
+    '-fmessage-length',
+    '80',
+    '-fcolor-diagnostics'
 ];
 const toUtf8 = (text) => {
     const surrogate = encodeURIComponent(text);
@@ -21,7 +27,7 @@ const toUtf8 = (text) => {
         const character = surrogate[i];
         i += 1;
         if (character == '%') {
-            const hex = surrogate.substring(i, i += 2);
+            const hex = surrogate.substring(i, (i += 2));
             if (hex)
                 result += String.fromCharCode(parseInt(hex, 16));
         }
@@ -44,7 +50,7 @@ export default class Clang {
     progress = {
         clang: writable(0),
         lld: writable(0),
-        memfs: writable(0),
+        memfs: writable(0)
     };
     constructor(options) {
         this.moduleCache = {};
@@ -56,17 +62,17 @@ export default class Clang {
             stdout: this.stdout,
             stdin: options.stdin,
             path: this.path,
-            progress: this.progress.memfs,
+            progress: this.progress.memfs
         });
         const progress = derived([this.progress.clang, this.progress.lld, this.progress.memfs], ([clang, lld, memfs]) => {
             return (clang + lld + memfs) / 3;
         });
-        progress.subscribe(value => {
+        progress.subscribe((value) => {
             options.progress(value);
         });
         this.getModule(clangUrl(this.path), this.progress.clang);
         this.getModule(lldUrl(this.path), this.progress.lld);
-        this.ready = this.memfs.ready.then(() => this.hostLogAsync(`Untarring ${rootUrl(this.path)}`, readBuffer(rootUrl(this.path)).then(buffer => untar(buffer, this.memfs))));
+        this.ready = this.memfs.ready.then(() => this.hostLogAsync(`Untarring ${rootUrl(this.path)}`, readBuffer(rootUrl(this.path)).then((buffer) => untar(buffer, this.memfs))));
     }
     hostLog(message) {
         if (!this.log)
@@ -134,7 +140,7 @@ export default class Clang {
         await this.compile({ input, code, obj });
         await this.link(obj, wasm);
         this.lastCode = code;
-        return this.wasm = await this.hostLogAsync(`Compiling ${wasm}`, WebAssembly.compile(this.memfs.getFileContents(wasm)));
+        return (this.wasm = await this.hostLogAsync(`Compiling ${wasm}`, WebAssembly.compile(this.memfs.getFileContents(wasm))));
     }
     async compileLinkRun(code) {
         return await this.run(await this.compileLink(code), true, `test.wasm`);

package/dist/clang/memory/index.d.ts

@@ -1,4 +1,4 @@
-import MemFS from "./memFs";
-import Memory from "./memory";
-import untar from "./tar";
+import MemFS from './memFs';
+import Memory from './memory';
+import untar from './tar';
 export { MemFS, Memory, untar };

package/dist/clang/memory/index.js

@@ -1,4 +1,4 @@
-import MemFS from "./memFs";
-import Memory from "./memory";
-import untar from "./tar";
+import MemFS from './memFs';
+import Memory from './memory';
+import untar from './tar';
 export { MemFS, Memory, untar };

package/dist/clang/memory/memFs.d.ts

@@ -1,5 +1,5 @@
 import { Memory } from './';
-import type { Writable } from "svelte/store";
+import type { Writable } from 'svelte/store';
 interface MemFsOptions {
     stdin: () => string;
     stdout: (str: string) => void;
@@ -22,7 +22,7 @@ export default class MemFS {
     setStdinStr(str: string): void;
     addDirectory(path: string): void;
     addFile(path: string, contents: string | ArrayBuffer | Uint8Array): void;
-    getFileContents(path: string): Uint8Array;
+    getFileContents(path: string): Uint8Array<ArrayBuffer>;
     abort(): void;
     host_write(fd: number, iovs: number, iovs_len: number, nwritten_out: number): number;
     host_read(fd: number, iovs: number, iovs_len: number, nread: number): number;

package/dist/clang/memory/memFs.js

@@ -1,8 +1,8 @@
 import { Memory } from './';
-import { bindNew } from "../apply";
-import { AbortError, assert } from "../error";
-import { compile } from "../wasm";
-import { memfsUrl } from "../url";
+import { bindNew } from '../apply';
+import { AbortError, assert } from '../error';
+import { compile } from '../wasm';
+import { memfsUrl } from '../url';
 const ESUCCESS = 0;
 export default class MemFS {
     ready;
@@ -17,11 +17,11 @@ export default class MemFS {
     constructor(options) {
         this.stdin = options.stdin;
         this.stdout = options.stdout;
-        this.stdinStr = options.stdinStr || "";
+        this.stdinStr = options.stdinStr || '';
         const env = bindNew(this, 'abort', 'host_write', 'host_read', 'memfs_log', 'copy_in', 'copy_out');
         this.ready = compile(memfsUrl(options.path), options.progress)
-            .then(module => WebAssembly.instantiate(module, { env }))
-            .then(instance => {
+            .then((module) => WebAssembly.instantiate(module, { env }))
+            .then((instance) => {
             this.instance = instance;
             this.exports = instance.exports;
             this.mem = new Memory(this.exports.memory);

package/dist/clang/memory/memory.js

@@ -1,4 +1,4 @@
-import { readStr, readStrR } from "../encode";
+import { readStr, readStrR } from '../encode';
 export default class Memory {
     memory;
     buffer;
@@ -52,7 +52,7 @@ export default class Memory {
         if (buf instanceof ArrayBuffer)
             return this.writeUint8(o, new Uint8Array(buf));
         else if (typeof buf === 'string')
-            return this.writeUint8(o, buf.split('').map(x => x.charCodeAt(0)));
+            return this.writeUint8(o, buf.split('').map((x) => x.charCodeAt(0)));
         else
             return this.writeUint8(o, buf);
     }

package/dist/clang/memory/tar.d.ts

@@ -1,2 +1,2 @@
-import type { MemFS } from "./";
+import type { MemFS } from './';
 export default function untar(buffer: ArrayBuffer, memfs: MemFS): void;

package/dist/clang/memory/tar.js

@@ -1,5 +1,5 @@
-import { readStr, readOct } from "../encode";
-import { assert } from "../error";
+import { readStr, readOct } from '../encode';
+import { assert } from '../error';
 function* readEntry(buffer) {
     const u8 = new Uint8Array(buffer);
     let offset = 0;
@@ -9,7 +9,7 @@ function* readEntry(buffer) {
     }, oct = (len) => {
         offset += len;
         return readOct(u8, offset - len, len);
-    }, align = () => offset = (offset + 511) & ~511;
+    }, align = () => (offset = (offset + 511) & ~511);
     while (offset + 512 <= u8.length) {
         const entryInit = {
             filename: str(100),
@@ -21,7 +21,7 @@ function* readEntry(buffer) {
             checksum: oct(8),
             type: str(1),
             linkname: str(100),
-            ustar: str(8),
+            ustar: str(8)
         };
         if (!entryInit.ustar)
             return;
@@ -31,7 +31,7 @@ function* readEntry(buffer) {
             groupName: str(32),
             devMajor: str(8),
             devMinor: str(8),
-            filenamePrefix: str(155),
+            filenamePrefix: str(155)
         };
         align();
         if (entry.type === '0') {

package/dist/clang/wasm.d.ts

@@ -1,4 +1,4 @@
-import type { Writable } from "svelte/store";
-export declare const readBuffer: (name: string, progress?: Writable<number>) => Promise<Uint8Array>;
+import type { Writable } from 'svelte/store';
+export declare const readBuffer: (name: string, progress?: Writable<number>) => Promise<Uint8Array<ArrayBufferLike>>;
 export declare function compile(filename: string, progress?: Writable<number>): Promise<any>;
 export declare function getInstance(module: WebAssembly.Module, imports: WebAssembly.Imports): Promise<WebAssembly.Instance>;

package/dist/clang/wasm.js

@@ -1,4 +1,4 @@
-import * as zip from "@zip.js/zip.js";
+import * as zip from '@zip.js/zip.js';
 const store = {};
 export const readBuffer = async (name, progress) => {
     const response = await fetch(name);
@@ -34,7 +34,7 @@ export async function compile(filename, progress) {
     // application/wasm mimetype.
     if (store[filename])
         return store[filename];
-    return store[filename] = WebAssembly.compile(await readBuffer(filename, progress));
+    return (store[filename] = WebAssembly.compile(await readBuffer(filename, progress)));
 }
 export function getInstance(module, imports) {
     return WebAssembly.instantiate(module, imports);

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import Terminal from "./terminal";
-import playground from "./playground";
+import Terminal from './terminal';
+import playground from './playground';
 export default Terminal;
 export { playground };

package/dist/index.js

@@ -1,4 +1,4 @@
-import Terminal from "./terminal";
-import playground from "./playground";
+import Terminal from './terminal';
+import playground from './playground';
 export default Terminal;
 export { playground };

package/dist/playground/clang.d.ts

@@ -1,5 +1,5 @@
-import type Sandbox from './sandbox';
-import type { Writable } from "svelte/store";
+import type { Sandbox } from './sandbox';
+import type { Writable } from 'svelte/store';
 declare class Clang implements Sandbox {
     ts: number;
     output: any;

package/dist/playground/clang.js

@@ -38,8 +38,7 @@ class Clang {
         const data = enc.encode(strInfo);
         buffer.set(new Int32Array(data.buffer.slice(data.byteOffset), 0));
     }
-    eof() {
-    }
+    eof() { }
     run(code, prepare, log = this.log, prog) {
         this.exit = false;
         return new Promise(async (resolve, reject) => {
@@ -50,7 +49,7 @@ class Clang {
                 if (!this.worker)
                     return reject('Worker not loaded');
                 if (_uid !== this.uid)
-                    return this.worker.onmessage = null;
+                    return (this.worker.onmessage = null);
                 const { id, output, results, log, error, buffer, progress } = event.data;
                 if (buffer && this.internalBuffer.length)
                     this._write(this.internalBuffer.splice(0, 1)[0]);
@@ -79,7 +78,7 @@ class Clang {
                 buffer: this.buffer,
                 interrupt: this.interruptBuffer,
                 context: {},
-                log,
+                log
             });
         });
     }

package/dist/playground/index.d.ts

@@ -1,4 +1,5 @@
 import Clang from './clang';
-import type Sandbox from './sandbox';
+import Python from './python';
+import type { Sandbox } from './sandbox';
 export declare const supportedLanguages: string[];
-export default function load(language: string): Promise<Sandbox | Clang | undefined>;
+export default function load(language: string): Promise<Sandbox | Clang | Python>;

package/dist/playground/index.js

@@ -15,6 +15,9 @@ export default async function load(language) {
         case 'C':
         case 'CPP':
             sandbox = new Clang();
+            break;
+        default:
+            throw new Error(`Unsupported language: ${language}`);
     }
     sandboxCache[language] = sandbox;
     if (sandbox) {

package/dist/playground/python.d.ts

@@ -1,4 +1,4 @@
-import type Sandbox from './sandbox';
+import type { Sandbox } from './sandbox';
 declare class Python implements Sandbox {
     ts: number;
     output: any;

package/dist/playground/python.js

@@ -35,14 +35,13 @@ class Python {
         const data = enc.encode(strInfo);
         buffer.set(new Int32Array(data.buffer.slice(data.byteOffset), 0));
     }
-    eof() {
-    }
+    eof() { }
     run(code, prepare) {
         return new Promise(async (resolve, reject) => {
             const interrupt = new Uint8Array(this.interruptBuffer), _uid = ++this.uid;
             const handler = (event) => {
                 if (_uid !== this.uid)
-                    return this.worker.onmessage = null;
+                    return (this.worker.onmessage = null);
                 const { id, output, results, log, error, buffer } = event.data;
                 if (buffer && this.internalBuffer.length)
                     this._write(this.internalBuffer.splice(0, 1)[0]);

package/dist/playground/sandbox.d.ts

@@ -1,9 +1,12 @@
-interface sandbox {
+export interface Sandbox {
     constructor: any;
     eof: () => void;
     load: (path: string, code?: string, log?: boolean) => Promise<void>;
     run: (code: string, prepare: boolean, log?: boolean) => Promise<string>;
     terminate: () => void;
     clear: () => Promise<void>;
+    kill?: () => void;
+    write?: (data: string) => void;
+    output?: (data: string) => void;
+    elapse?: number;
 }
-export default sandbox;

package/dist/playground/sandbox.js

@@ -1 +1 @@
-export default sandbox;
+export {};

package/dist/playground/worker/clang.js

@@ -28,7 +28,8 @@ async function loadClang(path, log) {
             }
         },
         progress: (value) => postMessage({ progress: value }),
-        log, path,
+        log,
+        path
     });
 }
 self.onmessage = async (event) => {

package/dist/terminal/Terminal.svelte

@@ -1,158 +1,221 @@
-<script>import { Theme, registerAllPlugins } from "./";
-import load from "../playground";
-import { onMount, createEventDispatcher } from "svelte";
-import "@xterm/xterm/css/xterm.css";
-const dispatch = createEventDispatcher();
-export let dark = false, path = "", font = "'D2 coding', monospace";
-let ref, clientWidth, clientHeight, term, finish = true, input = "", sandbox, first = true, tc = 0, plugin, ll = null;
-function wait() {
-  return new Promise((r) => {
-    const i = setInterval(() => {
-      if (term) {
-        clearInterval(i);
-        r();
-      }
-    }, 100);
-  });
-}
-async function initSandbox(language) {
-  let _tc = ++tc;
-  await wait();
-  if (sandbox) await sandbox.clear();
-  input = "";
-  finish = false;
-  if (ll !== language) {
-    sandbox = await load(language);
-    await sandbox.clear();
-    ll = language;
-  }
-  sandbox.output = (output) => _tc === tc && term.write(output.replaceAll("\n", "\r\n"));
-}
-function runSandbox(pr) {
-  return pr.then((x) => {
-    term.write(`\r
-Process finished after ${sandbox.elapse}ms\x1B[?25l`);
-    return x;
-  }).catch((msg) => {
-    term.write(`\r
-\x1B[1;3;31m${msg}\x1B[?25l`);
-    return false;
-  }).finally((ret) => {
-    dispatch("finish");
-    finish = true;
-    term.options.cursorBlink = false;
-    return ret;
-  });
-}
-async function initTerm(blink = true) {
-  await wait();
-  term.options.cursorBlink = blink;
-  term.focus();
-  if (!first) term.write(`\r
-\x1B[0m`);
-  first = false;
-}
-export const terminal = {
-  async clear() {
-    await wait();
-    term.reset();
-    term.write(`\x1B[?25l\x1B[0m\x1B[?25h`);
-    term.options.cursorBlink = false;
-    first = true;
-    await new Promise((r) => setTimeout(r, 100));
-  },
-  async prepare(language, code, log = true, prog) {
-    await Promise.all([initSandbox(language).then(() => sandbox.load(path, code, log)), initTerm(false)]);
-    return await runSandbox(sandbox.run(code, true, log, prog));
-  },
-  async run(language, code, log = true, prog) {
-    await Promise.all([initSandbox(language).then(() => sandbox.load(path, code, log)), initTerm()]);
-    return await runSandbox(sandbox.run(code, false, log, prog));
-  },
-  async destroy() {
-    await wait();
-    term.dispose();
-    if (sandbox) await sandbox.clear();
-  },
-  async write(input2) {
-    await wait();
-    term.write(input2 + "\r\n");
-    sandbox.write(input2.replaceAll("\r", "\n") + "\n");
-  }
-};
-$: if (term) {
-  if (dark) term.options.theme = Theme.Tango_Dark;
-  else term.options.theme = Theme.Tango_Light;
-}
-$: {
-  void 0, clientHeight;
-  plugin?.fit?.fit?.();
-}
-onMount(() => {
-  import("@xterm/xterm").then(async ({ Terminal }) => {
-    term = new Terminal({
-      theme: dark ? Theme.Tango_Dark : Theme.Tango_Light,
-      cursorBlink: false,
-      allowTransparency: true,
-      fontFamily: font,
-      allowProposedApi: true
-    });
-    term.open(ref);
-    term.onKey((e) => {
-      if (finish) return;
-      const ev = e.domEvent;
-      const printable = !ev.altKey && !ev.ctrlKey && !ev.metaKey;
-      dispatch("key", ev);
-      if (ev.key === "Enter") {
-        term.write("\r\n");
-        sandbox.write(input + "\n");
-        input = "";
-      } else if (ev.key === "Backspace") {
-        if (term._core.buffer.x > 0) {
-          term.write("\b \b");
-          if (input.length > 0) input = input.substring(0, input.length - 1);
-        }
-      } else if (printable) {
-        if (e.key >= String.fromCharCode(32) && e.key <= String.fromCharCode(126) || e.key >= "\xA0") {
-          input += e.key;
-          term.write(e.key);
-        }
-      } else if ((ev.ctrlKey || ev.metaKey) && ev.key === "c") {
-        sandbox.kill();
-      } else if ((ev.ctrlKey || ev.metaKey) && ev.key === "d") {
-        sandbox.kill();
-      } else if ((ev.ctrlKey || ev.metaKey) && ev.key === "v") {
-        navigator.clipboard.readText().then((text) => {
-          term.write(text);
-          sandbox.write(text);
-        });
-      }
-    });
-    plugin = await registerAllPlugins(term);
-    dispatch("load");
-  });
-  return async () => {
-    term.dispose();
-    if (sandbox) await sandbox.clear();
-  };
-});
+<script lang="ts">
+	import type { Sandbox } from '../playground/sandbox';
+	import { Theme, registerAllPlugins } from './';
+	import load from '../playground';
+	import { onMount } from 'svelte';
+	import '@xterm/xterm/css/xterm.css';
+	import type { Terminal } from '@xterm/xterm';
+
+	type TerminalControl = typeof terminalControl;
+	interface Props {
+		dark?: boolean;
+		path?: string;
+		font?: string;
+
+		onload?: () => void;
+		onfinish?: () => void;
+		onkey?: (e: KeyboardEvent) => void;
+		terminal?: TerminalControl;
+	}
+
+	let {
+		dark = false,
+		path = '',
+		font = "'D2 coding', monospace",
+		onload,
+		onfinish,
+		onkey,
+		terminal = $bindable()
+	}: Props = $props();
+
+	let ref = $state<HTMLElement>(),
+		clientWidth = $state(0),
+		clientHeight = $state(0),
+		term = $state<Terminal>(),
+		finish = true,
+		input = '',
+		sandbox: Sandbox,
+		first = true,
+		tc = 0,
+		plugin = $state(),
+		ll: string | null = null;
+
+	function wait() {
+		return new Promise<void>((r) => {
+			const i = setInterval(() => {
+				if (term) {
+					clearInterval(i);
+					r();
+				}
+			}, 100);
+		});
+	}
+
+	async function initSandbox(language: string) {
+		let _tc = ++tc;
+		await wait();
+		if (sandbox) await sandbox.clear();
+		input = '';
+		finish = false;
+		if (ll !== language) {
+			sandbox = await load(language);
+			await sandbox.clear();
+			ll = language;
+		}
+		sandbox.output = (output: string) =>
+			_tc === tc && term && term.write(output.replaceAll('\n', '\r\n'));
+	}
+
+	function runSandbox(pr: Promise<boolean>) {
+		return pr
+			.then((x) => {
+				term?.write(`\r\nProcess finished after ${sandbox.elapse}ms\u001B[?25l`);
+				return x;
+			})
+			.catch((msg) => {
+				term?.write(`\r\n\x1B[1;3;31m${msg}\u001B[?25l`);
+				return false;
+			})
+			.finally((ret) => {
+				onfinish?.();
+				finish = true;
+				if (term) term.options.cursorBlink = false;
+				return ret;
+			});
+	}
+
+	async function initTerm(blink = true) {
+		await wait();
+		if (!term) return;
+		term.options.cursorBlink = blink;
+		term.focus();
+
+		if (!first) term?.write(`\r\n\x1b[0m`);
+		first = false;
+	}
+
+	const terminalControl = {
+		async clear() {
+			await wait();
+			term?.reset();
+			term?.write(`\u001B[?25l\x1b[0m\x1b[?25h`);
+			if (term) term.options.cursorBlink = false;
+			first = true;
+			await new Promise((r) => setTimeout(r, 100));
+		},
+		async prepare(language: string, code: string, log = true, prog) {
+			await Promise.all([
+				initSandbox(language).then(() => sandbox.load(path, code, log)),
+				initTerm(false)
+			]);
+			return await runSandbox(sandbox.run(code, true, log, prog));
+		},
+		async run(language: string, code: string, log = true, prog) {
+			await Promise.all([
+				initSandbox(language).then(() => sandbox.load(path, code, log)),
+				initTerm()
+			]);
+			return await runSandbox(sandbox.run(code, false, log, prog));
+		},
+		async destroy() {
+			await wait();
+			term?.dispose();
+			if (sandbox) await sandbox.clear();
+		},
+		async write(input: string) {
+			await wait();
+			term?.write(input + '\r\n');
+			sandbox.write?.(input.replaceAll('\r', '\n') + '\n');
+		}
+	};
+
+	$effect(() => {
+		if (term) {
+			if (dark) term.options.theme = Theme.Tango_Dark;
+			else term.options.theme = Theme.Tango_Light;
+		}
+	});
+
+	$effect(() => {
+		let _ = clientWidth + clientHeight;
+		(plugin as any)?.fit?.fit?.();
+	});
+
+	$effect(() => {
+		terminal = terminalControl;
+	});
+
+	onMount(() => {
+		import('@xterm/xterm').then(async ({ Terminal }) => {
+			if (!ref) return;
+			term = new Terminal({
+				theme: dark ? Theme.Tango_Dark : Theme.Tango_Light,
+				cursorBlink: false,
+				allowTransparency: true,
+				fontFamily: font,
+				allowProposedApi: true
+			});
+			term.open(ref);
+			term.onKey((e: { key: string; domEvent: KeyboardEvent }) => {
+				if (finish || !term) return;
+				const ev = e.domEvent;
+				const printable = !ev.altKey && !ev.ctrlKey && !ev.metaKey;
+				onkey?.(ev);
+				if (ev.key === 'Enter') {
+					term.write('\r\n');
+					sandbox.write?.(input + '\n');
+					input = '';
+				} else if (ev.key === 'Backspace') {
+					if (term.buffer.active.cursorX > 0) {
+						term.write('\b \b');
+						if (input.length > 0) input = input.substring(0, input.length - 1);
+					}
+				} else if (printable) {
+					if (
+						(e.key >= String.fromCharCode(0x20) &&
+							e.key <= String.fromCharCode(0x7e)) ||
+						e.key >= '\u00a0'
+					) {
+						input += e.key;
+						term.write(e.key);
+					}
+				} else if ((ev.ctrlKey || ev.metaKey) && ev.key === 'c') {
+					sandbox.kill?.();
+				} else if ((ev.ctrlKey || ev.metaKey) && ev.key === 'd') {
+					sandbox.kill?.();
+				} else if ((ev.ctrlKey || ev.metaKey) && ev.key === 'v') {
+					navigator.clipboard.readText().then((text) => {
+						term?.write(text);
+						sandbox.write?.(text);
+					});
+				}
+			});
+			plugin = await registerAllPlugins(term);
+
+			onload?.();
+		});
+
+		return async () => {
+			term?.dispose();
+			if (sandbox) await sandbox.clear();
+		};
+	});
 </script>
 
 <main>
-    <div bind:this={ref} bind:clientWidth bind:clientHeight></div>
+	<div bind:this={ref} bind:clientWidth bind:clientHeight></div>
 </main>
 
-
 <style>
-    main {
-        padding: 10px;
-        width: calc(100% - 20px);
-        height: calc(100% - 20px);
-        overflow: hidden;
-    }
-
-    div {
-        width: 100%;
-        height: 100%;
-    }
-</style>
+	main {
+		padding: 10px;
+		width: calc(100% - 20px);
+		height: calc(100% - 20px);
+		overflow: hidden;
+	}
+
+	div {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/terminal/Terminal.svelte.d.ts

@@ -1,39 +1,19 @@
-import { SvelteComponent } from "svelte";
 import '@xterm/xterm/css/xterm.css';
-declare const __propDef: {
-    props: {
-        dark?: boolean;
-        path?: string;
-        font?: string;
-        terminal?: {
-            clear(): Promise<void>;
-            prepare(language: any, code: any, log: boolean | undefined, prog: any): Promise<any>;
-            run(language: any, code: any, log: boolean | undefined, prog: any): Promise<any>;
-            destroy(): Promise<void>;
-            write(input: string): Promise<void>;
-        };
-    };
-    events: {
-        finish: CustomEvent<any>;
-        key: CustomEvent<any>;
-        load: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TerminalProps = typeof __propDef.props;
-export type TerminalEvents = typeof __propDef.events;
-export type TerminalSlots = typeof __propDef.slots;
-export default class Terminal extends SvelteComponent<TerminalProps, TerminalEvents, TerminalSlots> {
-    get terminal(): {
+import type { Terminal } from '@xterm/xterm';
+declare const Terminal: import("svelte").Component<{
+    dark?: boolean;
+    path?: string;
+    font?: string;
+    onload?: () => void;
+    onfinish?: () => void;
+    onkey?: (e: KeyboardEvent) => void;
+    terminal?: {
         clear(): Promise<void>;
-        prepare(language: any, code: any, log: boolean | undefined, prog: any): Promise<any>;
-        run(language: any, code: any, log: boolean | undefined, prog: any): Promise<any>;
+        prepare(language: string, code: string, log: boolean | undefined, prog: any): Promise<boolean>;
+        run(language: string, code: string, log: boolean | undefined, prog: any): Promise<boolean>;
         destroy(): Promise<void>;
         write(input: string): Promise<void>;
     };
-}
-export {};
+}, {}, "terminal">;
+type Terminal = ReturnType<typeof Terminal>;
+export default Terminal;

package/dist/terminal/index.d.ts

@@ -1,5 +1,5 @@
-import Theme from "./theme";
-import registerAllPlugins from "./plugin";
-import Terminal from "./Terminal.svelte";
+import Theme from './theme';
+import registerAllPlugins from './plugin';
+import Terminal from './Terminal.svelte';
 export { Theme, registerAllPlugins };
 export default Terminal;

package/dist/terminal/index.js

@@ -1,5 +1,5 @@
-import Theme from "./theme";
-import registerAllPlugins from "./plugin";
-import Terminal from "./Terminal.svelte";
+import Theme from './theme';
+import registerAllPlugins from './plugin';
+import Terminal from './Terminal.svelte';
 export { Theme, registerAllPlugins };
 export default Terminal;

package/package.json

@@ -1,73 +1,73 @@
 {
-  "name": "wasm-idle",
-  "version": "0.1.0",
-  "description": "A simple web app to run C++/Python code in the browser",
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "prepublishOnly": "npm run package",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.8.0",
-    "@sveltejs/adapter-auto": "^3.2.2",
-    "@sveltejs/adapter-static": "^3.0.2",
-    "@sveltejs/kit": "^2.5.20",
-    "@sveltejs/package": "^2.3.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "@typescript-eslint/eslint-plugin": "^8.0.1",
-    "@typescript-eslint/parser": "^8.0.1",
-    "eslint": "^9.8.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.43.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "gh-pages": "^6.1.1",
-    "globals": "^15.9.0",
-    "monaco-editor": "^0.50.0",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
-    "publint": "^0.2.9",
-    "svelte": "^4.2.18",
-    "svelte-check": "^3.8.5",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.0.1",
-    "vite": "^5.3.5"
-  },
-  "dependencies": {
-    "@xterm/addon-canvas": "^0.7.0",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/addon-ligatures": "^0.9.0",
-    "@xterm/addon-search": "^0.15.0",
-    "@xterm/addon-serialize": "^0.13.0",
-    "@xterm/addon-unicode11": "^0.8.0",
-    "@xterm/addon-web-links": "^0.11.0",
-    "@xterm/addon-webgl": "^0.18.0",
-    "@xterm/xterm": "^5.5.0",
-    "@zip.js/zip.js": "^2.7.48",
-    "pyodide": "0.26.2"
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "peerDependencies": {
-    "svelte": "^4.2.18"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    }
-  },
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+	"name": "wasm-idle",
+	"version": "0.2.1",
+	"description": "A simple web app to run C++/Python code in the browser",
+	"license": "MIT",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.19.0",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/adapter-static": "^3.0.8",
+		"@sveltejs/kit": "^2.17.1",
+		"@sveltejs/package": "^2.3.10",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@typescript-eslint/eslint-plugin": "^8.23.0",
+		"@typescript-eslint/parser": "^8.23.0",
+		"eslint": "^9.19.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"gh-pages": "^6.3.0",
+		"globals": "^15.14.0",
+		"monaco-editor": "^0.52.2",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"svelte": "^5.19.7",
+		"svelte-check": "^4.1.4",
+		"tslib": "^2.8.1",
+		"typescript": "^5.7.3",
+		"typescript-eslint": "^8.23.0",
+		"vite": "^6.0.11"
+	},
+	"dependencies": {
+		"@xterm/addon-canvas": "^0.7.0",
+		"@xterm/addon-fit": "^0.10.0",
+		"@xterm/addon-ligatures": "^0.9.0",
+		"@xterm/addon-search": "^0.15.0",
+		"@xterm/addon-serialize": "^0.13.0",
+		"@xterm/addon-unicode11": "^0.8.0",
+		"@xterm/addon-web-links": "^0.11.0",
+		"@xterm/addon-webgl": "^0.18.0",
+		"@xterm/xterm": "^5.5.0",
+		"@zip.js/zip.js": "^2.7.57",
+		"publint": "^0.3.3",
+		"pyodide": "0.26.2"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.2.18"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts"
 }