chore: add warning for invalid render function of createRawSnippet (#12535)

* chore: add warning for invalid render function of createRawSnippet

* add test

* warnings

* Update packages/svelte/messages/client-warnings/warnings.md

Co-authored-by: Rich Harris <[email protected]>

* build

* build

* build

---------

Co-authored-by: Rich Harris <[email protected]>

Author: trueadm

.changeset/nervous-dolphins-allow.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: add warning for invalid render function of createRawSnippet

packages/svelte/messages/client-warnings/warnings.md

@@ -20,6 +20,10 @@
 
 > Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
 
+## invalid_raw_snippet_render
+
+> The `render` function passed to `createRawSnippet` should return HTML for a single element
+
 ## lifecycle_double_unmount
 
 > Tried to unmount a component that was not mounted

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

@@ -11,6 +11,8 @@ import {
 import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
 import { create_fragment_from_html } from '../reconciler.js';
 import { assign_nodes } from '../template.js';
+import * as w from '../../warnings.js';
+import { DEV } from 'esm-env';
 
 /**
  * @template {(node: TemplateNode, ...args: any[]) => void} SnippetFn
@@ -89,6 +91,9 @@ export function createRawSnippet(fn) {
 				var html = snippet.render().trim();
 				var fragment = create_fragment_from_html(html);
 				element = /** @type {Element} */ (fragment.firstChild);
+				if (DEV && (element.nextSibling !== null || element.nodeType !== 3)) {
+					w.invalid_raw_snippet_render();
+				}
 				anchor.before(element);
 			}
 

packages/svelte/src/internal/client/warnings.js

@@ -60,6 +60,18 @@ export function hydration_mismatch(location) {
 	}
 }
 
+/**
+ * The `render` function passed to `createRawSnippet` should return HTML for a single element
+ */
+export function invalid_raw_snippet_render() {
+	if (DEV) {
+		console.warn(`%c[svelte] invalid_raw_snippet_render\n%cThe \`render\` function passed to \`createRawSnippet\` should return HTML for a single element`, bold, normal);
+	} else {
+		// TODO print a link to the documentation
+		console.warn("invalid_raw_snippet_render");
+	}
+}
+
 /**
  * Tried to unmount a component that was not mounted
  */

packages/svelte/tests/runtime-runes/samples/create-raw-snippet-invalid-render/_config.js

@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	skip_mode: ['hydrate'],
+
+	warnings: [
+		'The `render` function passed to `createRawSnippet` should return HTML for a single element'
+	]
+});

packages/svelte/tests/runtime-runes/samples/create-raw-snippet-invalid-render/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { createRawSnippet } from 'svelte';
+
+	const snippet = createRawSnippet(() => ({
+		render: () => `
+			<!-- --><div>123</div>
+		`
+	}));
+</script>
+
+{@render snippet()}