preact-render-to-string 5.1.21 → 5.2.2

package/src/index.js

@@ -3,7 +3,6 @@ import {
 	indent,
 	isLargeString,
 	styleObjToCss,
-	assign,
 	getChildren
 } from './util';
 import { options, Fragment } from 'preact';
@@ -18,8 +17,11 @@ const UNNAMED = [];
 const VOID_ELEMENTS = /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
 
 const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
+const XLINK = /^xlink:?./;
 
-const noop = () => {};
+function markAsDirty() {
+	this.__d = true;
+}
 
 /** Render Preact JSX + Components to an HTML string.
  *	@name render
@@ -56,7 +58,12 @@ function renderToString(vnode, context, opts) {
 	const previousSkipEffects = options.__s;
 	options.__s = true;
 
-	const res = _renderToString(vnode, context, opts);
+	let res;
+	if (opts.pretty || opts.sortAttributes) {
+		res = _renderToStringPretty(vnode, context, opts);
+	} else {
+		res = _renderToString(vnode, context, opts);
+	}
 
 	// options._commit, we don't schedule any effects in this library right now,
 	// so we can pass an empty queue to this hook.
@@ -66,6 +73,32 @@ function renderToString(vnode, context, opts) {
 	return res;
 }
 
+function createComponent(vnode, context) {
+	return {
+		__v: vnode,
+		context,
+		props: vnode.props,
+		// silently drop state updates
+		setState: markAsDirty,
+		forceUpdate: markAsDirty,
+		__d: true,
+		// hooks
+		__h: []
+	};
+}
+
+// Necessary for createContext api. Setting this property will pass
+// the context value as `this.context` just for this component.
+function getContext(nodeName, context) {
+	let cxType = nodeName.contextType;
+	let provider = cxType && context[cxType.__c];
+	return cxType != null
+		? provider
+			? provider.props.value
+			: cxType.__
+		: context;
+}
+
 /** The default export is an alias of `render()`. */
 function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 	if (vnode == null || typeof vnode === 'boolean') {
@@ -77,21 +110,309 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 		return encodeEntities(vnode);
 	}
 
