Attribute hook render option

gpoitch · gpoitch · commit 79a9c25563a8 · 2023-07-26T10:48:47.000-04:00
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -1,7 +1,27 @@
 import { VNode } from 'preact';
 
-export default function renderToString(vnode: VNode, context?: any): string;
+interface RenderOptions {
+	attrHook?: (name: string) => string;
+}
 
-export function render(vnode: VNode, context?: any): string;
-export function renderToString(vnode: VNode, context?: any): string;
-export function renderToStaticMarkup(vnode: VNode, context?: any): string;
+export default function renderToString(
+	vnode: VNode,
+	context?: any,
+	renderOpts?: RenderOptions
+): string;
+
+export function render(
+	vnode: VNode,
+	context?: any,
+	renderOpts?: RenderOptions
+): string;
+export function renderToString(
+	vnode: VNode,
+	context?: any,
+	renderOpts?: RenderOptions
+): string;
+export function renderToStaticMarkup(
+	vnode: VNode,
+	context?: any,
+	renderOpts?: RenderOptions
+): 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;
+let beforeDiff, afterDiff, renderHook, ummountHook, attrHook;
 
 /**
  * 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) {
+export function renderToString(vnode, context, renderOpts) {
 	// 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,6 +43,7 @@ export function renderToString(vnode, context) {
 	afterDiff = options[DIFFED];
 	renderHook = options[RENDER];
 	ummountHook = options.unmount;
+	attrHook = renderOpts?.attrHook;
 
 	const parent = h(Fragment, null);
 	parent[CHILDREN] = [vnode];
@@ -399,6 +400,8 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 			}
 		}
 
+		if (attrHook) name = attrHook(name);
+
 		// write this attribute to the buffer
 		if (v != null && v !== false && typeof v !== 'function') {
 			if (v === true || v === '') {
diff --git a/test/render.test.js b/test/render.test.js
@@ -1598,4 +1598,47 @@ 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();
+				}
+
+				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 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 rendered = render(content, {}, { attrHook });
+				expect(rendered).to.equal(expected);
+			});
+		});
+	});
 });
