From 3df41d23089142ea9b0895110f28a2d4a43a9059 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Fri, 28 May 2021 17:19:40 -0500 Subject: 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 --- packages/renderers/renderer-react/static-html.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 packages/renderers/renderer-react/static-html.js (limited to 'packages/renderers/renderer-react/static-html.js') 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; -- cgit v1.2.3