Renderer plugins (#231)

* refactor: pluggable renderers

* refactor: cache renderer per component

* docs: update comments on snowpack plugin `transform` method

* docs: add comments to renderer plugins

* refactor: convert components to Map

* fix: pass children through to astro __render

* refactor: move Components/ComponentInfo to shared types

* refactor: remove `gatherRuntimes` step, just scan output for imports

* refactor: update isComponentTag logic

* chore: move dependencies to renderers

* fix: cross-platform transform injection

* feat: defer renderer to react, fallback to preact

* fix: use double quotes in generated script

* test: fix failing children tests

* test: add workspaceRoot to all tests

* fix: pass props to renderer check

* chore: add test:core script back for convenience

* chore: remove unused external

* chore: rename renderers

* chore: add astring, estree-util-value-to-estree

* chore: render-component => __astro_component

* refactor: split hydrate logic to own file

* refactor: use `astro-fragment` rather than `div`

* chore: remove unused hooks

* chore: delete unused file

* chore: add changesets

* fix: Astro renderer should be async

* fix: remove <astro-fragment> for static content

* test: fix failing test

* chore: normalize config interface

* feat: allow renderers to inject a snowpackPlugin

* fix: resolve import URL before using dynamic import

* refactor: update renderers to use separate /server entrypoint

* refactor: update server renderer interface

* fix: get renderers working again

* test: debug failing test

* test: better debug

* test: better debug

* test: remove debug

* fix: support esm and cjs packages via "resolve"

* refactor: split hydrate functions into individual files

* fix: dependency resolution relative to projectRoot

* fix: @snowpack/plugin-postcss needs to be hoisted

* fix: do not test prettier-plugin-astro as it's not ready for primetime

5 files changed, 74 insertions, 0 deletions

diff --git a/packages/renderers/vue/client.js b/packages/renderers/vue/client.js
new file mode 100644
index 000000000..474307cda
--- /dev/null
+++ b/packages/renderers/vue/client.js
@@ -0,0 +1,7 @@
+import { h, createSSRApp } from 'vue';
+import StaticHtml from './static-html.js';
+
+export default (element) => (Component, props, children) => {
+    const app = createSSRApp({ render: () => h(Component, props, { default: () => h(StaticHtml, { value: children }) })});
+    app.mount(element, true);
+};
diff --git a/packages/renderers/vue/index.js b/packages/renderers/vue/index.js
new file mode 100644
index 000000000..912eac217
--- /dev/null
+++ b/packages/renderers/vue/index.js
@@ -0,0 +1,6 @@
+export default {
+  name: '@astro-renderer/vue',
+  snowpackPlugin: '@snowpack/plugin-vue',
+  client: './client',
+  server: './server'
+};
diff --git a/packages/renderers/vue/package.json b/packages/renderers/vue/package.json
new file mode 100644
index 000000000..e3d77dd62
--- /dev/null
+++ b/packages/renderers/vue/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@astro-renderer/vue",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./server": "./server.js",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "vue": "^3.0.10",
+    "@vue/server-renderer": "^3.0.10",
+    "@snowpack/plugin-vue": "^2.5.0"
+  }
+}
diff --git a/packages/renderers/vue/server.js b/packages/renderers/vue/server.js
new file mode 100644
index 000000000..d1ecbc87f
--- /dev/null
+++ b/packages/renderers/vue/server.js
@@ -0,0 +1,18 @@
+import { renderToString } from '@vue/server-renderer';
+import { h, createSSRApp } from 'vue';
+import StaticHtml from './static-html.js';
+
+function check(Component) {
+  return Component['ssrRender'];
+}
+
+async function renderToStaticMarkup(Component, props, children) {
+  const app = createSSRApp({ render: () => h(Component, props, { default: () => h(StaticHtml, { value: children }) })});
+  const html = await renderToString(app);
+  return { html };
+}
+
+export default {
+  check,
+  renderToStaticMarkup
+}
diff --git a/packages/renderers/vue/static-html.js b/packages/renderers/vue/static-html.js
new file mode 100644
index 000000000..bd8c41c83
--- /dev/null
+++ b/packages/renderers/vue/static-html.js
@@ -0,0 +1,27 @@
+import { h, defineComponent } from 'vue';
+
+/**
+ * Astro passes `children` as a string of HTML, so we need
+ * a wrapper `div` to render that content as VNodes.
+ *
+ * This is the Vue + JSX equivalent of using `<div v-html="value" />`
+ */
+const StaticHtml = defineComponent({
+  props: {
+    value: String
+  },
+  setup({ value }) {
+    if (!value) return () => null;
+    return () => h('astro-fragment', { innerHTML: value })
+  }
+})
+
+/** 
+  * Other frameworks have `shouldComponentUpdate` in order to signal
+  * that this subtree is entirely static and will not be updated
+  * 
+  * Fortunately, Vue is smart enough to figure that out without any
+  * help from us, so this just works out of the box!
+  */
+
+export default StaticHtml;