### TypeScript Configuration for Path Aliases (tsconfig.json)

Source: https://context7.com/im-neiru/rsbuild-plugin-wasmpack/llms.txt

Manual configuration example for tsconfig.json, demonstrating how to set up path aliases. The rsbuild-plugin-wasmpack automatically updates this file, but this serves as a reference for manual setup. It includes compiler options for module resolution and path mapping.

```json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@pkgs/*": ["./pkgs/*"]
    }
  },
  "include": ["src/**/*", "pkgs/**/*"]
}

```

--------------------------------

### Rust Crate Setup for WasmPack (lib.rs)

Source: https://context7.com/im-neiru/rsbuild-plugin-wasmpack/llms.txt

Example Rust source code structure for a wasm-pack compatible crate. It utilizes wasm-bindgen for JavaScript interoperability, exporting functions and structs to be used in a web environment. Dependencies include wasm-bindgen and optionally console_error_panic_hook for debugging.

```rust
// rust/my-crate/src/lib.rs
mod utils;

use wasm_bindgen::prelude::*;

// Import JavaScript functions
#[wasm_bindgen] extern "C" {
    fn alert(s: &str);

    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// Export Rust functions to JavaScript
#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

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

#[wasm_bindgen]
pub fn process_data(data: &[u8]) -> Vec<u8> {
    // Process binary data and return result
    data.iter().map(|x| x.wrapping_add(1)).collect()
}

// Struct with methods
#[wasm_bindgen]
pub struct Counter {
    count: i32,
}

#[wasm_bindgen]
impl Counter {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Counter {
        Counter { count: 0 }
    }

    pub fn increment(&mut self) {
        self.count += 1;
    }

    pub fn get(&self) -> i32 {
        self.count
    }
}

```

--------------------------------

### Rust Crate Configuration Example

Source: https://github.com/im-neiru/rsbuild-plugin-wasmpack/blob/main/README.md

Defines how Rust crates are compiled into WebAssembly. Includes options for path, target, build profiles, features, and live reloading.

```javascript
{
  "crates": [
    {
      "path": "./path/to/your/rust/crate",
      "target": "web",
      "profileOnDev": "dev",
      "profileOnProd": "release",
      "features": ["serde", "simd"],
      "defaultFeatures": true,
      "liveReload": true
    }
  ]
}
```

--------------------------------

### Install rsbuild-plugin-wasmpack with bun

Source: https://github.com/im-neiru/rsbuild-plugin-wasmpack/blob/main/README.md

Installs the rsbuild-plugin-wasmpack package as a development dependency using bun.

```bash
bun add -d rsbuild-plugin-wasmpack
```

--------------------------------

### Install rsbuild-plugin-wasmpack with pnpm

Source: https://github.com/im-neiru/rsbuild-plugin-wasmpack/blob/main/README.md

Installs the rsbuild-plugin-wasmpack package as a development dependency using pnpm.

```bash
pnpm add -D rsbuild-plugin-wasmpack
```

--------------------------------

### Rsbuild Plugin WasmPack Configuration with Rust Toolchain Options

Source: https://context7.com/im-neiru/rsbuild-plugin-wasmpack/llms.txt

Configuration for the rsbuild-plugin-wasmpack, enabling automatic Rust toolchain installation. It specifies the path to the Rust crate, the target platform ('web'), and detailed options for the Rust toolchain, including default toolchain version, installation profile, components, and target architectures.

```typescript
import { defineConfig } from "@rsbuild/core";
import { pluginWasmPack } from "rsbuild-plugin-wasmpack";

export default defineConfig({
  plugins: [
    pluginWasmPack({
      crates: [{ path: "rust/my-crate", target: "web" }],

      autoInstallRust: true,
      rustToolchainOptions: {
        // Toolchain version: "stable", "beta", "nightly", or "none"
        defaultToolchain: "stable",

        // Installation profile
        // "minimal": rustc, cargo only
        // "default": includes rustfmt, clippy
        // "complete": all components
        profile: "minimal",

        // Additional components to install
        components: [
          "rustfmt",           // Code formatter
          "clippy",            // Linter
          "rust-docs",         // Documentation
          "llvm-tools-preview" // LLVM tools
        ],

        // Target architectures
        targets: [
          "wasm32-unknown-unknown",      // Required for Wasm
          "x86_64-pc-windows-gnu",       // Windows cross-compile
          "aarch64-apple-darwin",        // Apple Silicon
          "armv7-unknown-linux-gnueabihf" // ARM Linux
        ],
      },
    }),
  ],
});

```

