diff --git a/.changeset/clear-olives-share.md b/.changeset/clear-olives-share.md new file mode 100644 index 0000000000..975b2b21b6 --- /dev/null +++ b/.changeset/clear-olives-share.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: allow `{#key NaN}` diff --git a/packages/svelte/src/internal/client/dom/blocks/key.js b/packages/svelte/src/internal/client/dom/blocks/key.js index 849b1c2447..dd40d8a1b8 100644 --- a/packages/svelte/src/internal/client/dom/blocks/key.js +++ b/packages/svelte/src/internal/client/dom/blocks/key.js @@ -4,6 +4,8 @@ import { block } from '../../reactivity/effects.js'; import { hydrate_next, hydrating } from '../hydration.js'; import { BranchManager } from './branches.js'; +const NAN = Symbol('NaN'); + /** * @template V * @param {TemplateNode} node @@ -23,6 +25,11 @@ export function key(node, get_key, render_fn) { block(() => { var key = get_key(); + // NaN !== NaN, hence we do this workaround to not trigger remounts unnecessarily + if (key !== key) { + key = /** @type {any} */ (NAN); + } + // key blocks in Svelte <5 had stupid semantics if (legacy && key !== null && typeof key === 'object') { key = /** @type {V} */ ({}); diff --git a/packages/svelte/tests/runtime-runes/samples/key-nan/_config.js b/packages/svelte/tests/runtime-runes/samples/key-nan/_config.js new file mode 100644 index 0000000000..bd0dd06761 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/key-nan/_config.js @@ -0,0 +1,17 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + html: '

it rendered

', + + test({ assert, target, logs }) { + assert.deepEqual(logs, ['rendering']); + + const btn = target.querySelector('button'); + flushSync(() => btn?.click()); + + // should not re-render + assert.deepEqual(logs, ['rendering']); + assert.htmlEqual(target.innerHTML, '

it rendered

'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/key-nan/main.svelte b/packages/svelte/tests/runtime-runes/samples/key-nan/main.svelte new file mode 100644 index 0000000000..24f7f2d179 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/key-nan/main.svelte @@ -0,0 +1,10 @@ + + + + +{#key x} + {console.log('rendering')} +

it rendered

+{/key}