support data attribute

Author: JoviDeCroock

.changeset/perfect-ducks-rule.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Support `data` attribute

package.json

@@ -34,7 +34,7 @@
 		"transpile:jsx": "microbundle src/jsx.js -o dist/jsx.js --target web --external preact && microbundle dist/jsx.js -o dist/jsx.js -f cjs --external preact",
 		"copy-typescript-definition": "copyfiles -f src/*.d.ts dist",
 		"test": "eslint src test && tsc && npm run test:mocha && npm run test:mocha:compat && npm run test:mocha:debug && npm run bench",
-		"test:mocha": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/*.test.js",
+		"test:mocha": "cross-env BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/*.test.js",
 		"test:mocha:compat": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/compat/index.test.js'",
 		"test:mocha:debug": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/debug/index.test.js'",
 		"format": "prettier src/**/*.{d.ts,js} test/**/*.js --write",

src/index.js

@@ -311,10 +311,7 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 					name = name.toLowerCase().replace(XLINK_REPLACE_REGEX, 'xlink:');
 				} else if (UNSAFE_NAME.test(name)) {
 					continue;
-				} else if (
-					((name[0] === 'a' && name[1] === 'r') || name === 'draggable') &&
-					v != null
-				) {
+				} else if ((name[4] === '-' || name === 'draggable') && v != null) {
 					// serialize boolean aria-xyz or draggable attribute values as strings
 					// `draggable` is an enumerated attribute and not Boolean. A value of `true` or `false` is mandatory
 					// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable

test/render.test.js

@@ -142,6 +142,16 @@ describe('render', () => {
 			expect(rendered).to.equal(expected);
 		});
 
+		it('should support false aria-* attributes', () => {
+			let rendered = render(<div aria-checked={false} />);
+			expect(rendered).to.equal(`<div aria-checked="false"></div>`);
+		});
+
+		it('should support false data-* attributes', () => {
+			let rendered = render(<div data-checked={false} />);
+			expect(rendered).to.equal(`<div data-checked="false"></div>`);
+		});
+
 		describe('attribute name sanitization', () => {
 			it('should omit attributes with invalid names', () => {
 				let rendered = render(