[fix]destroy empty component (#7492)

* fix: destroy non-fragment element such as empty components

* fix: fragment property of Empty Component is set as true in dev mode, inconsistent with production mode

* chore: revert 'removal' of component.compile_options.dev

* feat: add test for destroying empty component

* chore: update typechecking callback

* chore: revert fragment dev checks

* chore: remove unnecessary comment

* chore: update test for empty-component-destroy

* fix: revert back the patching of console.log

* use before_test and after_test

Co-authored-by: qinmu <[email protected]>
Co-authored-by: tanhauhau <[email protected]>

Author: 3 people

src/compiler/compile/render_dom/index.ts

@@ -333,7 +333,7 @@ export default function dom(
 		// $$props arg is still needed for unknown prop check
 		args.push(x`$$props`);
 	}
-
+	// has_create_fragment is intentionally to be true in dev mode.
 	const has_create_fragment = component.compile_options.dev || block.has_content();
 	if (has_create_fragment) {
 		body.push(b`

src/runtime/internal/transitions.ts

@@ -79,6 +79,8 @@ export function transition_out(block: Fragment, local: 0 | 1, detach?: 0 | 1, ca
 		});
 
 		block.o(local);
+	} else if (callback) {
+		callback();
 	}
 }
 
@@ -143,7 +145,7 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
 	return {
 		start() {
 			if (started) return;
-			
+
 			started = true;
 			delete_rule(node);
 

test/runtime/samples/empty-component-destroy/Empty.svelte

@@ -0,0 +1,8 @@
+
+<script>
+  import { onDestroy } from 'svelte';
+	
+	onDestroy(() => {
+		console.log('destroy');
+	});
+</script>

test/runtime/samples/empty-component-destroy/_config.js

@@ -0,0 +1,25 @@
+let log;
+export default {
+	html: `
+	  <button>destroy component</button>
+	`,
+
+	before_test() {
+		log = console.log;
+	},
+	after_test() {
+		console.log = log;
+	},
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+		const messages = [];
+		console.log = msg => messages.push(msg);
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>destroy component</button>
+		`);
+		assert.deepEqual(messages, ['destroy']);
+	}
+};

test/runtime/samples/empty-component-destroy/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Empty from './Empty.svelte';
+	let active = true;
+</script>
+
+<button on:click='{() => active = false }'>destroy component</button>
+
+<svelte:component this={active ? Empty : null} />