ripple 0.2.134 → 0.2.135

package/src/compiler/phases/3-transform/client/index.js

@@ -317,21 +317,21 @@ const visitors = {
 		if (!context.state.to_ts) {
 			return b.empty;
 		}
-		context.next();
+		return context.next();
 	},
 
 	TSInterfaceDeclaration(_, context) {
 		if (!context.state.to_ts) {
 			return b.empty;
 		}
-		context.next();
+		return context.next();
 	},
 
 	TSMappedType(_, context) {
 		if (!context.state.to_ts) {
 			return b.empty;
 		}
-		context.next();
+		return context.next();
 	},
 
 	NewExpression(node, context) {
@@ -384,7 +384,7 @@ const visitors = {
 
 	TrackedArrayExpression(node, context) {
 		if (context.state.to_ts) {
-			const arrayAlias = import_from_ripple_if_needed("TrackedArray", context);
+			const arrayAlias = import_from_ripple_if_needed('TrackedArray', context);
 
 			return b.call(
 				b.member(b.id(arrayAlias), b.id('from')),
@@ -401,12 +401,9 @@ const visitors = {
 
 	TrackedObjectExpression(node, context) {
 		if (context.state.to_ts) {
-			const objectAlias = import_from_ripple_if_needed("TrackedObject", context);
+			const objectAlias = import_from_ripple_if_needed('TrackedObject', context);
 
-			return b.new(
-				b.id(objectAlias),
-				b.object(node.properties.map((prop) => context.visit(prop))),
-			);
+			return b.new(b.id(objectAlias), b.object(node.properties.map((prop) => context.visit(prop))));
 		}
 
 		return b.call(
@@ -466,14 +463,17 @@ const visitors = {
 		}
 
 		if (node.tracked || (node.property.type === 'Identifier' && node.property.tracked)) {
+			// In TypeScript mode, skip the transformation and let transform_ts_child handle it
 			add_ripple_internal_import(context);
 
-			return b.call(
-				'_$_.get_property',
-				context.visit(node.object),
-				node.computed ? context.visit(node.property) : b.literal(node.property.name),
-				node.optional ? b.true : undefined,
-			);
+			if (!context.state.to_ts) {
+				return b.call(
+					'_$_.get_property',
+					context.visit(node.object),
+					node.computed ? context.visit(node.property) : b.literal(node.property.name),
+					node.optional ? b.true : undefined,
+				);
+			}
 		}
 
 		if (node.object.type === 'MemberExpression' && node.object.optional) {
@@ -499,7 +499,7 @@ const visitors = {
 				}
 			}
 		} else {
-			context.next();
+			return context.next();
 		}
 	},
 
@@ -549,18 +549,68 @@ const visitors = {
 	},
 
 	JSXText(node, context) {
+		if (context.state.to_ts) {
+			return context.next();
+		}
 		return b.literal(node.value + '');
 	},
 
 	JSXIdentifier(node, context) {
+		if (context.state.to_ts) {
+			return context.next();
+		}
 		return b.id(node.name);
 	},
 
 	JSXExpressionContainer(node, context) {
+		if (context.state.to_ts) {
+			return context.next();
+		}
 		return context.visit(node.expression);
 	},
 
+	JSXFragment(node, context) {
+		if (context.state.to_ts) {
+			return context.next();
+		}
+		const attributes = node.openingFragment.attributes;
+		const normalized_children = node.children.filter((child) => {
+			return child.type !== 'JSXText' || child.value.trim() !== '';
+		});
+
+		const props = b.object(
+			attributes.map((attr) => {
+				if (attr.type === 'JSXAttribute') {
+					return b.prop('init', context.visit(attr.name), context.visit(attr.value));
+				} else if (attr.type === 'JSXSpreadAttribute') {
+					return b.spread(context.visit(attr.argument));
+				}
+			}),
+		);
+
+		if (normalized_children.length > 0) {
+			props.properties.push(
+				b.prop(
+					'init',
+					b.id('children'),
+					normalized_children.length === 1
+						? context.visit(normalized_children[0])
+						: b.array(normalized_children.map((child) => context.visit(child))),
+				),
+			);
+		}
+
+		return b.call(
+			normalized_children.length > 1 ? '__compat.jsxs' : '__compat.jsx',
+			b.id('__compat.Fragment'),
+			props,
+		);
+	},
+
 	JSXElement(node, context) {
+		if (context.state.to_ts) {
+			return context.next();
+		}
 		const name = node.openingElement.name;
 		const attributes = node.openingElement.attributes;
 		const normalized_children = node.children.filter((child) => {
@@ -577,7 +627,7 @@ const visitors = {
 			}),
 		);
 
-		if (normalize_children.length > 0) {
+		if (normalized_children.length > 0) {
 			props.properties.push(
 				b.prop(
 					'init',
@@ -590,7 +640,7 @@ const visitors = {
 		}
 
 		return b.call(
-			'__compat.jsx',
+			normalized_children.length > 1 ? '__compat.jsxs' : '__compat.jsx',
 			name.type === 'JSXIdentifier' && name.name[0].toLowerCase() === name.name[0]
 				? b.literal(name.name)
 				: context.visit(name),
@@ -682,6 +732,29 @@ const visitors = {
 			const local_updates = [];
 			const is_void = is_void_element(node.id.name);
 
+			let scoping_hash = null;
+			if (node.metadata.scoped && state.component.css) {
+				scoping_hash = state.component.css.hash;
+			} else {
+				let inside_dynamic_children = false;
+				for (let i = context.path.length - 1; i >= 0; i--) {
+					const anc = context.path[i];
+					if (anc && anc.type === 'Component' && anc.metadata && anc.metadata.inherited_css) {
+						inside_dynamic_children = true;
+						break;
+					}
+				}
+				if (inside_dynamic_children) {
+					for (let i = context.path.length - 1; i >= 0; i--) {
+						const anc = context.path[i];
+						if (anc && anc.type === 'Component' && anc.css) {
+							scoping_hash = anc.css.hash;
+							break;
+						}
+					}
+				}
+			}
+
 			state.template.push(`<${node.id.name}`);
 
 			for (const attr of node.attributes) {
@@ -851,8 +924,8 @@ const visitors = {
 				if (class_attribute.value.type === 'Literal') {
 					let value = class_attribute.value.value;
 
-					if (node.metadata.scoped && state.component.css) {
-						value = `${state.component.css.hash} ${value}`;
+					if (scoping_hash) {
+						value = `${scoping_hash} ${value}`;
 					}
 
 					handle_static_attr(class_attribute.name.name, value);
@@ -861,10 +934,7 @@ const visitors = {
 					const metadata = { tracking: false, await: false };
 					let expression = visit(class_attribute.value, { ...state, metadata });
 
-					const hash_arg =
-						node.metadata.scoped && state.component.css
-							? b.literal(state.component.css.hash)
-							: undefined;
+					const hash_arg = scoping_hash ? b.literal(scoping_hash) : undefined;
 					const is_html = context.state.metadata.namespace === 'html' && node.id.name !== 'svg';
 
 					if (metadata.tracking) {
@@ -877,10 +947,8 @@ const visitors = {
 						);
 					}
 				}
-			} else if (node.metadata.scoped && state.component.css) {
-				const value = state.component.css.hash;
-
-				handle_static_attr(is_spreading ? '#class' : 'class', value);
+			} else if (scoping_hash) {
+				handle_static_attr(is_spreading ? '#class' : 'class', scoping_hash);
 			}
 
 			if (style_attribute !== null) {
@@ -1019,7 +1087,14 @@ const visitors = {
 
 			if (children_filtered.length > 0) {
 				const component_scope = context.state.scopes.get(node);
-				const children = visit(b.component(b.id('children'), [], children_filtered), {
+				const children_component = b.component(b.id('children'), [], children_filtered);
+
+				children_component.metadata = {
+					...(children_component.metadata || {}),
+					inherited_css: true,
+				};
+
+				const children = visit(children_component, {
 					...context.state,
 					scope: component_scope,
 					namespace: child_namespace,
@@ -1143,7 +1218,7 @@ const visitors = {
 			const operator = node.operator;
 			const right = node.right;
 
-			if (operator !== '=') {
+			if (operator !== '=' && context.state.metadata?.tracking === false) {
 				context.state.metadata.tracking = true;
 			}
 
@@ -1197,7 +1272,9 @@ const visitors = {
 			(argument.tracked || (argument.property.type === 'Identifier' && argument.property.tracked))
 		) {
 			add_ripple_internal_import(context);
-			context.state.metadata.tracking = true;
+			if (context.state.metadata?.tracking === false) {
+				context.state.metadata.tracking = true;
+			}
 
 			return b.call(
 				node.prefix ? '_$_.update_pre_property' : '_$_.update_property',
@@ -1613,7 +1690,17 @@ function transform_ts_child(node, context) {
 		state.init.push(b.stmt(visit(node.expression, { ...state })));
 	} else if (node.type === 'Element') {
 		// Use capitalized name for dynamic components/elements in TypeScript output
-		const type = node.metadata?.ts_name || node.id.name;
+		// If node.id is not an Identifier (e.g., MemberExpression like props.children),
+		// we need to visit it to get the proper expression
+		let type_expression;
+		let type_is_expression = false;
+		if (node.id.type === 'MemberExpression') {
+			// For MemberExpressions, we need to create a JSXExpression, not a JSXIdentifier
+			type_expression = visit(node.id, state);
+			type_is_expression = true;
+		} else {
+			type_expression = node.metadata?.ts_name || node.id.name;
+		}
 		const children = [];
 		let has_children_props = false;
 
@@ -1651,9 +1738,7 @@ function transform_ts_child(node, context) {
 				const createRefKeyAlias = import_from_ripple_if_needed('createRefKey', context);
 				const metadata = { await: false };
 				const argument = visit(attr.argument, { ...state, metadata });
-				const wrapper = b.object(
-					[b.prop('init', b.call(createRefKeyAlias), argument, true)]
-				);
+				const wrapper = b.object([b.prop('init', b.call(createRefKeyAlias), argument, true)]);
 				return b.jsx_spread_attribute(wrapper);
 			}
 		});
@@ -1678,33 +1763,40 @@ function transform_ts_child(node, context) {
 			}
 		}
 
-		const opening_type = b.jsx_id(type);
-		// Use node.id.loc if available, otherwise create a loc based on the element's position
-		opening_type.loc = node.id.loc || {
-			start: {
-				line: node.loc.start.line,
-				column: node.loc.start.column + 2, // After "<@"
-			},
-			end: {
-				line: node.loc.start.line,
-				column: node.loc.start.column + 2 + type.length,
-			},
-		};
-
-		let closing_type = undefined;
+		let opening_type, closing_type;
 
-		if (!node.selfClosing) {
-			closing_type = b.jsx_id(type);
-			closing_type.loc = {
+		if (type_is_expression) {
+			// For dynamic/expression-based components (e.g., props.children),
+			// use JSX expression instead of identifier
+			opening_type = type_expression;
+			closing_type = node.selfClosing ? undefined : type_expression;
+		} else {
+			opening_type = b.jsx_id(type_expression);
+			// Use node.id.loc if available, otherwise create a loc based on the element's position
+			opening_type.loc = node.id.loc || {
 				start: {
-					line: node.loc.end.line,
-					column: node.loc.end.column - type.length - 1,
+					line: node.loc.start.line,
+					column: node.loc.start.column + 2, // After "<@"
 				},
 				end: {
-					line: node.loc.end.line,
-					column: node.loc.end.column - 1,
+					line: node.loc.start.line,
+					column: node.loc.start.column + 2 + type_expression.length,
 				},
 			};
+
+			if (!node.selfClosing) {
+				closing_type = b.jsx_id(type_expression);
+				closing_type.loc = {
+					start: {
+						line: node.loc.end.line,
+						column: node.loc.end.column - type_expression.length - 1,
+					},
+					end: {
+						line: node.loc.end.line,
+						column: node.loc.end.column - 1,
+					},
+				};
+			}
 		}
 
 		const jsxElement = b.jsx_element(
@@ -1819,8 +1911,14 @@ function transform_ts_child(node, context) {
 		state.init.push(component);
 	} else if (node.type === 'BreakStatement') {
 		state.init.push(b.break);
-	} else {
+	} else if (node.type === 'TsxCompat') {
+		const children = node.children
+			.map((child) => visit(child, state))
+			.filter((child) => child.type !== 'JSXText' || child.value.trim() !== '');
+
 		debugger;
+		state.init.push(b.stmt(b.jsx_fragment(children)));
+	} else {
 		throw new Error('TODO');
 	}
 }
@@ -2077,6 +2175,56 @@ function create_tsx_with_typescript_support() {
 			context.visit(node.typeAnnotation);
 			context.write(')');
 		},
+		// Custom handler for TSMappedType: { [K in keyof T]: T[K] }
+		TSMappedType(node, context) {
+			context.write('{ ');
+			if (node.readonly) {
+				if (node.readonly === '+' || node.readonly === true) {
+					context.write('readonly ');
+				} else if (node.readonly === '-') {
+					context.write('-readonly ');
+				}
+			}
+			context.write('[');
+			// Visit the entire type parameter (TSTypeParameter node)
+			if (node.typeParameter) {
+				context.visit(node.typeParameter);
+			}
+			context.write(']');
+			if (node.optional) {
+				if (node.optional === '+' || node.optional === true) {
+					context.write('?');
+				} else if (node.optional === '-') {
+					context.write('-?');
+				}
+			}
+			context.write(': ');
+			// Visit the value type - could be either typeAnnotation or nameType
+			if (node.typeAnnotation) {
+				context.visit(node.typeAnnotation);
+			} else if (node.nameType) {
+				context.visit(node.nameType);
+			}
+			context.write(' }');
+		},
+		// Custom handler for TSTypeParameter: K in T (for mapped types)
+		// acord ts has a bug where `in` is printed as `extends`, so we override it here
+		TSTypeParameter(node, context) {
+			// For mapped types, the name is just a string, not an Identifier node
+			if (typeof node.name === 'string') {
+				context.write(node.name);
+			} else if (node.name && node.name.name) {
+				context.write(node.name.name);
+			}
+			if (node.constraint) {
+				context.write(' in ');
+				context.visit(node.constraint);
+			}
+			if (node.default) {
+				context.write(' = ');
+				context.visit(node.default);
+			}
+		},
 		// Override the ArrowFunctionExpression handler to support TypeScript return types
 		ArrowFunctionExpression(node, context) {
 			if (node.async) context.write('async ');
@@ -2108,7 +2256,7 @@ function create_tsx_with_typescript_support() {
 			} else {
 				context.visit(node.body);
 			}
-		}
+		},
 	};
 }
 
@@ -2124,7 +2272,12 @@ export function transform_client(filename, source, analysis, to_ts) {
 	const ripple_user_imports = new Map(); // exported -> local
 	if (analysis && analysis.ast && Array.isArray(analysis.ast.body)) {
 		for (const stmt of analysis.ast.body) {
-			if (stmt && stmt.type === 'ImportDeclaration' && stmt.source && stmt.source.value === 'ripple') {
+			if (
+				stmt &&
+				stmt.type === 'ImportDeclaration' &&
+				stmt.source &&
+				stmt.source.value === 'ripple'
+			) {
 				for (const spec of stmt.specifiers || []) {
 					if (spec.type === 'ImportSpecifier' && spec.imported && spec.local) {
 						ripple_user_imports.set(spec.imported.name, spec.local.name);

package/src/runtime/internal/client/blocks.js

@@ -124,17 +124,32 @@ export function ref(element, get_fn) {
 }
 
 /**
- * @param {() => void} fn
+ * @param {() => (void | (() => void))} fn
  * @param {CompatOptions} [compat]
  * @returns {Block}
  */
 export function root(fn, compat) {
+	var target_fn = fn;
+
 	if (compat != null) {
+		/** @type {Array<void | (() => void)>} */
+		var unmounts = [];
 		for (var key in compat) {
 			var api = compat[key];
-			api.createRoot();
+			unmounts.push(api.createRoot());
 		}
+		target_fn = () => {
+			var component_unmount = fn();
+
+			return () => {
+				component_unmount?.();
+				for (var unmount of unmounts) {
+					unmount?.();
+				}
+			};
+		};
 	}
+
 	return block(ROOT_BLOCK, fn, { compat });
 }
 

package/src/utils/builders.js

@@ -753,6 +753,23 @@ export function jsx_element(
 	return element;
 }
 
+/**
+ * @param {Array<ESTree.JSXText | ESTree.JSXExpressionContainer | ESTree.JSXSpreadChild | ESTree.JSXElement | ESTree.JSXFragment>} children
+ * @returns {ESTree.JSXFragment}
+ */
+export function jsx_fragment(children = []) {
+	return {
+		type: 'JSXFragment',
+		openingFragment: {
+			type: 'JSXOpeningFragment',
+		},
+		closingFragment: {
+			type: 'JSXClosingFragment',
+		},
+		children,
+	};
+}
+
 /**
  * @param {ESTree.Expression | ESTree.JSXEmptyExpression} expression
  * @returns {ESTree.JSXExpressionContainer}

package/tests/client/basic/basic.components.test.ripple

@@ -3,7 +3,7 @@ import { track, flushSync } from 'ripple';
 describe('basic client > components & composition', () => {
 	it('renders with component composition and children', () => {
 		component Card(props) {
-			<div class='card'>
+			<div class="card">
 				<props.children />
 			</div>
 		}
@@ -27,16 +27,14 @@ describe('basic client > components & composition', () => {
 
 	it('renders with nested components and prop passing', () => {
 		component Button(props) {
-			<button class={props.variant} onClick={props.onClick}>
-				{props.label}
-			</button>
+			<button class={props.variant} onClick={props.onClick}>{props.label}</button>
 		}
 
 		component Card(props) {
-			<div class='card'>
+			<div class="card">
 				<h3>{props.title}</h3>
 				<p>{props.content}</p>
-				<Button variant='primary' label={props.buttonText} onClick={props.onAction} />
+				<Button variant="primary" label={props.buttonText} onClick={props.onAction} />
 			</div>
 		}
 
@@ -44,12 +42,12 @@ describe('basic client > components & composition', () => {
 			let clicked = track(false);
 
 			<Card
-				title='Test Card'
-				content='This is a test card'
-				buttonText='Click me'
+				title="Test Card"
+				content="This is a test card"
+				buttonText="Click me"
 				onAction={() => @clicked = true}
 			/>
-			<div class='status'>{@clicked ? 'Clicked' : 'Not clicked'}</div>
+			<div class="status">{@clicked ? 'Clicked' : 'Not clicked'}</div>
 		}
 
 		render(Basic);
@@ -74,8 +72,8 @@ describe('basic client > components & composition', () => {
 
 	it('renders with reactive component props', () => {
 		component ChildComponent(props) {
-			<div class='child-content'>{props.@text}</div>
-			<div class='child-count'>{props.@count}</div>
+			<div class="child-content">{props.@text}</div>
+			<div class="child-count">{props.@count}</div>
 		}
 
 		component Basic() {
@@ -83,10 +81,14 @@ describe('basic client > components & composition', () => {
 			let number = track(1);
 
 			<ChildComponent text={message} count={number} />
-			<button onClick={() => {
-				@message = @message === 'Hello' ? 'Goodbye' : 'Hello';
-				@number++;
-			}}>{'Update Props'}</button>
+			<button
+				onClick={() => {
+					@message = @message === 'Hello' ? 'Goodbye' : 'Hello';
+					@number++;
+				}}
+			>
+				{'Update Props'}
+			</button>
 		}
 
 		render(Basic);
@@ -139,7 +141,9 @@ describe('basic client > components & composition', () => {
 						@hasError = true;
 					}
 				}}
-			>{'Nonexistent'}</button>
+			>
+				{'Nonexistent'}
+			</button>
 			<button
 				onClick={() => {
 					@hasError = false;
@@ -149,7 +153,9 @@ describe('basic client > components & composition', () => {
 						@hasError = true;
 					}
 				}}
-			>{'Nonexistent chaining'}</button>
+			>
+				{'Nonexistent chaining'}
+			</button>
 			<button
 				onClick={() => {
 					@hasError = false;
@@ -159,7 +165,9 @@ describe('basic client > components & composition', () => {
 						@hasError = true;
 					}
 				}}
-			>{'Object null'}</button>
+			>
+				{'Object null'}
+			</button>
 			<button
 				onClick={() => {
 					@hasError = false;
@@ -169,7 +177,9 @@ describe('basic client > components & composition', () => {
 						@hasError = true;
 					}
 				}}
-			>{'Object null chained'}</button>
+			>
+				{'Object null chained'}
+			</button>
 			<button onClick={() => obj.arr[obj.arr.length - 1]()}>{'BinaryExpression prop'}</button>
 
 			<span>{obj.@count}</span>