wasm-idle 1.1.0 → 1.1.2

package/dist/playground/compiledArtifactCache.js

@@ -1,3 +1,12 @@
+function snapshotArtifact(artifact) {
+    const { bytes, wasm, ...metadata } = artifact;
+    return {
+        ...structuredClone(metadata),
+        // Compiled modules are immutable. Byte views must not retain an oversized backing buffer.
+        wasm,
+        bytes: ArrayBuffer.isView(bytes) ? Uint8Array.from(bytes) : bytes.slice(0)
+    };
+}
 /** Only immutable compiler output lives here, never a worker, instance, or filesystem. */
 export class CompiledArtifactCache {
     entries = new Map();
@@ -7,6 +16,10 @@ export class CompiledArtifactCache {
     maxEntries;
     maxBytes;
     constructor(maxEntries = 8, maxBytes = 32 * 1024 * 1024) {
+        if (!Number.isSafeInteger(maxEntries) || maxEntries < 0)
+            throw new TypeError('Invalid compiled artifact cache maxEntries');
+        if (!Number.isSafeInteger(maxBytes) || maxBytes < 0)
+            throw new TypeError('Invalid compiled artifact cache maxBytes');
         this.maxEntries = maxEntries;
         this.maxBytes = maxBytes;
     }
@@ -19,17 +32,29 @@ export class CompiledArtifactCache {
         this.hits++;
         this.entries.delete(key);
         this.entries.set(key, entry);
-        return entry.artifact;
+        return snapshotArtifact(entry.artifact);
+    }
+    getDiagnostics(key) {
+        return this.entries.get(key)?.diagnostics.map((diagnostic) => ({ ...diagnostic })) ?? [];
     }
-    set(key, artifact) {
-        const size = artifact.bytes.byteLength + key.length * 2;
+    set(key, artifact, diagnostics = []) {
+        // A zero budget disables retention without disabling compilation.
+        if (this.maxEntries === 0 || this.maxBytes === 0)
+            return;
+        const size = artifact.bytes.byteLength +
+            key.length * 2 +
+            (diagnostics.length ? JSON.stringify(diagnostics).length * 2 : 0);
         if (size > this.maxBytes)
             return;
         const old = this.entries.get(key);
         if (old)
             this.bytes -= old.size;
         this.entries.delete(key);
-        this.entries.set(key, { artifact, size });
+        this.entries.set(key, {
+            artifact: snapshotArtifact(artifact),
+            diagnostics: diagnostics.map((diagnostic) => ({ ...diagnostic })),
+            size
+        });
         this.bytes += size;
         while (this.entries.size > this.maxEntries || this.bytes > this.maxBytes) {
             const oldest = this.entries.keys().next().value;
@@ -52,7 +77,7 @@ export class CompiledArtifactCache {
 }
 export function clangCompileKey(runtimeBaseUrl, maxAssetBytes, request, languageSysroots = false) {
     return JSON.stringify([
-        'wasm-idle/clang-cache-v2',
+        'wasm-idle/clang-cache-v3',
         runtimeBaseUrl,
         maxAssetBytes,
         languageSysroots,
@@ -62,6 +87,7 @@ export function clangCompileKey(runtimeBaseUrl, maxAssetBytes, request, language
         request.compileArgs,
         request.cVersion,
         request.cppVersion,
+        request.maxWasmMemoryBytes,
         [...(request.workspaceFiles || [])].sort((a, b) => a.path.localeCompare(b.path))
     ]);
 }

package/dist/playground/container/ContainerExplorer.svelte

@@ -0,0 +1,307 @@
+<script lang="ts">
+	import type { ContainerWorkspaceEntry } from './protocol';
+	import {
+		buildExplorerModel,
+		explorerBreadcrumbs,
+		EXPLORER_PAGE_SIZE,
+		resolveExplorerDirectory,
+		visibleExplorerRows
+	} from './explorer';
+
+	interface Props {
+		entries: readonly ContainerWorkspaceEntry[];
+		selectedPath?: string;
+		initialDirectory?: string;
+		busy?: boolean;
+		onOpenFile: (entry: ContainerWorkspaceEntry) => void;
+	}
+
+	let {
+		entries,
+		selectedPath,
+		initialDirectory = '',
+		busy = false,
+		onOpenFile
+	}: Props = $props();
+	let requestedDirectory = $state('');
+	let expanded = $state(new Set<string>());
+	let offset = $state(0);
+	const model = $derived(buildExplorerModel(entries));
+	const directory = $derived(resolveExplorerDirectory(model, requestedDirectory));
+	const breadcrumbs = $derived(explorerBreadcrumbs(directory));
+	const visible = $derived(visibleExplorerRows(model, directory, expanded, offset));
+
+	$effect(() => {
+		requestedDirectory = initialDirectory;
+		expanded = new Set();
+		offset = 0;
+	});
+
+	function enterDirectory(path: string) {
+		requestedDirectory = resolveExplorerDirectory(model, path);
+		offset = 0;
+	}
+
+	function toggleDirectory(path: string) {
+		const next = new Set(expanded);
+		if (next.has(path)) next.delete(path);
+		else next.add(path);
+		expanded = next;
+		offset = 0;
+	}
+</script>
+
+<div class="container-explorer">
+	<nav aria-label="Workspace folder" class="breadcrumbs">
+		<button
+			type="button"
+			class="parent-button"
+			aria-label="Go to parent folder"
+			title="Go to parent folder"
+			disabled={!directory}
+			onclick={() => enterDirectory(model.entries.get(directory)?.parent ?? '')}>↑</button
+		>
+		<ol>
+			{#each breadcrumbs as crumb (crumb.path)}
+				<li>
+					<button
+						type="button"
+						title={crumb.path ? `/workspace/${crumb.path}` : '/workspace'}
+						aria-current={crumb.path === directory ? 'location' : undefined}
+						onclick={() => enterDirectory(crumb.path)}>{crumb.name}</button
+					>
+				</li>
+			{/each}
+		</ol>
+	</nav>
+	<div class="files">
+		{#if visible.rows.length === 0}
+			<p class="empty">This folder is empty.</p>
+		{:else}
+			<ul aria-label="Workspace files">
+				{#each visible.rows as row (row.entry.path)}
+					{@const entry = row.entry}
+					<li style:padding-left={`${Math.min(row.depth, 16) * 12}px`}>
+						{#if entry.type === 'directory'}
+							<button
+								type="button"
+								class="toggle"
+								aria-label={`${row.expanded ? 'Collapse' : 'Expand'} /workspace/${entry.path}`}
+								aria-expanded={row.expanded}
+								onclick={() => toggleDirectory(entry.path)}
+								>{row.expanded ? '▾' : '▸'}</button
+							>
+							<button
+								type="button"
+								class="entry directory"
+								data-container-directory={entry.path}
+								aria-label={`Open folder /workspace/${entry.path}`}
+								title={`/workspace/${entry.path}/`}
+								onclick={() => enterDirectory(entry.path)}
+							>
+								<span class="material-symbols-outlined" aria-hidden="true"
+									>folder</span
+								>
+								<span>{entry.name}</span>
+							</button>
+						{:else if entry.type === 'file'}
+							<button
+								type="button"
+								class="entry file"
+								class:active={entry.path === selectedPath}
+								data-container-path={entry.path}
+								aria-current={entry.path === selectedPath ? 'true' : undefined}
+								title={`/workspace/${entry.path} (${entry.size} bytes)`}
+								disabled={busy}
+								onclick={() => onOpenFile(entry)}
+							>
+								<span class="material-symbols-outlined" aria-hidden="true"
+									>draft</span
+								>
+								<span>{entry.name}</span>
+							</button>
+						{:else}
+							<div
+								class="entry symlink"
+								title={`/workspace/${entry.path} (symbolic link; target is not followed)`}
+							>
+								<span class="material-symbols-outlined" aria-hidden="true"
+									>link</span
+								>
+								<span>{entry.name}</span>
+								<small>link</small>
+							</div>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+	{#if visible.offset > 0 || visible.remaining > 0}
+		<div class="pagination">
+			{#if visible.offset > 0}<button
+					type="button"
+					onclick={() => (offset = visible.offset - EXPLORER_PAGE_SIZE)}
+					>Previous files</button
+				>{/if}
+			<span aria-live="polite"
+				>{visible.offset + 1}–{visible.offset + visible.rows.length} of {visible.total}</span
+			>
+			{#if visible.remaining > 0}<button
+					type="button"
+					onclick={() => (offset = visible.offset + EXPLORER_PAGE_SIZE)}
+					>Show more ({visible.remaining} remaining)</button
+				>{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.container-explorer {
+		display: flex;
+		flex-direction: column;
+		min-height: 36px;
+		overflow: hidden;
+	}
+	.breadcrumbs {
+		display: flex;
+		align-items: flex-start;
+		gap: 4px;
+		padding: 4px 0;
+		border-bottom: 1px solid var(--line-soft, #e5e7eb);
+	}
+	.breadcrumbs ol {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 2px;
+		min-width: 0;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.breadcrumbs li {
+		display: flex;
+		align-items: center;
+		min-width: 0;
+	}
+	.breadcrumbs li + li::before {
+		content: '/';
+		color: var(--text-4, #888);
+		font-size: 10px;
+	}
+	button {
+		border: 0;
+		border-radius: 6px;
+		background: transparent;
+		color: var(--text-2, #535c6d);
+		cursor: pointer;
+		font: inherit;
+	}
+	button:disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+	button:hover:enabled,
+	button.active {
+		background: var(--primary-soft, #eaf2ff);
+		color: var(--primary-strong, #2563eb);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--primary, #3182f6);
+		outline-offset: -2px;
+	}
+	.breadcrumbs button {
+		max-width: 200px;
+		padding: 4px 5px;
+		overflow-wrap: anywhere;
+		text-align: left;
+		font: 10px var(--mono, monospace);
+	}
+	.breadcrumbs button[aria-current] {
+		color: var(--text, #1f2937);
+	}
+	.breadcrumbs .parent-button {
+		flex: 0 0 26px;
+		text-align: center;
+		font-size: 15px;
+	}
+	.files {
+		min-height: 36px;
+		overflow: auto;
+	}
+	.files ul {
+		margin: 0;
+		padding: 4px 0;
+		list-style: none;
+	}
+	.files li {
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+		min-width: 0;
+	}
+	.entry {
+		display: flex;
+		align-items: center;
+		flex: 1 1 auto;
+		gap: 6px;
+		min-width: 0;
+		min-height: 30px;
+		padding: 5px 8px;
+		text-align: left;
+		font: 11px var(--mono, monospace);
+		color: var(--text-2, #535c6d);
+	}
+	.entry > span:last-child {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.entry.file,
+	.entry.symlink {
+		margin-left: 24px;
+	}
+	.toggle {
+		flex: 0 0 24px;
+		width: 24px;
+		min-height: 30px;
+		padding: 0;
+		font-size: 13px;
+	}
+	.material-symbols-outlined {
+		flex: 0 0 auto;
+		font-size: 16px;
+	}
+	.symlink {
+		color: var(--text-3, #7a8393);
+	}
+	.symlink span:nth-child(2) {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.symlink small {
+		margin-left: auto;
+		font-size: 9px;
+	}
+	.empty {
+		margin: 8px;
+		color: var(--text-3, #7a8393);
+		font-size: 11px;
+	}
+	.pagination {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 5px;
+		border-top: 1px solid var(--line-soft, #e5e7eb);
+		padding: 5px 0;
+		color: var(--text-3, #7a8393);
+		font-size: 10px;
+	}
+	.pagination button {
+		padding: 5px;
+	}
+</style>

package/dist/playground/container/ContainerExplorer.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContainerExplorerProps = typeof __propDef.props;
+export type ContainerExplorerEvents = typeof __propDef.events;
+export type ContainerExplorerSlots = typeof __propDef.slots;
+export default class ContainerExplorer extends SvelteComponentTyped<ContainerExplorerProps, ContainerExplorerEvents, ContainerExplorerSlots> {
+}
+export {};

package/dist/playground/container/binding.d.ts

@@ -0,0 +1,26 @@
+import type { PlaygroundBinding, SandboxRuntimeAssets } from '../sandbox';
+import type { TerminalShellBinding } from '@wasm-idle/terminal';
+import type { WorkspaceFile as ContainerWorkspaceFile } from '@wasm-idle/core';
+import { type ContainerWorkerClient } from './client';
+import type { ContainerWorkerEvent, ContainerWorkspaceEntry } from './protocol';
+type BindingOptions = {
+    applicationRootURL: string;
+    workspaceId: string;
+    getLanguage?: () => string;
+    /** Deterministic transport contract tests only. */
+    clientFactory?: () => ContainerWorkerClient;
+};
+export interface ContainerPlaygroundBinding extends PlaygroundBinding {
+    readonly shell: TerminalShellBinding;
+    inspect(): Promise<unknown>;
+    setShellDirectory(language: string): Promise<void>;
+    syncWorkspace(language: string, files: readonly ContainerWorkspaceFile[]): Promise<void>;
+    readWorkspace(language: string): Promise<ContainerWorkspaceFile[]>;
+    listWorkspaceFiles(): Promise<ContainerWorkspaceEntry[]>;
+    publishedWorkspace(language: string): ContainerWorkspaceFile[];
+    acceptWorkspace(language: string, files: readonly ContainerWorkspaceFile[]): void;
+    onWorkspaceChange(listener: (event: ContainerWorkerEvent) => void): () => void;
+}
+/** Existing Terminal/Debug controls use this facade; every execution belongs to the owner Container. */
+export declare function createContainerPlaygroundBinding(runtimeAssets: SandboxRuntimeAssets, options: BindingOptions): ContainerPlaygroundBinding;
+export {};

package/dist/playground/container/binding.js

@@ -0,0 +1,247 @@
+import { createContainerWorkerClient } from './client';
+const copyFiles = (files) => files.map((file) => ({
+    path: file.path,
+    content: typeof file.content === 'string' ? file.content : Uint8Array.from(file.content)
+}));
+const bytes = (content) => typeof content === 'string' ? new TextEncoder().encode(content) : content;
+const equal = (left, right) => {
+    const a = bytes(left), b = bytes(right);
+    return a.length === b.length && a.every((byte, index) => byte === b[index]);
+};
+function sameFiles(left, right) {
+    return (left.length === right.length &&
+        left.every((file) => {
+            const other = right.find((candidate) => candidate.path === file.path);
+            return other && equal(file.content, other.content);
+        }));
+}
+/** Existing Terminal/Debug controls use this facade; every execution belongs to the owner Container. */
+export function createContainerPlaygroundBinding(runtimeAssets, options) {
+    let client, disposed = false;
+    const sandboxes = new Map();
+    const published = new Map();
+    const changes = new Set();
+    const queues = new Map();
+    let shellOutput;
+    let shellError;
+    let shellConnection;
+    let requestedShellLanguage;
+    const decoders = new Map();
+    const decoder = (key) => {
+        let value = decoders.get(key);
+        if (!value)
+            decoders.set(key, (value = new TextDecoder()));
+        return value;
+    };
+    const connection = () => {
+        if (disposed)
+            throw new Error('Container playground has been disposed');
+        if (client)
+            return client;
+        client =
+            options.clientFactory?.() ??
+                createContainerWorkerClient({
+                    runtimeAssets,
+                    applicationRootURL: options.applicationRootURL,
+                    workspaceId: options.workspaceId
+                });
+        client.onEvent((event) => {
+            if (event.name === 'workspace') {
+                for (const listener of changes)
+                    listener(event);
+                return;
+            }
+            if (event.name === 'shell-output') {
+                const data = event.data;
+                if (data.error)
+                    shellError?.(new Error(data.error));
+                if (data.bytes)
+                    shellOutput?.(decoder(`shell:${data.stream}`).decode(data.bytes, { stream: true }));
+                return;
+            }
+            const sandbox = event.language && sandboxes.get(event.language);
+            if (!sandbox)
+                return;
+            if (event.name === 'output')
+                sandbox.output?.(typeof event.data === 'string'
+                    ? event.data
+                    : decoder(event.language).decode(event.data, {
+                        stream: true
+                    }));
+            if (event.name === 'debug')
+                sandbox.ondebug?.(event.data);
+            if (event.name === 'diagnostic')
+                sandbox.oncompilerdiagnostic?.(event.data);
+            if (event.name === 'image')
+                sandbox.image?.(event.data);
+        });
+        return client;
+    };
+    const syncWorkspace = (language, files) => {
+        const snapshot = copyFiles(files);
+        const previous = queues.get(language) ?? Promise.resolve();
+        const next = previous
+            .catch(() => { })
+            .then(async () => {
+            const baseline = published.get(language);
+            if (baseline && sameFiles(baseline, snapshot))
+                return;
+            await connection().call('syncWorkspace', [
+                language,
+                snapshot,
+                baseline && copyFiles(baseline)
+            ]);
+            published.set(language, copyFiles(snapshot));
+        });
+        queues.set(language, next);
+        return next;
+    };
+    const shell = {
+        connect(output, error) {
+            shellOutput = output;
+            shellError = error;
+            return (shellConnection ??= (async () => {
+                const language = requestedShellLanguage ?? options.getLanguage?.() ?? 'CPP';
+                await queues.get(language)?.catch(() => { });
+                await connection().call('shellStart', [
+                    { cwd: `/workspace/${language}`, env: { PS1: '\\w $ ' } }
+                ]);
+            })());
+        },
+        async write(text) {
+            await shellConnection;
+            await connection().call('shellWrite', [text]);
+        },
+        async eof() {
+            await shellConnection;
+            await connection().call('shellEof');
+        },
+        async interrupt() {
+            await shellConnection;
+            await connection().call('shellInterrupt');
+        },
+        async dispose() {
+            if (client && !disposed)
+                await client.call('shellDispose');
+        }
+    };
+    const binding = {
+        async setShellDirectory(language) {
+            if (!/^[A-Z][A-Z0-9_]*$/.test(language))
+                throw new TypeError('Invalid shell language');
+            requestedShellLanguage = language;
+            // Selecting a language before Terminal mounts must not start a temporary shell.
+            if (!shellConnection)
+                return;
+            await shellConnection;
+            await connection().call('shellSetDirectory', [language]);
+        },
+        runtimeAssets,
+        terminalProps: undefined,
+        shell,
+        async load(language) {
+            let sandbox = sandboxes.get(language);
+            if (sandbox)
+                return sandbox;
+            const invoke = (method, args = [], execution, progress) => connection().call(method, [language, ...args], {
+                signal: execution?.signal,
+                progress
+            });
+            const record = {
+                runtimeAssets,
+                elapse: 0,
+                async load(code, log = true, args = [], execution = {}, progress) {
+                    await queues.get(language);
+                    await invoke('load', [code, log, args, execution], execution, progress);
+                },
+                async run(code, prepare, log = true, progress, args = [], execution = {}) {
+                    await queues.get(language);
+                    const started = performance.now();
+                    try {
+                        return await invoke(prepare ? 'prepare' : 'run', [code, log, args, execution], execution, progress);
+                    }
+                    finally {
+                        record.elapse = Math.round(performance.now() - started);
+                    }
+                },
+                async clear() {
+                    await invoke('clear');
+                },
+                async restart() {
+                    await invoke('restart');
+                },
+                async terminate() {
+                    await invoke('stop');
+                },
+                async kill() {
+                    await invoke('stop');
+                },
+                async dispose() {
+                    if (client && !disposed)
+                        await invoke('clear');
+                },
+                write(text) {
+                    void invoke('write', [text]).catch((error) => shellError?.(error));
+                },
+                eof() {
+                    void invoke('eof').catch((error) => shellError?.(error));
+                }
+            };
+            for (const method of [
+                'debugCommand',
+                'debugPause',
+                'setBreakpoints',
+                'debugEvaluate',
+                'debugVariables',
+                'debugScopes',
+                'debugFrameScopes',
+                'debugFrameName',
+                'debugReadMemory',
+                'debugWriteMemory',
+                'debugDataBreakpointInfo',
+                'debugSetDataBreakpoints'
+            ]) {
+                record[method] = (...args) => invoke(method, args);
+            }
+            sandboxes.set(language, record);
+            return record;
+        },
+        // Owner and command index can be ready without fetching compiler bodies at page boot.
+        async prewarm() {
+            connection();
+            return true;
+        },
+        async setPrewarmEnabled() { },
+        async cancelPrewarm() { },
+        syncWorkspace,
+        async readWorkspace(language) {
+            await queues.get(language)?.catch(() => { });
+            return await connection().call('readWorkspace', [language]);
+        },
+        async listWorkspaceFiles() {
+            return await connection().call('listWorkspaceFiles');
+        },
+        publishedWorkspace(language) {
+            return copyFiles(published.get(language) ?? []);
+        },
+        acceptWorkspace(language, files) {
+            published.set(language, copyFiles(files));
+        },
+        onWorkspaceChange(listener) {
+            changes.add(listener);
+            return () => changes.delete(listener);
+        },
+        async inspect() {
+            return await connection().call('inspect');
+        },
+        async dispose() {
+            if (disposed)
+                return;
+            disposed = true;
+            changes.clear();
+            await client?.dispose();
+        }
+    };
+    binding.terminalProps = { playground: binding, runtimeAssets };
+    return binding;
+}