WASM Component Model Example With Svelte Webview

An example demonstrating how to use the component model to integrate WebAssembly code into VS Code while providing a Webview written with Svelte.

Functionality

A simple calculator that can perform add, sub, mul and div. The calculator is implemented in Rust and compiled to WebAssembly code. The execution of the WASM code happens in a separate worker and the communication with the WASM code is asynchronously.

Pre-requisites

To run the sample the following tool chains need to be installed

• Rust: installation instructions can be found here
• wasm-tools: releases can be found here. You need at least version >= 1.200 to run the example.

Running the Sample in the Desktop

• Run npm install in this folder. This installs all necessary npm modules.
• Open VS Code on this folder.
• Execute the launch config Run Example.

Running the Sample in the Web

As a pre-requisite follow the instructions here to generate necessary certificate to side load the extension into vscode.dev or insiders.vscode.dev.

Then compile the extension for the Web by running npm run esbuild, start a local extension server using npm run serve, open vscode.dev or insiders.vscode.dev in a browser and execute the command Install Extension from Location. As a location use https://localhost:5000.

Restrictions

This project is currently restricted to Svelte 4 - Svelte 5 throws a runtime error when trying to get the "fistChild" node.