address feedback

Author: trueadm

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

@@ -67,7 +67,7 @@ export function wrap_snippet(component, fn) {
  * @param {{
  * 	 mount: (...params: any[]) => Element,
  *   hydrate?: (element: Element, ...params: any[]) => void,
- *   render: (...params: any[]) => string
+ *   render: (...params: any[]) => { head: string, body: string }
  * }} options
  */
 export function createRawSnippet({ mount, hydrate }) {

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

@@ -160,12 +160,18 @@ export function head(payload, fn) {
  * @param {{
  * 	 mount: (...params: any[]) => Element,
  *   hydrate?: (element: Element, ...params: any[]) => void,
- *   render: (...params: any[]) => string
+ *   render: (...params: any[]) => { head: string, body: string }
  * }} options
  */
 export function createRawSnippet({ render }) {
 	const snippet_fn = (/** @type {Payload} */ payload, /** @type {any[]} */ ...args) => {
-		payload.out += render(...args);
+		const { head, body } = render(...args);
+		if (body) {
+			payload.out += body;
+		}
+		if (head) {
+			payload.head.out += body;
+		}
 	};
 	add_snippet_symbol(snippet_fn);
 	return snippet_fn;

packages/svelte/tests/runtime-runes/samples/snippet-raw-args/main.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { createRawSnippet } from 'svelte';
+	import { createRawSnippet } from 'svelte';
 
 	let count = $state(0);
 
@@ -14,19 +14,16 @@
 			return div;
 		},
 		hydrate(element, count) {
-
 			$effect(() => {
 				element.textContent = count();
 			});
-
 		},
 		render(count) {
-			return `<div>${count}</div>`;
+			return { body: `<div>${count}</div>` };
 		}
 	});
 </script>
 
-<div>
-	{@render snippet(count)}
-</div>
+{@render snippet(count)}
+
 <button onclick={() => count++}>+</button>

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

@@ -8,7 +8,7 @@
 			return p;
 		},
 		render() {
-			return '<p>hello world</p>';
+			return { body: '<p>hello world</p>' };
 		}
 	});
 </script>