useAstroClientOnlyDirectiveValue

HTML

Summary

Rule available since: v2.5.9
Diagnostic Category: lint/nursery/useAstroClientOnlyDirectiveValue
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- astro
Sources:
- Inspired from astro/missing-client-only-directive-value

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useAstroClientOnlyDirectiveValue": "error"
6
      }
7
    }
8
  }
9
}

Description

Require a value for Astro’s client:only directive.

client:only skips server rendering, so Astro needs a framework value to select the client renderer.

Examples

Invalid

1
<Component client:only />

code-block.astro:1:12 lint/nursery/useAstroClientOnlyDirectiveValue ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ client:only is missing a framework value.
  
  > 1 │ <Component client:only />
      │            ^^^^^^^^^^^
    2 │ 
  
  ℹ Astro skips server rendering for client:only, so it cannot infer which renderer should load the component.
  
  ℹ Add the component framework as the directive value, for example client:only=“react”.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<Component client:only="react" />

Dynamic expression values are accepted without resolving their bindings.

1
<Component client:only={renderer} />

The rule only checks whether an initializer is present. Empty values are accepted.

References

Astro client directives