npm - @oomfware/jsx - Versions diffs - 0.1.4 → 0.1.6 - Mend

@oomfware/jsx 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/index.d.mts +12 -2
package/dist/index.d.mts.map +1 -1
package/dist/index.mjs +164 -68
package/dist/index.mjs.map +1 -1
package/dist/jsx-dev-runtime.d.mts +1 -1
package/dist/{jsx-runtime-CpxZaJu6.d.mts → jsx-runtime-DNOsJEgZ.d.mts} +8 -4
package/dist/jsx-runtime-DNOsJEgZ.d.mts.map +1 -0
package/dist/jsx-runtime.d.mts +1 -1
package/package.json +4 -1
package/src/index.ts +8 -1
package/src/lib/context.ts +1 -50
package/src/lib/intrinsic-elements.ts +9 -4
package/src/lib/render-context.ts +115 -0
package/src/lib/render.ts +187 -80
package/src/lib/stream.test.tsx +445 -2
package/src/lib/suspense.ts +15 -1
package/dist/jsx-runtime-CpxZaJu6.d.mts.map +0 -1

package/src/lib/render.ts CHANGED Viewed

@@ -10,13 +10,22 @@
  *   collected and injected into <head> during finalization
  */
+import { decodeUtf8From, encodeUtf8 } from '@atcute/uint8array';
 import { Fragment } from '../jsx-runtime.ts';
-import { currentFrame, popContextFrame, pushContextFrame } from './context.ts';
-import { Suspense, type SuspenseProps } from './suspense.ts';
+import {
+	popContextFrame,
+	pushContextFrame,
+	setActiveRenderContext,
+	type RenderContext,
+	type Segment,
+} from './render-context.ts';
+import { ErrorBoundary, Suspense, type ErrorBoundaryProps, type SuspenseProps } from './suspense.ts';
 import type { Component, JSXElement, JSXNode } from './types.ts';
 const HEAD_ELEMENTS = new Set(['title', 'meta', 'link', 'style']);
