preact-render-to-string 6.4.2 → 6.5.0

package/src/lib/client.js

@@ -0,0 +1,61 @@
+/* eslint-disable no-var, key-spacing, object-curly-spacing, prefer-arrow-callback, semi, keyword-spacing */
+
+function initPreactIslandElement() {
+	class PreactIslandElement extends HTMLElement {
+		connectedCallback() {
+			var d = this;
+			if (!d.isConnected) return;
+
+			let i = this.getAttribute('data-target');
+			if (!i) return;
+
+			var s,
+				e,
+				c = document.createNodeIterator(document, 128);
+			while (c.nextNode()) {
+				let n = c.referenceNode;
+
+				if (n.data == 'preact-island:' + i) s = n;
+				else if (n.data == '/preact-island:' + i) e = n;
+				if (s && e) break;
+			}
+			if (s && e) {
+				var p = e.previousSibling;
+				while (p != s) {
+					if (!p || p == s) break;
+					e.parentNode.removeChild(p);
+					p = e.previousSibling;
+				}
+
+				requestAnimationFrame(() => {
+					for (let i = 0; i <= d.children.length; i++) {
+						const child = d.children[i];
+						e.parentNode.insertBefore(child, e);
+					}
+
+					d.parentNode.removeChild(d);
+				});
+			}
+		}
+	}
+
+	customElements.define('preact-island', PreactIslandElement);
+}
+
+const fn = initPreactIslandElement.toString();
+const INIT_SCRIPT = fn
+	.slice(fn.indexOf('{') + 1, fn.lastIndexOf('}'))
+	.replace(/\n\s+/gm, '');
+
+export function createInitScript() {
+	return `<script>(function(){${INIT_SCRIPT}}())</script>`;
+}
+
+/**
+ * @param {string} id
+ * @param {string} content
+ * @returns {string}
+ */
+export function createSubtree(id, content) {
+	return `<preact-island hidden data-target="${id}">${content}</preact-island>`;
+}

package/src/{constants.js → lib/constants.js}

@@ -4,13 +4,16 @@ export const RENDER = '__r';
 export const DIFFED = 'diffed';
 export const COMMIT = '__c';
 export const SKIP_EFFECTS = '__s';
+export const CATCH_ERROR = '__e';
 
 // VNode properties
 export const COMPONENT = '__c';
 export const CHILDREN = '__k';
 export const PARENT = '__';
+export const MASK = '__m';
 
 // Component properties
 export const VNODE = '__v';
 export const DIRTY = '__d';
 export const NEXT_STATE = '__s';
+export const CHILD_DID_SUSPEND = '__c';

package/src/{util.js → lib/util.js}

@@ -1,7 +1,7 @@
 export const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
 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]|^ch|^col|cont|cross|dateT|encT|form[A-Z]|frame|hrefL|inputM|maxL|minL|noV|playsI|readO|rowS|spellC|src[A-Z]|tabI|item[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|spellC|src[A-Z]|tabI|useM|item[A-Z]/;
 export const SVG_CAMEL_CASE = /^ac|^ali|arabic|basel|cap|clipPath$|clipRule$|color|dominant|enable|fill|flood|font|glyph[^R]|horiz|image|letter|lighting|marker[^WUH]|overline|panose|pointe|paint|rendering|shape|stop|strikethrough|stroke|text[^L]|transform|underline|unicode|units|^v[^i]|^w|^xH/;
 
 // DOM properties that should NOT have "px" added when numeric
@@ -151,6 +151,18 @@ export function createComponent(vnode, context) {
 	};
 }
 
+// Necessary for createContext api. Setting this property will pass
+// the context value as `this.context` just for this component.
+export function getContext(nodeName, context) {
+	let cxType = nodeName.contextType;
+	let provider = cxType && context[cxType.__c];
+	return cxType != null
+		? provider
+			? provider.props.value
+			: cxType.__
+		: context;
+}
+
 /**
  * @template T
  */

package/src/pretty.js

