preact-render-to-string 5.1.7 → 5.1.11

package/src/index.js

@@ -1,4 +1,11 @@
-import { encodeEntities, indent, isLargeString, styleObjToCss, assign, getChildren } from './util';
+import {
+	encodeEntities,
+	indent,
+	isLargeString,
+	styleObjToCss,
+	assign,
+	getChildren
+} from './util';
 import { options, Fragment, createElement } from 'preact';
 
 const SHALLOW = { shallow: true };
@@ -10,7 +17,6 @@ const VOID_ELEMENTS = /^(area|base|br|col|embed|hr|img|input|link|meta|param|sou
 
 const noop = () => {};
 
-
 /** Render Preact JSX + Components to an HTML string.
  *	@name render
  *	@function
@@ -20,10 +26,10 @@ const noop = () => {};
  *	@param {Boolean} [options.shallow=false]	If `true`, renders nested Components as HTML elements (`<Foo a="b" />`).
  *	@param {Boolean} [options.xml=false]		If `true`, uses self-closing tags for elements without children.
  *	@param {Boolean} [options.pretty=false]		If `true`, adds whitespace for readability
+ *	@param {RegEx|undefined} [options.voidElements]       RegeEx that matches elements that are considered void (self-closing)
  */
 renderToString.render = renderToString;
 
-
 /** Only render elements, leaving Components inline as `<ComponentName ... />`.
  *	This method is just a convenience alias for `render(vnode, context, { shallow:true })`
  *	@name shallow
@@ -33,10 +39,9 @@ renderToString.render = renderToString;
  */
 let shallowRender = (vnode, context) => renderToString(vnode, context, SHALLOW);
 
-
 /** The default export is an alias of `render()`. */
 function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
-	if (vnode==null || typeof vnode==='boolean') {
+	if (vnode == null || typeof vnode === 'boolean') {
 		return '';
 	}
 
@@ -52,33 +57,40 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 	opts = opts || {};
 
 	let pretty = opts.pretty,
-		indentChar = pretty && typeof pretty==='string' ? pretty : '\t';
+		indentChar = pretty && typeof pretty === 'string' ? pretty : '\t';
 
 	// #text nodes
-	if (typeof vnode!=='object' && !nodeName) {
+	if (typeof vnode !== 'object' && !nodeName) {
 		return encodeEntities(vnode);
 	}
 
 	// components
-	if (typeof nodeName==='function') {
+	if (typeof nodeName === 'function') {
 		isComponent = true;
-		if (opts.shallow && (inner || opts.renderRootComponent===false)) {
+		if (opts.shallow && (inner || opts.renderRootComponent === false)) {
 			nodeName = getComponentName(nodeName);
-		}
-		else if (nodeName===Fragment) {
+		} else if (nodeName === Fragment) {
 			let rendered = '';
 			let children = [];
 			getChildren(children, vnode.props.children);
 
 			for (let i = 0; i < children.length; i++) {
-				rendered += (i > 0 && pretty ? '\n' : '') + renderToString(children[i], context, opts, opts.shallowHighOrder!==false, isSvgMode, selectValue);
+				rendered +=
+					(i > 0 && pretty ? '\n' : '') +
+					renderToString(
+						children[i],
+						context,
+						opts,
+						opts.shallowHighOrder !== false,
+						isSvgMode,
+						selectValue
+					);
 			}
 			return rendered;
-		}
-		else {
+		} else {
 			let rendered;
 
-			let c = vnode.__c = {
+			let c = (vnode.__c = {
 				__v: vnode,
 				context,
 				props: vnode.props,
@@ -87,26 +99,41 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 				forceUpdate: noop,
 				// hooks
 				__h: []
-			};
+			});
+
+			// options._diff
+			if (options.__b) options.__b(vnode);
 
-			// options.render
+			// options._render
 			if (options.__r) options.__r(vnode);
 
-			if (!nodeName.prototype || typeof nodeName.prototype.render!=='function') {
+			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;
+				let cctx =
+					cxType != null
+						? provider
+							? provider.props.value
+							: cxType.__
+						: context;
 
 				// stateless functional components
 				rendered = nodeName.call(vnode.__c, props, cctx);
-			}
-			else {
+			} 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 =
+					cxType != null
+						? provider
+							? provider.props.value
+							: cxType.__
+						: context;
 
 				// c = new nodeName(props, context);
 				c = vnode.__c = new nodeName(props, cctx);
@@ -114,21 +141,30 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 				// turn off stateful re-rendering:
 				c._dirty = c.__d = true;
 				c.props = props;
-				if (c.state==null) c.state = {};
+				if (c.state == null) c.state = {};
 
-				if (c._nextState==null && c.__s==null) {
+				if (c._nextState == null && c.__s == null) {
 					c._nextState = c.__s = c.state;
 				}
 
 				c.context = cctx;
-				if (nodeName.getDerivedStateFromProps) c.state = assign(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 (nodeName.getDerivedStateFromProps)
+					c.state = assign(
+						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;
+				}
 
 				rendered = c.render(c.props, c.state, c.context);
 			}
@@ -137,51 +173,85 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 				context = assign(assign({}, context), c.getChildContext());
 			}
 
-			return renderToString(rendered, context, opts, opts.shallowHighOrder!==false, isSvgMode, selectValue);
+			return renderToString(
+				rendered,
+				context,
+				opts,
+				opts.shallowHighOrder !== false,
+				isSvgMode,
+				selectValue
+			);
 		}
 	}
 
 	// render JSX to HTML
-	let s = '', html;
+	let s = '',
+		propChildren,
+		html;
 
 	if (props) {
 		let attrs = Object.keys(props);
 
 		// allow sorting lexicographically for more determinism (useful for tests, such as via preact-jsx-chai)
-		if (opts && opts.sortAttributes===true) attrs.sort();
+		if (opts && opts.sortAttributes === true) attrs.sort();
 
-		for (let i=0; i<attrs.length; i++) {
+		for (let i = 0; i < attrs.length; i++) {
 			let name = attrs[i],
 				v = props[name];
-			if (name==='children') continue;
+			if (name === 'children') {
+				propChildren = v;
+				continue;
+			}
 
 			if (name.match(/[\s\n\\/='"\0<>]/)) continue;
 
-			if (!(opts && opts.allAttributes) && (name==='key' || name==='ref')) continue;
+			if (
+				!(opts && opts.allAttributes) &&
+				(name === 'key' ||
+					name === 'ref' ||
+					name === '__self' ||
+					name === '__source' ||
+					name === 'defaultValue')
+			)
+				continue;
 
-			if (name==='className') {
+			if (name === 'className') {
 				if (props.class) continue;
 				name = 'class';
-			}
-			else if (isSvgMode && name.match(/^xlink:?./)) {
+			} else if (isSvgMode && name.match(/^xlink:?./)) {
 				name = name.toLowerCase().replace(/^xlink:?/, 'xlink:');
 			}
 
-			if (name==='style' && v && typeof v==='object') {
+			if (name === 'htmlFor') {
+				if (props.for) continue;
+				name = 'for';
+			}
+
+			if (name === 'style' && v && typeof v === 'object') {
 				v = styleObjToCss(v);
 			}
 
-			let hooked = opts.attributeHook && opts.attributeHook(name, v, context, opts, isComponent);
-			if (hooked || hooked==='') {
+			// 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 += hooked;
 				continue;
 			}
 
-			if (name==='dangerouslySetInnerHTML') {
+			if (name === 'dangerouslySetInnerHTML') {
 				html = v && v.__html;
-			}
-			else if ((v || v===0 || v==='') && typeof v!=='function') {
-				if (v===true || v==='') {
+			} 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) {
@@ -190,12 +260,11 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 					}
 				}
 
-				if (name==='value') {
-					if (nodeName==='select') {
+				if (name === 'value') {
+					if (nodeName === 'select') {
 						selectValue = v;
 						continue;
-					}
-					else if (nodeName==='option' && selectValue==v) {
+					} else if (nodeName === 'option' && selectValue == v) {
 						s += ` selected`;
 					}
 				}
@@ -207,16 +276,17 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 	// account for >1 multiline attribute
 	if (pretty) {
 		let sub = s.replace(/^\n\s*/, ' ');
-		if (sub!==s && !~sub.indexOf('\n')) s = sub;
+		if (sub !== s && !~sub.indexOf('\n')) s = sub;
 		else if (pretty && ~s.indexOf('\n')) s += '\n';
 	}
 
 	s = `<${nodeName}${s}>`;
-	if (String(nodeName).match(/[\s\n\\/='"\0<>]/)) throw new Error(`${nodeName} is not a valid HTML tag name in ${s}`);
-
-	let isVoid = String(nodeName).match(VOID_ELEMENTS);
-	if (isVoid) s = s.replace(/>$/, ' />');
+	if (String(nodeName).match(/[\s\n\\/='"\0<>]/))
+		throw new Error(`${nodeName} is not a valid HTML tag name in ${s}`);
 
+	let isVoid =
+		String(nodeName).match(VOID_ELEMENTS) ||
+		(opts.voidElements && String(nodeName).match(opts.voidElements));
 	let pieces = [];
 
 	let children;
@@ -226,44 +296,56 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 			html = '\n' + indentChar + indent(html, indentChar);
 		}
 		s += html;
-	}
-	else if (props && getChildren(children = [], props.children).length) {
+	} else if (
+		propChildren != null &&
+		getChildren((children = []), propChildren).length
+	) {
 		let hasLarge = pretty && ~s.indexOf('\n');
 		let lastWasText = false;
 
-		for (let i=0; i<children.length; i++) {
+		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);
+			if (child != null && child !== false) {
+				let childSvgMode =
+						nodeName === 'svg'
+							? true
+							: nodeName === 'foreignObject'
+							? false
+							: isSvgMode,
+					ret = renderToString(
+						child,
+						context,
+						opts,
+						true,
+						childSvgMode,
+						selectValue
+					);
 
 				if (pretty && !hasLarge && isLargeString(ret)) hasLarge = true;
 
 				// Skip if we received an empty string
 				if (ret) {
 					if (pretty) {
-						let isText = ret.length > 0 && ret[0]!='<';
-						
+						let isText = ret.length > 0 && ret[0] != '<';
+
 						// We merge adjacent text nodes, otherwise each piece would be printed
 						// on a new line.
 						if (lastWasText && isText) {
-							pieces[pieces.length -1] += ret;
-						}
-						else {
+							pieces[pieces.length - 1] += ret;
+						} else {
 							pieces.push(ret);
 						}
 
 						lastWasText = isText;
-					}
-					else {
+					} else {
 						pieces.push(ret);
 					}
 				}
 			}
 		}
 		if (pretty && hasLarge) {
-			for (let i=pieces.length; i--; ) {
+			for (let i = pieces.length; i--; ) {
 				pieces[i] = '\n' + indentChar + indent(pieces[i], indentChar);
 			}
 		}
@@ -271,12 +353,13 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 
 	if (pieces.length) {
 		s += pieces.join('');
-	}
-	else if (opts && opts.xml) {
-		return s.substring(0, s.length-1) + ' />';
+	} else if (opts && opts.xml) {
+		return s.substring(0, s.length - 1) + ' />';
 	}
 
-	if (!isVoid) {
+	if (isVoid && !children) {
+		s = s.replace(/>$/, ' />');
+	} else {
 		if (pretty && ~s.indexOf('\n')) s += '\n';
 		s += `</${nodeName}>`;
 	}
@@ -285,7 +368,11 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 }
 
 function getComponentName(component) {
-	return component.displayName || component!==Function && component.name || getFallbackComponentName(component);
+	return (
+		component.displayName ||
+		(component !== Function && component.name) ||
+		getFallbackComponentName(component)
+	);
 }
 
 function getFallbackComponentName(component) {
@@ -294,14 +381,14 @@ function getFallbackComponentName(component) {
 	if (!name) {
 		// search for an existing indexed name for the given component:
 		let index = -1;
-		for (let i=UNNAMED.length; i--; ) {
-			if (UNNAMED[i]===component) {
+		for (let i = UNNAMED.length; i--; ) {
+			if (UNNAMED[i] === component) {
 				index = i;
 				break;
 			}
 		}
 		// not found, create a new indexed name:
-		if (index<0) {
+		if (index < 0) {
 			index = UNNAMED.push(component) - 1;
 		}
 		name = `UnnamedComponent${index}`;
@@ -314,6 +401,7 @@ export default renderToString;
 
 export {
 	renderToString as render,
+	renderToString as renderToStaticMarkup,
 	renderToString,
 	shallowRender
 };

package/src/jsx.d.ts

@@ -1,13 +1,13 @@
 import { VNode } from 'preact';
 
 interface Options {
-  jsx?: boolean;
-  xml?: boolean;
-  functions?: boolean
-  functionNames?: boolean,
-  skipFalseAttributes?: boolean
-  pretty?: boolean | string;
+	jsx?: boolean;
+	xml?: boolean;
+	functions?: boolean;
+	functionNames?: boolean;
+	skipFalseAttributes?: boolean;
+	pretty?: boolean | string;
 }
 
-export function render(vnode: VNode, context?: any, options?: Options):string;
+export function render(vnode: VNode, context?: any, options?: Options): string;
 export default render;

package/src/jsx.js

@@ -3,45 +3,53 @@ import renderToString from './index';
 import { indent, encodeEntities, assign } from './util';
 import prettyFormat from 'pretty-format';
 
-
 // we have to patch in Array support, Possible issue in npm.im/pretty-format
 let preactPlugin = {
 	test(object) {
-		return object && typeof object==='object' && 'type' in object && 'props' in object && 'key' in object;
+		return (
+			object &&
+			typeof object === 'object' &&
+			'type' in object &&
+			'props' in object &&
+			'key' in object
+		);
 	},
 	print(val, print, indent) {
 		return renderToString(val, preactPlugin.context, preactPlugin.opts, true);
 	}
 };
 
-
 let prettyFormatOpts = {
 	plugins: [preactPlugin]
 };
 
-
 function attributeHook(name, value, context, opts, isComponent) {
 	let type = typeof value;
-	
+
 	// Use render-to-string's built-in handling for these properties
-	if (name==='dangerouslySetInnerHTML') return false;
+	if (name === 'dangerouslySetInnerHTML') return false;
 
 	// always skip null & undefined values, skip false DOM attributes, skip functions if told to
-	if (value==null || (type==='function' && !opts.functions)) return '';
+	if (value == null || (type === 'function' && !opts.functions)) return '';
 
-	if (opts.skipFalseAttributes && !isComponent && (value===false || ((name==='class' || name==='style') && value===''))) return '';
+	if (
+		opts.skipFalseAttributes &&
+		!isComponent &&
+		(value === false ||
+			((name === 'class' || name === 'style') && value === ''))
+	)
+		return '';
 
-	let indentChar = typeof opts.pretty==='string' ? opts.pretty : '\t';
-	if (type!=='string') {
-		if (type==='function' && !opts.functionNames) {
+	let indentChar = typeof opts.pretty === 'string' ? opts.pretty : '\t';
+	if (type !== 'string') {
+		if (type === 'function' && !opts.functionNames) {
 			value = 'Function';
-		}
-		else {
+		} else {
 			preactPlugin.context = context;
 			preactPlugin.opts = opts;
 			value = prettyFormat(value, prettyFormatOpts);
 			if (~value.indexOf('\n')) {
-				value = `${indent('\n'+value, indentChar)}\n`;
+				value = `${indent('\n' + value, indentChar)}\n`;
 			}
 		}
 		return indent(`\n${name}={${value}}`, indentChar);
@@ -49,7 +57,6 @@ function attributeHook(name, value, context, opts, isComponent) {
 	return `\n${indentChar}${name}="${encodeEntities(value)}"`;
 }
 
-
 let defaultOpts = {
 	attributeHook,
 	jsx: true,
@@ -60,7 +67,6 @@ let defaultOpts = {
 	pretty: '  '
 };
 
-
 function renderToJsxString(vnode, context, opts, inner) {
 	opts = assign(assign({}, defaultOpts), opts || {});
 	return renderToString(vnode, context, opts, inner);

package/src/polyfills.js

@@ -1,7 +1,8 @@
-if (typeof Symbol!=='function') {
+if (typeof Symbol !== 'function') {
 	let c = 0;
-	Symbol = function(s) {		// eslint-disable-line
+	// eslint-disable-next-line
+	Symbol = function (s) {
 		return `@@${s}${++c}`;
 	};
-	Symbol.for = s => `@@${s}`;
+	Symbol.for = (s) => `@@${s}`;
 }

package/src/util.js

@@ -1,15 +1,30 @@
 // DOM properties that should NOT have "px" added when numeric
 export const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|^--/i;
 
-export let encodeEntities = s => String(s)
-	.replace(/&/g, '&')
-	.replace(/</g, '&lt;')
-	.replace(/>/g, '&gt;')
-	.replace(/"/g, '&quot;');
+export function encodeEntities(s) {
+	if (typeof s !== 'string') s = String(s);
+	let out = '';
+	for (let i = 0; i < s.length; i++) {
+		let ch = s[i];
+		// prettier-ignore
+		switch (ch) {
+			case '<': out += '&lt;'; break;
+			case '>': out += '&gt;'; break;
+			case '"': out += '&quot;'; break;
+			case '&': out += '&amp;'; break;
+			default: out += ch;
+		}
+	}
+	return out;
+}
 
-export let indent = (s, char) => String(s).replace(/(\n+)/g, '$1' + (char || '\t'));
+export let indent = (s, char) =>
+	String(s).replace(/(\n+)/g, '$1' + (char || '\t'));
 
-export let isLargeString = (s, length, ignoreLines) => (String(s).length>(length || 40) || (!ignoreLines && String(s).indexOf('\n')!==-1) || String(s).indexOf('<')!==-1);
+export let isLargeString = (s, length, ignoreLines) =>
+	String(s).length > (length || 40) ||
+	(!ignoreLines && String(s).indexOf('\n') !== -1) ||
+	String(s).indexOf('<') !== -1;
 
 const JS_TO_CSS = {};
 
@@ -18,13 +33,17 @@ export function styleObjToCss(s) {
 	let str = '';
 	for (let prop in s) {
 		let val = s[prop];
-		if (val!=null) {
+		if (val != null) {
 			if (str) str += ' ';
 			// str += jsToCss(prop);
-			str += JS_TO_CSS[prop] || (JS_TO_CSS[prop] = prop.replace(/([A-Z])/g,'-$1').toLowerCase());
+			str +=
+				prop[0] == '-'
+					? prop
+					: JS_TO_CSS[prop] ||
+					  (JS_TO_CSS[prop] = prop.replace(/([A-Z])/g, '-$1').toLowerCase());
 			str += ': ';
 			str += val;
-			if (typeof val==='number' && IS_NON_DIMENSIONAL.test(prop)===false) {
+			if (typeof val === 'number' && IS_NON_DIMENSIONAL.test(prop) === false) {
 				str += 'px';
 			}
 			str += ';';
@@ -55,8 +74,7 @@ export function assign(obj, props) {
 export function getChildren(accumulator, children) {
 	if (Array.isArray(children)) {
 		children.reduce(getChildren, accumulator);
-	}
-	else if (children!=null && children!==false) {
+	} else if (children != null && children !== false) {
 		accumulator.push(children);
 	}
 	return accumulator;