@tsrx/core 0.1.10 → 0.1.12

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "type": "module",
   "repository": {
     "type": "git",
@@ -80,12 +80,12 @@
     "solid-js": "2.0.0-beta.7",
     "typescript": "^5.9.3",
     "vscode-languageserver-types": "^3.17.5",
-    "vue": "3.6.0-beta.10",
-    "vue-jsx-vapor": "^3.2.12",
-    "@tsrx/preact": "0.1.10",
-    "@tsrx/react": "0.2.10",
-    "@tsrx/solid": "0.1.10",
-    "@tsrx/vue": "0.1.10"
+    "vue": "3.6.0-beta.12",
+    "vue-jsx-vapor": "^3.2.14",
+    "@tsrx/preact": "0.1.12",
+    "@tsrx/react": "0.2.12",
+    "@tsrx/solid": "0.1.12",
+    "@tsrx/vue": "0.1.12"
   },
   "files": [
     "src",

package/src/index.js

@@ -146,6 +146,7 @@ export {
 	clone_switch_helper_invocation as cloneSwitchHelperInvocation,
 	collect_param_bindings as collectParamBindings,
 	collect_statement_bindings as collectStatementBindings,
+	create_hook_safe_helper as createHookSafeHelper,
 	create_host_html_attribute as createHostHtmlAttribute,
 	create_host_html_conflict_error as createHostHtmlConflictError,
 	createJsxTransform,

package/src/plugin.js

@@ -275,6 +275,7 @@ export function TSRXPlugin(config) {
 			#componentDepth = 0;
 			#functionBodyDepth = 0;
 			#allowExpressionContainerTrailingSemicolon = false;
+			#tsxIslandExpressionDepth = 0;
 
 			/**
 			 * @type {Parse.Parser['finishNode']}
@@ -478,7 +479,7 @@ export function TSRXPlugin(config) {
 					}
 
 					if (this.type === tt.braceL) {
-						body.push(this.jsx_parseExpressionContainer());
+						body.push(this.#parseTsxIslandExpressionContainer());
 					} else if (this.type === tstt.jsxTagStart) {
 						body.push(super.jsx_parseElement());
 					} else {
@@ -492,6 +493,84 @@ export function TSRXPlugin(config) {
 				}
 			}
 
+			#parseTsxIslandExpressionContainer() {
+				this.#tsxIslandExpressionDepth++;
+				try {
+					if (!this.#isAtReservedTemplateExpressionContainer()) {
+						return this.jsx_parseExpressionContainer();
+					}
+
+					const node = /** @type {ESTreeJSX.JSXExpressionContainer} */ (this.startNode());
+					this.next();
+					this.next();
+					const expression = /** @type {AST.Expression | ESTreeJSX.JSXEmptyExpression} */ (
+						/** @type {unknown} */ (this.parseElement())
+					);
+					node.expression = expression;
+					this.#popTokenContextsAfterTemplateExpressionElement(
+						/** @type {AST.Tsx | AST.Tsrx | AST.TsxCompat} */ (/** @type {unknown} */ (expression)),
+					);
+					this.expect(tt.braceR);
+					return this.finishNode(node, 'JSXExpressionContainer');
+				} finally {
+					this.#tsxIslandExpressionDepth--;
+				}
+			}
+
+			#isAtReservedTemplateExpressionContainer() {
+				if (this.type !== tt.braceL) {
+					return false;
+				}
+
+				let index = this.start + 1;
+				while (index < this.input.length) {
+					const ch = this.input.charCodeAt(index);
+					if (
+						ch === CharCode.space ||
+						ch === CharCode.tab ||
+						ch === CharCode.lineFeed ||
+						ch === CharCode.carriageReturn
+					) {
+						index++;
+					} else {
+						break;
+					}
+				}
+
+				if (this.input.charCodeAt(index) !== CharCode.lessThan) {
+					return false;
+				}
+
+				return this.#isReservedTemplateTagNameStart(index + 1);
+			}
+
+			/**
+			 * @param {number} index
+			 */
+			#isReservedTemplateTagNameStart(index) {
+				const char_after_tsx = this.input.charCodeAt(index + 3);
+				const char_after_tsrx = this.input.charCodeAt(index + 4);
+				return (
+					(this.input.startsWith('tsx', index) &&
+						(index + 3 >= this.input.length ||
+							char_after_tsx === CharCode.greaterThan ||
+							char_after_tsx === CharCode.slash ||
+							char_after_tsx === CharCode.space ||
+							char_after_tsx === CharCode.tab ||
+							char_after_tsx === CharCode.lineFeed ||
+							char_after_tsx === CharCode.carriageReturn ||
+							char_after_tsx === CharCode.colon)) ||
+					(this.input.startsWith('tsrx', index) &&
+						(index + 4 >= this.input.length ||
+							char_after_tsrx === CharCode.greaterThan ||
+							char_after_tsrx === CharCode.slash ||
+							char_after_tsrx === CharCode.space ||
+							char_after_tsrx === CharCode.tab ||
+							char_after_tsrx === CharCode.lineFeed ||
+							char_after_tsrx === CharCode.carriageReturn))
+				);
+			}
+
 			/**
 			 * @param {AST.Tsx | AST.TsxCompat} island
 			 */
