@tsrx/react 0.0.1 → 0.0.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "React compiler built on @tsrx/core",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/index.js

@@ -1,4 +1,5 @@
 /** @import * as AST from 'estree' */
+/** @import { CodeMapping, ParseOptions } from '@tsrx/core/types' */
 
 import { createVolarMappingsResult, parseModule } from '@tsrx/core';
 import { transform } from './transform.js';
@@ -7,10 +8,11 @@ import { transform } from './transform.js';
  * Parse tsrx-react source code to an ESTree AST.
  * @param {string} source
  * @param {string} [filename]
+ * @param {ParseOptions} [options]
  * @returns {AST.Program}
  */
-export function parse(source, filename) {
-	return parseModule(source, filename);
+export function parse(source, filename, options) {
+	return parseModule(source, filename, options);
 }
 
 /**
@@ -32,13 +34,13 @@ export function compile(source, filename) {
  *
  * @param {string} source
  * @param {string} [filename]
+ * @param {ParseOptions} [options]
  * @returns {import('@tsrx/core/types').VolarMappingsResult}
  */
-export function compile_to_volar_mappings(source, filename) {
-	const ast = parseModule(source, filename);
+export function compile_to_volar_mappings(source, filename, options) {
+	const ast = parseModule(source, filename, options);
 	const transformed = transform(ast, source, filename);
-
-	return createVolarMappingsResult({
+	const result = createVolarMappingsResult({
 		ast: transformed.ast,
 		ast_from_source: ast,
 		source,
@@ -46,4 +48,59 @@ export function compile_to_volar_mappings(source, filename) {
 		source_map: transformed.map,
 		errors: [],
 	});
+
+	return {
+		...result,
+		mappings: dedupe_mappings(result.mappings),
+	};
+}
+
+/**
+ * Remove byte-for-byte duplicate mappings. React helper extraction can emit
+ * identical mapping entries for the same source and generated span, which
+ * causes Volar to merge duplicate hover/navigation results.
+ *
+ * @param {CodeMapping[]} mappings
+ * @returns {CodeMapping[]}
+ */
+function dedupe_mappings(mappings) {
+	const deduped = [];
+	const seen = new Set();
+
+	for (const mapping of mappings) {
+		const key = JSON.stringify(serialize_mapping_value(mapping));
+
+		if (seen.has(key)) {
+			continue;
+		}
+
+		seen.add(key);
+		deduped.push(mapping);
+	}
+
+	return deduped;
+}
+
+/**
+ * @param {unknown} value
+ * @returns {unknown}
+ */
+function serialize_mapping_value(value) {
+	if (typeof value === 'function') {
+		return value.toString();
+	}
+
+	if (Array.isArray(value)) {
+		return value.map(serialize_mapping_value);
+	}
+
+	if (value && typeof value === 'object') {
+		return Object.fromEntries(
+			Object.entries(value)
+				.sort(([left], [right]) => left.localeCompare(right))
+				.map(([key, nested_value]) => [key, serialize_mapping_value(nested_value)]),
+		);
+	}
+
+	return value;
 }

package/src/transform.js

@@ -77,7 +77,9 @@ export function transform(ast, source, filename) {
 
 		Text(node, { next }) {
 			const inner = /** @type {any} */ (next() ?? node);
-			return /** @type {any} */ (to_jsx_expression_container(inner.expression, inner));
+			return /** @type {any} */ (
+				to_jsx_expression_container(to_text_expression(inner.expression, inner), inner)
+			);
 		},
 
 		TSRXExpression(node, { next }) {
@@ -133,12 +135,18 @@ function component_to_function_declaration(component, transform_context) {
 		metadata: {
 			path: [],
 			is_component: true,
-			is_method: true,
 		},
 	});
 
 	fn.metadata.generated_helpers = helper_state.helpers;
 
+	if (fn.id) {
+		fn.id.metadata = /** @type {AST.Identifier['metadata']} */ ({
+			...fn.id.metadata,
+			is_component: true,
+		});
+	}
+
 	setLocation(fn, /** @type {any} */ (component), true);
 	return fn;
 }
@@ -460,10 +468,16 @@ function create_helper_function_declaration(
 		metadata: {
 			path: [],
 			is_component: true,
-			is_method: true,
 		},
 	});
 
+	if (fn.id) {
+		fn.id.metadata = /** @type {AST.Identifier['metadata']} */ ({
+			...fn.id.metadata,
+			is_component: true,
+		});
+	}
+
 	return set_loc(fn, source_node);
 }
 
@@ -799,6 +813,22 @@ function is_style_element(node) {
 	);
 }
 
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_composite_element(node) {
+	if (!node || node.type !== 'Element' || !node.id) {
+		return false;
+	}
+
+	if (node.id.type === 'Identifier') {
+		return /^[A-Z]/.test(node.id.name);
+	}
+
+	return node.id.type === 'MemberExpression';
+}
+
 /**
  * Recursively walk Element nodes within a component body and add the hash
  * class name so scope-qualified selectors (e.g. `.foo.hash`) match.
@@ -819,7 +849,7 @@ function annotate_with_hash(node, hash) {
 	}
 
 	if (node.type === 'Element') {
-		if (!is_style_element(node)) {
+		if (!is_style_element(node) && !is_composite_element(node)) {
 			add_hash_class(node, hash);
 		}
 		if (Array.isArray(node.children)) {
@@ -1274,6 +1304,7 @@ function to_jsx_child(node, transform_context) {
 		case 'Element':
 			return to_jsx_element(node, transform_context);
 		case 'Text':
+			return to_jsx_expression_container(to_text_expression(node.expression, node), node);
 		case 'TSRXExpression':
 			return to_jsx_expression_container(node.expression, node);
 		case 'IfStatement':
@@ -1826,6 +1857,54 @@ function to_jsx_expression_container(expression, source_node = expression) {
 	});
 }
 
+/**
+ * Ripple's `{text expr}` always renders text, even for booleans and objects.
+ * React's normal `{expr}` child semantics would drop booleans and render
+ * elements as elements, so we coerce to a text value explicitly.
+ * @param {AST.Expression} expression
+ * @param {any} [source_node]
+ * @returns {AST.Expression}
+ */
+function to_text_expression(expression, source_node = expression) {
+	return set_loc(
+		/** @type {AST.Expression} */ ({
+			type: 'ConditionalExpression',
+			test: {
+				type: 'BinaryExpression',
+				operator: '==',
+				left: clone_expression_node(expression),
+				right: {
+					type: 'Literal',
+					value: null,
+					raw: 'null',
+					metadata: { path: [] },
+				},
+				metadata: { path: [] },
+			},
+			consequent: {
+				type: 'Literal',
+				value: '',
+				raw: "''",
+				metadata: { path: [] },
+			},
+			alternate: {
+				type: 'BinaryExpression',
+				operator: '+',
+				left: clone_expression_node(expression),
+				right: {
+					type: 'Literal',
+					value: '',
+					raw: "''",
+					metadata: { path: [] },
+				},
+				metadata: { path: [] },
+			},
+			metadata: { path: [] },
+		}),
+		source_node,
+	);
+}
+
 /**
  * @param {any} attr
  * @returns {ESTreeJSX.JSXAttribute | ESTreeJSX.JSXSpreadAttribute}

package/types/index.d.ts

@@ -1,7 +1,7 @@
 import type { Program } from 'estree';
-import type { VolarMappingsResult } from '@tsrx/core/types';
+import type { ParseOptions, VolarMappingsResult } from '@tsrx/core/types';
 
-export function parse(source: string, filename?: string): Program;
+export function parse(source: string, filename?: string, options?: ParseOptions): Program;
 
 export function compile(
 	source: string,
@@ -12,4 +12,8 @@ export function compile(
 	css: { code: string; hash: string } | null;
 };
 
-export function compile_to_volar_mappings(source: string, filename?: string): VolarMappingsResult;
+export function compile_to_volar_mappings(
+	source: string,
+	filename?: string,
+	options?: ParseOptions,
+): VolarMappingsResult;