@tsrx/core 0.1.33 → 0.1.35

package/package.json

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

package/src/plugin.js

@@ -259,6 +259,13 @@ export function TSRXPlugin(config) {
 			// `#filterTemplateScriptContexts`.
 			/** @type {number[]} */
 			#expressionContainerContextBaselines = [];
+			// `#path` length at the start of each open `{ … }` expression container.
+			// Raw template text inside a container belongs only to an element opened
+			// inside it (`{<div>   a</div>}`); at the container's own expression level
+			// (`{cond ? (<Outer>…</Outer>) : null}` after the `)`) the next characters
+			// are JS, and reading them as raw text would swallow tokens like `: null`.
+			/** @type {number[]} */
+			#expressionContainerPathBaselines = [];
 			#consumeContainerBraceAfterScope = false;
 			#scriptJSXElementDepth = 0;
 			#forceScriptJSXElementDepth = 0;
@@ -936,6 +943,26 @@ export function TSRXPlugin(config) {
 				if (!current_template_node || this.#isJSXControlFlowDirectiveAt(this.pos)) {
 					return false;
 				}
+				// Inside an expression container (only reachable with
+				// `allow_inside_expression_container`), raw text belongs to an element
+				// opened inside the container. When the innermost native template element
+				// sits below the container's path baseline we are at the container's own
+				// expression level — e.g. after `(<Outer>…</Outer>)` in
+				// `{cond ? (<Outer>…</Outer>) : null}` — and the following characters are
+				// JS tokens, not template text.
+				if (this.#jsxExpressionContainerDepth > 0 && !this.#openingNativeTemplateNode) {
+					const path_baseline = this.#expressionContainerPathBaselines.at(-1) ?? 0;
+					let inside_container = false;
+					for (let i = this.#path.length - 1; i >= path_baseline; i--) {
+						if (this.#isNativeTemplateNode(this.#path[i])) {
+							inside_container = true;
+							break;
+						}
+					}
+					if (!inside_container) {
+						return false;
+					}
+				}
 				if (this.#isTemplateLineCommentStart(this.pos)) {
 					return false;
 				}
@@ -3377,6 +3404,7 @@ export function TSRXPlugin(config) {
 					// container must not strip anything below this floor (see
 					// `#filterTemplateScriptContexts`).
 					this.#expressionContainerContextBaselines.push(this.context.length);
+					this.#expressionContainerPathBaselines.push(this.#path.length);
 					pushed_context_baseline = true;
 
 					node.expression =
@@ -3398,6 +3426,7 @@ export function TSRXPlugin(config) {
 					this.#jsxExpressionContainerDepth--;
 					if (pushed_context_baseline) {
 						this.#expressionContainerContextBaselines.pop();
+						this.#expressionContainerPathBaselines.pop();
 					}
 				}
 

package/src/source-map-utils.js

@@ -50,6 +50,17 @@ export const mapping_data_verify_complete = {
 	completion: true,
 };
 
+/**
+ * Completion only — no verification/hover/navigation. Used for positions that
+ * should surface completions but must not be type-checked, e.g. a `@`-leading text
+ * node that is an in-progress template directive (verifying it as code would raise
+ * spurious diagnostics).
+ * @type {Partial<VolarCodeMapping['data']>}
+ */
+export const mapping_data_completion_only = {
+	completion: true,
+};
+
 /**
  * Convert byte offset to line/column
  * @param {number} offset

package/src/transform/jsx/index.js

@@ -1202,7 +1202,9 @@ function build_render_statements(
 		const child = body_nodes[i];
 
 		if (is_loop_skip_return_statement(child)) {
-			statements.push(create_component_return_statement(render_nodes, child));
+			statements.push(
+				create_component_return_statement(render_nodes, child, true, transform_context.typeOnly),
+			);
 			render_nodes.length = 0;
 			has_terminal_return = true;
 			continue;
@@ -1314,7 +1316,7 @@ function build_render_statements(
 		hoist_static_render_nodes(render_nodes, transform_context);
 	}
 
-	let return_arg = build_return_expression(render_nodes);
+	let return_arg = build_return_expression(render_nodes, false, transform_context.typeOnly);
 	// Keep an authored `<> … </>` render output verbatim instead of collapsing it:
 	// an empty `<></>` stays `<></>` (not `null`), and a single child stays wrapped
 	// (not its bare value). The `!== 'JSXFragment'` guard avoids double-wrapping a
@@ -3142,18 +3144,23 @@ function get_generated_component_metadata_list(node) {
  * @param {any[]} render_nodes
  * @param {any} source_node
  * @param {boolean} [map_render_node_locations]
+ * @param {boolean} [type_only]
  * @returns {any}
  */
 function create_component_return_statement(
 	render_nodes,
 	source_node,
 	map_render_node_locations = true,
+	type_only = false,
 ) {
 	const cloned = render_nodes.map((node) =>
 		map_render_node_locations ? clone_expression_node(node) : clone_expression_node(node, false),
 	);
 
-	return set_loc(b.return(build_return_expression(cloned) || create_null_literal()), source_node);
+	return set_loc(
+		b.return(build_return_expression(cloned, false, type_only) || create_null_literal()),
+		source_node,
+	);
 }
 
 /**
@@ -3196,7 +3203,11 @@ function get_loop_skip_if_consequent_body(node) {
 function create_component_loop_skip_if_statement(node, render_nodes, transform_context) {
 	const consequent_body = /** @type {any[]} */ (get_loop_skip_if_consequent_body(node));
 	const branch_statements = build_render_statements(consequent_body, true, transform_context);
-	prepend_render_nodes_to_return_statements(branch_statements, render_nodes);
+	prepend_render_nodes_to_return_statements(
+		branch_statements,
+		render_nodes,
+		transform_context.typeOnly,
+	);
 
 	const statement = set_loc(
 		b.if(node.test, set_loc(b.block(branch_statements), node.consequent), null),
@@ -3212,15 +3223,16 @@ function create_component_loop_skip_if_statement(node, render_nodes, transform_c
 /**
  * @param {any[]} statements
  * @param {any[]} render_nodes
+ * @param {boolean} [type_only]
  * @returns {void}
  */
-function prepend_render_nodes_to_return_statements(statements, render_nodes) {
+function prepend_render_nodes_to_return_statements(statements, render_nodes, type_only = false) {
 	if (render_nodes.length === 0) {
 		return;
 	}
 
 	for (const statement of statements) {
-		prepend_render_nodes_to_return_statement(statement, render_nodes, false);
+		prepend_render_nodes_to_return_statement(statement, render_nodes, false, type_only);
 	}
 }
 
@@ -3228,9 +3240,15 @@ function prepend_render_nodes_to_return_statements(statements, render_nodes) {
  * @param {any} node
  * @param {any[]} render_nodes
  * @param {boolean} inside_nested_function
+ * @param {boolean} [type_only]
  * @returns {void}
  */
-function prepend_render_nodes_to_return_statement(node, render_nodes, inside_nested_function) {
+function prepend_render_nodes_to_return_statement(
+	node,
+	render_nodes,
+	inside_nested_function,
+	type_only = false,
+) {
 	if (!node || typeof node !== 'object') {
 		return;
 	}
@@ -3244,13 +3262,18 @@ function prepend_render_nodes_to_return_statement(node, render_nodes, inside_nes
 	}
 
 	if (!inside_nested_function && node.type === 'ReturnStatement') {
-		node.argument = combine_render_return_argument(render_nodes, node.argument);
+		node.argument = combine_render_return_argument(render_nodes, node.argument, type_only);
 		return;
 	}
 
 	if (Array.isArray(node)) {
 		for (const child of node) {
-			prepend_render_nodes_to_return_statement(child, render_nodes, inside_nested_function);
+			prepend_render_nodes_to_return_statement(
+				child,
+				render_nodes,
+				inside_nested_function,
+				type_only,
+			);
 		}
 		return;
 	}
@@ -3259,23 +3282,29 @@ function prepend_render_nodes_to_return_statement(node, render_nodes, inside_nes
 		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
 			continue;
 		}
-		prepend_render_nodes_to_return_statement(node[key], render_nodes, inside_nested_function);
+		prepend_render_nodes_to_return_statement(
+			node[key],
+			render_nodes,
+			inside_nested_function,
+			type_only,
+		);
 	}
 }
 
 /**
  * @param {any[]} render_nodes
  * @param {any} return_argument
+ * @param {boolean} [type_only]
  * @returns {any}
  */
-function combine_render_return_argument(render_nodes, return_argument) {
+function combine_render_return_argument(render_nodes, return_argument, type_only = false) {
 	const combined = render_nodes.map((node) => clone_expression_node(node, false));
 
 	if (return_argument != null && !is_null_literal(return_argument)) {
 		combined.push(return_argument_to_render_node(return_argument));
 	}
 
-	return build_return_expression(combined) || create_null_literal();
+	return build_return_expression(combined, false, type_only) || create_null_literal();
 }
 
 /**
@@ -4284,7 +4313,9 @@ export function wrap_edge_whitespace(nodes) {
 			}
 		}
 		if (value !== '') {
-			out.push(b.jsx_text(value, value));
+			// keep the location as we need it for @ autocomplete
+			// and perhaps other things in the future
+			out.push(b.jsx_text(value, value, node));
 		}
 		if (trailing) {
 			out.push(trailing);
@@ -4412,7 +4443,9 @@ function tsrx_node_to_jsx_expression(node, transform_context, in_jsx_child = fal
 				const render_nodes = wrap_edge_whitespace(
 					children.map((/** @type {any} */ child) => to_jsx_child(child, transform_context)),
 				);
-				expression = build_return_expression(render_nodes, in_jsx_child) || create_null_literal();
+				expression =
+					build_return_expression(render_nodes, in_jsx_child, transform_context.typeOnly) ||
+					create_null_literal();
 			} finally {
 				transform_context.inside_element_child = saved_inside_element_child;
 			}
@@ -5605,7 +5638,12 @@ function build_switch_with_lift(switch_node, transform_context) {
 			if (helper) {
 				return set_loc(
 					b.switch_case(original_case.test, [
-						create_component_return_statement([helper.component_element], original_case),
+						create_component_return_statement(
+							[helper.component_element],
+							original_case,
+							true,
+							transform_context.typeOnly,
+						),
 					]),
 					original_case,
 				);
@@ -5626,7 +5664,14 @@ function build_switch_with_lift(switch_node, transform_context) {
 
 			for (const child of own_body) {
 				if (is_loop_skip_return_statement(child)) {
-					case_body.push(create_component_return_statement(render_nodes, child));
+					case_body.push(
+						create_component_return_statement(
+							render_nodes,
+							child,
+							true,
+							transform_context.typeOnly,
+						),
+					);
 					has_terminal = true;
 					break;
 				}
@@ -5646,7 +5691,14 @@ function build_switch_with_lift(switch_node, transform_context) {
 
 			if (!has_terminal) {
 				if (render_nodes.length > 0) {
-					case_body.push(create_component_return_statement(render_nodes, original_case));
+					case_body.push(
+						create_component_return_statement(
+							render_nodes,
+							original_case,
+							true,
+							transform_context.typeOnly,
+						),
+					);
 				} else if (case_body.length > 0) {
 					case_body.push(create_null_return_statement());
 				} else if (has_terminator) {
@@ -6199,7 +6251,7 @@ function value_has_unmappable_jsx_loc(value) {
  * @param {boolean} [in_jsx_child]
  * @returns {any}
  */
-export function build_return_expression(render_nodes, in_jsx_child = false) {
+export function build_return_expression(render_nodes, in_jsx_child = false, type_only = false) {
 	if (render_nodes.length === 0) return null;
 	if (render_nodes.length === 1) {
 		const only = render_nodes[0];
@@ -6213,11 +6265,15 @@ export function build_return_expression(render_nodes, in_jsx_child = false) {
 			return only.expression;
 		}
 		if (only.type === 'JSXText') {
-			if (in_jsx_child) {
-				return set_loc(b.jsx_fragment([only]), only.loc ? only : undefined);
+			// Keep a single text child faithful to the source (e.g. `<>@</>`) — never
+			// promote it to a `{'text'}` string-literal expression, in either the
+			// type-only editor view or runtime codegen. At runtime we additionally drop a
+			// nullish/whitespace-only child so it renders nothing instead of emitting
+			// empty output.
+			if (!type_only && !in_jsx_child && (only.value ?? '').trim() === '') {
+				return null;
 			}
-			const value = (only.value ?? '').trim();
-			return b.literal(value, JSON.stringify(value), only);
+			return set_loc(b.jsx_fragment([only]), only.loc ? only : undefined);
 		}
 		return only;
 	}

package/src/transform/segments.js

@@ -53,6 +53,7 @@ import {
 	mapping_data,
 	mapping_data_verify_only,
 	mapping_data_verify_complete,
+	mapping_data_completion_only,
 	build_line_offsets,
 	get_mapping_from_node,
 } from '../source-map-utils.js';
@@ -806,7 +807,27 @@ export function convert_source_map_to_mappings(
 				}
 				return;
 			} else if (node.type === 'JSXText') {
-				// Text content, no tokens to collect
+				// A text node whose first non-whitespace char is `@` is an in-progress template
+				// directive (`@`, `@i`, `@if …`) the parser recovered as text; emit a completion-only
+				// mapping so the editor can still offer `@if`/`@for`/`@switch`/`@try` completions there.
+				//
+				// Use a token (resolved by matching generated CONTENT) rather than get_mapping_from_node.
+				// At a control-flow boundary the text node's source start maps to several generated
+				// positions — e.g. a preceding `@switch` value-IIFE's `return null; })()` tail AND the
+				// text itself — and get_mapping_from_node just takes the first, so its generated length
+				// spans the wrong region and the editor can't map a completion's edit back to source
+				// (it then drops the item). The token resolves to the position whose generated text
+				// matches the node's value, giving a well-formed same-length mapping. Ripple keeps text
+				// verbatim in to_ts, so `source` and `generated` are identical. Other text stays unmapped.
+				if (node.loc && typeof node.value === 'string' && node.value.trimStart().startsWith('@')) {
+					tokens.push({
+						source: node.value,
+						generated: node.value,
+						loc: node.loc,
+						metadata: {},
+						mappingData: mapping_data_completion_only,
+					});
+				}
 				return;
 			} else if (node.type === 'JSXCodeBlock') {
 				for (const statement of node.body) {

package/src/utils/builders.js

@@ -1369,15 +1369,18 @@ export function jsx_spread_attribute(argument, loc_info) {
 /**
  * @param {string} value
  * @param {string} raw
+ * @param {AST.NodeWithLocation} [loc_info]
  * @returns {ESTreeJSX.JSXText}
  */
-export function jsx_text(value, raw) {
-	return {
+export function jsx_text(value, raw, loc_info) {
+	const node = /** @type {ESTreeJSX.JSXText} */ ({
 		type: 'JSXText',
 		value,
 		raw,
 		metadata: { path: [] },
-	};
+	});
+
+	return set_location(node, loc_info);
 }
 
 /**

package/types/index.d.ts

@@ -1480,6 +1480,13 @@ export interface TransformServerState extends BaseState {
 	dev?: boolean;
 	return_flags?: Map<AST.ReturnStatement, { name: string; tracked: boolean }>;
 	template_child?: boolean;
+	/**
+	 * True while transforming the direct body of a control-flow branch
+	 * (`@if`/`@else`/`@for`/`@switch`/`@try`). A `<>…</>` in this position is
+	 * bracketed with hydration block markers so the client's fragment
+	 * `expression()` finds a matching boundary during hydration.
+	 */
+	control_flow_branch_body?: boolean;
 	skip_regular_blocks?: boolean;
 	in_regular_block?: boolean;
 	is_tsrx_element?: boolean;
@@ -1564,7 +1571,10 @@ export type TransformClientContext = Context<AST.Node, TransformClientState>;
 export type TransformServerContext = Context<AST.Node, TransformServerState>;
 export type AnalysisContext = Context<AST.Node, AnalysisState>;
 export type CommonContext = TransformClientContext | TransformServerContext | AnalysisContext;
-export type VisitorClientContext = TransformClientContext & { root?: boolean };
+export type VisitorClientContext = TransformClientContext & {
+	root?: boolean;
+	value_position?: boolean;
+};
 
 /**
  * Delegated event result