@@ -2202,10 +2281,11 @@ export function TSRXPlugin(config) {
 
 			/** @type {Parse.Parser['jsx_readToken']} */
 			jsx_readToken() {
-				const inside_tsx_compat = this.#path.findLast(
-					(n) => n.type === 'TsxCompat' || n.type === 'Tsx',
+				const current_template_node = this.#path.findLast(
+					(n) =>
+						n.type === 'Element' || n.type === 'Tsx' || n.type === 'Tsrx' || n.type === 'TsxCompat',
 				);
-				if (inside_tsx_compat) {
+				if (current_template_node?.type === 'TsxCompat' || current_template_node?.type === 'Tsx') {
 					return super.jsx_readToken();
 				}
 				let out = '',
@@ -2385,12 +2465,6 @@ export function TSRXPlugin(config) {
 			 * @type {Parse.Parser['jsx_parseElement']}
 			 */
 			jsx_parseElement() {
-				const inside_tsx = this.#path.findLast((n) => n.type === 'TsxCompat' || n.type === 'Tsx');
-				if (inside_tsx) {
-					// Inside tsx/tsx:*, let acorn-jsx handle it normally
-					return super.jsx_parseElement();
-				}
-
 				// Check if the element being parsed IS a <tsx>, <tsrx>, or <tsx:*> tag
 				// Current token is jsxTagStart, this.end is position after '<'
 				const tag_name_start = this.end;
@@ -2417,6 +2491,20 @@ export function TSRXPlugin(config) {
 						char_after_tsrx === CharCode.lineFeed ||
 						char_after_tsrx === CharCode.carriageReturn);
 
+				const current_template_node = this.#path.findLast(
+					(n) =>
+						n.type === 'Element' || n.type === 'Tsx' || n.type === 'Tsrx' || n.type === 'TsxCompat',
+				);
+				if (
+					(current_template_node?.type === 'TsxCompat' || current_template_node?.type === 'Tsx') &&
+					!is_tsrx_tag
+				) {
+					// Inside tsx/tsx:*, let acorn-jsx handle regular TSX tags normally.
+					// Nested <tsrx> still needs Ripple's native template parser so it
+					// can lower through the same path as <tsrx> in component bodies.
+					return super.jsx_parseElement();
+				}
+
 				if (is_fragment_tag || is_tsx_tag || is_tsrx_tag) {
 					// Use Ripple's parseElement to create a Tsx/Tsrx/TsxCompat node.
 					// Bare fragments (<></>) are shorthand for <tsx>...</tsx>.
@@ -2424,9 +2512,21 @@ export function TSRXPlugin(config) {
 					const parsed = /** @type {import('estree-jsx').JSXElement} */ (
 						/** @type {unknown} */ (this.parseElement())
 					);
-					this.#popTokenContextsAfterTemplateExpressionElement(
-						/** @type {AST.Tsx | AST.Tsrx | AST.TsxCompat} */ (/** @type {unknown} */ (parsed)),
-					);
+					if (
+						current_template_node?.type !== 'Tsx' &&
+						current_template_node?.type !== 'TsxCompat'
+					) {
+						this.#popTokenContextsAfterTemplateExpressionElement(
+							/** @type {AST.Tsx | AST.Tsrx | AST.TsxCompat} */ (/** @type {unknown} */ (parsed)),
+						);
+					} else if (this.type === tt.braceR && this.curContext() === tstc.tc_expr) {
+						if (this.#tsxIslandExpressionDepth === 0) {
+							// Acorn still owns the surrounding JSX expression container.
+							// Keep a block-expression context for its closing `}` so the
+							// parent TSX tag continues tokenizing as JSX afterward.
+							this.context.push(b_expr);
+						}
+					}
 					return parsed;
 				}
 
@@ -2887,9 +2987,24 @@ export function TSRXPlugin(config) {
 			parseTemplateBody(body) {
 				const inside_func =
 					this.context.some((n) => n.token === 'function') || this.scopeStack.length > 1;
-				const inside_tsx_island = this.#path.findLast(
-					(n) => n.type === 'Tsx' || n.type === 'TsxCompat',
+				const current_template_node = this.#path.findLast(
+					(n) =>
+						n.type === 'Element' || n.type === 'Tsx' || n.type === 'Tsrx' || n.type === 'TsxCompat',
 				);
+				const inside_tsx_island =
+					current_template_node?.type === 'Tsx' || current_template_node?.type === 'TsxCompat'
+						? current_template_node
+						: null;
+
+				if (current_template_node?.type === 'Tsrx' && this.type === tstt.jsxText) {
+					while (this.curContext() === tstc.tc_expr) {
+						this.context.pop();
+					}
+					this.pos = this.start;
+					this.next();
+					this.parseTemplateBody(body);
+					return;
+				}
 
 				if (!inside_func) {
 					if (this.type.label === 'continue') {

package/src/scope.js

@@ -205,11 +205,18 @@ export function create_scopes(ast, root, parent, error_options) {
 			for (const declarator of node.declarations) {
 				/** @type {Binding[]} */
 				const bindings = [];
+				const initial = /** @type {AST.Expression | AST.Tsx | AST.Tsrx | null} */ (declarator.init);
 
 				state.scope.declarators.set(declarator, bindings);
 
 				for (const id of extract_identifiers(declarator.id)) {
-					const binding = state.scope.declare(id, 'normal', node.kind, declarator.init);
+					const binding = state.scope.declare(id, 'normal', node.kind, initial);
+					if (initial?.type === 'Tsx' || initial?.type === 'Tsrx') {
+						binding.metadata = {
+							...(binding.metadata ?? {}),
+							is_template_value: true,
+						};
+					}
 					bindings.push(binding);
 				}
 			}

package/src/source-map-utils.js

@@ -294,6 +294,25 @@ export function build_line_offsets(text) {
 	return offsets;
 }
 
+/**
+ * ONLY USE THIS FOR TESTS
+ *
+ * @param {CodeMapping[]} mappings
+ * @param {number} source_offset
+ * @param {number} generated_offset
+ * @param {number} length
+ * @returns {CodeMapping | undefined}
+ */
+export function find_exact_mapping(mappings, source_offset, generated_offset, length) {
+	return mappings.find(
+		(mapping) =>
+			mapping.sourceOffsets[0] === source_offset &&
+			mapping.generatedOffsets[0] === generated_offset &&
+			mapping.lengths[0] === length &&
+			mapping.generatedLengths[0] === length,
+	);
+}
+
 /**
  * DO NOT EXPORT THIS FUNCTION!
  * THE FIX NEEDS TO HAPPEN IN THE TRANSFORMER, SEGMENTS OR PARSER

package/src/transform/jsx/helpers.js

@@ -221,6 +221,8 @@ export function tsx_with_ts_locations() {
 		// JS nodes whose esrap printer emits no location marker, causing
 		// segments.js get_mapping_from_node() to throw when it asks for the
 		// generated position of the node's start (or end).
+		'ClassDeclaration',
+		'ClassExpression',
 		'IfStatement',
 		'NewExpression',
 		'MemberExpression',

package/src/transform/jsx/index.js

@@ -1215,23 +1215,27 @@ function is_hook_callee(callee) {
 
 /**
  * @param {AST.Identifier[]} bindings
+ * @param {Set<string>} [mapped_bindings]
  * @returns {AST.ObjectPattern}
  */
-function create_helper_props_pattern(bindings) {
+function create_helper_props_pattern(bindings, mapped_bindings = new Set()) {
 	return /** @type {any} */ ({
 		type: 'ObjectPattern',
-		properties: bindings.map((binding) => create_helper_props_property(binding)),
+		properties: bindings.map((binding) =>
+			create_helper_props_property(binding, mapped_bindings.has(binding.name)),
+		),
 		metadata: { path: [] },
 	});
 }
 
 /**
  * @param {AST.Identifier} binding
+ * @param {boolean} [map_binding]
  * @returns {AST.Property}
  */
-function create_helper_props_property(binding) {
-	const key = create_generated_identifier(binding.name);
-	const value = create_generated_identifier(binding.name);
+function create_helper_props_property(binding, map_binding = false) {
+	const key = map_binding ? clone_identifier(binding) : create_generated_identifier(binding.name);
+	const value = map_binding ? clone_identifier(binding) : create_generated_identifier(binding.name);
 
 	return b.prop('init', key, value, false, true);
 }
@@ -3411,14 +3415,16 @@ function get_hook_callee_name(callee) {
  *   Used by the switch lift's chained-call build, which allocates ids in
  *   source order in a forward pass and then constructs helpers in reverse so
  *   each fall-through case can reference the next case's component element.
+ * @param {{ transientBindings?: Set<string> }} [options]
  * @returns {{ setup_statements: any[], component_element: ESTreeJSX.JSXElement }}
  */
-function create_hook_safe_helper(
+export function create_hook_safe_helper(
 	body_nodes,
 	key_expression,
 	source_node,
 	transform_context,
 	preallocated_helper_id,
+	options = {},
 ) {
 	validate_hook_safe_body_does_not_assign_hook_results_to_outer_bindings(
 		body_nodes,
@@ -3436,9 +3442,14 @@ function create_hook_safe_helper(
 		body_nodes,
 		transform_context.available_bindings,
 	);
+	const transient_bindings = options.transientBindings ?? new Set();
 	const aliases = use_module_scoped_component
 		? []
-		: helper_bindings.map((binding) => create_helper_type_alias_declaration(helper_id, binding));
+		: helper_bindings.map((binding) =>
+				transient_bindings.has(binding.name)
+					? null
+					: create_helper_type_alias_declaration(helper_id, binding),
+			);
 	const props_type =
 		helper_bindings.length > 0 && !use_module_scoped_component
 			? create_helper_props_type_literal(helper_bindings, aliases)
@@ -3447,8 +3458,8 @@ function create_hook_safe_helper(
 		helper_bindings.length > 0
 			? [
 					props_type !== null
-						? create_typed_helper_props_pattern(helper_bindings, props_type)
-						: create_helper_props_pattern(helper_bindings),
+						? create_typed_helper_props_pattern(helper_bindings, props_type, transient_bindings)
+						: create_helper_props_pattern(helper_bindings, transient_bindings),
 				]
 			: [];
 
@@ -3490,7 +3501,7 @@ function create_hook_safe_helper(
 	if (!transform_context.helper_state) {
 		return {
 			setup_statements: [
-				...aliases.map((alias) => alias.declaration),
+				...aliases.flatMap((alias) => (alias ? [alias.declaration] : [])),
 				create_helper_declaration(helper_id, helper_fn, source_node, transform_context),
 			],
 			component_element,
@@ -3514,7 +3525,7 @@ function create_hook_safe_helper(
 
 	return {
 		setup_statements: [
-			...aliases.map((alias) => alias.declaration),
+			...aliases.flatMap((alias) => (alias ? [alias.declaration] : [])),
 			create_cached_helper_declaration(
 				helper_id,
 				cache_id,
@@ -3588,7 +3599,7 @@ function create_helper_type_alias_declaration(helper_id, binding) {
 
 /**
  * @param {AST.Identifier[]} bindings
- * @param {{ id: AST.Identifier }[]} aliases
+ * @param {({ id: AST.Identifier } | null)[]} aliases
  * @returns {any}
  */
 function create_helper_props_type_literal(bindings, aliases) {
@@ -3596,7 +3607,13 @@ function create_helper_props_type_literal(bindings, aliases) {
 		bindings.map((binding, i) =>
 			b.ts_property_signature(
 				create_generated_identifier(binding.name),
-				b.ts_type_annotation(b.ts_type_query(clone_identifier(aliases[i].id))),
+				b.ts_type_annotation(
+					aliases[i]
+						? b.ts_type_query(
+								clone_identifier(/** @type {{ id: AST.Identifier }} */ (aliases[i]).id),
+							)
+						: b.ts_keyword_type('any'),
+				),
 			),
 		),
 	);
@@ -3605,10 +3622,11 @@ function create_helper_props_type_literal(bindings, aliases) {
 /**
  * @param {AST.Identifier[]} bindings
  * @param {any} props_type
+ * @param {Set<string>} [mapped_bindings]
  * @returns {AST.ObjectPattern}
  */
-function create_typed_helper_props_pattern(bindings, props_type) {
-	const pattern = create_helper_props_pattern(bindings);
+function create_typed_helper_props_pattern(bindings, props_type, mapped_bindings = new Set()) {
+	const pattern = create_helper_props_pattern(bindings, mapped_bindings);
 	/** @type {any} */ (pattern).typeAnnotation = b.ts_type_annotation(props_type);
 	return pattern;
 }
@@ -4502,18 +4520,25 @@ function try_statement_to_jsx_child(node, transform_context) {
 				? to_jsx_expression_container(create_null_literal())
 				: statement_body_to_jsx_child(pending_body_nodes, transform_context);
 
-		result = create_jsx_element(
-			'Suspense',
-			[
-				{
-					type: 'JSXAttribute',
-					name: { type: 'JSXIdentifier', name: 'fallback', metadata: { path: [] } },
-					value: fallback_content,
-					metadata: { path: [] },
-				},
-			],
-			[result],
-		);
+		result =
+			transform_context.platform.hooks?.createPendingBoundary?.(
+				result,
+				fallback_content,
+				transform_context,
+				node,
+			) ??
+			create_jsx_element(
+				'Suspense',
+				[
+					{
+						type: 'JSXAttribute',
+						name: { type: 'JSXIdentifier', name: 'fallback', metadata: { path: [] } },
+						value: fallback_content,
+						metadata: { path: [] },
+					},
+				],
+				[result],
+			);
 	}
 
 	// Wrap in <TsrxErrorBoundary> if catch block exists
@@ -4551,19 +4576,42 @@ function try_statement_to_jsx_child(node, transform_context) {
 
 		const fallback_fn = b.arrow(
 			catch_params,
-			b.block(build_render_statements(catch_body_nodes, true, transform_context)),
+			b.block(build_render_statements(catch_body_nodes, true, transform_context), handler.body),
+			false,
+			undefined,
+			handler,
 		);
 
+		const fallback_component =
+			transform_context.platform.hooks?.createErrorFallbackComponent?.(
+				catch_body_nodes,
+				catch_params,
+				transform_context,
+				node,
+			) ?? null;
+
 		transform_context.available_bindings = saved_catch_bindings;
 
 		const boundary_content =
 			transform_context.platform.hooks?.createErrorBoundaryContent?.(
+				result,
+				transform_context,
+				node,
+			) ?? null;
+
+		const custom_boundary =
+			transform_context.platform.hooks?.createErrorBoundary?.(
+				result,
 				try_content,
+				fallback_fn,
 				transform_context,
 				node,
+				{ fallbackComponent: fallback_component },
 			) ?? null;
 
-		if (boundary_content && transform_context.inside_element_child) {
+		if (custom_boundary) {
+			result = custom_boundary;
+		} else if (boundary_content && transform_context.inside_element_child) {
 			result = to_jsx_expression_container(
 				b.call(
 					'TsrxErrorBoundary',
@@ -4572,21 +4620,21 @@ function try_statement_to_jsx_child(node, transform_context) {
 			);
 
 			return result;
+		} else {
+			result = create_jsx_element(
+				'TsrxErrorBoundary',
+				[
+					b.jsx_attribute(
+						b.jsx_id('fallback'),
+						to_jsx_expression_container(/** @type {any} */ (fallback_fn)),
+					),
+					...(boundary_content
+						? [b.jsx_attribute(b.jsx_id('content'), to_jsx_expression_container(boundary_content))]
+						: []),
+				],
+				boundary_content ? [] : [result],
+			);
 		}
-
-		result = create_jsx_element(
-			'TsrxErrorBoundary',
-			[
-				b.jsx_attribute(
-					b.jsx_id('fallback'),
-					to_jsx_expression_container(/** @type {any} */ (fallback_fn)),
-				),
-				...(boundary_content
-					? [b.jsx_attribute(b.jsx_id('content'), to_jsx_expression_container(boundary_content))]
-					: []),
-			],
-			boundary_content ? [] : [result],
-		);
 	}
 
 	// result is a JSXElement, but we need to return a JSXExpressionContainer

package/src/transform/segments.js

@@ -345,7 +345,7 @@ function extract_classes(node, src_to_gen_map, gen_line_offsets, src_line_offset
  * @param {PostProcessingChanges } post_processing_changes - Optional post-processing changes
  * @param {number[]} line_offsets - Pre-computed line offsets array for generated code
  * @param {CompileError[]} [errors]
- * @returns {Omit<VolarMappingsResult, 'errors'>}
+ * @returns {Omit<VolarMappingsResult, 'errors' | 'sourceAst'>}
  */
 export function convert_source_map_to_mappings(
 	ast,
@@ -1528,6 +1528,18 @@ export function convert_source_map_to_mappings(
 				}
 				return;
 			} else if (node.type === 'ClassDeclaration' || node.type === 'ClassExpression') {
+				if (node.loc) {
+					tokens.push({
+						source: 'class',
+						generated: 'class',
+						loc: {
+							start: { line: node.loc.start.line, column: node.loc.start.column },
+							end: { line: node.loc.start.line, column: node.loc.start.column + 'class'.length },
+						},
+						metadata: {},
+					});
+				}
+
 				// Visit in source order: id, superClass, body
 				if (node.id) {
 					visit(node.id);
@@ -2402,6 +2414,7 @@ export function create_volar_mappings_result({
 
 	return {
 		...result,
+		sourceAst: ast_from_source,
 		errors,
 	};
 }

package/types/index.d.ts

@@ -1247,7 +1247,9 @@ export interface Binding {
 		| AST.FunctionDeclaration
 		| AST.ClassDeclaration
 		| AST.ImportDeclaration
-		| AST.TSModuleDeclaration;
+		| AST.TSModuleDeclaration
+		| AST.Tsx
+		| AST.Tsrx;
 	/** Whether this binding has been reassigned */
 	reassigned: boolean;
 	/** Whether this binding has been mutated (property access) */
@@ -1261,6 +1263,7 @@ export interface Binding {
 		is_dynamic_component?: boolean;
 		pattern?: AST.Identifier;
 		is_ripple_object?: boolean;
+		is_template_value?: boolean;
 	} | null;
 	/** Kind of binding */
 	kind: BindingKind;
@@ -1340,7 +1343,9 @@ export interface ScopeInterface {
 			| AST.FunctionDeclaration
 			| AST.ClassDeclaration
 			| AST.ImportDeclaration
-			| AST.TSModuleDeclaration,
+			| AST.TSModuleDeclaration
+			| AST.Tsx
+			| AST.Tsrx,
 	): Binding;
 	/** Get binding by name */
 	get(name: string): Binding | null;
@@ -1416,6 +1421,7 @@ export interface TransformServerState extends BaseState {
 	template_child?: boolean;
 	skip_regular_blocks?: boolean;
 	in_regular_block?: boolean;
+	jsx_to_tsrx_element?: boolean;
 }
 
 export type UpdateList = Array<
@@ -1450,6 +1456,7 @@ export interface TransformClientState extends BaseState {
 	skip_children_traversal: boolean;
 	return_flags?: Map<AST.ReturnStatement, { name: string; tracked: boolean }>;
 	is_tsrx_element?: boolean;
+	jsx_to_tsrx_element?: boolean;
 }
 
 /** Override zimmerframe types and provide our own */
@@ -1585,6 +1592,7 @@ export interface VolarMappingsResult {
 	mappings: CodeMapping[];
 	cssMappings: CodeMapping[];
 	errors: CompileError[];
+	sourceAst: AST.Program;
 }
 
 /**

package/types/jsx-platform.d.ts

@@ -200,11 +200,49 @@ export interface JsxPlatformHooks {
 	 * the loop to the downstream Vapor JSX compiler as a typed `VaporFor` component.
 	 */
 	renderForOf?: (node: any, loopParams: any[], bodyStatements: any[], ctx: any) => any | null;
+	/**
+	 * Optionally replace the default React-style pending lowering for
+	 * `try { ... } pending { ... }`. The default emits
+	 * `<Suspense fallback={fallbackContent}>tryContent</Suspense>`.
+	 * Vue Vapor uses this to provide `default` and `fallback` slots via
+	 * `v-slots`.
+	 */
+	createPendingBoundary?: (
+		tryContent: any,
+		fallbackContent: any,
+		ctx: any,
+		node: any,
+	) => any | null;
+	/**
+	 * Optionally create a generated component for a catch fallback body while
+	 * the catch parameters are still in scope. Platforms can use this to reuse
+	 * one mapped catch-body component from multiple runtime catch sites.
+	 */
+	createErrorFallbackComponent?: (
+		catchBodyNodes: any[],
+		catchParams: any[],
+		ctx: any,
+		node: any,
+	) => any | null;
+	/**
+	 * Optionally replace the default `try/catch` boundary wrapper. The hook
+	 * receives the current render content, the original try-body content before
+	 * any pending wrapper, and the generated catch fallback function.
+	 */
+	createErrorBoundary?: (
+		tryContent: any,
+		rawTryContent: any,
+		fallbackFn: any,
+		ctx: any,
+		node: any,
+		info?: { fallbackComponent?: any },
+	) => any | null;
 	/**
 	 * Optionally move the primary `try { ... }` render content into an explicit
 	 * error-boundary prop instead of rendering it as the boundary's JSX children.
 	 * Vue Vapor uses this because boundary content must execute lazily from a
-	 * zero-argument function.
+	 * zero-argument function. If a `pending` block exists, `tryContent` is the
+	 * already-created pending boundary so catch wrappers still enclose it.
 	 */
 	createErrorBoundaryContent?: (tryContent: any, ctx: any, node: any) => any | null;
 	/**