ripple 0.3.9 → 0.3.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # ripple
 
+## 0.3.10
+
+### Patch Changes
+
+- [`aef1253`](https://github.com/Ripple-TS/ripple/commit/aef1253dd79c067a8358172d502dc21d8a9a9085)
+  Thanks [@trueadm](https://github.com/trueadm)! - Replace `<children />` with
+  `{children}` expression syntax for rendering component children
+
+- Updated dependencies
+  [[`aef1253`](https://github.com/Ripple-TS/ripple/commit/aef1253dd79c067a8358172d502dc21d8a9a9085)]:
+  - ripple@0.3.10
+
 ## 0.3.9
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -105,6 +105,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.9"
+    "ripple": "0.3.10"
   }
 }

package/src/compiler/phases/1-parse/index.js

@@ -1115,7 +1115,7 @@ function RipplePlugin(config) {
 				let node = /** @type {ESTreeJSX.JSXExpressionContainer} */ (this.startNode());
 				this.next();
 
-				if (this.value === 'html') {
+				if (this.type === tt.name && this.value === 'html') {
 					node.html = true;
 					this.next();
 					if (this.type === tt.braceR) {
@@ -1124,6 +1124,15 @@ function RipplePlugin(config) {
 							'"html" is a Ripple keyword and must be used in the form {html some_content}',
 						);
 					}
+				} else if (this.type === tt.name && this.value === 'text') {
+					node.text = true;
+					this.next();
+					if (this.type === tt.braceR) {
+						this.raise(
+							this.start,
+							'"text" is a Ripple keyword and must be used in the form {text some_value}',
+						);
+					}
 				}
 
 				node.expression =
@@ -1328,16 +1337,12 @@ function RipplePlugin(config) {
 					const clause = /** @type {AST.CatchClause} */ (this.startNode());
 					this.next();
 					if (this.eat(tt.parenL)) {
-						clause.param = this.parseCatchClauseParam();
+						clause.param = this.parseBindingAtom();
+						this.expect(tt.parenR);
 					} else {
-						if (this.options.ecmaVersion < 10) {
-							this.unexpected();
-						}
 						clause.param = null;
-						this.enterScope(0);
 					}
-					clause.body = this.parseBlock(false);
-					this.exitScope();
+					clause.body = this.parseBlock();
 					node.handler = this.finishNode(clause, 'CatchClause');
 				}
 				node.finalizer = this.eat(tt._finally) ? this.parseBlock() : null;
@@ -1909,12 +1914,13 @@ function RipplePlugin(config) {
 				if (this.type === tt.braceL) {
 					const node = this.jsx_parseExpressionContainer();
 					// Keep JSXEmptyExpression as-is (for prettier to handle comments)
-					// but convert other expressions to Text/Html nodes
+					// but convert other expressions to Html/RippleExpression/Text nodes
 					if (node.expression.type !== 'JSXEmptyExpression') {
-						/** @type {AST.Html | AST.TextNode} */ (/** @type {unknown} */ (node)).type = node.html
-							? 'Html'
-							: 'Text';
+						/** @type {AST.RippleExpression | AST.Html | AST.TextNode} */ (
+							/** @type {unknown} */ (node)
+						).type = node.html ? 'Html' : node.text ? 'Text' : 'RippleExpression';
 						delete node.html;
+						delete node.text;
 					}
 					body.push(node);
 				} else if (this.type === tt.braceR) {
@@ -2050,12 +2056,16 @@ function RipplePlugin(config) {
 					this.context.some((c) => c === tstc.tc_expr)
 				) {
 					const node = this.jsx_parseExpressionContainer();
-					// Keep JSXEmptyExpression as-is (don't convert to Text)
+					// Keep JSXEmptyExpression as-is (don't convert to RippleExpression/Text/Html)
 					if (node.expression.type !== 'JSXEmptyExpression') {
-						/** @type {AST.TextNode} */ (/** @type {unknown} */ (node)).type = 'Text';
+						/** @type {AST.RippleExpression | AST.Html | AST.TextNode} */ (
+							/** @type {unknown} */ (node)
+						).type = node.html ? 'Html' : node.text ? 'Text' : 'RippleExpression';
+						delete node.html;
+						delete node.text;
 					}
 
-					return /** @type {ESTreeJSX.JSXEmptyExpression | AST.TextNode | ESTreeJSX.JSXExpressionContainer} */ (
+					return /** @type {ESTreeJSX.JSXEmptyExpression | AST.RippleExpression | AST.Html | AST.TextNode | ESTreeJSX.JSXExpressionContainer} */ (
 						/** @type {unknown} */ (node)
 					);
 				}

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,
@@ -687,37 +688,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 +696,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>} */
@@ -999,7 +932,7 @@ const visitors = {
 			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,
@@ -1718,6 +1651,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 +1717,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 +1865,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 +1907,18 @@ const visitors = {
 		};
 	},
 
+	RippleExpression(node, context) {
+		mark_control_flow_has_template(context.path);
+
+		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,

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()