@@ -8,14 +8,13 @@ import {
 	UNSAFE_NAME,
 	VOID_ELEMENTS,
 	NAMESPACE_REPLACE_REGEX,
+	SVG_CAMEL_CASE,
 	HTML_LOWER_CASE,
-	SVG_CAMEL_CASE
-} from './util.js';
-import { COMMIT, DIFF, DIFFED, RENDER, SKIP_EFFECTS } from './constants.js';
+	getContext
+} from './lib/util.js';
+import { COMMIT, DIFF, DIFFED, RENDER, SKIP_EFFECTS } from './lib/constants.js';
 import { options, Fragment } from 'preact';
 
-/** @typedef {import('preact').VNode} VNode */
-
 // components without names, kept as a hash for later comparison to return consistent UnnamedComponentXX names.
 const UNNAMED = [];
 
@@ -104,7 +103,11 @@ function _renderToStringPretty(
 	// components
 	if (typeof nodeName === 'function') {
 		isComponent = true;
-		if (opts.shallow && (inner || opts.renderRootComponent === false)) {
+		if (
+			opts.shallow &&
+			(inner || opts.renderRootComponent === false) &&
+			nodeName !== Fragment
+		) {
 			nodeName = getComponentName(nodeName);
 		} else if (nodeName === Fragment) {
 			const children = [];
@@ -124,17 +127,12 @@ function _renderToStringPretty(
 
 			let renderHook = options[RENDER];
 
-			let cctx = context;
-			let cxType = nodeName.contextType;
-			if (cxType != null) {
-				let provider = context[cxType.__c];
-				cctx = provider ? provider.props.value : cxType.__;
-			}
-
 			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:
@@ -150,6 +148,8 @@ function _renderToStringPretty(
 					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;

package/src/stream-node.js

@@ -0,0 +1,60 @@
+import { PassThrough } from 'node:stream';
+import { renderToChunks } from './lib/chunked.js';
+
+/**
+ * @typedef {object} RenderToPipeableStreamOptions
+ * @property {() => void} [onShellReady]
+ * @property {() => void} [onAllReady]
+ * @property {(error) => void} [onError]
+ */
+
+/**
+ * @param {import('preact').VNode} vnode
+ * @param {RenderToPipeableStreamOptions} options
+ * @param {any} [context]
+ * @returns {{}}
+ */
+export function renderToPipeableStream(vnode, options, context) {
+	const encoder = new TextEncoder('utf-8');
+
+	const controller = new AbortController();
+	const stream = new PassThrough();
+
+	renderToChunks(vnode, {
+		context,
+		abortSignal: controller.signal,
+		onError: (error) => {
+			if (options.onError) {
+				options.onError(error);
+			}
+			controller.abort(error);
+		},
+		onWrite(s) {
+			stream.write(encoder.encode(s));
+		}
+	})
+		.then(() => {
+			options.onAllReady && options.onAllReady();
+			stream.end();
+		})
+		.catch((error) => {
+			stream.destroy(error);
+		});
+
+	Promise.resolve().then(() => {
+		options.onShellReady && options.onShellReady();
+	});
+
+	return {
+		abort() {
+			controller.abort();
+			stream.destroy(new Error('aborted'));
+		},
+		/**
+		 * @param {import("stream").Writable} writable
+		 */
+		pipe(writable) {
+			stream.pipe(writable, { end: true });
+		}
+	};
+}

package/src/stream.js

@@ -0,0 +1,43 @@
+import { Deferred } from './lib/util.js';
+import { renderToChunks } from './lib/chunked.js';
+
+/** @typedef {ReadableStream<Uint8Array> & { allReady: Promise<void>}} RenderStream */
+
+/**
+ * @param {import('preact').VNode} vnode
+ * @param {any} [context]
+ * @returns {RenderStream}
+ */
+export function renderToReadableStream(vnode, context) {
+	/** @type {Deferred<void>} */
+	const allReady = new Deferred();
+	const encoder = new TextEncoder('utf-8');
+
+	/** @type {RenderStream} */
+	const stream = new ReadableStream({
+		start(controller) {
+			renderToChunks(vnode, {
+				context,
+				onError: (error) => {
+					allReady.reject(error);
+					controller.abort(error);
+				},
+				onWrite(s) {
+					controller.enqueue(encoder.encode(s));
+				}
+			})
+				.then(() => {
+					controller.close();
+					allReady.resolve();
+				})
+				.catch((error) => {
+					controller.error(error);
+					allReady.reject(error);
+				});
+		}
+	});
+
+	stream.allReady = allReady.promise;
+
+	return stream;
+}