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, 69 insertions, 0 deletions

diff --git a/packages/renderers/renderer-preact/client.js b/packages/renderers/renderer-preact/client.js
new file mode 100644
index 000000000..2b8d4bd49
--- /dev/null
+++ b/packages/renderers/renderer-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/renderer-preact/index.js b/packages/renderers/renderer-preact/index.js
new file mode 100644
index 000000000..07ebe50e7
--- /dev/null
+++ b/packages/renderers/renderer-preact/index.js
@@ -0,0 +1,5 @@
+export default {
+  name: '@astrojs/renderer-preact',
+  client: './client',
+  server: './server',
+};
diff --git a/packages/renderers/renderer-preact/package.json b/packages/renderers/renderer-preact/package.json
new file mode 100644
index 000000000..c6bb915e9
--- /dev/null
+++ b/packages/renderers/renderer-preact/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@astrojs/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/renderer-preact/server.js b/packages/renderers/renderer-preact/server.js
new file mode 100644
index 000000000..a14b710b1
--- /dev/null
+++ b/packages/renderers/renderer-preact/server.js
@@ -0,0 +1,21 @@
+import { h } from 'preact';
+import { renderToString } from 'preact-render-to-string';
+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-preact/static-html.js b/packages/renderers/renderer-preact/static-html.js
new file mode 100644
index 000000000..5a31a68af
--- /dev/null
+++ b/packages/renderers/renderer-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;