ripple 0.3.9 → 0.3.11

package/src/compiler/phases/2-analyze/index.js

@@ -26,6 +26,7 @@ import {
 	is_inside_component,
 	is_ripple_track_call,
 	is_void_element,
+	is_children_template_expression as is_children_template_expression_in_scope,
 	normalize_children,
 	is_binding_function,
 	is_inside_try_block,
@@ -40,6 +41,123 @@ import { validate_nesting } from './validation.js';
 
 const valid_in_head = new Set(['title', 'base', 'link', 'meta', 'style', 'script', 'noscript']);
 
+const mutating_method_names = new Set([
+	'add',
+	'append',
+	'clear',
+	'copyWithin',
+	'delete',
+	'fill',
+	'pop',
+	'push',
+	'reverse',
+	'set',
+	'shift',
+	'sort',
+	'splice',
+	'unshift',
+]);
+
+/**
+ * @param {AST.MemberExpression} node
+ * @returns {string | null}
+ */
+function get_member_name(node) {
+	if (!node.computed && node.property.type === 'Identifier') {
+		return node.property.name;
+	}
+
+	if (node.computed && node.property.type === 'Literal') {
+		return typeof node.property.value === 'string' ? node.property.value : null;
+	}
+
+	return null;
+}
+
+/**
+ * @param {AST.CallExpression} node
+ * @returns {boolean}
+ */
+function is_mutating_call_expression(node) {
+	return (
+		node.callee.type === 'MemberExpression' &&
+		mutating_method_names.has(get_member_name(node.callee) ?? '')
+	);
+}
+
+/**
+ * Check if an expression contains side effects or other impure operations.
+ * Template expressions should be pure reads.
+ * @param {AST.Expression | AST.SpreadElement | AST.Super | AST.Pattern} node
+ * @returns {boolean}
+ */
+function expression_has_side_effects(node) {
+	switch (node.type) {
+		case 'AssignmentExpression':
+		case 'UpdateExpression':
+			return true;
+		case 'SequenceExpression':
+			return node.expressions.some(expression_has_side_effects);
+		case 'ConditionalExpression':
+			return (
+				expression_has_side_effects(node.test) ||
+				expression_has_side_effects(node.consequent) ||
+				expression_has_side_effects(node.alternate)
+			);
+		case 'LogicalExpression':
+		case 'BinaryExpression':
+			return (
+				expression_has_side_effects(/** @type {AST.Expression} */ (node.left)) ||
+				expression_has_side_effects(node.right)
+			);
+		case 'UnaryExpression':
+			// delete operator has side effects (removes object properties)
+			if (node.operator === 'delete') return true;
+			return expression_has_side_effects(node.argument);
+		case 'AwaitExpression':
+			return expression_has_side_effects(node.argument);
+		case 'ChainExpression':
+			return expression_has_side_effects(node.expression);
+		case 'MemberExpression':
+			return (
+				expression_has_side_effects(node.object) ||
+				(node.computed &&
+					expression_has_side_effects(/** @type {AST.Expression} */ (node.property)))
+			);
+		case 'CallExpression':
+			return (
+				is_mutating_call_expression(node) ||
+				expression_has_side_effects(node.callee) ||
+				node.arguments.some(expression_has_side_effects)
+			);
+		case 'NewExpression':
+			return (
+				expression_has_side_effects(node.callee) || node.arguments.some(expression_has_side_effects)
+			);
+		case 'TemplateLiteral':
+			return node.expressions.some(expression_has_side_effects);
+		case 'TaggedTemplateExpression':
+			return (
+				expression_has_side_effects(node.tag) ||
+				node.quasi.expressions.some(expression_has_side_effects)
+			);
+		case 'ArrayExpression':
+			return node.elements.some((el) => el !== null && expression_has_side_effects(el));
+		case 'ObjectExpression':
+			return node.properties.some((prop) =>
+				prop.type === 'SpreadElement'
+					? expression_has_side_effects(prop.argument)
+					: expression_has_side_effects(prop.value) ||
+						(prop.computed &&
+							expression_has_side_effects(/** @type {AST.Expression} */ (prop.key))),
+			);
+		case 'SpreadElement':
+			return expression_has_side_effects(node.argument);
+		default:
+			return false;
+	}
+}
+
 /**
  * @param {AnalysisContext['path']} path
  */
@@ -62,6 +180,7 @@ function mark_control_flow_has_template(path) {
 			node.type === 'TryStatement' ||
 			node.type === 'IfStatement' ||
 			node.type === 'SwitchStatement' ||
+			node.type === 'Tsx' ||
 			node.type === 'TsxCompat'
 		) {
 			node.metadata.has_template = true;
@@ -124,7 +243,11 @@ function setup_lazy_transforms(pattern, source_id, state, writable, is_track_cal
 
 						if (node.prefix) {
 							// ++count: return new value
-							return b.assignment('=', member, b.binary('+', fallback_read, delta));
+							return b.assignment(
+								'=',
+								/** @type {AST.Pattern} */ (member),
+								b.binary('+', fallback_read, delta),
+							);
 						} else {
 							// count++: return old value, write new value
 							// Use IIFE to declare temp variable
@@ -134,7 +257,13 @@ function setup_lazy_transforms(pattern, source_id, state, writable, is_track_cal
 									[],
 									b.block([
 										b.var(temp, fallback_read),
-										b.stmt(b.assignment('=', member, b.binary('+', temp, delta))),
+										b.stmt(
+											b.assignment(
+												'=',
+												/** @type {AST.Pattern} */ (member),
+												b.binary('+', temp, delta),
+											),
+										),
 										b.return(temp),
 									]),
 								),
@@ -197,7 +326,12 @@ function setup_lazy_array_transforms(pattern, source_id, state, writable) {
 			if (i === 0) {
 				// Fast path for index 0: use _$_.get(source) instead of source[0]
 				const read_expr = has_fallback
-					? () => b.call('_$_.fallback', b.call('_$_.get', source_id), fallback_value)
+					? () =>
+							b.call(
+								'_$_.fallback',
+								b.call('_$_.get', source_id),
+								/** @type {AST.Expression} */ (fallback_value),
+							)
 					: () => b.call('_$_.get', source_id);
 
 				// Signal that read already produces an unwrapped value (calls _$_.get internally)
@@ -246,6 +380,7 @@ function setup_lazy_array_transforms(pattern, source_id, state, writable) {
 					} else {
 						binding.transform.update = (node) => {
 							const fn_name = node.prefix ? '_$_.update_pre' : '_$_.update';
+							/** @type {AST.Expression[]} */
 							const args = [source_id];
 							if (node.operator === '--') {
 								args.push(b.literal(-1));
@@ -279,7 +414,10 @@ function setup_lazy_array_transforms(pattern, source_id, state, writable) {
 				binding.kind = path.has_default_value ? 'lazy_fallback' : 'lazy';
 
 				binding.transform = {
-					read: (_) => path.expression(base_expression(source_id)),
+					read: (_) =>
+						path.expression(
+							/** @type {AST.Identifier | AST.CallExpression} */ (base_expression(source_id)),
+						),
 				};
 
 				if (writable) {
@@ -287,7 +425,7 @@ function setup_lazy_array_transforms(pattern, source_id, state, writable) {
 						return b.assignment(
 							'=',
 							/** @type {AST.MemberExpression} */ (
-								path.update_expression(base_expression(source_id))
+								path.update_expression(/** @type {AST.Identifier} */ (base_expression(source_id)))
 							),
 							value,
 						);
@@ -295,12 +433,20 @@ function setup_lazy_array_transforms(pattern, source_id, state, writable) {
 
 					if (path.has_default_value) {
 						binding.transform.update = (node) => {
-							const member = path.update_expression(base_expression(source_id));
-							const fallback_read = path.expression(base_expression(source_id));
+							const member = path.update_expression(
+								/** @type {AST.Identifier} */ (base_expression(source_id)),
+							);
+							const fallback_read = path.expression(
+								/** @type {AST.Identifier | AST.CallExpression} */ (base_expression(source_id)),
+							);
 							const delta = node.operator === '++' ? b.literal(1) : b.literal(-1);
 
 							if (node.prefix) {
-								return b.assignment('=', member, b.binary('+', fallback_read, delta));
+								return b.assignment(
+									'=',
+									/** @type {AST.Pattern} */ (member),
+									b.binary('+', fallback_read, delta),
+								);
 							} else {
 								const temp = b.id('_v');
 								return b.call(
@@ -308,7 +454,13 @@ function setup_lazy_array_transforms(pattern, source_id, state, writable) {
 										[],
 										b.block([
 											b.var(temp, fallback_read),
-											b.stmt(b.assignment('=', member, b.binary('+', temp, delta))),
+											b.stmt(
+												b.assignment(
+													'=',
+													/** @type {AST.Pattern} */ (member),
+													b.binary('+', temp, delta),
+												),
+											),
 											b.return(temp),
 										]),
 									),
@@ -319,7 +471,7 @@ function setup_lazy_array_transforms(pattern, source_id, state, writable) {
 						binding.transform.update = (node) =>
 							b.update(
 								node.operator,
-								path.update_expression(base_expression(source_id)),
+								path.update_expression(/** @type {AST.Identifier} */ (base_expression(source_id))),
 								node.prefix,
 							);
 					}
@@ -347,11 +499,11 @@ function unwrap_type_annotation(type_annotation) {
 
 	while (annotation) {
 		if (annotation.type === 'TSParenthesizedType') {
-			annotation = annotation.typeAnnotation;
+			annotation = /** @type {AST.TypeNode | undefined} */ (annotation.typeAnnotation);
 			continue;
 		}
 		if (annotation.type === 'TSOptionalType') {
-			annotation = annotation.typeAnnotation;
+			annotation = /** @type {AST.TypeNode | undefined} */ (annotation.typeAnnotation);
 			continue;
 		}
 		break;
@@ -374,11 +526,11 @@ function normalize_tuple_element_type(type_annotation) {
 			continue;
 		}
 		if (annotation.type === 'TSParenthesizedType') {
-			annotation = annotation.typeAnnotation;
+			annotation = /** @type {AST.TypeNode} */ (annotation.typeAnnotation);
 			continue;
 		}
 		if (annotation.type === 'TSOptionalType') {
-			annotation = annotation.typeAnnotation;
+			annotation = /** @type {AST.TypeNode} */ (annotation.typeAnnotation);
 			continue;
 		}
 		break;
@@ -430,7 +582,7 @@ function get_object_property_type_annotation(type_annotation, property) {
 		return undefined;
 	}
 
-	const key_name = get_object_pattern_key_name(property.key);
+	const key_name = get_object_pattern_key_name(/** @type {AST.Expression} */ (property.key));
 	if (key_name === null) {
 		return undefined;
 	}
@@ -687,37 +839,6 @@ function error_return_keyword(node, context, message) {
 	);
 }
 
-/**
- * @param {AST.Expression} expression
- * @returns {AST.Expression}
- */
-function unwrap_template_expression(expression) {
-	/** @type {AST.Expression} */
-	let node = expression;
-
-	while (true) {
-		if (
-			node.type === 'ParenthesizedExpression' ||
-			node.type === 'TSAsExpression' ||
-			node.type === 'TSSatisfiesExpression' ||
-			node.type === 'TSNonNullExpression' ||
-			node.type === 'TSInstantiationExpression'
-		) {
-			node = /** @type {AST.Expression} */ (node.expression);
-			continue;
-		}
-
-		if (node.type === 'ChainExpression') {
-			node = /** @type {AST.Expression} */ (node.expression);
-			continue;
-		}
-
-		break;
-	}
-
-	return node;
-}
-
 /**
  * @param {AST.Expression} expression
  * @param {Context<AST.Node, AnalysisState>} context
@@ -726,44 +847,7 @@ function unwrap_template_expression(expression) {
 function is_children_template_expression(expression, context) {
 	const component = context.path.findLast((node) => node.type === 'Component');
 	const component_scope = component ? context.state.scopes.get(component) : null;
-	const unwrapped = unwrap_template_expression(expression);
-
-	if (unwrapped.type === 'MemberExpression') {
-		let property_name = null;
-
-		if (!unwrapped.computed && unwrapped.property.type === 'Identifier') {
-			property_name = unwrapped.property.name;
-		} else if (
-			unwrapped.computed &&
-			unwrapped.property.type === 'Literal' &&
-			typeof unwrapped.property.value === 'string'
-		) {
-			property_name = unwrapped.property.value;
-		}
-
-		if (property_name === 'children') {
-			const target = unwrap_template_expression(/** @type {AST.Expression} */ (unwrapped.object));
-
-			if (target.type === 'Identifier') {
-				const binding = context.state.scope.get(target.name);
-				return binding?.declaration_kind === 'param' && binding.scope === component_scope;
-			}
-		}
-	}
-
-	if (unwrapped.type !== 'Identifier' || unwrapped.name !== 'children') {
-		return false;
-	}
-
-	const binding = context.state.scope.get(unwrapped.name);
-	return (
-		(binding?.declaration_kind === 'param' ||
-			binding?.kind === 'prop' ||
-			binding?.kind === 'prop_fallback' ||
-			binding?.kind === 'lazy' ||
-			binding?.kind === 'lazy_fallback') &&
-		binding.scope === component_scope
-	);
+	return is_children_template_expression_in_scope(expression, context.state.scope, component_scope);
 }
 
 /** @type {Visitors<AST.Node, AnalysisState>} */
@@ -995,11 +1079,13 @@ const visitors = {
 		const callee = node.callee;
 
 		if (
-			!context.path.some((path_node) => path_node.type === 'TsxCompat') &&
+			!context.path.some(
+				(path_node) => path_node.type === 'TsxCompat' || path_node.type === 'Tsx',
+			) &&
 			is_children_template_expression(/** @type {AST.Expression} */ (callee), context)
 		) {
 			error(
-				'`children` cannot be called like a regular function. Use element syntax instead, e.g. `<children />` or `<props.children />`.',
+				'`children` cannot be called like a regular function. Render it with `{children}` or `{props.children}` instead.',
 				context.state.analysis.module.filename,
 				callee,
 				context.state.loose ? context.state.analysis.errors : undefined,
@@ -1482,6 +1568,7 @@ const visitors = {
 			...node.metadata,
 			has_template: false,
 			has_await: false,
+			has_throw: false,
 		};
 
 		const test_metadata = { tracking: false };
@@ -1503,7 +1590,7 @@ const visitors = {
 			node.metadata.lone_return = true;
 		}
 
-		if (!node.metadata.has_template && !node.metadata.has_return) {
+		if (!node.metadata.has_template && !node.metadata.has_return && !node.metadata.has_throw) {
 			error(
 				'Component if statements must contain a template in their "then" body. Move the if statement into an effect if it does not render anything.',
 				context.state.analysis.module.filename,
@@ -1518,9 +1605,10 @@ const visitors = {
 			const saved_returns = node.metadata.returns;
 			node.metadata.has_template = false;
 			node.metadata.has_await = false;
+			node.metadata.has_throw = false;
 			context.visit(node.alternate, context.state);
 
-			if (!node.metadata.has_template && !node.metadata.has_return) {
+			if (!node.metadata.has_template && !node.metadata.has_return && !node.metadata.has_throw) {
 				error(
 					'Component if statements must contain a template in their "else" body. Move the if statement into an effect if it does not render anything.',
 					context.state.analysis.module.filename,
@@ -1589,6 +1677,33 @@ const visitors = {
 		}
 	},
 
+	ThrowStatement(node, context) {
+		if (!is_inside_component(context)) {
+			return context.next();
+		}
+
+		for (let i = context.path.length - 1; i >= 0; i--) {
+			const ancestor = context.path[i];
+
+			if (
+				ancestor.type === 'Component' ||
+				ancestor.type === 'FunctionExpression' ||
+				ancestor.type === 'ArrowFunctionExpression' ||
+				ancestor.type === 'FunctionDeclaration'
+			) {
+				break;
+			}
+
+			if (ancestor.type === 'IfStatement') {
+				if (!ancestor.metadata.has_throw) {
+					ancestor.metadata.has_throw = true;
+				}
+			}
+		}
+
+		context.next();
+	},
+
 	TryStatement(node, context) {
 		const { state } = context;
 		if (!is_inside_component(context)) {
@@ -1684,7 +1799,7 @@ const visitors = {
 	},
 
 	JSXElement(node, context) {
-		const inside_tsx_compat = context.path.some((n) => n.type === 'TsxCompat');
+		const inside_tsx_compat = context.path.some((n) => n.type === 'TsxCompat' || n.type === 'Tsx');
 
 		if (inside_tsx_compat) {
 			return context.next();
@@ -1697,8 +1812,25 @@ const visitors = {
 		);
 	},
 
-	TsxCompat(_, context) {
+	Tsx(_, context) {
+		mark_control_flow_has_template(context.path);
+		return context.next();
+	},
+
+	TsxCompat(node, context) {
 		mark_control_flow_has_template(context.path);
+
+		const configured_compat_kinds = context.state.configured_compat_kinds;
+		if (configured_compat_kinds !== undefined && !configured_compat_kinds.has(node.kind)) {
+			error(
+				`<tsx:${node.kind}> requires "${node.kind}" compat to be configured in ripple.config.ts.`,
+				context.state.analysis.module.filename,
+				node,
+				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
+			);
+		}
+
 		return context.next();
 	},
 
@@ -1718,6 +1850,19 @@ const visitors = {
 
 		mark_control_flow_has_template(path);
 
+		if (
+			!is_dom_element &&
+			is_children_template_expression(/** @type {AST.Expression} */ (node.id), context)
+		) {
+			error(
+				'`children` cannot be rendered as a component. Render it with `{children}` or `{props.children}` instead.',
+				state.analysis.module.filename,
+				node.id,
+				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
+			);
+		}
+
 		validate_nesting(node, context);
 
 		// Store capitalized name for dynamic components/elements
@@ -1771,7 +1916,10 @@ const visitors = {
 				if (/** @type {AST.Identifier} */ (node.id).name === 'title') {
 					const children = normalize_children(node.children, context);
 
-					if (children.length !== 1 || children[0].type !== 'Text') {
+					if (
+						children.length !== 1 ||
+						(children[0].type !== 'RippleExpression' && children[0].type !== 'Text')
+					) {
 						// TODO: could transform children as something, e.g. Text Node, and avoid a fatal error
 						error(
 							'<title> must have only contain text nodes',
@@ -1916,30 +2064,22 @@ const visitors = {
 			}
 			/** @type {(AST.Node | AST.Expression)[]} */
 			let implicit_children = [];
-			/** @type {AST.Identifier[]} */
-			let explicit_children = [];
 
 			for (const child of node.children) {
 				if (child.type === 'Component') {
-					if (child.id?.name === 'children') {
-						explicit_children.push(child.id);
-					}
-				} else if (child.type !== 'EmptyStatement') {
-					implicit_children.push(
-						child.type === 'Text' || child.type === 'Html' ? child.expression : child,
-					);
-				}
-			}
-
-			if (implicit_children.length > 0 && explicit_children.length > 0) {
-				for (const item of [...explicit_children, ...implicit_children]) {
 					error(
-						'Cannot have both implicit and explicit children',
+						'Component declarations cannot be used inside composite component children. Pass them as explicit props on the template element instead.',
 						state.analysis.module.filename,
-						item,
+						child.id || child,
 						context.state.loose ? context.state.analysis.errors : undefined,
 						context.state.analysis.comments,
 					);
+				} else if (child.type !== 'EmptyStatement') {
+					implicit_children.push(
+						child.type === 'RippleExpression' || child.type === 'Text' || child.type === 'Html'
+							? child.expression
+							: child,
+					);
 				}
 			}
 		}
@@ -1966,12 +2106,28 @@ const visitors = {
 		};
 	},
 
+	RippleExpression(node, context) {
+		mark_control_flow_has_template(context.path);
+
+		if (expression_has_side_effects(node.expression)) {
+			error(
+				'Template expressions must not contain side effects.',
+				context.state.analysis.module.filename,
+				node.expression,
+				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
+			);
+		}
+
+		context.next();
+	},
+
 	Text(node, context) {
 		mark_control_flow_has_template(context.path);
 
 		if (is_children_template_expression(/** @type {AST.Expression} */ (node.expression), context)) {
 			error(
-				'`children` cannot be rendered using text interpolation. Use `<children />` instead.',
+				'`children` cannot be rendered using explicit text interpolation. Use `{children}` or `{props.children}` instead.',
 				context.state.analysis.module.filename,
 				node.expression,
 				context.state.loose ? context.state.analysis.errors : undefined,
@@ -2070,6 +2226,8 @@ export function analyze(ast, filename, options = {}) {
 			ancestor_server_block: undefined,
 			to_ts: options.to_ts ?? false,
 			loose,
+			configured_compat_kinds:
+				options.compat_kinds === undefined ? undefined : new Set(options.compat_kinds),
 			metadata: {},
 			mode: options.mode,
 		},

package/src/compiler/phases/2-analyze/prune.js

@@ -306,12 +306,20 @@ function get_descendant_elements(node, adjacent_only) {
 			}
 		}
 
-		// For template nodes and text interpolations
+		// For template nodes and interpolation expressions
 		if (
-			/** @type {AST.TextNode} */ (current_node).expression &&
-			typeof (/** @type {AST.TextNode} */ (current_node).expression) === 'object'
+			(current_node.type === 'RippleExpression' ||
+				current_node.type === 'Text' ||
+				current_node.type === 'Html') &&
+			/** @type {AST.RippleExpression | AST.Html | AST.TextNode} */ (current_node).expression &&
+			typeof (
+				/** @type {AST.RippleExpression | AST.Html | AST.TextNode} */ (current_node).expression
+			) === 'object'
 		) {
-			visit(/** @type {AST.TextNode} */ (current_node).expression, depth + 1);
+			visit(
+				/** @type {AST.RippleExpression | AST.Html | AST.TextNode} */ (current_node).expression,
+				depth + 1,
+			);
 		}
 	}
 
@@ -409,7 +417,7 @@ function get_possible_element_siblings(node, direction, adjacent_only) {
 		// Stop at non-whitespace text nodes for adjacent selectors
 		else if (
 			adjacent_only &&
-			sibling.type === 'Text' &&
+			(sibling.type === 'RippleExpression' || sibling.type === 'Text') &&
 			sibling.expression.type === 'Literal' &&
 			typeof sibling.expression.value === 'string' &&
 			sibling.expression.value.trim()