sycamore-rs / sycamore

A library for creating reactive web apps in Rust and WebAssembly
https://sycamore-rs.netlify.app
MIT License
2.79k stars 148 forks source link

Add unique ID generation hook #565

Closed wingertge closed 1 year ago

wingertge commented 1 year ago

This adds a way to generate IDs that are stable across the hydration boundary. If a hydration context is not available, it will fall back to a globally incremented ID. This is useful for generating ids for accessible components and similar uses that require a stable globally unique ID.

Example use case

let (component_id, id) = create_unique_id();
view! { cx,
    div(aria-labelledby = format!("{}_{id}", component_id.unwrap_or_default())) {
        // children
    }
}

The format boilerplate would likely be abstracted into a custom hook specific to the application, this just provides the primitive so the IDs are guaranteed to be globally unique.

codecov[bot] commented 1 year ago

Codecov Report

Base: 60.52% // Head: 60.80% // Increases project coverage by +0.27% :tada:

Coverage data is based on head (34b5a7b) compared to base (6cecd1a). Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## master #565 +/- ## ========================================== + Coverage 60.52% 60.80% +0.27% ========================================== Files 55 56 +1 Lines 9299 9345 +46 ========================================== + Hits 5628 5682 +54 + Misses 3671 3663 -8 ``` | [Impacted Files](https://codecov.io/gh/sycamore-rs/sycamore/pull/565?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sycamore-rs) | Coverage Δ | | |---|---|---| | [packages/sycamore-core/src/lib.rs](https://codecov.io/gh/sycamore-rs/sycamore/pull/565?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sycamore-rs#diff-cGFja2FnZXMvc3ljYW1vcmUtY29yZS9zcmMvbGliLnJz) | `100.00% <ø> (ø)` | | | [packages/sycamore/src/lib.rs](https://codecov.io/gh/sycamore-rs/sycamore/pull/565?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sycamore-rs#diff-cGFja2FnZXMvc3ljYW1vcmUvc3JjL2xpYi5ycw==) | `100.00% <ø> (ø)` | | | [packages/sycamore-core/src/stable\_id.rs](https://codecov.io/gh/sycamore-rs/sycamore/pull/565?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sycamore-rs#diff-cGFja2FnZXMvc3ljYW1vcmUtY29yZS9zcmMvc3RhYmxlX2lkLnJz) | `100.00% <100.00%> (ø)` | | | [packages/sycamore-core/src/hydrate.rs](https://codecov.io/gh/sycamore-rs/sycamore/pull/565?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sycamore-rs#diff-cGFja2FnZXMvc3ljYW1vcmUtY29yZS9zcmMvaHlkcmF0ZS5ycw==) | `93.26% <0.00%> (+7.69%)` | :arrow_up: | Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sycamore-rs). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sycamore-rs)

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

wingertge commented 1 year ago

The clippy errors aren't me, they're in files unrelated to this commit

lukechu10 commented 1 year ago

Thanks! I'm refactoring how the hydration system works in #559 but I'll merge this and I'll reimplement it in that other PR with the new hydration system.