From 4b01395457bf40735c11372e0c2969d9f43aef4e Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@users.noreply.github.com>
Date: Sat, 15 Feb 2020 23:16:15 -0500
Subject: [PATCH 1/3] [experiment] Performance improvements for SSR

---
 src/ssr.js | 165 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 165 insertions(+)
 create mode 100644 src/ssr.js

diff --git a/src/ssr.js b/src/ssr.js
new file mode 100644
index 00000000..9cced9f3
--- /dev/null
+++ b/src/ssr.js
@@ -0,0 +1,165 @@
+import { encodeEntities, styleObjToCss, assign } from './util';
+import { options } from 'preact';
+
+const VOID_ELEMENTS = /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
+
+const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
+
+/**
+ * Render Preact JSX + Components to an HTML string.
+ * @param {import('preact').VNode} vnode	A Virtual DOM element to render.
+ */
+export default function (vnode) {
+	return renderVNode(vnode, {}, undefined);
+}
+
+/**
+ * Render a Virtual DOM element (of any kind) to HTML.
+ * @param {import('preact').VNode|Array<any>|string|number|boolean|null|undefined} vnode any renderable value
+ * @param {object} context context object, forks throughout the tree
+ * @param {any} selectValue the current select value, passed down through the tree to set <options selected>
+ */
+function renderVNode(vnode, context, selectValue) {
+	if (vnode == null || vnode === false || vnode === true) {
+		return '';
+	}
+
+	if (typeof vnode !== 'object') {
+		return encodeEntities(vnode);
+	}
+
+	if (Array.isArray(vnode)) {
+		let s = '';
+		for (let i=0; i<vnode.length; i++) {
+			s += renderVNode(vnode[i], context, selectValue);
+		}
+		return s;
+	}
+
+
+	let nodeName = vnode.type,
+		props = vnode.props;
+
+	context = context || {};
+
+	// components
+	if (typeof nodeName === 'function') {
+		let rendered;
+
+		let c = vnode.__c = { __v: vnode, context, props: vnode.props, __h: [] };
+
+		// options.render
+		if (options.__r) options.__r(vnode);
+
+		let cxType = nodeName.contextType;
+		let provider = cxType && context[cxType.__c];
+		let cctx = cxType != null ? (provider ? provider.props.value : cxType.__) : context;
+
+		if (!('prototype' in nodeName) || !('render' in nodeName.prototype)) {
+			// Necessary for createContext api. Setting this property will pass
+			// the context value as `this.context` just for this component.
+
+			// stateless functional components
+			rendered = nodeName.call(c, props, cctx);
+		}
+		else {
+			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 ('getDerivedStateFromProps' in nodeName) {
+				c.state = assign(assign({}, c.state), nodeName.getDerivedStateFromProps(c.props, c.state));
+			}
+			else if ('componentWillMount' in c) {
+				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);
+		}
+
+		if ('getChildContext' in c) {
+			context = assign(assign({}, context), c.getChildContext());
+		}
+
+		return renderVNode(rendered, context, selectValue);
+	}
+
+	if (UNSAFE_NAME.test(nodeName)) return '';
+
+	let html = '';
+	let s = '<';
+	s += nodeName;
+
+	if (props) {
+		for (let name in props) {
+			let v = props[name];
+			let type;
+			if (name === 'children' || name === 'key' || name === 'ref' || UNSAFE_NAME.test(name)) {
+				// skip
+			}
+			else if (nodeName === 'option' && name === 'value' && selectValue === v) {
+				s += ' selected';
+				selectValue = undefined;
+			}
+			else if (nodeName === 'select' && name === 'value') {
+				selectValue = v;
+			}
+			else if (name === 'dangerouslySetInnerHTML') {
+				html = v && v.__html;
+			}
+			else if ((v || v===0) && (type = typeof v) !== 'function') {
+				if (name === 'style' && type === 'object') {
+					v = styleObjToCss(v);
+				}
+				else if (name.substring(0,5) === 'xlink') {
+					// this doesn't actually need to be limited to SVG, since attributes "xlinkHref" are invalid anyway
+					name = name.replace(/^xlink([A-Z])/, 'xlink:$1');
+				}
+				s += ' ';
+				s += name;
+				if (v !== true && v !== '') {
+					s += '="';
+					s += encodeEntities(v);
+					s += '"';
+				}
+			}
+		}
+	}
+
+	let isVoid = VOID_ELEMENTS.test(nodeName);
+	if (isVoid) {
+		s += ' />';
+	}
+	else {
+		s += '>';
+	}
+
+	if (html) {
+		s += html;
+	}
+	else if (props && props.children) {
+		s += renderVNode(props.children, context, selectValue);
+	}
+
+	if (!isVoid) {
+		s += '</';
+		s += nodeName;
+		s += '>';
+	}
+
+	return s;
+}

