Support colon attrs

preactjs · Sep 29, 2021 · 1fdacd8 · 1fdacd8
1 parent 14b0ca6
commit 1fdacd8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/index.js b/src/index.js
@@ -19,6 +19,9 @@ const VOID_ELEMENTS = /^(area|base|br|col|embed|hr|img|input|link|meta|param|sou
 
 const DASHED_ATTRS = /^(acceptC|httpE)/;
 const CAMEL_ATTRS = /^(viewB)/;
+const COLON_ATTRS = /^(xmlS|xlinkH)/;
+const transformAttr = (attr, separator) =>
+	attr.replace(/([A-Z])/g, (w) => separator + w.toLowerCase());
 
 const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
 
@@ -304,7 +307,9 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 
 				// Convert attribute names to proper html casing
 				if (DASHED_ATTRS.test(name)) {
-					name = name.replace(/([A-Z])/g, (l) => '-' + l.toLowerCase());
+					name = transformAttr(name, '-');
+				} else if (COLON_ATTRS.test(name)) {
+					name = transformAttr(name, ':');
 				} else if (!CAMEL_ATTRS.test(name)) {
 					name = name.toLowerCase();
 				}

diff --git a/test/render.test.js b/test/render.test.js
@@ -103,6 +103,13 @@ describe('render', () => {
 			expect(rendered).to.equal(expected);
 		});
 
+		it('should colonize certain attributes & leave certain attributes camelized', () => {
+			let rendered = render(<svg xmlSpace="preserve" viewBox="0 0 10 10" />),
+				expected = `<svg xml:space="preserve" viewBox="0 0 10 10"></svg>`;
+
+			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>`;
@@ -291,7 +298,7 @@ describe('render', () => {
 			);
 
 			expect(rendered).to.equal(
-				`<svg viewBox="0 0 100 100"><image xlink:href="#"></image><foreignObject><div xlinkhref="#"></div></foreignObject><g><image xlink:href="#"></image></g></svg>`
+				`<svg viewBox="0 0 100 100"><image xlink:href="#"></image><foreignObject><div xlink:href="#"></div></foreignObject><g><image xlink:href="#"></image></g></svg>`
 			);
 		});
 	});