Apply later so it leaves jsx mode untouched

preactjs · Aug 2, 2021 · 14b0ca6 · 14b0ca6
1 parent 859dff5
commit 14b0ca6
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 18 deletions.
diff --git a/src/index.js b/src/index.js
@@ -253,13 +253,9 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 				name = 'class';
 			} else if (isSvgMode && name.match(/^xlink:?./)) {
 				name = name.toLowerCase().replace(/^xlink:?/, 'xlink:');
-			} else if (DASHED_ATTRS.test(name)) {
-				name = name.replace(/([A-Z])/g, (l) => '-' + l.toLowerCase());
-			} else if (!CAMEL_ATTRS.test(name)) {
-				name = name.toLowerCase();
 			}
 
-			if (name === 'htmlfor') {
+			if (name === 'htmlFor') {
 				if (props.for) continue;
 				name = 'for';
 			}
@@ -282,7 +278,7 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 				continue;
 			}
 
-			if (name === 'dangerouslysetinnerhtml') {
+			if (name === 'dangerouslySetInnerHTML') {
 				html = v && v.__html;
 			} else if (nodeName === 'textarea' && name === 'value') {
 				// <textarea value="a&b"> --> <textarea>a&amp;b</textarea>
@@ -305,6 +301,14 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 						s += ` selected`;
 					}
 				}
+
+				// Convert attribute names to proper html casing
+				if (DASHED_ATTRS.test(name)) {
+					name = name.replace(/([A-Z])/g, (l) => '-' + l.toLowerCase());
+				} else if (!CAMEL_ATTRS.test(name)) {
+					name = name.toLowerCase();
+				}
+
 				s += ` ${name}="${encodeEntities(v)}"`;
 			}
 		}

diff --git a/test/jsx.test.js b/test/jsx.test.js
@@ -74,16 +74,6 @@ describe('jsx', () => {
 		`);
 	});
 
-	it('should decamelize attributes', () => {
-		expect(renderJsx(<img srcSet="foo.png, foo2.png 2x" />)).to.equal(
-			`<img srcset="foo.png, foo2.png 2x" />`
-		);
-	});
-
-	it('should dasherize certain attributes', () => {
-		expect(renderJsx(<meta httpEquiv="" />)).to.equal(`<meta http-equiv="" />`);
-	});
-
 	it('should skip null and undefined attributes', () => {
 		expect(renderJsx(<a b={null}>bar</a>)).to.equal(`<a>bar</a>`);
 
@@ -161,11 +151,11 @@ describe('jsx', () => {
 	it('should skip function names if functionNames=false', () => {
 		expect(
 			renderJsx(<div onClick={() => {}} />, { functionNames: false })
-		).to.equal('<div onclick={Function}></div>');
+		).to.equal('<div onClick={Function}></div>');
 
 		expect(
 			renderJsx(<div onClick={function foo() {}} />, { functionNames: false })
-		).to.equal('<div onclick={Function}></div>');
+		).to.equal('<div onClick={Function}></div>');
 	});
 
 	it('should render self-closing elements', () => {

diff --git a/test/render.test.js b/test/render.test.js
@@ -89,6 +89,20 @@ describe('render', () => {
 			expect(rendered).to.equal(expected);
 		});
 
+		it('should decamelize attributes', () => {
+			let rendered = render(<img srcSet="foo.png, foo2.png 2x" />),
+				expected = `<img srcset="foo.png, foo2.png 2x" />`;
+
+			expect(rendered).to.equal(expected);
+		});
+
+		it('should dasherize certain attributes', () => {
+			let rendered = render(<meta httpEquiv="refresh" />),
+				expected = `<meta http-equiv="refresh" />`;
+
+			expect(rendered).to.equal(expected);
+		});
+
 		it('should include boolean aria-* attributes', () => {
 			let rendered = render(<div aria-hidden aria-whatever={false} />),
 				expected = `<div aria-hidden="true" aria-whatever="false"></div>`;