Apply attribute name handling in pretty mode

Author: gpoitch

src/index.js

@@ -1,4 +1,11 @@
-import { encodeEntities, styleObjToCss, UNSAFE_NAME } from './util.js';
+import {
+	encodeEntities,
+	styleObjToCss,
+	UNSAFE_NAME,
+	NAMESPACE_REPLACE_REGEX,
+	HTML_LOWER_CASE,
+	SVG_CAMEL_CASE
+} from './util.js';
 import { options, h, Fragment } from 'preact';
 import {
 	CHILDREN,
@@ -454,9 +461,6 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 	return s + '>' + html + '</' + type + '>';
 }
 
-const HTML_LOWER_CASE = /^accessK|^auto[A-Z]|^ch|^col|cont|cross|dateT|encT|form[A-Z]|frame|hrefL|inputM|maxL|minL|noV|playsI|readO|rowS|spellC|src[A-Z]|tabI|item[A-Z]/;
-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/;
-const NAMESPACE_REPLACE_REGEX = /^(xlink|xmlns|xml)(:|[A-Z])/;
 const SELF_CLOSING = new Set([
 	'area',
 	'base',

src/pretty.js

@@ -6,8 +6,10 @@ import {
 	getChildren,
 	createComponent,
 	UNSAFE_NAME,
-	XLINK,
-	VOID_ELEMENTS
+	VOID_ELEMENTS,
+	NAMESPACE_REPLACE_REGEX,
+	HTML_LOWER_CASE,
+	SVG_CAMEL_CASE
 } from './util.js';
 import { COMMIT, DIFF, DIFFED, RENDER, SKIP_EFFECTS } from './constants.js';
 import { options, Fragment } from 'preact';
@@ -243,8 +245,21 @@ function _renderToStringPretty(
 			} else if (name === 'className') {
 				if (typeof props.class !== 'undefined') continue;
 				name = 'class';
-			} else if (isSvgMode && XLINK.test(name)) {
-				name = name.toLowerCase().replace(/^xlink:?/, 'xlink:');
+			} else if (name === 'acceptCharset') {
+				name = 'accept-charset';
+			} else if (name === 'httpEquiv') {
+				name = 'http-equiv';
+			} else if (NAMESPACE_REPLACE_REGEX.test(name)) {
+				name = name.replace(NAMESPACE_REPLACE_REGEX, '$1:$2').toLowerCase();
+			} else if (isSvgMode) {
+				if (SVG_CAMEL_CASE.test(name)) {
+					name =
+						name === 'panose1'
+							? 'panose-1'
+							: name.replace(/([A-Z])/g, '-$1').toLowerCase();
+				}
+			} else if (HTML_LOWER_CASE.test(name)) {
+				name = name.toLowerCase();
 			}
 
 			if (name === 'htmlFor') {

src/util.js

@@ -1,6 +1,8 @@
 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 XLINK = /^xlink:?./;
+export const NAMESPACE_REPLACE_REGEX = /^(xlink|xmlns|xml)(:|[A-Z])/;
+export const HTML_LOWER_CASE = /^accessK|^auto[A-Z]|^ch|^col|cont|cross|dateT|encT|form[A-Z]|frame|hrefL|inputM|maxL|minL|noV|playsI|readO|rowS|spellC|src[A-Z]|tabI|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/;
 
 // DOM properties that should NOT have "px" added when numeric
 const ENCODED_ENTITIES = /["&<]/;