@tsrx/core 0.0.4 → 0.0.6

package/package.json

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

package/src/index.js

@@ -132,7 +132,38 @@ export { escape } from './utils/escaping.js';
 
 // Transform
 export { render_stylesheets as renderStylesheets } from './transform/stylesheet.js';
-export { convert_source_map_to_mappings as convertSourceMapToMappings } from './transform/segments.js';
+export {
+	prepare_stylesheet_for_render as prepareStylesheetForRender,
+	is_style_element as isStyleElement,
+	is_composite_element as isCompositeElement,
+	annotate_with_hash as annotateWithHash,
+	annotate_component_with_hash as annotateComponentWithHash,
+	add_hash_class as addHashClass,
+} from './transform/scoping.js';
+export {
+	convert_source_map_to_mappings as convertSourceMapToMappings,
+	create_volar_mappings_result as createVolarMappingsResult,
+	dedupe_mappings as dedupeMappings,
+	serialize_mapping_value as serializeMappingValue,
+} from './transform/segments.js';
+export {
+	create_lazy_context as createLazyContext,
+	collect_lazy_bindings as collectLazyBindings,
+	collect_lazy_bindings_from_component as collectLazyBindingsFromComponent,
+	collect_lazy_bindings_from_statements as collectLazyBindingsFromStatements,
+	preallocate_lazy_ids as preallocateLazyIds,
+	apply_lazy_transforms as applyLazyTransforms,
+	replace_lazy_params as replaceLazyParams,
+} from './transform/lazy.js';
+export {
+	find_first_top_level_await as findFirstTopLevelAwait,
+	find_first_top_level_await_in_component_body as findFirstTopLevelAwaitInComponentBody,
+} from './transform/await.js';
+export {
+	is_interleaved_body as isInterleavedBody,
+	is_capturable_jsx_child as isCapturableJsxChild,
+	capture_jsx_child as captureJsxChild,
+} from './transform/jsx-interleave.js';
 
 // Analyze
 export { analyze_css as analyzeCss } from './analyze/css-analyze.js';

package/src/parse/index.js

@@ -110,6 +110,68 @@ export function isWhitespaceTextNode(node) {
 	return false;
 }
 
+/**
+ * @type {AcornPlugin}
+ */
+function elementTemplateClosingTagPlugin(Base) {
+	const jsxTagStart = /** @type {any} */ (Base).acornTypeScript?.tokTypes?.jsxTagStart;
+	if (!jsxTagStart) return Base;
+
+	/**
+	 * @param {any} parser
+	 */
+	function inElementTemplateBodyDirect(parser) {
+		const stack = parser.context;
+		const top = stack[stack.length - 1];
+		const below = stack[stack.length - 2];
+		return top && top.token === '{' && below && below.token === '<tag>...</tag>';
+	}
+
+	/**
+	 * @param {any} parser
+	 */
+	function inElementTemplateBodyAnywhere(parser) {
+		const stack = parser.context;
+		for (let i = 1; i < stack.length; i++) {
+			if (
+				stack[i] &&
+				stack[i].token === '{' &&
+				stack[i - 1] &&
+				stack[i - 1].token === '<tag>...</tag>'
+			) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	return class extends Base {
+		/** @param {number} code */
+		// @ts-ignore — extending acorn's Parser with internal hooks
+		getTokenFromCode(code) {
+			if (code === 60 /* '<' */ && !(/** @type {any} */ (this).inType)) {
+				const self = /** @type {any} */ (this);
+				const nextChar =
+					self.pos + 1 < self.input.length ? self.input.charCodeAt(self.pos + 1) : -1;
+				if (nextChar === 47 /* '/' */ && inElementTemplateBodyDirect(self)) {
+					++self.pos;
+					return self.finishToken(jsxTagStart);
+				}
+			}
+			// @ts-ignore — super dispatches to next layer in the plugin chain
+			return super.getTokenFromCode(code);
+		}
+
+		// @ts-ignore — extending acorn's Parser with internal hooks
+		canInsertSemicolon() {
+			const self = /** @type {any} */ (this);
+			if (self.type === jsxTagStart && inElementTemplateBodyAnywhere(self)) return true;
+			// @ts-ignore
+			return super.canInsertSemicolon();
+		}
+	};
+}
+
 /**
  * Create a parser by composing Acorn with TypeScript/JSX support and optional framework plugins.
  *
@@ -125,6 +187,7 @@ export function createParser(...plugins) {
 			acorn.Parser.extend(
 				tsPlugin({ jsx: true }),
 				...plugins.map((p) => /** @type {AcornPlugin} */ (/** @type {unknown} */ (p))),
+				elementTemplateClosingTagPlugin,
 			)
 		)
 	);
