@tsrx/core 0.0.21 → 0.0.23

package/README.md

@@ -42,7 +42,7 @@ The TSRX website is the canonical source for language documentation:
 - [Getting Started](https://tsrx.dev/getting-started) — install TSRX for React,
   Preact, Solid, Vue, or Ripple and configure editor/AI tooling.
 - [Features](https://tsrx.dev/features) — examples of components, statement
-  templates, control flow, scoped styles, server blocks, and lazy destructuring.
+  templates, control flow, scoped styles, submodules, and lazy destructuring.
 - [Specification](https://tsrx.dev/specification) — the current grammar and
   parser-level semantics.
 

package/package.json

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

package/src/identifier-utils.js

@@ -1,6 +1,5 @@
 export const IDENTIFIER_OBFUSCATION_PREFIX = '_$_';
-export const STYLE_IDENTIFIER = IDENTIFIER_OBFUSCATION_PREFIX + encode_utf16_char('#') + 'style';
-export const SERVER_IDENTIFIER = IDENTIFIER_OBFUSCATION_PREFIX + encode_utf16_char('#') + 'server';
+export const SERVER_IDENTIFIER = IDENTIFIER_OBFUSCATION_PREFIX + 'server_$_';
 export const CSS_HASH_IDENTIFIER = IDENTIFIER_OBFUSCATION_PREFIX + 'hash';
 
 const DECODE_UTF16_REGEX = /_u([0-9a-fA-F]{4})_/g;

package/src/index.js

@@ -50,7 +50,6 @@ export {
 // Identifier utils
 export {
 	IDENTIFIER_OBFUSCATION_PREFIX,
-	STYLE_IDENTIFIER,
 	SERVER_IDENTIFIER,
 	CSS_HASH_IDENTIFIER,
 	obfuscate_identifier as obfuscateIdentifier,

package/src/plugin.js

@@ -189,7 +189,7 @@ function previous_word_before(input, pos) {
 /**
  * Acorn parser plugin for Ripple syntax extensions.
  * Adds support for: component declarations, &[]/&{} lazy destructuring,
- * #server blocks, #style identifiers, and enhanced JSX handling.
+ * submodule imports, TSRX directives, and enhanced JSX handling.
  *
  * @param {import('../types/index').TSRXPluginConfig} [config] - Plugin configuration
  * @returns {(Parser: Parse.ParserConstructor) => Parse.ParserConstructor} Parser extension function
@@ -221,6 +221,22 @@ export function TSRXPlugin(config) {
 			#filename = null;
 			#functionBodyDepth = 0;
 
+			/**
+			 * @type {Parse.Parser['finishNode']}
+			 */
+			finishNode(node, type) {
+				const finished = super.finishNode(node, type);
+				if (type === 'TSModuleDeclaration') {
+					const start = /** @type {number} */ (finished.start);
+					const source = this.input.slice(start, start + 'namespace'.length);
+					finished.metadata ??= { path: [] };
+					finished.metadata.module_keyword = source.startsWith('namespace')
+						? 'namespace'
+						: 'module';
+				}
+				return finished;
+			}
+
 			/**
 			 * @param {Parse.Options} options
 			 * @param {string} input
@@ -234,6 +250,13 @@ export function TSRXPlugin(config) {
 				this.#filename = tsrx_options?.filename || null;
 			}
 
+			#resetTokenStartToCurrentPosition() {
+				if (this.start !== this.pos) {
+					this.start = this.pos;
+					this.startLoc = this.curPosition();
+				}
+			}
+
 			#previousNonWhitespaceChar() {
 				let index = this.pos - 1;
 				while (index >= 0) {
@@ -820,44 +843,6 @@ export function TSRXPlugin(config) {
 					}
 				}
 
-				if (code === 35) {
-					// # character
-					if (this.pos + 1 < this.input.length) {
-						/** @param {string} value */
-						const startsWith = (value) =>
-							this.input.slice(this.pos, this.pos + value.length) === value;
-						/** @param {number} length */
-						const char_after = (length) =>
-							this.pos + length < this.input.length ? this.input.charCodeAt(this.pos + length) : -1;
-						/** @param {number} ch */
-						const is_ripple_delimiter = (ch) =>
-							ch === 40 || // (
-							ch === 41 || // )
-							ch === 60 || // <
-							ch === 46 || // .
-							ch === 44 || // ,
-							ch === 59 || // ;
-							ch === 91 || // [
-							ch === 93 || // ]
-							ch === 123 || // {
-							ch === 125 || // }
-							ch === 32 || // space
-							ch === 9 || // tab
-							ch === 10 || // newline
-							ch === 13 || // carriage return
-							ch === -1; // EOF
-
-						if (startsWith('#server') && is_ripple_delimiter(char_after(7))) {
-							this.pos += 7;
-							return this.finishToken(tt.name, '#server');
-						}
-
-						if (startsWith('#style') && is_ripple_delimiter(char_after(6))) {
-							this.pos += 6;
-							return this.finishToken(tt.name, '#style');
-						}
-					}
-				}
 				this.#allowTagStartAfterDoubleQuotedText = false;
 				return super.getTokenFromCode(code);
 			}
@@ -970,22 +955,6 @@ export function TSRXPlugin(config) {
 			 * @type {Parse.Parser['parseExprAtom']}
 			 */
 			parseExprAtom(refDestructuringErrors, forNew, forInit) {
-				const lookahead_type = this.lookahead().type;
-				const is_next_call_token = lookahead_type === tt.parenL || lookahead_type === tt.relational;
-
-				// Check if this is #server identifier for server function calls
-				if (this.type === tt.name && this.value === '#server') {
-					const node = this.startNode();
-					this.next();
-					return /** @type {AST.ServerIdentifier} */ (this.finishNode(node, 'ServerIdentifier'));
-				}
-
-				if (this.type === tt.name && this.value === '#style') {
-					const node = this.startNode();
-					this.next();
-					return /** @type {AST.StyleIdentifier} */ (this.finishNode(node, 'StyleIdentifier'));
-				}
-
 				// Check if this is a component expression (e.g., in object literal values)
 				if (this.type === tt.name && this.value === 'component') {
 					return this.parseComponent();
@@ -1015,9 +984,9 @@ export function TSRXPlugin(config) {
 
 			/**
 			 * Override checkLocalExport to check all scopes in the scope stack.
-			 * This is needed because server blocks create nested scopes, but exports
-			 * from within server blocks should still be valid if the identifier is
-			 * declared in the server block's scope (not just the top-level module scope).
+			 * This is needed because submodules create nested scopes, but exports
+			 * from within submodules should still be valid if the identifier is
+			 * declared in the submodule scope (not just the top-level module scope).
 			 * @type {Parse.Parser['checkLocalExport']}
 			 */
 			checkLocalExport(id) {
@@ -1036,31 +1005,6 @@ export function TSRXPlugin(config) {
 				this.undefinedExports[name] = id;
 			}
 
-			/**
-			 * @type {Parse.Parser['parseServerBlock']}
-			 */
-			parseServerBlock() {
-				const node = /** @type {AST.ServerBlock} */ (this.startNode());
-				this.next();
-
-				const body = /** @type {AST.ServerBlockStatement} */ (this.startNode());
-				node.body = body;
-				body.body = [];
-
-				this.expect(tt.braceL);
-				this.enterScope(0);
-				while (this.type !== tt.braceR) {
-					const stmt = /** @type {AST.Statement} */ (this.parseStatement(null, true));
-					body.body.push(stmt);
-				}
-				this.next();
-				this.exitScope();
-				this.finishNode(body, 'BlockStatement');
-
-				this.awaitPos = 0;
-				return this.finishNode(node, 'ServerBlock');
-			}
-
 			/**
 			 * Parse a component - common implementation used by statements, expressions, and export defaults
 			 * @type {Parse.Parser['parseComponent']}
@@ -1415,10 +1359,26 @@ export function TSRXPlugin(config) {
 							'"text" is a TSRX keyword and must be used in the form {text some_value}',
 						);
 					}
+				} else if (
+					this.type === tt.name &&
+					this.value === 'style' &&
+					this.lookahead().type === tt.string
+				) {
+					node.style = true;
+					this.next();
 				}
 
 				node.expression =
 					this.type === tt.braceR ? this.jsx_parseEmptyExpression() : this.parseExpression();
+				if (
+					node.style &&
+					(node.expression.type !== 'Literal' || typeof node.expression.value !== 'string')
+				) {
+					this.raise(
+						/** @type {number} */ (node.expression.start),
+						'"style" is a TSRX keyword and must be used in the form {style "class_name"}',
+					);
+				}
 				this.expect(tt.braceR);
 
 				return this.finishNode(node, 'JSXExpressionContainer');
@@ -1812,6 +1772,7 @@ export function TSRXPlugin(config) {
 								break;
 							}
 							// If not a comment, fall through to default case
+							this.#resetTokenStartToCurrentPosition();
 							this.context.push(b_stat);
 							this.exprAllowed = true;
 							return original.readToken.call(this, ch);
@@ -1831,6 +1792,7 @@ export function TSRXPlugin(config) {
 									this.#path.at(-1)?.type === 'Component' ||
 									this.#path.at(-1)?.type === 'Element')
 							) {
+								this.#resetTokenStartToCurrentPosition();
 								return original.readToken.call(this, ch);
 							}
 							this.raise(
@@ -1855,6 +1817,7 @@ export function TSRXPlugin(config) {
 							} else if (ch === 32 || ch === 9) {
 								++this.pos;
 							} else {
+								this.#resetTokenStartToCurrentPosition();
 								this.context.push(b_stat);
 								this.exprAllowed = true;
 								return original.readToken.call(this, ch);
@@ -1986,6 +1949,14 @@ export function TSRXPlugin(config) {
 						if (attr.value !== null) {
 							if (attr.value.type === 'JSXExpressionContainer') {
 								const expression = attr.value.expression;
+								if (attr.value.style) {
+									/** @type {AST.Style} */ (/** @type {unknown} */ (attr.value)).type = 'Style';
+									/** @type {AST.Style} */ (/** @type {unknown} */ (attr.value)).value =
+										/** @type {AST.Literal} */ (expression);
+									delete (/** @type {any} */ (attr.value).expression);
+									delete (/** @type {any} */ (attr.value).style);
+									continue;
+								}
 								if (expression.type === 'Literal') {
 									expression.was_expression = true;
 								}
@@ -2455,11 +2426,23 @@ export function TSRXPlugin(config) {
 					// Keep JSXEmptyExpression as-is (for prettier to handle comments)
 					// but convert other expressions to Html/TSRXExpression/Text nodes
 					if (node.expression.type !== 'JSXEmptyExpression') {
-						/** @type {AST.TSRXExpression | AST.Html | AST.TextNode} */ (
+						/** @type {AST.TSRXExpression | AST.Html | AST.TextNode | AST.Style} */ (
 							/** @type {unknown} */ (node)
-						).type = node.html ? 'Html' : node.text ? 'Text' : 'TSRXExpression';
+						).type = node.html
+							? 'Html'
+							: node.text
+								? 'Text'
+								: node.style
+									? 'Style'
+									: 'TSRXExpression';
+						if (node.style) {
+							/** @type {AST.Style} */ (/** @type {unknown} */ (node)).value =
+								/** @type {AST.Literal} */ (node.expression);
+							delete (/** @type {any} */ (node).expression);
+						}
 						delete node.html;
 						delete node.text;
+						delete node.style;
 					}
 					body.push(node);
 				} else if (this.type === tt.string && this.input.charCodeAt(this.start) === 34) {
@@ -2601,6 +2584,66 @@ export function TSRXPlugin(config) {
 				this.parseTemplateBody(body);
 			}
 
+			/**
+			 * Parse proposal-style imports from an inline module declaration:
+			 * `import { foo } from server;`
+			 *
+			 * Acorn's import parser currently requires a string literal source. TSRX
+			 * extends only the source position; all specifier parsing stays delegated
+			 * to Acorn/@sveltejs/acorn-typescript.
+			 * @type {Parse.Parser['parseImport']}
+			 */
+			parseImport(node) {
+				const tokenIsIdentifier = /** @type {any} */ (Parser.acornTypeScript).tokenIsIdentifier;
+				const parser = /** @type {any} */ (this);
+				const import_node = /** @type {any} */ (node);
+				let enterHead = parser.lookahead();
+				import_node.importKind = 'value';
+				parser.importOrExportOuterKind = 'value';
+				if (tokenIsIdentifier(enterHead.type) || this.match(tt.star) || this.match(tt.braceL)) {
+					let ahead = parser.lookahead(2);
+					if (
+						ahead.type !== tt.comma &&
+						!parser.isContextualWithState('from', ahead) &&
+						ahead.type !== tt.eq &&
+						parser.ts_eatContextualWithState('type', 1, enterHead)
+					) {
+						parser.importOrExportOuterKind = 'type';
+						import_node.importKind = 'type';
+						enterHead = parser.lookahead();
+						ahead = parser.lookahead(2);
+					}
+					if (tokenIsIdentifier(enterHead.type) && ahead.type === tt.eq) {
+						this.next();
+						const importNode = parser.tsParseImportEqualsDeclaration(node);
+						parser.importOrExportOuterKind = 'value';
+						return importNode;
+					}
+				}
+				this.next();
+				if (this.type === tt.string) {
+					import_node.specifiers = [];
+					import_node.source = this.parseExprAtom();
+				} else {
+					import_node.specifiers = this.parseImportSpecifiers();
+					this.expectContextual('from');
+					if (this.type === tt.string) {
+						import_node.source = this.parseExprAtom();
+					} else if (tokenIsIdentifier(this.type)) {
+						const source = this.parseIdent(false);
+						source.metadata ??= { path: [] };
+						import_node.source = source;
+					} else {
+						this.unexpected();
+					}
+				}
+				parser.parseMaybeImportAttributes(node);
+				this.semicolon();
+				this.finishNode(node, 'ImportDeclaration');
+				parser.importOrExportOuterKind = 'value';
+				return import_node;
+			}
+
 			/**
 			 * @type {Parse.Parser['parseStatement']}
 			 */
@@ -2616,11 +2659,23 @@ export function TSRXPlugin(config) {
 					const node = this.jsx_parseExpressionContainer();
 					// Keep JSXEmptyExpression as-is (don't convert to TSRXExpression/Text/Html)
 					if (node.expression.type !== 'JSXEmptyExpression') {
-						/** @type {AST.TSRXExpression | AST.Html | AST.TextNode} */ (
+						/** @type {AST.TSRXExpression | AST.Html | AST.TextNode | AST.Style} */ (
 							/** @type {unknown} */ (node)
-						).type = node.html ? 'Html' : node.text ? 'Text' : 'TSRXExpression';
+						).type = node.html
+							? 'Html'
+							: node.text
+								? 'Text'
+								: node.style
+									? 'Style'
+									: 'TSRXExpression';
+						if (node.style) {
+							/** @type {AST.Style} */ (/** @type {unknown} */ (node)).value =
+								/** @type {AST.Literal} */ (node.expression);
+							delete (/** @type {any} */ (node).expression);
+						}
 						delete node.html;
 						delete node.text;
+						delete node.style;
 					}
 
 					return /** @type {ESTreeJSX.JSXEmptyExpression | AST.TSRXExpression | AST.Html | AST.TextNode | ESTreeJSX.JSXExpressionContainer} */ (
@@ -2628,18 +2683,6 @@ export function TSRXPlugin(config) {
 					);
 				}
 
-				if (this.value === '#server') {
-					// Peek ahead to see if this is a server block (#server { ... }) vs
-					// a server identifier expression (#server.fn(), #server.fn().then())
-					let peek_pos = this.end;
-					while (peek_pos < this.input.length && /\s/.test(this.input[peek_pos])) peek_pos++;
-					if (peek_pos < this.input.length && this.input.charCodeAt(peek_pos) === 123) {
-						// Next non-whitespace character is '{' — parse as server block
-						return this.parseServerBlock();
-					}
-					// Otherwise fall through to parse as expression statement (e.g., #server.fn().then(...))
-				}
-
 				if (this.value === 'component') {
 					this.awaitPos = 0;
 					return this.parseComponent({ requireName: true, declareName: true });

package/src/scope.js

@@ -127,10 +127,18 @@ export function create_scopes(ast, root, parent, error_options) {
 			next({ scope });
 		},
 
-		ServerBlock(node, { state, next }) {
+		TSModuleDeclaration(node, { state, next }) {
+			const is_submodule = node.metadata?.module_keyword === 'module';
+			if (is_submodule && node.id?.type === 'Identifier') {
+				state.scope.declare(node.id, 'normal', 'module', node);
+			}
+
 			const scope = state.scope.child();
-			scope.server_block = true;
+			scope.server_block = is_submodule;
 			scopes.set(node, scope);
+			if (node.body) {
+				scopes.set(node.body, scope);
+			}
 
 			next({ scope });
 		},
@@ -296,7 +304,7 @@ export class Scope {
 	tracing = null;
 
 	/**
-	 * Is this scope a top-level server block scope
+	 * Is this scope a submodule scope
 	 * @type {ScopeInterface['server_block']}
 	 */
 	server_block = false;
@@ -325,7 +333,7 @@ export class Scope {
 				return this.parent.declare(node, kind, declaration_kind);
 			}
 
-			if (declaration_kind === 'import' && !this.parent.server_block) {
+			if (declaration_kind === 'import' && !this.server_block && !this.parent.server_block) {
 				return this.parent.declare(node, kind, declaration_kind, initial);
 			}
 		}

package/src/transform/jsx/helpers.js

@@ -186,7 +186,37 @@ export function tsx_with_ts_locations() {
 				context.visit(body);
 			}
 		},
+
+		// esrap's JSXOpeningElement printer doesn't emit `typeArguments`, so generic
+		// component tags like `<RenderProp<User>>` lose the `<User>` in the output.
+		JSXOpeningElement: (node, context) => {
+			context.write('<');
+			context.visit(node.name);
+			if (node.typeArguments) {
+				context.visit(node.typeArguments);
+			}
+			for (const attribute of node.attributes) {
+				context.write(' ');
+				context.visit(attribute);
+			}
+			if (node.selfClosing) {
+				context.write(' /');
+			}
+			context.write('>');
+		},
+		TSModuleDeclaration: (node, context) => {
+			context.write(node.metadata?.module_keyword ?? 'module');
+			context.write(' ');
+			context.visit(node.id);
+			context.visit(node.body);
+		},
 	};
+
+	// Be careful when duplicating visitors that are already defined
+	// above in the `wrappers`
+	// if there is already a visitor but you still need a mapping
+	// on the whole node, only then duplicate it here
+	// e.g. JSXOpeningElement is such a case
 	for (const type of [
 		// JS nodes whose esrap printer emits no location marker, causing
 		// segments.js get_mapping_from_node() to throw when it asks for the
@@ -214,7 +244,9 @@ export function tsx_with_ts_locations() {
 		'TSTypeParameterDeclaration',
 		'TSTypeParameter',
 	]) {
-		wrappers[type] = (node, context) => wrap_with_locations(node, context, base[type]);
+		const visitor = wrappers[type];
+
+		wrappers[type] = (node, context) => wrap_with_locations(node, context, visitor ?? base[type]);
 	}
 
 	return { ...base, ...wrappers };

package/src/transform/jsx/index.js

@@ -254,14 +254,13 @@ export function createJsxTransform(platform) {
 				return /** @type {any} */ (to_jsx_expression_container(inner.expression, inner));
 			},
 
-			MemberExpression(node, { next, state }) {
-				const as_any = /** @type {any} */ (node);
-				if (as_any.object && as_any.object.type === 'StyleIdentifier' && state.current_css_hash) {
-					const class_name = as_any.computed ? as_any.property.value : as_any.property.name;
-					const value = `${state.current_css_hash} ${class_name}`;
-					return /** @type {any} */ ({ type: 'Literal', value, raw: JSON.stringify(value) });
-				}
-				return next();
+			Style(node, { state, path }) {
+				validate_style_directive(node, state, path);
+				const class_name = typeof node.value.value === 'string' ? node.value.value : '';
+				const value = state.current_css_hash
+					? `${state.current_css_hash} ${class_name}`
+					: class_name;
+				return /** @type {any} */ (b.literal(value, node));
 			},
 
 			// Default .metadata on every function-like node so downstream consumers
@@ -2209,7 +2208,12 @@ function to_jsx_element(node, transform_context, raw_children = node.children ||
 		(/** @type {any} */ attribute) => attribute?.metadata?.has_unmappable_value,
 	);
 
-	const opening_element_node = b.jsx_opening_element(name, attributes, selfClosing);
+	const opening_element_node = b.jsx_opening_element(
+		name,
+		attributes,
+		selfClosing,
+		node.openingElement?.typeArguments,
+	);
 	const openingElement = has_unmappable_attribute
 		? opening_element_node
 		: set_loc(opening_element_node, node.openingElement || node);
@@ -2766,6 +2770,108 @@ function get_body_source_node(body_nodes) {
 	return first;
 }
 
+/**
+ * @param {any} node
+ * @param {TransformContext} transform_context
+ * @param {any[]} path
+ */
+function validate_style_directive(node, transform_context, path) {
+	const { attribute, element } = get_style_attribute_context(node, path);
+
+	if (!attribute) {
+		error(
+			'`{style "class_name"}` can only be used as an element attribute value.',
+			transform_context.filename,
+			node,
+			transform_context.errors,
+			transform_context.comments,
+		);
+	}
+
+	if (element && is_dom_style_target(element)) {
+		error(
+			'`{style "class_name"}` cannot be used directly on DOM elements. Pass the class to a child component instead.',
+			transform_context.filename,
+			node,
+			transform_context.errors,
+			transform_context.comments,
+		);
+	}
+
+	if (!transform_context.current_css_hash) {
+		error(
+			'`{style "class_name"}` requires a <style> block in the current component.',
+			transform_context.filename,
+			node,
+			transform_context.errors,
+			transform_context.comments,
+		);
+	}
+}
+
+/**
+ * @param {any} node
+ * @param {any[]} path
+ * @returns {{ attribute: any, element: any }}
+ */
+function get_style_attribute_context(node, path) {
+	const parent = path.at(-1);
+	const attribute =
+		parent?.type === 'Attribute' && parent.value === node
+			? parent
+			: path
+					.findLast((ancestor) => ancestor?.type === 'Element')
+					?.attributes?.find(
+						(/** @type {any} */ attr) =>
+							attr?.type === 'Attribute' &&
+							(attr.value === node || node_contains(attr.value, node)),
+					);
+	const element = path.findLast(
+		(ancestor) =>
+			ancestor?.type === 'Element' &&
+			(!attribute || ancestor.attributes?.some((/** @type {any} */ attr) => attr === attribute)),
+	);
+
+	return { attribute: attribute ?? null, element: element ?? null };
+}
+
+/**
+ * @param {any} root
+ * @param {any} target
+ * @returns {boolean}
+ */
+function node_contains(root, target) {
+	if (!root || typeof root !== 'object') {
+		return false;
+	}
+	if (root === target) {
+		return true;
+	}
+	if (Array.isArray(root)) {
+		return root.some((child) => node_contains(child, target));
+	}
+	for (const key of Object.keys(root)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
+			continue;
+		}
+		if (node_contains(root[key], target)) {
+			return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * @param {any} element
+ * @returns {boolean}
+ */
+function is_dom_style_target(element) {
+	if (!element?.id || is_dynamic_element_id(element.id)) {
+		return false;
+	}
+	return element.id.type === 'Identifier' && /^[a-z]/.test(element.id.name);
+}
+
 /**
  * @param {any} node
  * @param {TransformContext} transform_context

package/src/transform/segments.js

@@ -380,6 +380,37 @@ export function convert_source_map_to_mappings(
 		css_element_info,
 	});
 
+	/** @type {Map<string, number>} */
+	const generated_position_indexes = new Map();
+
+	/**
+	 * When a transform expands one source identifier into multiple generated
+	 * identifiers (e.g. `import { foo } from server` -> `const foo =
+	 * _$_server_$_.foo`), esrap records multiple generated positions for the
+	 * same source location. Keep token mappings in generated-order by consuming
+	 * the next matching generated token instead of always using the first one.
+	 * @param {Token} token
+	 * @returns {{ line: number; column: number }}
+	 */
+	function get_generated_position_for_token(token) {
+		const key = `${token.loc.start.line}:${token.loc.start.column}`;
+		const positions = src_to_gen_map.get(key);
+		if (!positions || positions.length === 0) {
+			throw new Error(`No source map entry for position "${key}"`);
+		}
+
+		const matching_positions = positions.filter((position) => {
+			const offset = loc_to_offset(position.line, position.column, gen_line_offsets);
+			return generated_code.startsWith(token.generated, offset);
+		});
+		const candidates = matching_positions.length > 0 ? matching_positions : positions;
+		const index_key = `${key}:${token.generated}`;
+		const index = generated_position_indexes.get(index_key) ?? 0;
+		generated_position_indexes.set(index_key, index + 1);
+
+		return candidates[Math.min(index, candidates.length - 1)];
+	}
+
 	/**
 	 * Needed for a mapping that includes the computed brackets for diagnostics
 	 * @param {AST.MethodDefinition | AST.Property} node
@@ -653,8 +684,11 @@ export function convert_source_map_to_mappings(
 				// Nothing to visit (just source string)
 				return;
 			} else if (node.type === 'JSXOpeningElement') {
-				// Visit name and attributes in source order
+				// Visit name, type arguments, and attributes in source order
 				visit(node.name);
+				if (node.typeArguments) {
+					visit(node.typeArguments);
+				}
 				for (const attr of node.attributes) {
 					visit(attr);
 				}
@@ -2179,11 +2213,7 @@ export function convert_source_map_to_mappings(
 		const gen_length = gen_text.length;
 		let gen_line_col;
 		try {
-			gen_line_col = get_generated_position(
-				token.loc.start.line,
-				token.loc.start.column,
-				src_to_gen_map,
-			);
+			gen_line_col = get_generated_position_for_token(token);
 		} catch {
 			continue;
 		}

package/src/utils/builders.js

@@ -1107,15 +1107,23 @@ export function jsx_attribute(name, value = null, shorthand = false, loc_info) {
  * @param {ESTreeJSX.JSXOpeningElement['name']} name
  * @param {ESTreeJSX.JSXOpeningElement['attributes']} [attributes]
  * @param {boolean} [self_closing]
+ * @param {ESTreeJSX.JSXOpeningElement['typeArguments']} [type_arguments]
  * @param {AST.NodeWithLocation} [loc_info]
  * @returns {ESTreeJSX.JSXOpeningElement}
  */
-export function jsx_opening_element(name, attributes = [], self_closing = false, loc_info) {
+export function jsx_opening_element(
+	name,
+	attributes = [],
+	self_closing = false,
+	type_arguments = undefined,
+	loc_info,
+) {
 	const node = /** @type {ESTreeJSX.JSXOpeningElement} */ ({
 		type: 'JSXOpeningElement',
 		name,
 		attributes,
 		selfClosing: self_closing,
+		typeArguments: type_arguments,
 		metadata: { path: [] },
 	});
 

package/types/index.d.ts

@@ -64,8 +64,9 @@ interface BaseNodeMetaData {
 	scoped?: boolean;
 	path: AST.Node[];
 	has_template?: boolean;
-	source_name?: string | '#server' | '#style';
+	source_name?: string;
 	source_length?: number;
+	module_keyword?: 'module' | 'namespace';
 	is_capitalized?: boolean;
 	commentContainerId?: number;
 	parenthesized?: boolean;
@@ -206,12 +207,9 @@ declare module 'estree' {
 		TsxCompat: TsxCompat;
 		TSRXExpression: TSRXExpression;
 		Html: Html;
+		Style: Style;
 		Element: Element;
 		Text: TextNode;
-		ServerBlock: ServerBlock;
-		ServerBlockStatement: ServerBlockStatement;
-		ServerIdentifier: ServerIdentifier;
-		StyleIdentifier: StyleIdentifier;
 		Attribute: Attribute;
 		RefAttribute: RefAttribute;
 		SpreadAttribute: SpreadAttribute;
@@ -220,8 +218,7 @@ declare module 'estree' {
 	}
 
 	interface ExpressionMap {
-		StyleIdentifier: StyleIdentifier;
-		ServerIdentifier: ServerIdentifier;
+		Style: Style;
 		Text: TextNode;
 		JSXEmptyExpression: ESTreeJSX.JSXEmptyExpression;
 		ParenthesizedExpression: ParenthesizedExpression;
@@ -268,14 +265,6 @@ declare module 'estree' {
 		key?: AST.Expression | null;
 	}
 
-	interface ServerIdentifier extends AST.BaseExpression {
-		type: 'ServerIdentifier';
-	}
-
-	interface StyleIdentifier extends AST.BaseExpression {
-		type: 'StyleIdentifier';
-	}
-
 	interface ImportDeclaration {
 		importKind: TSESTree.ImportDeclaration['importKind'];
 	}
@@ -338,7 +327,6 @@ declare module 'estree' {
 		metadata: BaseNodeMetaData & {
 			topScopedClasses?: TopScopedClasses;
 			styleClasses?: StyleClasses;
-			styleIdentifierPresent?: boolean;
 		};
 		default: boolean;
 		typeParameters?: AST.TSTypeParameterDeclaration;
@@ -370,6 +358,12 @@ declare module 'estree' {
 		expression: AST.Expression;
 	}
 
+	interface Style extends AST.BaseExpression {
+		type: 'Style';
+		value: AST.Literal;
+		loc?: AST.SourceLocation;
+	}
+
 	export interface TSRXExpression extends AST.BaseExpression {
 		type: 'TSRXExpression';
 		expression: AST.Expression;
@@ -416,18 +410,6 @@ declare module 'estree' {
 		loc?: AST.SourceLocation;
 	}
 
-	interface ServerBlockStatement extends Omit<BlockStatement, 'body'> {
-		body: (AST.Statement | AST.ExportNamedDeclaration)[];
-	}
-
-	interface ServerBlock extends AST.BaseNode {
-		type: 'ServerBlock';
-		body: ServerBlockStatement;
-		metadata: BaseNodeMetaData & {
-			exports: Set<string>;
-		};
-	}
-
 	interface ScriptContent extends Omit<AST.Element, 'type'> {
 		type: 'ScriptContent';
 		content: string;
@@ -694,6 +676,7 @@ declare module 'estree-jsx' {
 	interface JSXExpressionContainer {
 		html?: boolean;
 		text?: boolean;
+		style?: boolean;
 	}
 
 	interface JSXMemberExpression {
@@ -977,6 +960,9 @@ declare module 'estree' {
 	> {
 		body: TSModuleBlock;
 		id: AST.Identifier;
+		metadata: BaseNodeMetaData & {
+			exports?: Set<string>;
+		};
 	}
 	interface TSNamedTupleMember extends Omit<
 		AcornTSNode<TSESTree.TSNamedTupleMember>,
@@ -1184,7 +1170,9 @@ export interface AnalysisResult {
 	scope: ScopeInterface;
 	component_metadata: Array<{ id: string }>;
 	metadata: {
-		serverIdentifierPresent: boolean;
+		serverImportsPresent: boolean;
+		serverImportDeclarations: AST.ImportDeclaration[];
+		serverModule: AST.TSModuleDeclaration | null;
 	};
 	errors: CompileError[];
 	comments: AST.CommentWithLocation[];
@@ -1209,6 +1197,7 @@ export type DeclarationKind =
 	| 'rest_param'
 	| 'component'
 	| 'import'
+	| 'module'
 	| 'using'
 	| 'await using';
 
@@ -1239,7 +1228,8 @@ export interface Binding {
 		| AST.Expression
 		| AST.FunctionDeclaration
 		| AST.ClassDeclaration
-		| AST.ImportDeclaration;
+		| AST.ImportDeclaration
+		| AST.TSModuleDeclaration;
 	/** Whether this binding has been reassigned */
 	reassigned: boolean;
 	/** Whether this binding has been mutated (property access) */
@@ -1331,7 +1321,8 @@ export interface ScopeInterface {
 			| AST.Expression
 			| AST.FunctionDeclaration
 			| AST.ClassDeclaration
-			| AST.ImportDeclaration,
+			| AST.ImportDeclaration
+			| AST.TSModuleDeclaration,
 	): Binding;
 	/** Get binding by name */
 	get(name: string): Binding | null;
@@ -1357,8 +1348,7 @@ export interface BaseState {
 	/** For utils */
 	scope: ScopeInterface;
 	scopes: Map<AST.Node | AST.Node[], ScopeInterface>;
-	serverIdentifierPresent: boolean;
-	ancestor_server_block: AST.ServerBlock | undefined;
+	ancestor_server_block: AST.TSModuleDeclaration | undefined;
 	inside_head?: boolean;
 	keep_component_style?: boolean;
 

package/types/parse.d.ts

@@ -930,7 +930,7 @@ export namespace Parse {
 			refDestructuringErrors?: DestructuringErrors,
 			forInit?: ForInit,
 			forNew?: boolean,
-		): AST.ServerIdentifier | AST.StyleIdentifier | AST.Component | AST.Identifier | AST.Literal;
+		): AST.Component | AST.Identifier | AST.Literal;
 
 		/** Default handler for parseExprAtom when no other case matches */
 		parseExprAtomDefault(): AST.Expression;
@@ -1172,8 +1172,6 @@ export namespace Parse {
 		 */
 		parseTopLevel(node: AST.Program): AST.Program;
 
-		parseServerBlock(): AST.ServerBlock;
-
 		parseElement(): AST.Element | AST.Tsx | AST.TsxCompat;
 
 		parseDoubleQuotedTextChild(): AST.TextNode;
@@ -1210,7 +1208,6 @@ export namespace Parse {
 			| AST.TextNode
 			| ESTreeJSX.JSXEmptyExpression
 			| ESTreeJSX.JSXExpressionContainer
-			| AST.ServerBlock
 			| AST.Component
 			| AST.ExpressionStatement
 			| ReturnType<Parser['parseElement']>
@@ -1543,7 +1540,7 @@ export namespace Parse {
 		/**
 		 * Check if a local export refers to a defined variable.
 		 * Acorn's default implementation only checks the top-level module scope,
-		 * but Ripple overrides this to check all scopes (for server blocks).
+		 * but Ripple overrides this to check all scopes (for submodules).
 		 * @param id The identifier being exported
 		 */
 		checkLocalExport(id: AST.Identifier): void;