Merge pull request #3209 from sveltejs/gh-2086-2

Prevent outro callback corruption

Author: Rich-Harris

src/runtime/internal/transitions.ts

@@ -28,15 +28,17 @@ let outros;
 
 export function group_outros() {
 	outros = {
-		remaining: 0,
-		callbacks: []
+		r: 0,     // remaining outros
+		c: [],    // callbacks
+		p: outros // parent group
 	};
 }
 
 export function check_outros() {
-	if (!outros.remaining) {
-		run_all(outros.callbacks);
+	if (!outros.r) {
+		run_all(outros.c);
 	}
+	outros = outros.p;
 }
 
 export function transition_in(block, local?: 0 | 1) {
@@ -51,7 +53,7 @@ export function transition_out(block, local: 0 | 1, detach: 0 | 1, callback) {
 		if (outroing.has(block)) return;
 		outroing.add(block);
 
-		outros.callbacks.push(() => {
+		outros.c.push(() => {
 			outroing.delete(block);
 			if (callback) {
 				if (detach) block.d(1);
@@ -153,7 +155,7 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn:
 
 	const group = outros;
 
-	group.remaining += 1;
+	group.r += 1;
 
 	function go() {
 		const {
@@ -178,10 +180,10 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn:
 
 					dispatch(node, false, 'end');
 
-					if (!--group.remaining) {
+					if (!--group.r) {
 						// this will result in `end()` being called,
 						// so we don't need to clean up here
-						run_all(group.callbacks);
+						run_all(group.c);
 					}
 
 					return false;
@@ -266,7 +268,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline
 		if (!b) {
 			// @ts-ignore todo: improve typings
 			program.group = outros;
-			outros.remaining += 1;
+			outros.r += 1;
 		}
 
 		if (running_program) {
@@ -309,7 +311,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline
 								clear_animation();
 							} else {
 								// outro — needs to be coordinated
-								if (!--running_program.group.remaining) run_all(running_program.group.callbacks);
+								if (!--running_program.group.r) run_all(running_program.group.c);
 							}
 						}
 

test/runtime/samples/each-block-keyed-nested/Child.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let id;
+</script>
+
+{id}

test/runtime/samples/each-block-keyed-nested/_config.js

@@ -0,0 +1,16 @@
+export default {
+	html: `
+		1
+	`,
+
+	test({ assert, component, target }) {
+		component.desks = [
+			{
+				id: 1,
+				teams: []
+			}
+		];
+
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};

test/runtime/samples/each-block-keyed-nested/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	import Child from './Child.svelte';
+
+	export let desks = [
+		{
+			id: 1,
+			teams: [{ id: 1 }]
+		}
+	];
+</script>
+
+{#each desks as desk (desk.id)}
+	{#each desk.teams as team (team.id)}
+		<Child id={team.id} />
+	{/each}
+{/each}

test/runtime/samples/head-detached-in-dynamic-component/A.svelte

@@ -0,0 +1,5 @@
+<svelte:head>
+	<meta name="description" content="A"/>
+</svelte:head>
+
+A

test/runtime/samples/head-detached-in-dynamic-component/B.svelte

@@ -0,0 +1,5 @@
+<svelte:head>
+	<meta name="description" content="B"/>
+</svelte:head>
+
+B

test/runtime/samples/head-detached-in-dynamic-component/_config.js

@@ -0,0 +1,15 @@
+export default {
+	html: `
+		A
+	`,
+
+	test({ assert, component, window }) {
+		component.x = false;
+
+		const meta = window.document.querySelectorAll('meta');
+
+		assert.equal(meta.length, 1);
+		assert.equal(meta[0].name, 'description');
+		assert.equal(meta[0].content, 'B');
+	}
+};

test/runtime/samples/head-detached-in-dynamic-component/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import A from './A.svelte';
+	import B from './B.svelte';
+
+	export let x = true;
+</script>
+
+<svelte:component this="{x ? A : B}"/>