@tsrx/core 0.1.27 → 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.27",
+  "version": "0.1.28",
   "type": "module",
   "repository": {
     "type": "git",

package/src/plugin.js

@@ -547,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;
@@ -600,6 +600,7 @@ export function TSRXPlugin(config) {
 						ch === CharCode.lessThan ||
 						ch === CharCode.openBrace ||
 						ch === CharCode.closeBrace ||
+						this.#isCodeBlockStart(index) ||
 						this.#isJSXControlFlowDirectiveAt(index)
 					) {
 						break;
@@ -961,14 +962,29 @@ 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) {
-				return (
-					this.input.charCodeAt(index) === CharCode.slash &&
-					this.input.charCodeAt(index + 1) === CharCode.slash &&
-					this.#isLineStartPosition(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;
 			}
 
 			/**
@@ -996,7 +1012,7 @@ export function TSRXPlugin(config) {
 						ch === CharCode.openBrace ||
 						ch === CharCode.closeBrace ||
 						this.#isJSXControlFlowDirectiveAt(index) ||
-						this.#isTemplateLineCommentStart(index) ||
+						this.#isTemplateLineCommentStart(index, start) ||
 						this.#isTemplateBlockCommentStart(index)
 					) {
 						break;
@@ -2714,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 &&

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;
 		};
 	}
 
@@ -323,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;
 	}