# svelte/prefer-svelte-reactivity

disallow using mutable instances of built-in classes where a reactive alternative is provided by svelte/reactivity

  • ⚙️ This rule is included in "plugin:svelte/recommended".

# 📖 Rule Details

The built-in Date, Map, Set, URL and URLSearchParams classes are often used in frontend code, however, their properties and methods are not reactive. Because of that, Svelte provides reactive versions of these 5 builtins as part of the “svelte/reactivity” package. This rule reports usage of mutable instances of the built-in versions in Svelte code.

<script>
  /* eslint svelte/prefer-svelte-reactivity: "error" */

  import {
    SvelteDate,
    SvelteMap,
    SvelteSet,
    SvelteURL,
    SvelteURLSearchParams
  } from 'svelte/reactivity';

  /* ✓ GOOD */

  const a = new Date(8.64e15);
  const b = new Map([
    [1, 'one'],
    [2, 'two']
  ]);
  const c = new Set([1, 2, 1, 3, 3]);
  const d = new URL('https://svelte.dev/');
  const e = new URLSearchParams('foo=1&bar=2');

  // These don't modify the instances
  a.getTime();
  b.keys();
  c.has(1);
  d.port;
  e.entries();

  const f = new SvelteDate(8.64e15);
  const g = new SvelteMap([
    [1, 'one'],
    [2, 'two']
  ]);
  const h = new SvelteSet([1, 2, 1, 3, 3]);
  const i = new SvelteURL('https://svelte.dev/');
  const j = new SvelteURLSearchParams('foo=1&bar=2');

  // These modify the instances
  f.getTime();
  g.keys();
  h.has(1);
  i.port;
  j.entries();

  /* ✗ BAD */

  const k = 
Found a mutable instance of the built-in Date class. Use SvelteDate instead. (svelte/prefer-svelte-reactivity)
new Date(8.64e15);
  const l = 
Found a mutable instance of the built-in Map class. Use SvelteMap instead. (svelte/prefer-svelte-reactivity)
new Map([
    [1, 'one'],
    [2, 'two']
  ]);
  const m = 
Found a mutable instance of the built-in Set class. Use SvelteSet instead. (svelte/prefer-svelte-reactivity)
new Set([1, 2, 1, 3, 3]);
  const n = new URL('https://svelte.dev/');
  const o = new URLSearchParams('foo=1&bar=2');

  // These modify the instances
  k.setMonth(3);
  l.clear();
  m.delete(2);
  n.port = 80;
  o.sort();
</script>
// In svelte.js files, exported variables are also reported
/* eslint svelte/prefer-svelte-reactivity: "error" */

/* ✗ BAD */

const a = new Date(8.64e15);
const b = new Map([
  [1, 'one'],
  [2, 'two']
]);
const c = new Set([1, 2, 1, 3, 3]);
const d = new URL('https://svelte.dev/');
const e = new URLSearchParams('foo=1&bar=2');

export { a, b, c, d as dd };
export default e;

# 🔧 Options

Nothing.

# 📚 Further Reading

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v3.11.0

# 🔍 Implementation