Re-rendering occurs before the execution of the #if directive.

Describe the bug

I have a Modal Component that provides the style of Modal, content slot, and methods to open and close Modal. The control method of opening and closing is implemented through the state of current,and current is set to undefiend when closing.

When calling this component, if there are child components within chilren, and first-level child component has an $effect, and second-level child component calls the clse methods, an exception whill be thrown.

Uncaught TypeError: Cannot read properties of undefined (reading 'model')

I have a #if check for the data usage, but the error still occurs. I suspect that the child components'rerendering executes earlier than the #if check.

test.svelte.ts(data model):

type State = 'init' | 'submitted';

export function createModal() {
	let state = $state<State>('init');

	return {
		get state() {
			return state;
		},

		submit() {
			state = 'submitted';
		}
	};
}

export type Model = ReturnType<typeof createModal>;

Modal.svelte:

<script lang="ts" module>
	let current = $state<{ model: Model }>();
	export function open(model: Model) {
		current = {
			model
		};
	}
	export function close() {
		current = undefined;
	}
</script>

<script lang="ts">
	import { onDestroy, type Snippet } from 'svelte';
	import type { Model } from './test.svelte';

	let {
		children
	}: {
		children: Snippet<[Model]>;
	} = $props();

	onDestroy(() => {
		console.log('destroy test');
	});
</script>

{#if current?.model}
	{@render children(current.model)}
{/if}

+page.svelte

<script>
	import { createModal } from './test.svelte';
	import TestChildren1 from './TestChildren1.svelte';
	import TestComponent, { open } from './Modal.svelte';

	const model = createModal();

	$effect(() => {
		console.log('model', model);
	});
</script>

<button
	onclick={() => {
		open(model);
	}}>open</button
>
<TestComponent>
	{#snippet children(model)}
		<TestChildren1 {model} />
	{/snippet}
</TestComponent>

TestChild