@tsrx/core 0.1.31 → 0.1.32

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "type": "module",
   "repository": {
     "type": "git",

package/src/index.js

@@ -159,6 +159,7 @@ export {
 	rewrite_loop_continues_to_bare_returns as rewriteLoopContinuesToBareReturns,
 	to_jsx_attribute as toJsxAttribute,
 	validate_at_most_one_ref_attribute as validateAtMostOneRefAttribute,
+	wrap_edge_whitespace as wrapEdgeWhitespace,
 } from './transform/jsx/index.js';
 export {
 	in_jsx_child_context as inJsxChildContext,

package/src/plugin.js

@@ -5,12 +5,7 @@
  */
 
 import * as acorn from 'acorn';
-import {
-	skipWhitespace,
-	isWhitespaceTextNode,
-	BINDING_TYPES,
-	DestructuringErrors,
-} from './parse/index.js';
+import { isWhitespaceTextNode, BINDING_TYPES, DestructuringErrors } from './parse/index.js';
 import { parse_style } from './parse/style.js';
 import { regex_newline_characters } from './utils/patterns.js';
 import { error } from './errors.js';
@@ -549,7 +544,6 @@ export function TSRXPlugin(config) {
 				while (index < this.input.length) {
 					if (this.#isTemplateLineCommentStart(index, start)) {
 						const comment_start = index;
-						const comment_start_loc = acorn.getLineInfo(this.input, comment_start);
 						index += 2;
 						while (
 							index < this.input.length &&
@@ -558,20 +552,9 @@ export function TSRXPlugin(config) {
 						) {
 							index++;
 						}
-						if (this.options.onComment && comment_start >= token_end) {
-							const comment_end_loc = acorn.getLineInfo(this.input, index);
-							// Pass null metadata so position-based attachment places the comment
-							// as a leading comment on the following child (which the JSX printers
-							// emit), rather than on the container's `elementLeadingComments`.
-							this.options.onComment(
-								false,
-								this.input.slice(comment_start + 2, index),
-								comment_start,
-								index,
-								new acorn.Position(comment_start_loc.line, comment_start_loc.column),
-								new acorn.Position(comment_end_loc.line, comment_end_loc.column),
-								/** @type {any} */ (null),
-							);
+
+						if (comment_start >= token_end) {
+							this.#emitTemplateLineComment(comment_start, index, null);
 						}
 						continue;
 					}
@@ -590,7 +573,7 @@ export function TSRXPlugin(config) {
 								index,
 								new acorn.Position(comment_start_loc.line, comment_start_loc.column),
 								new acorn.Position(comment_end_loc.line, comment_end_loc.column),
-								/** @type {any} */ (null),
+								null,
 							);
 						}
 						continue;
@@ -640,6 +623,62 @@ export function TSRXPlugin(config) {
 				return node.value !== '' && !regex_newline_characters.test(node.value);
 			}
 
+			#skipTrailingLayoutWhitespace() {
+				let index = this.start;
+				let has_newline = false;
+				while (index < this.input.length) {
+					const ch = this.input.charCodeAt(index);
+					if (ch === CharCode.lineFeed || ch === CharCode.carriageReturn) {
+						has_newline = true;
+						index++;
+					} else if (ch === CharCode.space || ch === CharCode.tab) {
+						index++;
+					} else if (ch === CharCode.slash && this.input.charCodeAt(index + 1) === CharCode.slash) {
+						const comment_start = index;
+						while (index < this.input.length && !this.#isNewlineCharCode(index)) {
+							index++;
+						}
+						this.#emitTemplateLineComment(comment_start, index, null);
+					} else {
+						break;
+					}
+				}
+				if (!has_newline) return;
+				const loc = acorn.getLineInfo(this.input, index);
+				this.start = index;
+				this.startLoc = new acorn.Position(loc.line, loc.column);
+				if (this.pos <= index) {
+					this.curLine = loc.line;
+					this.lineStart = index - loc.column;
+				}
+			}
+
+			/**
+			 * @param {number} index
+			 */
+			#isNewlineCharCode(index) {
+				const ch = this.input.charCodeAt(index);
+				return ch === CharCode.lineFeed || ch === CharCode.carriageReturn;
+			}
+
+			/**
+			 * @param {number} start
+			 * @param {number} end
+			 * @param {Parse.CommentMetaData | null} metadata
+			 */
+			#emitTemplateLineComment(start, end, metadata) {
+				if (!this.options.onComment) return;
+				this.options.onComment(
+					false,
+					this.input.slice(start + 2, end),
+					start,
+					end,
+					acorn.getLineInfo(this.input, start),
+					acorn.getLineInfo(this.input, end),
+					metadata,
+				);
+			}
+
 			#isSwitchCaseScriptStatementStart() {
 				let index = skip_whitespace_from(this.input, this.start);
 
@@ -4430,50 +4469,58 @@ export function TSRXPlugin(config) {
 						this.context.pop();
 					}
 					return;
-				} else if (
-					this.type === tstt.jsxTagStart ||
-					this.input.charCodeAt(this.start) === CharCode.lessThan
-				) {
+				} else if (this.type === tstt.jsxTagStart) {
 					const startPos = this.start;
 					const startLoc = this.startLoc;
-					if (this.type === tstt.jsxTagStart) {
-						this.next();
-					} else {
-						// A control-flow block inside a native template can leave the tokenizer
-						// in normal JS mode, so a closing tag may arrive as a relational
-						// `<` token. Re-enter JSX closing-tag parsing manually.
-						this.pos = startPos + 1;
-						this.type = tstt.jsxTagStart;
-						this.start = startPos;
-						this.startLoc = startLoc;
-						this.exprAllowed = false;
-						// A genuine `jsxTagStart` pushes `tc_expr` + `tc_oTag` in its
-						// `updateContext`; faking the token here skips those pushes. That is
-						// harmless for an opening tag (the next token is the tag name), but a
-						// closing tag (`</`) immediately runs `context.length -= 2` in the
-						// slash `updateContext`, which would underflow the context stack and
-						// throw "Invalid array length" (e.g. `<>@if (a) { … } done</>`). Push
-						// the two contexts a real `jsxTagStart` would have added so the closing
-						// tag pops its own contexts instead of the enclosing template's.
-						if (this.input.charCodeAt(this.pos) === CharCode.slash) {
-							this.context.push(tstc.tc_expr);
-							this.context.push(tstc.tc_oTag);
-						}
-						this.next();
-					}
+					this.next();
 					if (this.value === '/' || this.type === tt.slash) {
 						// Consume '/'
 						this.next();
 
-						let closingElement;
+						const closingNode = this.startNodeAt(startPos, startLoc);
+						const inside_parent_template =
+							this.#jsxExpressionContainerDepth === 0 &&
+							this.#templateScriptParsingDepth === 0 &&
+							this.#path.slice(0, -1).some((node) => this.#isNativeTemplateNode(node));
 						this.#closingNativeTemplateNode = true;
+						/** @type {ReturnType<Parse.Parser['jsx_parseElementName']>} */
+						let closingName;
 						try {
-							closingElement = /** @type {ESTreeJSX.JSXClosingElement & AST.NodeWithLocation} */ (
-								this.jsx_parseClosingElementAt(startPos, startLoc)
-							);
+							closingName = this.jsx_parseElementName();
 						} finally {
 							this.#closingNativeTemplateNode = false;
 						}
+						if (closingName) {
+							/** @type {ESTreeJSX.JSXClosingElement} */ (closingNode).name =
+								/** @type {ESTreeJSX.JSXIdentifier} */ (closingName);
+						}
+						const current = /** @type {ESTreeJSX.JSXFragment | ESTreeJSX.JSXElement} */ (
+							this.#path[this.#path.length - 1]
+						);
+						const current_name = this.#isNativeTemplateNode(current)
+							? current.type === 'JSXFragment'
+								? ''
+								: current.openingElement?.name
+									? this.getElementName(current.openingElement.name)
+									: null
+							: null;
+						const closing_name_str = !closingName
+							? ''
+							: closingName.type === 'JSXNamespacedName'
+								? closingName.namespace.name + ':' + closingName.name.name
+								: this.getElementName(closingName);
+						if (!(inside_parent_template && current_name === closing_name_str)) {
+							this.#closingNativeTemplateNode = true;
+						}
+						this.expect(tstt.jsxTagEnd);
+						this.#closingNativeTemplateNode = false;
+						const closingElement =
+							/** @type {ESTreeJSX.JSXClosingElement & AST.NodeWithLocation} */ (
+								this.finishNode(
+									closingNode,
+									closingName ? 'JSXClosingElement' : 'JSXClosingFragment',
+								)
+							);
 						if (this.#isDynamicJSXElementName(closingElement.name)) {
 							/** @type {any} */ (closingElement).isDynamic = true;
 						}
@@ -4586,7 +4633,7 @@ export function TSRXPlugin(config) {
 						}
 
 						this.#path.pop();
-						skipWhitespace(this);
+						this.#skipTrailingLayoutWhitespace();
 						return;
 					}
 					const node = this.parseElement();

package/src/transform/jsx/index.js

@@ -74,6 +74,16 @@ const TSRX_IF_CONTINUE_ERROR =
 	'Continue statements are not allowed inside TSRX template @if blocks. Filter before rendering or use conditional output instead.';
 const DYNAMIC_IMPORT_LOCAL = 'TsrxDynamic';
 const DYNAMIC_FACTORY_LOCAL = '_tsrx_dynamic';
+const LEADING_INLINE_WHITESPACE = /^[ \t]+/;
+const TRAILING_INLINE_WHITESPACE = /[ \t]+$/;
+
+/**
+ * @param {string | undefined} ch
+ * @returns {boolean}
+ */
+function is_newline_char(ch) {
+	return ch === '\n' || ch === '\r';
+}
 
 /**
  * @param {AST.Node} node
@@ -2413,9 +2423,7 @@ function mark_native_pretransformed_jsx(node, seen = new Set()) {
 function get_tsrx_render_children(node) {
 	return (node.children || []).filter(
 		(/** @type {any} */ child) =>
-			child &&
-			child.type !== 'EmptyStatement' &&
-			(child.type !== 'JSXText' || child.value.trim() !== ''),
+			child && child.type !== 'EmptyStatement' && (child.type !== 'JSXText' || child.value !== ''),
 	);
 }
 
