https://github.com/andrewbaxter/rooting

Associate data with HTML elements in WASM
https://github.com/andrewbaxter/rooting

Last synced: about 23 hours ago
JSON representation

Associate data with HTML elements in WASM

• Host: GitHub
• URL: https://github.com/andrewbaxter/rooting
• Owner: andrewbaxter
• License: isc
• Created: 2023-08-08T17:28:54.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-06-02T18:33:25.000Z (6 months ago)
• Last Synced: 2024-08-09T16:35:52.948Z (3 months ago)
• Language: Rust
• Size: 24.4 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license.txt

Awesome Lists containing this project

README

        
This is a library for managing lifetimes of data associated with DOM elements in WASM. This is useful because `wasm-bindgen`/`web_sys` tie lifetimes to Rust scope rather than JS garbage collection - but even if they did (with new browser GC features) tying state to elements like this produces tightly bound lifetimes which, depending on your use case, can make reasoning about state simpler when using GC.

This is for an a la carte UI solution, rather than using a framework which would typically take care of this for you.

The core object in this library is `El` which represents a DOM element and the lifetime-associated data. `El` acts as a replacement for the corresponding `web_sys` element types, with most common methods for mutation exposed. If you need to access the underlying element, you can do so with `.raw()`.

Attach data to an `El` with the `e.own(|e| some_data)` method. The returned data will be dropped when the element is (when removed from the tree, if no other references exist).

# Example

```

pub fn main() {

    set_root(vec![

        el("button").text("Click me baby").on("click", |_| console_dbg!("Clicked"))

    ]);

}

```

In this example, the callback lifetime is bound to the button's lifetime, and will be detached when the button is removed from the root (although that never happens in this example).

# Links

- [rooting-form](https://github.com/andrewbaxter/rooting-form) - derive macro to generate a form from a struct, with validation and error messages.