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

.github/workflows/ci.yml

@@ -15,6 +15,9 @@ jobs:
           os: [ubuntu-latest, windows-latest, macos-latest]
           node-version: [22, 24]
       runs-on: ${{ matrix.os }}
+      defaults:
+        run:
+          shell: bash
       permissions:
         contents: read
         issues: write
@@ -41,6 +44,9 @@ jobs:
         - name: Install dependencies
           run: npm ci
 
+        - name: Setup WASM build tools
+          run: npm run setup-wasm
+
         - name: Run tests
           run: npm test
 

README.md

@@ -238,7 +238,7 @@ This extension is available on:
 This extension includes a WebAssembly component that requires the following tools for building:
 
 - **Rust** (with `cargo`): Required for building the WebAssembly module
-- **wasm-pack v0.13.1**: Used specifically for the `wit-bindgen-wasm` subproject
+- **wasm-tools v1.245.0**: Used for embedding WIT metadata and creating WebAssembly components
 
 You can install these dependencies by running:
 ```bash

package-lock.json

@@ -21,7 +21,7 @@
     "type": "module",
     "main": "./dist/extension.js",
     "scripts": {
-        "clean": "rimraf out dist types && rimraf --glob \"*.vsix\"",
+        "clean": "rimraf out dist types coverage && rimraf --glob \"*.vsix\"",
         "clean-wasm": "rimraf wit-bindgen-wasm/pkg wit-bindgen-wasm/target",
         "clean-samples": "rimraf samples/target samples/tmp/*",
         "clean-deps": "rimraf node_modules 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",
         "build-extension-prod": "node esbuild.mts -- --production",
         "build-extension": "node esbuild.mts",
         "build-extension-watch": "node esbuild.mts --watch",
@@ -56,23 +56,22 @@
         "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",
         "release": "npx release-please release-pr --repo-url bytecodealliance/vscode-wit --config-file .github/release-please-config.json --manifest-file .github/release-please-manifest.json --token",
         "update-npm": "npx npm-check-updates -u -t minor",
         "update-npm-major": "npx npm-check-updates -u",
-        "update-cargo": "cd wit-bindgen-wasm && cargo update && (command -v cargo-upgrade >/dev/null 2>&1 || cargo install cargo-edit) && cargo upgrade",
-        "update-cargo-major": "cd wit-bindgen-wasm && cargo update && (command -v cargo-upgrade >/dev/null 2>&1 || cargo install cargo-edit) && cargo upgrade --incompatible",
+        "update-cargo": "cd wit-bindgen-wasm && cargo update && (command -v cargo-upgrade >/dev/null 2>&1 || cargo install cargo-edit) && cargo upgrade && npm run update-wasm-tools",
+        "update-cargo-major": "cd wit-bindgen-wasm && cargo update && (command -v cargo-upgrade >/dev/null 2>&1 || cargo install cargo-edit) && cargo upgrade --incompatible && npm run update-wasm-tools",
+        "update-wasm-tools": "./scripts/update-wasm-tools-version.sh",
         "update": "run-s update-npm update-cargo",
         "update-major": "run-s update-npm-major update-cargo-major"
     },
-    "dependencies": {
-        "@bytecodealliance/jco": "1.17.0",
-        "wit-bindgen-wasm": "file:wit-bindgen-wasm/pkg"
-    },
+    "dependencies": {},
     "devDependencies": {
+        "@bytecodealliance/jco": "1.17.0",
         "@eslint/css": "1.0.0",
         "@eslint/js": "10.0.1",
         "@types/node": "25.5.0",
@@ -94,7 +93,7 @@
         "typescript-eslint": "8.57.1",
         "vitest": "4.1.0",
         "vscode-tmgrammar-test": "0.1.3",
-        "wasm-pack": "0.14.0"
+        "wit-bindgen-wasm": "file:wit-bindgen-wasm/pkg"
     },
     "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/"

scripts/build-wasm.sh

@@ -1,10 +1,10 @@
 #!/bin/bash
 
-# Setup script for WebAssembly build tools
+# Setup script for WebAssembly Component Model build tools
 
 set -e
 
-echo "Setting up WebAssembly build tools..."
+echo "Setting up WebAssembly Component Model build tools..."
 
 # Check if Rust is installed
 if ! command -v cargo &> /dev/null; then
@@ -16,27 +16,37 @@ fi
 
 echo "✅ Rust is installed: $(cargo --version)"
 
-# Check if wasm-pack is installed
-if ! command -v wasm-pack &> /dev/null; then
-    echo "📦 Installing wasm-pack v0.13.1..."
-    cargo install wasm-pack@0.13.1
-else
-    echo "✅ wasm-pack is already installed: $(wasm-pack --version)"
-    # Check if the version is compatible (0.13.x)
-    WASM_PACK_VERSION=$(wasm-pack --version | grep -o '[0-9]\+\.[0-9]\+\.[0-9]\+')
-    if [[ ! "$WASM_PACK_VERSION" =~ ^0\.13\. ]]; then
-        echo "⚠️  Warning: wasm-pack version $WASM_PACK_VERSION detected. This project is tested with v0.13.1"
-        echo "   Consider running: cargo install wasm-pack@0.13.1"
+# Check if correct version of wasm-tools is installed
+WASM_TOOLS_VERSION="1.245.0"
+if command -v wasm-tools &> /dev/null; then
+    INSTALLED_VERSION=$(wasm-tools --version | awk '{print $2}')
+    if [[ "$INSTALLED_VERSION" == "$WASM_TOOLS_VERSION" ]]; then
+        echo "✅ wasm-tools is installed: $(wasm-tools --version)"
+    else
+        echo "📦 Updating wasm-tools from $INSTALLED_VERSION to $WASM_TOOLS_VERSION..."
+        cargo install wasm-tools@"$WASM_TOOLS_VERSION"
     fi
+else
+    echo "📦 Installing wasm-tools $WASM_TOOLS_VERSION..."
+    cargo install wasm-tools@"$WASM_TOOLS_VERSION"
 fi
 
 # Add wasm32 target if not present
 echo "🎯 Adding wasm32-unknown-unknown target..."
 rustup target add wasm32-unknown-unknown
 
-echo "✅ WebAssembly build tools setup complete!"
+# Check if jco is available via npx
+echo "🔍 Checking jco availability..."
+if npx jco --version &> /dev/null; then
+    echo "✅ jco is available: $(npx jco --version)"
+else
+    echo "⚠️  jco not found. Install it with: npm install @bytecodealliance/jco"
+    echo "   (It should be in the project's devDependencies)"
+fi
+
+echo ""
+echo "✅ WebAssembly Component Model build tools setup complete!"
 echo ""
 echo "You can now run:"
-echo "  npm run build-wasm      # Build WASM in release mode"
-echo "  npm run build-wasm-dev  # Build WASM in development mode"
-echo "  npm run build           # Build the entire extension"
+echo "  npm run build-wasm      # Build WASM component"
+echo "  npm run build            # Build the entire extension"

scripts/setup-wasm.sh

@@ -0,0 +1,34 @@
+#!/bin/bash
+
+# Syncs the wasm-tools CLI version with the wit-component crate version in Cargo.toml,
+# installs the matching wasm-tools version, and updates setup-wasm.sh.
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
+CARGO_TOML="$PROJECT_DIR/wit-bindgen-wasm/Cargo.toml"
+SETUP_SCRIPT="$SCRIPT_DIR/setup-wasm.sh"
+
+# Extract wit-component version from Cargo.toml (e.g., "0.245")
+WIT_COMPONENT_VERSION=$(grep -oP 'wit-component\s*=\s*"\K[^"]+' "$CARGO_TOML")
+
+if [ -z "$WIT_COMPONENT_VERSION" ]; then
+    echo "❌ Could not find wit-component version in $CARGO_TOML"
+    exit 1
+fi
+
+# Convert crate version 0.X to CLI version 1.X (e.g., 0.245 -> 1.245.0)
+MINOR=$(echo "$WIT_COMPONENT_VERSION" | sed 's/^0\.//')
+WASM_TOOLS_VERSION="1.${MINOR}.0"
+
+echo "📦 wit-component crate version: $WIT_COMPONENT_VERSION"
+echo "🔧 Matching wasm-tools CLI version: $WASM_TOOLS_VERSION"
+
+# Install the matching wasm-tools version
+echo "📥 Installing wasm-tools $WASM_TOOLS_VERSION..."
+cargo install "wasm-tools@${WASM_TOOLS_VERSION}"
+
+# Update the pinned version in setup-wasm.sh
+sed -i "s/WASM_TOOLS_VERSION=\"[^\"]*\"/WASM_TOOLS_VERSION=\"${WASM_TOOLS_VERSION}\"/" "$SETUP_SCRIPT"
+echo "✅ Updated WASM_TOOLS_VERSION in setup-wasm.sh to $WASM_TOOLS_VERSION"