to_ts/TSX: emit nested component declarations as component props instead of children thunk content (#774)

Author: Copilot

.changeset/silent-lamps-raise.md

@@ -0,0 +1,6 @@
+---
+'ripple': patch
+---
+
+Fixes language server type support for nested component call inside a parent
+components that become props and should not be marked as unused by typescript

packages/ripple/src/compiler/phases/3-transform/client/index.js

@@ -2711,12 +2711,42 @@ function transform_ts_child(node, context) {
 		if (!node.selfClosing && !node.unclosed && !has_children_props && node.children.length > 0) {
 			const is_dom_element = is_element_dom_element(node);
 			const component_scope = /** @type {ScopeInterface} */ (context.state.scopes.get(node));
+			/** @type {AST.Node[]} */
+			const non_component_children = [];
+
+			for (let i = 0; i < node.children.length; i++) {
+				const child = node.children[i];
+				if (!is_dom_element && child.type === 'Component' && child.id) {
+					const transformed_component = /** @type {AST.FunctionDeclaration} */ (
+						visit(child, {
+							...state,
+							scope: component_scope,
+							metadata: { await: false },
+						})
+					);
+					const func = b.arrow(
+						transformed_component.params,
+						transformed_component.body,
+						transformed_component.async,
+					);
+					func.metadata = { ...func.metadata, is_component: true };
+					const id = b.jsx_id(
+						/** @type {AST.Identifier} */ (child.id).name,
+						/** @type {AST.NodeWithLocation} */ (child.id),
+					);
+					id.metadata = { ...id.metadata, is_component: true };
+					attributes.push(b.jsx_attribute(id, b.jsx_expression_container(func)));
+				} else {
+					non_component_children.push(child);
+				}
+			}
 			const thunk =
-				/** @type {AST.Identifier} */ (node.id).name === 'style'
+				/** @type {AST.Identifier} */ (node.id).name === 'style' ||
+				non_component_children.length === 0
 					? null
 					: b.thunk(
 							b.block(
-								transform_body(node.children, {
+								transform_body(non_component_children, {
 									...context,
 									state: {
 										...state,

packages/ripple/src/compiler/phases/3-transform/segments.js

@@ -639,6 +639,26 @@ export function convert_source_map_to_mappings(
 						if (node.name) {
 							visit(node.name);
 						}
+
+						if (
+							node.name.type === 'JSXIdentifier' &&
+							node.name.metadata?.is_component &&
+							node.name.loc
+						) {
+							const mapping = get_mapping_from_node(
+								node.name,
+								src_to_gen_map,
+								gen_line_offsets,
+								mapping_data,
+							);
+							mapping.sourceOffsets = [
+								/** @type {AST.NodeWithLocation} */ (node.name).start - 'component '.length,
+							];
+							mapping.lengths = ['component'.length];
+
+							mapping.data.customData.hover = replace_label_to_component;
+							mappings.push(mapping);
+						}
 						if (node.value) {
 							visit(node.value);
 						}

packages/ripple/src/compiler/types/index.d.ts

@@ -575,6 +575,9 @@ declare module 'estree-jsx' {
 
 	interface JSXIdentifier {
 		tracked?: boolean;
+		metadata: BaseNodeMetaData & {
+			is_component?: boolean;
+		};
 	}
 
 	interface JSXEmptyExpression {

packages/ripple/tests/client/compiler/compiler.basic.test.ripple

@@ -357,6 +357,23 @@ export component App() {
 		expect(() => compile(code, 'test.ripple')).not.toThrow();
 	});
 
+	it('converts nested component children into props in Volar mappings', () => {
+		const source = `
+export component App() {
+	<ark.div class="host-class" data-value="42">
+		component asChild({ children, href, ...rest }: { href: string; [key: string]: any }) {
+			<a id="aschild-anchor" {href} {...rest} data-extra="yes">{'Link'}</a>
+		}
+	</ark.div>
+}
+`;
+		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+
+		expect(result).toContain('<ark.div class="host-class" data-value="42" asChild={');
+		expect(result).not.toContain('children={() =>');
+		expect(result).not.toContain('function asChild');
+	});
+
 	it('should not error on `this` MemberExpression with a UpdateExpression', () => {
 		const code = `
 class Test {