interop for passing slots but rendering them with render tags

Author: dummdidumm

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -1786,6 +1786,10 @@ export const template_visitors = {
 		const raw_args = unwrap_optional(node.expression).arguments;
 		const is_reactive =
 			callee.type !== 'Identifier' || context.state.scope.get(callee.name)?.kind !== 'normal';
+		const needs_backwards_compat =
+			callee.type === 'Identifier' &&
+			raw_args.length < 2 &&
+			context.state.scope.get(callee.name)?.kind === 'prop';
 
 		/** @type {import('estree').Expression[]} */
 		const args = [context.state.node];
@@ -1798,7 +1802,19 @@ export const template_visitors = {
 			snippet_function = b.call('$.validate_snippet', snippet_function);
 		}
 
-		if (is_reactive) {
+		if (needs_backwards_compat) {
+			context.state.init.push(
+				b.stmt(
+					b.call(
+						'$.render_snippet_or_slot',
+						b.thunk(snippet_function),
+						b.id('$$props'),
+						b.literal(callee.name),
+						...args
+					)
+				)
+			);
+		} else if (is_reactive) {
 			context.state.init.push(b.stmt(b.call('$.snippet', b.thunk(snippet_function), ...args)));
 		} else {
 			context.state.init.push(

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

@@ -1303,6 +1303,10 @@ const template_visitors = {
 
 		const callee = unwrap_optional(node.expression).callee;
 		const raw_args = unwrap_optional(node.expression).arguments;
+		const needs_backwards_compat =
+			callee.type === 'Identifier' &&
+			raw_args.length < 2 &&
+			context.state.scope.get(callee.name)?.kind === 'prop';
 
 		const expression = /** @type {import('estree').Expression} */ (context.visit(callee));
 		const snippet_function = state.options.dev
@@ -1313,17 +1317,34 @@ const template_visitors = {
 			return /** @type {import('estree').Expression} */ (context.visit(arg));
 		});
 
-		state.template.push(
-			t_statement(
-				b.stmt(
-					(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
-						snippet_function,
-						b.id('$$payload'),
-						...snippet_args
+		if (needs_backwards_compat) {
+			state.template.push(
+				t_statement(
+					b.stmt(
+						b.call(
+							'$.render_snippet_or_slot',
+							snippet_function,
+							b.id('$$props'),
+							b.literal(callee.name),
+							b.id('$$payload'),
+							...snippet_args
+						)
 					)
 				)
-			)
-		);
+			);
+		} else {
+			state.template.push(
+				t_statement(
+					b.stmt(
+						(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
+							snippet_function,
+							b.id('$$payload'),
+							...snippet_args
+						)
+					)
+				)
+			);
+		}
 
 		state.template.push(block_close);
 	},

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

@@ -57,3 +57,34 @@ export function wrap_snippet(fn) {
 		}
 	);
 }
+
+/**
+ * Remove this once slots are gone
+ * @param {any} snippet_fn
+ * @param {Record<string, any>} $$props
+ * @param {string} name
+ * @param {Element} node
+ * @param {any} slot_props
+ */
+export function render_snippet_or_slot(snippet_fn, $$props, name, node, slot_props) {
+	if ($$props.$$slots) {
+		const slot = $$props.$$slots[name === 'children' ? 'default' : name];
+		if (typeof slot === 'function') {
+			let props = undefined;
+			if (slot_props) {
+				props = new Proxy(
+					{},
+					{
+						get(_, key) {
+							return slot_props()?.[key];
+						}
+					}
+				);
+			}
+			slot(node, props);
+			return;
+		}
+	}
+
+	snippet(snippet_fn, node, slot_props);
+}

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

@@ -15,7 +15,7 @@ export { key_block as key } from './dom/blocks/key.js';
 export { css_props } from './dom/blocks/css-props.js';
 export { index, each } from './dom/blocks/each.js';
 export { html } from './dom/blocks/html.js';
-export { snippet, wrap_snippet } from './dom/blocks/snippet.js';
+export { snippet, wrap_snippet, render_snippet_or_slot } from './dom/blocks/snippet.js';
 export { component } from './dom/blocks/svelte-component.js';
 export { element } from './dom/blocks/svelte-element.js';
 export { head } from './dom/blocks/svelte-head.js';

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

@@ -563,6 +563,26 @@ export function sanitize_slots(props) {
 	return sanitized;
 }
 
+/**
+ * Remove this once slots are gone
+ * @param {any} snippet_fn
+ * @param {Record<string, any>} $$props
+ * @param {string} name
+ * @param {Payload} payload
+ * @param {any} slot_props
+ */
+export function render_snippet_or_slot(snippet_fn, $$props, name, payload, slot_props) {
+	if ($$props.$$slots) {
+		const slot = $$props.$$slots[name === 'children' ? 'default' : name];
+		if (typeof slot === 'function') {
+			slot(payload, slot_props);
+			return;
+		}
+	}
+
+	snippet_fn?.(payload, slot_props);
+}
+
 /**
  * Legacy mode: If the prop has a fallback and is bound in the
  * parent component, propagate the fallback value upwards.

packages/svelte/tests/runtime-runes/samples/snippet-slot-interop-2/Child.svelte

@@ -0,0 +1,6 @@
+<script>
+    let { children, named } = $props();
+</script>
+
+<p>{@render children()}</p>
+{@render named({foo: 'foo'})}

packages/svelte/tests/runtime-runes/samples/snippet-slot-interop-2/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<p>Default</p> <p slot="named">Named foo</p>`
+});

packages/svelte/tests/runtime-runes/samples/snippet-slot-interop-2/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child>
+	Default
+	<p slot="named" let:foo>Named {foo}</p>
+</Child>