feat: switch to component model for wit-bindgen-wasm

Time to eat our own dog food

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>

Author: GordonSmith

package-lock.json

@@ -39,8 +39,8 @@
         "test-navigator-polyfill": "vitest run tests/navigator-polyfill.test.ts",
         "gen-types": "tsc --project tsconfig.json --emitDeclarationOnly",
         "gen-watch": "npm run gen-types -- -w",
-        "build-wasm-prod": "cd wit-bindgen-wasm && wasm-pack build --target web --out-dir pkg --release",
-        "build-wasm": "cd wit-bindgen-wasm && wasm-pack build --target web --out-dir pkg",
+        "build-wasm-prod": "./scripts/build-wasm.sh --release",
+        "build-wasm": "./scripts/build-wasm.sh --release",
         "build-extension-prod": "node esbuild.mts -- --production",
         "build-extension": "node esbuild.mts",
         "build-extension-watch": "node esbuild.mts --watch",
@@ -56,7 +56,7 @@
         "test": "run-s lint fmt-check build package gen-types test-grammar test-unit",
         "test-wasm": "cd wit-bindgen-wasm && cargo test",
         "check-wasm": "cd wit-bindgen-wasm && cargo check",
-        "verify-wasm": "node -e \"console.log('Verifying WASM build...'); const fs = require('fs'); const path = 'wit-bindgen-wasm/pkg/wit_bindgen_wasm_bg.wasm'; if (fs.existsSync(path)) { console.log('✅ WASM file exists:', path); const size = Math.round(fs.statSync(path).size / 1024); console.log('📏 Size:', size, 'KB'); try { const fd = fs.openSync(path, 'r'); const header = Buffer.alloc(8); fs.readSync(fd, header, 0, 8, 0); fs.closeSync(fd); const magicOk = header[0] === 0x00 && header[1] === 0x61 && header[2] === 0x73 && header[3] === 0x6D; if (!magicOk) { console.warn('⚠️ Not a WebAssembly binary (bad magic).'); process.exit(1); } const version = header.readUInt32LE(4); if (version === 1) { console.log('🧩 Type: Core WebAssembly module (vanilla wasm)'); } else if (version === 0x0A) { console.log('🧩 Type: WebAssembly component'); } else { console.log('🧩 Type: Unknown/other (version ' + version + ')'); } } catch (e) { console.error('❌ Error reading header:', e.message); process.exit(1); } } else { console.error('❌ WASM file not found:', path); process.exit(1); }\"",
+        "verify-wasm": "node -e \"console.log('Verifying WASM build...'); const fs = require('fs'); const path = 'wit-bindgen-wasm/pkg/wit_bindgen_wasm.core.wasm'; if (fs.existsSync(path)) { console.log('✅ WASM file exists:', path); const size = Math.round(fs.statSync(path).size / 1024); console.log('📏 Size:', size, 'KB'); try { const fd = fs.openSync(path, 'r'); const header = Buffer.alloc(8); fs.readSync(fd, header, 0, 8, 0); fs.closeSync(fd); const magicOk = header[0] === 0x00 && header[1] === 0x61 && header[2] === 0x73 && header[3] === 0x6D; if (!magicOk) { console.warn('⚠️ Not a WebAssembly binary (bad magic).'); process.exit(1); } const version = header.readUInt32LE(4); if (version === 1) { console.log('🧩 Type: Core WebAssembly module'); } else if (version === 0x0A) { console.log('🧩 Type: WebAssembly component'); } else { console.log('🧩 Type: Unknown/other (version ' + version + ')'); } console.log('✅ WASM verification passed'); } catch (e) { console.error('❌ Error reading header:', e.message); process.exit(1); } } else { console.error('❌ WASM file not found:', path); process.exit(1); }\"",
         "dev": "run-p gen-watch build-extension-watch",
         "publish": "npx -y @vscode/vsce publish",
         "publish-ovsx": "ovsx publish",
