Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/nasty-clocks-exercise.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix: corrects a beforeUpdate/afterUpdate bug
5 changes: 4 additions & 1 deletion packages/svelte/src/internal/client/runtime.js
Original file line number Diff line number Diff line change
Expand Up @@ -963,7 +963,10 @@ export function set_signal_value(signal, value) {
// If we have afterUpdates locally on the component, but we're within a render effect
// then we will need to manually invoke the beforeUpdate/afterUpdate logic.
// TODO: should we put this being a is_runes check and only run it in non-runes mode?
if (current_effect === null && current_queued_pre_and_render_effects.length === 0) {
if (
current_effect === null &&
current_queued_pre_and_render_effects.every((e) => e.context !== component_context)
) {
const update_callbacks = component_context?.update_callbacks;
if (update_callbacks != null) {
update_callbacks.before.forEach(/** @param {any} c */ (c) => c());
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<script>
const {count, increment} = $props();
</script>

<button onclick={increment}>
{count}
</button>
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { flushSync } from 'svelte';
import { test } from '../../test';

export default test({
html: '<button>0</button>',

async test({ assert, target, component }) {
const [btn] = target.querySelectorAll('button');
flushSync(() => {
btn.click();
});
assert.deepEqual(component.log, ['beforeUpdate', 'afterUpdate']);
assert.htmlEqual(target.innerHTML, `<button>1</button>`);
}
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<script>
import Child from './Child.svelte'
import {afterUpdate, beforeUpdate} from 'svelte';

const {log = []} = $props();

let count = $state(0);

const increment = () => {
count++;
}

beforeUpdate(() => {
log.push('beforeUpdate');
});

afterUpdate(() => {
log.push('afterUpdate');
});
</script>

<Child count={count} increment={increment} />