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, 29 insertions, 34 deletions

diff --git a/src/frontend/render/vue.ts b/src/frontend/render/vue.ts
index 6b89aa11e..bcf6b70bd 100644
--- a/src/frontend/render/vue.ts
+++ b/src/frontend/render/vue.ts
@@ -1,39 +1,34 @@
-import type { Component } from 'vue';
-
 import { renderToString } from '@vue/server-renderer';
 import { createSSRApp, h as createElement } from 'vue';
+import { Renderer, createRenderer } from './renderer';
 
-export function __vue_static(VueComponent: Component) {
-  return async (attrs: Record<string, any>, ...children: any): Promise<string> => {
-    const app = createSSRApp({
-      components: {
-        VueComponent,
-      },
-      render() {
-        return createElement(VueComponent as any, attrs);
-      },
-    });
-
-    const html = await renderToString(app);
-
-    return html;
-  };
-}
-
-export function __vue_dynamic(VueComponent: Component, importUrl: string, vueUrl: 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}';
-          import {createApp, h as createElement} from '${vueUrl}';
+const Vue: Renderer = {
+  renderStatic(Component) {
+    return (props, ...children) => {
+      const app = createSSRApp({
+        components: {
+          Component,
+        },
+        render() {
+          return createElement(Component as any, props);
+        },
+      });
+      // Uh oh, Vue's `renderToString` is async... Does that mean everything needs to be?
+      return renderToString(app) as any;
+    };
+  },
+  imports: {
+    vue: ['createApp', 'h as createElement'],
+  },
+  render({ Component, root, props }) {
+    return `const App = { render() { return createElement(${Component}, ${props} )} };
+createApp(App).mount(${root})`;
+  },
+};
 
-          const App = {
-            render() {
-              return createElement(Component, ${JSON.stringify(attrs)});
-            }
-          };
+const renderer = createRenderer(Vue);
 
-          createApp(App).mount(document.getElementById('${placeholderId}'));
-      </script>`;
-  };
-}
+export const __vue_static = renderer.static;
+export const __vue_load = renderer.load;
+export const __vue_idle = renderer.idle;
+export const __vue_visible = renderer.visible;