Merge pull request #3172 from sveltejs/gh-3113

prevent dynamic components being detached twice

Author: Rich-Harris

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

@@ -493,7 +493,7 @@ export default class EachBlockWrapper extends Wrapper {
 				const out = block.get_unique_name('out');
 
 				block.builders.init.add_block(deindent`
-					const ${out} = i => @transition_out(${iterations}[i], 1, () => {
+					const ${out} = i => @transition_out(${iterations}[i], 1, 1, () => {
 						${iterations}[i] = null;
 					});
 				`);

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

@@ -326,7 +326,7 @@ export default class IfBlockWrapper extends Wrapper {
 
 		const destroy_old_block = deindent`
 			@group_outros();
-			@transition_out(${if_blocks}[${previous_block_index}], 1, () => {
+			@transition_out(${if_blocks}[${previous_block_index}], 1, 1, () => {
 				${if_blocks}[${previous_block_index}] = null;
 			});
 			@check_outros();
@@ -439,7 +439,7 @@ export default class IfBlockWrapper extends Wrapper {
 					${enter}
 				} else if (${name}) {
 					@group_outros();
-					@transition_out(${name}, 1, () => {
+					@transition_out(${name}, 1, 1, () => {
 						${name} = null;
 					});
 					@check_outros();

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -388,8 +388,8 @@ export default class InlineComponentWrapper extends Wrapper {
 					if (${name}) {
 						@group_outros();
 						const old_component = ${name};
-						@transition_out(old_component.$$.fragment, 1, () => {
-							@destroy_component(old_component);
+						@transition_out(old_component.$$.fragment, 1, 0, () => {
+							@destroy_component(old_component, 1);
 						});
 						@check_outros();
 					}

src/runtime/internal/await_block.ts

@@ -18,7 +18,7 @@ export function handle_promise(promise, info) {
 				info.blocks.forEach((block, i) => {
 					if (i !== index && block) {
 						group_outros();
-						transition_out(block, 1, () => {
+						transition_out(block, 1, 1, () => {
 							info.blocks[i] = null;
 						});
 						check_outros();

src/runtime/internal/keyed_each.ts

@@ -6,7 +6,7 @@ export function destroy_block(block, lookup) {
 }
 
 export function outro_and_destroy_block(block, lookup) {
-	transition_out(block, 1, () => {
+	transition_out(block, 1, 1, () => {
 		lookup.delete(block.key);
 	});
 }

src/runtime/internal/transitions.ts

@@ -46,15 +46,15 @@ export function transition_in(block, local?: 0 | 1) {
 	}
 }
 
-export function transition_out(block, local: 0 | 1, callback) {
+export function transition_out(block, local: 0 | 1, detach: 0 | 1, callback) {
 	if (block && block.o) {
 		if (outroing.has(block)) return;
 		outroing.add(block);
 
 		outros.callbacks.push(() => {
 			outroing.delete(block);
 			if (callback) {
-				block.d(1);
+				if (detach) block.d(1);
 				callback();
 			}
 		});

test/js/samples/transition-repeated-outro/expected.js

@@ -81,7 +81,7 @@ function create_fragment(ctx) {
 				}
 			} else if (if_block) {
 				group_outros();
-				transition_out(if_block, 1, () => {
+				transition_out(if_block, 1, 1, () => {
 					if_block = null;
 				});
 				check_outros();

test/runtime/samples/await-in-dynamic-component/Widget.svelte

@@ -0,0 +1 @@
+{#await null}{/await}

test/runtime/samples/await-in-dynamic-component/_config.js

@@ -0,0 +1,5 @@
+export default {
+	test({ component }) {
+		component.flag = false;
+	}
+};

test/runtime/samples/await-in-dynamic-component/main.svelte

@@ -0,0 +1,6 @@
+<script>
+	export let flag = true;
+	import Widget from './Widget.svelte';
+</script>
+
+<svelte:component this={flag && Widget}/>