preact-render-to-string 6.5.13 → 6.6.0

package/src/index.js

@@ -6,7 +6,10 @@ import {
 	HTML_LOWER_CASE,
 	HTML_ENUMERATED,
 	SVG_CAMEL_CASE,
-	createComponent
+	createComponent,
+	setDirty,
+	unsetDirty,
+	isDirty
 } from './lib/util.js';
 import { options, h, Fragment } from 'preact';
 import {
@@ -15,7 +18,6 @@ import {
 	COMPONENT,
 	DIFF,
 	DIFFED,
-	DIRTY,
 	NEXT_STATE,
 	PARENT,
 	RENDER,
@@ -29,6 +31,8 @@ const EMPTY_ARR = [];
 const isArray = Array.isArray;
 const assign = Object.assign;
 const EMPTY_STR = '';
+const BEGIN_SUSPENSE_DENOMINATOR = '<!--$s-->';
+const END_SUSPENSE_DENOMINATOR = '<!--/$s-->';
 
 // Global state for the current render pass
 let beforeDiff, afterDiff, renderHook, ummountHook;
@@ -172,8 +176,9 @@ function renderClassComponent(vnode, context) {
 
 	c.props = vnode.props;
 	c.context = context;
-	// turn off stateful re-rendering:
-	c[DIRTY] = true;
+
+	// Turn off stateful rendering
+	setDirty(c);
 
 	if (c.state == null) c.state = EMPTY_OBJ;
 
@@ -263,6 +268,7 @@ function _renderToString(
 				rendered = rendered + childRender;
 			} else {
 				if (!renderArray) {
+					// oxlint-disable-next-line no-new-array
 					renderArray = new Array(vnodeLength);
 				}
 
@@ -367,14 +373,22 @@ function _renderToString(
 				//   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 (component[DIRTY] && count++ < 25) {
-					component[DIRTY] = false;
+				while (isDirty(component) && count++ < 25) {
+					unsetDirty(component);
 
 					if (renderHook) renderHook(vnode);
 
-					rendered = type.call(component, props, cctx);
+					try {
+						rendered = type.call(component, props, cctx);
+					} catch (e) {
+						if (asyncMode) {
+							vnode._suspended = true;
+						}
+						throw e;
+					}
 				}
-				component[DIRTY] = true;
+
+				setDirty(component);
 			}
 
 			if (component.getChildContext != null) {
@@ -403,6 +417,7 @@ function _renderToString(
 						selectValue,
 						vnode,
 						asyncMode,
+						false,
 						renderer
 					);
 				} catch (err) {
@@ -414,7 +429,7 @@ function _renderToString(
 						component.componentDidCatch(err, EMPTY_OBJ);
 					}
 
-					if (component[DIRTY]) {
+					if (isDirty(component)) {
 						rendered = renderClassComponent(vnode, context);
 						component = vnode[COMPONENT];
 
@@ -475,6 +490,21 @@ function _renderToString(
 
 			if (options.unmount) options.unmount(vnode);
 
+			if (vnode._suspended) {
+				if (typeof str === 'string') {
+					return BEGIN_SUSPENSE_DENOMINATOR + str + END_SUSPENSE_DENOMINATOR;
+				} else if (isArray(str)) {
+					str.unshift(BEGIN_SUSPENSE_DENOMINATOR);
+					str.push(END_SUSPENSE_DENOMINATOR);
+					return str;
+				}
+
+				return str.then(
+					(resolved) =>
+						BEGIN_SUSPENSE_DENOMINATOR + resolved + END_SUSPENSE_DENOMINATOR
+				);
+			}
+
 			return str;
 		} catch (error) {
 			if (!asyncMode && renderer && renderer.onError) {
@@ -503,7 +533,7 @@ function _renderToString(
 
 			const renderNestedChildren = () => {
 				try {
-					return _renderToString(
+					const result = _renderToString(
 						rendered,
 						context,
 						isSvgMode,
@@ -512,22 +542,13 @@ function _renderToString(
 						asyncMode,
 						renderer
 					);
+					return vnode._suspended
+						? BEGIN_SUSPENSE_DENOMINATOR + result + END_SUSPENSE_DENOMINATOR
+						: result;
 				} catch (e) {
 					if (!e || typeof e.then != 'function') throw e;
 
-					return e.then(
-						() =>
-							_renderToString(
-								rendered,
-								context,
-								isSvgMode,
-								selectValue,
-								vnode,
-								asyncMode,
-								renderer
-							),
-						renderNestedChildren
-					);
+					return e.then(renderNestedChildren);
 				}
 			};
 
@@ -542,6 +563,7 @@ function _renderToString(
 
 	for (let name in props) {
 		let v = props[name];
+		v = isSignal(v) ? v.value : v;
 
 		if (typeof v == 'function' && name !== 'class' && name !== 'className') {
 			continue;
@@ -723,3 +745,12 @@ const SELF_CLOSING = new Set([
 export default renderToString;
 export const render = renderToString;
 export const renderToStaticMarkup = renderToString;
+
+function isSignal(x) {
+	return (
+		x !== null &&
+		typeof x === 'object' &&
+		typeof x.peek === 'function' &&
+		'value' in x
+	);
+}

package/src/jsx.js

@@ -14,7 +14,7 @@ let preactPlugin = {
 			'key' in object
 		);
 	},
-	print(val, print, indent) {
+	print(val) {
 		return renderToString(val, preactPlugin.context, preactPlugin.opts, true);
 	}
 };

package/src/lib/constants.js

@@ -15,5 +15,6 @@ export const MASK = '__m';
 // Component properties
 export const VNODE = '__v';
 export const DIRTY = '__d';
+export const BITS = '__g';
 export const NEXT_STATE = '__s';
 export const CHILD_DID_SUSPEND = '__c';

package/src/lib/polyfills.js

@@ -1,6 +1,6 @@
 if (typeof Symbol !== 'function') {
 	let c = 0;
-	// eslint-disable-next-line
+	// oxlint-disable-next-line no-global-assign
 	Symbol = function (s) {
 		return `@@${s}${++c}`;
 	};

package/src/lib/util.js

@@ -1,4 +1,7 @@
+import { DIRTY, BITS } from './constants';
+
 export const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
+// oxlint-disable-next-line no-control-regex
 export const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
 export const NAMESPACE_REPLACE_REGEX = /^(xlink|xmlns|xml)([A-Z])/;
 export const HTML_LOWER_CASE = /^(?:accessK|auto[A-Z]|cell|ch|col|cont|cross|dateT|encT|form[A-Z]|frame|hrefL|inputM|maxL|minL|noV|playsI|popoverT|readO|rowS|src[A-Z]|tabI|useM|item[A-Z])/;
@@ -7,6 +10,30 @@ export const SVG_CAMEL_CASE = /^ac|^ali|arabic|basel|cap|clipPath$|clipRule$|col
 // Boolean DOM properties that translate to enumerated ('true'/'false') attributes
 export const HTML_ENUMERATED = new Set(['draggable', 'spellcheck']);
 
+export const COMPONENT_DIRTY_BIT = 1 << 3;
+export function setDirty(component) {
+	if (component[BITS] !== undefined) {
+		component[BITS] |= COMPONENT_DIRTY_BIT;
+	} else {
+		component[DIRTY] = true;
+	}
+}
+
+export function unsetDirty(component) {
+	if (component.__g !== undefined) {
+		component.__g &= ~COMPONENT_DIRTY_BIT;
+	} else {
+		component[DIRTY] = false;
+	}
+}
+
+export function isDirty(component) {
+	if (component.__g !== undefined) {
+		return (component.__g & COMPONENT_DIRTY_BIT) !== 0;
+	}
+	return component[DIRTY] === true;
+}
+
 // DOM properties that should NOT have "px" added when numeric
 const ENCODED_ENTITIES = /["&<]/;
 
@@ -150,6 +177,7 @@ export function createComponent(vnode, context) {
 		forceUpdate: markAsDirty,
 		__d: true,
 		// hooks
+		// oxlint-disable-next-line no-new-array
 		__h: new Array(0)
 	};
 }
@@ -171,7 +199,6 @@ export function getContext(nodeName, context) {
  */
 export class Deferred {
 	constructor() {
-		// eslint-disable-next-line lines-around-comment
 		/** @type {Promise<T>} */
 		this.promise = new Promise((resolve, reject) => {
 			this.resolve = resolve;

package/src/pretty.js

@@ -10,7 +10,10 @@ import {
 	NAMESPACE_REPLACE_REGEX,
 	SVG_CAMEL_CASE,
 	HTML_LOWER_CASE,
-	getContext
+	getContext,
+	setDirty,
+	isDirty,
+	unsetDirty
 } from './lib/util.js';
 import { COMMIT, DIFF, DIFFED, RENDER, SKIP_EFFECTS } from './lib/constants.js';
 import { options, Fragment } from 'preact';
@@ -139,8 +142,8 @@ function _renderToStringPretty(
 				//   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;
+				while (isDirty(c) && count++ < 25) {
+					unsetDirty(c);
 
 					if (renderHook) renderHook(vnode);
 
@@ -154,7 +157,7 @@ function _renderToStringPretty(
 				c = vnode.__c = new nodeName(props, cctx);
 				c.__v = vnode;
 				// turn off stateful re-rendering:
-				c._dirty = c.__d = true;
+				setDirty(c);
 				c.props = props;
 				if (c.state == null) c.state = {};
 

package/src/stream-node.js

@@ -60,7 +60,14 @@ export function renderToPipeableStream(vnode, options, context) {
 		/**
 		 * @param {unknown} [reason]
 		 */
-		abort(reason = new Error('The render was aborted by the server without a reason.')) {
+		abort(
+			reason = new Error(
+				'The render was aborted by the server without a reason.'
+			)
+		) {
+			// Remix/React-Router will always call abort after a timeout, even on success
+			if (stream.closed) return;
+
 			controller.abort();
 			stream.destroy();
 			if (options.onError) {