feedback

Author: trueadm

packages/svelte/src/internal/client/constants.js

@@ -26,5 +26,5 @@ export const STATE_SYMBOL_METADATA = Symbol('$state metadata');
 export const LEGACY_PROPS = Symbol('legacy props');
 export const LOADING_ATTR_SYMBOL = Symbol('');
 
-export const CTX_CONTAINS_TEARDOWN = 1;
-export const CTX_DESTROYED = 2;
+export const CTX_CONTAINS_TEARDOWN = 1 << 1;
+export const CTX_DESTROYED = 1 << 2;

packages/svelte/src/internal/client/context.js

@@ -136,12 +136,12 @@ export function push(props, runes = false, fn) {
 	}
 
 	teardown(() => {
-		if (ctx.f !== CTX_CONTAINS_TEARDOWN) {
+		if ((ctx.f & (CTX_CONTAINS_TEARDOWN | CTX_DESTROYED)) === 0) {
 			return;
 		}
 		// Mark the context as destroyed, so any derived props can use
 		// the latest known value before teardown
-		ctx.f = CTX_DESTROYED;
+		ctx.f ^= CTX_DESTROYED;
 
 		var teardown_props = ctx.tp;
 		// Apply the latest known props before teardown over existing props
@@ -195,7 +195,7 @@ export function pop(component) {
 		context_stack_item.m = true;
 
 		effect(() => {
-			if (context_stack_item.f === CTX_CONTAINS_TEARDOWN) {
+			if ((context_stack_item.f & CTX_CONTAINS_TEARDOWN) !== 0) {
 				context_stack_item.tp = { ...context_stack_item.s };
 			}
 		});

packages/svelte/src/internal/client/reactivity/props.js

@@ -370,7 +370,7 @@ export function prop(props, key, flags, fallback) {
 	var current_value = derived(() => {
 		var ctx = component_context;
 
-		if (ctx !== null && ctx.f === CTX_DESTROYED) {
+		if (ctx !== null && (ctx.f & CTX_DESTROYED) !== 0) {
 			return get(inner_current_value);
 		}
 

packages/svelte/src/internal/client/runtime.js

@@ -570,8 +570,8 @@ export function update_effect(effect) {
 
 		if (typeof teardown === 'function') {
 			var ctx = effect.ctx;
-			if (ctx !== null && ctx.f === 0) {
-				ctx.f = CTX_CONTAINS_TEARDOWN;
+			if (ctx !== null && (ctx.f & CTX_CONTAINS_TEARDOWN) === 0) {
+				ctx.f ^= CTX_CONTAINS_TEARDOWN;
 			}
 			effect.teardown = teardown;
 		} else {

packages/svelte/tests/runtime-runes/samples/ondestroy-prop-access-2/Component.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { onDestroy } from 'svelte';
+
+	let { my_prop } = $props();
+
+	onDestroy(() => {
+		console.log(my_prop.foo);
+	});
+</script>
+
+{my_prop.foo}

packages/svelte/tests/runtime-runes/samples/ondestroy-prop-access-2/_config.js

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

packages/svelte/tests/runtime-runes/samples/ondestroy-prop-access-2/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	import Component from './Component.svelte';
+
+	let value = $state({ foo: 'bar' });
+</script>
+
+<button
+	onclick={() => {
+		value = undefined;
+	}}>Reset value</button
+>
+
+{#if value !== undefined}
+	<Component my_prop={value} />
+{/if}