--------------------------------

### Install rsbuild-plugin-wasmpack with npm

Source: https://github.com/im-neiru/rsbuild-plugin-wasmpack/blob/main/README.md

Installs the rsbuild-plugin-wasmpack package as a development dependency using npm.

```bash
npm install --save-dev rsbuild-plugin-wasmpack
```

--------------------------------

### Install wasm-pack prerequisite

Source: https://github.com/im-neiru/rsbuild-plugin-wasmpack/blob/main/README.md

Installs the wasm-pack tool, a prerequisite for compiling Rust crates to WebAssembly, using the cargo package manager.

```bash
cargo install wasm-pack
```

--------------------------------

### Application Entry Point (src/index.ts) with Wasm Module Imports

Source: https://context7.com/im-neiru/rsbuild-plugin-wasmpack/llms.txt

Example of an application entry point file (src/index.ts) that imports and utilizes WebAssembly modules generated by the wasm-pack plugin. It demonstrates asynchronous loading of Wasm modules and calling exported functions and methods from Rust.

```typescript
// src/index.ts - Application entry point
import initMyCrate from "@pkgs/my-crate";
import initCryptoLib from "@pkgs/crypto-lib";

async function bootstrap() {
  const [core, crypto] = await Promise.all([
    initMyCrate(),
    initCryptoLib(),
  ]);

  // Use Wasm modules
  core.greet("Developer");

  const counter = new core.Counter();
  counter.increment();
  console.log("Count:", counter.get());

  const encrypted = crypto.encrypt("secret data", "password");
  console.log("Encrypted:", encrypted);
}

bootstrap();

```

--------------------------------

### Install rsbuild-plugin-wasmpack with yarn

Source: https://github.com/im-neiru/rsbuild-plugin-wasmpack/blob/main/README.md

Installs the rsbuild-plugin-wasmpack package as a development dependency using yarn.

```bash
yarn add -D rsbuild-plugin-wasmpack
```

--------------------------------

### TypeScript Path Alias Example for Wasm Packages

Source: https://github.com/im-neiru/rsbuild-plugin-wasmpack/blob/main/README.md

Illustrates the tsconfig.json modification for aliasing the Wasm package directory. This allows importing Wasm modules using a shorthand path.

```json
{
  "compilerOptions": {
    "paths": {
      "@pkgs/*": ["./pkgs/*"]
    }
  }
}
```

--------------------------------

### Cargo.toml Configuration for WasmPack

Source: https://context7.com/im-neiru/rsbuild-plugin-wasmpack/llms.txt

Required Cargo.toml setup for a wasm-pack compatible Rust crate. It specifies the crate type as 'cdylib' and 'rlib', includes 'wasm-bindgen' as a dependency, and optionally enables 'console_error_panic_hook' for debugging. Release profile is optimized for size.

```toml
# rust/my-crate/Cargo.toml
[package]
name = "my-crate"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2"

# Optional: Enable console_error_panic_hook for better debugging
console_error_panic_hook = { version = "0.1", optional = true }

[features]
default = ["console_error_panic_hook"]

[profile.release]
opt-level = "s"      # Optimize for size
lto = true           # Enable link-time optimization

```

--------------------------------

### Configure rsbuild-plugin-wasmpack with Rust Crates

Source: https://context7.com/im-neiru/rsbuild-plugin-wasmpack/llms.txt

Configures the wasm-pack plugin for Rsbuild, specifying Rust crates to compile, build targets, profiles, features, and toolchain management. It supports automatic installation of wasm-pack and Rust toolchains.

```typescript
import { defineConfig } from "@rsbuild/core";
import { pluginWasmPack } from "rsbuild-plugin-wasmpack";

export default defineConfig({
  plugins: [
    pluginWasmPack({
      // Required: Array of Rust crates to compile
      crates: [
        {
          path: "rust/my-crate",           // Path to Cargo.toml directory
          target: "web",                    // "web" | "nodejs" | "deno"
          profileOnDev: "dev",              // Build profile for development
          profileOnProd: "release",         // Build profile for production
          features: ["serde", "simd"],      // Cargo features to enable
          defaultFeatures: true,            // Enable default Cargo features
          liveReload: true,                 // Enable hot reload on file changes
          stripWasm: ["release"],           // Strip debug info for these profiles
        },
      ],

      // Optional: Custom path to wasm-pack binary
      wasmpackPath: "~/.cargo/bin/wasm-pack",

      // Optional: Output directory for compiled packages (default: "pkgs")
      pkgsDir: "pkgs",

      // Optional: Create @pkgs/* import alias (default: true)
      aliasPkgDir: true,

      // Optional: Auto-install wasm-pack if missing
      autoInstallWasmPack: true,

      // Optional: Auto-install Rust toolchain if missing
      autoInstallRust: true,
      rustToolchainOptions: {
        defaultToolchain: "stable",           // "stable" | "beta" | "nightly" | "none"
        profile: "minimal",                   // "default" | "minimal" | "complete"
        components: ["clippy", "rustfmt"],    // Additional components
        targets: ["wasm32-unknown-unknown"],  // Target architectures
      },
    }),
  ],
});

```

