@tsrx/core 0.0.4 → 0.0.6

package/src/transform/scoping.js

@@ -0,0 +1,180 @@
+/**
+ * Framework-agnostic CSS scoping utilities shared between the `@tsrx/react`
+ * and `@tsrx/solid` transforms. These walk the template AST and annotate
+ * `Element` nodes with a hash class so scope-qualified selectors
+ * (e.g. `.foo.hash`) match after rendering.
+ */
+
+import { walk } from 'zimmerframe';
+
+/**
+ * Mark every selector inside the stylesheet as "used" so `renderStylesheets`
+ * does not comment it out. We skip selector-pruning because component
+ * boundaries can be dynamic — any selector authored inside the component's
+ * `<style>` block is considered intentional.
+ *
+ * @param {any} stylesheet
+ * @returns {any}
+ */
+export function prepare_stylesheet_for_render(stylesheet) {
+	walk(stylesheet, null, {
+		_(node, { next }) {
+			if (node && node.metadata && typeof node.metadata === 'object') {
+				node.metadata.used = true;
+				if (node.type === 'RelativeSelector' && !node.metadata.is_global) {
+					node.metadata.scoped = true;
+				}
+			}
+			return next();
+		},
+	});
+	return stylesheet;
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+export function is_style_element(node) {
+	return (
+		node &&
+		node.type === 'Element' &&
+		node.id &&
+		node.id.type === 'Identifier' &&
+		node.id.name === 'style'
+	);
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+export 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.
+ *
+ * @param {any} node
+ * @param {string} hash
+ * @returns {any}
+ */
+export function annotate_with_hash(node, hash) {
+	if (!node || typeof node !== 'object') return node;
+	if (
+		node.type === 'Component' ||
+		node.type === 'FunctionDeclaration' ||
+		node.type === 'FunctionExpression' ||
+		node.type === 'ArrowFunctionExpression'
+	) {
+		return node;
+	}
+
+	if (node.type === 'Element') {
+		if (!is_style_element(node) && !is_composite_element(node)) {
+			add_hash_class(node, hash);
+		}
+		if (Array.isArray(node.children)) {
+			node.children = node.children
+				.filter((/** @type {any} */ child) => !is_style_element(child))
+				.map((/** @type {any} */ child) => annotate_with_hash(child, hash));
+		}
+		return node;
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata' || key === 'css') {
+			continue;
+		}
+
+		const value = node[key];
+		if (Array.isArray(value)) {
+			node[key] = value.map((/** @type {any} */ child) => annotate_with_hash(child, hash));
+		} else if (value && typeof value === 'object') {
+			node[key] = annotate_with_hash(value, hash);
+		}
+	}
+
+	return node;
+}
+
+/**
+ * @param {any} component
+ * @param {string} hash
+ * @returns {void}
+ */
+export function annotate_component_with_hash(component, hash) {
+	/** @type {any[]} */
+	const body = component.body;
+	component.body = body
+		.filter((/** @type {any} */ child) => !is_style_element(child))
+		.map((/** @type {any} */ child) => annotate_with_hash(child, hash));
+}
+
+/**
+ * Ensure the element carries a `class` attribute containing the scoping hash.
+ *
+ * @param {any} element
+ * @param {string} hash
+ * @returns {void}
+ */
+export function add_hash_class(element, hash) {
+	const attrs = element.attributes || (element.attributes = []);
+	const existing = attrs.find(
+		(/** @type {any} */ a) =>
+			a.type === 'Attribute' &&
+			a.name &&
+			a.name.type === 'Identifier' &&
+			(a.name.name === 'class' || a.name.name === 'className'),
+	);
+
+	if (!existing) {
+		attrs.push({
+			type: 'Attribute',
+			name: { type: 'Identifier', name: 'class' },
+			value: { type: 'Literal', value: hash, raw: JSON.stringify(hash) },
+		});
+		return;
+	}
+
+	const value = existing.value;
+	if (!value) {
+		existing.value = { type: 'Literal', value: hash, raw: JSON.stringify(hash) };
+		return;
+	}
+
+	if (value.type === 'Literal' && typeof value.value === 'string') {
+		const merged = `${value.value} ${hash}`;
+		existing.value = { type: 'Literal', value: merged, raw: JSON.stringify(merged) };
+		return;
+	}
+
+	// Dynamic expression. Concatenate at runtime via template literal.
+	const expression = value.type === 'JSXExpressionContainer' ? value.expression : value;
+	existing.value = {
+		type: 'TemplateLiteral',
+		expressions: [expression],
+		quasis: [
+			{
+				type: 'TemplateElement',
+				value: { raw: '', cooked: '' },
+				tail: false,
+			},
+			{
+				type: 'TemplateElement',
+				value: { raw: ` ${hash}`, cooked: ` ${hash}` },
+				tail: true,
+			},
+		],
+	};
+}

package/src/transform/segments.js

@@ -9,6 +9,7 @@
 	CodeMapping,
 	VolarMappingsResult,
 	PostProcessingChanges,
+	LineOffsets,
 } from '../../types/index';
 @import { CodeMapping as VolarCodeMapping } from '@volar/language-core';
  */
