Skip to content

Commit 8e0a6e3

Browse files
Mark comment prop as unstable
1 parent e20cb5d commit 8e0a6e3

File tree

3 files changed

+7
-7
lines changed

3 files changed

+7
-7
lines changed

.changeset/shy-hotels-impress.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,4 @@
22
'preact-render-to-string': minor
33
---
44

5-
Add ability to render comments via `<Fragment comment="my-comment" />`. When the `comment` prop is present all children of that `Fragment` will be ignored. This PR only supports that in server environments as it's useful to mark islands and other things. It's not supported in the browser.
6-
7-
We picked a `Fragment` for this as it's the least common component and therefore the branch in our code with the least impact on perf by adding another if-check.
5+
Add experimental ability to render HTML comments via `<Fragment UNSTABLE_comment="my-comment" />`. When the `UNSTABLE_comment` prop is present all children of that `Fragment` will be ignored and a HTML comment will be rendered instead. This feature is added to allow framework authors to experiment with marking DOM for hydration in the client. Note that it's marked as unstable and might change in the future.

src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,8 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
167167
if (type === Fragment) {
168168
// Fragments are the least used components of core that's why
169169
// branching here for comments has the least effect on perf.
170-
if (props.comment) {
171-
return '<!--' + encodeEntities(props.comment || '') + '-->';
170+
if (props.UNSTABLE_comment) {
171+
return '<!--' + encodeEntities(props.UNSTABLE_comment || '') + '-->';
172172
}
173173

174174
rendered = props.children;

test/render.test.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1311,13 +1311,15 @@ describe('render', () => {
13111311

13121312
describe('HTML Comments', () => {
13131313
it('should render HTML comments via Fragments', () => {
1314-
expect(render(<Fragment comment="foo" />)).to.equal('<!--foo-->');
1314+
expect(render(<Fragment UNSTABLE_comment="foo" />)).to.equal(
1315+
'<!--foo-->'
1316+
);
13151317
});
13161318

13171319
it('should ignore children with comment prop', () => {
13181320
expect(
13191321
render(
1320-
<Fragment comment="foo">
1322+
<Fragment UNSTABLE_comment="foo">
13211323
<p>foo</p>
13221324
</Fragment>
13231325
)

0 commit comments

Comments
 (0)