@tsrx/core 0.1.11 → 0.1.12

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
   "repository": {
     "type": "git",
@@ -82,10 +82,10 @@
     "vscode-languageserver-types": "^3.17.5",
     "vue": "3.6.0-beta.12",
     "vue-jsx-vapor": "^3.2.14",
-    "@tsrx/preact": "0.1.11",
-    "@tsrx/react": "0.2.11",
-    "@tsrx/solid": "0.1.11",
-    "@tsrx/vue": "0.1.11"
+    "@tsrx/preact": "0.1.12",
+    "@tsrx/react": "0.2.12",
+    "@tsrx/solid": "0.1.12",
+    "@tsrx/vue": "0.1.12"
   },
   "files": [
     "src",

package/src/plugin.js

@@ -275,6 +275,7 @@ export function TSRXPlugin(config) {
 			#componentDepth = 0;
 			#functionBodyDepth = 0;
 			#allowExpressionContainerTrailingSemicolon = false;
+			#tsxIslandExpressionDepth = 0;
 
 			/**
 			 * @type {Parse.Parser['finishNode']}
@@ -478,7 +479,7 @@ export function TSRXPlugin(config) {
 					}
 
 					if (this.type === tt.braceL) {
-						body.push(this.jsx_parseExpressionContainer());
+						body.push(this.#parseTsxIslandExpressionContainer());
 					} else if (this.type === tstt.jsxTagStart) {
 						body.push(super.jsx_parseElement());
 					} else {
@@ -492,6 +493,84 @@ export function TSRXPlugin(config) {
 				}
 			}
 
+			#parseTsxIslandExpressionContainer() {
+				this.#tsxIslandExpressionDepth++;
+				try {
+					if (!this.#isAtReservedTemplateExpressionContainer()) {
+						return this.jsx_parseExpressionContainer();
+					}
+
+					const node = /** @type {ESTreeJSX.JSXExpressionContainer} */ (this.startNode());
+					this.next();
+					this.next();
+					const expression = /** @type {AST.Expression | ESTreeJSX.JSXEmptyExpression} */ (
+						/** @type {unknown} */ (this.parseElement())
+					);
+					node.expression = expression;
+					this.#popTokenContextsAfterTemplateExpressionElement(
+						/** @type {AST.Tsx | AST.Tsrx | AST.TsxCompat} */ (/** @type {unknown} */ (expression)),
+					);
+					this.expect(tt.braceR);
+					return this.finishNode(node, 'JSXExpressionContainer');
+				} finally {
+					this.#tsxIslandExpressionDepth--;
+				}
+			}
+
+			#isAtReservedTemplateExpressionContainer() {
+				if (this.type !== tt.braceL) {
+					return false;
+				}
+
+				let index = this.start + 1;
+				while (index < this.input.length) {
+					const ch = this.input.charCodeAt(index);
+					if (
+						ch === CharCode.space ||
+						ch === CharCode.tab ||
+						ch === CharCode.lineFeed ||
+						ch === CharCode.carriageReturn
+					) {
+						index++;
+					} else {
+						break;
+					}
+				}
+
+				if (this.input.charCodeAt(index) !== CharCode.lessThan) {
+					return false;
+				}
+
+				return this.#isReservedTemplateTagNameStart(index + 1);
+			}
+
+			/**
+			 * @param {number} index
+			 */
+			#isReservedTemplateTagNameStart(index) {
+				const char_after_tsx = this.input.charCodeAt(index + 3);
+				const char_after_tsrx = this.input.charCodeAt(index + 4);
+				return (
+					(this.input.startsWith('tsx', index) &&
+						(index + 3 >= this.input.length ||
+							char_after_tsx === CharCode.greaterThan ||
+							char_after_tsx === CharCode.slash ||
+							char_after_tsx === CharCode.space ||
+							char_after_tsx === CharCode.tab ||
+							char_after_tsx === CharCode.lineFeed ||
+							char_after_tsx === CharCode.carriageReturn ||
+							char_after_tsx === CharCode.colon)) ||
+					(this.input.startsWith('tsrx', index) &&
+						(index + 4 >= this.input.length ||
+							char_after_tsrx === CharCode.greaterThan ||
+							char_after_tsrx === CharCode.slash ||
+							char_after_tsrx === CharCode.space ||
+							char_after_tsrx === CharCode.tab ||
+							char_after_tsrx === CharCode.lineFeed ||
+							char_after_tsrx === CharCode.carriageReturn))
+				);
+			}
+
 			/**
 			 * @param {AST.Tsx | AST.TsxCompat} island
 			 */