-	let pretty = opts.pretty,
-		indentChar = pretty && typeof pretty === 'string' ? pretty : '\t';
-
 	if (Array.isArray(vnode)) {
-		let rendered = '';
+		const rendered = [];
 		for (let i = 0; i < vnode.length; i++) {
-			if (pretty && i > 0) rendered += '\n';
-			rendered += _renderToString(
-				vnode[i],
+			rendered.push(
+				_renderToString(vnode[i], context, opts, inner, isSvgMode, selectValue)
+			);
+		}
+		return rendered.join('');
+	}
+
+	let nodeName = vnode.type,
+		props = vnode.props,
+		isComponent = false;
+
+	// components
+	if (typeof nodeName === 'function') {
+		isComponent = true;
+		if (opts.shallow && (inner || opts.renderRootComponent === false)) {
+			nodeName = getComponentName(nodeName);
+		} else if (nodeName === Fragment) {
+			const children = [];
+			getChildren(children, vnode.props.children);
+			return _renderToString(
+				children,
 				context,
 				opts,
-				inner,
+				opts.shallowHighOrder !== false,
 				isSvgMode,
 				selectValue
 			);
+		} else {
+			let rendered;
+
+			let c = (vnode.__c = createComponent(vnode, context));
+
+			// options._diff
+			if (options.__b) options.__b(vnode);
+
+			// options._render
+			let renderHook = options.__r;
+
+			if (
+				!nodeName.prototype ||
+				typeof nodeName.prototype.render !== 'function'
+			) {
+				let cctx = getContext(nodeName, context);
+
+				// If a hook invokes setState() to invalidate the component during rendering,
+				// re-render it up to 25 times to allow "settling" of memoized states.
+				// Note:
+				//   This will need to be updated for Preact 11 to use internal.flags rather than component._dirty:
+				//   https://github.com/preactjs/preact/blob/d4ca6fdb19bc715e49fd144e69f7296b2f4daa40/src/diff/component.js#L35-L44
+				let count = 0;
+				while (c.__d && count++ < 25) {
+					c.__d = false;
+
+					if (renderHook) renderHook(vnode);
+
+					// stateless functional components
+					rendered = nodeName.call(vnode.__c, props, cctx);
+				}
+			} else {
+				let cctx = getContext(nodeName, context);
+
+				// c = new nodeName(props, context);
+				c = vnode.__c = new nodeName(props, cctx);
+				c.__v = vnode;
+				// turn off stateful re-rendering:
+				c._dirty = c.__d = true;
+				c.props = props;
+				if (c.state == null) c.state = {};
+
+				if (c._nextState == null && c.__s == null) {
+					c._nextState = c.__s = c.state;
+				}
+
+				c.context = cctx;
+				if (nodeName.getDerivedStateFromProps)
+					c.state = Object.assign(
+						{},
+						c.state,
+						nodeName.getDerivedStateFromProps(c.props, c.state)
+					);
+				else if (c.componentWillMount) {
+					c.componentWillMount();
+
+					// If the user called setState in cWM we need to flush pending,
+					// state updates. This is the same behaviour in React.
+					c.state =
+						c._nextState !== c.state
+							? c._nextState
+							: c.__s !== c.state
+							? c.__s
+							: c.state;
+				}
+
+				if (renderHook) renderHook(vnode);
+
+				rendered = c.render(c.props, c.state, c.context);
+			}
+
+			if (c.getChildContext) {
+				context = Object.assign({}, context, c.getChildContext());
+			}
+
+			if (options.diffed) options.diffed(vnode);
+			return _renderToString(
+				rendered,
+				context,
+				opts,
+				opts.shallowHighOrder !== false,
+				isSvgMode,
+				selectValue
+			);
+		}
+	}
+
+	// render JSX to HTML
+	let s = `<${nodeName}`,
+		propChildren,
+		html;
+
+	if (props) {
+		for (let name in props) {
+			let v = props[name];
+			if (name === 'children') {
+				propChildren = v;
+				continue;
+			}
+
+			if (UNSAFE_NAME.test(name)) continue;
+
+			if (
+				!(opts && opts.allAttributes) &&
+				(name === 'key' ||
+					name === 'ref' ||
+					name === '__self' ||
+					name === '__source')
+			)
+				continue;
+
+			if (name === 'defaultValue') {
+				name = 'value';
+			} else if (name === 'defaultChecked') {
+				name = 'checked';
+			} else if (name === 'defaultSelected') {
+				name = 'selected';
+			} else if (name === 'className') {
+				if (typeof props.class !== 'undefined') continue;
+				name = 'class';
+			} else if (isSvgMode && XLINK.test(name)) {
+				name = name.toLowerCase().replace(/^xlink:?/, 'xlink:');
+			}
+
+			if (name === 'htmlFor') {
+				if (props.for) continue;
+				name = 'for';
+			}
+
+			if (name === 'style' && v && typeof v === 'object') {
+				v = styleObjToCss(v);
+			}
+
+			// always use string values instead of booleans for aria attributes
+			// also see https://github.com/preactjs/preact/pull/2347/files
+			if (name[0] === 'a' && name['1'] === 'r' && typeof v === 'boolean') {
+				v = String(v);
+			}
+
+			let hooked =
+				opts.attributeHook &&
+				opts.attributeHook(name, v, context, opts, isComponent);
+			if (hooked || hooked === '') {
+				s = s + hooked;
+				continue;
+			}
+
+			if (name === 'dangerouslySetInnerHTML') {
+				html = v && v.__html;
+			} else if (nodeName === 'textarea' && name === 'value') {
+				// <textarea value="a&b"> --> <textarea>a&amp;b</textarea>
+				propChildren = v;
+			} else if ((v || v === 0 || v === '') && typeof v !== 'function') {
+				if (v === true || v === '') {
+					v = name;
+					// in non-xml mode, allow boolean attributes
+					if (!opts || !opts.xml) {
+						s = s + ' ' + name;
+						continue;
+					}
+				}
+
+				if (name === 'value') {
+					if (nodeName === 'select') {
+						selectValue = v;
+						continue;
+					} else if (
+						// If we're looking at an <option> and it's the currently selected one
+						nodeName === 'option' &&
+						selectValue == v &&
+						// and the <option> doesn't already have a selected attribute on it
+						typeof props.selected === 'undefined'
+					) {
+						s = `${s} selected`;
+					}
+				}
+				s = s + ` ${name}="${encodeEntities(v)}"`;
+			}
+		}
+	}
+
+	s = s + '>';
+
+	if (UNSAFE_NAME.test(nodeName))
+		throw new Error(`${nodeName} is not a valid HTML tag name in ${s}`);
+
+	let isVoid =
+		VOID_ELEMENTS.test(nodeName) ||
+		(opts.voidElements && opts.voidElements.test(nodeName));
+	let pieces = '';
+
+	let children;
+	if (html) {
+		s = s + html;
+	} else if (
+		propChildren != null &&
+		getChildren((children = []), propChildren).length
+	) {
+		for (let i = 0; i < children.length; i++) {
+			let child = children[i];
+
+			if (child != null && child !== false) {
+				let childSvgMode =
+						nodeName === 'svg'
+							? true
+							: nodeName === 'foreignObject'
+							? false
+							: isSvgMode,
+					ret = _renderToString(
+						child,
+						context,
+						opts,
+						true,
+						childSvgMode,
+						selectValue
+					);
+
+				// Skip if we received an empty string
+				if (ret) {
+					pieces = pieces + ret;
+				}
+			}
+		}
+	}
+
+	if (pieces.length || html) {
+		s = s + pieces;
+	} else if (opts && opts.xml) {
+		return s.substring(0, s.length - 1) + ' />';
+	}
+
+	if (isVoid && !children && !html) {
+		return s.replace(/>$/, ' />');
+	}
+
+	return `${s}</${nodeName}>`;
+}
+
+/** The default export is an alias of `render()`. */
+function _renderToStringPretty(
+	vnode,
+	context,
+	opts,
+	inner,
+	isSvgMode,
+	selectValue
+) {
+	if (vnode == null || typeof vnode === 'boolean') {
+		return '';
+	}
+
+	// #text nodes
+	if (typeof vnode !== 'object') {
+		return encodeEntities(vnode);
+	}
+
+	let pretty = opts.pretty,
+		indentChar = pretty && typeof pretty === 'string' ? pretty : '\t';
+
+	if (Array.isArray(vnode)) {
+		let rendered = '';
+		for (let i = 0; i < vnode.length; i++) {
+			if (pretty && i > 0) rendered = rendered + '\n';
+			rendered =
+				rendered +
+				_renderToStringPretty(
+					vnode[i],
+					context,
+					opts,
+					inner,
+					isSvgMode,
+					selectValue
+				);
 		}
 		return rendered;
 	}
@@ -108,7 +429,7 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 		} else if (nodeName === Fragment) {
 			const children = [];
 			getChildren(children, vnode.props.children);
-			return _renderToString(
+			return _renderToStringPretty(
 				children,
 				context,
 				opts,
@@ -119,50 +440,36 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 		} else {
 			let rendered;
 
-			let c = (vnode.__c = {
-				__v: vnode,
-				context,
-				props: vnode.props,
-				// silently drop state updates
-				setState: noop,
-				forceUpdate: noop,
-				// hooks
-				__h: []
-			});
+			let c = (vnode.__c = createComponent(vnode, context));
 
 			// options._diff
 			if (options.__b) options.__b(vnode);
 
 			// options._render
-			if (options.__r) options.__r(vnode);
+			let renderHook = options.__r;
 
 			if (
 				!nodeName.prototype ||
 				typeof nodeName.prototype.render !== 'function'
 			) {
-				// Necessary for createContext api. Setting this property will pass
-				// the context value as `this.context` just for this component.
-				let cxType = nodeName.contextType;
-				let provider = cxType && context[cxType.__c];
-				let cctx =
-					cxType != null
-						? provider
-							? provider.props.value
-							: cxType.__
-						: context;
-
-				// stateless functional components
-				rendered = nodeName.call(vnode.__c, props, cctx);
+				let cctx = getContext(nodeName, context);
+
+				// If a hook invokes setState() to invalidate the component during rendering,
+				// re-render it up to 25 times to allow "settling" of memoized states.
+				// Note:
+				//   This will need to be updated for Preact 11 to use internal.flags rather than component._dirty:
+				//   https://github.com/preactjs/preact/blob/d4ca6fdb19bc715e49fd144e69f7296b2f4daa40/src/diff/component.js#L35-L44
+				let count = 0;
+				while (c.__d && count++ < 25) {
+					c.__d = false;
+
+					if (renderHook) renderHook(vnode);
+
+					// stateless functional components
+					rendered = nodeName.call(vnode.__c, props, cctx);
+				}
 			} else {
-				// class-based components
-				let cxType = nodeName.contextType;
-				let provider = cxType && context[cxType.__c];
-				let cctx =
-					cxType != null
-						? provider
-							? provider.props.value
-							: cxType.__
-						: context;
+				let cctx = getContext(nodeName, context);
 
 				// c = new nodeName(props, context);
 				c = vnode.__c = new nodeName(props, cctx);
@@ -178,8 +485,9 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 
 				c.context = cctx;
 				if (nodeName.getDerivedStateFromProps)
-					c.state = assign(
-						assign({}, c.state),
+					c.state = Object.assign(
+						{},
+						c.state,
 						nodeName.getDerivedStateFromProps(c.props, c.state)
 					);
 				else if (c.componentWillMount) {
@@ -195,15 +503,17 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 							: c.state;
 				}
 
+				if (renderHook) renderHook(vnode);
+
 				rendered = c.render(c.props, c.state, c.context);
 			}
 
 			if (c.getChildContext) {
-				context = assign(assign({}, context), c.getChildContext());
+				context = Object.assign({}, context, c.getChildContext());
 			}
 
 			if (options.diffed) options.diffed(vnode);
-			return _renderToString(
+			return _renderToStringPretty(
 				rendered,
 				context,
 				opts,
@@ -246,10 +556,14 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 
 			if (name === 'defaultValue') {
 				name = 'value';
+			} else if (name === 'defaultChecked') {
+				name = 'checked';
+			} else if (name === 'defaultSelected') {
+				name = 'selected';
 			} else if (name === 'className') {
 				if (typeof props.class !== 'undefined') continue;
 				name = 'class';
-			} else if (isSvgMode && name.match(/^xlink:?./)) {
+			} else if (isSvgMode && XLINK.test(name)) {
 				name = name.toLowerCase().replace(/^xlink:?/, 'xlink:');
 			}
 
@@ -272,7 +586,7 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 				opts.attributeHook &&
 				opts.attributeHook(name, v, context, opts, isComponent);
 			if (hooked || hooked === '') {
-				s += hooked;
+				s = s + hooked;
 				continue;
 			}
 
@@ -286,7 +600,7 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 					v = name;
 					// in non-xml mode, allow boolean attributes
 					if (!opts || !opts.xml) {
-						s += ' ' + name;
+						s = s + ' ' + name;
 						continue;
 					}
 				}
@@ -302,10 +616,10 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 						// and the <option> doesn't already have a selected attribute on it
 						typeof props.selected === 'undefined'
 					) {
-						s += ` selected`;
+						s = s + ` selected`;
 					}
 				}
-				s += ` ${name}="${encodeEntities(v)}"`;
+				s = s + ` ${name}="${encodeEntities(v)}"`;
 			}
 		}
 	}
