Convert Figma logo to code with AI

rustwasm logowasm-pack

📦✨ your favorite rust -> wasm workflow tool!

6,185
404
6,185
327

Top Related Projects

CLI and Rust libraries for low-level manipulation of WebAssembly modules

18,623

🚀 The leading Wasm Runtime supporting WASIX, WASI and Emscripten

15,263

A fast and secure runtime for WebAssembly

Emscripten: An LLVM-to-WebAssembly Compiler

A TypeScript-like language for WebAssembly.

Optimizer and compiler/toolchain library for WebAssembly

Quick Overview

wasm-pack is a tool for building and working with Rust-generated WebAssembly (Wasm) projects. It simplifies the process of compiling Rust code to Wasm and creating npm packages for JavaScript developers to consume. wasm-pack serves as a bridge between Rust and JavaScript ecosystems, making it easier to integrate Rust's performance benefits into web applications.

Pros

  • Streamlines the process of compiling Rust to WebAssembly
  • Automates npm package generation for easy integration with JavaScript projects
  • Provides a unified workflow for testing, building, and publishing Wasm modules
  • Supports multiple target environments (web, Node.js, no-modules)

Cons

  • Learning curve for developers new to Rust or WebAssembly
  • Limited to Rust as the source language for WebAssembly compilation
  • Dependency on external tools and ecosystem (e.g., Rust, Cargo, npm)
  • May require additional configuration for complex projects or specific use cases

Code Examples

  1. Creating a new wasm-pack project:
cargo new --lib my-wasm-project
cd my-wasm-project
  1. Adding wasm-bindgen dependency to Cargo.toml:
[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2.84"
  1. Writing a simple Rust function exposed to JavaScript:
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}
  1. Building and packaging the Wasm module:
wasm-pack build --target web

Getting Started

  1. Install Rust and wasm-pack:

    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
    cargo install wasm-pack
    
  2. Create a new Rust library project:

    cargo new --lib my-wasm-project
    cd my-wasm-project
    
  3. Add wasm-bindgen to Cargo.toml and write your Rust code (see examples above).

  4. Build and package your Wasm module:

    wasm-pack build --target web
    
  5. Use the generated JavaScript module in your web project:

    import init, { add } from './pkg/my_wasm_project.js';
    
    async function run() {
      await init();
      console.log(add(2, 3)); // Output: 5
    }
    
    run();
    

Competitor Comparisons

CLI and Rust libraries for low-level manipulation of WebAssembly modules

Pros of wasm-tools

  • Broader scope: Provides a comprehensive suite of tools for WebAssembly, including parsing, validation, and transformation
  • Language-agnostic: Works with WebAssembly modules regardless of the source language
  • More actively maintained: Regular updates and contributions from the Bytecode Alliance community

Cons of wasm-tools

  • Steeper learning curve: Requires more in-depth knowledge of WebAssembly internals
  • Less focused on Rust-specific workflows: May require additional setup for Rust projects
  • Command-line oriented: Lacks some of the user-friendly features of wasm-pack

Code comparison

wasm-pack:

wasm-pack build
wasm-pack test
wasm-pack publish

wasm-tools:

wasm-tools validate module.wasm
wasm-tools print module.wasm
wasm-tools transform module.wasm --output transformed.wasm

wasm-pack is primarily designed for Rust developers working with WebAssembly, offering a streamlined workflow for building, testing, and publishing Rust-generated WebAssembly modules. It provides a higher-level abstraction and integrates well with the Rust ecosystem.

wasm-tools, on the other hand, offers a more versatile set of low-level tools for working with WebAssembly modules, regardless of their origin. It's better suited for advanced WebAssembly manipulation and analysis but may require more setup for specific language workflows.

18,623

🚀 The leading Wasm Runtime supporting WASIX, WASI and Emscripten

Pros of Wasmer

  • Broader language support: Wasmer can run WebAssembly modules compiled from various languages, not just Rust
  • Runtime flexibility: Offers multiple runtime options (JIT, native, LLVM) for different performance needs
  • Standalone runtime: Can be used as a standalone WebAssembly runtime, not tied to web browsers

Cons of Wasmer

  • Steeper learning curve: More complex to set up and use compared to wasm-pack's streamlined workflow
  • Less web-focused: Not specifically optimized for web-based WebAssembly usage like wasm-pack
  • Larger footprint: Generally requires more resources due to its broader feature set

Code Comparison

wasm-pack:

wasm_bindgen_test_configure!(run_in_browser);

#[wasm_bindgen_test]
fn pass() {
    assert_eq!(1 + 1, 2);
}

Wasmer:

use wasmer::{Store, Module, Instance};

let module = Module::from_file(&store, "path/to/module.wasm")?;
let instance = Instance::new(&module, &imports)?;
let result = instance.exports.get_function("sum")?.call(&[1.into(), 2.into()])?;

The code snippets demonstrate the different focus areas: wasm-pack is geared towards testing Rust-generated WebAssembly in browsers, while Wasmer provides a more general-purpose WebAssembly runtime environment.

15,263

A fast and secure runtime for WebAssembly

Pros of Wasmtime

  • Broader scope: Wasmtime is a general-purpose WebAssembly runtime, supporting various languages and use cases
  • Performance: Optimized for speed and efficiency, making it suitable for production environments
  • Standalone execution: Can run WebAssembly modules directly without a browser

