@tsrx/core 0.1.9 → 0.1.11

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,
@@ -236,6 +237,7 @@ export {
 
 // Analyze
 export { analyze_css as analyzeCss } from './analyze/css-analyze.js';
+export { prune_css as pruneCss } from './analyze/prune.js';
 export {
 	CLASS_COMPONENT_AS_NON_ARROW_PROPERTY_ERROR,
 	COMPONENT_DO_WHILE_STATEMENT_ERROR,

package/src/transform/jsx/index.js

@@ -5,6 +5,8 @@
 import { walk } from 'zimmerframe';
 import { print } from 'esrap';
 import { error } from '../../errors.js';
+import { analyze_css } from '../../analyze/css-analyze.js';
+import { prune_css } from '../../analyze/prune.js';
 import {
 	ensure_function_metadata,
 	in_jsx_child_context,
@@ -36,7 +38,11 @@ import {
 import * as b from '../../utils/builders.js';
 import { apply_lazy_transforms, preallocate_lazy_ids } from '../lazy.js';
 import { find_first_top_level_await_in_component_body } from '../await.js';
-import { prepare_stylesheet_for_render, annotate_component_with_hash } from '../scoping.js';
+import {
+	prepare_stylesheet_for_render,
+	annotate_component_with_hash,
+	is_style_element,
+} from '../scoping.js';
 import {
 	validate_class_component_declarations,
 	validate_component_loop_break_statement,
@@ -426,12 +432,14 @@ export function createJsxTransform(platform) {
 
 				const css = as_any.css;
 				if (css) {
+					apply_css_definition_metadata(as_any, css);
 					stylesheets.push(css);
 					const hash = css.hash;
 					annotate_component_with_hash(
 						as_any,
 						hash,
 						platform.jsx.rewriteClassAttr ? 'className' : 'class',
+						transform_context.typeOnly,
 					);
 				}
 				return next(state);
@@ -609,6 +617,73 @@ export function createJsxTransform(platform) {
 	return transform;
 }
 
+/**
+ * Attach selector-location metadata used by editor definitions/hover before
+ * the shared scoping pass mutates class attributes with the component hash.
+ *
+ * @param {any} component
+ * @param {any} css
+ * @returns {void}
+ */
+function apply_css_definition_metadata(component, css) {
+	analyze_css(css);
+
+	const metadata = component.metadata || (component.metadata = { path: [] });
+	const style_classes = metadata.styleClasses || (metadata.styleClasses = new Map());
+	const top_scoped_classes = metadata.topScopedClasses || new Map();
+	const elements = collect_css_prunable_elements(component.body || []);
+
+	for (const element of elements) {
+		prune_css(css, element, style_classes, top_scoped_classes);
+	}
+
+	if (top_scoped_classes.size > 0) {
+		metadata.topScopedClasses = top_scoped_classes;
+	}
+}
+
+/**
+ * @param {any} value
+ * @param {any[]} [elements]
+ * @returns {any[]}
+ */
+function collect_css_prunable_elements(value, elements = []) {
+	if (!value || typeof value !== 'object') {
+		return elements;
+	}
+
+	if (Array.isArray(value)) {
+		for (const child of value) {
+			collect_css_prunable_elements(child, elements);
+		}
+		return elements;
+	}
+
+	if (
+		value.type === 'FunctionDeclaration' ||
+		value.type === 'FunctionExpression' ||
+		value.type === 'ArrowFunctionExpression' ||
+		value.type === 'Component'
+	) {
+		return elements;
+	}
+
+	if (value.type === 'Element') {
+		if (!is_style_element(value)) {
+			elements.push(value);
+		}
+	}
+
+	for (const key of Object.keys(value)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata' || key === 'css') {
+			continue;
+		}
+		collect_css_prunable_elements(value[key], elements);
+	}
+
+	return elements;
+}
+
 /**
  * Detect a top-level `"use server"` directive. Used by platforms whose
  * validation rule requires the directive to enable top-level `await`
@@ -1140,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);
 }
@@ -3336,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,
@@ -3361,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)
@@ -3372,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),
 				]
 			: [];
 
@@ -3415,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,
@@ -3439,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,
@@ -3513,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) {
@@ -3521,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'),
+				),
 			),
 		),
 	);
@@ -3530,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;
 }
@@ -4427,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
@@ -4476,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',
@@ -4497,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
@@ -5547,6 +5670,8 @@ export function to_jsx_attribute(attr, transform_context) {
 		attr_name.name === 'class'
 	) {
 		attr_name = set_loc(b.id('className'), attr.name);
+		attr_name.metadata.source_name = 'class';
+		attr_name.metadata.source_length = 'class'.length;
 	}
 
 	const name =

package/src/transform/scoping.js

@@ -95,9 +95,15 @@ function is_composite_jsx_element(node) {
  * @param {any} node
  * @param {string} hash
  * @param {'class' | 'className'} [jsx_class_attr_name='class']
+ * @param {boolean} [preserve_style_elements=false]
  * @returns {any}
  */
-export function annotate_with_hash(node, hash, jsx_class_attr_name = 'class') {
+export function annotate_with_hash(
+	node,
+	hash,
+	jsx_class_attr_name = 'class',
+	preserve_style_elements = false,
+) {
 	if (!node || typeof node !== 'object') return node;
 	if (
 		node.type === 'Component' ||
@@ -109,13 +115,19 @@ export function annotate_with_hash(node, hash, jsx_class_attr_name = 'class') {
 	}
 
 	if (node.type === 'Element') {
+		if (preserve_style_elements && is_style_element(node)) {
+			node.children = [];
+			return node;
+		}
 		if (!is_style_element(node) && !is_composite_element(node)) {
 			add_hash_class(node, hash);
 		}
 		if (Array.isArray(node.children)) {
 			node.children = node.children
-				.filter((/** @type {any} */ child) => !is_style_element(child))
-				.map((/** @type {any} */ child) => annotate_with_hash(child, hash, jsx_class_attr_name));
+				.filter((/** @type {any} */ child) => preserve_style_elements || !is_style_element(child))
+				.map((/** @type {any} */ child) =>
+					annotate_with_hash(child, hash, jsx_class_attr_name, preserve_style_elements),
+				);
 		}
 		return node;
 	}
@@ -126,7 +138,7 @@ export function annotate_with_hash(node, hash, jsx_class_attr_name = 'class') {
 		}
 		if (Array.isArray(node.children)) {
 			node.children = node.children.map((/** @type {any} */ child) =>
-				annotate_with_hash(child, hash, jsx_class_attr_name),
+				annotate_with_hash(child, hash, jsx_class_attr_name, preserve_style_elements),
 			);
 		}
 		return node;
@@ -140,10 +152,10 @@ export function annotate_with_hash(node, hash, jsx_class_attr_name = 'class') {
 		const value = node[key];
 		if (Array.isArray(value)) {
 			node[key] = value.map((/** @type {any} */ child) =>
-				annotate_with_hash(child, hash, jsx_class_attr_name),
+				annotate_with_hash(child, hash, jsx_class_attr_name, preserve_style_elements),
 			);
 		} else if (value && typeof value === 'object') {
-			node[key] = annotate_with_hash(value, hash, jsx_class_attr_name);
+			node[key] = annotate_with_hash(value, hash, jsx_class_attr_name, preserve_style_elements);
 		}
 	}
 
@@ -154,14 +166,22 @@ export function annotate_with_hash(node, hash, jsx_class_attr_name = 'class') {
  * @param {any} component
  * @param {string} hash
  * @param {'class' | 'className'} [jsx_class_attr_name='class']
+ * @param {boolean} [preserve_style_elements=false]
  * @returns {void}
  */
-export function annotate_component_with_hash(component, hash, jsx_class_attr_name = 'class') {
+export function annotate_component_with_hash(
+	component,
+	hash,
+	jsx_class_attr_name = 'class',
+	preserve_style_elements = false,
+) {
 	/** @type {any[]} */
 	const body = component.body;
 	component.body = body
-		.filter((/** @type {any} */ child) => !is_style_element(child))
-		.map((/** @type {any} */ child) => annotate_with_hash(child, hash, jsx_class_attr_name));
+		.filter((/** @type {any} */ child) => preserve_style_elements || !is_style_element(child))
+		.map((/** @type {any} */ child) =>
+			annotate_with_hash(child, hash, jsx_class_attr_name, preserve_style_elements),
+		);
 }
 
 /**
@@ -198,7 +218,8 @@ export function add_hash_class(element, hash) {
 
 	if (value.type === 'Literal' && typeof value.value === 'string') {
 		const merged = `${value.value} ${hash}`;
-		existing.value = { type: 'Literal', value: merged, raw: JSON.stringify(merged) };
+		value.value = merged;
+		value.raw = JSON.stringify(merged);
 		return;
 	}
 
@@ -233,7 +254,11 @@ function add_hash_class_to_jsx_element(element, hash, jsx_class_attr_name) {
 		existing.name = {
 			type: 'JSXIdentifier',
 			name: jsx_class_attr_name,
-			metadata: existing.name.metadata || { path: [] },
+			metadata: {
+				...(existing.name.metadata || { path: [] }),
+				source_name: existing.name.name,
+				source_length: existing.name.name.length,
+			},
 		};
 	}
 
@@ -245,7 +270,8 @@ function add_hash_class_to_jsx_element(element, hash, jsx_class_attr_name) {
 
 	if (value.type === 'Literal' && typeof value.value === 'string') {
 		const merged = `${value.value} ${hash}`;
-		existing.value = { type: 'Literal', value: merged, raw: JSON.stringify(merged) };
+		value.value = merged;
+		value.raw = JSON.stringify(merged);
 		return;
 	}
 

package/src/transform/segments.js

@@ -162,14 +162,14 @@ function visit_source_ast(ast, src_line_offsets, { regions, css_element_info })
 					start: cssStart,
 					end: cssEnd,
 					content: node.css,
-					id: get_style_region_id(node.metadata.styleScopeHash, `head-${region_id}`),
+					id: get_style_region_id(node.metadata.styleScopeHash, `head-${region_id++}`),
 				});
 			}
 
 			context.next();
 		},
 		Attribute(node, context) {
-			const element = context.path?.find((n) => n.type === 'Element');
+			const element = context.path?.findLast((n) => n.type === 'Element');
 			if (element?.metadata?.css?.scopedClasses) {
 				// we don't need to check is_element_dom_element(node)
 				// since scopedClasses are added during pruning only to DOM elements
@@ -568,10 +568,11 @@ export function convert_source_map_to_mappings(
 				if (node.loc && node.name) {
 					/** @type {Token} */
 					const token = {
-						source: node.metadata?.is_capitalized ? node.metadata.source_name : node.name,
+						source: node.metadata?.source_name ?? node.name,
 						generated: node.name,
 						loc: node.loc,
 						metadata: {},
+						sourceLength: node.metadata?.source_length,
 					};
 					if (node.metadata?.disable_verification) {
 						token.mappingData = { ...mapping_data, verification: false };
@@ -708,16 +709,24 @@ export function convert_source_map_to_mappings(
 						visit(node.value);
 					}
 				} else {
+					const is_class_attribute =
+						node.name?.type === 'JSXIdentifier' &&
+						(node.name.name === 'class' || node.name.name === 'className');
 					const attr =
-						node.name.name === 'class' && node.value?.type === 'JSXExpressionContainer'
+						is_class_attribute && node.value?.type === 'JSXExpressionContainer'
 							? node.value.expression
 							: node.value;
 
-					const css = attr
-						? css_element_info.get(`${attr.loc?.start.line}:${attr.loc?.start.column}`)
-						: null;
+					const css =
+						is_class_attribute && attr
+							? css_element_info.get(`${attr.loc?.start.line}:${attr.loc?.start.column}`)
+							: null;
 
 					if (attr && css) {
+						if (node.name) {
+							visit(node.name);
+						}
+
 						// Extract class names from the attribute value
 						const classes = extract_classes(
 							attr,
@@ -861,7 +870,7 @@ export function convert_source_map_to_mappings(
 						target_node,
 						src_to_gen_map,
 						gen_line_offsets,
-						mapping_data_verify_only,
+						closing ? mapping_data_verify_only : mapping_data_verify_complete,
 					);
 					// The generated code includes a semicolon after the closing or self-closed tag
 					// We're extending the mapping to include the semicolon

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;
 	/**