@tsrx/core 0.1.31 → 0.1.33

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.33",
   "type": "module",
   "repository": {
     "type": "git",

package/src/constants.js

@@ -2,6 +2,10 @@ export const TEMPLATE_FRAGMENT = 1;
 export const TEMPLATE_USE_IMPORT_NODE = 1 << 1;
 export const IS_CONTROLLED = 1 << 2;
 export const IS_INDEXED = 1 << 3;
+// A control-flow block that is its component's sole root: renders before the
+// parent `__anchor` (sibling semantics, no `<!>` wrapper). Must match the value
+// in ripple's runtime constants.
+export const ROOT_CONTROLLED = 1 << 4;
 export const TEMPLATE_SVG_NAMESPACE = 1 << 5;
 export const TEMPLATE_MATHML_NAMESPACE = 1 << 6;
 

package/src/index.js

@@ -31,6 +31,7 @@ export {
 	TEMPLATE_USE_IMPORT_NODE,
 	IS_CONTROLLED,
 	IS_INDEXED,
+	ROOT_CONTROLLED,
 	TEMPLATE_SVG_NAMESPACE,
 	TEMPLATE_MATHML_NAMESPACE,
 	HYDRATION_START,
@@ -147,6 +148,7 @@ export {
 	create_hook_safe_helper as createHookSafeHelper,
 	create_element_ref_target_type as createElementRefTargetType,
 	create_element_ref_target_type_for_name as createElementRefTargetTypeForName,
+	build_return_expression as buildReturnExpression,
 	createJsxTransform,
 	extract_jsx_setup_declarations as extractJsxSetupDeclarations,
 	is_component_like_element,
@@ -159,10 +161,11 @@ 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,
-	tsx_node_to_jsx_expression as tsxNodeToJsxExpression,
+	is_empty_jsx_fragment as isEmptyJsxFragment,
 	tsx_with_ts_locations as tsxWithTsLocations,
 	is_template_if_node as isTemplateIfNode,
 	is_template_for_of_node as isTemplateForOfNode,

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';
@@ -237,6 +232,7 @@ export function TSRXPlugin(config) {
 		// If we push an undefined context, Acorn's tokenizer will later crash reading `.override`.
 		const b_stat = tc.b_stat || acorn.tokContexts.b_stat;
 		const b_expr = tc.b_expr || acorn.tokContexts.b_expr;
+		const q_tmpl = tc.q_tmpl || acorn.tokContexts.q_tmpl;
 		const tstt = Parser.acornTypeScript.tokTypes;
 		const tstc = Parser.acornTypeScript.tokContexts;
 
@@ -549,7 +545,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 +553,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 +574,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 +624,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);
 
@@ -1233,14 +1273,21 @@ export function TSRXPlugin(config) {
 			 */
 			#parseCodeBlockSetupStatement() {
 				const previous_context = this.context;
-				this.context = previous_context.filter(
-					(context) =>
-						context !== tstc.tc_expr && context !== tstc.tc_oTag && context !== tstc.tc_cTag,
-				);
+				const at_template_literal = this.type === tt.backQuote;
 				let pushed_statement_context = false;
-				if (this.curContext() !== b_stat) {
-					this.context.push(b_stat);
-					pushed_statement_context = true;
+				if (at_template_literal) {
+					if (this.curContext() !== q_tmpl) {
+						this.context.push(q_tmpl);
+					}
+				} else {
+					this.context = previous_context.filter(
+						(context) =>
+							context !== tstc.tc_expr && context !== tstc.tc_oTag && context !== tstc.tc_cTag,
+					);
+					if (this.curContext() !== b_stat) {
+						this.context.push(b_stat);
+						pushed_statement_context = true;
+					}
 				}
 				this.exprAllowed = true;
 				const previous_path = this.#path;
@@ -1248,22 +1295,7 @@ export function TSRXPlugin(config) {
 				this.#templateScriptParsingDepth++;
 				let node;
 				try {
-					// A code-block/directive body is statements plus at most one render node —
-					// never bare text or markup tokens. If the tokenizer mis-read trailing
-					// code as JSX (raw text or a tag-name token — both can happen for a
-					// statement following the render node, depending on the leftover context),
-					// reposition to the token start and re-read it as code now that the
-					// template path is hidden. It then parses as a statement so the
-					// one-render-node rule reports a clear "statements cannot follow" error
-					// instead of a generic parse fault.
 					if (this.type === tstt.jsxText || this.type === tstt.jsxName) {
-						// Rewinding `pos` to the mis-read token's start must also rewind the
-						// line counter: a `jsxText` token can span newlines (e.g. the blank
-						// line before a following render node), and reading it already
-						// advanced `curLine`/`lineStart` to its end. Resetting only `pos`
-						// would leave the line counter ahead of `pos`, inflating the `loc`
-						// of this statement and every node after it (which crashes source-map
-						// mapping when the inflated end line runs past the file).
 						const loc = acorn.getLineInfo(this.input, this.start);
 						this.pos = this.start;
 						this.curLine = loc.line;
@@ -1277,7 +1309,9 @@ export function TSRXPlugin(config) {
 					if (pushed_statement_context && this.curContext() === b_stat) {
 						this.context.pop();
 					}
-					this.context = previous_context;
+					if (!at_template_literal) {
+						this.context = previous_context;
+					}
 				}
 				if (this.curContext() === tstc.tc_expr) {
 					this.context.pop();
@@ -4344,22 +4378,29 @@ export function TSRXPlugin(config) {
 			parseTemplateBody(body) {
 				const current_template_node = this.#currentNativeTemplateNode();
 				if (!current_template_node) return;
-				// Outside a `@{ … }` block every element/fragment body is plain JSX (§2,
-				// §5). There is no script section and no `---` fence to infer — text is
-				// text, and setup code lives only inside a code block.
 				current_template_node.metadata ??= { path: [] };
 				current_template_node.metadata.templateMode = 'template';
 
-				// `@{ … }` code block as element/fragment content (§2 rule 1). Sibling
-				// code blocks are allowed, so this is not gated on an empty body;
-				// reposition onto the `@` if leading whitespace was tokenized ahead of it.
 				if (this.#atCodeBlockStart()) {
 					const at_index = skip_whitespace_from(this.input, this.start);
 					if (this.start !== at_index) {
+						const ws_start = this.start;
+						const ws_start_loc = this.startLoc;
+						const ws_value = this.input.slice(ws_start, at_index);
+						const text_node = /** @type {ESTreeJSX.JSXText} */ (
+							this.startNodeAt(ws_start, ws_start_loc)
+						);
+						text_node.value = ws_value;
+						text_node.raw = ws_value;
 						const loc = acorn.getLineInfo(this.input, at_index);
+						const at_position = new acorn.Position(loc.line, loc.column);
+						this.finishNodeAt(text_node, 'JSXText', at_index, at_position);
+						if (this.#shouldKeepTemplateTextNode(text_node)) {
+							body.push(text_node);
+						}
 						this.pos = at_index;
 						this.start = at_index;
-						this.startLoc = new acorn.Position(loc.line, loc.column);
+						this.startLoc = at_position;
 						this.curLine = loc.line;
 						this.lineStart = at_index - loc.column;
 					}
@@ -4377,8 +4418,23 @@ export function TSRXPlugin(config) {
 					// text never starts at `<`, so drop the leaked context and re-read the
 					// tag instead of emitting an empty node.
 					if (this.input.charCodeAt(this.start) === CharCode.lessThan) {
-						while (this.curContext() === tstc.tc_expr) {
-							this.context.pop();
+						if (this.input.charCodeAt(this.start + 1) === CharCode.slash) {
+							while (this.curContext() === tstc.tc_expr) {
+								this.context.pop();
+							}
+						} else {
+							let native_depth = 0;
+							for (const node of this.#path) {
+								if (this.#isNativeTemplateNode(node)) native_depth++;
+							}
+							let tc_expr_depth = 0;
+							for (const context of this.context) {
+								if (context === tstc.tc_expr) tc_expr_depth++;
+							}
+							while (tc_expr_depth > native_depth && this.curContext() === tstc.tc_expr) {
+								this.context.pop();
+								tc_expr_depth--;
+							}
 						}
 						this.pos = this.start;
 						this.exprAllowed = true;
@@ -4430,50 +4486,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 +4650,7 @@ export function TSRXPlugin(config) {
 						}
 
 						this.#path.pop();
-						skipWhitespace(this);
+						this.#skipTrailingLayoutWhitespace();
 						return;
 					}
 					const node = this.parseElement();

package/src/transform/jsx/helpers.js

@@ -19,6 +19,20 @@ export function in_jsx_child_context(path) {
 	return !!parent && (parent.type === 'JSXElement' || parent.type === 'JSXFragment');
 }
 
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+export function is_empty_jsx_fragment(node) {
+	return (
+		node?.type === 'JSXFragment' &&
+		!(node.children || []).some(
+			(/** @type {any} */ child) =>
+				child && (child.type !== 'JSXText' || child.value.trim() !== ''),
+		)
+	);
+}
+
 /**
  * Match Ripple's transform path metadata shape: every node seen by the walker
  * carries its current ancestor path for downstream CSS pruning and mapping
@@ -36,45 +50,6 @@ export function set_node_path_metadata(node, path) {
 	}
 }
 
-/**
- * Flatten a JSX-compatible island's children into a single expression. In a
- * JSX-child position, a JSXExpressionContainer `{expr}` is valid and must stay
- * wrapped. In an expression position (e.g. `return ...`), `{expr}` parses as
- * a block/object literal, so unwrap to `expr`.
- *
- * @param {any} node
- * @param {boolean} [in_jsx_child]
- * @returns {any}
- */
-export function tsx_node_to_jsx_expression(node, in_jsx_child = false) {
-	const children = (node.children || []).filter(
-		(/** @type {any} */ child) => child.type !== 'JSXText' || child.value.trim() !== '',
-	);
-
-	if (
-		children.length === 1 &&
-		children[0].type !== 'JSXText' &&
-		// Reactive-block containers (dynamic tags) must stay expression
-		// children so the host JSX compiler wraps them in a render block;
-		// unwrapping to a bare call would evaluate them once.
-		children[0].metadata?.tsrx_reactive_block !== true
-	) {
-		const only = children[0];
-		if (only.type === 'JSXExpressionContainer' && !in_jsx_child) {
-			return only.expression;
-		}
-		return only;
-	}
-
-	return /** @type {any} */ ({
-		type: 'JSXFragment',
-		openingFragment: { type: 'JSXOpeningFragment', metadata: { path: [] } },
-		closingFragment: { type: 'JSXClosingFragment', metadata: { path: [] } },
-		children,
-		metadata: { path: [] },
-	});
-}
-
 /**
  * Wrap esrap's `tsx()` printer with location markers for nodes whose spans
  * (e.g. the leading `new ` of a NewExpression or the angle-bracket delimiters