preact-render-to-string 6.5.7 → 6.5.8

package/src/index.js

@@ -4,7 +4,8 @@ import {
 	UNSAFE_NAME,
 	NAMESPACE_REPLACE_REGEX,
 	HTML_LOWER_CASE,
-	SVG_CAMEL_CASE
+	SVG_CAMEL_CASE,
+	createComponent
 } from './lib/util.js';
 import { options, h, Fragment } from 'preact';
 import {
@@ -22,9 +23,11 @@ import {
 	CATCH_ERROR
 } from './lib/constants.js';
 
+const EMPTY_OBJ = {};
 const EMPTY_ARR = [];
 const isArray = Array.isArray;
 const assign = Object.assign;
+const EMPTY_STR = '';
 
 // Global state for the current render pass
 let beforeDiff, afterDiff, renderHook, ummountHook;
@@ -65,8 +68,8 @@ export function renderToString(vnode, context, _rendererState) {
 			_rendererState
 		);
 
-		if (Array.isArray(rendered)) {
-			return rendered.join('');
+		if (isArray(rendered)) {
+			return rendered.join(EMPTY_STR);
 		}
 		return rendered;
 	} catch (e) {
@@ -119,7 +122,7 @@ export async function renderToStringAsync(vnode, context) {
 			undefined
 		);
 
-		if (Array.isArray(rendered)) {
+		if (isArray(rendered)) {
 			let count = 0;
 			let resolved = rendered;
 
@@ -133,7 +136,7 @@ export async function renderToStringAsync(vnode, context) {
 				resolved = (await Promise.all(resolved)).flat();
 			}
 
-			return resolved.join('');
+			return resolved.join(EMPTY_STR);
 		}
 
 		return rendered;
@@ -146,13 +149,6 @@ export async function renderToStringAsync(vnode, context) {
 	}
 }
 
-// Installed as setState/forceUpdate for function components
-function markAsDirty() {
-	this.__d = true;
-}
-
-const EMPTY_OBJ = {};
-
 /**
  * @param {VNode} vnode
  * @param {Record<string, unknown>} context
@@ -226,24 +222,30 @@ function _renderToString(
 	renderer
 ) {
 	// Ignore non-rendered VNodes/values
-	if (vnode == null || vnode === true || vnode === false || vnode === '') {
-		return '';
+	if (
+		vnode == null ||
+		vnode === true ||
+		vnode === false ||
+		vnode === EMPTY_STR
+	) {
+		return EMPTY_STR;
 	}
 
+	let vnodeType = typeof vnode;
 	// Text VNodes: escape as HTML
-	if (typeof vnode !== 'object') {
-		if (typeof vnode === 'function') return '';
-		return encodeEntities(vnode + '');
+	if (vnodeType != 'object') {
+		if (vnodeType == 'function') return EMPTY_STR;
+		return vnodeType == 'string' ? encodeEntities(vnode) : vnode + EMPTY_STR;
 	}
 
 	// Recurse into children / Arrays
 	if (isArray(vnode)) {
-		let rendered = '',
+		let rendered = EMPTY_STR,
 			renderArray;
 		parent[CHILDREN] = vnode;
 		for (let i = 0; i < vnode.length; i++) {
 			let child = vnode[i];
-			if (child == null || typeof child === 'boolean') continue;
+			if (child == null || typeof child == 'boolean') continue;
 
 			const childRender = _renderToString(
 				child,
@@ -255,16 +257,18 @@ function _renderToString(
 				renderer
 			);
 
-			if (typeof childRender === 'string') {
-				rendered += childRender;
+			if (typeof childRender == 'string') {
+				rendered = rendered + childRender;
 			} else {
-				renderArray = renderArray || [];
+				if (!renderArray) {
+					renderArray = [];
+				}
 
 				if (rendered) renderArray.push(rendered);
 
-				rendered = '';
+				rendered = EMPTY_STR;
 
-				if (Array.isArray(childRender)) {
+				if (isArray(childRender)) {
 					renderArray.push(...childRender);
 				} else {
 					renderArray.push(childRender);
@@ -281,26 +285,26 @@ function _renderToString(
 	}
 
 	// VNodes have {constructor:undefined} to prevent JSON injection:
-	if (vnode.constructor !== undefined) return '';
+	if (vnode.constructor !== undefined) return EMPTY_STR;
 
 	vnode[PARENT] = parent;
 	if (beforeDiff) beforeDiff(vnode);
 
 	let type = vnode.type,
-		props = vnode.props,
-		cctx = context,
-		contextType,
-		rendered,
-		component;
+		props = vnode.props;
 
 	// Invoke rendering on Components
-	if (typeof type === 'function') {
+	if (typeof type == 'function') {
+		let cctx = context,
+			contextType,
+			rendered,
+			component;
 		if (type === Fragment) {
 			// Serialized precompiled JSX.
-			if (props.tpl) {
-				let out = '';
+			if ('tpl' in props) {
+				let out = EMPTY_STR;
 				for (let i = 0; i < props.tpl.length; i++) {
-					out += props.tpl[i];
+					out = out + props.tpl[i];
 
 					if (props.exprs && i < props.exprs.length) {
 						const value = props.exprs[i];
@@ -308,30 +312,32 @@ function _renderToString(
 
 						// Check if we're dealing with a vnode or an array of nodes
 						if (
-							typeof value === 'object' &&
+							typeof value == 'object' &&
 							(value.constructor === undefined || isArray(value))
 						) {
-							out += _renderToString(
-								value,
-								context,
-								isSvgMode,
-								selectValue,
-								vnode,
-								asyncMode,
-								renderer
-							);
+							out =
+								out +
+								_renderToString(
+									value,
+									context,
+									isSvgMode,
+									selectValue,
+									vnode,
+									asyncMode,
+									renderer
+								);
 						} else {
 							// Values are pre-escaped by the JSX transform
-							out += value;
+							out = out + value;
 						}
 					}
 				}
 
 				return out;
-			} else if (props.UNSTABLE_comment) {
+			} else if ('UNSTABLE_comment' in props) {
 				// Fragments are the least used components of core that's why
 				// branching here for comments has the least effect on perf.
-				return '<!--' + encodeEntities(props.UNSTABLE_comment || '') + '-->';
+				return '<!--' + encodeEntities(props.UNSTABLE_comment) + '-->';
 			}
 
 			rendered = props.children;
@@ -342,22 +348,16 @@ function _renderToString(
 				cctx = provider ? provider.props.value : contextType.__;
 			}
 
-			if (type.prototype && typeof type.prototype.render === 'function') {
+			let isClassComponent =
+				type.prototype && typeof type.prototype.render == 'function';
+			if (isClassComponent) {
 				rendered = /**#__NOINLINE__**/ renderClassComponent(vnode, cctx);
 				component = vnode[COMPONENT];
 			} else {
-				component = {
-					__v: vnode,
-					props,
-					context: cctx,
-					// silently drop state updates
-					setState: markAsDirty,
-					forceUpdate: markAsDirty,
-					__d: true,
-					// hooks
-					__h: []
-				};
-				vnode[COMPONENT] = component;
+				vnode[COMPONENT] = component = /**#__NOINLINE__**/ createComponent(
+					vnode,
+					cctx
+				);
 
 				// If a hook invokes setState() to invalidate the component during rendering,
 				// re-render it up to 25 times to allow "settling" of memoized states.
@@ -380,20 +380,21 @@ function _renderToString(
 			}
 
 			if (
-				(type.getDerivedStateFromError || component.componentDidCatch) &&
-				options.errorBoundaries
+				isClassComponent &&
+				options.errorBoundaries &&
+				(type.getDerivedStateFromError || component.componentDidCatch)
 			) {
-				let str = '';
 				// When a component returns a Fragment node we flatten it in core, so we
 				// need to mirror that logic here too
 				let isTopLevelFragment =
 					rendered != null &&
 					rendered.type === Fragment &&
-					rendered.key == null;
+					rendered.key == null &&
+					rendered.props.tpl == null;
 				rendered = isTopLevelFragment ? rendered.props.children : rendered;
 
 				try {
-					str = _renderToString(
+					return _renderToString(
 						rendered,
 						context,
 						isSvgMode,
@@ -402,14 +403,13 @@ function _renderToString(
 						asyncMode,
 						renderer
 					);
-					return str;
 				} catch (err) {
 					if (type.getDerivedStateFromError) {
 						component[NEXT_STATE] = type.getDerivedStateFromError(err);
 					}
 
 					if (component.componentDidCatch) {
-						component.componentDidCatch(err, {});
+						component.componentDidCatch(err, EMPTY_OBJ);
 					}
 
 					if (component[DIRTY]) {
@@ -423,10 +423,11 @@ function _renderToString(
 						let isTopLevelFragment =
 							rendered != null &&
 							rendered.type === Fragment &&
-							rendered.key == null;
+							rendered.key == null &&
+							rendered.props.tpl == null;
 						rendered = isTopLevelFragment ? rendered.props.children : rendered;
 
-						str = _renderToString(
+						return _renderToString(
 							rendered,
 							context,
 							isSvgMode,
@@ -437,7 +438,7 @@ function _renderToString(
 						);
 					}
 
-					return str;
+					return EMPTY_STR;
 				} finally {
 					if (afterDiff) afterDiff(vnode);
 					vnode[PARENT] = null;
@@ -493,12 +494,12 @@ function _renderToString(
 
 				let errorHook = options[CATCH_ERROR];
 				if (errorHook) errorHook(error, vnode);
-				return '';
+				return EMPTY_STR;
 			}
 
 			if (!asyncMode) throw error;
 
-			if (!error || typeof error.then !== 'function') throw error;
+			if (!error || typeof error.then != 'function') throw error;
 
 			const renderNestedChildren = () => {
 				try {
@@ -512,7 +513,7 @@ function _renderToString(
 						renderer
 					);
 				} catch (e) {
-					if (!e || typeof e.then !== 'function') throw e;
+					if (!e || typeof e.then != 'function') throw e;
 
 					return e.then(
 						() =>
@@ -525,23 +526,25 @@ function _renderToString(
 								asyncMode,
 								renderer
 							),
-						() => renderNestedChildren()
+						renderNestedChildren
 					);
 				}
 			};
 
-			return error.then(() => renderNestedChildren());
+			return error.then(renderNestedChildren);
 		}
 	}
 
 	// Serialize Element VNodes to HTML
 	let s = '<' + type,
-		html = '',
+		html = EMPTY_STR,
 		children;
 
 	for (let name in props) {
 		let v = props[name];
 
+		if (typeof v == 'function') continue;
+
 		switch (name) {
 			case 'children':
 				children = v;
@@ -622,7 +625,7 @@ function _renderToString(
 					// serialize boolean aria-xyz or draggable attribute values as strings
 					// `draggable` is an enumerated attribute and not Boolean. A value of `true` or `false` is mandatory
 					// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable
-					v += '';
+					v = v + EMPTY_STR;
 				} else if (isSvgMode) {
 					if (SVG_CAMEL_CASE.test(name)) {
 						name =
@@ -637,11 +640,17 @@ function _renderToString(
 		}
 
 		// write this attribute to the buffer
-		if (v != null && v !== false && typeof v !== 'function') {
-			if (v === true || v === '') {
+		if (v != null && v !== false) {
+			if (v === true || v === EMPTY_STR) {
 				s = s + ' ' + name;
 			} else {
-				s = s + ' ' + name + '="' + encodeEntities(v + '') + '"';
+				s =
+					s +
+					' ' +
+					name +
+					'="' +
+					(typeof v == 'string' ? encodeEntities(v) : v + EMPTY_STR) +
+					'"';
 			}
 		}
 	}
@@ -687,8 +696,8 @@ function _renderToString(
 	const endTag = '</' + type + '>';
 	const startTag = s + '>';
 
-	if (Array.isArray(html)) return [startTag, ...html, endTag];
-	else if (typeof html !== 'string') return [startTag, html, endTag];
+	if (isArray(html)) return [startTag, ...html, endTag];
+	else if (typeof html != 'string') return [startTag, html, endTag];
 	return startTag + html + endTag;
 }
 

package/src/lib/util.js

@@ -33,12 +33,12 @@ export function encodeEntities(str) {
 				continue;
 		}
 		// Append skipped/buffered characters and the encoded entity:
-		if (i !== last) out += str.slice(last, i);
-		out += ch;
+		if (i !== last) out = out + str.slice(last, i);
+		out = out + ch;
 		// Start the next seek/buffer after the entity's offset:
 		last = i + 1;
 	}
-	if (i !== last) out += str.slice(last, i);
+	if (i !== last) out = out + str.slice(last, i);
 	return out;
 }
 
@@ -147,7 +147,7 @@ export function createComponent(vnode, context) {
 		forceUpdate: markAsDirty,
 		__d: true,
 		// hooks
-		__h: []
+		__h: new Array(0)
 	};
 }