Merge pull request #393 from preactjs/fix/spellcheck-prop-serialization

fix: `spellcheck` prop

Author: rschristian

.changeset/angry-chairs-marry.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Fix `spellcheck={false}` not rendering as `spellcheck="false"`

package-lock.json

@@ -4,6 +4,7 @@ import {
 	UNSAFE_NAME,
 	NAMESPACE_REPLACE_REGEX,
 	HTML_LOWER_CASE,
+	HTML_ENUMERATED,
 	SVG_CAMEL_CASE,
 	createComponent
 } from './lib/util.js';
@@ -623,10 +624,11 @@ function _renderToString(
 					name = name.replace(NAMESPACE_REPLACE_REGEX, '$1:$2').toLowerCase();
 				} else if (UNSAFE_NAME.test(name)) {
 					continue;
-				} 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
+				} else if (
+					(name[4] === '-' || HTML_ENUMERATED.has(name)) &&
+					v != null
+				) {
+					// serialize boolean aria-xyz or enumerated attribute values as strings
 					v = v + EMPTY_STR;
 				} else if (isSvgMode) {
 					if (SVG_CAMEL_CASE.test(name)) {
@@ -637,9 +639,6 @@ function _renderToString(
 					}
 				} else if (HTML_LOWER_CASE.test(name)) {
 					name = name.toLowerCase();
-					if (name === 'spellcheck') {
-						v = '' + v;
-					}
 				}
 			}
 		}

src/index.js

@@ -1,8 +1,11 @@
 export const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
 export const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
 export const NAMESPACE_REPLACE_REGEX = /^(xlink|xmlns|xml)([A-Z])/;
-export const HTML_LOWER_CASE = /^accessK|^auto[A-Z]|^cell|^ch|^col|cont|cross|dateT|encT|form[A-Z]|frame|hrefL|inputM|maxL|minL|noV|playsI|popoverT|readO|rowS|spellC|src[A-Z]|tabI|useM|item[A-Z]/;
-export const SVG_CAMEL_CASE = /^ac|^ali|arabic|basel|cap|clipPath$|clipRule$|color|dominant|enable|fill|flood|font|glyph[^R]|horiz|image|letter|lighting|marker[^WUH]|overline|panose|pointe|paint|rendering|shape|stop|strikethrough|stroke|spel|text[^L]|transform|underline|unicode|units|^v[^i]|^w|^xH/;
+export const HTML_LOWER_CASE = /^accessK|^auto[A-Z]|^cell|^ch|^col|cont|cross|dateT|encT|form[A-Z]|frame|hrefL|inputM|maxL|minL|noV|playsI|popoverT|readO|rowS|src[A-Z]|tabI|useM|item[A-Z]/;
+export const SVG_CAMEL_CASE = /^ac|^ali|arabic|basel|cap|clipPath$|clipRule$|color|dominant|enable|fill|flood|font|glyph[^R]|horiz|image|letter|lighting|marker[^WUH]|overline|panose|pointe|paint|rendering|shape|stop|strikethrough|stroke|text[^L]|transform|underline|unicode|units|^v[^i]|^w|^xH/;
+
+// Boolean DOM properties that translate to enumerated ('true'/'false') attributes
+export const HTML_ENUMERATED = new Set(['draggable', 'spellcheck']);
 
 // DOM properties that should NOT have "px" added when numeric
 const ENCODED_ENTITIES = /["&<]/;

src/lib/util.js

@@ -154,11 +154,11 @@ describe('render', () => {
 			expect(rendered).to.equal(`<div data-checked="false"></div>`);
 		});
 
-		it('should support spellCheck', () => {
-			let rendered = render(<div spellCheck={false} />);
+		it('should support spellcheck', () => {
+			let rendered = render(<div spellcheck={false} />);
 			expect(rendered).to.equal(`<div spellcheck="false"></div>`);
 
-			rendered = render(<div spellCheck />);
+			rendered = render(<div spellcheck />);
 			expect(rendered).to.equal(`<div spellcheck="true"></div>`);
 		});
 

test/render.test.jsx

@@ -400,7 +400,6 @@ export const htmlAttributes = {
 	slot: 'slot',
 	span: 'span',
 	spellcheck: 'spellcheck',
-	spellCheck: 'spellcheck',
 	src: 'src',
 	srcset: 'srcset',
 	srcDoc: 'srcdoc',