New hydration methods (#29)

* WIP: new hydration methods

* refactor: genericize load/idle/visible renderers

* fix: do not pass "data-astro-id" to component

* docs: add hydration section to README

* docs: update README

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

1 files changed, 20 insertions, 21 deletions

diff --git a/src/frontend/render/svelte.ts b/src/frontend/render/svelte.ts
index 51cb778db..15676e8c6 100644
--- a/src/frontend/render/svelte.ts
+++ b/src/frontend/render/svelte.ts
@@ -1,24 +1,23 @@
-import { SvelteComponent as Component } from 'svelte';
+import { Renderer, createRenderer } from './renderer';
 
-export function __svelte_static(SvelteComponent: Component) {
-  return (attrs: Record<string, any>, ...children: any): string => {
-    // TODO include head and css stuff too...
-    const { html } = SvelteComponent.render(attrs);
+const SvelteRenderer: Renderer = {
+  renderStatic(Component) {
+    return (props, ...children) => {
+      const { html } = Component.render(props);
+      return html;
+    };
+  },
+  render({ Component, root, props }) {
+    return `new ${Component}({
+      target: ${root},
+      props: ${props}
+    })`;
+  },
+};
 
-    return html;
-  };
-}
+const renderer = createRenderer(SvelteRenderer);
 
-export function __svelte_dynamic(SvelteComponent: Component, importUrl: string) {
-  const placeholderId = `placeholder_${String(Math.random())}`;
-  return (attrs: Record<string, string>, ...children: any) => {
-    return `<div id="${placeholderId}"></div><script type="module">
-          import Component from '${importUrl}';
-
-          new Component({
-            target: document.getElementById('${placeholderId}'),
-            props: ${JSON.stringify(attrs)}
-          });
-      </script>`;
-  };
-}
+export const __svelte_static = renderer.static;
+export const __svelte_load = renderer.load;
+export const __svelte_idle = renderer.idle;
+export const __svelte_visible = renderer.visible;