Enable named slots in renderers (#3652)

* feat: pass all slots to renderers

* refactor: pass `slots` as top-level props

* test: add named slot test for frameworks

* fix: nested hydration, slots that are not initially rendered

* test: add nested-recursive e2e test

* fix: render unmatched custom element children

* chore: update lockfile

* fix: unrendered slots for client:only

* fix(lit): ensure lit integration uses new slots API

* chore: add changeset

* chore: add changesets

* fix: lit slots

* feat: convert dash-case or snake_case slots to camelCase for JSX

* feat: remove tmpl special logic

* test: add slot components-in-markdown test

* refactor: prefer Object.entries.map() to for/of loop

Co-authored-by: Nate Moore <nate@astro.build>

4 files changed, 38 insertions, 52 deletions

diff --git a/packages/integrations/svelte/Wrapper.svelte b/packages/integrations/svelte/Wrapper.svelte
deleted file mode 100644
index c1ee77d91..000000000
--- a/packages/integrations/svelte/Wrapper.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-/** 
-  * Why do we need a wrapper component?
-  * 
-  * Astro passes `children` as a string of HTML, so we need
-  * a way to render that content.
-  * 
-  * Rather than passing a magical prop which needs special 
-  * handling, using this wrapper allows Svelte users to just
-  * use `<slot />` like they would for any other component.
-  */
-const { __astro_component: Component, __astro_children, ...props } = $$props;
-</script>
-
-<svelte:component this={Component} {...props}>
-  {#if __astro_children != null}
-    <astro-fragment>
-      {@html __astro_children}
-    </astro-fragment>
-  {/if}
-</svelte:component>
diff --git a/packages/integrations/svelte/Wrapper.svelte.ssr.js b/packages/integrations/svelte/Wrapper.svelte.ssr.js
deleted file mode 100644
index e6a4781a7..000000000
--- a/packages/integrations/svelte/Wrapper.svelte.ssr.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* App.svelte generated by Svelte v3.38.2 */
-import { create_ssr_component, missing_component, validate_component } from 'svelte/internal';
-
-const App = create_ssr_component(($$result, $$props, $$bindings, slots) => {
-	const { __astro_component: Component, __astro_children, ...props } = $$props;
-	const children = {};
-	if (__astro_children != null) {
-		children.default = () => `<astro-fragment>${__astro_children}</astro-fragment>`;
-	}
-
-	return `${validate_component(Component || missing_component, 'svelte:component').$$render(
-		$$result,
-		Object.assign(props),
-		{},
-		children
-	)}`;
-});
-
-export default App;
diff --git a/packages/integrations/svelte/client.js b/packages/integrations/svelte/client.js
index 3f401b544..36a8e8de1 100644
--- a/packages/integrations/svelte/client.js
+++ b/packages/integrations/svelte/client.js
@@ -1,15 +1,43 @@
-import SvelteWrapper from './Wrapper.svelte';
+const noop = () => {};
 
 export default (target) => {
-	return (component, props, children, { client }) => {
+	return (Component, props, slotted, { client }) => {
 		if (!target.hasAttribute('ssr')) return;
 		delete props['class'];
+		const slots = {};
+		for (const [key, value] of Object.entries(slotted)) {
+			slots[key] = createSlotDefinition(key, value);
+		}
 		try {
-			new SvelteWrapper({
+			new Component({
 				target,
-				props: { __astro_component: component, __astro_children: children, ...props },
+				props: { 
+					...props,
+					$$slots: slots,
+					$$scope: { ctx: [] }
+				},
 				hydrate: client !== 'only',
+				$$inline: true,
 			});
 		} catch (e) {}
 	};
 };
+
+function createSlotDefinition(key, children) {
+  return [
+    () => ({
+			// mount
+			m(target) {
+				target.insertAdjacentHTML('beforeend', `<astro-slot${key === 'default' ? '' : ` name="${key}"`}>${children}</astro-slot>`)
+			},
+			// create
+			c: noop,
+			// hydrate
+			l: noop,
+			// destroy
+			d: noop,
+		}),
+    noop,
+    noop,
+  ]
+}
diff --git a/packages/integrations/svelte/server.js b/packages/integrations/svelte/server.js
index 3c989cd5a..7a5610b4a 100644
--- a/packages/integrations/svelte/server.js
+++ b/packages/integrations/svelte/server.js
@@ -1,15 +1,13 @@
-import SvelteWrapper from './Wrapper.svelte.ssr.js';
-
 function check(Component) {
 	return Component['render'] && Component['$$render'];
 }
 
-async function renderToStaticMarkup(Component, props, children) {
-	const { html } = SvelteWrapper.render({
-		__astro_component: Component,
-		__astro_children: children,
-		...props,
-	});
+async function renderToStaticMarkup(Component, props, slotted) {
+	const slots = {};
+	for (const [key, value] of Object.entries(slotted)) {
+		slots[key] = () => `<astro-slot${key === 'default' ? '' : ` name="${key}"`}>${value}</astro-slot>`;
+	}
+	const { html } = Component.render(props, { $$slots: slots });
 	return { html };
 }