Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jcbhmr/hello-world-wasm-pack-lib
🦀 Greeter demo using wasm-pack to create an npm package
https://github.com/jcbhmr/hello-world-wasm-pack-lib
javascript-bindings library rust typescript wasm wasm-bindgen wasm-pack webassembly
Last synced: 20 days ago
JSON representation
🦀 Greeter demo using wasm-pack to create an npm package
- Host: GitHub
- URL: https://github.com/jcbhmr/hello-world-wasm-pack-lib
- Owner: jcbhmr
- License: 0bsd
- Created: 2023-12-29T05:21:55.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-01-03T20:37:41.000Z (11 months ago)
- Last Synced: 2024-08-09T07:50:49.064Z (3 months ago)
- Topics: javascript-bindings, library, rust, typescript, wasm, wasm-bindgen, wasm-pack, webassembly
- Language: Rust
- Homepage: https://tsdocs.dev/docs/hello-world-wasm-pack-lib
- Size: 22.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# "Hello world!" wasm-pack library
🦀 Greeter demo using wasm-pack to create an npm package
```js
import { greet, Calculator } from "hello-world-wasm-pack-lib";greet("Alan Turing");
//=> 'Hello Alan Turing!'const calc = new Calculator();
calc.add(10);
console.log(calc.value);
//=> 10
calc.mult(20);
console.log(calc.value);
//=> 200
```🦀 Written in Rust! \
🟪 Compiled to WebAssembly \
🟨 Exposed to JavaScript \
🎉 Great way to see what wasm-pack can do \
👩⚖️ [0BSD licensed](./LICENSE) template## Installation
![npm](https://img.shields.io/static/v1?style=for-the-badge&message=npm&color=CB3837&logo=npm&logoColor=FFFFFF&label=)
![Yarn](https://img.shields.io/static/v1?style=for-the-badge&message=Yarn&color=2C8EBB&logo=Yarn&logoColor=FFFFFF&label=)
![pnpm](https://img.shields.io/static/v1?style=for-the-badge&message=pnpm&color=222222&logo=pnpm&logoColor=F69220&label=)
![Deno](https://img.shields.io/static/v1?style=for-the-badge&message=Deno&color=000000&logo=Deno&logoColor=FFFFFF&label=)
![Bun](https://img.shields.io/static/v1?style=for-the-badge&message=Bun&color=000000&logo=Bun&logoColor=FFFFFF&label=)
![jsDelivr](https://img.shields.io/static/v1?style=for-the-badge&message=jsDelivr&color=E84D3D&logo=jsDelivr&logoColor=FFFFFF&label=)You can install this package using your favorite npm package manager like npm,
[Yarn], [pnpm], or [Bun].```sh
npm install hello-world-wasm-pack-lib
```If you're using [Deno] you can import it straight from npm:
```js
import {} from "npm:hello-world-wasm-pack-lib";
```If you prefer to go buildless in the browser you can use an npm CDN like
[jsDelivr] or [esm.sh].```html
import {} from "https://esm.run/hello-world-wasm-pack-lib";
```
## Usage
![Node.js](https://img.shields.io/static/v1?style=for-the-badge&message=Node.js&color=339933&logo=Node.js&logoColor=FFFFFF&label=)
![Deno](https://img.shields.io/static/v1?style=for-the-badge&message=Deno&color=000000&logo=Deno&logoColor=FFFFFF&label=)
![Bun](https://img.shields.io/static/v1?style=for-the-badge&message=Bun&color=000000&logo=Bun&logoColor=FFFFFF&label=)
![Browser](https://img.shields.io/static/v1?style=for-the-badge&message=Browser&color=4285F4&logo=Google+Chrome&logoColor=FFFFFF&label=)You should be able to just import and use this JavaScript package like any
other. The WASM magic is hidden behind a really nice wrapper layer.```js
import { greet, Calculator, get_report } from "hello-world-wasm-pack-lib";greet("Alan Turing");
//=> 'Hello Alan Turing!'const report = get_report();
console.log(report);
//=> Report {
// dog_count: 5,
// bouncy_castles: 3,
// fun_percent: 76.8
// }
```[📚 You can find complete API documentation on the docs website](https://tsdocs.dev/docs/hello-world-wasm-pack-lib)
## Development
![Rust](https://img.shields.io/static/v1?style=for-the-badge&message=Rust&color=000000&logo=Rust&logoColor=FFFFFF&label=)
![WebAssembly](https://img.shields.io/static/v1?style=for-the-badge&message=WebAssembly&color=654FF0&logo=WebAssembly&logoColor=FFFFFF&label=)
![JavaScript](https://img.shields.io/static/v1?style=for-the-badge&message=JavaScript&color=222222&logo=JavaScript&logoColor=F7DF1E&label=)To build the JavaScript package just run `./just build`. Then you can `cd` into
the `pkg/` folder if you want and launch a REPL to try it out!```sh
./just build
cd pkg
node
```If you need to edit the `pkg.patch` file, you can do so via the below command.
It will create two folders: `a/` and `b/`. Edit anything in the `b/` folder and
a `.patch` will be generated against the `a/` folder and saved to `pkg.patch`.```sh
./just generate-patch
# Pauses while you make changes...
```[Yarn]: https://yarnpkg.com/
[pnpm]: https://pnpm.io/
[Bun]: https://bun.sh/
[Deno]: https://deno.com/
[jsDelivr]: https://www.jsdelivr.com/
[esm.sh]: https://esm.sh/