Skip to content

Commit

Permalink
fix: use strict equality for key block comparisons in runes mode (#14285
Browse files Browse the repository at this point in the history
)

fixes #14283
  • Loading branch information
Rich-Harris authored and trueadm committed Nov 13, 2024
1 parent 2a1b615 commit 863ba15
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/hot-frogs-melt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix: use strict equality for key block comparisons in runes mode
7 changes: 5 additions & 2 deletions packages/svelte/src/internal/client/dom/blocks/key.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/** @import { Effect, TemplateNode } from '#client' */
import { UNINITIALIZED } from '../../../../constants.js';
import { block, branch, pause_effect } from '../../reactivity/effects.js';
import { safe_not_equal } from '../../reactivity/equality.js';
import { not_equal, safe_not_equal } from '../../reactivity/equality.js';
import { is_runes } from '../../runtime.js';
import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';

/**
Expand All @@ -24,8 +25,10 @@ export function key_block(node, get_key, render_fn) {
/** @type {Effect} */
var effect;

var changed = is_runes() ? not_equal : safe_not_equal;

block(() => {
if (safe_not_equal(key, (key = get_key()))) {
if (changed(key, (key = get_key()))) {
if (effect) {
pause_effect(effect);
}
Expand Down
9 changes: 9 additions & 0 deletions packages/svelte/src/internal/client/reactivity/equality.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,15 @@ export function safe_not_equal(a, b) {
: a !== b || (a !== null && typeof a === 'object') || typeof a === 'function';
}

/**
* @param {unknown} a
* @param {unknown} b
* @returns {boolean}
*/
export function not_equal(a, b) {
return a !== b;
}

/** @type {Equals} */
export function safe_equals(value) {
return !safe_not_equal(value, this.v);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { flushSync } from 'svelte';
import { test } from '../../test';

export default test({
test({ assert, target, logs }) {
assert.deepEqual(logs, ['rendering']);

const btn = target.querySelector('button');
flushSync(() => btn?.click());

assert.deepEqual(logs, ['rendering']);
}
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<script>
let inner = Symbol();
let outer = $state({ inner });
</script>

<button onclick={() => outer = { inner }}>update</button>

{#key outer.inner}
{console.log('rendering')}
{/key}

0 comments on commit 863ba15

Please sign in to comment.