@tsrx/core 0.1.26 → 0.1.28

package/package.json

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

package/src/plugin.js

@@ -55,27 +55,6 @@ const CharCode = Object.freeze({
 	closeBrace: 125,
 });
 
-/**
- * Keywords after which a `/` begins a regex literal rather than division, used
- * by the look-ahead scanners to track expression position in script content.
- */
-const REGEX_PRECEDING_KEYWORDS = new Set([
-	'return',
-	'typeof',
-	'instanceof',
-	'in',
-	'of',
-	'new',
-	'delete',
-	'void',
-	'do',
-	'else',
-	'yield',
-	'await',
-	'case',
-	'throw',
-]);
-
 // Transparent wrappers to look through when validating a dynamic tag
 // expression (`<{expr}>`), and syntax that disqualifies one outright.
 const DYNAMIC_TAG_WRAPPER_TYPES = new Set([
@@ -568,7 +547,7 @@ export function TSRXPlugin(config) {
 				let index = start;
 				let value = '';
 				while (index < this.input.length) {
-					if (this.#isTemplateLineCommentStart(index)) {
+					if (this.#isTemplateLineCommentStart(index, start)) {
 						const comment_start = index;
 						const comment_start_loc = acorn.getLineInfo(this.input, comment_start);
 						index += 2;
@@ -596,11 +575,32 @@ export function TSRXPlugin(config) {
 						}
 						continue;
 					}
+					if (this.#isTemplateBlockCommentStart(index)) {
+						const comment_start = index;
+						const comment_start_loc = acorn.getLineInfo(this.input, comment_start);
+						const close = this.input.indexOf('*/', index + 2);
+						const value_end = close === -1 ? this.input.length : close;
+						index = close === -1 ? this.input.length : close + 2;
+						if (this.options.onComment && comment_start >= token_end) {
+							const comment_end_loc = acorn.getLineInfo(this.input, index);
+							this.options.onComment(
+								true,
+								this.input.slice(comment_start + 2, value_end),
+								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),
+							);
+						}
+						continue;
+					}
 					const ch = this.input.charCodeAt(index);
 					if (
 						ch === CharCode.lessThan ||
 						ch === CharCode.openBrace ||
 						ch === CharCode.closeBrace ||
+						this.#isCodeBlockStart(index) ||
 						this.#isJSXControlFlowDirectiveAt(index)
 					) {
 						break;
@@ -962,13 +962,41 @@ export function TSRXPlugin(config) {
 			}
 
 			/**
+			 * A `//` is a comment only when nothing but whitespace precedes it on its
+			 * line, or — given `run_start`, the position where the current text run
+			 * began (right after a sibling element, code block, or expression
+			 * container) — since that boundary. Once real text has begun, `//` is
+			 * literal so inline text like `https://…` stays text.
 			 * @param {number} index
+			 * @param {number} [run_start]
 			 */
-			#isTemplateLineCommentStart(index) {
+			#isTemplateLineCommentStart(index, run_start = -1) {
+				if (
+					this.input.charCodeAt(index) !== CharCode.slash ||
+					this.input.charCodeAt(index + 1) !== CharCode.slash
+				) {
+					return false;
+				}
+				if (this.#isLineStartPosition(index)) return true;
+				if (run_start < 0) return false;
+				for (let i = index - 1; i >= run_start; i--) {
+					const ch = this.input.charCodeAt(i);
+					if (ch === CharCode.lineFeed || ch === CharCode.carriageReturn) return false;
+					if (ch !== CharCode.space && ch !== CharCode.tab) return false;
+				}
+				return true;
+			}
+
+			/**
+			 * Unlike `//` (which is only a comment at line-start so inline text like
+			 * `https://…` stays text), `/*` starts a comment anywhere in template
+			 * text, matching `jsx_readToken`.
+			 * @param {number} index
+			 */
+			#isTemplateBlockCommentStart(index) {
 				return (
 					this.input.charCodeAt(index) === CharCode.slash &&
-					this.input.charCodeAt(index + 1) === CharCode.slash &&
-					this.#isLineStartPosition(index)
+					this.input.charCodeAt(index + 1) === CharCode.asterisk
 				);
 			}
 
@@ -984,7 +1012,8 @@ export function TSRXPlugin(config) {
 						ch === CharCode.openBrace ||
 						ch === CharCode.closeBrace ||
 						this.#isJSXControlFlowDirectiveAt(index) ||
-						this.#isTemplateLineCommentStart(index)
+						this.#isTemplateLineCommentStart(index, start) ||
+						this.#isTemplateBlockCommentStart(index)
 					) {
 						break;
 					}
@@ -2005,9 +2034,10 @@ export function TSRXPlugin(config) {
 					);
 					const closingEnd = closingStart + '</style>'.length;
 					const closingEndInfo = acorn.getLineInfo(this.input, closingEnd);
-					const closingElement = /** @type {ESTreeJSX.JSXClosingElement & AST.NodeWithLocation} */ (
-						this.startNodeAt(closingStart, closingStartLoc)
-					);
+					const closingElement =
+						/** @type {ESTreeJSX.TSRXJSXClosingElement & AST.NodeWithLocation} */ (
+							this.startNodeAt(closingStart, closingStartLoc)
+						);
 					closingElement.name = name;
 					this.finishNodeAt(
 						closingElement,
@@ -2700,7 +2730,10 @@ export function TSRXPlugin(config) {
 					this.pos++;
 					return this.finishToken(tt.arrow);
 				}
-				if (code === CharCode.lessThan) {
+				if (code === CharCode.lessThan && this.type !== tstt.jsxText) {
+					// After a JSX text token a `<` can only open a tag; without this guard
+					// text ending in an identifier character (`hello<div>`) would read as
+					// the start of a type argument list (`hello<T>`).
 					const next = this.input.charCodeAt(this.pos + 1);
 					if (
 						next !== CharCode.slash &&
@@ -4208,8 +4241,10 @@ export function TSRXPlugin(config) {
 				} else {
 					if (is_style) {
 						/** @type {AST.JSXStyleElement} */ (node).type = 'JSXStyleElement';
-						/** @type {AST.JSXStyleElement} */ (node).openingElement = open;
-						/** @type {AST.JSXStyleElement} */ (node).closingElement = null;
+						/** @type {AST.JSXStyleElement} */ (node).openingElement =
+							/** @type {AST.JSXStyleElement['openingElement']} */ (open);
+						/** @type {AST.JSXStyleElement} */ (node).closingElement =
+							/** @type {AST.JSXStyleElement['closingElement']} */ (null);
 					} else {
 						/** @type {ESTreeJSX.JSXElement} */ (node).type = 'JSXElement';
 						/** @type {ESTreeJSX.JSXElement} */ (node).openingElement = open;

package/src/transform/jsx/helpers.js

@@ -4,20 +4,19 @@
 import tsx from 'esrap/languages/tsx';
 
 /**
- * Zimmerframe provides `path` as the ancestor chain. A native template node whose
- * parent is another native template node renders as a JSX child; anywhere else it
- * renders as a standalone expression (e.g. a return value).
+ * Zimmerframe provides `path` as the ancestor chain. A native template node in
+ * the children list of any JSX element/fragment renders as a JSX child;
+ * anywhere else it renders as a standalone expression (e.g. a return value).
+ * The parent may be a parsed native template node or a synthetic fragment the
+ * transform built around render children — either way a bare expression in a
+ * child slot would print as JSX text.
  *
  * @param {any[]} path
  * @returns {boolean}
  */
 export function in_jsx_child_context(path) {
 	const parent = path[path.length - 1];
-	return (
-		!!parent &&
-		(parent.type === 'JSXElement' || parent.type === 'JSXFragment') &&
-		parent.metadata?.native_tsrx
-	);
+	return !!parent && (parent.type === 'JSXElement' || parent.type === 'JSXFragment');
 }
 
 /**

package/src/transform/jsx/index.js

@@ -146,10 +146,57 @@ function mark_nested_function_return_jsx(node, inside_function = false, seen = n
 }
 
 /**
- * Flatten a `@{ … }` code block that appears as an element/fragment child into
- * the element's children list: its setup statements followed by its single
- * render output. The render pipeline already handles interleaved setup
- * statements and JSX children. This is the element-scoped equivalent of
+ * Lower a `@{ … }` code block that appears as an element/fragment child,
+ * paying only for what the block uses while keeping each block its own
+ * lexical scope:
+ *
+ * - no setup code: the scope is unobservable, so the render output merges
+ *   directly into the children list (template-only chains collapse to the
+ *   innermost output, empty chains to nothing);
+ * - code-only: a plain `{ … }` statement block — statements run in source
+ *   order, scoped, and render nothing (the render pipeline already handles
+ *   statements interleaved with JSX children);
+ * - setup code + render output: kept as a `JSXCodeBlock` (with any nested
+ *   chain simplified) for the context-aware lowering into a scoped IIFE
+ *   (`transform_jsx_code_block` / `build_render_statements`).
+ *
+ * Always returns zero or one node.
+ * @param {any} block
+ * @returns {any[]}
+ */
+function lower_code_block_child(block) {
+	const body = block.body || [];
+	const render = block.render ?? null;
+
+	if (body.length === 0) {
+		if (render == null) return [];
+		if (render.type === 'JSXCodeBlock') return lower_code_block_child(render);
+		return [render];
+	}
+
+	if (render?.type === 'JSXCodeBlock') {
+		const inner = lower_code_block_child(render);
+		if (inner.length === 0) {
+			return [b.block(body, block)];
+		}
+		if (inner[0].type === 'BlockStatement') {
+			return [b.block([...body, inner[0]], block)];
+		}
+		// The chain still renders — simplify the render to the lowered inner
+		// node and leave the block for the context-aware lowering.
+		return [{ ...block, render: inner[0] }];
+	}
+
+	if (render == null) {
+		return [b.block(body, block)];
+	}
+
+	return [block];
+}
+
+/**
+ * Lower `@{ … }` code blocks that appear as element/fragment children (see
+ * `lower_code_block_child`). This is the element-scoped equivalent of
  * `transform_function`'s body lowering — function and arrow bodies are never
  * element children, so they are untouched here.
  * @param {any} node
@@ -170,9 +217,7 @@ function expand_child_code_blocks(node, seen = new Set()) {
 		node.children.some((/** @type {any} */ c) => c?.type === 'JSXCodeBlock')
 	) {
 		node.children = node.children.flatMap((/** @type {any} */ child) =>
-			child?.type === 'JSXCodeBlock'
-				? [...child.body, ...(child.render != null ? [child.render] : [])]
-				: [child],
+			child?.type === 'JSXCodeBlock' ? lower_code_block_child(child) : [child],
 		);
 	}
 
@@ -801,6 +846,79 @@ function build_component_statements(body_nodes, transform_context) {
 	return build_render_statements(body_nodes, false, transform_context);
 }
 
+/**
+ * Statements for one `@{ … }` scope level: the setup statements followed by
+ * the lowered chain continuation. A nested level that declares anything is
+ * kept in a nested plain `{ … }` block, so a whole chain shares a single
+ * closure while still scoping each level; the generated `return` exits that
+ * closure.
+ * @param {any} block
+ * @param {TransformContext} transform_context
+ * @returns {{ statements: any[], has_render: boolean }}
+ */
+function code_block_scope_statements(block, transform_context) {
+	const statements = [...(block.body || [])];
+	const render = block.render ?? null;
+
+	if (render == null) {
+		return { statements, has_render: false };
+	}
+
+	if (render.type === 'JSXCodeBlock') {
+		const inner = code_block_scope_statements(render, transform_context);
+		if (inner.statements.length > 0) {
+			if ((render.body || []).length > 0) {
+				statements.push(b.block(inner.statements, render));
+			} else {
+				statements.push(...inner.statements);
+			}
+		}
+		return { statements, has_render: inner.has_render };
+	}
+
+	return {
+		statements: [...statements, ...build_render_statements([render], true, transform_context)],
+		has_render: true,
+	};
+}
+
+/**
+ * Lower a `@{ … }` code block that appears in a component/IIFE statement
+ * stream, keeping each block its own lexical scope:
+ *
+ * - no setup code: the scope is unobservable, so the render output (if any)
+ *   merges directly into the stream;
+ * - code-only: a plain `{ … }` statement block;
+ * - setup code + render output: a scoped IIFE expression child whose value is
+ *   the render output, with nested chains folded into the one closure.
+ *
+ * Always returns zero or one node.
+ * @param {any} block
+ * @param {TransformContext} transform_context
+ * @returns {any[]}
+ */
+function lower_code_block_stream_node(block, transform_context) {
+	const body = block.body || [];
+	const render = block.render ?? null;
+
+	if (body.length === 0) {
+		if (render == null) return [];
+		if (render.type === 'JSXCodeBlock') {
+			return lower_code_block_stream_node(render, transform_context);
+		}
+		return [render];
+	}
+
+	const { statements, has_render } = code_block_scope_statements(block, transform_context);
+
+	if (!has_render) {
+		return [b.block(statements, block)];
+	}
+
+	const iife = b.call(b.arrow([], b.block(statements, block)));
+	return [to_jsx_expression_container(iife, block)];
+}
+
 /**
  * @param {any[]} body_nodes
  * @param {boolean} return_null_when_empty
@@ -809,9 +927,7 @@ function build_component_statements(body_nodes, transform_context) {
  */
 function build_render_statements(body_nodes, return_null_when_empty, transform_context) {
 	body_nodes = body_nodes.flatMap((node) =>
-		node?.type === 'JSXCodeBlock'
-			? [...node.body, ...(node.render != null ? [node.render] : [])]
-			: [node],
+		node?.type === 'JSXCodeBlock' ? lower_code_block_stream_node(node, transform_context) : [node],
 	);
 
 	const statements = [];

package/src/utils/builders.js

@@ -1249,6 +1249,44 @@ export function jsx_fragment(children = [], attributes = []) {
 	};
 }
 
+/**
+ * Ripple's internal fragment template node (the normalized form of a
+ * `JSXFragment`).
+ * @param {AST.Node[]} [children]
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TsrxFragment}
+ */
+export function tsrx_fragment(children = [], loc_info) {
+	const node = /** @type {AST.TsrxFragment} */ (
+		/** @type {unknown} */ ({
+			type: 'TsrxFragment',
+			children,
+			attributes: [],
+			selfClosing: false,
+			metadata: { path: [] },
+		})
+	);
+
+	return set_location(node, loc_info);
+}
+
+/**
+ * Ripple's internal expression template child (the normalized form of a
+ * `JSXExpressionContainer` child).
+ * @param {AST.Expression} expression
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TSRXExpression}
+ */
+export function tsrx_expression(expression, loc_info) {
+	const node = /** @type {AST.TSRXExpression} */ ({
+		type: 'TSRXExpression',
+		expression,
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
 /**
  * @param {AST.Expression | ESTreeJSX.JSXEmptyExpression} expression
  * @param {AST.NodeWithLocation} [loc_info]

package/types/index.d.ts

@@ -170,6 +170,17 @@ declare module 'estree' {
 	interface SimpleCallExpression {
 		metadata: BaseNodeMetaData & {
 			hash?: string;
+			/**
+			 * A generated `(() => @{ … })()` inline-component IIFE for a code
+			 * block; collapsible once the block's statements lower into the
+			 * component callback.
+			 */
+			tsrx_code_block_component?: boolean;
+			/**
+			 * A generated zero-argument scope IIFE for a `@{ … }` code-block
+			 * chain level; runs synchronously inside its `with_scope` wrapper.
+			 */
+			tsrx_code_block_scope?: boolean;
 		};
 	}
 
@@ -253,6 +264,9 @@ declare module 'estree' {
 		TsrxFragment: TsrxFragment;
 		Text: Text;
 		TSRXJSXElement: TSRXJSXElement;
+		TSRXJSXFragment: TSRXJSXFragment;
+		TSRXJSXOpeningElement: ESTreeJSX.TSRXJSXOpeningElement;
+		TSRXJSXClosingElement: ESTreeJSX.TSRXJSXClosingElement;
 		TSRXExpression: TSRXExpression;
 		Attribute: Attribute;
 		SpreadAttribute: SpreadAttribute;
@@ -320,7 +334,14 @@ declare module 'estree' {
 		closingElement?: ESTreeJSX.JSXClosingFragment | null;
 		selfClosing?: boolean;
 		attributes?: Array<Attribute | SpreadAttribute>;
-		metadata: BaseNodeMetaData;
+		metadata: BaseNodeMetaData & {
+			/**
+			 * A synthetic wrapper for a nested code-block render chain
+			 * (`@{ @{ … } }`), so render-slot consumers see a template node;
+			 * template-children lowering unwraps it.
+			 */
+			tsrx_code_block_chain?: boolean;
+		};
 		start: number;
 		end: number;
 	}
@@ -346,7 +367,11 @@ declare module 'estree' {
 		| AST.JSXCodeBlock;
 
 	interface TSRXJSXElement
-		extends Omit<ESTreeJSX.JSXElement, 'children'>, AST.NodeWithMaybeComments {
+		extends
+			Omit<ESTreeJSX.JSXElement, 'children' | 'openingElement' | 'closingElement'>,
+			AST.NodeWithMaybeComments {
+		openingElement: ESTreeJSX.TSRXJSXOpeningElement;
+		closingElement: ESTreeJSX.TSRXJSXClosingElement | null;
 		children: TSRXJSXChild[];
 		metadata: BaseNodeMetaData & {
 			ts_name?: string;
@@ -366,13 +391,10 @@ declare module 'estree' {
 		innerComments?: AST.Comment[] | undefined;
 	}
 
-	interface JSXStyleElement extends AST.BaseExpression {
+	interface JSXStyleElement extends Omit<AST.TSRXJSXElement, 'type' | 'children'> {
 		type: 'JSXStyleElement';
-		openingElement: ESTreeJSX.JSXOpeningElement;
-		closingElement: ESTreeJSX.JSXClosingElement | null;
 		children: AST.CSS.StyleSheet[];
 		css?: string;
-		metadata: BaseNodeMetaData;
 		unclosed?: boolean;
 	}
 
@@ -520,7 +542,7 @@ declare module 'estree' {
 
 	type TSRXStatement = AST.Statement | TSESTree.Statement;
 
-	type NodeWithChildren = TSRXJSXElement | TSRXJSXFragment | JSXStyleElement;
+	type NodeWithChildren = TSRXJSXElement | TSRXJSXFragment | JSXStyleElement | ESTreeJSX.JSXElement;
 
 	export namespace CSS {
 		export interface BaseNode extends AST.NodeWithMaybeComments {
@@ -736,11 +758,11 @@ declare module 'estree-jsx' {
 	}
 
 	interface TSRXJSXOpeningElement extends Omit<JSXOpeningElement, 'name'> {
-		name: AST.MemberExpression | JSXIdentifier | JSXNamespacedName;
+		name: AST.MemberExpression | JSXIdentifier | JSXNamespacedName | JSXExpressionContainer;
 	}
 
 	interface TSRXJSXClosingElement extends Omit<JSXClosingElement, 'name'> {
-		name: AST.MemberExpression | JSXIdentifier | JSXNamespacedName;
+		name: AST.MemberExpression | JSXIdentifier | JSXNamespacedName | JSXExpressionContainer;
 	}
 
 	interface ExpressionMap {