Soundcheck.Check.Warning.LiteralLiveComponentIdInLoop (soundcheck v0.1.0)

Copy Markdown View Source

Basics

This check is disabled by default.

Learn how to enable it via .credo.exs.

This check has a base priority of high and works with any version of Elixir.

Explanation

Flags <.live_component> calls with a literal id inside a loop: on an element with :for, or under one or a <%= for ... %> block. Every iteration renders the component under the same id, so LiveView raises "found duplicate ID" once the list holds two items. Tests whose fixtures hold zero or one item never see it.

Before:

<.live_component :for={post <- @posts} module={PostComponent} id="post" post={post} />

After:

<.live_component :for={post <- @posts} module={PostComponent} id={"post-#{post.id}"} post={post} />

An id counts as literal when it is a plain string or an expression without variables or assigns, such as id={"post"} or id={:new}.

Confidence: high. Tier: syntactic (works without compiling).

Check-Specific Parameters

Use the following parameters to configure this check:

:excluded_paths

Paths to skip (atoms, binaries as path segments, or regexes).

This parameter defaults to [~r/\/test\//, "test"].

:strict

Unused.

This parameter defaults to false.

General Parameters

Like with all checks, general params can be applied.

Parameters can be configured via the .credo.exs config file.