❤
npm
Sign UpSign In

@emily-curry/snowpack-plugin-wasm-pack
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

snowpack-plugin-wasm-pack

Snowpack plugin for rust using wasm-pack 🦀

A forked version of snowpack-plugin-wasm-pack. See Changes below.

Installation

yarn add --dev @emily-curry/snowpack-plugin-wasm-pack

The plugin also depends on wasm-pack and cargo-watch

These can be installed with:

cargo install wasm-pack

(or following these instructions)

cargo install cargo-watch

Usage

Create a new RustWasm project within your project:

wasm-pack new <my-wasm-project-name>

Add the plugin to your Snowpack config:

snowpack.config.js

module.exports = {
  mount: {
    src: '/',
  },
  plugins: [
    [
      '@emily-curry/snowpack-plugin-wasm-pack',
      {
        projectPath: './my-wasm-project-name',
      },
    ],
  ],
};

Options

Name Description Type Required Default
projectPath Relative path from the root to your wasm-pack project. string yes -
outDir Directory for the compiled assets. string "pkg"
outName Sets the prefix for output file names. string "index"
logLevel Sets the log level of wasm-pack. "info" or "warn" or "error" "warn"
target Sets the target of wasm-pack. string "web"
scope Scope of your package name, eg: @test/my-great-wasm. string -
extraArgs Any extra args you want to pass to wasm-pack. eg: --no-typescript. Array<string> -
wasmPackPath Path to a custom install of wasm-pack. string -
watch The snowpack modes that will run wasm-pack in watch mode. boolean or SnowpackConfig['mode'][] ['development']

In your code:

wasm-pack exports an init funtion as the default export. This must be called (once) before any other functions can be used. snowpack-plugin-wasm-pack will automatically configure path aliases to your project under the name of your package:

project/lib.rs

// --- code omitted

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

src/index.ts

import init, { add } from 'my-wasm-project-name';

const maths = async () => {
  await init();

  console.log('Addition in rust:', add(1, 2));
};

maths(); // should log 3 to console

src/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>🦀</h1>
    <script type="module" src="index.js"></script>
  </body>
</html>

Usage with typescript

You need to manually add the alias to your tsconfig under compilerOptions -> paths.

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "my-wasm-project-name": ["./my-wasm-project-name/pkg"]
    }
  }
}

Multiple RustWasm projects

Add the plugin multiple times for multiple projects:

snowpack.config.js

module.exports = {
  // ... rest omitted
  plugins: [
    [
      '@emily-curry/snowpack-plugin-wasm-pack',
      {
        projectPath: './my-wasm-project-name',
      },
    ],
    [
      '@emily-curry/snowpack-plugin-wasm-pack',
      {
        projectPath: './path/to/another/project',
      },
    ],
  ],
};

Changes

1.0.0

  • Added watch option. In modes matching the watch option, the wasm-pack build process runs alongside the snowpack build process. In non-watch modes, the wasm-pack build process executes syncronously before the main snowpack build process, ensuring the files are built in time for subsequent steps.

1.1.0

  • Added target option, allowing the wasm-pack --target arg to be set.

1.1.2

  • README improvements.

1.1.3

  • snowpack build now outputs same compilation logs as snowpack dev.

1.1.4

  • snowpack build now outputs args used to invoke wasm-pack.

Useful links

wasm-pack wasm-bindgen snowpack

Readme

Keywords

Package Sidebar

Install

npm i @emily-curry/snowpack-plugin-wasm-pack

Repository

github.com/emily-curry/snowpack-plugin-wasm-pack

Homepage

github.com/emily-curry/snowpack-plugin-wasm-pack

Weekly Downloads

59

Version

1.1.4

License

Unlicense

Unpacked Size

13.3 kB

Total Files

5

Last publish

Collaborators

  • emily-curry
Try on RunKit
Report malware