Svelte Emscripten

Use your C++ WebAssembly program as a Svelte component.

#svelte #svelte-components #emscripten #webassembly #wasm

Need a Svelte website built?

Hire a professional Svelte developer today.

Download

svelte-emscripten

Use your C++/WebAssembly program as a Svelte component.

This adapts a WebAssembly module compiled with Emscripten to interact with your Svelte application.

How to Use

When you compile your program in Emscripten, use the output filetype *.js and use the linker flags below. These are required to adapt your program into component form:

    -s MODULARIZE=1

    -s ENVIRONMENT='web'

    -s EXTRA_EXPORTED_RUNTIME_METHODS="['specialHTMLTargets',
           'JSEvents', 'GL', 'callMain', 'abort']"

Then, use the component in your Svelte app:

import { default as Emscripten } from 'svelte-emscripten';
import { default as module } from './module.js';

<Emscripten
  module={module}
  canvas={true}
  console={false}
  verticalOrientation={false}
  options={
    { 
      autorun: true,
      wasmPath: 'path/to/module.wasm'
    }
  }
/>

Component Properties

Parameter	Default	Description
`module`	required	The module from your program JS.
`canvas`	`true`	Display the canvas.
`console`	`true`	Display the console textbox.
`verticalOrientation`	`false`	If displaying both canvas and console, display them top-to-bottom instead of left-to-right.
`options`	`{}`	An object with extra parameters for the runtime; see below.

Runtime Options

Option	Default	Description
`autorun`	`false`	Run `main()` immediately upon component mount.
`global`	`false`	Listen to input events on the whole window, not just when this component is focused.
`initialModule`	`{}`	An object containing your custom properties to initialize the Module.
`wasmPath`	`""`	A relative or absolute URL to the WASM binary. If relative, the base directory is where the bundle JS is located on your server. If empty, the default is the filename you used when compiling your program.

License

MIT License, see LICENSE.

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing

Need a Svelte website built?

Hire a professional Svelte developer today.