5 files changed, 69 insertions, 0 deletions
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;