@tsrx/core 0.0.5 → 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.5",
+  "version": "0.0.6",
   "type": "module",
   "repository": {
     "type": "git",

package/src/index.js

@@ -155,6 +155,15 @@ export {
 	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/plugin.js

@@ -439,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 =
@@ -503,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);
 						}
 					}
 				}
@@ -1473,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;
@@ -1492,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);
@@ -1545,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;
@@ -1563,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 = '';
@@ -1815,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,
 					);
@@ -2040,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) {
@@ -2069,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) {
@@ -2090,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/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 };
+}