Support children inside of components (#72)

* chore(examples): add kitchen-sink

* feat: support children in rendered components

* feat: add support for rendering children in Svelte

* fix: cleanup p/react fragment children

* chore: add @ts-nocheck to svelte files

* chore: update lockfiles

* fix: types

* feat: memoize frontend/renderer/utils

* fix: disable eslint for compiled SvelteWrapper

* fix: add missing dep

Co-authored-by: Nate Moore <nate@skypack.dev>

1 files changed, 7 insertions, 7 deletions

diff --git a/src/frontend/render/svelte.ts b/src/frontend/render/svelte.ts
index d3c11638d..7d657c3f7 100644
--- a/src/frontend/render/svelte.ts
+++ b/src/frontend/render/svelte.ts
@@ -1,20 +1,20 @@
 import type { ComponentRenderer } from '../../@types/renderer';
 import type { SvelteComponent } from 'svelte';
 import { createRenderer } from './renderer';
+import SvelteWrapper from '../SvelteWrapper.svelte.server';
 
 const SvelteRenderer: ComponentRenderer<SvelteComponent> = {
   renderStatic(Component) {
     return async (props, ...children) => {
-      const { html } = Component.render(props);
+      const { html } = SvelteWrapper.render({ __astro_component: Component, __astro_children: children.join('\n'), ...props });
       return html;
     };
   },
-  render({ Component, root, props }) {
-    return `new ${Component}({
-      target: ${root},
-      props: ${props},
-      hydrate: true
-    })`;
+  imports: {
+    'astro/frontend/runtime/svelte': ['default: render']
+  },
+  render({ Component, root, props, childrenAsString }) {
+    return `render(${root}, ${Component}, ${props}, ${childrenAsString});`;
   },
 };