noSvelteObjectInTextMustaches (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/noSvelteObjectInTextMustaches
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- svelte
Sources:
- Same as svelte/no-object-in-text-mustaches

How to configure

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

Description

Disallow objects, arrays, functions, and classes in Svelte text mustaches.

When a mustache tag is rendered as text, Svelte converts its value to a string. An object literal renders as [object Object], an array as its comma-separated elements, and a function or class as its source code. This is rarely intended, and often comes from writing {{ value }} out of habit from other template languages.

Mustaches that make up an entire attribute value, such as prop={{ value }}, are allowed because the value is passed as is instead of being converted to a string.

Examples

Invalid

1
{{ name }}

code-block.svelte:1:2 lint/nursery/noSvelteObjectInTextMustaches ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Unexpected object in a text mustache.
  
  > 1 │ {{ name }}
      │  ^^^^^^^^
    2 │ 
  
  ℹ Svelte converts this value to a string when rendering it, which produces output such as [object Object] or the source code of a function.
  
  ℹ Render a property of the value, or the result of calling a function, instead of the object itself.
  
  ℹ 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.

1
{() => name}

code-block.svelte:1:2 lint/nursery/noSvelteObjectInTextMustaches ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Unexpected function in a text mustache.
  
  > 1 │ {() => name}
      │  ^^^^^^^^^^
    2 │ 
  
  ℹ Svelte converts this value to a string when rendering it, which produces output such as [object Object] or the source code of a function.
  
  ℹ Render a property of the value, or the result of calling a function, instead of the function itself.
  
  ℹ 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.

1
<input class="{[name]} input" />

code-block.svelte:1:16 lint/nursery/noSvelteObjectInTextMustaches ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Unexpected array in a text mustache.
  
  > 1 │ <input class="{[name]} input" />
      │                ^^^^^^
    2 │ 
  
  ℹ Svelte converts this value to a string when rendering it, which produces output such as [object Object] or the source code of a function.
  
  ℹ Render a property of the value, or the result of calling a function, instead of the array itself.
  
  ℹ 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
{name}
2
<Component prop={{ name }} />