diff --git a/.changeset/fifty-oranges-sip.md b/.changeset/fifty-oranges-sip.md new file mode 100644 index 00000000..3d4daea3 --- /dev/null +++ b/.changeset/fifty-oranges-sip.md @@ -0,0 +1,5 @@ +--- +'preact-render-to-string': patch +--- + +Fix JSX renderer to correctly render enumerated properties diff --git a/package.json b/package.json index 57eaf09d..23bd37e1 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "test": "oxlint && tsc && npm run test:vitest:run && npm run bench", "test:vitest": "vitest", "test:vitest:run": "vitest run", - "format": "prettier src/**/*.{d.ts,js} test/**/*.js --write", + "format": "prettier src/**/*.{d.ts,js} test/**/*.{js,jsx} --write", "prepublishOnly": "npm run build", "release": "npm run build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish" }, diff --git a/src/pretty.js b/src/pretty.js index fbcd6884..5c5443ed 100644 --- a/src/pretty.js +++ b/src/pretty.js @@ -9,6 +9,7 @@ import { VOID_ELEMENTS, NAMESPACE_REPLACE_REGEX, SVG_CAMEL_CASE, + HTML_ENUMERATED, HTML_LOWER_CASE, getContext, setDirty, @@ -22,6 +23,7 @@ import { options, Fragment } from 'preact'; const UNNAMED = []; const EMPTY_ARR = []; +const EMPTY_STR = ''; /** * Render Preact JSX + Components to a pretty-printed HTML-like string. @@ -254,6 +256,11 @@ function _renderToStringPretty( name = 'http-equiv'; } else if (NAMESPACE_REPLACE_REGEX.test(name)) { name = name.replace(NAMESPACE_REPLACE_REGEX, '$1:$2').toLowerCase(); + } else if ( + (name.at(4) === '-' || HTML_ENUMERATED.has(name)) && + v != null + ) { + v = v + EMPTY_STR; } else if (isSvgMode) { if (SVG_CAMEL_CASE.test(name)) { name = diff --git a/test/jsx.test.jsx b/test/jsx.test.jsx index 9131d00d..d0184f20 100644 --- a/test/jsx.test.jsx +++ b/test/jsx.test.jsx @@ -171,4 +171,13 @@ describe('jsx', () => { it('should not render function children', () => { expect(renderJsx(
{() => {}}
)).to.equal('
'); }); + + it('should render enumerated attributes', () => { + expect(renderJsx(
)).to.equal( + '
' + ); + expect(renderJsx(
)).to.equal( + '
' + ); + }); });