From bfaebcaad23825e9c5d376f25d375aa3220e9dd7 Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@users.noreply.github.com>
Date: Sat, 15 Feb 2020 23:17:11 -0500
Subject: [PATCH 2/3] Cache entity encoding

---
 src/util.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/util.js b/src/util.js
index ac8a1b29..6c8a9aa0 100644
--- a/src/util.js
+++ b/src/util.js
@@ -1,11 +1,17 @@
 // 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, '&amp;')
-	.replace(/</g, '&lt;')
-	.replace(/>/g, '&gt;')
-	.replace(/"/g, '&quot;');
+const ENC = {};
+
+export function encodeEntities(s) {
+	s = String(s);
+	return ENC[s] || (ENC[s] = s
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+	);
+}
 
 export let indent = (s, char) => String(s).replace(/(\n+)/g, '$1' + (char || '\t'));
 

From 761ba18e17e1044fdc3370e993d6b9d7920a2ff8 Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@users.noreply.github.com>
Date: Sat, 15 Feb 2020 23:27:33 -0500
Subject: [PATCH 3/3] Update ssr.js

---
 src/ssr.js | 44 +++++++++++++++++---------------------------
 1 file changed, 17 insertions(+), 27 deletions(-)

diff --git a/src/ssr.js b/src/ssr.js
index 9cced9f3..c58457ee 100644
--- a/src/ssr.js
+++ b/src/ssr.js
@@ -7,19 +7,11 @@ const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
 
 /**
  * Render Preact JSX + Components to an HTML string.
- * @param {import('preact').VNode} vnode	A Virtual DOM element to render.
- */
-export default function (vnode) {
-	return renderVNode(vnode, {}, undefined);
-}
-
-/**
- * Render a Virtual DOM element (of any kind) to HTML.
- * @param {import('preact').VNode|Array<any>|string|number|boolean|null|undefined} vnode any renderable value
+ * @param {import('preact').VNode|string|number|null|boolean} vnode any renderable value
  * @param {object} context context object, forks throughout the tree
  * @param {any} selectValue the current select value, passed down through the tree to set <options selected>
  */
-function renderVNode(vnode, context, selectValue) {
+export default function renderToString(vnode, context, selectValue) {
 	if (vnode == null || vnode === false || vnode === true) {
 		return '';
 	}
@@ -28,20 +20,19 @@ function renderVNode(vnode, context, selectValue) {
 		return encodeEntities(vnode);
 	}
 
+	context = context || {};
+
 	if (Array.isArray(vnode)) {
 		let s = '';
 		for (let i=0; i<vnode.length; i++) {
-			s += renderVNode(vnode[i], context, selectValue);
+			s += renderToString(vnode[i], context, selectValue);
 		}
 		return s;
 	}
 
-
 	let nodeName = vnode.type,
 		props = vnode.props;
 
-	context = context || {};
-
 	// components
 	if (typeof nodeName === 'function') {
 		let rendered;
@@ -51,18 +42,13 @@ function renderVNode(vnode, context, selectValue) {
 		// options.render
 		if (options.__r) options.__r(vnode);
 
+		// 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;
 
-		if (!('prototype' in nodeName) || !('render' in nodeName.prototype)) {
-			// Necessary for createContext api. Setting this property will pass
-			// the context value as `this.context` just for this component.
-
-			// stateless functional components
-			rendered = nodeName.call(c, props, cctx);
-		}
-		else {
+		if (nodeName.prototype && nodeName.prototype.render) {
 			c = vnode.__c = new nodeName(props, cctx);
 			c.__v = vnode;
 			// turn off stateful re-rendering:
@@ -75,10 +61,10 @@ function renderVNode(vnode, context, selectValue) {
 			}
 
 			c.context = cctx;
-			if ('getDerivedStateFromProps' in nodeName) {
+			if (nodeName.getDerivedStateFromProps) {
 				c.state = assign(assign({}, c.state), nodeName.getDerivedStateFromProps(c.props, c.state));
 			}
-			else if ('componentWillMount' in c) {
+			else if (c.componentWillMount) {
 				c.componentWillMount();
 			}
 
@@ -90,12 +76,16 @@ function renderVNode(vnode, context, selectValue) {
 
 			rendered = c.render(c.props, c.state, c.context);
 		}
+		else {
+			// stateless functional components
+			rendered = nodeName.call(c, props, cctx);
+		}
 
-		if ('getChildContext' in c) {
+		if (c.getChildContext) {
 			context = assign(assign({}, context), c.getChildContext());
 		}
 
-		return renderVNode(rendered, context, selectValue);
+		return renderToString(rendered, context, selectValue);
 	}
 
 	if (UNSAFE_NAME.test(nodeName)) return '';
@@ -152,7 +142,7 @@ function renderVNode(vnode, context, selectValue) {
 		s += html;
 	}
 	else if (props && props.children) {
-		s += renderVNode(props.children, context, selectValue);
+		s += renderToString(props.children, context, selectValue);
 	}
 
 	if (!isVoid) {