20 files changed, 282 insertions, 0 deletions
diff --git a/packages/renderers/preact/client.js b/packages/renderers/preact/client.js
new file mode 100644
index 000000000..2b8d4bd49
--- /dev/null
+++ b/packages/renderers/preact/client.js
@@ -0,0 +1,4 @@
+import { h, hydrate } from 'preact';
+import StaticHtml from './static-html.js';
+
+export default (element) => (Component, props, children) => hydrate(h(Component, props, h(StaticHtml, { value: children })), element);
diff --git a/packages/renderers/preact/index.js b/packages/renderers/preact/index.js
new file mode 100644
index 000000000..de77fe710
--- /dev/null
+++ b/packages/renderers/preact/index.js
@@ -0,0 +1,5 @@
+export default {
+  name: '@astro-renderer/preact',
+  client: './client',
+  server: './server',
+}
diff --git a/packages/renderers/preact/package.json b/packages/renderers/preact/package.json
new file mode 100644
index 000000000..063a28b50
--- /dev/null
+++ b/packages/renderers/preact/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@astro-renderer/preact",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./server": "./server.js",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "preact": "^10.5.13",
+    "preact-render-to-string": "^5.1.18"
+  }
+}
diff --git a/packages/renderers/preact/server.js b/packages/renderers/preact/server.js
new file mode 100644
index 000000000..e7b0559f8
--- /dev/null
+++ b/packages/renderers/preact/server.js
@@ -0,0 +1,20 @@
+import { h } from 'preact';
+import { renderToString } from 'preact-render-to-string';
+import StaticHtml from './static-html.js';
+
+function check(Component, props) {
+  try {
+    return Boolean(renderToString(h(Component, props)));
+  } catch (e) {}
+  return false;
+};
+
+function renderToStaticMarkup(Component, props, children) {
+  const html = renderToString(h(Component, props, h(StaticHtml, { value: children })))
+  return { html };
+}
+
+export default { 
+  check, 
+  renderToStaticMarkup
+}
diff --git a/packages/renderers/preact/static-html.js b/packages/renderers/preact/static-html.js
new file mode 100644
index 000000000..28e31ea80
--- /dev/null
+++ b/packages/renderers/preact/static-html.js
@@ -0,0 +1,24 @@
+import { h } from 'preact';
+
+/**
+ * Astro passes `children` as a string of HTML, so we need
+ * a wrapper `div` to render that content as VNodes.
+ *
+ * As a bonus, we can signal to Preact that this subtree is
+ * entirely static and will never change via `shouldComponentUpdate`.
+ */
+const StaticHtml = ({ value }) => {
+  if (!value) return null;
+  return h('astro-fragment', { dangerouslySetInnerHTML: { __html: value }});
+}
+
+/**
+  * This tells Preact to opt-out of re-rendering this subtree,
+  * In addition to being a performance optimization,
+  * this also allows other frameworks to attach to `children`.
+  *
+  * See https://preactjs.com/guide/v8/external-dom-mutations
+  */
+StaticHtml.shouldComponentUpdate = () => false;
+
+export default StaticHtml;
diff --git a/packages/renderers/react/client.js b/packages/renderers/react/client.js
new file mode 100644
index 000000000..8e5650f6b
--- /dev/null
+++ b/packages/renderers/react/client.js
@@ -0,0 +1,5 @@
+import { createElement } from 'react';
+import { hydrate } from 'react-dom';
+import StaticHtml from './static-html.js';
+
+export default (element) => (Component, props, children) => hydrate(createElement(Component, { ...props, suppressHydrationWarning: true }, createElement(StaticHtml, { value: children, suppressHydrationWarning: true })), element);
diff --git a/packages/renderers/react/index.js b/packages/renderers/react/index.js
new file mode 100644
index 000000000..14345df7d
--- /dev/null
+++ b/packages/renderers/react/index.js
@@ -0,0 +1,5 @@
+export default {
+  name: '@astro-renderer/react',
+  client: './client',
+  server: './server',
+}
diff --git a/packages/renderers/react/package.json b/packages/renderers/react/package.json
new file mode 100644
index 000000000..f36c2813c
--- /dev/null
+++ b/packages/renderers/react/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@astro-renderer/react",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./server": "./server.js",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
+}
diff --git a/packages/renderers/react/server.js b/packages/renderers/react/server.js
new file mode 100644
index 000000000..f9d7b2c83
--- /dev/null
+++ b/packages/renderers/react/server.js
@@ -0,0 +1,20 @@
+import { createElement as h } from 'react';
+import { renderToStaticMarkup as renderToString } from 'react-dom/server.js';
+import StaticHtml from './static-html.js';
+
+function check(Component, props) {
+  try {
+    return Boolean(renderToString(h(Component, props)));
+  } catch (e) {}
+  return false;
+};
+
+function renderToStaticMarkup(Component, props, children) {
+  const html = renderToString(h(Component, props, h(StaticHtml, { value: children })))
+  return { html };
+}
+
+export default { 
+  check, 
+  renderToStaticMarkup
+};
diff --git a/packages/renderers/react/static-html.js b/packages/renderers/react/static-html.js
new file mode 100644
index 000000000..a50068605
--- /dev/null
+++ b/packages/renderers/react/static-html.js
@@ -0,0 +1,24 @@
+import { createElement as h } from 'react';
+
+/**
+ * Astro passes `children` as a string of HTML, so we need
+ * a wrapper `div` to render that content as VNodes.
+ *
+ * As a bonus, we can signal to React that this subtree is
+ * entirely static and will never change via `shouldComponentUpdate`.
+ */
+const StaticHtml = ({ value }) => {
+  if (!value) return null;
+  return h('astro-fragment', { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: value }});
+}
+
+/**
+  * This tells React to opt-out of re-rendering this subtree,
+  * In addition to being a performance optimization,
+  * this also allows other frameworks to attach to `children`.
+  *
+  * See https://preactjs.com/guide/v8/external-dom-mutations
+  */
+StaticHtml.shouldComponentUpdate = () => false;
+
+export default StaticHtml;
diff --git a/packages/renderers/svelte/Wrapper.svelte b/packages/renderers/svelte/Wrapper.svelte
new file mode 100644
index 000000000..78d4a402b
--- /dev/null
+++ b/packages/renderers/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}
+    <astro-fragment>
+      {@html __astro_children}
+    </astro-fragment>
+  {/if}
+</svelte:component>
diff --git a/packages/renderers/svelte/client.js b/packages/renderers/svelte/client.js
new file mode 100644
index 000000000..d873377c6
--- /dev/null
+++ b/packages/renderers/svelte/client.js
@@ -0,0 +1,13 @@
+import SvelteWrapper from './Wrapper.svelte';
+
+export default (target) => {
+  return (component, props, children) => {
+    try {
+      new SvelteWrapper({
+        target,
+        props: { __astro_component: component, __astro_children: children, ...props },
+        hydrate: true,
+      }); 
+    } catch (e) {}
+  }
+}
diff --git a/packages/renderers/svelte/index.js b/packages/renderers/svelte/index.js
new file mode 100644
index 000000000..b26d9f634
--- /dev/null
+++ b/packages/renderers/svelte/index.js
@@ -0,0 +1,7 @@
+export default {
+  name: '@astro-renderer/svelte',
+  snowpackPlugin: '@snowpack/plugin-svelte',
+  snowpackPluginOptions: { compilerOptions: { hydratable: true } },
+  client: './client',
+  server: './server'
+};
diff --git a/packages/renderers/svelte/package.json b/packages/renderers/svelte/package.json
new file mode 100644
index 000000000..7ce4664fd
--- /dev/null
+++ b/packages/renderers/svelte/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@astro-renderer/svelte",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./server": "./server.js",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "svelte": "^3.35.0",
+    "@snowpack/plugin-svelte": "^3.7.0"
+  }
+}
diff --git a/packages/renderers/svelte/server.js b/packages/renderers/svelte/server.js
new file mode 100644
index 000000000..101dca535
--- /dev/null
+++ b/packages/renderers/svelte/server.js
@@ -0,0 +1,15 @@
+import SvelteWrapper from './Wrapper.svelte';
+
+function check(Component) { 
+  return Component['render'] && Component['$$render'];
+}
+
+async function renderToStaticMarkup (Component, props, children) {
+  const { html } = SvelteWrapper.render({ __astro_component: Component, __astro_children: children, ...props });
+  return { html };
+}
+
+export default {
+  check,
+  renderToStaticMarkup
+};
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;