@tsrx/core 0.1.16 → 0.1.17

package/src/transform/lazy.js

@@ -438,14 +438,14 @@ function replace_lazy_in_pattern(pattern, is_top = true) {
 
 /**
  * Walk the AST and pre-allocate `lazy_id` metadata on every lazy destructuring
- * pattern: function/component params, variable declarator ids, and statement-level
- * assignment LHS. Walks into non-lazy outer patterns to find nested lazy ones,
- * e.g. `{ pair: &[a, b] }` allocates an id for the inner `&[a, b]`. Idempotent:
- * skips patterns that already have a `lazy_id`.
+ * pattern: function params, variable declarator ids, and statement-level
+ * assignment LHS. Walks into non-lazy outer patterns to
+ * find nested lazy ones, e.g. `{ pair: &[a, b] }` allocates an id for the inner
+ * `&[a, b]`. Idempotent: skips patterns that already have a `lazy_id`.
  *
  * Also stamps `metadata.has_lazy_descendants = true` on every function-like
  * node whose subtree contains any lazy pattern, so `apply_lazy_transforms`
- * can take a constant-time early-return path for purely non-lazy functions.
+ * can take a constant-time fast path for purely non-lazy functions.
  *
  * @param {any} root
  * @param {LazyContext} context
@@ -570,7 +570,7 @@ export function apply_lazy_transforms(node, lazy_bindings) {
 			return node;
 		}
 
-		// Past the early-return: either we have active lazy bindings, lazy
+		// Past the fast path: either we have active lazy bindings, lazy
 		// params to replace, defaults referencing outer lazy, or the body
 		// contains lazy descendants the BlockStatement handler will collect.
 		// In every case the body needs to be walked.

package/src/transform/scoping.js

@@ -89,7 +89,7 @@ function is_composite_jsx_element(node) {
 }
 
 /**
- * Recursively walk `Element` nodes within a component body and add the hash
+ * Recursively walk `Element` nodes within a TSRX fragment and add the hash
  * class name so scope-qualified selectors (e.g. `.foo.hash`) match.
  *
  * @param {any} node
@@ -106,7 +106,6 @@ export function annotate_with_hash(
 ) {
 	if (!node || typeof node !== 'object') return node;
 	if (
-		node.type === 'Component' ||
 		node.type === 'FunctionDeclaration' ||
 		node.type === 'FunctionExpression' ||
 		node.type === 'ArrowFunctionExpression'

package/src/transform/segments.js

@@ -56,7 +56,6 @@ import {
 	get_mapping_from_node,
 } from '../source-map-utils.js';
 
-const LABEL_TO_COMPONENT_REPLACE_REGEX = /(function|\((property|method)\))/;
 const LAZY_PARAM_IDENTIFIER_REGEX = /^__lazy\d+$/;
 
 /**
@@ -67,17 +66,6 @@ function escape_regex(value) {
 	return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
-/**
- * @param {string} content
- * @returns {string}
- */
-function replace_label_to_component(content) {
-	return content.replace(LABEL_TO_COMPONENT_REPLACE_REGEX, (_, fn, kind) => {
-		if (fn === 'function') return 'component';
-		return `(component ${kind})`;
-	});
-}
-
 /**
  * @param {string} lazy_id
  * @param {(content: string) => string} [base_hover]
@@ -442,53 +430,12 @@ export function convert_source_map_to_mappings(
 		}
 	}
 
-	/**
-	 * @typedef {AST.Property & {value: AST.FunctionExpression, method: true} & {value: {metadata: {is_component: true}}}} PropertyIsComponent
-	 */
-
-	/**
-	 * Maps `component` to the identifier's location
-	 * e.g. const obj = { component something() { } }
-	 * since there is no function keyword in source maps
-	 * @param {PropertyIsComponent} node
-	 * @returns {void}
-	 */
-	function set_component_mapping_to_name(node) {
-		if (node.key.loc) {
-			/** @type {CodeMapping} */
-			let mapping;
-			let start = /** @type {AST.NodeWithLocation} */ (node).start;
-			let length = 'component'.length;
-
-			if (node.value.type === 'FunctionExpression' && node.value.id) {
-				const id = /** @type {AST.Identifier & AST.NodeWithLocation} */ (node.value.id);
-				mapping = get_mapping_from_node(id, src_to_gen_map, gen_line_offsets);
-			} else {
-				// e.g. key is computed or literal
-				mapping = get_mapping_from_node(node.key, src_to_gen_map, gen_line_offsets);
-			}
-
-			// overwrite source start and length to point to 'component' keyword
-			mapping.sourceOffsets = [start];
-			mapping.lengths = [length];
-			mapping.data.customData.hover = replace_label_to_component;
-
-			mappings.push(mapping);
-		}
-	}
-
 	/**
 	 * @param {AST.Literal} node
-	 * @param {boolean} [is_component]
 	 */
-	function handle_literal(node, is_component = false) {
+	function handle_literal(node) {
 		if (node.loc) {
 			const mapping = get_mapping_from_node(node, src_to_gen_map, gen_line_offsets);
-
-			if (is_component) {
-				mapping.data.customData.hover = replace_label_to_component;
-			}
-
 			mappings.push(mapping);
 		}
 	}
@@ -524,15 +471,8 @@ export function convert_source_map_to_mappings(
 						};
 					}
 
-					if (node.metadata?.is_component) {
-						// only if the node has a component as the parent
-						token.metadata.hover = replace_label_to_component;
-					}
 					if (node.metadata?.source_length != null && LAZY_PARAM_IDENTIFIER_REGEX.test(node.name)) {
-						token.metadata.hover = create_lazy_param_hover_replacement(
-							node.name,
-							node.metadata?.lazy_param_is_component ? replace_label_to_component : undefined,
-						);
+						token.metadata.hover = create_lazy_param_hover_replacement(node.name);
 					}
 					if ('hover' in (node.metadata || {})) {
 						token.metadata.hover = /** @type {any} */ (node.metadata).hover;
@@ -772,25 +712,6 @@ export function convert_source_map_to_mappings(
 							visit(node.name);
 						}
 
-						if (
-							node.name.type === 'JSXIdentifier' &&
-							node.name.metadata?.is_component &&
-							node.name.loc
-						) {
-							const mapping = get_mapping_from_node(
-								node.name,
-								src_to_gen_map,
-								gen_line_offsets,
-								mapping_data,
-							);
-							mapping.sourceOffsets = [
-								/** @type {AST.NodeWithLocation} */ (node.name).start - 'component '.length,
-							];
-							mapping.lengths = ['component'.length];
-
-							mapping.data.customData.hover = replace_label_to_component;
-							mappings.push(mapping);
-						}
 						if (node.value) {
 							visit(node.value);
 						}
@@ -920,69 +841,51 @@ export function convert_source_map_to_mappings(
 					}
 				}
 
-				// Add function/component keyword token
+				// Add the function keyword token.
 				if (
 					(node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression') &&
 					!is_method &&
 					node.loc
 				) {
 					const node_fn = /** @type (typeof node) & AST.NodeWithLocation */ (node);
-					const is_component = node_fn.metadata?.is_component;
-					const source_func_keyword = is_component ? 'component' : 'function';
 					const function_hover = create_function_hover_replacement(
 						/** @type {AST.Parameter[]} */ (node.params),
-						is_component ? replace_label_to_component : undefined,
 					);
 					let start_col = node_fn.loc.start.column;
 					let start = node_fn.start;
 					const async_keyword = 'async';
 
-					if (is_component && node_fn.id?.loc) {
-						const mapping = get_mapping_from_node(node_fn.id, src_to_gen_map, gen_line_offsets);
-						const generated_id_start = mapping.generatedOffsets[0];
-						const generated_keyword_start = find_component_keyword_offset(
-							generated_code,
-							generated_id_start,
-						);
-						mapping.sourceOffsets = [start];
-						mapping.lengths = [source_func_keyword.length];
-						mapping.generatedOffsets = [generated_keyword_start];
-						mapping.generatedLengths = ['function'.length];
-						if (function_hover) mapping.data.customData.hover = function_hover;
-						mappings.push(mapping);
-					} else {
-						if (node_fn.async) {
-							// We explicitly mapped async and function in esrap
-							tokens.push({
-								source: async_keyword,
-								generated: async_keyword,
-								loc: {
-									start: { line: node_fn.loc.start.line, column: start_col },
-									end: {
-										line: node_fn.loc.start.line,
-										column: start_col + async_keyword.length,
-									},
-								},
-								metadata: {},
-							});
-
-							start_col += async_keyword.length + 1; // +1 for space
-							start += async_keyword.length + 1;
-						}
-
+					if (node_fn.async) {
+						// We explicitly mapped async and function in esrap
 						tokens.push({
-							source: source_func_keyword,
-							generated: 'function',
+							source: async_keyword,
+							generated: async_keyword,
 							loc: {
 								start: { line: node_fn.loc.start.line, column: start_col },
 								end: {
 									line: node_fn.loc.start.line,
-									column: start_col + source_func_keyword.length,
+									column: start_col + async_keyword.length,
 								},
 							},
-							metadata: function_hover ? { hover: function_hover } : {},
+							metadata: {},
 						});
+
+						start_col += async_keyword.length + 1; // +1 for space
+						start += async_keyword.length + 1;
 					}
+
+					tokens.push({
+						source: 'function',
+						generated: 'function',
+						loc: {
+							start: { line: node_fn.loc.start.line, column: start_col },
+							end: {
+								line: node_fn.loc.start.line,
+								column: start_col + 'function'.length,
+							},
+						},
+						metadata: function_hover ? { hover: function_hover } : {},
+					});
 				}
 
 				// Visit in source order: id, params, body
@@ -997,7 +900,6 @@ export function convert_source_map_to_mappings(
 					);
 					const function_hover = create_function_hover_replacement(
 						/** @type {AST.Parameter[]} */ (node.params),
-						node.metadata?.is_component ? replace_label_to_component : undefined,
 					);
 					if (function_hover && id.loc) {
 						tokens.push({
@@ -1018,13 +920,6 @@ export function convert_source_map_to_mappings(
 
 				if (node.params) {
 					for (const param of node.params) {
-						if (
-							param.type === 'Identifier' &&
-							param.metadata?.source_length != null &&
-							LAZY_PARAM_IDENTIFIER_REGEX.test(param.name)
-						) {
-							param.metadata.lazy_param_is_component = node.metadata?.is_component === true;
-						}
 						visit(param);
 						if (param.typeAnnotation) {
 							visit(param.typeAnnotation);
@@ -1406,19 +1301,8 @@ export function convert_source_map_to_mappings(
 						set_bracket_computed_mapping(node, mappings);
 					}
 
-					if (
-						node.value.type === 'FunctionExpression' &&
-						node.method &&
-						node.value.metadata.is_component
-					) {
-						set_component_mapping_to_name(/** @type {PropertyIsComponent} */ (node));
-					}
-
 					if (node.key.type === 'Literal') {
-						handle_literal(
-							node.key,
-							/** @type {AST.FunctionExpression} */ (node.value).metadata.is_component,
-						);
+						handle_literal(node.key);
 					} else {
 						visit(node.key);
 					}
@@ -2374,21 +2258,6 @@ export function convert_source_map_to_mappings(
 	};
 }
 
-/**
- * @param {string} generated_code
- * @param {number} generated_id_start
- * @returns {number}
- */
-function find_component_keyword_offset(generated_code, generated_id_start) {
-	const function_keyword_index = generated_code.lastIndexOf('function', generated_id_start);
-
-	if (function_keyword_index === -1) {
-		return generated_id_start;
-	}
-
-	return function_keyword_index;
-}
-
 /**
  * Build a `VolarMappingsResult` from generated code plus source-map metadata.
  *

package/src/transform/style-ref.js

@@ -0,0 +1,235 @@
+/** @import * as AST from 'estree' */
+
+import * as b from '../utils/builders.js';
+import { clone_expression_node, clone_identifier } from './jsx/ast-builders.js';
+
+/**
+ * @typedef {{
+ *   allowMutableRefTarget?: boolean;
+ *   createTempIdentifier?: () => AST.Identifier;
+ *   visitExpression?: (expression: AST.Expression) => AST.Expression;
+ * }} StyleRefOptions
+ */
+
+/**
+ * @param {any} component
+ * @param {any} css
+ * @returns {AST.ObjectExpression}
+ */
+export function create_style_class_map(component, css) {
+	const hash = css?.hash ?? null;
+	const top_scoped_classes = /** @type {Map<string, any>} */ (
+		component?.metadata?.topScopedClasses ?? new Map()
+	);
+	const class_names = [...top_scoped_classes.keys()].sort();
+
+	return b.object(
+		class_names.map((class_name) =>
+			b.prop('init', b.literal(class_name), b.literal(hash ? `${hash} ${class_name}` : class_name)),
+		),
+	);
+}
+
+/**
+ * @param {any} node
+ * @param {any[]} [refs]
+ * @returns {any[]}
+ */
+export function collect_style_ref_attributes(node, refs = []) {
+	if (!node || typeof node !== 'object') return refs;
+
+	if (Array.isArray(node)) {
+		for (const child of node) collect_style_ref_attributes(child, refs);
+		return refs;
+	}
+
+	if (is_style_element(node)) {
+		for (const attr of node.attributes || []) {
+			if (is_ref_attribute(attr) && attr.value) {
+				refs.push(attr);
+			}
+		}
+		return refs;
+	}
+
+	if (is_function_or_class_boundary(node)) {
+		return refs;
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata' || key === 'css') {
+			continue;
+		}
+		collect_style_ref_attributes(node[key], refs);
+	}
+
+	return refs;
+}
+
+/**
+ * @param {any[]} ref_attributes
+ * @param {AST.Expression} style_map
+ * @param {StyleRefOptions} [options]
+ * @returns {AST.Statement[]}
+ */
+export function create_style_ref_setup_statements(ref_attributes, style_map, options = {}) {
+	/** @type {AST.Statement[]} */
+	const statements = [];
+	for (const attr of ref_attributes) {
+		const source = get_ref_attribute_expression(attr);
+		if (!source) continue;
+		statements.push(...create_style_ref_expression_statements(source, style_map, options));
+	}
+	return statements;
+}
+
+/**
+ * @param {AST.Expression} source
+ * @param {AST.Expression} style_map
+ * @param {StyleRefOptions} options
+ * @returns {AST.Statement[]}
+ */
+function create_style_ref_expression_statements(source, style_map, options) {
+	if (source.type === 'ArrayExpression') {
+		return source.elements.flatMap((element) => {
+			if (!element) return [];
+			const expression = element.type === 'SpreadElement' ? element.argument : element;
+			return create_style_ref_expression_statements(
+				/** @type {AST.Expression} */ (expression),
+				style_map,
+				options,
+			);
+		});
+	}
+
+	if (
+		options.allowMutableRefTarget !== false &&
+		(source.type === 'Identifier' || source.type === 'MemberExpression')
+	) {
+		const target = clone_expression_node(source, false);
+		return [
+			b.stmt(
+				b.assignment(
+					'=',
+					/** @type {AST.Pattern} */ (target),
+					clone_expression_node(style_map, false),
+				),
+			),
+		];
+	}
+
+	if (source.type === 'ArrowFunctionExpression' || source.type === 'FunctionExpression') {
+		return [
+			b.stmt(
+				b.call(
+					visit_expression(clone_expression_node(source, false), options),
+					clone_expression_node(style_map, false),
+				),
+			),
+		];
+	}
+
+	return create_dynamic_style_ref_statement(source, style_map, options);
+}
+
+/**
+ * @param {AST.Expression} source
+ * @param {AST.Expression} style_map
+ * @param {StyleRefOptions} options
+ * @returns {AST.Statement[]}
+ */
+function create_dynamic_style_ref_statement(source, style_map, options) {
+	const ref_id = options.createTempIdentifier?.() ?? b.id('__tsrx_style_ref');
+	const ref_read = () => clone_identifier(ref_id);
+	const current_write = b.stmt(
+		b.assignment('=', b.member(ref_read(), 'current'), clone_expression_node(style_map, false)),
+	);
+	const value_write = b.stmt(
+		b.assignment('=', b.member(ref_read(), 'value'), clone_expression_node(style_map, false)),
+	);
+
+	return [
+		b.let(ref_id, visit_expression(clone_expression_node(source, false), options)),
+		b.if(
+			b.binary('===', b.unary('typeof', ref_read()), b.literal('function')),
+			b.block([b.stmt(b.call(ref_read(), clone_expression_node(style_map, false)))]),
+			b.if(
+				b.logical(
+					'&&',
+					ref_read(),
+					b.binary('===', b.unary('typeof', ref_read()), b.literal('object')),
+				),
+				b.block([
+					b.if(
+						b.binary('in', b.literal('current'), ref_read()),
+						b.block([current_write]),
+						b.if(b.binary('in', b.literal('value'), ref_read()), b.block([value_write]), null),
+					),
+				]),
+				null,
+			),
+		),
+	];
+}
+
+/**
+ * @param {AST.Expression} expression
+ * @param {StyleRefOptions} options
+ * @returns {AST.Expression}
+ */
+function visit_expression(expression, options) {
+	return options.visitExpression ? options.visitExpression(expression) : expression;
+}
+
+/**
+ * @param {any} attr
+ * @returns {AST.Expression | null}
+ */
+function get_ref_attribute_expression(attr) {
+	const value = attr.value;
+	if (!value) return null;
+	if (value.type === 'JSXExpressionContainer') {
+		return value.expression.type === 'JSXEmptyExpression' ? null : value.expression;
+	}
+	return value;
+}
+
+/**
+ * @param {any} attr
+ * @returns {boolean}
+ */
+function is_ref_attribute(attr) {
+	return (
+		(attr?.type === 'Attribute' && attr.name?.type === 'Identifier' && attr.name.name === 'ref') ||
+		(attr?.type === 'JSXAttribute' &&
+			attr.name?.type === 'JSXIdentifier' &&
+			attr.name.name === 'ref')
+	);
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_style_element(node) {
+	return !!(
+		node &&
+		node.type === 'Element' &&
+		node.id?.type === 'Identifier' &&
+		node.id.name === 'style'
+	);
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_function_or_class_boundary(node) {
+	return (
+		node?.type === 'FunctionDeclaration' ||
+		node?.type === 'FunctionExpression' ||
+		node?.type === 'ArrowFunctionExpression' ||
+		node?.type === 'ClassDeclaration' ||
+		node?.type === 'ClassExpression'
+	);
+}

package/src/utils/ast.js

@@ -37,12 +37,7 @@ export function is_function_node(node) {
  * @returns {boolean}
  */
 export function is_function_or_component_node(node) {
-	return (
-		node.type === 'FunctionDeclaration' ||
-		node.type === 'FunctionExpression' ||
-		node.type === 'ArrowFunctionExpression' ||
-		node.type === 'Component'
-	);
+	return is_function_node(node);
 }
 
 /**
@@ -54,32 +49,29 @@ export function is_class_node(node) {
 }
 
 /**
- * @param {AST.Node} node
- * @returns {boolean}
- */
-export function is_component_node(node) {
-	return node.type === 'Component';
-}
-
-/**
- * Returns the closest component in an ancestry path. By default, function and
- * class boundaries stop the search so callers only match direct component
- * body/control-flow nodes.
+ * Returns the closest native TSRX function in an ancestry path. By default,
+ * function and class boundaries stop the search so callers only match direct
+ * native TSRX function body/control-flow nodes.
  *
  * @param {AST.Node[]} path
  * @param {boolean} [includes_functions=false]
- * @returns {AST.Component | undefined}
+ * @returns {AST.Function | undefined}
  */
 export function get_component_from_path(path, includes_functions = false) {
 	for (let i = path.length - 1; i >= 0; i -= 1) {
 		const node = path[i];
 
-		if (!includes_functions && (is_function_node(node) || is_class_node(node))) {
-			return;
+		if (is_function_node(node)) {
+			if (/** @type {any} */ (node).metadata?.native_tsrx_function) {
+				return /** @type {AST.Function} */ (node);
+			}
+			if (!includes_functions) {
+				return;
+			}
 		}
 
-		if (is_component_node(node)) {
-			return /** @type {AST.Component} */ (node);
+		if (!includes_functions && is_class_node(node)) {
+			return;
 		}
 	}
 }
@@ -87,7 +79,7 @@ export function get_component_from_path(path, includes_functions = false) {
 /**
  * @param {AST.Node[] | { path: AST.Node[] }} context_or_path
  * @param {boolean} [includes_functions=false]
- * @returns {AST.Component | undefined}
+ * @returns {AST.Function | undefined}
  */
 export function is_inside_component(context_or_path, includes_functions = false) {
 	const path = Array.isArray(context_or_path) ? context_or_path : context_or_path.path;

package/src/utils/builders.js

@@ -77,24 +77,6 @@ export function arrow(params, body, async = false, type_parameters, loc_info) {
 	return set_location(node, loc_info);
 }
 
-/**
- * @param {AST.Identifier} id
- * @param {AST.Pattern[]} params
- * @param {AST.Node[]} body
- * @returns {AST.Component}
- */
-export function component(id, params, body) {
-	return {
-		type: 'Component',
-		id,
-		params,
-		body,
-		css: null,
-		metadata: { path: [] },
-		default: false,
-	};
-}
-
 /**
  * @param {AST.AssignmentOperator} operator
  * @param {AST.Pattern} left