leptos-unique-ids

Leptos library to ensure globally unique DOM identifiers across an application. Use an attribute macro to generate unique ids and Dylint lints to prevent conflicts and ensuring global consistency across all ids.

Installation

[dependencies]
leptos-unique-ids = "0.1"
leptos = "*"

Usage

Create a module in your Leptos application to manage unique identifiers. It must expose an enum with the name Ids and the #[leptos_unique_ids] attribute macro applied to it.

// ids/src/lib.rs
use leptos_unique_ids::leptos_unique_ids;

#[leptos_unique_ids(
    "language-selector",
    "preview-download-svg-button",
    "preview-upload-svg-button",
)]
pub enum Ids {}

Then, in your components, you can use the Ids enum to generate unique identifiers.

use ids::Ids;

let id: &'static str = Ids::LanguageSelector.as_str();
let id: &'static str = Ids::PreviewDownloadSvgButton.into();

By default implements Leptos' IntoAttributeValue trait for the Ids enum, allowing you to use the identifiers as HTML attributes directly.

use ids::Ids;

view! {
    <div id=Ids::LanguageSelector>
        ...
    </div>
}

Linting

To ensure that your code adheres to the unique identifiers convention, use the Dylint lints provided by leptos-unique-ids.

First, install Dylint if you haven't already with

cargo install cargo-dylint dylint-link

and then, configure the lints in your workspace Cargo.toml.

[workspace.metadata.dylint]
libraries = [
  {
    git = "https://github.com/mondeja/leptos-unique-ids",
    tag = "v0.1.1",
    pattern = "lints"
  }
]

Now, when you run cargo dylint, it will check your code for any violations of the unique identifiers convention. For example, the next code snippet

view! {
    <div id="my-identifier">Hello, world!</div>
}

will throw a warning like

warning: literal string passed as id attribute value
   --> your/file.rs:10:17
   |
LL |         <div id="my-identifier">Hello, world!</div>
   |                 ^^^^^^^^^^^^^^^
   |
   = help: for further information visit https://github.com/mondeja/leptos-unique-ids/tree/main/lints/literal_as_id_attribute_value#readme
   = note: `#[warn(literal_as_id_attribute_value)]` on by default

warning: 1 warning emitted

or the code snippet

let foo = "my-identifier";

view! {
    <div id=foo>Hello, world!</div>
}

will throw a warning like

warning: token tree that is not `Ids` enum passed as id attribute value
   --> your/file.rs:10:17
   |
LL |         <div id=foo>Hello, world!</div>
   |                 ^^^
   |
   = help: for further information visit https://github.com/mondeja/leptos-unique-ids/tree/main/lints/tt_as_id_attribute_value#readme
   = note: `#[warn(tt_as_id_attribute_value)]` on by default

They will force you to use the Ids enum instead, like this:

use ids::Ids;

view! {
   <div id=Ids::MyIdentifier>Hello, world!</div>
}

Lints

Features

• into-str (enabled by default): Implements the Into<&'static str> trait for the Ids enum.
• into-attribute-value (enabled by default): Implements the Leptos' IntoAttributeValue trait in Ids enum, allowing to use the identifiers as HTML attributes directly. Require inclusion of leptos dependency in your consumer crate.