--------------------------------

### rsbuild-plugin-wasmpack Configuration Options

Source: https://github.com/im-neiru/rsbuild-plugin-wasmpack/blob/main/README.md

This section details the configuration options available for the rsbuild-plugin-wasmpack, covering crate definitions, wasm-pack settings, output directories, and build profile customization.

```APIDOC
## rsbuild-plugin-wasmpack Configuration

This plugin allows you to integrate Rust crates compiled to WebAssembly into your rsbuild projects.

### Configuration Options

#### `crates` (required)

An array of objects, where each object represents a Rust crate to be compiled.

- **`path`** (string) - Required - The file system path to the Rust crate or project (typically the directory containing `Cargo.toml`).
- **`target`** (string: "web" | "nodejs" | "deno") - Required - The WebAssembly target architecture.
- **`profileOnDev`** (string: "dev" | "profiling" | "release") - Optional - The build profile to use during development. Defaults to `"dev"`.
- **`profileOnProd`** (string: "dev" | "profiling" | "release") - Optional - The build profile to use during production builds. Defaults to `"release"`.
- **`features`** (array of strings) - Optional - A list of Cargo features to enable (e.g., `["serde", "simd"]`).
- **`defaultFeatures`** (boolean) - Optional - Controls whether default Cargo features are enabled. If `false`, `--no-default-features` is used. Defaults to `true`.
- **`liveReload`** (boolean) - Optional - If `true`, changes to source files trigger automatic rebuilds and page reloads. Defaults to `true`.
- **`stripWasm`** (array of strings) - Optional - Specifies profiles for which the output `.wasm` binary should be stripped using `wabt` (e.g., `["release"]`).

#### `wasmpackPath` (optional)

- **`wasmpackPath`** (string) - An optional custom path to the `wasm-pack` binary. Defaults to `~/.cargo/bin/wasm-pack`.

#### `pkgsDir` (optional)

- **`pkgsDir`** (string) - The directory where compiled Wasm output will be placed. Defaults to `"pkgs"`.

#### `aliasPkgDir` (optional)

- **`aliasPkgDir`** (boolean) - If enabled (`true` by default), the plugin creates an alias mapping `@pkgs` to `pkgsDir` and attempts to update `tsconfig.json` with the corresponding path mapping. Manual verification might be needed.

#### `autoInstallWasmPack` (optional)

- **`autoInstallWasmPack`** (boolean) - If `true`, the plugin attempts to install `wasm-pack` via Cargo if it's not found.

#### `autoInstallRust` (optional)

- **`autoInstallRust`** (object) - Configuration for handling the Rust toolchain.

### Example Configuration

```javascript
{
  "plugins": [
    {
      "name": "@rsbuild/plugin-wasmpack",
      "options": {
        "crates": [
          {
            "path": "./rust/my-wasm-lib",
            "target": "web",
            "profileOnDev": "dev",
            "profileOnProd": "release",
            "features": ["serde", "wasm-bindgen"],
            "defaultFeatures": true,
            "liveReload": true,
            "stripWasm": ["release"]
          }
        ],
        "wasmpackPath": "/usr/local/bin/wasm-pack",
        "pkgsDir": "./dist/wasm",
        "aliasPkgDir": true,
        "autoInstallWasmPack": true,
        "autoInstallRust": {
          // ... rust toolchain configuration ...
        }
      }
    }
  ]
}
```
```

--------------------------------

### Configure Rust Crate Targets for wasm-pack Plugin

Source: https://context7.com/im-neiru/rsbuild-plugin-wasmpack/llms.txt

Defines various Rust crate configurations for the wasm-pack plugin, showcasing different targets (web, nodejs, deno), custom build profiles, feature flags, and stripping options for Wasm binaries.