Cons of Wasmtime

  • Steeper learning curve: Requires more in-depth knowledge of WebAssembly concepts
  • Less focused on Rust integration: While it supports Rust, it's not specifically tailored for Rust-to-WebAssembly workflows

Code Comparison

Wasm-pack (Rust to WebAssembly):

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

Wasmtime (Running WebAssembly):

let engine = Engine::default();
let module = Module::from_file(&engine, "add.wasm")?;
let instance = Instance::new(&mut store, &module, &[])?;
let add = instance.get_func(&mut store, "add")?;
let result = add.call(&mut store, &[Val::I32(1), Val::I32(2)])?;

This comparison highlights the different focus areas of the two projects. Wasm-pack simplifies the process of compiling Rust to WebAssembly, while Wasmtime provides a runtime environment for executing WebAssembly modules from various sources.

Emscripten: An LLVM-to-WebAssembly Compiler

Pros of Emscripten

  • Supports multiple languages (C, C++, and others) for WebAssembly compilation
  • Provides a more complete runtime environment, including system libraries
  • Has a longer history and wider adoption in the WebAssembly ecosystem

Cons of Emscripten

  • Larger output size due to included runtime and libraries
  • Steeper learning curve, especially for developers not familiar with C/C++
  • Can be slower to compile compared to Rust-based alternatives

Code Comparison

Emscripten (C++):

#include <emscripten.h>
#include <iostream>

EMSCRIPTEN_KEEPALIVE
extern "C" int add(int a, int b) {
    return a + b;
}

wasm-pack (Rust):

use wasm_bindgen::prelude::*;

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

Both examples show a simple addition function exposed to JavaScript. Emscripten requires explicit use of EMSCRIPTEN_KEEPALIVE and extern "C", while wasm-pack uses the #[wasm_bindgen] attribute for similar functionality.

A TypeScript-like language for WebAssembly.

Pros of AssemblyScript

  • Easier learning curve for JavaScript developers
  • Supports a subset of TypeScript syntax
  • Smaller runtime footprint compared to Rust-generated WebAssembly

Cons of AssemblyScript

  • Less mature ecosystem and tooling compared to Rust
  • Limited access to low-level system features
  • Potentially lower performance in certain scenarios

Code Comparison

AssemblyScript:

export function add(a: i32, b: i32): i32 {
  return a + b;
}

wasm-pack (Rust):

#[no_mangle]
pub extern "C" fn add(a: i32, b: i32) -> i32 {
    a + b
}

Summary

AssemblyScript offers a more familiar syntax for JavaScript developers and a smaller runtime footprint, making it easier to adopt for web developers. However, wasm-pack with Rust provides a more mature ecosystem, better performance in certain scenarios, and access to low-level system features. The choice between the two depends on the project requirements, developer expertise, and performance needs.

Optimizer and compiler/toolchain library for WebAssembly

Pros of binaryen

  • More versatile: Can be used for various WebAssembly-related tasks beyond just packaging
  • Supports multiple input languages: Can work with C, C++, and other languages that compile to WebAssembly
  • Provides optimization tools: Includes a suite of WebAssembly optimization passes

Cons of binaryen

  • Steeper learning curve: Requires more in-depth knowledge of WebAssembly internals
  • Less Rust-specific: Doesn't provide tailored support for Rust-to-WebAssembly workflows
  • Manual configuration: Often requires more manual setup and configuration

Code Comparison

binaryen (C++ example):

#include <binaryen-c.h>

BinaryenModuleRef module = BinaryenModuleCreate();
BinaryenType params[] = {BinaryenTypeInt32(), BinaryenTypeInt32()};
BinaryenFunctionTypeRef functionType = BinaryenAddFunctionType(module, "adder", BinaryenTypeInt32(), params, 2);

wasm-pack (Rust example):

use wasm_bindgen::prelude::*;

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

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

📦✨ wasm-pack

Your favorite Rust → Wasm workflow tool!

Build Status crates.io

Docs | Contributing | Chat

Built with 🦀🕸 by The Rust and WebAssembly Working Group

About

This tool seeks to be a one-stop shop for building and working with rust- generated WebAssembly that you would like to interop with JavaScript, in the browser or with Node.js. wasm-pack helps you build rust-generated WebAssembly packages that you could publish to the npm registry, or otherwise use alongside any javascript packages in workflows that you already use, such as webpack.

This project is a part of the rust-wasm group. You can find more info by visiting that repo!

demo

🔮 Prerequisites

This project requires Rust 1.30.0 or later.

⚡ Quickstart Guide

Visit the quickstart guide in our documentation.

🎙️ Commands

  • new: Generate a new RustWasm project using a template
  • build: Generate an npm wasm pkg from a rustwasm crate
  • test: Run browser tests
  • pack and publish: Create a tarball of your rustwasm pkg and/or publish to a registry

📝 Logging

wasm-pack uses env_logger to produce logs when wasm-pack runs.

To configure your log level, use the RUST_LOG environment variable. For example:

RUST_LOG=info wasm-pack build

👯 Contributing

Read our guide on getting up and running for developing wasm-pack, and check out our contribution policy.

🤹‍♀️ Governance

This project is part of the rustwasm Working Group.

This project was started by ashleygwilliams and is maintained by drager and the Rust Wasm Working Group Core Team.

NPM DownloadsLast 30 Days