chore: tidy up (#12336)

* chore: tidy up

* changeset

* reverse wrap_snippet argument order, for more compact output

* more tidy-up

.changeset/eleven-cows-judge.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: reverse parent/child order in invalid HTML warning

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -883,7 +883,7 @@ function serialize_inline_component(node, component_name, context, anchor = cont
 				b.init(
 					'children',
 					context.state.options.dev
-						? b.call('$.wrap_snippet', slot_fn, b.id(context.state.analysis.name))
+						? b.call('$.wrap_snippet', b.id(context.state.analysis.name), slot_fn)
 						: slot_fn
 				)
 			);
@@ -2752,7 +2752,7 @@ export const template_visitors = {
 		let snippet = b.arrow(args, body);
 
 		if (context.state.options.dev) {
-			snippet = b.call('$.wrap_snippet', snippet, b.id(context.state.analysis.name));
+			snippet = b.call('$.wrap_snippet', b.id(context.state.analysis.name), snippet);
 		}
 
 		const declaration = b.const(node.expression, snippet);

packages/svelte/src/internal/client/dom/blocks/await.js

@@ -1,3 +1,4 @@
+/** @import { Effect, Source, TemplateNode } from '#client' */
 import { is_promise, noop } from '../../../shared/utils.js';
 import {
 	current_component_context,
@@ -20,10 +21,10 @@ const CATCH = 2;
 
 /**
  * @template V
- * @param {Comment} anchor
+ * @param {TemplateNode} anchor
  * @param {(() => Promise<V>)} get_input
  * @param {null | ((anchor: Node) => void)} pending_fn
- * @param {null | ((anchor: Node, value: import('#client').Source<V>) => void)} then_fn
+ * @param {null | ((anchor: Node, value: Source<V>) => void)} then_fn
  * @param {null | ((anchor: Node, error: unknown) => void)} catch_fn
  * @returns {void}
  */
@@ -37,13 +38,13 @@ export function await_block(anchor, get_input, pending_fn, then_fn, catch_fn) {
 	/** @type {V | Promise<V>} */
 	var input;
 
-	/** @type {import('#client').Effect | null} */
+	/** @type {Effect | null} */
 	var pending_effect;
 
-	/** @type {import('#client').Effect | null} */
+	/** @type {Effect | null} */
 	var then_effect;
 
-	/** @type {import('#client').Effect | null} */
+	/** @type {Effect | null} */
 	var catch_effect;
 
 	var input_source = runes

packages/svelte/src/internal/client/dom/blocks/css-props.js

@@ -1,5 +1,6 @@
+/** @import { TemplateNode } from '#client' */
 import { hydrating, set_hydrate_nodes } from '../hydration.js';
-import { render_effect } from '../../reactivity/effects.js';
+import { render_effect, teardown } from '../../reactivity/effects.js';
 
 /**
  * @param {HTMLDivElement | SVGGElement} element
@@ -8,29 +9,24 @@ import { render_effect } from '../../reactivity/effects.js';
  */
 export function css_props(element, get_styles) {
 	if (hydrating) {
-		set_hydrate_nodes(
+		set_hydrate_nodes(/** @type {TemplateNode[]} */ ([...element.childNodes]).slice(0, -1));
-			/** @type {import('#client').TemplateNode[]} */ ([...element.childNodes]).slice(0, -1)
-		);
 	}
 
 	render_effect(() => {
-		render_effect(() => {
+		var styles = get_styles();
-			var styles = get_styles();
 
-			for (var key in styles) {
+		for (var key in styles) {
-				var value = styles[key];
+			var value = styles[key];
 
-				if (value) {
+			if (value) {
-					element.style.setProperty(key, value);
+				element.style.setProperty(key, value);
-				} else {
+			} else {
-					element.style.removeProperty(key);
+				element.style.removeProperty(key);
-				}
 			}
-		});
+		}
+	});
 
-		return () => {
+	teardown(() => {
-			// TODO use `teardown` instead of creating a nested effect, post-https://github.com/sveltejs/svelte/pull/11936
+		element.remove();
-			element.remove();
-		};
 	});
 }

packages/svelte/src/internal/client/dom/blocks/html.js

@@ -1,3 +1,4 @@
+/** @import { Effect, TemplateNode } from '#client' */
 import { block, branch, destroy_effect } from '../../reactivity/effects.js';
 import { get_start, hydrate_nodes, hydrating } from '../hydration.js';
 import { create_fragment_from_html } from '../reconciler.js';
@@ -13,7 +14,7 @@ import { assign_nodes } from '../template.js';
 export function html(anchor, get_value, svg, mathml) {
 	var value = '';
 
-	/** @type {import('#client').Effect | null} */
+	/** @type {Effect | null} */
 	var effect;
 
 	block(() => {
@@ -46,8 +47,8 @@ export function html(anchor, get_value, svg, mathml) {
 			}
 
 			assign_nodes(
-				/** @type {import('#client').TemplateNode} */ (node.firstChild),
+				/** @type {TemplateNode} */ (node.firstChild),
-				/** @type {import('#client').TemplateNode} */ (node.lastChild)
+				/** @type {TemplateNode} */ (node.lastChild)
 			);
 
 			if (svg || mathml) {

packages/svelte/src/internal/client/dom/blocks/snippet.js

@@ -1,3 +1,4 @@
+/** @import { Effect, TemplateNode } from '#client' */
 import { add_snippet_symbol } from '../../../shared/validate.js';
 import { EFFECT_TRANSPARENT } from '../../constants.js';
 import { branch, block, destroy_effect } from '../../reactivity/effects.js';
@@ -7,8 +8,8 @@ import {
 } from '../../runtime.js';
 
 /**
- * @template {(node: import('#client').TemplateNode, ...args: any[]) => import('#client').Dom} SnippetFn
+ * @template {(node: TemplateNode, ...args: any[]) => void} SnippetFn
- * @param {import('#client').TemplateNode} anchor
+ * @param {TemplateNode} anchor
  * @param {() => SnippetFn | null | undefined} get_snippet
  * @param {(() => any)[]} args
  * @returns {void}
@@ -17,7 +18,7 @@ export function snippet(anchor, get_snippet, ...args) {
 	/** @type {SnippetFn | null | undefined} */
 	var snippet;
 
-	/** @type {import('#client').Effect | null} */
+	/** @type {Effect | null} */
 	var snippet_effect;
 
 	block(() => {
@@ -37,20 +38,18 @@ export function snippet(anchor, get_snippet, ...args) {
 /**
  * In development, wrap the snippet function so that it passes validation, and so that the
  * correct component context is set for ownership checks
- * @param {(node: import('#client').TemplateNode, ...args: any[]) => import('#client').Dom} fn
  * @param {any} component
+ * @param {(node: TemplateNode, ...args: any[]) => void} fn
  */
-export function wrap_snippet(fn, component) {
+export function wrap_snippet(component, fn) {
-	return add_snippet_symbol(
+	return add_snippet_symbol((/** @type {TemplateNode} */ node, /** @type {any[]} */ ...args) => {
-		(/** @type {import('#client').TemplateNode} */ node, /** @type {any[]} */ ...args) => {
+		var previous_component_function = dev_current_component_function;
-			var previous_component_function = dev_current_component_function;
+		set_dev_current_component_function(component);
-			set_dev_current_component_function(component);
 
-			try {
+		try {
-				return fn(node, ...args);
+			return fn(node, ...args);
-			} finally {
+		} finally {
-				set_dev_current_component_function(previous_component_function);
+			set_dev_current_component_function(previous_component_function);
-			}
 		}
-	);
+	});
 }

packages/svelte/src/internal/client/dom/blocks/svelte-element.js

@@ -69,7 +69,6 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 				pause_effect(effect, () => {
 					effect = null;
 					current_tag = null;
-					element?.remove();
 				});
 			} else if (next_tag === current_tag) {
 				// same tag as is currently rendered — abort outro
@@ -83,7 +82,6 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 
 		if (next_tag && next_tag !== current_tag) {
 			effect = branch(() => {
-				const prev_element = element;
 				element = hydrating
 					? /** @type {Element} */ (element)
 					: ns
@@ -103,10 +101,6 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 					};
 				}
 
-				if (prev_element && !hydrating) {
-					prev_element.remove();
-				}
-
 				if (render_fn) {
 					// If hydrating, use the existing ssr comment as the anchor so that the
 					// inner open and close methods can pick up the existing nodes correctly

packages/svelte/src/internal/server/dev.js

@@ -38,7 +38,7 @@ function stringify(element) {
  */
 function print_error(payload, parent, child) {
 	var message =
-		`${stringify(child)} cannot contain ${stringify(parent)}\n\n` +
+		`${stringify(parent)} cannot contain ${stringify(child)}\n\n` +
 		'This can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.';
 
 	if ((seen ??= new Set()).has(message)) return;

packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand-declaration-only/_config.js

@@ -15,7 +15,6 @@ export default test({
 		assert.equal(window.getComputedStyle(p2).color, 'red');
 
 		const btn = target.querySelector('button');
-		console.log(btn);
 		btn?.click();
 		flushSync();
 

packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js

@@ -32,7 +32,7 @@ export default test({
 		if (variant === 'hydrate') {
 			assert.equal(
 				log[0],
-				'`<h1>` (Component.svelte:1:0) cannot contain `<p>` (main.svelte:5:0)\n\n' +
+				'`<p>` (main.svelte:5:0) cannot contain `<h1>` (Component.svelte:1:0)\n\n' +
 					'This can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'
 			);
 		}