support pretty mode

gpoitch · gpoitch · commit 0b864de1fec4 · 2023-07-26T17:02:46.000-04:00
diff --git a/jsx.d.ts b/jsx.d.ts
@@ -8,6 +8,7 @@ interface Options {
 	functions?: boolean;
 	functionNames?: boolean;
 	skipFalseAttributes?: boolean;
+	attributeHook?: (name: string) => string;
 }
 
 export default function renderToStringPretty(
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -1,27 +1,25 @@
 import { VNode } from 'preact';
 
-interface RenderOptions {
-	attrHook?: (name: string) => string;
+interface Options {
+	attributeHook?: (name: string) => string;
 }
 
 export default function renderToString(
 	vnode: VNode,
 	context?: any,
-	renderOpts?: RenderOptions
+	options?: Options
 ): string;
 
-export function render(
-	vnode: VNode,
-	context?: any,
-	renderOpts?: RenderOptions
-): string;
+export function render(vnode: VNode, context?: any, options?: Options): string;
+
 export function renderToString(
 	vnode: VNode,
 	context?: any,
-	renderOpts?: RenderOptions
+	options?: Options
 ): string;
+
 export function renderToStaticMarkup(
 	vnode: VNode,
 	context?: any,
-	renderOpts?: RenderOptions
+	options?: Options
 ): string;
diff --git a/src/index.js b/src/index.js
@@ -21,15 +21,15 @@ const isArray = Array.isArray;
 const assign = Object.assign;
 
 // Global state for the current render pass
-let beforeDiff, afterDiff, renderHook, ummountHook, attrHook;
+let beforeDiff, afterDiff, renderHook, ummountHook, attributeHook;
 
 /**
  * Render Preact JSX + Components to an HTML string.
  * @param {VNode} vnode	JSX Element / VNode to render
  * @param {Object} [context={}] Initial root context object
  * @returns {string} serialized HTML
  */
-export function renderToString(vnode, context, renderOpts) {
+export function renderToString(vnode, context, opts) {
 	// Performance optimization: `renderToString` is synchronous and we
 	// therefore don't execute any effects. To do that we pass an empty
 	// array to `options._commit` (`__c`). But we can go one step further
@@ -43,7 +43,7 @@ export function renderToString(vnode, context, renderOpts) {
 	afterDiff = options[DIFFED];
 	renderHook = options[RENDER];
 	ummountHook = options.unmount;
-	attrHook = renderOpts?.attrHook;
+	attributeHook = opts && opts.attributeHook;
 
 	const parent = h(Fragment, null);
 	parent[CHILDREN] = [vnode];
@@ -400,7 +400,7 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 			}
 		}
 
-		if (attrHook) name = attrHook(name);
+		if (attributeHook) name = attributeHook(name);
 
 		// write this attribute to the buffer
 		if (v != null && v !== false && typeof v !== 'function') {
diff --git a/src/jsx.d.ts b/src/jsx.d.ts
@@ -8,13 +8,15 @@ interface Options {
 	functions?: boolean;
 	functionNames?: boolean;
 	skipFalseAttributes?: boolean;
+	attributeHook?: (name: string) => string;
 }
 
 export default function renderToStringPretty(
 	vnode: VNode,
 	context?: any,
 	options?: Options
 ): string;
+
 export function render(vnode: VNode, context?: any, options?: Options): string;
 
 export function shallowRender(
diff --git a/src/jsx.js b/src/jsx.js
@@ -25,7 +25,7 @@ let prettyFormatOpts = {
 	plugins: [preactPlugin]
 };
 
-function attributeHook(name, value, context, opts, isComponent) {
+function jsxAttributeHook(name, value, context, opts, isComponent) {
 	let type = typeof value;
 
 	// Use render-to-string's built-in handling for these properties
@@ -60,7 +60,7 @@ function attributeHook(name, value, context, opts, isComponent) {
 }
 
 let defaultOpts = {
-	attributeHook,
+	jsxAttributeHook,
 	jsx: true,
 	xml: false,
 	functions: true,
@@ -83,7 +83,7 @@ let defaultOpts = {
  */
 export default function renderToStringPretty(vnode, context, options) {
 	const opts = Object.assign({}, defaultOpts, options || {});
-	if (!opts.jsx) opts.attributeHook = null;
+	if (!opts.jsx || opts.attributeHook) opts.jsxAttributeHook = null;
 	return renderToString(vnode, context, opts);
 }
 export { renderToStringPretty as render };
diff --git a/src/pretty.js b/src/pretty.js
@@ -209,6 +209,8 @@ function _renderToStringPretty(
 		propChildren,
 		html;
 
+	const attributeHook = opts && opts.attributeHook;
+
 	if (props) {
 		let attrs = Object.keys(props);
 
@@ -263,8 +265,8 @@ function _renderToStringPretty(
 			}
 
 			let hooked =
-				opts.attributeHook &&
-				opts.attributeHook(name, v, context, opts, isComponent);
+				opts.jsxAttributeHook &&
+				opts.jsxAttributeHook(name, v, context, opts, isComponent);
 			if (hooked || hooked === '') {
 				s = s + hooked;
 				continue;
@@ -280,6 +282,7 @@ function _renderToStringPretty(
 					v = name;
 					// in non-xml mode, allow boolean attributes
 					if (!opts || !opts.xml) {
+						if (attributeHook) name = attributeHook(name);
 						s = s + ' ' + name;
 						continue;
 					}
@@ -299,6 +302,7 @@ function _renderToStringPretty(
 						s = s + ` selected`;
 					}
 				}
+				if (attributeHook) name = attributeHook(name);
 				s = s + ` ${name}="${encodeEntities(v + '')}"`;
 			}
 		}
diff --git a/test/pretty.test.js b/test/pretty.test.js
@@ -196,4 +196,44 @@ describe('pretty', () => {
 	it('should not render function children', () => {
 		expect(prettyRender(<div>{() => {}}</div>)).to.equal('<div></div>');
 	});
+
+	it('transforms attributes with custom attributeHook option', () => {
+		function attributeHook(name) {
+			const DASHED_ATTRS = /^(acceptC|httpE|(clip|color|fill|font|glyph|marker|stop|stroke|text|vert)[A-Z])/;
+			const CAMEL_ATTRS = /^(isP|viewB)/;
+			const COLON_ATTRS = /^(xlink|xml|xmlns)([A-Z])/;
+			const CAPITAL_REGEXP = /([A-Z])/g;
+			if (CAMEL_ATTRS.test(name)) return name;
+			if (DASHED_ATTRS.test(name))
+				return name.replace(CAPITAL_REGEXP, '-$1').toLowerCase();
+			if (COLON_ATTRS.test(name))
+				return name.replace(CAPITAL_REGEXP, ':$1').toLowerCase();
+			return name.toLowerCase();
+		}
+
+		const content = (
+			<html>
+				<head>
+					<meta charSet="utf=8" />
+					<meta httpEquiv="refresh" />
+					<link rel="preconnect" href="https://foo.com" crossOrigin />
+					<link rel="preconnect" href="https://bar.com" crossOrigin={false} />
+				</head>
+				<body>
+					<img srcSet="foo.png, foo2.png 2x" />
+					<svg xmlSpace="preserve" viewBox="0 0 10 10" fillRule="nonzero">
+						<foreignObject>
+							<div xlinkHref="#" />
+						</foreignObject>
+					</svg>
+				</body>
+			</html>
+		);
+
+		const expected =
+			'<html>\n\t<head>\n\t\t<meta charSet="utf=8" />\n\t\t<meta httpEquiv="refresh" />\n\t\t<link\n\t\t\trel="preconnect"\n\t\t\thref="https://foo.com"\n\t\t\tcrossOrigin={true}\n\t\t />\n\t\t<link\n\t\t\trel="preconnect"\n\t\t\thref="https://bar.com"\n\t\t />\n\t</head>\n\t<body>\n\t\t<img srcSet="foo.png, foo2.png 2x" />\n\t\t<svg\n\t\t\txmlSpace="preserve"\n\t\t\tviewBox="0 0 10 10"\n\t\t\tfillRule="nonzero"\n\t\t>\n\t\t\t<foreignObject>\n\t\t\t\t<div xlinkHref="#"></div>\n\t\t\t</foreignObject>\n\t\t</svg>\n\t</body>\n</html>';
+
+		const rendered = prettyRender(content, {}, { attributeHook });
+		expect(rendered).to.equal(expected);
+	});
 });
diff --git a/test/render.test.js b/test/render.test.js
@@ -1600,45 +1600,44 @@ describe('render', () => {
 	});
 
 	describe('Render Options', () => {
-		describe('Attribute Hook', () => {
-			it('Transforms attributes with custom attrHook option', () => {
-				function attrHook(name) {
-					const DASHED_ATTRS = /^(acceptC|httpE|(clip|color|fill|font|glyph|marker|stop|stroke|text|vert)[A-Z])/;
-					const CAMEL_ATTRS = /^(isP|viewB)/;
-					const COLON_ATTRS = /^(xlink|xml|xmlns)([A-Z])/;
-					const CAPITAL_REGEXP = /([A-Z])/g;
-					if (CAMEL_ATTRS.test(name)) return name;
-					if (DASHED_ATTRS.test(name))
-						return name.replace(CAPITAL_REGEXP, '-$1').toLowerCase();
-					if (COLON_ATTRS.test(name))
-						return name.replace(CAPITAL_REGEXP, ':$1').toLowerCase();
-					return name.toLowerCase();
-				}
+		it('transforms attributes with custom attributeHook option', () => {
+			function attributeHook(name) {
+				const DASHED_ATTRS = /^(acceptC|httpE|(clip|color|fill|font|glyph|marker|stop|stroke|text|vert)[A-Z])/;
+				const CAMEL_ATTRS = /^(isP|viewB)/;
+				const COLON_ATTRS = /^(xlink|xml|xmlns)([A-Z])/;
+				const CAPITAL_REGEXP = /([A-Z])/g;
+				if (CAMEL_ATTRS.test(name)) return name;
+				if (DASHED_ATTRS.test(name))
+					return name.replace(CAPITAL_REGEXP, '-$1').toLowerCase();
+				if (COLON_ATTRS.test(name))
+					return name.replace(CAPITAL_REGEXP, ':$1').toLowerCase();
+				return name.toLowerCase();
+			}
 
-				const content = (
-					<html>
-						<head>
-							<meta charSet="utf=8" />
-							<meta httpEquiv="refresh" />
-							<link rel="preconnect" href="https://foo.com" crossOrigin />
-						</head>
-						<body>
-							<img srcSet="foo.png, foo2.png 2x" />
-							<svg xmlSpace="preserve" viewBox="0 0 10 10" fillRule="nonzero">
-								<foreignObject>
-									<div xlinkHref="#" />
-								</foreignObject>
-							</svg>
-						</body>
-					</html>
-				);
+			const content = (
+				<html>
+					<head>
+						<meta charSet="utf=8" />
+						<meta httpEquiv="refresh" />
+						<link rel="preconnect" href="https://foo.com" crossOrigin />
+						<link rel="preconnect" href="https://bar.com" crossOrigin={false} />
+					</head>
+					<body>
+						<img srcSet="foo.png, foo2.png 2x" />
+						<svg xmlSpace="preserve" viewBox="0 0 10 10" fillRule="nonzero">
+							<foreignObject>
+								<div xlinkHref="#" />
+							</foreignObject>
+						</svg>
+					</body>
+				</html>
+			);
 
-				const expected =
-					'<html><head><meta charset="utf=8"/><meta http-equiv="refresh"/><link rel="preconnect" href="https://foo.com" crossorigin/></head><body><img srcset="foo.png, foo2.png 2x"/><svg xml:space="preserve" viewBox="0 0 10 10" fill-rule="nonzero"><foreignObject><div xlink:href="#"></div></foreignObject></svg></body></html>';
+			const expected =
+				'<html><head><meta charset="utf=8"/><meta http-equiv="refresh"/><link rel="preconnect" href="https://foo.com" crossorigin/><link rel="preconnect" href="https://bar.com"/></head><body><img srcset="foo.png, foo2.png 2x"/><svg xml:space="preserve" viewBox="0 0 10 10" fill-rule="nonzero"><foreignObject><div xlink:href="#"></div></foreignObject></svg></body></html>';
 
-				const rendered = render(content, {}, { attrHook });
-				expect(rendered).to.equal(expected);
-			});
+			const rendered = render(content, {}, { attributeHook });
+			expect(rendered).to.equal(expected);
 		});
 	});
 });

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@ interface Options {`
`8`	`8`	`functions?: boolean;`
`9`	`9`	`functionNames?: boolean;`
`10`	`10`	`skipFalseAttributes?: boolean;`
	`11`	`+ attributeHook?: (name: string) => string;`
`11`	`12`	`}`
`12`	`13`
`13`	`14`	`export default function renderToStringPretty(`
Original file line number	Diff line number	Diff line change
`@@ -209,6 +209,8 @@ function _renderToStringPretty(`
`209`	`209`	`propChildren,`
`210`	`210`	`html;`
`211`	`211`
	`212`	`+ const attributeHook = opts && opts.attributeHook;`
	`213`	`+`
`212`	`214`	`if (props) {`
`213`	`215`	`let attrs = Object.keys(props);`
`214`	`216`
`@@ -263,8 +265,8 @@ function _renderToStringPretty(`
`263`	`265`	`}`
`264`	`266`
`265`	`267`	`let hooked =`
`266`		`- opts.attributeHook &&`
`267`		`- opts.attributeHook(name, v, context, opts, isComponent);`
	`268`	`+ opts.jsxAttributeHook &&`
	`269`	`+ opts.jsxAttributeHook(name, v, context, opts, isComponent);`
`268`	`270`	`if (hooked \|\| hooked === '') {`
`269`	`271`	`s = s + hooked;`
`270`	`272`	`continue;`
`@@ -280,6 +282,7 @@ function _renderToStringPretty(`
`280`	`282`	`v = name;`
`281`	`283`	`// in non-xml mode, allow boolean attributes`
`282`	`284`	`if (!opts \|\| !opts.xml) {`
	`285`	`+ if (attributeHook) name = attributeHook(name);`
`283`	`286`	`s = s + ' ' + name;`
`284`	`287`	`continue;`
`285`	`288`	`}`
`@@ -299,6 +302,7 @@ function _renderToStringPretty(`
`299`	`302`	s = s + ` selected`;
`300`	`303`	`}`
`301`	`304`	`}`
	`305`	`+ if (attributeHook) name = attributeHook(name);`
`302`	`306`	s = s + ` ${name}="${encodeEntities(v + '')}"`;
`303`	`307`	`}`
`304`	`308`	`}`