https://github.com/lukethacoder/wasm-web-components-playground
🦀 Building Web Components using Rust (WASM) - no JS here
https://github.com/lukethacoder/wasm-web-components-playground
rust wasm web-components
Last synced: 3 months ago
JSON representation
🦀 Building Web Components using Rust (WASM) - no JS here
- Host: GitHub
- URL: https://github.com/lukethacoder/wasm-web-components-playground
- Owner: lukethacoder
- License: gpl-3.0
- Created: 2024-01-26T04:56:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-27T05:44:30.000Z (over 1 year ago)
- Last Synced: 2025-02-14T05:26:06.967Z (5 months ago)
- Topics: rust, wasm, web-components
- Language: Rust
- Homepage:
- Size: 26.4 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
wasm-web-components
playing around with building Web Components in Rust (via WASM)
## Installation
Make sure you have [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/) installed.
Install Dependencies
```
cargo build
```
## Adding New Components
We are using Workspaces, so you can add a new component by running:
```
cargo new components/NAME_OF_COMPONENT --lib
```
Make sure to add this snippet to the `Cargo.toml` file for each new component setup.
```toml
[lib]
crate-type = ["cdylib", "rlib"]
[dependencies]
custom-elements = { workspace = true }
wasm-bindgen.workspace = true
web-sys = { version = "0.3", features = [
"Window",
"Document",
"HtmlElement",
"Node",
"Text"
]}
```
## Build
To build your web components (before running the dev server), run:
> NOTE: each component has its own build command. It might be smart to write a script that builds all of the components in one go?
```
wasm-pack build --target=web --out-dir '../../pkg/NAME_OF_COMPONENT' components/NAME_OF_COMPONENT
```
## Development Server
Install [microserver](https://crates.io/crates/microserver) and then run it from the root of the project.
```
microserver -a 127.0.0.1 -p 3000
```
This will serve up the `index.html` file at [localhost:3000](http://localhost:3000)
> NOTE: you can use any other tool to serve up the `index.html` file locally