Bugbash! (#263)

* fix(vscode): Markdown frontmatter should use TSX, not YAML

* test: add test for #153

* chore: bump deps

* chore: update to use @astrojs scope

* fix: Markdown parse error when only child is `{expression}`

* fix: update renderer edge cases

* fix: failing test

* fix: update renderer

5 files changed, 71 insertions, 0 deletions

diff --git a/packages/renderers/renderer-react/client.js b/packages/renderers/renderer-react/client.js
new file mode 100644
index 000000000..b699a76d0
--- /dev/null
+++ b/packages/renderers/renderer-react/client.js
@@ -0,0 +1,6 @@
+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/renderer-react/index.js b/packages/renderers/renderer-react/index.js
new file mode 100644
index 000000000..af8e516b8
--- /dev/null
+++ b/packages/renderers/renderer-react/index.js
@@ -0,0 +1,5 @@
+export default {
+  name: '@astrojs/renderer-react',
+  client: './client',
+  server: './server',
+};
diff --git a/packages/renderers/renderer-react/package.json b/packages/renderers/renderer-react/package.json
new file mode 100644
index 000000000..91151b915
--- /dev/null
+++ b/packages/renderers/renderer-react/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@astrojs/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.2",
+    "react-dom": "^17.0.2"
+  }
+}
diff --git a/packages/renderers/renderer-react/server.js b/packages/renderers/renderer-react/server.js
new file mode 100644
index 000000000..3518f6447
--- /dev/null
+++ b/packages/renderers/renderer-react/server.js
@@ -0,0 +1,21 @@
+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, children) {
+  try {
+    const { html } = renderToStaticMarkup(Component, props, children)
+    return Boolean(html)
+  } catch (e) {}
+  return false;
+}
+
+function renderToStaticMarkup(Component, props, children) {
+  const html = renderToString(h(Component, { ...props, children: h(StaticHtml, { value: children }), innerHTML: children }));
+  return { html };
+}
+
+export default {
+  check,
+  renderToStaticMarkup,
+};
diff --git a/packages/renderers/renderer-react/static-html.js b/packages/renderers/renderer-react/static-html.js
new file mode 100644
index 000000000..1efc625d0
--- /dev/null
+++ b/packages/renderers/renderer-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;