keep each block value (#5841)

CHANGELOG.md

@@ -7,6 +7,7 @@
 * Fix checkbox `bind:group` in keyed `{#each}` where the array can be reordered ([#5779](https://github.com/sveltejs/svelte/issues/5779))
 * Fix checkbox `bind:group` in nested `{#each}` contexts ([#5811](https://github.com/sveltejs/svelte/issues/5811))
 * Add graphics roles as known ARIA roles ([#5822](https://github.com/sveltejs/svelte/pull/5822))
+* Fix local transitions if a parent has a cancelled outro transition ([#5822](https://github.com/sveltejs/svelte/issues/5822))
 
 ## 3.31.0
 

src/compiler/compile/render_dom/wrappers/EachBlock.ts

@@ -450,7 +450,7 @@ export default class EachBlockWrapper extends Wrapper {
 			this.block.maintain_context = true;
 
 			this.updates.push(b`
-				const ${this.vars.each_block_value} = ${snippet};
+				${this.vars.each_block_value} = ${snippet};
 				${this.renderer.options.dev && b`@validate_each_argument(${this.vars.each_block_value});`}
 
 				${this.block.has_outros && b`@group_outros();`}

test/js/samples/each-block-keyed-animated/expected.js

@@ -94,7 +94,7 @@ function create_fragment(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (dirty & /*things*/ 1) {
-				const each_value = /*things*/ ctx[0];
+				each_value = /*things*/ ctx[0];
 				for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].r();
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, each_1_anchor.parentNode, fix_and_destroy_block, create_each_block, each_1_anchor, get_each_context);
 				for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].a();

test/js/samples/each-block-keyed/expected.js

@@ -79,7 +79,7 @@ function create_fragment(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (dirty & /*things*/ 1) {
-				const each_value = /*things*/ ctx[0];
+				each_value = /*things*/ ctx[0];
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, each_1_anchor.parentNode, destroy_block, create_each_block, each_1_anchor, get_each_context);
 			}
 		},

test/runtime/samples/transition-js-each-outro-cancelled/_config.js

@@ -0,0 +1,57 @@
+export default {
+	html: '<section></section>',
+	async test({ assert, component, target, raf }) {
+		await component.add();
+		await component.add();
+
+		let time = 0;
+
+		assert.htmlEqual(target.innerHTML, `
+			<section>
+				<div t="0">Thing 1</div>
+				<div t="0">Thing 2</div>
+			</section>
+		`);
+
+		raf.tick(time += 400);
+
+		assert.htmlEqual(target.innerHTML, `
+			<section>
+				<div t="1">Thing 1</div>
+				<div t="1">Thing 2</div>
+			</section>
+		`);
+
+		await component.toggle();
+		// transition halfway
+		raf.tick(time += 200);
+
+		assert.htmlEqual(target.innerHTML, `
+			<section t="0.5">
+				<div t="1">Thing 1</div>
+				<div t="1">Thing 2</div>
+			</section>
+		`);
+
+		await component.toggle();
+		// transition back
+		raf.tick(time += 200);
+
+		assert.htmlEqual(target.innerHTML, `
+			<section t="1">
+				<div t="1">Thing 1</div>
+				<div t="1">Thing 2</div>
+			</section>
+		`);
+
+		await component.remove(1);
+
+		raf.tick(time += 400);
+
+		assert.htmlEqual(target.innerHTML, `
+			<section t="1">
+				<div t="1">Thing 2</div>
+			</section>
+		`);
+	}
+};

test/runtime/samples/transition-js-each-outro-cancelled/main.svelte

@@ -0,0 +1,29 @@
+<script>
+	function fade(node) {
+		return {
+			duration: 400,
+			tick(t) {
+				node.setAttribute('t', t);
+			}
+		};
+	}
+
+	let shown = true;
+	let _id = 1;
+	let items = [];
+
+	export const toggle = () => (shown = !shown);
+	export const add = () => {
+		items = items.concat({ _id, name: `Thing ${_id}` });
+		_id++;
+	};
+	export const remove = (id) => (items = items.filter(({ _id }) => _id !== id));
+</script>
+
+{#if shown}
+	<section transition:fade>
+		{#each items as thing (thing._id)}
+			<div in:fade|local out:fade|local>{thing.name}</div>
+		{/each}
+	</section>
+{/if}