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: 13 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 (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-03T20:37:41.000Z (about 1 year ago)
- Last Synced: 2024-12-14T17:43:58.301Z (2 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





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



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


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/