wasm-idle 0.0.5 → 0.0.7

package/dist/clang/index.d.ts

@@ -18,6 +18,7 @@ export default class Clang {
     log: boolean;
     lastCode: string;
     path: string;
+    wasm?: WebAssembly.Instance;
     constructor(options: APIOption);
     hostLog(message: string): void;
     hostLogAsync(message: string, promise: Promise<any>): Promise<any>;
@@ -25,6 +26,7 @@ export default class Clang {
     compile(options: any): Promise<App | null>;
     link(obj: string, wasm: string): Promise<App | null>;
     run(module: WebAssembly.Module, out: boolean, ...args: string[]): Promise<App | null>;
+    compileLink(code: string): Promise<any>;
     compileLinkRun(code: string): Promise<App | null>;
 }
 export {};

package/dist/clang/index.js

@@ -22,6 +22,7 @@ export default class Clang {
     log;
     lastCode = '';
     path;
+    wasm;
     constructor(options) {
         this.moduleCache = {};
         this.stdout = options.stdout;
@@ -94,14 +95,16 @@ export default class Clang {
             this.stdout(`${green}(${start - instantiate}ms/${end - instantiate}ms)${normal}\n`);
         return stillRunning ? app : null;
     }
-    async compileLinkRun(code) {
+    async compileLink(code) {
         const input = `test.cc`, obj = `test.o`, wasm = `test.wasm`;
-        if (this.lastCode !== code) {
-            await this.compile({ input, code, obj });
-            await this.link(obj, wasm);
-        }
+        if (this.lastCode === code)
+            return this.wasm;
+        await this.compile({ input, code, obj });
+        await this.link(obj, wasm);
         this.lastCode = code;
-        const testMod = await this.hostLogAsync(`Compiling ${wasm}`, WebAssembly.compile(this.memfs.getFileContents(wasm)));
-        return await this.run(testMod, true, 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/playground/clang.d.ts

@@ -1,7 +1,7 @@
 import type Sandbox from './sandbox';
 declare class Clang implements Sandbox {
     ts: number;
-    output: null;
+    output: any;
     worker: Worker;
     buffer: SharedArrayBuffer;
     interruptBuffer: SharedArrayBuffer;
@@ -13,7 +13,7 @@ declare class Clang implements Sandbox {
     write(input: string): void;
     _write(input: string): void;
     eof(): void;
-    run(code: string): Promise<string>;
+    run(code: string, prepare: boolean): Promise<string>;
     terminate(): void;
     clear(): Promise<void>;
 }

package/dist/playground/clang.js

@@ -1,4 +1,3 @@
-import workerUrl from './worker/clang?worker&url';
 class Clang {
     ts = Date.now();
     output = null;
@@ -13,10 +12,8 @@ class Clang {
         return new Promise(async (resolve) => {
             this.internalBuffer = [];
             if (!this.worker) {
-                this.worker = new Worker(workerUrl, { type: 'module' });
-                this.worker.onmessage = (event) => {
-                    resolve();
-                };
+                this.worker = new (await import('./worker/clang?worker')).default();
+                this.worker.onmessage = () => resolve();
                 this.worker.postMessage({ load: true, path, log, code });
             }
             else
@@ -38,14 +35,12 @@ class Clang {
     }
     eof() {
     }
-    run(code) {
+    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) {
-                    this.worker.onmessage = null;
-                    return;
-                }
+                if (_uid !== this.uid)
+                    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]);
@@ -67,6 +62,7 @@ class Clang {
             this.begin = Date.now();
             this.worker.postMessage({
                 code,
+                prepare,
                 buffer: this.buffer,
                 interrupt: this.interruptBuffer,
                 context: {}
@@ -74,8 +70,7 @@ class Clang {
         });
     }
     terminate() {
-        const interrupt = new Uint8Array(this.interruptBuffer);
-        interrupt[0] = 2;
+        new Uint8Array(this.interruptBuffer)[0] = 2;
     }
     async clear() {
         this.terminate();

package/dist/playground/python.d.ts

@@ -1,7 +1,7 @@
 import type Sandbox from './sandbox';
 declare class Python implements Sandbox {
     ts: number;
-    output: null;
+    output: any;
     worker: Worker;
     buffer: SharedArrayBuffer;
     interruptBuffer: SharedArrayBuffer;
@@ -13,7 +13,7 @@ declare class Python implements Sandbox {
     write(input: string): void;
     _write(input: string): void;
     eof(): void;
-    run(code: string): Promise<string>;
+    run(code: string, prepare: boolean): Promise<string>;
     terminate(): void;
     clear(): Promise<void>;
 }

package/dist/playground/python.js

@@ -1,4 +1,3 @@
-import workerUrl from './worker/python?worker&url';
 class Python {
     ts = Date.now();
     output = null;
@@ -13,10 +12,8 @@ class Python {
         return new Promise(async (resolve) => {
             this.internalBuffer = [];
             if (!this.worker) {
-                this.worker = new Worker(workerUrl, { type: 'module' });
-                this.worker.onmessage = (event) => {
-                    resolve();
-                };
+                this.worker = new (await import('./worker/python?worker')).default();
+                this.worker.onmessage = () => resolve();
                 this.worker.postMessage({ load: true, path, log, code });
             }
             else
@@ -38,14 +35,12 @@ class Python {
     }
     eof() {
     }
-    run(code) {
+    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) {
-                    this.worker.onmessage = null;
-                    return;
-                }
+                if (_uid !== this.uid)
+                    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]);
@@ -67,6 +62,7 @@ class Python {
             this.begin = Date.now();
             this.worker.postMessage({
                 code,
+                prepare,
                 buffer: this.buffer,
                 interrupt: this.interruptBuffer,
                 context: {}

package/dist/playground/sandbox.d.ts

@@ -2,7 +2,7 @@ interface sandbox {
     constructor: any;
     eof: () => void;
     load: (path: string, code?: string, log?: boolean) => Promise<void>;
-    run: (code: string) => Promise<string>;
+    run: (code: string, prepare: boolean) => Promise<string>;
     terminate: () => void;
     clear: () => Promise<void>;
 }

package/dist/playground/worker/clang.js

@@ -1,3 +1,8 @@
+self.document = {
+    querySelectorAll() {
+        return [];
+    }
+};
 let stdinBufferClang, interruptBufferClang, clang;
 async function loadClang(path, log) {
     const { default: Clang } = await import('../../clang');
@@ -26,11 +31,22 @@ async function loadClang(path, log) {
     });
 }
 self.onmessage = async (event) => {
-    const { code, buffer, load, interrupt, log, path } = event.data;
+    const { code, buffer, load, interrupt, log, path, prepare } = event.data;
     if (load) {
         await loadClang(path, log);
         postMessage({ load: true });
     }
+    else if (prepare) {
+        stdinBufferClang = new Int32Array(buffer);
+        interruptBufferClang = new Uint8Array(interrupt);
+        try {
+            await clang.compileLink(code);
+            self.postMessage({ results: true });
+        }
+        catch (error) {
+            self.postMessage({ error: error.message });
+        }
+    }
     else if (code) {
         stdinBufferClang = new Int32Array(buffer);
         interruptBufferClang = new Uint8Array(interrupt);

package/dist/playground/worker/python.js

@@ -1,16 +1,39 @@
-let stdinBufferPyodide, interruptBufferPyodide, pyodide;
-async function loadPyodideAndPackages(path) {
+self.document = {
+    querySelectorAll() {
+        return [];
+    }
+};
+let stdinBufferPyodide, interruptBufferPyodide, pyodide, path = '';
+async function loadPyodide(path) {
+    if (pyodide)
+        return;
     const { loadPyodide } = await import('pyodide');
     pyodide = await loadPyodide({ indexURL: path + '/pyodide' });
 }
 self.onmessage = async (event) => {
-    const { code, buffer, load, interrupt, path } = event.data;
+    const { code, buffer, load, interrupt, path: _p, prepare } = event.data;
     if (load) {
-        await loadPyodideAndPackages(path);
-        await pyodide.loadPackagesFromImports(code);
+        path = _p;
+        postMessage({ output: 'Loading Pyodide...' });
+        await loadPyodide(path);
+        postMessage({ output: ' Done.\n\r' });
         postMessage({ load: true });
     }
+    else if (prepare) {
+        postMessage({ output: 'Loading packages...' });
+        try {
+            await loadPyodide(path);
+            await pyodide.loadPackagesFromImports(code);
+            postMessage({ output: ' Done.\n\r' });
+            self.postMessage({ results: true });
+        }
+        catch (e) {
+            self.postMessage({ error: e.message || 'Unknown error' });
+        }
+    }
     else if (code) {
+        await loadPyodide(path);
+        await pyodide.loadPackagesFromImports(code);
         const ts = Date.now();
         stdinBufferPyodide = new Int32Array(buffer);
         interruptBufferPyodide = new Uint8Array(interrupt);
@@ -57,7 +80,7 @@ self.onmessage = async (event) => {
             postMessage({ output });
         };
         try {
-            let results = await pyodide.runPythonAsync(`import asyncio
+            await pyodide.runPythonAsync(`import asyncio
 from js import __pyodide__input_${ts}, __pyodide__output_${ts}
 
 input = __pyodide__input_${ts}
@@ -69,8 +92,8 @@ __builtins__.print = __pyodide__output_${ts}
 ${code}`);
             self.postMessage({ results: true });
         }
-        catch (error) {
-            self.postMessage({ error: error.message });
+        catch (e) {
+            self.postMessage({ error: e.message || 'Unknown error' });
         }
     }
 };

package/dist/terminal/Terminal.svelte

@@ -1,64 +1,70 @@
-<script>import { onMount } from "svelte";
-import { Theme, registerAllPlugins } from "./";
-import { createEventDispatcher } from "svelte";
+<script>import { Theme, registerAllPlugins } from "./";
 import { load } from "../playground";
+import { onMount, createEventDispatcher } from "svelte";
 import "xterm/css/xterm.css";
 const dispatch = createEventDispatcher();
-let ref, clientWidth, clientHeight, term, finish = true, input = "", sandbox, first = true;
-const wait = () => new Promise((r) => {
-  const i = setInterval(() => {
-    if (term) {
-      clearInterval(i);
-      r();
-    }
-  }, 100);
-});
+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, path);
+    await sandbox.clear();
+    ll = language;
+  }
+  sandbox.output = (output) => _tc === tc && term.write(output.replaceAll("\n", "\r\n"));
+}
+function runSandbox(pr) {
+  return pr.then(() => term.write(`\r
+Process finished after ${sandbox.elapse}ms\x1B[?25l`)).catch((msg) => term.write(`\r
+\x1B[1;3;31m${msg}\x1B[?25l`)).finally(() => {
+    dispatch("finish");
+    finish = true;
+    term.options.cursorBlink = false;
+  });
+}
+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.clear();
-    term.write(`\x1B[?25l`);
-    term.write("\x1B[0m");
-    term.write("\x1B[?25h");
+    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) {
+    await Promise.all([initSandbox(language).then(() => sandbox.load(path, code, log)), initTerm(false)]);
+    await runSandbox(sandbox.run(code, true));
+  },
   async run(language, code, log = true) {
-    await wait();
-    if (sandbox)
-      await sandbox.clear();
-    input = "";
-    finish = false;
-    sandbox = await load(language, path);
-    await sandbox.clear();
-    sandbox.output = (output) => {
-      term.write(output.replaceAll("\n", "\r\n"));
-    };
-    term.options.cursorBlink = true;
-    if (!first)
-      term.write(`\r
-\x1B[0m`);
-    await sandbox.load(path, code, log);
-    term.focus();
-    first = false;
-    sandbox.run(code).then(() => {
-      dispatch("finish");
-      finish = true;
-      term.write(`\r
-Process finished after ${sandbox.elapse}ms\r
-\x1B[?25l`);
-      term.options.cursorBlink = false;
-    }).catch((msg) => {
-      dispatch("finish");
-      finish = true;
-      term.write(`\r
-\x1B[1;3;31m${msg}`);
-      term.options.cursorBlink = false;
-    });
+    await Promise.all([initSandbox(language).then(() => sandbox.load(path, code, log)), initTerm()]);
+    await runSandbox(sandbox.run(code, false));
   }
 };
-export let dark = false, path = "";
 $:
   if (term) {
     if (dark)
@@ -66,23 +72,17 @@ $:
     else
       term.options.theme = Theme.Tango_Light;
   }
-let plugin;
-$:
-  if (plugin) {
-    void 0, clientHeight;
-    try {
-      plugin.fit.fit();
-    } catch (e) {
-    }
-  }
+$: {
+  void 0, clientHeight;
+  plugin?.fit?.fit?.();
+}
 onMount(() => {
   import("xterm").then(async ({ Terminal }) => {
     term = new Terminal({
       theme: dark ? Theme.Tango_Dark : Theme.Tango_Light,
       cursorBlink: false,
       allowTransparency: true,
-      fontFamily: "'D2 coding', monospace",
-      fontWeight: "bold",
+      fontFamily: font,
       allowProposedApi: true
     });
     term.open(ref);
@@ -98,9 +98,8 @@ onMount(() => {
       } else if (ev.key === "Backspace") {
         if (term._core.buffer.x > 0) {
           term.write("\b \b");
-          if (input.length > 0) {
+          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") {
@@ -119,8 +118,8 @@ onMount(() => {
       }
     });
     plugin = await registerAllPlugins(term);
+    dispatch("load");
   });
-  dispatch("load");
   return async () => {
     term.dispose();
     if (sandbox)

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

@@ -2,12 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 import 'xterm/css/xterm.css';
 declare const __propDef: {
     props: {
+        dark?: boolean | undefined;
+        path?: string | undefined;
+        font?: string | undefined;
         terminal?: {
             clear(): Promise<void>;
+            prepare(language: any, code: any, log?: boolean): Promise<void>;
             run(language: any, code: any, log?: boolean): Promise<void>;
         } | undefined;
-        dark?: boolean | undefined;
-        path?: string | undefined;
     };
     events: {
         finish: CustomEvent<any>;
@@ -23,6 +25,7 @@ export type TerminalSlots = typeof __propDef.slots;
 export default class Terminal extends SvelteComponentTyped<TerminalProps, TerminalEvents, TerminalSlots> {
     get terminal(): {
         clear(): Promise<void>;
+        prepare(language: any, code: any, log?: boolean): Promise<void>;
         run(language: any, code: any, log?: boolean): Promise<void>;
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wasm-idle",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "A simple web app to run C++/Python code in the browser",
   "license": "MIT",
   "type": "module",
@@ -13,7 +13,7 @@
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
     "deploy": "svelte-package && npm publish",
-    "page": "pnpm run build && gh-pages -d build"
+    "page": "pnpm run build && node ./gh-pages.js"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.0.0",
@@ -33,7 +33,7 @@
     "svelte-check": "^3.2.0",
     "tslib": "^2.5.0",
     "typescript": "^5.0.4",
-    "vite": "^4.3.0-beta.6"
+    "vite": "^4.3.0-beta.7"
   },
   "dependencies": {
     "pyodide": "^0.23.1",