pnpm dev breaks; pnpm build works with #each block in +layout.svelte

[svelte-kit-so-good]

Describe the bug

This relates to closed issues (10437 and 10473).

@dummdidumm below is a video to better illustrate my issue.

• The video starts with the working case (i.e. using pnpm build). When I then try with pnpm dev the demo breaks (modal doesn't transition away ... gets stuck).

• Not explicitly shown in the video (but right underneath and commented out) is another component <IframeModals/>, which uses the #each block internally ... and it works both with pnpm dev and pnpm build. I have also updated the SvelteLab repro using alpha 56 so you can test this out

broken_modal.mp4

Reproduction

SvelteLab demo

Logs

No response

System Info

Svelte v5.0.0-next.56 ... but tried since alpha 51 and down to alpha 20

Severity

annoyance

[dummdidumm]

This somewhat works as expected. The iframe is passed as a property to the IframeModel and then mutated within. If you look into the console, it tells you that you cannot mutate a property. If I change the offending code to be

{#each iframeModals as iframe, i}
	<IframeModal bind:iframe={iframeModals[i]} delay={500} />
{/each}

then it works as expected in both dev and prod. Is there a reason you did not bind, or was the error confusing / not obvious what it's related to?
Related: #10464 may relax this validation / make it not appear anymore because the iframeModals variable might be determined to not be owned by anything, and therefore be allowed to be mutated from anywhere - not completely sure though right now.

[svelte-kit-so-good]

As far as the code you wrote, I actually proposed that myself as a workaround in the original issue 10437. In that original issue I actually pointed out a couple of bugs (will keep it to 1 bug per issue from now on so things aren't prematurely closed).

Back to my concerns in this issue:

1. before closing this issue ... is there a good reason why pnpm build works and pnpm dev doesn't using the non-bound version:

<!-- +layout.svelte -->
{#each iframeModals as iframe}
	<IframeModal {iframe} />
{/each}

2. Also in the non-bound version, the 'iframe' being passed as a prop is only ever being changed with a prop callback. For instance <IframeModal {iframe} /> is a shorthand for multiple nested components:

<!-- IframeModal.svelte -->
<Modal css isOpen={iframe.isOpen} close={() => (iframe.isOpen = false)}>
	<Suspense loading={iframe.loading}>
		<iframe src={iframe.url} use:load_iframe={iframe} title={iframe.name} />
	</Suspense>
</Modal>

This same code snippet is used directly in the commented out <IframeModals/>, which works no problem:

<!-- IframeModals.svelte -->
{#each iframeModals as iframe}
	<Modal css isOpen={iframe.isOpen} close={() => (iframe.isOpen = false)}>
		<Suspense loading={iframe.loading}>
			<iframe src={iframe.url} use:load_iframe={iframe} title={iframe.name} />
		</Suspense>
	</Modal>
{/each}

3.. ... so that things are a little simpler I'll get rid of IframeModals.svelte and write it out explicitly in +layout.svelte, and keep the problematic IframeModal.svelte. Here's a new demo, with a video:

broken_demo.mp4

• video starts with both pnpm build/dev working for the elaborated #each case
• demo in video then breaks for pnpm dev — but works with pnpm build — for the #each case that uses a component (<IframeModal {iframe} />) to abstract away all the nested components

[svelte-kit-so-good]

I rescind my apology from the previous edit. Somehow alpha 64 just fixes things 🤷‍♀️ (which now officially closes closed issues 10437 and 10473). I can now use the 'unbound' case mentioned above.

Strangely in a svelte 4 variant making the following change:

        //  IframeModal.svelte
        export let frame: iframeModalType 
        
-	function load_iframe(node: HTMLIFrameElement, iframe: iframeModalType) {
+	function load_iframe(node: HTMLIFrameElement) {

fixed it ... but that is not necessary in the svelte 5 version.

Still don't understand how before alpha 64 the PROD svelte 5 version worked and the DEV one broke.