@@ -51,6 +52,7 @@ import {
 	mapping_data_verify_complete,
 	build_line_offsets,
 	get_mapping_from_node,
+	maybe_get_mapping_from_node,
 } from '../source-map-utils.js';
 
 const LABEL_TO_COMPONENT_REPLACE_REGEX = /(function|\((property|method)\))/;
@@ -668,9 +670,21 @@ export function convert_source_map_to_mappings(
 				return;
 			} else if (node.type === 'JSXExpressionContainer') {
 				if (node.loc) {
-					mappings.push(
-						get_mapping_from_node(node, src_to_gen_map, gen_line_offsets, mapping_data_verify_only),
+					// Use maybe_get_mapping_from_node because a transform may set the
+					// container's loc to the source range of the original `{...}`
+					// construct (e.g. a Ripple TSRXExpression or Text node), while
+					// esrap only emits a segment for the inner expression. In that
+					// case the container's start/end won't resolve — skip rather
+					// than hard-failing, and rely on the inner expression's mapping.
+					const mapping = maybe_get_mapping_from_node(
+						node,
+						src_to_gen_map,
+						gen_line_offsets,
+						mapping_data_verify_only,
 					);
+					if (!(mapping instanceof Error)) {
+						mappings.push(mapping);
+					}
 				}
 				// Visit the expression inside {}
 				if (node.expression) {
@@ -726,24 +740,38 @@ export function convert_source_map_to_mappings(
 					}
 				}
 
-				if (closing || opening.selfClosing) {
-					// Add the whole closing tag or the self-closing
-					const mapping = get_mapping_from_node(
-						closing ? closing : opening,
-						src_to_gen_map,
-						gen_line_offsets,
-						mapping_data_verify_only,
-					);
+				if ((closing?.loc || opening.loc) && (closing || opening.selfClosing)) {
+					// Add the whole closing tag or the self-closing.
+					// For self-closing elements, use maybe_get_mapping_from_node because
+					// attribute transforms (e.g. class→className, {ref fn}→ref={fn}) can shift
+					// the position of `/>` in the generated output, making the source map
+					// entry for the opening element's end position unresolvable.
+					const target_node = closing ? closing : opening;
+					const mapping = closing
+						? get_mapping_from_node(
+								target_node,
+								src_to_gen_map,
+								gen_line_offsets,
+								mapping_data_verify_only,
+							)
+						: maybe_get_mapping_from_node(
+								target_node,
+								src_to_gen_map,
+								gen_line_offsets,
+								mapping_data_verify_only,
+							);
 
-					// The generated code includes a semicolon after the closing or self-closed tag
-					// We're extending the mapping to include the semicolon
-					// because the diagnostics errors can include the whole element
-					// and we need to account for the semicolon as it's a part of the diagnostic
-					// At the same time, we could've instead applied this logic to the whole `node` element
-					// but since we already map the opening - start, we just need the proper end
-					// and it was causing some issues with mappings
-					mapping.generatedLengths = [mapping.generatedLengths[0] + 1];
-					mappings.push(mapping);
+					if (!(mapping instanceof Error)) {
+						// The generated code includes a semicolon after the closing or self-closed tag
+						// We're extending the mapping to include the semicolon
+						// because the diagnostics errors can include the whole element
+						// and we need to account for the semicolon as it's a part of the diagnostic
+						// At the same time, we could've instead applied this logic to the whole `node` element
+						// but since we already map the opening - start, we just need the proper end
+						// and it was causing some issues with mappings
+						mapping.generatedLengths = [mapping.generatedLengths[0] + 1];
+						mappings.push(mapping);
+					}
 				}
 
 				if (closing) {
@@ -769,37 +797,52 @@ export function convert_source_map_to_mappings(
 					let start = node_fn.start;
 					const async_keyword = 'async';
 
-					if (node_fn.async) {
-						// We explicitly mapped async and function in esrap
+					if (is_component && node_fn.id?.loc) {
+						const mapping = get_mapping_from_node(node_fn.id, src_to_gen_map, gen_line_offsets);
+						const generated_id_start = mapping.generatedOffsets[0];
+						const generated_keyword_start = find_component_keyword_offset(
+							generated_code,
+							generated_id_start,
+						);
+						mapping.sourceOffsets = [start];
+						mapping.lengths = [source_func_keyword.length];
+						mapping.generatedOffsets = [generated_keyword_start];
+						mapping.generatedLengths = ['function'.length];
+						mapping.data.customData.hover = replace_label_to_component;
+						mappings.push(mapping);
+					} else {
+						if (node_fn.async) {
+							// We explicitly mapped async and function in esrap
+							tokens.push({
+								source: async_keyword,
+								generated: async_keyword,
+								loc: {
+									start: { line: node_fn.loc.start.line, column: start_col },
+									end: {
+										line: node_fn.loc.start.line,
+										column: start_col + async_keyword.length,
+									},
+								},
+								metadata: {},
+							});
+
+							start_col += async_keyword.length + 1; // +1 for space
+							start += async_keyword.length + 1;
+						}
+
 						tokens.push({
-							source: async_keyword,
-							generated: async_keyword,
+							source: source_func_keyword,
+							generated: 'function',
 							loc: {
 								start: { line: node_fn.loc.start.line, column: start_col },
 								end: {
 									line: node_fn.loc.start.line,
-									column: start_col + async_keyword.length,
+									column: start_col + source_func_keyword.length,
 								},
 							},
-							metadata: {},
+							metadata: is_component ? { hover: replace_label_to_component } : {},
 						});
-
-						start_col += async_keyword.length + 1; // +1 for space
-						start += async_keyword.length + 1;
 					}
-
-					tokens.push({
-						source: source_func_keyword,
-						generated: 'function',
-						loc: {
-							start: { line: node_fn.loc.start.line, column: start_col },
-							end: {
-								line: node_fn.loc.start.line,
-								column: start_col + source_func_keyword.length,
-							},
-						},
-						metadata: is_component ? { hover: replace_label_to_component } : {},
-					});
 				}
 
 				// Visit in source order: id, params, body
@@ -982,9 +1025,11 @@ export function convert_source_map_to_mappings(
 					visit(node.body);
 				}
 
-				mappings.push(
-					get_mapping_from_node(node, src_to_gen_map, gen_line_offsets, mapping_data_verify_only),
-				);
+				if (node.loc) {
+					mappings.push(
+						get_mapping_from_node(node, src_to_gen_map, gen_line_offsets, mapping_data_verify_only),
+					);
+				}
 
 				return;
 			} else if (node.type === 'WhileStatement' || node.type === 'DoWhileStatement') {
@@ -1321,9 +1366,11 @@ export function convert_source_map_to_mappings(
 					}
 				}
 
-				mappings.push(
-					get_mapping_from_node(node, src_to_gen_map, gen_line_offsets, mapping_data_verify_only),
-				);
+				if (node.loc) {
+					mappings.push(
+						get_mapping_from_node(node, src_to_gen_map, gen_line_offsets, mapping_data_verify_only),
+					);
+				}
 
 				return;
 			} else if (node.type === 'SwitchCase') {
@@ -2030,11 +2077,16 @@ export function convert_source_map_to_mappings(
 		);
 		const source_length = source_text.length;
 		const gen_length = gen_text.length;
-		const gen_line_col = get_generated_position(
-			token.loc.start.line,
-			token.loc.start.column,
-			src_to_gen_map,
-		);
+		let gen_line_col;
+		try {
+			gen_line_col = get_generated_position(
+				token.loc.start.line,
+				token.loc.start.column,
+				src_to_gen_map,
+			);
+		} catch {
+			continue;
+		}
 		const gen_start = loc_to_offset(gen_line_col.line, gen_line_col.column, gen_line_offsets);
 
 		/** @type {CustomMappingData} */
@@ -2138,3 +2190,117 @@ export function convert_source_map_to_mappings(
 		cssMappings,
 	};
 }
+
+/**
+ * @param {string} generated_code
+ * @param {number} generated_id_start
+ * @returns {number}
+ */
+function find_component_keyword_offset(generated_code, generated_id_start) {
+	const function_keyword_index = generated_code.lastIndexOf('function', generated_id_start);
+
+	if (function_keyword_index === -1) {
+		return generated_id_start;
+	}
+
+	return function_keyword_index;
+}
+
+/**
+ * Build a `VolarMappingsResult` from generated code plus source-map metadata.
+ *
+ * Framework packages are responsible for producing the generated AST/code/map.
+ * Core owns the generic mapping conversion and result envelope so the editor
+ * integration is not coupled to any specific framework package.
+ *
+ * @param {{
+ * 	ast: AST.Program,
+ * 	ast_from_source: AST.Program,
+ * 	source: string,
+ * 	generated_code: string,
+ * 	source_map: RawSourceMap,
+ * 	errors?: import('../../types/index').CompileError[],
+ * 	post_processing_changes?: PostProcessingChanges,
+ * 	line_offsets?: LineOffsets,
+ * }} params
+ * @returns {VolarMappingsResult}
+ */
+export function create_volar_mappings_result({
+	ast,
+	ast_from_source,
+	source,
+	generated_code,
+	source_map,
+	errors = [],
+	post_processing_changes,
+	line_offsets,
+}) {
+	return {
+		...convert_source_map_to_mappings(
+			ast,
+			ast_from_source,
+			source,
+			generated_code,
+			source_map,
+			/** @type {PostProcessingChanges} */ (post_processing_changes),
+			line_offsets ?? build_line_offsets(generated_code),
+		),
+		errors,
+	};
+}
+
+/**
+ * Remove byte-for-byte duplicate mappings. Framework compilers that extract
+ * shared helpers or replay JSX can emit identical mapping entries for the
+ * same source and generated span; Volar merges duplicates into a single
+ * hover/navigation result, so deduping upstream avoids a stutter.
+ *
+ * @param {CodeMapping[]} mappings
+ * @returns {CodeMapping[]}
+ */
+export 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;
+}
+
+/**
+ * Serialize a mapping (or any nested value) into a stable JSON-friendly
+ * shape so {@link dedupe_mappings} can compare two entries by content.
+ * Object keys are sorted and functions are reduced to their source so
+ * structurally-identical entries produce the same string.
+ *
+ * @param {unknown} value
+ * @returns {unknown}
+ */
+export 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/types/index.d.ts

@@ -1387,7 +1387,7 @@ export interface TransformClientState extends BaseState {
 	applyParentCssScope?: AST.CSS.StyleSheet['hash'];
 	skip_children_traversal: boolean;
 	return_flags?: Map<AST.ReturnStatement, { name: string; tracked: boolean }>;
-	is_ripple_element?: boolean;
+	is_tsrx_element?: boolean;
 }
 
 /** Override zimmerframe types and provide our own */

package/types/parse.d.ts

@@ -182,7 +182,12 @@ export namespace Parse {
 	}
 
 	export interface Options extends Omit<acorn.Options, 'onComment' | 'ecmaVersion'> {
-		rippleOptions: {
+		tsrxOptions?: {
+			loose: boolean;
+			errors: CoreCompiler.CompileError[];
+			filename: string | undefined;
+		};
+		rippleOptions?: {
 			loose: boolean;
 			errors: CoreCompiler.CompileError[];
 			filename: string | undefined;