leptos-unique-ids

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

leptos-unique-ids

★ 9 Open GitHub ↗

Ensure globally unique DOM identifiers across a Leptos app

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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.

[![Crates.io](https://img.shields.io/crates/v/leptos-unique-ids?logo=rust)](https://crates.io/crates/leptos-unique-ids)
[![License](https://img.shields.io/crates/l/leptos-unique-ids?logo=mit)](https://github.com/mondeja/leptos-unique-ids/blob/master/LICENSE)
[![Tests](https://img.shields.io/github/actions/workflow/status/mondeja/leptos-unique-ids/ci.yml?label=tests&logo=github)](https://github.com/mondeja/leptos-unique-ids/actions)
[![docs.rs](https://img.shields.io/docsrs/leptos-unique-ids?logo=docs.rs)](https://docs.rs/leptos-unique-ids)
[![Crates.io downloads](https://img.shields.io/crates/d/leptos-unique-ids)](https://crates.io/crates/leptos-unique-ids)

## Installation

```toml
[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.

```rust
// 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.

```rust
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.

```rust
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

```bash
cargo install cargo-dylint dylint-link
```

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

```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

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

will throw a warning like

```sh
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

```rust
let foo = "my-identifier";

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

will throw a warning like

```sh
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:

```rust
use ids::Ids;

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

#### Lints

| Rule | Description |
| --- | --- |
| [`literal_as_id_attribute_value`] | Check for literals passed to id attribute values. |
| [`tt_as_id_attribute_value`] | Check for token trees passed as id attribute values (except for `Ids` enum variants). |

[`literal_as_id_attribute_value`]: https://github.com/mondeja/leptos-unique-ids/tree/main/lints/literal_as_id_attribute_value#readme
[`tt_as_id_attribute_value`]: https://github.com/mondeja/leptos-unique-ids/tree/main/lints/tt_as_id_attribute_value#readme

## 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.

[Leptos]: https://leptos.dev
[Dylint]: https://github.com/trailofbits/dylint
[Leptos' `IntoAttributeValue` trait]: https://docs.rs/leptos/latest/leptos/attr/trait.IntoAttributeValue.html

leptos-unique-ids

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README