@tsrx/core 0.0.24 → 0.0.26

package/package.json

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

package/src/index.js

@@ -133,8 +133,11 @@ export {
 // Sanitize
 export { sanitize_template_string as sanitizeTemplateString } from './utils/sanitize_template_string.js';
 
+// CSS Property Name
+export { normalize_css_property_name as normalizeCssPropertyName } from './utils/normalize_css_property_name.js';
+
 // Escaping
-export { escape } from './utils/escaping.js';
+export { escape, escape_script as escapeScript } from './utils/escaping.js';
 
 // Transform
 export {

package/src/plugin.js

@@ -313,6 +313,12 @@ export function TSRXPlugin(config) {
 				}
 			}
 
+			#popTemplateLiteralTokenContext() {
+				while (this.curContext()?.token === '`') {
+					this.context.pop();
+				}
+			}
+
 			#isDoubleQuotedTextChildStart() {
 				if (this.#path.findLast((n) => n.type === 'TsxCompat' || n.type === 'Tsx')) {
 					return false;
@@ -1097,6 +1103,19 @@ export function TSRXPlugin(config) {
 				this.parseFunctionParams(node);
 				this.checkComponentParams(node.params);
 
+				const is_arrow_component = this.type === tt.arrow;
+				if (is_arrow_component) {
+					if (node.id || requireName || skipName) {
+						this.raise(
+							this.start,
+							'Arrow component syntax is only supported for anonymous component expressions.',
+						);
+					}
+					node.metadata ??= { path: [] };
+					node.metadata.arrow = true;
+					this.next();
+				}
+
 				// Reset before `eat(braceL)` so the lookahead `next()` it triggers reads
 				// the component body's first token as if we'd entered fresh — no
 				// surrounding function body should affect our parseStatement/parseBlock
@@ -2370,7 +2389,7 @@ export function TSRXPlugin(config) {
 							body.push(node);
 						} else if (this.type === tstt.jsxTagStart) {
 							// Parse JSX element
-							const node = super.parseExpression();
+							const node = super.jsx_parseElement();
 							body.push(node);
 						} else {
 							const start = this.start;
@@ -2401,6 +2420,7 @@ export function TSRXPlugin(config) {
 								body.push(node);
 							}
 
+							this.#popTemplateLiteralTokenContext();
 							// Always call next() to ensure parser makes progress
 							this.next();
 						}
@@ -2433,7 +2453,7 @@ export function TSRXPlugin(config) {
 							body.push(node);
 						} else if (this.type === tstt.jsxTagStart) {
 							// Parse JSX element
-							const node = super.parseExpression();
+							const node = super.jsx_parseElement();
 							body.push(node);
 						} else {
 							const start = this.start;
@@ -2464,6 +2484,7 @@ export function TSRXPlugin(config) {
 								body.push(node);
 							}
 
+							this.#popTemplateLiteralTokenContext();
 							this.next();
 						}
 					}
@@ -2748,6 +2769,19 @@ export function TSRXPlugin(config) {
 					return node;
 				}
 
+				if (
+					this.#functionBodyDepth === 0 &&
+					this.type === tt.string &&
+					this.input.charCodeAt(this.start) === 34 &&
+					(this.#path.at(-1)?.type === 'Component' || this.#path.at(-1)?.type === 'Element')
+				) {
+					this.pos = this.start;
+					this.#readDoubleQuotedTextChildToken();
+					const node = this.parseDoubleQuotedTextChild();
+					this.semicolon();
+					return node;
+				}
+
 				// &[ or &{ at statement level — lazy destructuring assignment
 				// e.g., &[data] = track(0); or &{x, y} = obj;
 				if (this.type === tt.bitwiseAND) {

package/src/transform/jsx/index.js

@@ -487,7 +487,7 @@ function has_use_server_directive(program) {
  * @param {any} component
  * @param {TransformContext} transform_context
  * @param {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[], statics: any[] }} [walk_helper_state]
- * @returns {AST.FunctionDeclaration}
+ * @returns {AST.FunctionDeclaration | AST.FunctionExpression | AST.ArrowFunctionExpression}
  */
 export function component_to_function_declaration(component, transform_context, walk_helper_state) {
 	const helper_state = walk_helper_state || create_helper_state(component.id?.name || 'Component');
@@ -527,28 +527,62 @@ export function component_to_function_declaration(component, transform_context,
 	const final_body =
 		lazy_bindings.size > 0 ? apply_lazy_transforms(body_block, lazy_bindings) : body_block;
 
-	const fn = /** @type {any} */ ({
-		type: 'FunctionDeclaration',
-		id: component.id,
-		typeParameters: component.typeParameters,
-		params: final_params,
-		body: final_body,
-		async: is_async_component,
-		generator: false,
-		metadata: {
-			path: [],
-			is_component: true,
-		},
-	});
+	/** @type {AST.FunctionDeclaration | AST.FunctionExpression | AST.ArrowFunctionExpression} */
+	let fn;
+
+	if (component.id) {
+		fn = /** @type {any} */ ({
+			type: 'FunctionDeclaration',
+			id: component.id,
+			typeParameters: component.typeParameters,
+			params: final_params,
+			body: final_body,
+			async: is_async_component,
+			generator: false,
+			metadata: {
+				path: [],
+				is_component: true,
+			},
+		});
+	} else if (component.metadata?.arrow) {
+		fn = /** @type {any} */ ({
+			type: 'ArrowFunctionExpression',
+			typeParameters: component.typeParameters,
+			params: final_params,
+			body: final_body,
+			async: is_async_component,
+			generator: false,
+			expression: false,
+			metadata: {
+				path: [],
+				is_component: true,
+			},
+		});
+	} else {
+		fn = /** @type {any} */ ({
+			type: 'FunctionExpression',
+			id: null,
+			typeParameters: component.typeParameters,
+			params: final_params,
+			body: final_body,
+			async: is_async_component,
+			generator: false,
+			metadata: {
+				path: [],
+				is_component: true,
+			},
+		});
+	}
 
 	// Restore context
 	transform_context.helper_state = saved_helper_state;
 	transform_context.available_bindings = saved_bindings;
 
-	fn.metadata.generated_helpers = helper_state.helpers;
-	fn.metadata.generated_statics = helper_state.statics;
+	const fn_metadata = /** @type {any} */ (fn.metadata);
+	fn_metadata.generated_helpers = helper_state.helpers;
+	fn_metadata.generated_statics = helper_state.statics;
 
-	if (fn.id) {
+	if (fn.type === 'FunctionDeclaration' && fn.id) {
 		fn.id.metadata = /** @type {AST.Identifier['metadata']} */ ({
 			...fn.id.metadata,
 			is_component: true,
@@ -590,6 +624,10 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 	// any JSX is constructed, and every JSX child would observe the final
 	// state of mutable variables.
 	const interleaved = is_interleaved_body(body_nodes);
+	const capture_static_early_return_nodes =
+		!interleaved &&
+		!transform_context.platform.hooks?.isTopLevelSetupCall &&
+		body_nodes.filter(is_returning_if_statement).length > 1;
 	let capture_index = 0;
 
 	for (let i = 0; i < body_nodes.length; i += 1) {
@@ -614,6 +652,15 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 				true,
 			);
 
+			if (capture_static_early_return_nodes) {
+				capture_index = capture_static_early_return_render_nodes(
+					render_nodes,
+					statements,
+					capture_index,
+					transform_context,
+				);
+			}
+
 			if (branch_has_hooks || continuation_has_hooks) {
 				if (transform_context.platform.hooks?.isTopLevelSetupCall) {
 					statements.push(
@@ -1291,15 +1338,68 @@ function hoist_static_render_nodes(render_nodes, transform_context) {
 	}
 }
 
+/**
+ * Static JSX that appears before multiple early-return guards is otherwise
+ * cloned into every generated return. Capture it once at its source position
+ * and reuse the reference, matching the interleaved-statement capture path
+ * without moving dynamic render-time expressions across guards.
+ *
+ * @param {any[]} render_nodes
+ * @param {any[]} statements
+ * @param {number} capture_index
+ * @param {TransformContext} transform_context
+ * @returns {number}
+ */
+function capture_static_early_return_render_nodes(
+	render_nodes,
+	statements,
+	capture_index,
+	transform_context,
+) {
+	for (let i = 0; i < render_nodes.length; i += 1) {
+		const node = render_nodes[i];
+		if (!is_static_early_return_capture_node(node, transform_context)) {
+			continue;
+		}
+
+		const { declaration, reference } = captureJsxChild(node, capture_index++);
+		statements.push(declaration);
+		render_nodes[i] = reference;
+	}
+
+	return capture_index;
+}
+
+/**
+ * @param {any} node
+ * @param {TransformContext} transform_context
+ * @returns {boolean}
+ */
+function is_static_early_return_capture_node(node, transform_context) {
+	if (node?.type !== 'JSXElement' && node?.type !== 'JSXFragment') {
+		return false;
+	}
+	if (!is_hoist_safe_jsx_node(node)) {
+		return false;
+	}
+	if (
+		transform_context.platform.hooks?.canHoistStaticNode &&
+		!transform_context.platform.hooks.canHoistStaticNode(node, transform_context)
+	) {
+		return false;
+	}
+	return !references_scope_bindings(node, transform_context.available_bindings);
+}
+
 /**
  * @param {AST.Program} program
  * @returns {AST.Program}
  */
 function expand_component_helpers(program) {
 	program.body = program.body.flatMap((statement) => {
-		const meta = get_generated_component_metadata(statement);
-		const statics = meta?.generated_statics || [];
-		const helpers = meta?.generated_helpers || [];
+		const metas = get_generated_component_metadata_list(statement);
+		const statics = metas.flatMap((meta) => meta.generated_statics || []);
+		const helpers = metas.flatMap((meta) => meta.generated_helpers || []);
 		if (statics.length || helpers.length) {
 			return [...statics, ...helpers, statement];
 		}
@@ -1312,30 +1412,63 @@ function expand_component_helpers(program) {
 
 /**
  * Component hooks may replace a `Component` node with a function declaration,
- * variable declaration, or export-safe expression. Generated helper/statics
- * metadata is carried on whichever replacement node the hook returns, so
- * helper expansion must read metadata from that broader set.
+ * variable declaration, object literal member, or export-safe expression.
+ * Generated helper/statics metadata is carried on whichever replacement node
+ * the hook returns, so helper expansion must read metadata from that broader
+ * set.
  *
  * @param {any} node
- * @returns {{ generated_helpers?: any[], generated_statics?: any[] } | null}
+ * @returns {{ generated_helpers?: any[], generated_statics?: any[] }[]}
  */
-function get_generated_component_metadata(node) {
-	if (!node || typeof node !== 'object') {
-		return null;
-	}
+function get_generated_component_metadata_list(node) {
+	/** @type {{ generated_helpers?: any[], generated_statics?: any[] }[]} */
+	const metas = [];
+	const seen_nodes = new Set();
+	const seen_metas = new Set();
+
+	/** @param {any} current */
+	const visit = (current) => {
+		if (!current || typeof current !== 'object' || seen_nodes.has(current)) {
+			return;
+		}
 
-	if (node.metadata?.generated_helpers || node.metadata?.generated_statics) {
-		return node.metadata;
-	}
+		seen_nodes.add(current);
 
-	if (
-		(node.type === 'ExportNamedDeclaration' || node.type === 'ExportDefaultDeclaration') &&
-		node.declaration?.metadata
-	) {
-		return node.declaration.metadata;
-	}
+		if (current.metadata?.generated_helpers || current.metadata?.generated_statics) {
+			if (!seen_metas.has(current.metadata)) {
+				seen_metas.add(current.metadata);
+				metas.push(current.metadata);
+			}
+			return;
+		}
+
+		if (
+			current.type === 'FunctionDeclaration' ||
+			current.type === 'FunctionExpression' ||
+			current.type === 'ArrowFunctionExpression'
+		) {
+			return;
+		}
+
+		for (const key of Object.keys(current)) {
+			if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
+				continue;
+			}
+
+			const value = current[key];
+			if (Array.isArray(value)) {
+				for (const child of value) {
+					visit(child);
+				}
+			} else {
+				visit(value);
+			}
+		}
+	};
+
+	visit(node);
 
-	return null;
+	return metas;
 }
 
 /**

package/src/utils/builders.js

@@ -57,18 +57,21 @@ export function assignment_pattern(left, right) {
 /**
  * @param {Array<AST.Pattern>} params
  * @param {AST.BlockStatement | AST.Expression} body
+ * @param {AST.NodeWithLocation} [loc_info]
  * @returns {AST.ArrowFunctionExpression}
  */
-export function arrow(params, body, async = false) {
-	return {
+export function arrow(params, body, async = false, loc_info) {
+	const node = /** @type {AST.ArrowFunctionExpression} */ ({
 		type: 'ArrowFunctionExpression',
 		params,
 		body,
 		expression: body.type !== 'BlockStatement',
 		generator: false,
 		async,
-		metadata: /** @type {any} */ (null), // should not be used by codegen
-	};
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
 }
 
 /**

package/src/utils/escaping.js

@@ -1,5 +1,7 @@
 const ATTR_REGEX = /[&"<]/g;
 const CONTENT_REGEX = /[&<]/g;
+const OPEN_TAG_REGEX = /</g;
+const CLOSE_TAG_REGEX = />/g;
 
 /**
  * @template V
@@ -24,3 +26,12 @@ export function escape(value, is_attr) {
 
 	return escaped + str.substring(last);
 }
+
+/**
+ * Escapes characters that can prematurely terminate inline script tags.
+ * @param {string} str
+ * @returns {string}
+ */
+export function escape_script(str) {
+	return str.replace(OPEN_TAG_REGEX, '\\u003c').replace(CLOSE_TAG_REGEX, '\\u003e');
+}

package/src/utils/events.js

@@ -1,4 +1,4 @@
-/** @import { AddEventObject } from '../../types/index'*/
+/** @import { AddEventObject } from '../../types/index' */
 
 const NON_DELEGATED_EVENTS = new Set([
 	'abort',

package/types/index.d.ts

@@ -320,12 +320,13 @@ declare module 'estree' {
 	 */
 	interface Component extends AST.BaseNode {
 		type: 'Component';
-		// null is for anonymous components {component: () => {}}
+		// null is for anonymous components, e.g. `component(props) => {}`
 		id: AST.Identifier | null;
 		params: AST.Pattern[];
 		body: AST.Node[];
 		css: CSS.StyleSheet | null;
 		metadata: BaseNodeMetaData & {
+			arrow?: boolean;
 			topScopedClasses?: TopScopedClasses;
 			styleClasses?: StyleClasses;
 		};
@@ -1499,15 +1500,20 @@ export type StyleClasses = Map<string, AST.MemberExpression['property']>;
 /**
  * Event handling types
  */
-export interface AddEventObject {
+export interface AddEventOptions extends ExtendedEventOptions {
 	customName?: string;
-	// from AddEventListenerOptions
+}
+
+export interface AddEventObject extends AddEventOptions {
+	handleEvent(object: Event): void;
+}
+
+export interface ExtendedEventOptions {
+	capture?: boolean;
 	once?: boolean;
 	passive?: boolean;
 	signal?: AbortSignal;
-	capture?: boolean;
-	// from EventListenerObject
-	handleEvent?(object: Event): void;
+	delegated?: boolean;
 }
 
 /**

package/types/jsx-platform.d.ts

@@ -351,4 +351,4 @@ export function componentToFunctionDeclaration(
 	component: any,
 	ctx: any,
 	helperState?: any,
-): AST.FunctionDeclaration;
+): AST.FunctionDeclaration | AST.FunctionExpression | AST.ArrowFunctionExpression;