Outro transition not playing if inside #if #each

[bwbroersma]

I would expect all items to have the same intro en outro effect, see the bug in action in this REPL demo in version 3.2.0.

The code:

<script>
	import { fade } from 'svelte/transition';
	let checked = true;
</script>

<label>
	<input type=checkbox bind:checked> Trigger
</label>

{#if checked}
	{#each [1] as x }
		<p in:fade out:fade>if each in out</p>
		<p transition:fade>if each transition</p>
	{/each}
	<p in:fade out:fade>if in out</p>
	<p transition:fade>if transition</p>
{/if}

[bwbroersma]

I think the problem in the generated code is:

        // (10:0) {#if checked}
        function create_if_block(ctx) {
        ...
                function outro_block(i, detaching, local) {
                        if (each_blocks[i]) {
                                if (detaching) {
                                        on_outro(() => {
                                                each_blocks[i].d(detaching);
                                                each_blocks[i] = null;
                                        });
                                }

                                each_blocks[i].o(local);
                        }
                }

               return {
                ...
                        o: function outro(local) {
                                each_blocks = each_blocks.filter(Boolean);
                                for (let i = 0; i < 1; i += 1) outro_block(i, 0);

I think the last line should be:

                                for (let i = 0; i < 1; i += 1) outro_block(i, 0, local);

Update: no it shouldn't it should be:

                                for (let i = 0; i < 1; i += 1) outro_block(i, 0, 0);

but that won't fix the problem, that's in another file:

svelte/src/compile/render-dom/wrappers/Element/index.ts

Lines 736 to 746 in 43f82af

	let outro_block = deindent`
	${outro_name} = @create_out_transition(${this.var}, ${fn}, ${snippet});
	`;
	if (outro_block) {
	outro_block = deindent`
	if (#local) {
	${outro_block}
	}
	`;
	}

always adding the if(local) because the check if (outro_block) is wrong, it's clear when looking at the intro code:

svelte/src/compile/render-dom/wrappers/Element/index.ts

Lines 709 to 715 in 43f82af

	if (intro.is_local) {
	intro_block = deindent`
	if (#local) {
	${intro_block}
	}
	`;
	}

[bwbroersma]

I think it's generated here:

svelte/src/compile/render-dom/wrappers/EachBlock.ts

Line 508 in 43f82af

for (let #i = 0; #i < ${view_length}; #i += 1) ${outro_block}(#i, 0);`

[bwbroersma]

However changing this, 4 runtime tests will fail (or 8 with hydrate):

     ReferenceError: local is not defined

The tests are:

• nested-transition-detach-each
• transition-js-local-nested-each
• transition-js-nested-each
• transition-js-nested-each-delete

So probably this is not a good fix , but the sample will work.
Update: this is the correct fix:
bwbroersma@5784344