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

1 files changed, 24 insertions, 0 deletions

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;