@@ -314,10 +628,10 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 	if (pretty) {
 		let sub = s.replace(/\n\s*/, ' ');
 		if (sub !== s && !~sub.indexOf('\n')) s = sub;
-		else if (pretty && ~s.indexOf('\n')) s += '\n';
+		else if (pretty && ~s.indexOf('\n')) s = s + '\n';
 	}
 
-	s += '>';
+	s = s + '>';
 
 	if (UNSAFE_NAME.test(nodeName))
 		throw new Error(`${nodeName} is not a valid HTML tag name in ${s}`);
@@ -333,7 +647,7 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 		if (pretty && isLargeString(html)) {
 			html = '\n' + indentChar + indent(html, indentChar);
 		}
-		s += html;
+		s = s + html;
 	} else if (
 		propChildren != null &&
 		getChildren((children = []), propChildren).length
@@ -351,7 +665,7 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 							: nodeName === 'foreignObject'
 							? false
 							: isSvgMode,
-					ret = _renderToString(
+					ret = _renderToStringPretty(
 						child,
 						context,
 						opts,
@@ -390,7 +704,7 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 	}
 
 	if (pieces.length || html) {
-		s += pieces.join('');
+		s = s + pieces.join('');
 	} else if (opts && opts.xml) {
 		return s.substring(0, s.length - 1) + ' />';
 	}
@@ -398,8 +712,8 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 	if (isVoid && !children && !html) {
 		s = s.replace(/>$/, ' />');
 	} else {
-		if (pretty && ~s.indexOf('\n')) s += '\n';
-		s += `</${nodeName}>`;
+		if (pretty && ~s.indexOf('\n')) s = s + '\n';
+		s = s + `</${nodeName}>`;
 	}
 
 	return s;

package/src/util.js

@@ -3,16 +3,34 @@ export const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine
 
 const ENCODED_ENTITIES = /[&<>"]/;
 
-export function encodeEntities(input) {
-	const s = String(input);
-	if (!ENCODED_ENTITIES.test(s)) {
-		return s;
+export function encodeEntities(str) {
+	// Ensure we're always parsing and returning a string:
+	str += '';
+
+	// Skip all work for strings with no entities needing encoding:
+	if (ENCODED_ENTITIES.test(str) === false) return str;
+
+	let last = 0,
+		i = 0,
+		out = '',
+		ch = '';
+
+	// Seek forward in str until the next entity char:
+	for (; i<str.length; i++) {
+		switch (str.charCodeAt(i)) {
+			case 60: ch = '&lt;'; break;
+			case 62: ch = '&gt;'; break;
+			case 34: ch = '&quot;'; break;
+			case 38: ch = '&amp;'; break;
+			default: continue;
+		}
+		// Append skipped/buffered characters and the encoded entity:
+		if (i > last) out += str.slice(last, i);
+		out += ch;
+		// Start the next seek/buffer after the entity's offset:
+		last = i + 1;
 	}
-	return s
-		.replace(/&/g, '&amp;')
-		.replace(/</g, '&lt;')
-		.replace(/>/g, '&gt;')
-		.replace(/"/g, '&quot;');
+	return out + str.slice(last, i);
 }
 
 export let indent = (s, char) =>
@@ -57,8 +75,7 @@ export function styleObjToCss(s) {
  * @private
  */
 export function assign(obj, props) {
-	for (let i in props) obj[i] = props[i];
-	return obj;
+	return Object.assign(obj, props);
 }
 
 /**