pass location info, remove unnecessary if (DEV) block

Author: Rich-Harris

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -27,6 +27,7 @@ import { DOMBooleanAttributes, HYDRATION_END, HYDRATION_START } from '../../../.
 import { escape_html } from '../../../../escaping.js';
 import { sanitize_template_string } from '../../../utils/sanitize_template_string.js';
 import { BLOCK_CLOSE, BLOCK_CLOSE_ELSE } from '../../../../internal/server/hydration.js';
+import { locator } from '../../../state.js';
 
 export const block_open = t_string(`<!--${HYDRATION_START}-->`);
 export const block_close = t_string(`<!--${HYDRATION_END}-->`);
@@ -1364,8 +1365,19 @@ const template_visitors = {
 		}
 
 		if (context.state.options.dev) {
+			const location = /** @type {import('locate-character').Location} */ (locator(node.start));
 			context.state.template.push(
-				t_statement(b.stmt(b.call('$.push_element', b.literal(node.name), b.id('$$payload'))))
+				t_statement(
+					b.stmt(
+						b.call(
+							'$.push_element',
+							b.id('$$payload'),
+							b.literal(node.name),
+							b.literal(location.line),
+							b.literal(location.column)
+						)
+					)
+				)
 			);
 		}
 

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

@@ -0,0 +1,102 @@
+import {
+	disallowed_paragraph_contents,
+	interactive_elements,
+	is_tag_valid_with_parent
+} from '../../constants.js';
+import { current_component } from './context.js';
+
+/**
+ * @typedef {{
+ * 	tag: string;
+ * 	parent: null | Element;
+ *  file: string;
+ * }} Element
+ */
+
+/**
+ * @type {Element | null}
+ */
+let current_element = null;
+
+/**
+ * @param {import('#server').Payload} payload
+ * @param {string} message
+ */
+function error_on_client(payload, message) {
+	message =
+		`Svelte SSR validation error:\n\n${message}\n\n` +
+		'Ensure your components render valid HTML as the browser will try to repair invalid HTML, ' +
+		'which may result in content being shifted around and will likely result in a hydration mismatch.';
+	// eslint-disable-next-line no-console
+	console.error(message);
+	payload.head.out += `<script>console.error(\`${message}\`)</script>`;
+}
+
+/**
+ * @param {string} file
+ */
+function print_file(file) {
+	return file ? `(${file})` : '';
+}
+
+/**
+ * @param {import('#server').Payload} payload
+ * @param {string} tag
+ * @param {number} line
+ * @param {number} column
+ */
+export function push_element(payload, tag, line, column) {
+	var file;
+
+	if (current_component !== null) {
+		const filename = current_component.function.filename;
+		if (filename) {
+			file = filename.split('/').at(-1);
+		}
+	}
+
+	if (current_element !== null && !is_tag_valid_with_parent(tag, current_element.tag)) {
+		error_on_client(
+			payload,
+			`<${tag}> ${print_file(file)} is not a valid child element of <${current_element.tag}> ${print_file(current_element.file)}`
+		);
+	}
+
+	if (interactive_elements.has(tag)) {
+		let element = current_element;
+		while (element !== null) {
+			if (interactive_elements.has(element.tag)) {
+				error_on_client(
+					payload,
+					`<${tag}> ${print_file(file)} is not a valid child element of <${element.tag}> ${print_file(element.file)}`
+				);
+			}
+			element = element.parent;
+		}
+	}
+
+	if (disallowed_paragraph_contents.includes(tag)) {
+		let element = current_element;
+		while (element !== null) {
+			if (element.tag === 'p') {
+				error_on_client(
+					payload,
+					`<${tag}> ${print_file(file)} is not a valid child element of <p> ${print_file(element.file)}`
+				);
+			}
+			element = element.parent;
+		}
+	}
+
+	current_element = {
+		tag,
+		parent: current_element,
+		file
+	};
+}
+
+export function pop_element() {
+	if (current_element !== null) {
+		current_element = current_element.parent;
+	}
+}