@@ -2202,10 +2281,11 @@ export function TSRXPlugin(config) {
 
 			/** @type {Parse.Parser['jsx_readToken']} */
 			jsx_readToken() {
-				const inside_tsx_compat = this.#path.findLast(
-					(n) => n.type === 'TsxCompat' || n.type === 'Tsx',
+				const current_template_node = this.#path.findLast(
+					(n) =>
+						n.type === 'Element' || n.type === 'Tsx' || n.type === 'Tsrx' || n.type === 'TsxCompat',
 				);
-				if (inside_tsx_compat) {
+				if (current_template_node?.type === 'TsxCompat' || current_template_node?.type === 'Tsx') {
 					return super.jsx_readToken();
 				}
 				let out = '',
@@ -2385,12 +2465,6 @@ export function TSRXPlugin(config) {
 			 * @type {Parse.Parser['jsx_parseElement']}
 			 */
 			jsx_parseElement() {
-				const inside_tsx = this.#path.findLast((n) => n.type === 'TsxCompat' || n.type === 'Tsx');
-				if (inside_tsx) {
-					// Inside tsx/tsx:*, let acorn-jsx handle it normally
-					return super.jsx_parseElement();
-				}
-
 				// Check if the element being parsed IS a <tsx>, <tsrx>, or <tsx:*> tag
 				// Current token is jsxTagStart, this.end is position after '<'
 				const tag_name_start = this.end;
@@ -2417,6 +2491,20 @@ export function TSRXPlugin(config) {
 						char_after_tsrx === CharCode.lineFeed ||
 						char_after_tsrx === CharCode.carriageReturn);
 
+				const current_template_node = this.#path.findLast(
+					(n) =>
+						n.type === 'Element' || n.type === 'Tsx' || n.type === 'Tsrx' || n.type === 'TsxCompat',
+				);
+				if (
+					(current_template_node?.type === 'TsxCompat' || current_template_node?.type === 'Tsx') &&
+					!is_tsrx_tag
+				) {
+					// Inside tsx/tsx:*, let acorn-jsx handle regular TSX tags normally.
+					// Nested <tsrx> still needs Ripple's native template parser so it
+					// can lower through the same path as <tsrx> in component bodies.
+					return super.jsx_parseElement();
+				}
+
 				if (is_fragment_tag || is_tsx_tag || is_tsrx_tag) {
 					// Use Ripple's parseElement to create a Tsx/Tsrx/TsxCompat node.
 					// Bare fragments (<></>) are shorthand for <tsx>...</tsx>.
@@ -2424,9 +2512,21 @@ export function TSRXPlugin(config) {
 					const parsed = /** @type {import('estree-jsx').JSXElement} */ (
 						/** @type {unknown} */ (this.parseElement())
 					);
-					this.#popTokenContextsAfterTemplateExpressionElement(
-						/** @type {AST.Tsx | AST.Tsrx | AST.TsxCompat} */ (/** @type {unknown} */ (parsed)),
-					);
+					if (
+						current_template_node?.type !== 'Tsx' &&
+						current_template_node?.type !== 'TsxCompat'
+					) {
+						this.#popTokenContextsAfterTemplateExpressionElement(
+							/** @type {AST.Tsx | AST.Tsrx | AST.TsxCompat} */ (/** @type {unknown} */ (parsed)),
+						);
+					} else if (this.type === tt.braceR && this.curContext() === tstc.tc_expr) {
+						if (this.#tsxIslandExpressionDepth === 0) {
+							// Acorn still owns the surrounding JSX expression container.
+							// Keep a block-expression context for its closing `}` so the
+							// parent TSX tag continues tokenizing as JSX afterward.
+							this.context.push(b_expr);
+						}
+					}
 					return parsed;
 				}
 
@@ -2887,9 +2987,24 @@ export function TSRXPlugin(config) {
 			parseTemplateBody(body) {
 				const inside_func =
 					this.context.some((n) => n.token === 'function') || this.scopeStack.length > 1;
-				const inside_tsx_island = this.#path.findLast(
-					(n) => n.type === 'Tsx' || n.type === 'TsxCompat',
+				const current_template_node = this.#path.findLast(
+					(n) =>
+						n.type === 'Element' || n.type === 'Tsx' || n.type === 'Tsrx' || n.type === 'TsxCompat',
 				);
+				const inside_tsx_island =
+					current_template_node?.type === 'Tsx' || current_template_node?.type === 'TsxCompat'
+						? current_template_node
+						: null;
+
+				if (current_template_node?.type === 'Tsrx' && this.type === tstt.jsxText) {
+					while (this.curContext() === tstc.tc_expr) {
+						this.context.pop();
+					}
+					this.pos = this.start;
+					this.next();
+					this.parseTemplateBody(body);
+					return;
+				}
 
 				if (!inside_func) {
 					if (this.type.label === 'continue') {

package/src/scope.js

@@ -205,11 +205,18 @@ export function create_scopes(ast, root, parent, error_options) {
 			for (const declarator of node.declarations) {
 				/** @type {Binding[]} */
 				const bindings = [];
+				const initial = /** @type {AST.Expression | AST.Tsx | AST.Tsrx | null} */ (declarator.init);
 
 				state.scope.declarators.set(declarator, bindings);
 
 				for (const id of extract_identifiers(declarator.id)) {
-					const binding = state.scope.declare(id, 'normal', node.kind, declarator.init);
+					const binding = state.scope.declare(id, 'normal', node.kind, initial);
+					if (initial?.type === 'Tsx' || initial?.type === 'Tsrx') {
+						binding.metadata = {
+							...(binding.metadata ?? {}),
+							is_template_value: true,
+						};
+					}
 					bindings.push(binding);
 				}
 			}

package/src/source-map-utils.js

@@ -294,6 +294,25 @@ export function build_line_offsets(text) {
 	return offsets;
 }
 
+/**
+ * ONLY USE THIS FOR TESTS
+ *
+ * @param {CodeMapping[]} mappings
+ * @param {number} source_offset
+ * @param {number} generated_offset
+ * @param {number} length
+ * @returns {CodeMapping | undefined}
+ */
+export function find_exact_mapping(mappings, source_offset, generated_offset, length) {
+	return mappings.find(
+		(mapping) =>
+			mapping.sourceOffsets[0] === source_offset &&
+			mapping.generatedOffsets[0] === generated_offset &&
+			mapping.lengths[0] === length &&
+			mapping.generatedLengths[0] === length,
+	);
+}
+
 /**
  * DO NOT EXPORT THIS FUNCTION!
  * THE FIX NEEDS TO HAPPEN IN THE TRANSFORMER, SEGMENTS OR PARSER

package/src/transform/jsx/helpers.js

@@ -221,6 +221,8 @@ export function tsx_with_ts_locations() {
 		// JS nodes whose esrap printer emits no location marker, causing
 		// segments.js get_mapping_from_node() to throw when it asks for the
 		// generated position of the node's start (or end).
+		'ClassDeclaration',
+		'ClassExpression',
 		'IfStatement',
 		'NewExpression',
 		'MemberExpression',

package/src/transform/segments.js

@@ -345,7 +345,7 @@ function extract_classes(node, src_to_gen_map, gen_line_offsets, src_line_offset
  * @param {PostProcessingChanges } post_processing_changes - Optional post-processing changes
  * @param {number[]} line_offsets - Pre-computed line offsets array for generated code
  * @param {CompileError[]} [errors]
- * @returns {Omit<VolarMappingsResult, 'errors'>}
+ * @returns {Omit<VolarMappingsResult, 'errors' | 'sourceAst'>}
  */
 export function convert_source_map_to_mappings(
 	ast,
@@ -1528,6 +1528,18 @@ export function convert_source_map_to_mappings(
 				}
 				return;
 			} else if (node.type === 'ClassDeclaration' || node.type === 'ClassExpression') {
+				if (node.loc) {
+					tokens.push({
+						source: 'class',
+						generated: 'class',
+						loc: {
+							start: { line: node.loc.start.line, column: node.loc.start.column },
+							end: { line: node.loc.start.line, column: node.loc.start.column + 'class'.length },
+						},
+						metadata: {},
+					});
+				}
+
 				// Visit in source order: id, superClass, body
 				if (node.id) {
 					visit(node.id);
@@ -2402,6 +2414,7 @@ export function create_volar_mappings_result({
 
 	return {
 		...result,
+		sourceAst: ast_from_source,
 		errors,
 	};
 }

package/types/index.d.ts

@@ -1247,7 +1247,9 @@ export interface Binding {
 		| AST.FunctionDeclaration
 		| AST.ClassDeclaration
 		| AST.ImportDeclaration
-		| AST.TSModuleDeclaration;
+		| AST.TSModuleDeclaration
+		| AST.Tsx
+		| AST.Tsrx;
 	/** Whether this binding has been reassigned */
 	reassigned: boolean;
 	/** Whether this binding has been mutated (property access) */
@@ -1261,6 +1263,7 @@ export interface Binding {
 		is_dynamic_component?: boolean;
 		pattern?: AST.Identifier;
 		is_ripple_object?: boolean;
+		is_template_value?: boolean;
 	} | null;
 	/** Kind of binding */
 	kind: BindingKind;
@@ -1340,7 +1343,9 @@ export interface ScopeInterface {
 			| AST.FunctionDeclaration
 			| AST.ClassDeclaration
 			| AST.ImportDeclaration
-			| AST.TSModuleDeclaration,
+			| AST.TSModuleDeclaration
+			| AST.Tsx
+			| AST.Tsrx,
 	): Binding;
 	/** Get binding by name */
 	get(name: string): Binding | null;
@@ -1416,6 +1421,7 @@ export interface TransformServerState extends BaseState {
 	template_child?: boolean;
 	skip_regular_blocks?: boolean;
 	in_regular_block?: boolean;
+	jsx_to_tsrx_element?: boolean;
 }
 
 export type UpdateList = Array<
@@ -1450,6 +1456,7 @@ export interface TransformClientState extends BaseState {
 	skip_children_traversal: boolean;
 	return_flags?: Map<AST.ReturnStatement, { name: string; tracked: boolean }>;
 	is_tsrx_element?: boolean;
+	jsx_to_tsrx_element?: boolean;
 }
 
 /** Override zimmerframe types and provide our own */
@@ -1585,6 +1592,7 @@ export interface VolarMappingsResult {
 	mappings: CodeMapping[];
 	cssMappings: CodeMapping[];
 	errors: CompileError[];
+	sourceAst: AST.Program;
 }
 
 /**