@@ -93,8 +93,7 @@
         "typescript": "5.9.3",
         "typescript-eslint": "8.57.1",
         "vitest": "4.1.0",
-        "vscode-tmgrammar-test": "0.1.3",
-        "wasm-pack": "0.14.0"
+        "vscode-tmgrammar-test": "0.1.3"
     },
     "contributes": {
         "colors": [

package.json

@@ -0,0 +1,79 @@
+#!/bin/bash
+
+# Build WebAssembly component from Rust source
+# Uses: cargo (Rust), wasm-tools (component model), jco (JS transpilation)
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
+WASM_DIR="$PROJECT_DIR/wit-bindgen-wasm"
+PKG_DIR="$WASM_DIR/pkg"
+TARGET_DIR="$WASM_DIR/target"
+
+# Parse arguments
+RELEASE_FLAG=""
+CARGO_PROFILE="debug"
+if [[ "$1" == "--release" ]]; then
+    RELEASE_FLAG="--release"
+    CARGO_PROFILE="release"
+fi
+
+echo "🔨 Building WebAssembly component..."
+
+# Step 1: Build the Rust code to a core WASM module
+echo "📦 Step 1/4: Compiling Rust to WebAssembly..."
+cd "$WASM_DIR"
+cargo build --target wasm32-unknown-unknown $RELEASE_FLAG
+
+CORE_WASM="$TARGET_DIR/wasm32-unknown-unknown/$CARGO_PROFILE/wit_bindgen_wasm.wasm"
+if [ ! -f "$CORE_WASM" ]; then
+    echo "❌ Core WASM not found at: $CORE_WASM"
+    exit 1
+fi
+echo "   Core module: $(du -h "$CORE_WASM" | cut -f1)"
+
+# Step 2: Embed WIT metadata into the core module
+echo "🔗 Step 2/4: Embedding WIT component type information..."
+EMBEDDED_WASM="$TARGET_DIR/wit_bindgen_wasm.embedded.wasm"
+wasm-tools component embed wit/ "$CORE_WASM" --world wit-bindgen-wasm -o "$EMBEDDED_WASM"
+
+# Step 3: Create the WebAssembly component
+echo "🧩 Step 3/4: Creating WebAssembly component..."
+COMPONENT_WASM="$TARGET_DIR/wit_bindgen_wasm.component.wasm"
+wasm-tools component new "$EMBEDDED_WASM" -o "$COMPONENT_WASM"
+echo "   Component: $(du -h "$COMPONENT_WASM" | cut -f1)"
+
+# Step 4: Transpile to JavaScript using jco
+echo "🔄 Step 4/4: Transpiling component to JavaScript..."
+mkdir -p "$PKG_DIR/interfaces"
+
+# Clean old generated files (preserve package.json)
+find "$PKG_DIR" -name "*.js" -o -name "*.d.ts" -o -name "*.wasm" | xargs rm -f 2>/dev/null || true
+rm -rf "$PKG_DIR/interfaces/"
+
+npx jco transpile "$COMPONENT_WASM" -o "$PKG_DIR" --name wit_bindgen_wasm
+
+# Ensure package.json exists for npm resolution
+cat > "$PKG_DIR/package.json" << 'PKGJSON'
+{
+  "name": "wit-bindgen-wasm",
+  "type": "module",
+  "description": "WebAssembly component wrapper for wit-bindgen",
+  "version": "0.1.0",
+  "license": "Apache-2.0 WITH LLVM-exception",
+  "files": [
+    "wit_bindgen_wasm.core.wasm",
+    "wit_bindgen_wasm.js",
+    "wit_bindgen_wasm.d.ts",
+    "interfaces/"
+  ],
+  "main": "wit_bindgen_wasm.js",
+  "types": "wit_bindgen_wasm.d.ts"
+}
+PKGJSON
+
+echo ""
+echo "✅ WebAssembly component build complete!"
+echo "   Output: $PKG_DIR/"
+ls -la "$PKG_DIR/"