|
1 | | -# javascript-library-in-rust-example |
| 1 | +# JavaScript Library in Rust Example |
| 2 | + |
| 3 | +A simple example demonstrating how to create a Rust library that can be used in JavaScript/TypeScript via WebAssembly (WASM), specifically designed for Deno. |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | +This project showcases: |
| 8 | +- Writing a Rust library with exported functions |
| 9 | +- Compiling Rust to WebAssembly using `wasm-pack` |
| 10 | +- Using the WASM module in Deno with TypeScript |
| 11 | + |
| 12 | +## Project Structure |
| 13 | + |
| 14 | +``` |
| 15 | +. |
| 16 | +├── Cargo.toml # Rust project configuration |
| 17 | +├── src/ |
| 18 | +│ └── lib.rs # Rust source code with exported functions |
| 19 | +├── pkg/ # Generated WASM package (after build) |
| 20 | +│ ├── javascript_library_in_rust_example.js |
| 21 | +│ ├── javascript_library_in_rust_example.d.ts |
| 22 | +│ └── javascript_library_in_rust_example_bg.wasm |
| 23 | +└── examples/ |
| 24 | + └── deno/ |
| 25 | + ├── deno.json # Deno configuration |
| 26 | + └── example.ts # Deno example using the WASM library |
| 27 | +``` |
| 28 | + |
| 29 | +## Prerequisites |
| 30 | + |
| 31 | +- [Rust](https://www.rust-lang.org/tools/install) (1.56 or later) |
| 32 | +- [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/) - Build tool for Rust WASM |
| 33 | +- [Deno](https://deno.land/) - JavaScript/TypeScript runtime |
| 34 | + |
| 35 | +### Installation |
| 36 | + |
| 37 | +```bash |
| 38 | +# Install Rust (if not already installed) |
| 39 | +curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh |
| 40 | + |
| 41 | +# Install wasm-pack |
| 42 | +cargo install wasm-pack |
| 43 | + |
| 44 | +# Install Deno |
| 45 | +curl -fsSL https://deno.land/x/install/install.sh | sh |
| 46 | +``` |
| 47 | + |
| 48 | +## Building the WASM Library |
| 49 | + |
| 50 | +Build the Rust library to WebAssembly: |
| 51 | + |
| 52 | +```bash |
| 53 | +wasm-pack build --target deno |
| 54 | +``` |
| 55 | + |
| 56 | +This will: |
| 57 | +1. Compile the Rust code to WebAssembly |
| 58 | +2. Generate JavaScript bindings |
| 59 | +3. Generate TypeScript definitions |
| 60 | +4. Place everything in the `pkg/` directory |
| 61 | + |
| 62 | +## Available Functions |
| 63 | + |
| 64 | +The library exports three simple functions: |
| 65 | + |
| 66 | +- `hello()`: Returns a "Hello, World!" message |
| 67 | +- `greet(name: string)`: Returns a personalized greeting |
| 68 | +- `add(a: number, b: number)`: Adds two numbers together |
| 69 | + |
| 70 | +## Running the Deno Example |
| 71 | + |
| 72 | +After building the WASM library, run the example: |
| 73 | + |
| 74 | +```bash |
| 75 | +cd examples/deno |
| 76 | +deno run --allow-read example.ts |
| 77 | +``` |
| 78 | + |
| 79 | +Or using the Deno task: |
| 80 | + |
| 81 | +```bash |
| 82 | +cd examples/deno |
| 83 | +deno task dev |
| 84 | +``` |
| 85 | + |
| 86 | +### Expected Output |
| 87 | + |
| 88 | +``` |
| 89 | +=== Rust WASM Library Demo in Deno === |
| 90 | +
|
| 91 | +1. Calling hello(): |
| 92 | + Hello, World from Rust WASM! |
| 93 | +
|
| 94 | +2. Calling greet('Deno'): |
| 95 | + Hello, Deno! Welcome to Rust WASM in Deno! |
| 96 | +
|
| 97 | +3. Calling add(5, 7): |
| 98 | + Result: 12 |
| 99 | +
|
| 100 | +4. More examples: |
| 101 | + greet('World') = Hello, World! Welcome to Rust WASM in Deno! |
| 102 | + add(10, 20) = 30 |
| 103 | + add(-5, 5) = 0 |
| 104 | +
|
| 105 | +✅ All examples completed successfully! |
| 106 | +``` |
| 107 | + |
| 108 | +## Development |
| 109 | + |
| 110 | +### Running Tests |
| 111 | + |
| 112 | +Test the Rust code: |
| 113 | + |
| 114 | +```bash |
| 115 | +cargo test |
| 116 | +``` |
| 117 | + |
| 118 | +### Modifying the Library |
| 119 | + |
| 120 | +1. Edit `src/lib.rs` to add or modify functions |
| 121 | +2. Rebuild with `wasm-pack build --target deno` |
| 122 | +3. The changes will be available in the `pkg/` directory |
| 123 | + |
| 124 | +## How It Works |
| 125 | + |
| 126 | +1. **Rust Code**: Functions in `src/lib.rs` are marked with `#[wasm_bindgen]` to export them to JavaScript |
| 127 | +2. **Compilation**: `wasm-pack` compiles Rust to WASM and generates JavaScript/TypeScript bindings |
| 128 | +3. **Import**: Deno imports the generated JavaScript module which loads and interfaces with the WASM binary |
| 129 | +4. **Execution**: JavaScript/TypeScript code can call the exported Rust functions naturally |
| 130 | + |
| 131 | +## TypeScript Support |
| 132 | + |
| 133 | +The generated package includes TypeScript definitions (`.d.ts` files), providing full type safety and IDE autocompletion when using the library in TypeScript. |
| 134 | + |
| 135 | +## License |
| 136 | + |
| 137 | +This is an example project for educational purposes. |
| 138 | + |
| 139 | +## Resources |
| 140 | + |
| 141 | +- [Rust and WebAssembly](https://rustwasm.github.io/docs/book/) |
| 142 | +- [wasm-bindgen Documentation](https://rustwasm.github.io/wasm-bindgen/) |
| 143 | +- [Deno Manual](https://deno.land/manual) |
| 144 | +- [WebAssembly](https://webassembly.org/) |
0 commit comments