@tsrx/core 0.1.20 → 0.1.24

package/src/parse/index.js

@@ -38,32 +38,6 @@ export function DestructuringErrors() {
 	return this;
 }
 
-/**
- * Convert JSX node types to regular JavaScript node types
- * @param {ESTreeJSX.JSXIdentifier | ESTreeJSX.JSXMemberExpression | AST.Node} node - The JSX node to convert
- * @returns {AST.Identifier | AST.MemberExpression | AST.Node} The converted node
- */
-export function convert_from_jsx(node) {
-	/** @type {AST.Identifier | AST.MemberExpression | AST.Node} */
-	let converted_node;
-	if (node.type === 'JSXIdentifier') {
-		converted_node = /** @type {AST.Identifier} */ (/** @type {unknown} */ (node));
-		converted_node.type = 'Identifier';
-	} else if (node.type === 'JSXMemberExpression') {
-		converted_node = /** @type {AST.MemberExpression} */ (/** @type {unknown} */ (node));
-		converted_node.type = 'MemberExpression';
-		converted_node.object = /** @type {AST.Identifier | AST.MemberExpression} */ (
-			convert_from_jsx(converted_node.object)
-		);
-		converted_node.property = /** @type {AST.Identifier} */ (
-			convert_from_jsx(converted_node.property)
-		);
-	} else {
-		converted_node = node;
-	}
-	return converted_node;
-}
-
 const regex_whitespace_only = /\s/;
 
 /**
@@ -95,18 +69,18 @@ export function skipWhitespace(parser) {
 }
 
 /**
- * @param {AST.Node | null | undefined} node
+ * @param {AST.Node | ESTreeJSX.JSXText | null | undefined} node
  * @returns {boolean}
  */
 export function isWhitespaceTextNode(node) {
-	if (!node || node.type !== 'Text') {
+	if (!node) {
 		return false;
 	}
 
-	const expr = node.expression;
-	if (expr && expr.type === 'Literal' && typeof expr.value === 'string') {
-		return /^\s*$/.test(expr.value);
+	if (node.type === 'JSXText') {
+		return /^\s*$/.test(node.value);
 	}
+
 	return false;
 }
 
@@ -298,6 +272,87 @@ export function get_comment_handlers(source, comments, index = 0) {
 		return null;
 	}
 
+	/**
+	 * @param {any} node
+	 * @returns {node is (ESTreeJSX.JSXElement | ESTreeJSX.JSXFragment) & AST.NodeWithLocation}
+	 */
+	function isNativeTemplateNode(node) {
+		return (
+			(node?.type === 'JSXElement' ||
+				node?.type === 'JSXFragment' ||
+				node?.type === 'JSXStyleElement') &&
+			node.metadata?.native_tsrx
+		);
+	}
+
+	/**
+	 * @param {any} node
+	 * @returns {node is (ESTreeJSX.JSXElement | AST.JSXStyleElement) & AST.NodeWithLocation}
+	 */
+	function isNativeTemplateElement(node) {
+		return (
+			(node?.type === 'JSXElement' || node?.type === 'JSXStyleElement') &&
+			node.metadata?.native_tsrx
+		);
+	}
+
+	/**
+	 * @param {any} node
+	 * @returns {AST.Node[]}
+	 */
+	function getTemplateChildren(node) {
+		return Array.isArray(node?.children)
+			? /** @type {AST.Node[]} */ (/** @type {unknown} */ (node.children))
+			: [];
+	}
+
+	/**
+	 * @param {any} node
+	 * @returns {node is (ESTreeJSX.JSXElement | ESTreeJSX.JSXFragment) & AST.NodeWithLocation}
+	 */
+	function isEmptyTemplateNode(node) {
+		return isNativeTemplateNode(node) && getTemplateChildren(node).length === 0;
+	}
+
+	/**
+	 * @param {any} node
+	 * @returns {any}
+	 */
+	function getNodeMetadata(node) {
+		const target = /** @type {AST.Node} */ (/** @type {unknown} */ (node));
+		target.metadata ??= { path: [] };
+		return target.metadata;
+	}
+
+	/**
+	 * @param {any} node
+	 * @param {AST.CommentWithLocation} comment
+	 */
+	function pushInnerComment(node, comment) {
+		const target = /** @type {any} */ (node);
+		(target.innerComments ||= []).push(comment);
+	}
+
+	/**
+	 * @param {any} node
+	 * @returns {boolean}
+	 */
+	function hasInnerComments(node) {
+		return !!(/** @type {any} */ (node).innerComments?.length);
+	}
+
+	/**
+	 * @param {ESTreeJSX.JSXElement | AST.JSXStyleElement} node
+	 * @returns {string | null}
+	 */
+	function getJSXElementName(node) {
+		const name = node.openingElement?.name;
+		if (!name) return null;
+		if (name.type === 'JSXIdentifier') return name.name;
+		if (name.type === 'JSXNamespacedName') return `${name.namespace.name}:${name.name.name}`;
+		return null;
+	}
+
 	return {
 		/**
 		 * @type {Parse.Options['onComment']}
@@ -348,19 +403,13 @@ export function get_comment_handlers(source, comments, index = 0) {
 				_(node, { next, path }) {
 					const metadata = /** @type {AST.Node} */ (node)?.metadata;
 
-					/**
-					 * Check if a comment is inside an attribute expression
-					 * of any ancestor Elements.
-					 * @returns {boolean}
-					 */
+					/** @returns {boolean} */
 					function isCommentInsideAttributeExpression() {
 						for (let i = path.length - 1; i >= 0; i--) {
 							const ancestor = path[i];
 							if (
 								ancestor &&
-								(ancestor.type === 'JSXAttribute' ||
-									ancestor.type === 'Attribute' ||
-									ancestor.type === 'JSXExpressionContainer')
+								(ancestor.type === 'JSXAttribute' || ancestor.type === 'JSXExpressionContainer')
 							) {
 								return true;
 							}
@@ -369,8 +418,6 @@ export function get_comment_handlers(source, comments, index = 0) {
 					}
 
 					/**
-					 * Check if a comment is inside any attribute of ancestor Elements,
-					 * but NOT if we're currently traversing inside that attribute.
 					 * @param {AST.CommentWithLocation} comment
 					 * @returns {boolean}
 					 */
@@ -378,14 +425,17 @@ export function get_comment_handlers(source, comments, index = 0) {
 						for (let i = path.length - 1; i >= 0; i--) {
 							const ancestor = path[i];
 							// we would definitely reach the attribute first before getting to the element
-							if (ancestor.type === 'JSXAttribute' || ancestor.type === 'Attribute') {
+							if (ancestor.type === 'JSXAttribute') {
 								return false;
 							}
-							if (ancestor && ancestor.type === 'Element') {
-								for (const attr of /** @type {(AST.Attribute & AST.NodeWithLocation)[]} */ (
-									ancestor.attributes
-								)) {
-									if (comment.start >= attr.start && comment.end <= attr.end) {
+							if (isNativeTemplateElement(ancestor)) {
+								for (const attr of ancestor.openingElement.attributes) {
+									if (
+										attr.start !== undefined &&
+										attr.end !== undefined &&
+										comment.start >= attr.start &&
+										comment.end <= attr.end
+									) {
 										return true;
 									}
 								}
@@ -395,23 +445,20 @@ export function get_comment_handlers(source, comments, index = 0) {
 					}
 
 					/**
-					 * If a comment is located between an empty Element's opening and closing tags,
-					 * attach it to the Element as `innerComments`.
 					 * @param {AST.CommentWithLocation} comment
-					 * @returns {AST.Element | null}
+					 * @returns {((ESTreeJSX.JSXElement | ESTreeJSX.JSXFragment) & AST.NodeWithLocation) | null}
 					 */
 					function getEmptyElementInnerCommentTarget(comment) {
-						const element = /** @type {AST.Element | undefined} */ (
-							path.findLast((ancestor) => ancestor && ancestor.type === 'Element')
-						);
+						const element = path.findLast((ancestor) => isNativeTemplateNode(ancestor));
+						const openingEnd =
+							element?.type === 'JSXFragment'
+								? element.openingFragment?.end
+								: element?.openingElement?.end;
 						if (
 							!element ||
-							element.children.length > 0 ||
-							!element.closingElement ||
-							!(
-								comment.start >= /** @type {AST.NodeWithLocation} */ (element.openingElement).end &&
-								comment.end <= /** @type {AST.NodeWithLocation} */ (element).end
-							)
+							!isEmptyTemplateNode(element) ||
+							openingEnd === undefined ||
+							!(comment.start >= openingEnd && comment.end <= element.end)
 						) {
 							return null;
 						}
@@ -426,22 +473,16 @@ export function get_comment_handlers(source, comments, index = 0) {
 					// parent <style> element's content range so they don't leak to
 					// subsequent JS nodes.
 					if (node.type === 'StyleSheet') {
-						const styleElement = /** @type {AST.Element & AST.NodeWithLocation | undefined} */ (
-							path.findLast(
-								(ancestor) =>
-									ancestor &&
-									ancestor.type === 'Element' &&
-									ancestor.id &&
-									/** @type {AST.Identifier} */ (ancestor.id).name === 'style',
-							)
-						);
+						const styleElement =
+							/** @type {(ESTreeJSX.JSXElement & AST.NodeWithLocation) | undefined} */ (
+								path.findLast(
+									(ancestor) =>
+										isNativeTemplateElement(ancestor) && getJSXElementName(ancestor) === 'style',
+								)
+							);
 						if (styleElement) {
-							const cssStart =
-								/** @type {AST.NodeWithLocation} */ (styleElement.openingElement)?.end ??
-								styleElement.start;
-							const cssEnd =
-								/** @type {AST.NodeWithLocation} */ (styleElement.closingElement)?.start ??
-								styleElement.end;
+							const cssStart = styleElement.openingElement?.end ?? styleElement.start;
+							const cssEnd = styleElement.closingElement?.start ?? styleElement.end;
 							while (comments[0] && comments[0].start >= cssStart && comments[0].end <= cssEnd) {
 								comments.shift();
 							}
@@ -453,8 +494,7 @@ export function get_comment_handlers(source, comments, index = 0) {
 						// For empty template elements, keep comments as `innerComments`.
 						// The Prettier plugin uses `innerComments` to preserve them and
 						// to avoid collapsing the element into self-closing syntax.
-						const isEmptyElement =
-							node.type === 'Element' && (!node.children || node.children.length === 0);
+						const isEmptyElement = isEmptyTemplateNode(node);
 						if (!isEmptyElement) {
 							while (
 								comments[0] &&
@@ -468,9 +508,7 @@ export function get_comment_handlers(source, comments, index = 0) {
 								// before the child element is pushed to the parser's #path, causing
 								// comments inside the child to get the parent's containerId.
 								const commentStart = comments[0].start;
-								const isInsideChildElement = /** @type {AST.NodeWithChildren} */ (
-									node
-								).children?.some(
+								const isInsideChildElement = getTemplateChildren(node).some(
 									(child) =>
 										child &&
 										child.start !== undefined &&
@@ -491,7 +529,7 @@ export function get_comment_handlers(source, comments, index = 0) {
 						comments[0] &&
 						comments[0].start < /** @type {AST.NodeWithLocation} */ (node).start
 					) {
-						// Skip comments that are inside an attribute of an ancestor Element.
+						// Skip comments that are inside an attribute of an ancestor JSX element.
 						// Since zimmerframe visits children before attributes, we need to leave
 						// these comments for when the attribute nodes are visited.
 						if (
@@ -506,7 +544,8 @@ export function get_comment_handlers(source, comments, index = 0) {
 							/** @type {AST.CommentWithLocation} */ (comments[0]),
 						);
 						if (maybeInner) {
-							(maybeInner.innerComments ||= []).push(
+							pushInnerComment(
+								maybeInner,
 								/** @type {AST.CommentWithLocation} */ (comments.shift()),
 							);
 							continue;
@@ -536,17 +575,18 @@ export function get_comment_handlers(source, comments, index = 0) {
 							continue;
 						}
 
-						const ancestorElements = /** @type {(AST.Element & AST.NodeWithLocation)[]} */ (
-							path.filter((ancestor) => ancestor && ancestor.type === 'Element' && ancestor.loc)
-						).sort((a, b) => a.loc.start.line - b.loc.start.line);
+						const ancestorElements = path
+							.filter((ancestor) => isNativeTemplateNode(ancestor) && ancestor.loc)
+							.map((ancestor) => /** @type {AST.NodeWithLocation} */ (ancestor))
+							.sort((a, b) => a.loc.start.line - b.loc.start.line);
 
 						const targetAncestor = ancestorElements.find(
 							(ancestor) => comment.loc.start.line < ancestor.loc.start.line,
 						);
 
 						if (targetAncestor) {
-							targetAncestor.metadata ??= { path: [] };
-							(targetAncestor.metadata.elementLeadingComments ||= []).push(comment);
+							const targetMetadata = getNodeMetadata(targetAncestor);
+							(targetMetadata.elementLeadingComments ||= []).push(comment);
 							continue;
 						}
 
@@ -595,8 +635,8 @@ export function get_comment_handlers(source, comments, index = 0) {
 								return;
 							}
 						}
-						// Handle empty Element nodes the same way as empty BlockStatements
-						if (node.type === 'Element' && (!node.children || node.children.length === 0)) {
+						// Handle empty template nodes the same way as empty BlockStatements
+						if (isEmptyTemplateNode(node)) {
 							// Collect all comments that fall within this empty element
 							while (
 								comments[0] &&
@@ -604,9 +644,26 @@ export function get_comment_handlers(source, comments, index = 0) {
 								comments[0].end < /** @type {AST.NodeWithLocation} */ (node).end
 							) {
 								const comment = /** @type {AST.CommentWithLocation} */ (comments.shift());
-								(node.innerComments ||= []).push(comment);
+								pushInnerComment(node, comment);
 							}
-							if (node.innerComments && node.innerComments.length > 0) {
+							if (hasInnerComments(node)) {
+								return;
+							}
+						}
+
+						// Trailing comments after the last statement/render inside a `@{ … }`
+						// code block (before its `}`) have no following node to attach to and
+						// would otherwise be claimed by the enclosing element's closing tag.
+						// Claim them here as the block's inner comments.
+						if (node.type === 'JSXCodeBlock') {
+							while (
+								comments[0] &&
+								comments[0].start >= /** @type {AST.NodeWithLocation} */ (node).start &&
+								comments[0].start < /** @type {AST.NodeWithLocation} */ (node).end
+							) {
+								pushInnerComment(node, /** @type {AST.CommentWithLocation} */ (comments.shift()));
+							}
+							if (comments.length === 0) {
 								return;
 							}
 						}
@@ -682,7 +739,8 @@ export function get_comment_handlers(source, comments, index = 0) {
 
 										const maybeInner = getEmptyElementInnerCommentTarget(potentialComment);
 										if (maybeInner) {
-											(maybeInner.innerComments ||= []).push(
+											pushInnerComment(
+												maybeInner,
 												/** @type {AST.CommentWithLocation} */ (comments.shift()),
 											);
 											continue;
@@ -712,7 +770,8 @@ export function get_comment_handlers(source, comments, index = 0) {
 
 										const maybeInner = getEmptyElementInnerCommentTarget(comment);
 										if (maybeInner) {
-											(maybeInner.innerComments ||= []).push(
+											pushInnerComment(
+												maybeInner,
 												/** @type {AST.CommentWithLocation} */ (comments.shift()),
 											);
 											continue;
@@ -727,7 +786,8 @@ export function get_comment_handlers(source, comments, index = 0) {
 									/** @type {AST.CommentWithLocation} */ (comments[0]),
 								);
 								if (maybeInner) {
-									(maybeInner.innerComments ||= []).push(
+									pushInnerComment(
+										maybeInner,
 										/** @type {AST.CommentWithLocation} */ (comments.shift()),
 									);
 									return;
@@ -814,7 +874,7 @@ export function get_comment_handlers(source, comments, index = 0) {
 									// check if there's also a blank line after the comment(s) before the next node
 									// If so, attach comments as trailing to preserve the grouping
 									// Only do this for statement-level contexts (BlockStatement, Program),
-									// not for Element children or other contexts
+									// not for JSX element children or other contexts
 									const isStatementContext =
 										parent.type === 'BlockStatement' || parent.type === 'Program';
 
@@ -850,16 +910,14 @@ export function get_comment_handlers(source, comments, index = 0) {
 										const hasBlankLineAfter = /\n\s*\n/.test(sliceAfterComments);
 
 										if (hasBlankLineAfter) {
-											// Don't attach comments as trailing if next sibling is an Element
-											// and any comment falls within the Element's line range
-											// This means the comments are inside the Element (between opening and closing tags)
-											const nextIsElement = nextSibling.type === 'Element';
+											// Don't attach comments as trailing if they are inside the next template node.
+											const nextIsElement = isNativeTemplateNode(nextSibling);
 											const commentsInsideElement =
 												nextIsElement &&
 												nextSibling.loc &&
 												comments.some((c) => {
 													if (!c.loc) return false;
-													// Check if comment is on a line between Element's start and end lines
+													// Check if comment is on a line between the JSX element's start and end lines
 													return (
 														c.loc.start.line >= nextSibling.loc.start.line &&
 														c.loc.end.line <= nextSibling.loc.end.line