@@ -151,7 +214,7 @@ export function createParser(...plugins) {
 				allowReturnOutsideFunction: true,
 				locations: true,
 				onComment,
-				rippleOptions: {
+				tsrxOptions: {
 					filename,
 					errors: options?.errors ?? [],
 					loose: options?.loose || false,

package/src/parse/style.js

@@ -119,7 +119,7 @@ export function parse_style(content, options) {
 
 	return {
 		source: content,
-		hash: `ripple-${hash(content)}`,
+		hash: `tsrx-${hash(content)}`,
 		type: 'StyleSheet',
 		children: read_body(parser),
 		start: 0,

package/src/plugin.js

@@ -51,9 +51,10 @@ export function TSRXPlugin(config) {
 			 */
 			constructor(options, input) {
 				super(options, input);
-				this.#loose = options?.rippleOptions.loose === true;
-				this.#errors = options?.rippleOptions.errors;
-				this.#filename = options?.rippleOptions.filename || null;
+				const tsrx_options = options?.tsrxOptions ?? options?.rippleOptions;
+				this.#loose = tsrx_options?.loose === true;
+				this.#errors = tsrx_options?.errors;
+				this.#filename = tsrx_options?.filename || null;
 			}
 
 			/**
@@ -438,6 +439,10 @@ export function TSRXPlugin(config) {
 					const isTagLikeAfterLt =
 						!isWhitespaceAfterLt &&
 						(nextChar === 47 || // '/'
+							nextChar === 62 || // '>' (fragments: <>)
+							nextChar === 64 || // '@'
+							nextChar === 36 || // '$'
+							nextChar === 95 || // '_'
 							(nextChar >= 65 && nextChar <= 90) || // A-Z
 							(nextChar >= 97 && nextChar <= 122)); // a-z
 					const prevAllowsTagStart =
@@ -502,13 +507,11 @@ export function TSRXPlugin(config) {
 							}
 						}
 
-						// Check if the character after < is not whitespace
-						if (allWhitespace && this.pos + 1 < this.input.length) {
-							const nextChar = this.input.charCodeAt(this.pos + 1);
-							if (nextChar !== 32 && nextChar !== 9 && nextChar !== 10 && nextChar !== 13) {
-								++this.pos;
-								return this.finishToken(tstt.jsxTagStart);
-							}
+						// At the start of a line inside template bodies, only treat `<` as
+						// a tag start when the following character can actually begin a tag.
+						if (allWhitespace && isTagLikeAfterLt) {
+							++this.pos;
+							return this.finishToken(tstt.jsxTagStart);
 						}
 					}
 				}
@@ -1472,7 +1475,7 @@ export function TSRXPlugin(config) {
 			 */
 			parseElement() {
 				const inside_head = this.#path.findLast(
-					(n) => n.type === 'Element' && n.id.type === 'Identifier' && n.id.name === 'head',
+					(n) => n.type === 'Element' && n.id && n.id.type === 'Identifier' && n.id.name === 'head',
 				);
 				// Adjust the start so we capture the `<` as part of the element
 				const start = this.start - 1;
@@ -1491,10 +1494,14 @@ export function TSRXPlugin(config) {
 				// Always attach the concrete opening element node for accurate source mapping
 				element.openingElement = open;
 
-				// Check if this is a namespaced element (tsx:react)
-				const is_tsx_compat = open.name.type === 'JSXNamespacedName';
+				// Fragments (<>) produce JSXOpeningFragment with no `name` property
+				const is_fragment = !open.name;
+				const is_tsx_compat = !is_fragment && open.name.type === 'JSXNamespacedName';
 				const is_tsx =
-					!is_tsx_compat && open.name.type === 'JSXIdentifier' && open.name.name === 'tsx';
+					!is_fragment &&
+					!is_tsx_compat &&
+					open.name.type === 'JSXIdentifier' &&
+					open.name.name === 'tsx';
 
 				if (is_tsx_compat) {
 					const namespace_node = /** @type {ESTreeJSX.JSXNamespacedName} */ (open.name);
@@ -1544,11 +1551,13 @@ export function TSRXPlugin(config) {
 					}
 				}
 
-				if (!is_tsx_compat && !is_tsx) {
+				if (!is_tsx_compat && !is_tsx && !is_fragment) {
 					/** @type {AST.Element} */ (element).id = /** @type {AST.Identifier} */ (
 						convert_from_jsx(/** @type {ESTreeJSX.JSXIdentifier} */ (open.name))
 					);
 					element.selfClosing = open.selfClosing;
+				} else if (is_fragment) {
+					element.selfClosing = false;
 				}
 
 				element.attributes = open.attributes;
@@ -1562,6 +1571,10 @@ export function TSRXPlugin(config) {
 						this.pos--;
 						this.next();
 					}
+				} else if (is_fragment) {
+					this.enterScope(0);
+					this.parseTemplateBody(/** @type {AST.Element} */ (element).children);
+					this.exitScope();
 				} else {
 					if (/** @type {ESTreeJSX.JSXIdentifier} */ (open.name).name === 'script') {
 						let content = '';
@@ -1814,7 +1827,7 @@ export function TSRXPlugin(config) {
 					}
 				}
 
-				if (element.closingElement && !is_tsx_compat && !is_tsx) {
+				if (element.closingElement && !is_tsx_compat && !is_tsx && element.closingElement.name) {
 					/** @type {unknown} */ (element.closingElement.name) = convert_from_jsx(
 						element.closingElement.name,
 					);
@@ -2039,12 +2052,13 @@ export function TSRXPlugin(config) {
 									? closingElement.name.namespace.name + ':' + closingElement.name.name.name
 									: this.getElementName(closingElement.name);
 						} else {
-							// Regular Element node
-							openingTagName = this.getElementName(currentElement.id);
-							closingTagName =
-								closingElement.name?.type === 'JSXNamespacedName'
+							// Regular Element node (or fragment)
+							openingTagName = currentElement.id ? this.getElementName(currentElement.id) : null;
+							closingTagName = closingElement.name
+								? closingElement.name?.type === 'JSXNamespacedName'
 									? closingElement.name.namespace.name + ':' + closingElement.name.name.name
-									: this.getElementName(closingElement.name);
+									: this.getElementName(closingElement.name)
+								: null;
 						}
 
 						if (openingTagName !== closingTagName) {
@@ -2068,7 +2082,9 @@ export function TSRXPlugin(config) {
 											? 'tsx:' + elem.kind
 											: elem.type === 'Tsx'
 												? 'tsx'
-												: this.getElementName(elem.id);
+												: elem.id
+													? this.getElementName(elem.id)
+													: null;
 
 									// Found matching opening tag
 									if (elemName === closingTagName) {
@@ -2089,9 +2105,9 @@ export function TSRXPlugin(config) {
 
 						const elementToClose = this.#path[this.#path.length - 1];
 						if (elementToClose && elementToClose.type === 'Element') {
-							const elementToCloseName = this.getElementName(
-								/** @type {AST.Element} */ (elementToClose).id,
-							);
+							const elementToCloseName = /** @type {AST.Element} */ (elementToClose).id
+								? this.getElementName(/** @type {AST.Element} */ (elementToClose).id)
+								: null;
 							if (elementToCloseName === closingTagName) {
 								/** @type {AST.Element} */ (elementToClose).closingElement = closingElement;
 							}

package/src/source-map-utils.js

@@ -286,7 +286,7 @@ export function build_line_offsets(text) {
  * @param {number} [gen_max_len]
  * @returns {CodeMapping | Error}
  */
-function maybe_get_mapping_from_node(
+export function maybe_get_mapping_from_node(
 	node,
 	src_to_gen_map,
 	gen_line_offsets,

package/src/transform/await.js

@@ -0,0 +1,59 @@
+/**
+ * @param {any[]} body_nodes
+ * @returns {any | null}
+ */
+export function find_first_top_level_await_in_component_body(body_nodes) {
+	for (const node of body_nodes) {
+		const found = find_first_top_level_await(node, false);
+		if (found) return found;
+	}
+
+	return null;
+}
+
+/**
+ * @param {any} node
+ * @param {boolean} inside_nested_function
+ * @returns {any | null}
+ */
+export function find_first_top_level_await(node, inside_nested_function) {
+	if (!node || typeof node !== 'object') {
+		return null;
+	}
+
+	if (Array.isArray(node)) {
+		for (const child of node) {
+			const found = find_first_top_level_await(child, inside_nested_function);
+			if (found) return found;
+		}
+
+		return null;
+	}
+
+	if (
+		node.type === 'FunctionDeclaration' ||
+		node.type === 'FunctionExpression' ||
+		node.type === 'ArrowFunctionExpression'
+	) {
+		return inside_nested_function ? null : find_first_top_level_await(node.body, true);
+	}
+
+	if (inside_nested_function) {
+		return null;
+	}
+
+	if (node.type === 'AwaitExpression' || (node.type === 'ForOfStatement' && node.await === true)) {
+		return node;
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
+			continue;
+		}
+
+		const found = find_first_top_level_await(node[key], false);
+		if (found) return found;
+	}
+
+	return null;
+}

package/src/transform/jsx-interleave.js

@@ -0,0 +1,99 @@
+/**
+ * Helpers for preserving source-order semantics when non-JSX statements are
+ * interleaved with JSX children inside a component or element body.
+ *
+ * Without these, targets like React and Solid would hoist all statements
+ * before any JSX is constructed, so mutations between sibling JSX children
+ * would be observed by every sibling instead of only the ones that appear
+ * textually after the mutation.
+ */
+
+/**
+ * Returns true when the body contains a non-JSX statement that appears
+ * after a JSX child. In that case JSX children must be captured at their
+ * source position so mutations in following statements do not retroactively
+ * change what earlier children rendered.
+ *
+ * The `is_jsx_child` predicate is target-specific — each target recognizes
+ * a different set of JSX-bearing node types (Ripple `Element`, `Text`,
+ * `TSRXExpression`, etc. plus plain JSX nodes).
+ *
+ * @param {any[]} body_nodes
+ * @param {(node: any) => boolean} is_jsx_child
+ * @returns {boolean}
+ */
+export function is_interleaved_body(body_nodes, is_jsx_child) {
+	let seen_jsx = false;
+	for (const child of body_nodes) {
+		if (is_jsx_child(child)) {
+			seen_jsx = true;
+		} else if (seen_jsx) {
+			return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * Only JSX nodes that evaluate to a single expression can be hoisted into a
+ * `const`. Static text children (`JSXText`) are inert and don't need
+ * capturing — their position relative to mutations doesn't change output.
+ *
+ * @param {any} jsx
+ * @returns {boolean}
+ */
+export function is_capturable_jsx_child(jsx) {
+	if (!jsx) return false;
+	const t = jsx.type;
+	return t === 'JSXElement' || t === 'JSXFragment' || t === 'JSXExpressionContainer';
+}
+
+/**
+ * Build a `VariableDeclaration` that captures a JSX child into a const at
+ * its source position, along with a JSXExpressionContainer referencing the
+ * capture. The caller inserts the declaration into the enclosing block's
+ * statements in source order and uses the reference in place of the JSX
+ * child inside the returned fragment.
+ *
+ * @param {any} jsx
+ * @param {number} capture_index
+ * @returns {{ declaration: any, reference: any }}
+ */
+export function capture_jsx_child(jsx, capture_index) {
+	const name = `_tsrx_child_${capture_index}`;
+	const init = jsx.type === 'JSXExpressionContainer' ? jsx.expression : jsx;
+
+	const declaration = /** @type {any} */ ({
+		type: 'VariableDeclaration',
+		kind: 'const',
+		declarations: [
+			/** @type {any} */ ({
+				type: 'VariableDeclarator',
+				id: /** @type {any} */ ({
+					type: 'Identifier',
+					name,
+					metadata: { path: [] },
+				}),
+				init,
+				metadata: { path: [] },
+			}),
+		],
+		metadata: { path: [] },
+	});
+
+	// NOTE: JSXExpressionContainer nodes are intentionally created without
+	// loc — they're synthetic wrappers whose source positions don't
+	// correspond to source-map entries and adding loc causes Volar mapping
+	// failures.
+	const reference = /** @type {any} */ ({
+		type: 'JSXExpressionContainer',
+		expression: /** @type {any} */ ({
+			type: 'Identifier',
+			name,
+			metadata: { path: [] },
+		}),
+		metadata: { path: [] },
+	});
+
+	return { declaration, reference };
+}