move push_element and pop_element into new dev.js file

Author: Rich-Harris

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

@@ -1,46 +1,19 @@
 import { is_promise, noop } from '../shared/utils.js';
 import { subscribe_to_store } from '../../store/utils.js';
-import {
-	UNINITIALIZED,
-	DOMBooleanAttributes,
-	RawTextElements,
-	disallowed_paragraph_contents,
-	interactive_elements,
-	is_tag_valid_with_parent
-} from '../../constants.js';
+import { UNINITIALIZED, DOMBooleanAttributes, RawTextElements } from '../../constants.js';
 import { escape_html } from '../../escaping.js';
 import { DEV } from 'esm-env';
 import { current_component, pop, push } from './context.js';
 import { BLOCK_CLOSE, BLOCK_OPEN } from './hydration.js';
 import { validate_store } from '../shared/validate.js';
 
-/**
- * @typedef {{
- * 	tag: string;
- * 	parent: null | Element;
- *  file: string;
- * }} Element
- */
-
 /**
  * @typedef {{
  * 	head: string;
  * 	html: string;
  * }} RenderOutput
  */
 
-/**
- * @typedef {{
- * 	out: string;
- * 	anchor: number;
- * 	head: {
- * 		title: string;
- * 		out: string;
- * 		anchor: number;
- * 	};
- * }} Payload
- */
-
 // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
 // https://infra.spec.whatwg.org/#noncharacter
 const INVALID_ATTR_NAME_CHAR_REGEX =
@@ -65,19 +38,14 @@ export const VoidElements = new Set([
 	'wbr'
 ]);
 
-/**
- * @type {Element | null}
- */
-let current_element = null;
-
-/** @returns {Payload} */
+/** @returns {import('#server').Payload} */
 function create_payload() {
 	return { out: '', head: { title: '', out: '', anchor: 0 }, anchor: 0 };
 }
 
 /**
- * @param {Payload} to_copy
- * @returns {Payload}
+ * @param {import('#server').Payload} to_copy
+ * @returns {import('#server').Payload}
  */
 export function copy_payload(to_copy) {
 	return {
@@ -88,8 +56,8 @@ export function copy_payload(to_copy) {
 
 /**
  * Assigns second payload to first
- * @param {Payload} p1
- * @param {Payload} p2
+ * @param {import('#server').Payload} p1
+ * @param {import('#server').Payload} p2
  * @returns {void}
  */
 export function assign_payload(p1, p2) {
@@ -99,85 +67,7 @@ export function assign_payload(p1, p2) {
 }
 
 /**
- * @param {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 {string} tag
- * @param {Payload} payload
- */
-export function push_element(tag, payload) {
-	var file;
-	if (DEV) {
-		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;
-	}
-}
-
-/**
- * @param {Payload} payload
+ * @param {import('#server').Payload} payload
  * @param {string} tag
  * @param {() => void} attributes_fn
  * @param {() => void} children_fn
@@ -241,8 +131,8 @@ export function render(component, options) {
 }
 
 /**
- * @param {Payload} payload
- * @param {(head_payload: Payload['head']) => void} fn
+ * @param {import('#server').Payload} payload
+ * @param {(head_payload: import('#server').Payload['head']) => void} fn
  * @returns {void}
  */
 export function head(payload, fn) {
@@ -266,7 +156,7 @@ export function attr(name, value, boolean) {
 }
 
 /**
- * @param {Payload} payload
+ * @param {import('#server').Payload} payload
  * @param {boolean} is_html
  * @param {Record<string, string>} props
  * @param {() => void} component
@@ -524,8 +414,8 @@ export async function value_or_fallback_async(value, fallback) {
 }
 
 /**
- * @param {Payload} payload
- * @param {void | ((payload: Payload, props: Record<string, unknown>) => void)} slot_fn
+ * @param {import('#server').Payload} payload
+ * @param {void | ((payload: import('#server').Payload, props: Record<string, unknown>) => void)} slot_fn
  * @param {Record<string, unknown>} slot_props
  * @param {null | (() => void)} fallback_fn
  * @returns {void}
@@ -648,6 +538,8 @@ export function once(get_value) {
 
 export { push, pop } from './context.js';
 
+export { push_element, pop_element } from './dev.js';
+
 export {
 	add_snippet_symbol,
 	validate_component,

packages/svelte/src/internal/server/types.d.ts

@@ -10,3 +10,13 @@ export interface Component {
 	 */
 	function?: any;
 }
+
+export interface Payload {
+	out: string;
+	anchor: number;
+	head: {
+		title: string;
+		out: string;
+		anchor: number;
+	};
+}