change signature

Author: Rich-Harris

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

@@ -1,6 +1,6 @@
+/** @import { Snippet } from 'svelte' */
 /** @import { Effect, TemplateNode } from '#client' */
 /** @import { Getters } from '#shared' */
-import { run } from '../../../shared/utils.js';
 import { add_snippet_symbol } from '../../../shared/validate.js';
 import { EFFECT_TRANSPARENT } from '../../constants.js';
 import { branch, block, destroy_effect } from '../../reactivity/effects.js';
@@ -68,29 +68,31 @@ export function wrap_snippet(component, fn) {
 /**
  * Create a snippet programmatically
  * @template {unknown[]} Params
- * @param {{
- *   render: (...params: Params) => string
- *   update?: (element: Element, ...params: Getters<Params>) => void,
- * }} options
- * @returns {import('svelte').Snippet<Params>}
+ * @param {(...params: Getters<Params>) => {
+ *   render: () => string
+ *   setup?: (element: Element) => void
+ * }} fn
+ * @returns {Snippet<Params>}
  */
-export function createRawSnippet({ render, update }) {
+export function createRawSnippet(fn) {
 	return add_snippet_symbol(
 		(/** @type {TemplateNode} */ anchor, /** @type {Getters<Params>} */ ...params) => {
+			var snippet = fn(...params);
+
 			/** @type {Element} */
 			var element;
 
 			if (hydrating) {
 				element = /** @type {Element} */ (hydrate_node);
 				hydrate_next();
 			} else {
-				var html = render(.../** @type {Params} */ (params.map(run)));
+				var html = snippet.render().trim();
 				var fragment = create_fragment_from_html(html);
 				element = /** @type {Element} */ (fragment.firstChild);
 				anchor.before(element);
 			}
 
-			update?.(element, ...params);
+			snippet.setup?.(element);
 			assign_nodes(element, element);
 		}
 	);

packages/svelte/src/internal/server/blocks/snippet.js

@@ -6,16 +6,17 @@ import { add_snippet_symbol } from '../../shared/validate.js';
 /**
  * Create a snippet programmatically
  * @template {unknown[]} Params
- * @param {{
- *   render: (...params: Params) => string
- *   update?: (element: Element, ...params: Getters<Params>) => void,
- * }} options
+ * @param {(...params: Getters<Params>) => {
+ *   render: () => string
+ *   setup?: (element: Element) => void
+ * }} fn
  * @returns {Snippet<Params>}
  */
-export function createRawSnippet({ render }) {
-	const snippet_fn = (/** @type {Payload} */ payload, /** @type {Params} */ ...args) => {
-		payload.out += render(...args);
-	};
-	add_snippet_symbol(snippet_fn);
-	return /** @type {Snippet} */ (snippet_fn);
+export function createRawSnippet(fn) {
+	return add_snippet_symbol((/** @type {Payload} */ payload, /** @type {Params} */ ...args) => {
+		var getters = /** @type {Getters<Params>} */ (args.map((value) => () => value));
+		payload.out += fn(...getters)
+			.render()
+			.trim();
+	});
 }

packages/svelte/tests/hydration/samples/snippet-raw-hydrate/main.svelte

@@ -1,14 +1,14 @@
 <script>
 	import { createRawSnippet } from 'svelte';
 
-	const snippet = createRawSnippet({
-		render() {
-			return `<p>rendered</p>`;
-		},
-		update(p) {
+	const snippet = createRawSnippet(() => ({
+		render: () => `
+			<p>rendered</p>
+		`,
+		setup(p) {
 			p.textContent = 'hydrated';
 		}
-	});
+	}));
 </script>
 
 {@render snippet()}

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

@@ -3,16 +3,16 @@
 
 	let count = $state(0);
 
-	const hello = createRawSnippet({
-		render(count) {
-			return `<p>clicks: ${count}</p>`;
-		},
-		update(p, count) {
+	const hello = createRawSnippet((count) => ({
+		render: () => `
+			<p>clicks: ${count()}</p>
+		`,
+		setup(p) {
 			$effect(() => {
 				p.textContent = `clicks: ${count()}`
 			});
 		}
-	});
+	}));
 </script>
 
 <button onclick={() => count += 1}>click</button>

packages/svelte/types/index.d.ts

@@ -368,10 +368,10 @@ declare module 'svelte' {
 	/**
 	 * Create a snippet programmatically
 	 * */
-	export function createRawSnippet<Params extends unknown[]>({ render, update }: {
-		render: (...params: Params) => string;
-		update?: (element: Element, ...params: Getters<Params>) => void;
-	}): import("svelte").Snippet<Params>;
+	export function createRawSnippet<Params extends unknown[]>(fn: (...params: Getters<Params>) => {
+		render: () => string;
+		setup?: (element: Element) => void;
+	}): Snippet<Params>;
 	/**
 	 * Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component.
 	 * Transitions will play during the initial render unless the `intro` option is set to `false`.