ripple 0.2.133 → 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,14 +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) => {
@@ -573,7 +627,7 @@ const visitors = {
 			}),
 		);
 
-		if (normalize_children.length > 0) {
+		if (normalized_children.length > 0) {
 			props.properties.push(
 				b.prop(
 					'init',
@@ -586,7 +640,7 @@ const visitors = {
 		}
 
 		return b.call(
-			'_$_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),
@@ -678,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) {
@@ -847,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);
@@ -857,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) {
@@ -873,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) {
@@ -1015,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,
@@ -1139,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;
 			}
 
@@ -1193,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',
@@ -1609,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;
 
@@ -1647,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);
 			}
 		});
@@ -1674,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(
@@ -1815,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');
 	}
 }
@@ -2064,9 +2166,66 @@ function transform_body(body, { visit, state }) {
 function create_tsx_with_typescript_support() {
 	const base_tsx = tsx();
 
-	// Override the ArrowFunctionExpression handler to support TypeScript return types
+	// Add custom TypeScript node handlers that aren't in tsx
 	return {
 		...base_tsx,
+		// Custom handler for TSParenthesizedType: (Type)
+		TSParenthesizedType(node, context) {
+			context.write('(');
+			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 ');
 
@@ -2097,7 +2256,7 @@ function create_tsx_with_typescript_support() {
 			} else {
 				context.visit(node.body);
 			}
-		}
+		},
 	};
 }
 
@@ -2113,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/index-client.js

@@ -1,4 +1,4 @@
-/** @import { Block } from '#client' */
+/** @import { Block, CompatOptions } from '#client' */
 
 import { destroy_block, root } from './internal/client/blocks.js';
 import { handle_root_events } from './internal/client/events.js';
@@ -12,7 +12,7 @@ export { jsx, jsxs, Fragment } from '../jsx-runtime.js';
 
 /**
  * @param {(anchor: Node, props: Record<string, any>, active_block: Block | null) => void} component
- * @param {{ props?: Record<string, any>, target: HTMLElement }} options
+ * @param {{ props?: Record<string, any>, target: HTMLElement, compat?: CompatOptions }} options
  * @returns {() => void}
  */
 export function mount(component, options) {
@@ -34,7 +34,7 @@ export function mount(component, options) {
 
 	const _root = root(() => {
 		component(anchor, props, active_block);
-	});
+	}, options.compat);
 
 	return () => {
 		cleanup_events();

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

@@ -1,4 +1,4 @@
-/** @import { Block, Derived } from '#client' */
+/** @import { Block, Derived, CompatOptions } from '#client' */
 
 import {
 	BLOCK_HAS_RUN,
@@ -124,11 +124,33 @@ export function ref(element, get_fn) {
 }
 
 /**
- * @param {() => void} fn
+ * @param {() => (void | (() => void))} fn
+ * @param {CompatOptions} [compat]
  * @returns {Block}
  */
-export function root(fn) {
-	return block(ROOT_BLOCK, fn);
+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];
+			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/runtime/internal/client/compat.js

@@ -1,8 +1,40 @@
+/** @import { CompatApi } from '#client' */
+
+import { ROOT_BLOCK } from "./constants";
+import { active_block } from "./runtime";
+
 /**
- * @param {string} kind 
- * @param {Node} node 
- * @param {() => JSX.Element[]} children_fn 
+ * @param {string} kind
+ * @returns {CompatApi | null}
+ */
+function get_compat_from_root(kind)  {
+	var current = active_block;
+
+	while (current !== null) {
+		if ((current.f & ROOT_BLOCK) !== 0) {
+			var api = current.s.compat[kind];
+
+			if (api != null) {
+				return api;
+			}
+		}
+		current = current.p;
+	}
+
+	return null;
+}
+
+/**
+ * @param {string} kind
+ * @param {Node} node
+ * @param {() => JSX.Element[]} children_fn
  */
 export function tsx_compat(kind, node, children_fn) {
-  throw new Error("Not implemented yet");
-}
+	var compat = get_compat_from_root(kind);
+
+	if (compat == null) {
+		throw new Error(`No compat API found for kind "${kind}"`);
+	}
+
+	compat.createComponent(node, children_fn);
+}

package/src/runtime/internal/client/types.d.ts

@@ -53,3 +53,13 @@ export type Block = {
 	// teardown function
 	t: (() => {}) | null;
 };
+
+export type CompatApi = {
+	createRoot: () => void;
+	createComponent: (node: any, children_fn: () => any) => void;
+	jsx: (type: any, props: any) => any;
+}
+
+export type CompatOptions = {
+	[key: string]: CompatApi;
+}

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}