Merge pull request #430 from reteps/main

Fix JSX renderer to correctly render enumerated properties

Author: rschristian

.changeset/fifty-oranges-sip.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Fix JSX renderer to correctly render enumerated properties

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"
 	},

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 =

test/jsx.test.jsx

@@ -171,4 +171,13 @@ describe('jsx', () => {
 	it('should not render function children', () => {
 		expect(renderJsx(<div>{() => {}}</div>)).to.equal('<div></div>');
 	});
+
+	it('should render enumerated attributes', () => {
+		expect(renderJsx(<div draggable={true} />)).to.equal(
+			'<div draggable="true"></div>'
+		);
+		expect(renderJsx(<div draggable={false} />)).to.equal(
+			'<div draggable="false"></div>'
+		);
+	});
 });