@tsrx/core 0.1.20 → 0.1.24

package/src/transform/jsx-interleave.js

@@ -15,8 +15,7 @@
  * change what earlier children rendered.
  *
  * The `is_jsx_child` predicate is target-specific — each target recognizes
- * a different set of JSX-bearing node types (Ripple `Element`, `Text`,
- * `TSRXExpression`, etc. plus plain JSX nodes).
+ * its JSX-bearing child nodes and template-control expressions.
  *
  * @param {any[]} body_nodes
  * @param {(node: any) => boolean} is_jsx_child

package/src/transform/scoping.js

@@ -37,45 +37,14 @@ export function prepare_stylesheet_for_render(stylesheet) {
  * @returns {boolean}
  */
 export function is_style_element(node) {
-	return (
-		node &&
-		node.type === 'Element' &&
-		node.id &&
-		node.id.type === 'Identifier' &&
-		node.id.name === 'style'
-	);
-}
-
-/**
- * @param {any} node
- * @returns {boolean}
- */
-export function is_composite_element(node) {
-	if (!node || node.type !== 'Element' || !node.id) {
-		return false;
-	}
-
-	if (node.id.type === 'Identifier') {
-		return /^[A-Z]/.test(node.id.name);
-	}
-
-	return node.id.type === 'MemberExpression';
-}
-
-/**
- * @param {any} node
- * @returns {boolean}
- */
-function is_style_jsx_element(node) {
-	const name = node?.openingElement?.name;
-	return node?.type === 'JSXElement' && name?.type === 'JSXIdentifier' && name.name === 'style';
+	return !!node && node.type === 'JSXStyleElement';
 }
 
 /**
  * @param {any} node
  * @returns {boolean}
  */
-function is_composite_jsx_element(node) {
+export function is_composite_jsx_element(node) {
 	const name = node?.openingElement?.name;
 	if (node?.type !== 'JSXElement' || !name) {
 		return false;
@@ -89,7 +58,7 @@ function is_composite_jsx_element(node) {
 }
 
 /**
- * Recursively walk `Element` nodes within a TSRX fragment and add the hash
+ * Recursively walk native JSX nodes within a TSRX fragment and add the hash
  * class name so scope-qualified selectors (e.g. `.foo.hash`) match.
  *
  * @param {any} node
@@ -113,34 +82,26 @@ export function annotate_with_hash(
 		return node;
 	}
 
-	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, jsx_class_attr_name);
+	if (node.type === 'JSXElement') {
+		if (!is_composite_jsx_element(node) || node.metadata?.runtime_dynamic_element) {
+			add_hash_class_to_jsx_element(node, hash, jsx_class_attr_name);
 		}
 		if (Array.isArray(node.children)) {
 			node.children = node.children
-				.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),
-				);
+				)
+				.filter(Boolean);
 		}
 		return node;
 	}
 
-	if (node.type === 'JSXElement') {
-		if (!is_style_jsx_element(node) && !is_composite_jsx_element(node)) {
-			add_hash_class_to_jsx_element(node, hash, jsx_class_attr_name);
-		}
-		if (Array.isArray(node.children)) {
-			node.children = node.children.map((/** @type {any} */ child) =>
-				annotate_with_hash(child, hash, jsx_class_attr_name, preserve_style_elements),
-			);
+	if (node.type === 'JSXStyleElement') {
+		if (preserve_style_elements) {
+			node.children = [];
+			return node;
 		}
-		return node;
+		return null;
 	}
 
 	for (const key of Object.keys(node)) {
@@ -192,25 +153,22 @@ export function annotate_component_with_hash(
  * @returns {void}
  */
 export function add_hash_class(element, hash, class_attr_name = 'class') {
-	const attrs = element.attributes || (element.attributes = []);
+	const attrs = element.openingElement.attributes;
 	const existing = attrs.find(
 		(/** @type {any} */ a) =>
-			a.type === 'Attribute' &&
+			a.type === 'JSXAttribute' &&
 			a.name &&
-			a.name.type === 'Identifier' &&
+			a.name.type === 'JSXIdentifier' &&
 			(a.name.name === 'class' || a.name.name === 'className'),
 	);
 
 	if (!existing) {
-		attrs.push({
-			type: 'Attribute',
-			name: b.id(class_attr_name),
-			value: { type: 'Literal', value: hash, raw: JSON.stringify(hash) },
-		});
+		attrs.push(b.jsx_attribute(b.jsx_id(class_attr_name), b.literal(hash)));
 		return;
 	}
 
-	const value = existing.value;
+	const value =
+		existing.value?.type === 'JSXExpressionContainer' ? existing.value.expression : existing.value;
 	if (!value) {
 		existing.value = { type: 'Literal', value: hash, raw: JSON.stringify(hash) };
 		return;
@@ -224,8 +182,9 @@ export function add_hash_class(element, hash, class_attr_name = 'class') {
 	}
 
 	// Dynamic expression. Concatenate at runtime via template literal.
-	const expression = value.type === 'JSXExpressionContainer' ? value.expression : value;
-	existing.value = b.template([b.quasi('', false), b.quasi(` ${hash}`, true)], [expression]);
+	existing.value = b.jsx_expression_container(
+		b.template([b.quasi('', false), b.quasi(` ${hash}`, true)], [value]),
+	);
 }
 
 /**
@@ -247,12 +206,14 @@ function add_hash_class_to_jsx_element(element, hash, jsx_class_attr_name) {
 		const hash_literal = b.literal(hash);
 		/** @type {any} */ (hash_literal).raw = JSON.stringify(hash);
 		attrs.push(b.jsx_attribute(b.jsx_id(jsx_class_attr_name), hash_literal));
+		element.attributes = attrs;
 		return;
 	}
 
 	const value = existing.value;
 	if (!value) {
 		existing.value = { type: 'Literal', value: hash, raw: JSON.stringify(hash) };
+		element.attributes = attrs;
 		return;
 	}
 
@@ -260,6 +221,7 @@ function add_hash_class_to_jsx_element(element, hash, jsx_class_attr_name) {
 		const merged = `${value.value} ${hash}`;
 		value.value = merged;
 		value.raw = JSON.stringify(merged);
+		element.attributes = attrs;
 		return;
 	}
 
@@ -267,4 +229,5 @@ function add_hash_class_to_jsx_element(element, hash, jsx_class_attr_name) {
 	existing.value = b.jsx_expression_container(
 		b.template([b.quasi('', false), b.quasi(` ${hash}`, true)], [expression]),
 	);
+	element.attributes = attrs;
 }

package/src/transform/segments.js

@@ -55,6 +55,7 @@ import {
 	build_line_offsets,
 	get_mapping_from_node,
 } from '../source-map-utils.js';
+import { should_preserve_comment } from '../comment-utils.js';
 
 const LAZY_PARAM_IDENTIFIER_REGEX = /^__lazy\d+$/;
 
@@ -133,9 +134,8 @@ function get_style_region_id(hash, fallback) {
 function visit_source_ast(ast, src_line_offsets, { regions, css_element_info }) {
 	let region_id = 0;
 	walk(ast, null, {
-		Element(node, context) {
-			// Check if this is a style element with CSS content
-			if (node.id?.type === 'Identifier' && node.id?.name === 'style' && node.css) {
+		JSXStyleElement(node, context) {
+			if (node.css) {
 				const openLoc = /** @type {ESTreeJSX.JSXOpeningElement & AST.NodeWithLocation} */ (
 					node.openingElement
 				).loc;
@@ -156,8 +156,10 @@ function visit_source_ast(ast, src_line_offsets, { regions, css_element_info })
 
 			context.next();
 		},
-		Attribute(node, context) {
-			const element = context.path?.findLast((n) => n.type === 'Element');
+		JSXAttribute(node, context) {
+			const element = context.path?.findLast(
+				(n) => n.type === 'JSXElement' && n.metadata?.native_tsrx,
+			);
 			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
@@ -430,6 +432,42 @@ export function convert_source_map_to_mappings(
 		}
 	}
 
+	/** @type {Set<string>} */
+	const mapped_comments = new Set();
+
+	/**
+	 * @param {any} node
+	 * @returns {void}
+	 */
+	function add_preserved_comment_mappings(node) {
+		for (const key of ['leadingComments', 'trailingComments', 'innerComments', 'comments']) {
+			const comments = node?.[key];
+			if (!Array.isArray(comments)) continue;
+
+			for (const comment of comments) {
+				if (!comment?.loc || !should_preserve_comment(comment)) continue;
+
+				const comment_key = `${comment.start}:${comment.end}`;
+				if (mapped_comments.has(comment_key)) continue;
+				mapped_comments.add(comment_key);
+
+				try {
+					mappings.push(
+						get_mapping_from_node(
+							comment,
+							src_to_gen_map,
+							gen_line_offsets,
+							mapping_data_verify_only,
+						),
+					);
+				} catch {
+					// Comments that were not emitted in generated TSX have no source-map
+					// segment. They should not produce Volar mappings.
+				}
+			}
+		}
+	}
+
 	/**
 	 * @param {AST.Literal} node
 	 */
@@ -444,6 +482,8 @@ export function convert_source_map_to_mappings(
 
 	walk(ast, null, {
 		_(node, { visit }) {
+			add_preserved_comment_mappings(node);
+
 			// Collect key node types: Identifiers, Literals, and JSX Elements
 			if (node.type === 'Identifier') {
 				// Only create mappings for identifiers with location info (from source)
@@ -738,6 +778,14 @@ export function convert_source_map_to_mappings(
 			} else if (node.type === 'JSXText') {
 				// Text content, no tokens to collect
 				return;
+			} else if (node.type === 'JSXCodeBlock') {
+				for (const statement of node.body) {
+					visit(statement);
+				}
+				if (node.render) {
+					visit(node.render);
+				}
+				return;
 			} else if (node.type === 'JSXElement') {
 				// Manually visit in source order: opening element, children, closing element
 
@@ -1080,6 +1128,19 @@ export function convert_source_map_to_mappings(
 					visit(node.body);
 				}
 
+				if (node.type === 'ForOfStatement' && node.empty) {
+					mappings.push(
+						get_mapping_from_node(
+							node.empty,
+							src_to_gen_map,
+							gen_line_offsets,
+							mapping_data_verify_only,
+						),
+					);
+
+					visit(node.empty);
+				}
+
 				if (node.loc) {
 					mappings.push(
 						get_mapping_from_node(node, src_to_gen_map, gen_line_offsets, mapping_data_verify_only),
@@ -1128,49 +1189,6 @@ export function convert_source_map_to_mappings(
 						),
 					);
 
-					// Add a special token for the 'pending' keyword with customData
-					// to suppress TypeScript diagnostics and provide custom hover/definition
-					const pending = /** @type {(typeof node.pending) & AST.NodeWithLocation} */ (
-						node.pending
-					);
-					const pendingKeywordLoc = {
-						start: {
-							line: pending.loc.start.line,
-							column: pending.loc.start.column - 'pending '.length,
-						},
-						end: {
-							line: pending.loc.start.line,
-							column: pending.loc.start.column - 1,
-						},
-					};
-					tokens.push({
-						source: 'pending',
-						generated: 'pending',
-						loc: pendingKeywordLoc,
-						metadata: {
-							wordHighlight: {
-								/** @type {DocumentHighlightKind} */
-								kind: 1,
-							},
-							suppressedDiagnostics: [
-								1472, // 'catch' or 'finally' expected
-								2304, // Cannot find name 'pending'
-							],
-							// suppress all hovers
-							hover: false,
-
-							// Example of a custom hover contents (uses markdown)
-							// hover:	'```ripple\npending\n```\n\nRipple-specific keyword for try/pending blocks.\n\nThe `pending` block executes while async operations inside the `try` block are awaiting. This provides a built-in loading state for async components.',
-
-							// Example of a custom definition and its type definition file
-							// definition: {
-							// 	typeReplace: {
-							// 		name: 'SomeType',
-							// 		path: 'types/index.d.ts',
-							// 	},
-							// },
-						},
-					});
 					visit(node.pending);
 				}
 				if (node.handler) {

package/src/transform/style-ref.js

@@ -68,7 +68,7 @@ export function collect_style_ref_attributes(node, refs = []) {
 	}
 
 	if (is_style_element(node)) {
-		for (const attr of node.attributes || []) {
+		for (const attr of node.openingElement?.attributes || []) {
 			if (is_ref_attribute(attr) && attr.value) {
 				refs.push(attr);
 			}
@@ -224,10 +224,7 @@ function get_ref_attribute_expression(attr) {
  */
 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')
+		attr?.type === 'JSXAttribute' && attr.name?.type === 'JSXIdentifier' && attr.name.name === 'ref'
 	);
 }
 
@@ -236,12 +233,7 @@ function is_ref_attribute(attr) {
  * @returns {boolean}
  */
 function is_style_element(node) {
-	return !!(
-		node &&
-		node.type === 'Element' &&
-		node.id?.type === 'Identifier' &&
-		node.id.name === 'style'
-	);
+	return !!node && node.type === 'JSXStyleElement';
 }
 
 /**

package/src/utils/builders.js

@@ -283,7 +283,6 @@ export function export_builder(
  * @param {AST.BlockStatement} body
  * @param {boolean} [async]
  * @param {AST.TSTypeParameterDeclaration} [type_parameters]
- * @param
  * @returns {AST.FunctionDeclaration}
  */
 export function function_declaration(id, params, body, async = false, type_parameters) {
@@ -1125,7 +1124,7 @@ export function jsx_attribute(name, value = null, shorthand = false, loc_info) {
 
 /**
  * Build a fresh `JSXOpeningElement`. For elements derived from an existing
- * Element node, prefer `jsx_element` which spreads from the source.
+ * JSX element node, prefer `jsx_element` which spreads from the source.
  *
  * @param {ESTreeJSX.JSXOpeningElement['name']} name
  * @param {ESTreeJSX.JSXOpeningElement['attributes']} [attributes]
@@ -1200,7 +1199,7 @@ export function jsx_element_fresh(
 }
 
 /**
- * @param {AST.Element} node
+ * @param {ESTreeJSX.JSXElement} node
  * @param {ESTreeJSX.JSXOpeningElement['attributes']} attributes
  * @param {ESTreeJSX.JSXElement['children']} children
  * @returns {ESTreeJSX.JSXElement}