+const MAX_SUSPENSE_ATTEMPTS = 20;
 const SELF_CLOSING_TAGS = new Set([
 	'area',
 	'base',
@@ -36,24 +45,7 @@ const SELF_CLOSING_TAGS = new Set([
 /** props that shouldn't be rendered as HTML attributes */
 const FRAMEWORK_PROPS = new Set(['children', 'dangerouslySetInnerHTML']);
-// #region Segment types
-type Segment =
-	| {
-			readonly kind: 'static';
-			readonly html: string;
-	  }
-	| {
-			readonly kind: 'composite';
-			readonly parts: readonly Segment[];
-	  }
-	| {
-			readonly kind: 'suspense';
-			readonly id: string;
-			readonly fallback: Segment;
-			pending?: Promise<void>;
-			content: Segment | null;
-	  };
+// #region Segment helpers
 function staticSeg(html: string): Segment {
 	return { kind: 'static', html };
@@ -71,15 +63,6 @@ export interface RenderOptions {
 	onError?: (error: unknown) => void;
 }
-interface RenderContext {
-	headElements: string[];
-	idsByPath: Map<string, number>;
-	insideHead: boolean;
-	insideSvg: boolean;
-	onError: (error: unknown) => void;
-	pendingSuspense: Array<{ id: string; promise: Promise<Segment> }>;
-}
 /**
  * renders JSX to a readable stream
  * @param node JSX node to render
@@ -87,9 +70,10 @@ interface RenderContext {
  * @returns readable stream of UTF-8 encoded HTML
  */
 export function renderToStream(node: JSXNode, options?: RenderOptions): ReadableStream<Uint8Array> {
-	const encoder = new TextEncoder();
 	const onError = options?.onError ?? ((error) => console.error(error));
 	const context: RenderContext = {
+		contextStack: [],
+		currentFrame: null,
 		headElements: [],
 		idsByPath: new Map(),
 		insideHead: false,
@@ -97,18 +81,22 @@ export function renderToStream(node: JSXNode, options?: RenderOptions): Readable
 		onError,
 		pendingSuspense: [],
 	};
 	return new ReadableStream({
 		async start(controller) {
 			try {
 				const root = buildSegment(node, context, '');
 				await resolveBlocking(root);
 				const html = serializeSegment(root);
 				const finalHtml = finalizeHtml(html, context);
-				controller.enqueue(encoder.encode(finalHtml));
+				controller.enqueue(encodeUtf8(finalHtml));
 				// stream pending suspense boundaries as they resolve
 				if (context.pendingSuspense.length > 0) {
-					await streamPendingSuspense(context, controller, encoder);
+					await streamPendingSuspense(context, controller);
 				}
 				controller.close();
 			} catch (error) {
 				onError(error);
@@ -127,13 +115,17 @@ export function renderToStream(node: JSXNode, options?: RenderOptions): Readable
 export async function renderToString(node: JSXNode, options?: RenderOptions): Promise<string> {
 	const stream = renderToStream(node, options);
 	const reader = stream.getReader();
-	const decoder = new TextDecoder();
 	let html = '';
 	while (true) {
 		const { done, value } = await reader.read();
-		if (done) break;
-		html += decoder.decode(value);
+		if (done) {
+			break;
+		}
+		html += decodeUtf8From(value);
 	}
 	return html;
 }
@@ -165,7 +157,16 @@ function isHeadElement(tag: string): boolean {
 	return HEAD_ELEMENTS.has(tag);
 }
-function buildSegment(node: JSXNode, context: RenderContext, path: string): Segment {
+function buildSegment(node: JSXNode, ctx: RenderContext, path: string): Segment {
+	const prev = setActiveRenderContext(ctx);
+	try {
+		return buildSegmentInner(node, ctx, path);
+	} finally {
+		setActiveRenderContext(prev);
+	}
+}
+function buildSegmentInner(node: JSXNode, context: RenderContext, path: string): Segment {
 	// primitives
 	if (typeof node === 'string' || typeof node === 'number' || typeof node === 'bigint') {
 		return staticSeg(escapeHtml(node, false));
@@ -177,7 +178,7 @@ function buildSegment(node: JSXNode, context: RenderContext, path: string): Segm
 	if (typeof node === 'object' && Symbol.iterator in node) {
 		const parts: Segment[] = [];
 		for (const child of node) {
-			parts.push(buildSegment(child, context, path));
+			parts.push(buildSegmentInner(child, context, path));
 		}
 		return compositeSeg(parts);
 	}
@@ -187,7 +188,7 @@ function buildSegment(node: JSXNode, context: RenderContext, path: string): Segm
 		// Fragment
 		if (type === Fragment) {
 			const children = (props as { children?: JSXNode }).children;
-			return children != null ? buildSegment(children, context, path) : EMPTY_SEGMENT;
+			return children != null ? buildSegmentInner(children, context, path) : EMPTY_SEGMENT;
 		}
 		// intrinsic elements (HTML tags)
 		if (typeof type === 'string') {
@@ -212,6 +213,10 @@ function buildSegment(node: JSXNode, context: RenderContext, path: string): Segm
 			if (type === Suspense) {
 				return buildSuspenseSegment(props as unknown as SuspenseProps, context, path);
 			}
+			// ErrorBoundary
+			if (type === ErrorBoundary) {
+				return buildErrorBoundarySegment(props as unknown as ErrorBoundaryProps, context, path);
+			}
 			return buildComponentSegment(type, props as Record<string, unknown>, context, path);
 		}
 	}
@@ -270,18 +275,65 @@ function buildHeadElementSegment(
 function renderAttributes(props: Record<string, unknown>): string {
 	let attrs = '';
 	for (const key in props) {
-		if (FRAMEWORK_PROPS.has(key)) continue;
+		if (FRAMEWORK_PROPS.has(key)) {
+			continue;
+		}
 		const value = props[key];
-		if (value === undefined || value === null || value === false) continue;
-		if (typeof value === 'function') continue;
-		// style object -> string
-		if (key === 'style' && typeof value === 'object') {
-			const styleStr = serializeStyle(value as Record<string, string | number>);
-			if (styleStr) {
-				attrs += ` style="${escapeHtml(styleStr, true)}"`;
+		if (value === undefined || value === null || value === false) {
+			continue;
+		}
+		if (typeof value === 'function') {
+			continue;
+		}
+		if (key === 'class') {
+			if (!Array.isArray(value)) {
+				attrs = ` class="${escapeHtml(value, true)}"`;
+				continue;
+			}
+			const len = value.length;
+			let idx = 0;
+			let str = '';
+			let val: any;
+			for (; idx < len; idx++) {
+				if ((val = value[idx])) {
+					str = str ? str + ' ' + val : val;
+				}
+			}
+			if (str) {
+				attrs += ` class="${escapeHtml(str, true)}"`;
 			}
 			continue;
 		}
+		if (key === 'style') {
+			if (typeof value !== 'object') {
+				attrs += ` style="${escapeHtml(value, true)}"`;
+				continue;
+			}
+			let str = '';
+			let val;
+			for (const key in value) {
+				if ((val = (value as any)[key]) != null) {
+					str = str ? str + '; ' + key + ':' + val : key + ':' + val;
+				}
+			}
+			if (str) {
+				attrs += ` style="${escapeHtml(str, true)}"`;
+			}
+			continue;
+		}
 		if (value === true) {
 			attrs += ` ${key}`;
 		} else {
@@ -291,15 +343,6 @@ function renderAttributes(props: Record<string, unknown>): string {
 	return attrs;
 }
-function serializeStyle(style: Record<string, string | number>): string {
-	const parts: string[] = [];
-	for (const [key, value] of Object.entries(style)) {
-		if (value == null) continue;
-		parts.push(`${key}:${value}`);
-	}
-	return parts.join(';');
-}
 // #endregion
 // #region Component building
@@ -313,10 +356,9 @@ function buildComponentSegment(
 	// call component
 	const result = type(props);
 	// if component called provide(), push frame before rendering children
-	const hadFrame = currentFrame !== null;
-	pushContextFrame();
+	const hadFrame = pushContextFrame();
 	try {
-		return buildSegment(result, ctx, path);
+		return buildSegmentInner(result, ctx, path);
 	} finally {
 		popContextFrame(hadFrame);
 	}
@@ -348,18 +390,38 @@ function buildSuspenseSegment(props: SuspenseProps, ctx: RenderContext, path: st
 				content: null,
 			};
+			// snapshot context stack for async re-render (parent frames will be popped
+			// by the time the promise resolves)
+			const asyncCtx: RenderContext = {
+				...ctx,
+				contextStack: [...ctx.contextStack],
+				currentFrame: null,
+			};
+			// re-render function that handles subsequent promise throws
+			const rerender = (attempt: number): Promise<void> | void => {
+				if (attempt >= MAX_SUSPENSE_ATTEMPTS) {
+					throw new Error(`suspense boundary exceeded maximum retry attempts (${MAX_SUSPENSE_ATTEMPTS})`);
+				}
+				try {
+					seg.content = buildSegment(props.children, asyncCtx, suspenseId);
+				} catch (err) {
+					if (err instanceof Promise) {
+						// component threw another promise - wait and retry
+						return err.then(() => rerender(attempt + 1));
+					}
+					throw err;
+				}
+			};
 			// set up promise to re-render children when resolved
-			const pending = thrown.then(() => {
-				// re-render children after promise resolves
-				seg.content = buildSegment(props.children, ctx, suspenseId);
-			});
+			const pending = thrown.then(() => rerender(1));
 			seg.pending = pending;
 			// track for streaming
-			ctx.pendingSuspense.push({
-				id: suspenseId,
-				promise: pending.then(() => seg.content!),
-			});
+			const tracked = pending.then(() => seg.content!);
+			tracked.catch(() => {}); // prevent unhandled rejection if resolveBlocking catches first
+			ctx.pendingSuspense.push({ id: suspenseId, promise: tracked });
 			return seg;
 		}
@@ -368,11 +430,38 @@ function buildSuspenseSegment(props: SuspenseProps, ctx: RenderContext, path: st
 	}
 }
+function buildErrorBoundarySegment(props: ErrorBoundaryProps, ctx: RenderContext, path: string): Segment {
+	// snapshot context for potential async fallback rendering
+	const asyncCtx: RenderContext = {
+		...ctx,
+		contextStack: [...ctx.contextStack],
+		currentFrame: null,
+	};
+	try {
+		const children = buildSegment(props.children, ctx, path);
+		return {
+			kind: 'error-boundary',
+			children,
+			fallbackFn: props.fallback,
+			renderContext: asyncCtx,
+			path,
+			fallbackSegment: null,
+		};
+	} catch (error) {
+		if (error instanceof Promise) {
+			throw error; // let Suspense handle it
+		}
+		// sync error - render fallback immediately
+		return buildSegment(props.fallback(error), ctx, path);
+	}
+}
 // #endregion
 // #region Serialization
-/** resolve all blocking suspense boundaries */
+/** resolve all blocking suspense boundaries and error boundaries */
 async function resolveBlocking(segment: Segment): Promise<void> {
 	if (segment.kind === 'suspense') {
 		if (segment.pending) {
@@ -384,6 +473,14 @@ async function resolveBlocking(segment: Segment): Promise<void> {
 		}
 		return;
 	}
+	if (segment.kind === 'error-boundary') {
+		try {
+			await resolveBlocking(segment.children);
+		} catch (error) {
+			segment.fallbackSegment = buildSegment(segment.fallbackFn(error), segment.renderContext, segment.path);
+		}
+		return;
+	}
 	if (segment.kind === 'composite') {
 		for (const part of segment.parts) {
 			await resolveBlocking(part);
@@ -399,6 +496,9 @@ function serializeSegment(seg: Segment): string {
 	if (seg.kind === 'composite') {
 		return seg.parts.map(serializeSegment).join('');
 	}
+	if (seg.kind === 'error-boundary') {
+		return serializeSegment(seg.fallbackSegment ?? seg.children);
+	}
 	// suspense - always render fallback; resolved content streams in template
 	return `<!--$s:${seg.id}-->${serializeSegment(seg.fallback)}<!--/$s:${seg.id}-->`;
 }
@@ -415,27 +515,34 @@ const SUSPENSE_RUNTIME = `<script>${SR}=(t,i,s,e)=>{i="$s:"+t.dataset.suspense;s
 async function streamPendingSuspense(
 	context: RenderContext,
 	controller: ReadableStreamDefaultController<Uint8Array>,
-	encoder: TextEncoder,
 ): Promise<void> {
-	let runtimeInjected = false;
-	const processed = new Set<string>();
+	controller.enqueue(encodeUtf8(SUSPENSE_RUNTIME));
 	while (true) {
-		const batch = context.pendingSuspense.filter(({ id }) => !processed.has(id));
-		if (batch.length === 0) break;
+		const batch = context.pendingSuspense;
+		if (batch.length === 0) {
+			break;
+		}
+		context.pendingSuspense = [];
 		await Promise.all(
 			batch.map(async ({ id, promise }) => {
-				processed.add(id);
+				let resolvedSegment: Segment;
+				try {
+					resolvedSegment = await promise;
+				} catch {
+					// promise rejected - error was caught by an error boundary
+					return;
+				}
 				try {
-					const resolvedSegment = await promise;
 					await resolveBlocking(resolvedSegment);
 					const html = serializeSegment(resolvedSegment);
-					// inject runtime once before first resolution
-					const runtime = runtimeInjected ? '' : SUSPENSE_RUNTIME;
-					runtimeInjected = true;
-					// stream template + call to swap function
 					controller.enqueue(
-						encoder.encode(
-							`${runtime}<template data-suspense="${id}">${html}</template>` +
+						encodeUtf8(
+							`<template data-suspense="${id}">${html}</template>` +
 								`<script>${SR}(document.currentScript.previousElementSibling)</script>`,
 						),
 					);