0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
astro/packages/integrations/react/static-html.js
Matthew Phillips 3d525efc95
Prevent removal of nested slots within islands (#7093)
* Prevent removal of nested slots within islands

* Fix build errors
2023-05-17 10:18:04 -04:00

29 lines
877 B
JavaScript

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, name, hydrate }) => {
if (!value) return null;
const tagName = hydrate ? 'astro-slot' : 'astro-static-slot';
return h(tagName, {
name,
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;