```typescript
import { defineConfig } from "@rsbuild/core";
import { pluginWasmPack } from "rsbuild-plugin-wasmpack";

export default defineConfig({
  plugins: [
    pluginWasmPack({
      crates: [
        // Basic web target crate
        {
          path: "rust/core-lib",
          target: "web",
        },

        // Node.js target with custom profiles
        {
          path: "rust/server-utils",
          target: "nodejs",
          profileOnDev: "dev",
          profileOnProd: "release",
        },

        // Feature-rich crate with stripping
        {
          path: "rust/crypto-lib",
          target: "web",
          features: ["aes", "sha256"],
          defaultFeatures: false,
          stripWasm: ["release", "profiling"],
          liveReload: false,  // Disable for stable dependency
        },

        // Deno target
        {
          path: "rust/deno-bindings",
          target: "deno",
          profileOnProd: "profiling",
        },
      ],
    }),
  ],
});

```

--------------------------------

### Import and Use Compiled Wasm Modules in TypeScript

Source: https://context7.com/im-neiru/rsbuild-plugin-wasmpack/llms.txt

Demonstrates how to import and initialize compiled WebAssembly modules from Rust crates within a TypeScript project using the `@pkgs/*` alias provided by rsbuild-plugin-wasmpack. It shows asynchronous initialization and calling exported Rust functions.

```typescript
// Import Wasm modules using the @pkgs alias
import initMyCrate from "@pkgs/my-crate";
import initCryptoLib from "@pkgs/crypto-lib";
import initServerUtils from "@pkgs/server-utils";

// Initialize and use Wasm modules
async function main() {
  // Initialize the Wasm module
  const myCrate = await initMyCrate();

  // Call exported Rust functions
  myCrate.greet("World");

  // Use with async/await pattern
  const crypto = await initCryptoLib();
  const hash = crypto.sha256("Hello, Wasm!");
  console.log("SHA256:", hash);

  // Multiple modules can be initialized in parallel
  const [crate1, crate2] = await Promise.all([
    initMyCrate(),
    initCryptoLib(),
  ]);

  crate1.process(crate2.generateKey());
}

main().catch(console.error);

```

--------------------------------

### Import compiled Rust modules in TypeScript

Source: https://github.com/im-neiru/rsbuild-plugin-wasmpack/blob/main/README.md

Demonstrates how to import and use functions from compiled Rust WebAssembly modules within a TypeScript project. This assumes `aliasPkgDir` is enabled in the plugin configuration.

```typescript
import initializeRust1 from "@pkgs/rust1"; // Maps to pkgs/rust1 based on pkgsDir and aliasPkgDir
import initializeRust2 from "@pkgs/rust2";

// 🔔 Note: This import alias only works if `aliasPkgDir` is enabled.
// If disabled, you must import from the actual relative path (e.g., "../pkgs/rust1").

initializeRust1().then((rust1) => {
  rust1.greet("World1");
});

initializeRust2().then((rust2) => {
  rust2.greet("World2");
});
```

--------------------------------

### Configure Rsbuild with wasm-pack plugin

Source: https://github.com/im-neiru/rsbuild-plugin-wasmpack/blob/main/README.md

Configures Rsbuild to use the wasm-pack plugin, specifying Rust crates to compile into WebAssembly. It includes options for target, live reloading, build profiles, features, and toolchain management.

```typescript
import { defineConfig } from "@rsbuild/core";
import { pluginWasmPack } from "rsbuild-plugin-wasmpack";

export default defineConfig({
  plugins: [
    pluginWasmPack({
      crates: [
        {
          path: "crate1",
          target: "web",
          liveReload: false // Optional if false disable liveReload (defaults to true).
        },
        {
          path: "crate2",
          target: "web",
          profileOnDev: "profiling",
          profileOnProd: "release",
        },
        {
          path: "crate3",
          target: "web",
          features: ["serde"], // Optional (defaults to none)
          defaultFeatures: false // Optional (defaults to true)
        },
      ],
      wasmpackPath: "~/.cargo/bin/wasm-pack", // Optional (this can be loaded from envfile)
      pkgsDir: "pkgs", // Optional (default is "pkgs")
      aliasPkgDir: true, // Optional (default is true)
      autoInstallWasmPack: true, // Optional

      // Optional Rust auto-install setup
      autoInstallRust: true,
      rustToolchainOptions: {
        defaultToolchain: "stable",
        profile: "minimal",
        components: ["clippy"],
        targets: ["wasm32-unknown-unknown"],
      },
    }),
  ],
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.