ripple 0.3.2 → 0.3.4

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

@@ -26,6 +26,8 @@ import {
 	is_binding_function,
 	is_element_dynamic,
 	is_ripple_track_call,
+	is_ripple_import,
+	ripple_import_requires_block,
 	hash,
 	flatten_switch_consequent,
 	get_ripple_namespace_call_name,
@@ -73,6 +75,23 @@ function build_return_guard(flags) {
 	return condition;
 }
 
+/**
+ * @param {AST.ClassDeclaration | AST.ClassExpression} node
+ * @param {TransformServerContext} context
+ * @returns {void}
+ */
+function strip_class_typescript_syntax(node, context) {
+	delete node.typeParameters;
+	delete node.superTypeParameters;
+	delete node.implements;
+
+	if (node.superClass?.type === 'TSInstantiationExpression') {
+		node.superClass = /** @type {AST.Expression} */ (context.visit(node.superClass.expression));
+	} else if (node.superClass && 'typeArguments' in node.superClass) {
+		delete node.superClass.typeArguments;
+	}
+}
+
 /**
  * Collects all unique return statements from the direct children of a body
  * @param {AST.Node[]} children
@@ -307,6 +326,27 @@ const visitors = {
 		const parent = /** @type {AST.Node} */ (context.path.at(-1));
 
 		if (is_reference(node, parent)) {
+			// Apply lazy destructuring binding transforms only
+			const binding = context.state.scope?.get(node.name);
+			if (
+				binding?.transform?.read &&
+				binding.node !== node &&
+				(binding.kind === 'lazy' || binding.kind === 'lazy_fallback')
+			) {
+				const transformed = binding.transform.read(node);
+				if (node.tracked) {
+					const is_right_side_of_assignment =
+						parent.type === 'AssignmentExpression' && parent.right === node;
+					if (
+						(parent.type !== 'AssignmentExpression' && parent.type !== 'UpdateExpression') ||
+						is_right_side_of_assignment
+					) {
+						return b.call('_$_.get', transformed);
+					}
+				}
+				return transformed;
+			}
+
 			if (node.tracked) {
 				const is_right_side_of_assignment =
 					parent.type === 'AssignmentExpression' && parent.right === node;
@@ -323,13 +363,24 @@ const visitors = {
 	},
 
 	Component(node, context) {
+		let props_param_output;
+
 		if (node.params.length > 0) {
 			let props_param = node.params[0];
 
 			if (props_param.type === 'Identifier') {
 				delete props_param.typeAnnotation;
-			} else if (props_param.type === 'ObjectPattern') {
+				props_param_output = props_param;
+			} else if (props_param.type === 'ObjectPattern' || props_param.type === 'ArrayPattern') {
 				delete props_param.typeAnnotation;
+				if (props_param.lazy) {
+					// Lazy destructuring: use __props identifier, bindings resolved via transforms
+					props_param_output = b.id('__props');
+				} else {
+					props_param_output = props_param;
+				}
+			} else {
+				props_param_output = props_param;
 			}
 		}
 
@@ -378,7 +429,7 @@ const visitors = {
 
 		let component_fn = b.function(
 			node.id,
-			node.params.length > 0 ? [b.id('__output'), node.params[0]] : [b.id('__output')],
+			node.params.length > 0 ? [b.id('__output'), props_param_output] : [b.id('__output')],
 			b.block([
 				...(metadata.await
 					? [b.return(b.call('_$_.async', b.thunk(b.block(body_statements), true)))]
@@ -454,17 +505,19 @@ const visitors = {
 		}
 
 		const callee = node.callee;
-		const source_name = callee.type === 'Identifier' ? callee.metadata?.source_name : undefined;
-		const ripple_runtime_method = get_ripple_namespace_call_name(source_name);
 
-		if (ripple_runtime_method !== null) {
-			return {
-				...node,
-				callee: b.member(b.id('_$_'), b.id(ripple_runtime_method)),
-				arguments: /** @type {(AST.Expression | AST.SpreadElement)[]} */ ([
-					...node.arguments.map((arg) => context.visit(arg)),
-				]),
-			};
+		// Handle direct calls to ripple-imported functions: effect(), untrack(), RippleArray(), etc.
+		if (callee.type === 'Identifier' && is_ripple_import(callee, context)) {
+			const ripple_runtime_method = get_ripple_namespace_call_name(callee.name);
+			if (ripple_runtime_method !== null) {
+				return {
+					...node,
+					callee: b.member(b.id('_$_'), b.id(ripple_runtime_method)),
+					arguments: /** @type {(AST.Expression | AST.SpreadElement)[]} */ ([
+						...node.arguments.map((arg) => context.visit(arg)),
+					]),
+				};
+			}
 		}
 
 		if (is_ripple_track_call(callee, context)) {
@@ -488,18 +541,16 @@ const visitors = {
 			};
 		}
 
-		// Check for more than two nested level calls, like #ripple.array.from()
+		// Handle member calls on ripple imports, like RippleArray.from()
 		if (
 			callee.type === 'MemberExpression' &&
-			callee.object.metadata?.source_name?.startsWith('#ripple.') &&
 			callee.object.type === 'Identifier' &&
-			callee.property.type === 'Identifier'
+			callee.property.type === 'Identifier' &&
+			is_ripple_import(callee, context)
 		) {
 			const object = callee.object;
 			const property = callee.property;
-			const source_name = /** @type {string} */ (object.metadata?.source_name);
-
-			const method_name = get_ripple_namespace_call_name(source_name);
+			const method_name = get_ripple_namespace_call_name(object.name);
 			if (method_name !== null) {
 				return b.member(
 					b.id('_$_'),
@@ -525,6 +576,20 @@ const visitors = {
 		if (!context.state.to_ts) {
 			delete node.typeArguments;
 		}
+
+		// Transform `new RippleArray(...)`, `new RippleMap(...)`, etc. imported from 'ripple'
+		if (callee.type === 'Identifier' && is_ripple_import(callee, context)) {
+			const ripple_runtime_method = get_ripple_namespace_call_name(callee.name);
+			if (ripple_runtime_method !== null) {
+				return b.call(
+					'_$_.' + ripple_runtime_method,
+					.../** @type {(AST.Expression | AST.SpreadElement)[]} */ (
+						node.arguments.map((arg) => context.visit(arg))
+					),
+				);
+			}
+		}
+
 		return context.next();
 	},
 
@@ -535,16 +600,44 @@ const visitors = {
 		return context.next();
 	},
 
+	ClassDeclaration(node, context) {
+		if (!context.state.to_ts) {
+			strip_class_typescript_syntax(node, context);
+		}
+		return context.next();
+	},
+
+	ClassExpression(node, context) {
+		if (!context.state.to_ts) {
+			strip_class_typescript_syntax(node, context);
+		}
+		return context.next();
+	},
+
 	FunctionDeclaration(node, context) {
 		if (!context.state.to_ts) {
 			delete node.returnType;
 			delete node.typeParameters;
-			for (const param of node.params) {
+			for (let i = 0; i < node.params.length; i++) {
+				const param = node.params[i];
 				delete param.typeAnnotation;
 				// Handle AssignmentPattern (parameters with default values)
 				if (param.type === 'AssignmentPattern' && param.left) {
 					delete param.left.typeAnnotation;
 				}
+				// Replace lazy destructuring params with generated identifiers
+				const pattern = param.type === 'AssignmentPattern' ? param.left : param;
+				if (
+					(pattern.type === 'ObjectPattern' || pattern.type === 'ArrayPattern') &&
+					pattern.lazy &&
+					pattern.metadata?.lazy_id
+				) {
+					const id = b.id(pattern.metadata.lazy_id);
+					node.params[i] =
+						param.type === 'AssignmentPattern'
+							? /** @type {AST.AssignmentPattern} */ ({ ...param, left: id })
+							: id;
+				}
 			}
 		}
 		return context.next();
@@ -554,12 +647,26 @@ const visitors = {
 		if (!context.state.to_ts) {
 			delete node.returnType;
 			delete node.typeParameters;
-			for (const param of node.params) {
+			for (let i = 0; i < node.params.length; i++) {
+				const param = node.params[i];
 				delete param.typeAnnotation;
 				// Handle AssignmentPattern (parameters with default values)
 				if (param.type === 'AssignmentPattern' && param.left) {
 					delete param.left.typeAnnotation;
 				}
+				// Replace lazy destructuring params with generated identifiers
+				const pattern = param.type === 'AssignmentPattern' ? param.left : param;
+				if (
+					(pattern.type === 'ObjectPattern' || pattern.type === 'ArrayPattern') &&
+					pattern.lazy &&
+					pattern.metadata?.lazy_id
+				) {
+					const id = b.id(pattern.metadata.lazy_id);
+					node.params[i] =
+						param.type === 'AssignmentPattern'
+							? /** @type {AST.AssignmentPattern} */ ({ ...param, left: id })
+							: id;
+				}
 			}
 		}
 		return context.next();
@@ -579,12 +686,26 @@ const visitors = {
 	ArrowFunctionExpression(node, context) {
 		delete node.returnType;
 		delete node.typeParameters;
-		for (const param of node.params) {
+		for (let i = 0; i < node.params.length; i++) {
+			const param = node.params[i];
 			delete param.typeAnnotation;
 			// Handle AssignmentPattern (parameters with default values)
 			if (param.type === 'AssignmentPattern' && param.left) {
 				delete param.left.typeAnnotation;
 			}
+			// Replace lazy destructuring params with generated identifiers
+			const pattern = param.type === 'AssignmentPattern' ? param.left : param;
+			if (
+				(pattern.type === 'ObjectPattern' || pattern.type === 'ArrayPattern') &&
+				pattern.lazy &&
+				pattern.metadata?.lazy_id
+			) {
+				const id = b.id(pattern.metadata.lazy_id);
+				node.params[i] =
+					param.type === 'AssignmentPattern'
+						? /** @type {AST.AssignmentPattern} */ ({ ...param, left: id })
+						: id;
+			}
 		}
 
 		return context.next();
@@ -726,6 +847,15 @@ const visitors = {
 		for (const declarator of node.declarations) {
 			if (!context.state.to_ts) {
 				delete declarator.id.typeAnnotation;
+
+				// Replace lazy destructuring patterns with the generated identifier
+				if (
+					(declarator.id.type === 'ObjectPattern' || declarator.id.type === 'ArrayPattern') &&
+					declarator.id.lazy &&
+					declarator.id.metadata?.lazy_id
+				) {
+					declarator.id = b.id(declarator.id.metadata.lazy_id);
+				}
 			}
 		}
 
@@ -984,10 +1114,7 @@ const visitors = {
 			/** @type {AST.Expression | null} */
 			let children_prop = null;
 
-			if (state.applyParentCssScope) {
-				// We're inside a component, don't continue applying css hash to class
-				state.applyParentCssScope = undefined;
-			}
+			const apply_parent_css_scope = state.applyParentCssScope;
 
 			for (const attr of node.attributes) {
 				if (attr.type === 'Attribute') {
@@ -1051,6 +1178,14 @@ const visitors = {
 				const children = /** @type {AST.Expression} */ (
 					visit(b.component(b.id('children'), [], children_filtered), {
 						...context.state,
+						...(apply_parent_css_scope ||
+						(is_element_dynamic(node) && node.metadata.scoped && state.component?.css)
+							? {
+									applyParentCssScope:
+										apply_parent_css_scope ||
+										/** @type {AST.CSS.StyleSheet} */ (state.component?.css).hash,
+								}
+							: {}),
 						scope: component_scope,
 						namespace: child_namespace,
 					})
@@ -1293,6 +1428,23 @@ const visitors = {
 	AssignmentExpression(node, context) {
 		const left = node.left;
 
+		// Handle lazy binding assignments (e.g., a = 5 where a is from let &{a} = obj)
+		if (left.type === 'Identifier') {
+			const binding = context.state.scope?.get(left.name);
+			if (binding?.transform?.assign && binding.node !== left) {
+				let value = /** @type {AST.Expression} */ (context.visit(node.right));
+
+				// For compound operators (+=, -=, *=, /=), expand to read + operation
+				if (node.operator !== '=') {
+					const operator = node.operator.slice(0, -1); // '+=' -> '+'
+					const current = binding.transform.read(left);
+					value = b.binary(/** @type {AST.BinaryOperator} */ (operator), current, value);
+				}
+
+				return binding.transform.assign(left, value);
+			}
+		}
+
 		if (
 			left.type === 'MemberExpression' &&
 			(left.tracked || (left.property.type === 'Identifier' && left.property.tracked))
@@ -1346,6 +1498,14 @@ const visitors = {
 	UpdateExpression(node, context) {
 		const argument = node.argument;
 
+		// Handle lazy binding updates (e.g., a++ where a is from let &{a} = obj)
+		if (argument.type === 'Identifier') {
+			const binding = context.state.scope?.get(argument.name);
+			if (binding?.transform?.update && binding.node !== argument) {
+				return binding.transform.update(node);
+			}
+		}
+
 		if (
 			argument.type === 'MemberExpression' &&
 			(argument.tracked || (argument.property.type === 'Identifier' && argument.property.tracked))
@@ -1563,23 +1723,6 @@ const visitors = {
 		return b.call('_$_.get', /** @type {AST.Expression} */ (context.visit(node.argument)));
 	},
 
-	RippleObjectExpression(node, context) {
-		// For SSR, we just evaluate the object as-is since there's no reactivity
-		return b.object(
-			/** @type {(AST.Property | AST.SpreadElement)[]} */
-			(node.properties.map((prop) => context.visit(prop))),
-		);
-	},
-
-	RippleArrayExpression(node, context) {
-		return b.call(
-			'_$_.ripple_array',
-			.../** @type {(AST.Expression | AST.SpreadElement)[]} */ (
-				node.elements.map((el) => context.visit(/** @type {AST.Node} */ (el)))
-			),
-		);
-	},
-
 	MemberExpression(node, context) {
 		if (
 			node.tracked ||

package/src/compiler/types/index.d.ts

@@ -13,25 +13,7 @@ interface BaseNodeMetaData {
 	scoped?: boolean;
 	path: AST.Node[];
 	has_template?: boolean;
-	source_name?:
-		| string
-		| '#ripple'
-		| '#ripple.map'
-		| '#ripple.set'
-		| '#ripple.server'
-		| '#ripple.style'
-		| '#ripple.array'
-		| '#ripple.object'
-		| '#ripple.effect'
-		| '#ripple.track'
-		| '#ripple.trackSplit'
-		| '#ripple.untrack'
-		| '#ripple.url'
-		| '#ripple.urlSearchParams'
-		| '#ripple.date'
-		| '#ripple.mediaQuery'
-		| '#ripple.context'
-		| '#ripple.validate';
+	source_name?: string | '#server' | '#style';
 	is_capitalized?: boolean;
 	has_await?: boolean;
 	commentContainerId?: number;
@@ -43,6 +25,7 @@ interface BaseNodeMetaData {
 	is_reactive?: boolean;
 	lone_return?: boolean;
 	forceMapping?: boolean;
+	lazy_id?: string;
 }
 
 interface FunctionMetaData extends BaseNodeMetaData {
@@ -103,13 +86,13 @@ declare module 'estree' {
 
 	interface ClassDeclaration {
 		typeParameters?: AST.TSTypeParameterDeclaration;
-		superTypeArguments?: AST.TSTypeParameterInstantiation;
+		superTypeParameters?: AST.TSTypeParameterInstantiation;
 		implements?: AST.TSClassImplements[];
 	}
 
 	interface ClassExpression {
 		typeParameters?: AST.TSTypeParameterDeclaration;
-		superTypeArguments?: AST.TSTypeParameterInstantiation;
+		superTypeParameters?: AST.TSTypeParameterInstantiation;
 		implements?: AST.TSClassImplements[];
 	}
 
@@ -123,6 +106,14 @@ declare module 'estree' {
 		optional: boolean;
 	}
 
+	// Lazy destructuring patterns (&{...} and &[...])
+	interface ObjectPattern {
+		lazy?: boolean;
+	}
+	interface ArrayPattern {
+		lazy?: boolean;
+	}
+
 	// We mark the whole node as marked when member is @[expression]
 	// Otherwise, we only mark Identifier nodes
 	interface MemberExpression extends AST.TrackedNode {}
@@ -161,8 +152,6 @@ declare module 'estree' {
 	}
 
 	interface ExpressionMap {
-		RippleArrayExpression: RippleArrayExpression;
-		RippleObjectExpression: RippleObjectExpression;
 		TrackedExpression: TrackedExpression;
 		StyleIdentifier: StyleIdentifier;
 		ServerIdentifier: ServerIdentifier;
@@ -359,21 +348,11 @@ declare module 'estree' {
 	/**
 	 * Tracked Expressions
 	 */
-	interface RippleArrayExpression extends Omit<AST.ArrayExpression, 'type'> {
-		type: 'RippleArrayExpression';
-		elements: (AST.Expression | AST.SpreadElement | null)[];
-	}
-
 	interface TrackedExpression extends AST.BaseExpression {
 		argument: AST.Expression;
 		type: 'TrackedExpression';
 	}
 
-	interface RippleObjectExpression extends Omit<AST.ObjectExpression, 'type'> {
-		type: 'RippleObjectExpression';
-		properties: (AST.Property | AST.SpreadElement)[];
-	}
-
 	/**
 	 * Ripple attribute nodes
 	 */
@@ -1136,6 +1115,8 @@ export type BindingKind =
 	| 'rest_prop'
 	| 'prop'
 	| 'prop_fallback'
+	| 'lazy'
+	| 'lazy_fallback'
 	| 'index';
 
 /**

package/src/compiler/utils.js

@@ -164,18 +164,18 @@ const DOM_PROPERTIES = [
 ];
 
 /** @type {Record<string, string>} */
-const RIPPLE_NAMESPACE_CALL_NAME = {
-	'#ripple.url': 'ripple_url',
-	'#ripple.urlSearchParams': 'ripple_url_search_params',
-	'#ripple.date': 'ripple_date',
-	'#ripple.map': 'ripple_map',
-	'#ripple.set': 'ripple_set',
-	'#ripple.mediaQuery': 'media_query',
-	'#ripple.context': 'context',
-	'#ripple.effect': 'effect',
-	'#ripple.untrack': 'untrack',
-	'#ripple.array': 'ripple_array',
-	'#ripple.object': 'ripple_object',
+const RIPPLE_IMPORT_CALL_NAME = {
+	RippleURL: 'ripple_url',
+	RippleURLSearchParams: 'ripple_url_search_params',
+	RippleDate: 'ripple_date',
+	RippleMap: 'ripple_map',
+	RippleSet: 'ripple_set',
+	MediaQuery: 'media_query',
+	Context: 'context',
+	effect: 'effect',
+	untrack: 'untrack',
+	RippleArray: 'ripple_array',
+	RippleObject: 'ripple_object',
 };
 
 /**
@@ -298,14 +298,17 @@ export function is_ripple_track_call(callee, context) {
 	// Super expressions cannot be Ripple track calls
 	if (callee.type === 'Super') return false;
 
+	if (callee.type === 'Identifier' && (callee.name === 'track' || callee.name === 'trackSplit')) {
+		return is_ripple_import(callee, context);
+	}
+
 	return (
-		(callee.type === 'Identifier' && (callee.name === 'track' || callee.name === 'trackSplit')) ||
-		(callee.type === 'MemberExpression' &&
-			callee.object.type === 'Identifier' &&
-			callee.property.type === 'Identifier' &&
-			(callee.property.name === 'track' || callee.property.name === 'trackSplit') &&
-			!callee.computed &&
-			is_ripple_import(callee, context))
+		callee.type === 'MemberExpression' &&
+		callee.object.type === 'Identifier' &&
+		callee.property.type === 'Identifier' &&
+		(callee.property.name === 'track' || callee.property.name === 'trackSplit') &&
+		!callee.computed &&
+		is_ripple_import(callee, context)
 	);
 }
 
@@ -936,5 +939,14 @@ export function flatten_switch_consequent(consequent) {
  * @returns {string | null}
  */
 export function get_ripple_namespace_call_name(name) {
-	return name == null ? null : (RIPPLE_NAMESPACE_CALL_NAME[name] ?? null);
+	return name == null ? null : (RIPPLE_IMPORT_CALL_NAME[name] ?? null);
+}
+
+/**
+ * Returns true if the given import name requires a __block parameter
+ * @param {string} name
+ * @returns {boolean}
+ */
+export function ripple_import_requires_block(name) {
+	return name !== 'effect' && name !== 'untrack' && name !== 'Context';
 }

package/src/runtime/index-client.js

@@ -172,20 +172,3 @@ import {
 	ref_prop as createRefKey,
 } from './internal/client/runtime.js';
 import { user_effect as effect } from './internal/client/blocks.js';
-
-export const ripple_namespace = {
-	map: RippleMap,
-	set: RippleSet,
-	array: RippleArray,
-	object: RippleObject,
-	context: Context,
-	url: RippleURL,
-	urlSearchParams: RippleURLSearchParams,
-	date: RippleDate,
-	mediaQuery: MediaQuery,
-	createRefKey,
-	track,
-	trackSplit,
-	effect,
-	untrack,
-};