restrict-mustache-expressions.md

pageClass	sidebarDepth	title	description
rule-details	0	svelte/restrict-mustache-expressions	disallow non-string values in string contexts

svelte/restrict-mustache-expressions

disallow non-string values in string contexts

• ❗ This rule has not been released yet.
• ⚙️ This rule is included in "plugin:svelte/recommended".

📖 Rule Details

JavaScript automatically converts an object to a string in a string context, such as when concatenating strings or using them in a template string. The default toString() method of objects returns [object Object]. This is typically incorrect behavior.

This rule prevents non-stringifiable values from being used in contexts where a string is expected.

This rule is based off the restrict-template-expressions rule, and it is recommended to be used with that rule, as this only performs checks on svelte template strings (eg: <a href="foo/{bar}">foo</a>), and not on <a href={`/foo/${bar}`}>foo</a>.

<script lang="ts">
  /* eslint svelte/restrict-mustache-expressions: "error" */

  let str: string = 'foo';
  let not_stringifiable = { foo: 'bar' };
</script>

<!-- ✓ GOOD -->
<a href="foo/{123}">foo</a>
<a href="foo/{str}">foo</a>
<a href="foo/{true}">foo</a>

{123}
{str}
{true}

<!-- ✗ BAD -->
<a href="foo/{null}">foo</a>
<a href="foo/{undefined}">foo</a>
<a href="foo/{[1, 2, 3]}">foo</a>
<a href="foo/{not_stringifiable}">foo</a>

{null}
{undefined}
{[1, 2, 3]}
{not_stringifiable}

🔧 Options

{
  "svelte/restrict-mustache-expressions": ["error", {}]
}

type Options = {
  // allows numbers in both svelte template literals and text expressions
  allowNumbers?: boolean;
  // allows booleans in both svelte template literals and text expressions
  allowBooleans?: boolean;
  // allows null in both svelte template literals and text expressions
  allowNull?: boolean;
  // allows undefined in both svelte template literals and text expressions
  allowUndefined?: boolean;
  // eg: <foo>{bar}</foo>
  textExpressions?: {
    // allows numbers in text expressions
    allowNumbers?: boolean;
    // allows booleans in text expressions
    allowBooleans?: boolean;
    // allows null in text expressions
    allowNull?: boolean;
    // allows undefined in text expressions
    allowUndefined?: boolean;
  };
  // eg: <a href="foo/{bar}">foo</a>
  stringTemplateExpressions?: {
    // allows numbers in string template expressions
    allowNumbers?: boolean;
    // allows booleans in string template expressions
    allowBooleans?: boolean;
    // allows null in string template expressions
    allowNull?: boolean;
    // allows undefined in string template expressions
    allowUndefined?: boolean;
  };
};

type DefaultOptions = {
  allowNumbers: true;
  allowBooleans: true;
  allowNull: false;
  allowUndefined: false;
};

More examples

Disallowing numbers

<script lang="ts">
  /* eslint svelte/restrict-mustache-expressions: ["error", { "allowNumbers": false }] */
</script>

<!-- ✓ GOOD -->
<a href="foo/{str}">foo</a>
{str}

<!-- ✗ BAD -->
<a href="foo/{123}">foo</a>
{123}

Disallowing booleans

<script lang="ts">
  /* eslint svelte/restrict-mustache-expressions: ["error", { "allowBooleans": false }] */
</script>

<!-- ✓ GOOD -->
{str}

<!-- ✗ BAD -->
<a href="foo/{true}">foo</a>

Disallowing numbers specifically for text expressions

<script lang="ts">
  /* eslint svelte/restrict-mustache-expressions: ["error", { "textExpressions": { "allowNumbers": false } }] */
</script>

<!-- ✓ GOOD -->
<a href="foo/{123}">foo</a>

<!-- ✗ BAD -->
{123}

Disallowing booleans specifically for string template expressions

<script lang="ts">
  /* eslint svelte/restrict-mustache-expressions: ["error", { "stringTemplateExpressions": { "allowBooleans": false } }] */
</script>

<!-- ✓ GOOD -->
{true}

<!-- ✗ BAD -->
<a href="foo/{true}">foo</a>

📚 Further Reading

• no-base-to-string
• restrict-plus-operands
• restrict-template-expressions

🔍 Implementation

• Rule source
• Test source