@@ -3399,7 +3407,9 @@ function create_element_children(children, transform_context) {
 		const saved_inside_element_child = transform_context.inside_element_child;
 		transform_context.inside_element_child = true;
 		try {
-			return children.map((/** @type {any} */ child) => to_jsx_child(child, transform_context));
+			return wrap_edge_whitespace(
+				children.map((/** @type {any} */ child) => to_jsx_child(child, transform_context)),
+			);
 		} finally {
 			transform_context.inside_element_child = saved_inside_element_child;
 		}
@@ -3949,6 +3959,67 @@ function is_try_control_node(node) {
 	return node?.type === 'TryStatement' || node?.type === 'JSXTryExpression';
 }
 
+/**
+ * Wrap the inline whitespace at a fragment/element's content edges in `{' '}`
+ * containers. A bare leading/trailing space is fragile: once the output is
+ * line-wrapped (by prettier or the host JSX compiler) it becomes newline-adjacent
+ * and is trimmed away, dropping a significant space. Whitespace BETWEEN siblings
+ * stays bare text — it is not at an edge and is preserved as-is. Only spaces/tabs
+ * are pulled out; whitespace runs containing a newline are layout indentation and
+ * are left for the host compiler to collapse.
+ *
+ * @param {any[]} nodes
+ * @returns {any[]}
+ */
+export function wrap_edge_whitespace(nodes) {
+	const length = nodes.length;
+	if (length === 0) {
+		return nodes;
+	}
+
+	const first = nodes[0];
+	const last = nodes[length - 1];
+	if (first?.type !== 'JSXText' && last?.type !== 'JSXText') {
+		return nodes;
+	}
+
+	/** @type {(ESTreeJSX.JSXExpressionContainer | ESTreeJSX.JSXText)[]} */
+	const out = [];
+	for (let i = 0; i < length; i++) {
+		const node = nodes[i];
+		const at_start = i === 0;
+		const at_end = i === length - 1;
+		if (!node || node.type !== 'JSXText' || (!at_start && !at_end)) {
+			out.push(node);
+			continue;
+		}
+		let value = /** @type {string} */ (node.value);
+		if (at_start) {
+			const lead = LEADING_INLINE_WHITESPACE.exec(value);
+			if (lead && !is_newline_char(value[lead[0].length])) {
+				out.push(to_jsx_expression_container(b.literal(lead[0]), node));
+				value = value.slice(lead[0].length);
+			}
+		}
+		/** @type {ESTreeJSX.JSXExpressionContainer | null} */
+		let trailing = null;
+		if (at_end) {
+			const trail = TRAILING_INLINE_WHITESPACE.exec(value);
+			if (trail && !is_newline_char(value[value.length - trail[0].length - 1])) {
+				trailing = to_jsx_expression_container(b.literal(trail[0]), node);
+				value = value.slice(0, value.length - trail[0].length);
+			}
+		}
+		if (value !== '') {
+			out.push(b.jsx_text(value, value));
+		}
+		if (trailing) {
+			out.push(trailing);
+		}
+	}
+	return out;
+}
+
 /**
  * @param {any} node
  * @param {TransformContext} transform_context
@@ -4034,15 +4105,15 @@ function to_jsx_child(node, transform_context) {
 function tsrx_node_to_jsx_expression(node, transform_context, in_jsx_child = false) {
 	const children = (node.children || []).filter(
 		(/** @type {any} */ child) =>
