@tsrx/core 0.1.4 → 0.1.6

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "repository": {
     "type": "git",
@@ -31,9 +31,16 @@
       "types": "./types/runtime/ref.d.ts",
       "default": "./src/runtime/ref.js"
     },
+    "./runtime": {
+      "types": "./types/runtime/index.d.ts",
+      "default": "./src/runtime/index.js"
+    },
     "./runtime/*": "./src/runtime/*.js",
     "./test-harness/source-mappings": "./tests/shared/source-mappings.js",
-    "./test-harness/compile": "./tests/shared/compile.js"
+    "./test-harness/compile": "./tests/shared/compile.js",
+    "./test-harness/runtime/*": "./tests/shared/runtime/*.js",
+    "./test-harness/runtime/*.js": "./tests/shared/runtime/*.js",
+    "./test-harness/runtime/*.tsrx": "./tests/shared/runtime/*.tsrx"
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.5",
@@ -42,17 +49,28 @@
     "@types/estree-jsx": "^1.0.5",
     "@types/estree": "^1.0.8",
     "acorn": "^8.15.0",
-    "esrap": "^2.1.0",
+    "esrap": "^2.2.7",
     "is-reference": "^3.0.3",
     "magic-string": "^0.30.18",
     "zimmerframe": "^1.1.2"
   },
   "devDependencies": {
+    "@solidjs/web": "2.0.0-beta.7",
     "@types/node": "^24.3.0",
     "@typescript-eslint/types": "^8.40.0",
-    "typescript": "^5.9.3",
     "@volar/language-core": "~2.4.28",
-    "vscode-languageserver-types": "^3.17.5"
+    "preact": "^10.27.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "solid-js": "2.0.0-beta.7",
+    "typescript": "^5.9.3",
+    "vscode-languageserver-types": "^3.17.5",
+    "vue": "3.6.0-beta.10",
+    "vue-jsx-vapor": "^3.2.12",
+    "@tsrx/preact": "0.1.6",
+    "@tsrx/react": "0.2.6",
+    "@tsrx/solid": "0.1.6",
+    "@tsrx/vue": "0.1.6"
   },
   "files": [
     "src",

package/src/diagnostics.js

@@ -4,4 +4,5 @@ export const DIAGNOSTIC_CODES = {
 	FUNCTION_COMPONENT_SYNTAX: 'tsrx-function-component-syntax',
 	UNCLOSED_TAG: 'tsrx-unclosed-tag',
 	MISMATCHED_CLOSING_TAG: 'tsrx-mismatched-closing-tag',
+	TEMPLATE_EXPRESSION_TRAILING_SEMICOLON: 'tsrx-template-expression-trailing-semicolon',
 };

package/src/index.js

@@ -142,6 +142,9 @@ export { escape, escape_script as escapeScript } from './utils/escaping.js';
 // Transform
 export {
 	add_jsx_setup_declaration as addJsxSetupDeclaration,
+	clone_switch_helper_invocation as cloneSwitchHelperInvocation,
+	collect_param_bindings as collectParamBindings,
+	collect_statement_bindings as collectStatementBindings,
 	createJsxTransform,
 	CREATE_REF_PROP_INTERNAL_NAME,
 	extract_jsx_setup_declarations as extractJsxSetupDeclarations,
@@ -149,6 +152,7 @@ export {
 	MERGE_REFS_INTERNAL_NAME,
 	merge_duplicate_refs as mergeDuplicateRefs,
 	NORMALIZE_SPREAD_PROPS_INTERNAL_NAME,
+	plan_switch_lift as planSwitchLift,
 	return_value_body_to_expression as returnValueBodyToExpression,
 	rewrite_loop_continues_to_bare_returns as rewriteLoopContinuesToBareReturns,
 	to_jsx_attribute as toJsxAttribute,
@@ -165,13 +169,16 @@ export {
 	clone_expression_node,
 	clone_identifier,
 	clone_jsx_name,
+	contains_component_jsx,
 	create_compile_error,
 	create_generated_identifier,
 	create_null_literal,
+	expand_switch_cases_for_fallthrough,
 	flatten_switch_consequent,
 	get_for_of_iteration_params,
 	identifier_to_jsx_name,
 	is_bare_render_expression,
+	is_component_jsx_name,
 	is_dynamic_element_id,
 	is_jsx_child,
 	set_loc,

package/src/plugin.js

@@ -224,6 +224,7 @@ export function TSRXPlugin(config) {
 			#filename = null;
 			#componentDepth = 0;
 			#functionBodyDepth = 0;
+			#allowExpressionContainerTrailingSemicolon = false;
 
 			/**
 			 * @type {Parse.Parser['finishNode']}
@@ -352,7 +353,14 @@ export function TSRXPlugin(config) {
 			}
 
 			#parseNativeTemplateExpressionContainer() {
-				const node = this.jsx_parseExpressionContainer();
+				const allow_trailing_semicolon = this.#allowExpressionContainerTrailingSemicolon;
+				this.#allowExpressionContainerTrailingSemicolon = true;
+				let node;
+				try {
+					node = this.jsx_parseExpressionContainer();
+				} finally {
+					this.#allowExpressionContainerTrailingSemicolon = allow_trailing_semicolon;
+				}
 				// Keep JSXEmptyExpression as-is (for prettier to handle comments)
 				// but convert other expressions to native TSRX child nodes.
 				if (node.expression.type !== 'JSXEmptyExpression') {
@@ -644,6 +652,18 @@ export function TSRXPlugin(config) {
 					ctx.length = ci - 1;
 					return;
 				}
+				// Statement-bodied `<tsrx>` attributes can leave the attribute's
+				// expression contexts above the still-open JSX tag context. Strip
+				// those so a following `/>` stays in JSX opening-tag mode.
+				if (
+					this.type === tt.braceR &&
+					top === tstc.tc_expr &&
+					second === b_expr &&
+					ctx[ci - 2] === tstc.tc_oTag
+				) {
+					ctx.length = ci - 1;
+					return;
+				}
 				// Closing token after the template at expression position. For `}`
 				// only pop if it actually closes this `b_expr` — otherwise the
 				// brace targets an inner callback/object body that should pop it
@@ -1771,6 +1791,16 @@ export function TSRXPlugin(config) {
 						'"style" is a TSRX keyword and must be used in the form {style "class_name"}',
 					);
 				}
+				if (this.#allowExpressionContainerTrailingSemicolon && this.type === tt.semi) {
+					if (this.#collect) {
+						this.#report_recoverable_error(
+							this.start,
+							'TSRX expression containers do not use semicolons. Remove this semicolon.',
+							DIAGNOSTIC_CODES.TEMPLATE_EXPRESSION_TRAILING_SEMICOLON,
+						);
+					}
+					this.next();
+				}
 				this.expect(tt.braceR);
 
 				return this.finishNode(node, 'JSXExpressionContainer');

package/src/runtime/index.js

@@ -0,0 +1,110 @@
+/**
+ * @template T
+ * @template U
+ * @param {Iterable<T> | Iterator<T>} iterable
+ * @param {(item: T, index: number, is_last: boolean) => U} fn
+ * @param {() => U | U[]} [tail]
+ * @returns {U[]}
+ */
+export function map_iterable(iterable, fn, tail) {
+	if (Array.isArray(iterable)) {
+		return map_array(iterable, fn, tail);
+	}
+
+	/** @type {Iterator<T>} */
+	var iterator;
+	var iterable_prop = /** @type {Iterable<T>} */ (iterable)[Symbol.iterator];
+
+	if (typeof iterable_prop === 'function') {
+		iterator = iterable_prop.call(iterable);
+	} else if (typeof (/** @type {Iterator<T>} */ (iterable).next) === 'function') {
+		iterator = Iterator.from(iterable);
+	} else {
+		throw new TypeError('The loop target has to be an Iterable');
+	}
+
+	var current = iterator.next();
+	if (current.done) {
+		if (!tail) {
+			return [];
+		}
+		var tail_value = tail();
+		if (Array.isArray(tail_value)) {
+			return tail_value;
+		}
+		return [tail_value];
+	}
+
+	var index = 0;
+	var result = [];
+	while (true) {
+		var next = iterator.next();
+		var value = fn(current.value, index++, !!next.done);
+		if (Array.isArray(value)) {
+			for (var j = 0; j < value.length; j++) {
+				result.push(value[j]);
+			}
+		} else {
+			result.push(value);
+		}
+		if (next.done) {
+			break;
+		}
+		current = next;
+	}
+	if (tail) {
+		var tail_value = tail();
+		if (Array.isArray(tail_value)) {
+			for (var j = 0; j < tail_value.length; j++) {
+				result.push(tail_value[j]);
+			}
+		} else {
+			result.push(tail_value);
+		}
+	}
+	return result;
+}
+
+/**
+ * @template T
+ * @template U
+ * @param {Array<T>} array
+ * @param {(item: T, index: number, is_last: boolean) => U} fn
+ * @param {() => U | U[]} [tail]
+ * @returns {U[]}
+ */
+function map_array(array, fn, tail) {
+	var length = array.length;
+	if (length === 0) {
+		if (!tail) {
+			return [];
+		}
+		var tail_value = tail();
+		if (Array.isArray(tail_value)) {
+			return tail_value;
+		}
+		return [tail_value];
+	}
+	var result = [];
+	for (var i = 0; i < length; i++) {
+		var value = fn(array[i], i, i === length - 1);
+		if (Array.isArray(value)) {
+			for (var j = 0; j < value.length; j++) {
+				result.push(value[j]);
+			}
+		} else {
+			result.push(value);
+		}
+	}
+	if (tail) {
+		var tail_value = tail();
+		if (Array.isArray(tail_value)) {
+			for (var j = 0; j < tail_value.length; j++) {
+				result.push(tail_value[j]);
+			}
+		} else {
+			result.push(tail_value);
+		}
+	}
+	return result;
+}

package/src/source-map-utils.js

@@ -17,10 +17,15 @@
  *     css?: AST.Element['metadata']['css']
  *   },
  * }} CodePosition
+ * @typedef {{
+ *   column: number,
+ *   position: CodePosition,
+ * }} SourceLineGeneratedPosition
  */
 
 /** @typedef {Map<string, CodePosition[]>} CodeToGeneratedMap */
 /** @typedef {Map<string, {line: number, column: number}[]>} GeneratedToSourceMap */
+/** @typedef {Map<number, SourceLineGeneratedPosition[]>} SourceLineGeneratedMap */
 
 import { decode } from '@jridgewell/sourcemap-codec';
 
@@ -83,18 +88,22 @@ export const offset_to_line_col = (offset, line_offsets) => {
  * @param {PostProcessingChanges} post_processing_changes - Optional post-processing changes to apply
  * @param {LineOffsets} line_offsets - Pre-computed line offsets array
  * @param {string} generated_code - The final generated code (after post-processing)
- * @returns {[CodeToGeneratedMap, GeneratedToSourceMap]} Tuple of [source-to-generated map, generated-to-source map]
+ * @param {boolean} [include_source_line_generated_map] - Whether to build the optional source-line predecessor lookup
+ * @returns {[CodeToGeneratedMap, GeneratedToSourceMap, SourceLineGeneratedMap | null]} Tuple of [source-to-generated map, generated-to-source map, source-line generated map]
  */
 export function build_src_to_gen_map(
 	source_map,
 	post_processing_changes,
 	line_offsets,
 	generated_code,
+	include_source_line_generated_map = false,
 ) {
 	/** @type {CodeToGeneratedMap} */
 	const map = new Map();
 	/** @type {GeneratedToSourceMap} */
 	const reverse_map = new Map();
+	/** @type {SourceLineGeneratedMap | null} */
+	const source_line_generated_map = include_source_line_generated_map ? new Map() : null;
 
 	// Decode the VLQ-encoded mappings string
 	const decoded = decode(source_map.mappings);
@@ -192,6 +201,14 @@ export function build_src_to_gen_map(
 				map.set(key, []);
 			}
 			/** @type {CodePosition[]} */ (map.get(key)).push(gen_pos);
+			if (source_line_generated_map) {
+				if (!source_line_generated_map.has(segment.sourceLine)) {
+					source_line_generated_map.set(segment.sourceLine, []);
+				}
+				/** @type {SourceLineGeneratedPosition[]} */ (
+					source_line_generated_map.get(segment.sourceLine)
+				).push({ column: segment.sourceColumn, position: gen_pos });
+			}
 
 			// Store reverse mapping (generated to source)
 			const gen_key = `${gen_pos.line}:${gen_pos.column}`;
@@ -206,7 +223,7 @@ export function build_src_to_gen_map(
 		}
 	}
 
-	return [map, reverse_map];
+	return [map, reverse_map, source_line_generated_map];
 }
 
 /**

package/src/transform/jsx/ast-builders.js

@@ -162,6 +162,74 @@ export function identifier_to_jsx_name(id) {
 	return id;
 }
 
+/**
+ * A JSX tag name refers to a *component* (rather than a host/DOM tag) iff:
+ * - it's a `JSXIdentifier` whose first character is uppercase (the convention
+ *   every framework's JSX runtime keys off — `<div>` is a host element,
+ *   `<Foo>` is a component), or
+ * - it's a `JSXMemberExpression` (e.g. `<Icons.Button />`).
+ *
+ * Used by platforms that veto static-hoisting of component JSX (Vue, Solid)
+ * and by core's narrower bare-component-invocation predicate.
+ *
+ * @param {any} name
+ * @returns {boolean}
+ */
+export function is_component_jsx_name(name) {
+	if (!name || typeof name !== 'object') {
+		return false;
+	}
+
+	if (name.type === 'JSXIdentifier') {
+		const first = name.name?.[0];
+		return first != null && first >= 'A' && first <= 'Z';
+	}
+
+	if (name.type === 'JSXMemberExpression') {
+		return true;
+	}
+
+	return false;
+}
+
+/**
+ * Does this JSX subtree contain any component-shaped element (anywhere —
+ * including nested under host elements or inside expression containers)?
+ * Vue and Solid use this as their `canHoistStaticNode` predicate: hoisting a
+ * subtree that invokes a component into a module-level constant pins that
+ * component instance to module identity, which doesn't help either framework
+ * the way it helps React, so it's wasted output.
+ *
+ * @param {any} node
+ * @returns {boolean}
+ */
+export function contains_component_jsx(node) {
+	if (!node || typeof node !== 'object') {
+		return false;
+	}
+
+	if (node.type === 'JSXElement') {
+		if (is_component_jsx_name(node.openingElement?.name)) {
+			return true;
+		}
+		return node.children?.some(contains_component_jsx) ?? false;
+	}
+
+	if (node.type === 'JSXFragment') {
+		return node.children?.some(contains_component_jsx) ?? false;
+	}
+
+	if (node.type === 'JSXExpressionContainer') {
+		return contains_component_jsx(node.expression);
+	}
+
+	if (Array.isArray(node)) {
+		return node.some(contains_component_jsx);
+	}
+
+	return false;
+}
+
 /**
  * @param {any} node
  * @returns {boolean}
@@ -302,6 +370,58 @@ export function flatten_switch_consequent(consequent) {
 	return result;
 }
 
+/**
+ * Compute fall-through expansions for each `case` in a `switch`. JavaScript
+ * `switch` semantics say that once a case body executes, execution continues
+ * into the bodies of subsequent cases until a `break` or terminal `return` is
+ * hit. We pre-compute, per case, the flat list of statements that should run
+ * when that case is the entry point — so downstream targets (which render each
+ * case independently rather than executing fall-through at runtime) still
+ * produce the right output.
+ *
+ * Walking right-to-left lets each case reuse the next case's already-expanded
+ * tail without recomputation. Downstream nodes are deep-cloned when absorbed
+ * so each case's expanded body owns its own AST subtree.
+ *
+ * @param {any[]} cases
+ * @returns {Array<{ test: any, body: any[], source: any }>}
+ */
+export function expand_switch_cases_for_fallthrough(cases) {
+	/** @type {Array<{ test: any, body: any[], source: any }>} */
+	const expanded = new Array(cases.length);
+	for (let i = cases.length - 1; i >= 0; i--) {
+		const consequent = flatten_switch_consequent(cases[i].consequent || []);
+		const body = [];
+		let has_terminal = false;
+		for (const child of consequent) {
+			if (child.type === 'BreakStatement') {
+				has_terminal = true;
+				break;
+			}
+			body.push(child);
+			if (child.type === 'ReturnStatement') {
+				has_terminal = true;
+				break;
+			}
+		}
+		// Strip locations from cloned downstream nodes. Only the original case
+		// (one entry up the chain) keeps `loc`/`start`/`end`; clones inlined
+		// into upstream cases would otherwise point editor IntelliSense at the
+		// same source range multiple times (one hover/go-to-definition per
+		// fall-through entry point), producing double/triple results in Volar.
+		const downstream =
+			!has_terminal && i + 1 < cases.length
+				? expanded[i + 1].body.map((n) => clone_expression_node(n, false))
+				: [];
+		expanded[i] = {
+			test: cases[i].test,
+			body: [...body, ...downstream],
+			source: cases[i],
+		};
+	}
+	return expanded;
+}
+
 /**
  * @param {AST.Expression | null | undefined} expression
  * @returns {boolean}