Merge pull request #311 from gpoitch/gp/pretty-attrs

Author: marvinhagemeister

.changeset/plenty-cycles-work.md

@@ -0,0 +1,5 @@
+---
+"preact-render-to-string": patch
+---
+
+Apply attribute name handling in pretty mode

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 = /["&<]/;

test/pretty.test.js

@@ -2,10 +2,10 @@ import basicRender from '../src/index.js';
 import { render } from '../src/jsx.js';
 import { h, Fragment } from 'preact';
 import { expect } from 'chai';
-import { dedent } from './utils.js';
+import { dedent, svgAttributes, htmlAttributes } from './utils.js';
 
 describe('pretty', () => {
-	let prettyRender = (jsx) => render(jsx, {}, { pretty: true });
+	let prettyRender = (jsx, opts) => render(jsx, {}, { pretty: true, ...opts });
 
 	it('should render no whitespace by default', () => {
 		let rendered = basicRender(
@@ -196,4 +196,56 @@ describe('pretty', () => {
 	it('should not render function children', () => {
 		expect(prettyRender(<div>{() => {}}</div>)).to.equal('<div></div>');
 	});
+
+	it('should render SVG elements', () => {
+		let rendered = prettyRender(
+			<svg>
+				<image xlinkHref="#" />
+				<foreignObject>
+					<div xlinkHref="#" />
+				</foreignObject>
+				<g>
+					<image xlinkHref="#" />
+				</g>
+			</svg>
+		);
+
+		expect(rendered).to.equal(
+			`<svg>\n\t<image xlink:href="#"></image>\n\t<foreignObject>\n\t\t<div xlink:href="#"></div>\n\t</foreignObject>\n\t<g>\n\t\t<image xlink:href="#"></image>\n\t</g>\n</svg>`
+		);
+	});
+
+	describe('Attribute casing', () => {
+		it('should have correct SVG casing', () => {
+			for (let name in svgAttributes) {
+				let value = svgAttributes[name];
+
+				let rendered = prettyRender(
+					<svg>
+						<path {...{ [name]: 'foo' }} />
+					</svg>
+				);
+				expect(rendered).to.equal(
+					`<svg>\n\t<path ${value}="foo"></path>\n</svg>`
+				);
+			}
+		});
+
+		it('should have correct HTML casing', () => {
+			for (let name in htmlAttributes) {
+				let value = htmlAttributes[name];
+
+				if (name === 'checked') {
+					let rendered = prettyRender(<input type="checkbox" checked />, {
+						jsx: false
+					});
+					expect(rendered).to.equal(`<input type="checkbox" checked />`);
+					continue;
+				} else {
+					let rendered = prettyRender(<div {...{ [name]: 'foo' }} />);
+					expect(rendered).to.equal(`<div ${value}="foo"></div>`);
+				}
+			}
+		});
+	});
 });