fix: ensure local prop value is read during teardown (#13611)

* fix: ensure local prop value is read during teardown

* add test

* cleanup

* less overhead
pull/13603/head
Dominic Gannaway 11 months ago committed by GitHub
parent 829be3d611
commit 68a2263415
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: ensure local prop value is read during teardown

@ -1,4 +1,4 @@
/** @import { Source } from './types.js' */
/** @import { Derived, Source } from './types.js' */
import { DEV } from 'esm-env';
import {
PROPS_IS_BINDABLE,
@ -12,6 +12,7 @@ import { mutable_source, set, source } from './sources.js';
import { derived, derived_safe_equal } from './deriveds.js';
import {
active_effect,
active_reaction,
get,
is_signals_recorded,
set_active_effect,
@ -20,7 +21,7 @@ import {
} from '../runtime.js';
import { safe_equals } from './equality.js';
import * as e from '../errors.js';
import { BRANCH_EFFECT, LEGACY_DERIVED_PROP, ROOT_EFFECT } from '../constants.js';
import { BRANCH_EFFECT, DESTROYED, LEGACY_DERIVED_PROP, ROOT_EFFECT } from '../constants.js';
import { proxy } from '../proxy.js';
/**
@ -348,12 +349,17 @@ export function prop(props, key, flags, fallback) {
// The derived returns the current value. The underlying mutable
// source is written to from various places to persist this value.
var inner_current_value = mutable_source(prop_value);
var current_value = with_parent_branch(() =>
derived(() => {
var parent_value = getter();
var child_value = get(inner_current_value);
var current_derived = /** @type {Derived} */ (active_reaction);
if (from_child) {
// If the getter from the parent returns undefined, switch
// to using the local value from inner_current_value instead,
// as the parent value might have been torn down
if (from_child || (parent_value === undefined && (current_derived.f & DESTROYED) !== 0)) {
from_child = false;
was_from_child = true;
return child_value;

@ -0,0 +1,15 @@
<script>
let { x } = $props();
$effect(() => {
console.log('init')
x = () => {
console.log('teardown')
}
return () => {
x();
}
})
</script>

@ -0,0 +1,19 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
export default test({
async test({ assert, logs, target }) {
const [btn1] = target.querySelectorAll('button');
btn1?.click();
flushSync();
btn1?.click();
flushSync();
btn1?.click();
flushSync();
assert.deepEqual(logs, ['init', 'teardown', 'init', 'teardown']);
}
});

@ -0,0 +1,12 @@
<script>
import Component from "./Component.svelte";
let toggle = $state(true);
</script>
<button onclick={() => toggle = !toggle}>toggle</button>
{#if toggle}
<Component />
{/if}
Loading…
Cancel
Save