wasm-idle 0.0.16 → 0.0.18

package/dist/clang/index.d.ts

@@ -1,8 +1,10 @@
 import App from "./app";
 import { MemFS } from "./memory";
+import { type Writable } from "svelte/store";
 interface APIOption {
     stdin: () => string;
     stdout: (str: string) => void;
+    progress: (value: number) => void;
     log?: boolean;
     showTiming?: boolean;
     path: string;
@@ -19,10 +21,15 @@ export default class Clang {
     lastCode: string;
     path: string;
     wasm?: WebAssembly.Instance;
+    progress: {
+        clang: Writable<number>;
+        lld: Writable<number>;
+        memfs: Writable<number>;
+    };
     constructor(options: APIOption);
     hostLog(message: string): void;
     hostLogAsync(message: string, promise: Promise<any>): Promise<any>;
-    getModule(name: string): Promise<any>;
+    getModule(name: string, progress?: Writable<number>): Promise<any>;
     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>;

package/dist/clang/index.js

@@ -3,6 +3,7 @@ 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', '/',
@@ -40,6 +41,11 @@ export default class Clang {
     lastCode = '';
     path;
     wasm;
+    progress = {
+        clang: writable(0),
+        lld: writable(0),
+        memfs: writable(0),
+    };
     constructor(options) {
         this.moduleCache = {};
         this.stdout = options.stdout;
@@ -49,10 +55,17 @@ export default class Clang {
         this.memfs = new MemFS({
             stdout: this.stdout,
             stdin: options.stdin,
-            path: this.path
+            path: this.path,
+            progress: this.progress.memfs,
         });
-        this.getModule(clangUrl(this.path));
-        this.getModule(lldUrl(this.path));
+        const progress = derived([this.progress.clang, this.progress.lld, this.progress.memfs], ([clang, lld, memfs]) => {
+            return (clang + lld + memfs) / 3;
+        });
+        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))));
     }
     hostLog(message) {
@@ -74,10 +87,10 @@ export default class Clang {
             this.stdout('\n');
         return result;
     }
-    async getModule(name) {
+    async getModule(name, progress) {
         if (this.moduleCache[name])
             return this.moduleCache[name];
-        const module = await this.hostLogAsync(`Fetching and compiling ${name}`, compile(name));
+        const module = await this.hostLogAsync(`Fetching and compiling ${name}`, compile(name, progress));
         this.moduleCache[name] = module;
         return module;
     }

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

@@ -1,9 +1,11 @@
 import { Memory } from './';
+import type { Writable } from "svelte/store";
 interface MemFsOptions {
     stdin: () => string;
     stdout: (str: string) => void;
     stdinStr?: string;
     path: string;
+    progress?: Writable<number>;
 }
 export default class MemFS {
     ready: Promise<void>;

package/dist/clang/memory/memFs.js

@@ -19,7 +19,7 @@ export default class MemFS {
         this.stdout = options.stdout;
         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))
+        this.ready = compile(memfsUrl(options.path), options.progress)
             .then(module => WebAssembly.instantiate(module, { env }))
             .then(instance => {
             this.instance = instance;

package/dist/clang/url.js

@@ -1,4 +1,4 @@
 export const memfsUrl = (prefix) => prefix + '/clang/bin/memfs.zip';
 export const clangUrl = (prefix) => prefix + '/clang/bin/clang.zip';
 export const lldUrl = (prefix) => prefix + '/clang/bin/lld.zip';
-export const rootUrl = (prefix) => prefix + '/clang/bin/sysroot.tar';
+export const rootUrl = (prefix) => prefix + '/clang/bin/sysroot.tar.zip';

package/dist/clang/wasm.d.ts

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

package/dist/clang/wasm.js

@@ -1,22 +1,41 @@
 import * as zip from "@zip.js/zip.js";
-const url = (url) => url;
 const store = {};
-export async function compile(filename) {
-    // TODO: make compileStreaming work. It needs the server to use the
-    // application/wasm mimetype.
-    if (store[filename])
-        return store[filename];
-    const response = await fetch(url(filename));
-    const blob = await response.blob();
-    const reader = new zip.ZipReader(new zip.BlobReader(blob));
+export const readBuffer = async (name, progress) => {
+    const response = await fetch(name);
+    const r = response.body.getReader();
+    const contentLength = +response.headers.get('Content-Length');
+    let receivedLength = 0;
+    let chunks = [];
+    while (true) {
+        const { done, value } = await r.read();
+        if (done)
+            break;
+        chunks.push(value);
+        receivedLength += value.length;
+        progress?.set?.(receivedLength / contentLength);
+    }
+    progress?.set?.(1);
+    const chunksAll = new Uint8Array(receivedLength); // (4.1)
+    let position = 0;
+    for (const chunk of chunks) {
+        chunksAll.set(chunk, position);
+        position += chunk.length;
+    }
+    const reader = new zip.ZipReader(new zip.Uint8ArrayReader(chunksAll));
     const entries = await reader.getEntries();
     for (const entry of entries) {
-        console.log(`Found WASM file: ${entry.filename}`);
         const data = await entry.getData(new zip.Uint8ArrayWriter());
-        return store[filename] = WebAssembly.compile(data);
+        return data;
     }
+    throw new Error('No entry found');
+};
+export async function compile(filename, progress) {
+    // TODO: make compileStreaming work. It needs the server to use the
+    // application/wasm mimetype.
+    if (store[filename])
+        return store[filename];
+    return store[filename] = WebAssembly.compile(await readBuffer(filename, progress));
 }
 export function getInstance(module, imports) {
     return WebAssembly.instantiate(module, imports);
 }
-export const readBuffer = (name) => fetch(url(name)).then(r => r.arrayBuffer());

package/dist/playground/clang.d.ts

@@ -1,4 +1,5 @@
 import type Sandbox from './sandbox';
+import type { Writable } from "svelte/store";
 declare class Clang implements Sandbox {
     ts: number;
     output: any;
@@ -15,7 +16,7 @@ declare class Clang implements Sandbox {
     write(input: string): void;
     _write(input: string): void;
     eof(): void;
-    run(code: string, prepare: boolean, log?: boolean): Promise<string>;
+    run(code: string, prepare: boolean, log?: boolean, prog?: Writable<number>): Promise<string>;
     terminate(): void;
     clear(): Promise<void>;
 }

package/dist/playground/clang.js

@@ -40,7 +40,7 @@ class Clang {
     }
     eof() {
     }
-    run(code, prepare, log = this.log) {
+    run(code, prepare, log = this.log, prog) {
         this.exit = false;
         return new Promise(async (resolve, reject) => {
             if (!this.worker)
@@ -51,7 +51,7 @@ class Clang {
                     return reject('Worker not loaded');
                 if (_uid !== this.uid)
                     return this.worker.onmessage = null;
-                const { id, output, results, log, error, buffer } = event.data;
+                const { id, output, results, log, error, buffer, progress } = event.data;
                 if (buffer && this.internalBuffer.length)
                     this._write(this.internalBuffer.splice(0, 1)[0]);
                 if (output)
@@ -67,6 +67,8 @@ class Clang {
                     this.elapse = Date.now() - this.begin;
                     reject(error);
                 }
+                if (progress)
+                    prog?.set?.(progress);
             };
             interrupt[0] = 0;
             this.worker.onmessage = handler;

package/dist/playground/index.d.ts

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

package/dist/playground/worker/clang.js

@@ -27,6 +27,7 @@ async function loadClang(path, log) {
                 }
             }
         },
+        progress: (value) => postMessage({ progress: value }),
         log, path,
     });
 }

package/dist/terminal/Terminal.svelte

@@ -56,13 +56,13 @@ export const terminal = {
     first = true;
     await new Promise((r) => setTimeout(r, 100));
   },
-  async prepare(language, code, log = true) {
+  async prepare(language, code, log = true, prog) {
     await Promise.all([initSandbox(language).then(() => sandbox.load(path, code, log)), initTerm(false)]);
-    await runSandbox(sandbox.run(code, true, log));
+    await runSandbox(sandbox.run(code, true, log, prog));
   },
-  async run(language, code, log = true) {
+  async run(language, code, log = true, prog) {
     await Promise.all([initSandbox(language).then(() => sandbox.load(path, code, log)), initTerm()]);
-    await runSandbox(sandbox.run(code, false, log));
+    await runSandbox(sandbox.run(code, false, log, prog));
   },
   async destroy() {
     await wait();

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

@@ -7,8 +7,8 @@ declare const __propDef: {
         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>;
+            prepare(language: any, code: any, log: boolean | undefined, prog: any): Promise<void>;
+            run(language: any, code: any, log: boolean | undefined, prog: any): Promise<void>;
             destroy(): Promise<void>;
         } | undefined;
     };
@@ -26,8 +26,8 @@ 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>;
+        prepare(language: any, code: any, log: boolean | undefined, prog: any): Promise<void>;
+        run(language: any, code: any, log: boolean | undefined, prog: any): Promise<void>;
         destroy(): Promise<void>;
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wasm-idle",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "A simple web app to run C++/Python code in the browser",
   "license": "MIT",
   "type": "module",