-			child &&
-			child.type !== 'EmptyStatement' &&
-			(child.type !== 'JSXText' || child.value.trim() !== ''),
+			child && child.type !== 'EmptyStatement' && (child.type !== 'JSXText' || child.value !== ''),
 	);
 
 	/** @type {any} */
 	let expression;
 	if (children.length === 0) {
-		expression = create_null_literal();
+		expression = in_jsx_child
+			? set_loc(b.jsx_fragment([]), node.loc ? node : undefined)
+			: create_null_literal();
 	} else {
 		expression = return_value_body_to_expression(children, node, transform_context);
 	}
@@ -4052,10 +4123,10 @@ function tsrx_node_to_jsx_expression(node, transform_context, in_jsx_child = fal
 			const saved_inside_element_child = transform_context.inside_element_child;
 			transform_context.inside_element_child = true;
 			try {
-				const render_nodes = children.map((/** @type {any} */ child) =>
-					to_jsx_child(child, transform_context),
+				const render_nodes = wrap_edge_whitespace(
+					children.map((/** @type {any} */ child) => to_jsx_child(child, transform_context)),
 				);
-				expression = build_return_expression(render_nodes) || create_null_literal();
+				expression = build_return_expression(render_nodes, in_jsx_child) || create_null_literal();
 			} finally {
 				transform_context.inside_element_child = saved_inside_element_child;
 			}
@@ -5839,9 +5910,10 @@ function value_has_unmappable_jsx_loc(value) {
 
 /**
  * @param {any[]} render_nodes
+ * @param {boolean} [in_jsx_child]
  * @returns {any}
  */
-function build_return_expression(render_nodes) {
+function build_return_expression(render_nodes, in_jsx_child = false) {
 	if (render_nodes.length === 0) return null;
 	if (render_nodes.length === 1) {
 		const only = render_nodes[0];
@@ -5855,6 +5927,9 @@ function build_return_expression(render_nodes) {
 			return only.expression;
 		}
 		if (only.type === 'JSXText') {
+			if (in_jsx_child) {
+				return set_loc(b.jsx_fragment([only]), only.loc ? only : undefined);
+			}
 			const value = (only.value ?? '').trim();
 			return b.literal(value, JSON.stringify(value), only);
 		}

package/src/utils/builders.js

@@ -368,6 +368,26 @@ export function literal(value, raw, loc_info) {
 	return set_location(node, loc_info);
 }
 
+/**
+ * Ripple template `Text` node wrapping a string literal of `value`. Used by the
+ * Ripple normalizer when lowering a JSX text child to a template Text node.
+ *
+ * Remove once Ripple transformers move to the parser's JSX AST
+ *
+ * @param {string} value
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.Text}
+ */
+export function text(value, loc_info) {
+	const node = /** @type {AST.Text} */ ({
+		type: 'Text',
+		expression: literal(value, JSON.stringify(value), loc_info),
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
 /**
  * @param {AST.Expression | AST.Super} object
  * @param {string | AST.Expression | AST.PrivateIdentifier} property