2 files changed, 35 insertions, 0 deletions
diff --git a/packages/integrations/svelte/Wrapper.svelte b/packages/integrations/svelte/Wrapper.svelte
new file mode 100644
index 000000000..c1ee77d91
--- /dev/null
+++ b/packages/integrations/svelte/Wrapper.svelte
@@ -0,0 +1,21 @@
+<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
new file mode 100644
index 000000000..9bca437b5
--- /dev/null
+++ b/packages/integrations/svelte/Wrapper.svelte.ssr.js
@@ -0,0 +1,14 @@
+/* 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;