ripple 0.2.142 → 0.2.144

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.142",
+  "version": "0.2.144",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.142"
+    "ripple": "0.2.144"
   }
 }

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

@@ -491,6 +491,7 @@ function RipplePlugin(config) {
 					forInit,
 				);
 			}
+
 			/**
 			 * Parse expression atom - handles TrackedArray and TrackedObject literals
 			 * @param {any} [refDestructuringErrors]
@@ -524,6 +525,11 @@ function RipplePlugin(config) {
 					return this.parseTrackedObjectExpression();
 				}
 
+				// Check if this is a component expression (e.g., in object literal values)
+				if (this.type === tt.name && this.value === 'component') {
+					return this.parseComponent();
+				}
+
 				return super.parseExprAtom(refDestructuringErrors, forNew, forInit);
 			}
 
@@ -714,33 +720,55 @@ function RipplePlugin(config) {
 				return this.finishNode(node, 'TrackedObjectExpression');
 			}
 
-			parseExportDefaultDeclaration() {
-				// Check if this is "export default component"
-				if (this.value === 'component') {
-					const node = this.startNode();
-					node.type = 'Component';
-					node.css = null;
-					node.default = true;
-					this.next();
-					this.enterScope(0);
+			/**
+			 * Parse a component - common implementation used by statements, expressions, and export defaults
+			 * @param {Object} options - Parsing options
+			 * @param {boolean} [options.requireName=false] - Whether component name is required
+			 * @param {boolean} [options.isDefault=false] - Whether this is an export default component
+			 * @param {boolean} [options.declareName=false] - Whether to declare the name in scope
+			 * @returns {any} Component node
+			 */
+			parseComponent({ requireName = false, isDefault = false, declareName = false } = {}) {
+				const node = this.startNode();
+				node.type = 'Component';
+				node.css = null;
+				node.default = isDefault;
+				this.next(); // consume 'component'
+				this.enterScope(0);
 
+				if (requireName) {
+					node.id = this.parseIdent();
+					if (declareName) {
+						this.declareName(node.id.name, 'var', node.id.start);
+					}
+				} else {
 					node.id = this.type.label === 'name' ? this.parseIdent() : null;
+					if (declareName && node.id) {
+						this.declareName(node.id.name, 'var', node.id.start);
+					}
+				}
 
-					this.parseFunctionParams(node);
-					this.eat(tt.braceL);
-					node.body = [];
-					this.#path.push(node);
+				this.parseFunctionParams(node);
+				this.eat(tt.braceL);
+				node.body = [];
+				this.#path.push(node);
 
-					this.parseTemplateBody(node.body);
-					this.#path.pop();
-					this.exitScope();
+				this.parseTemplateBody(node.body);
+				this.#path.pop();
+				this.exitScope();
 
-					this.next();
-					skipWhitespace(this);
-					this.finishNode(node, 'Component');
-					this.awaitPos = 0;
+				this.next();
+				skipWhitespace(this);
+				this.finishNode(node, 'Component');
+				this.awaitPos = 0;
 
-					return node;
+				return node;
+			}
+
+			parseExportDefaultDeclaration() {
+				// Check if this is "export default component"
+				if (this.value === 'component') {
+					return this.parseComponent({ isDefault: true });
 				}
 
 				return super.parseExportDefaultDeclaration();
@@ -1650,31 +1678,8 @@ function RipplePlugin(config) {
 
 				if (this.value === 'component') {
 					this.awaitPos = 0;
-					const node = this.startNode();
-					node.type = 'Component';
-					node.css = null;
-					this.next();
-					this.enterScope(0);
-					node.id = this.parseIdent();
-					this.declareName(node.id.name, 'var', node.id.start);
-					this.parseFunctionParams(node);
-					this.eat(tt.braceL);
-					node.body = [];
-					this.#path.push(node);
-
-					this.parseTemplateBody(node.body);
-
-					this.#path.pop();
-					this.exitScope();
-
-					this.next();
-					skipWhitespace(this);
-					this.finishNode(node, 'Component');
-					this.awaitPos = 0;
-
-					return node;
+					return this.parseComponent({ requireName: true, declareName: true });
 				}
-
 				if (this.type.label === '@') {
 					// Try to parse as an expression statement first using tryParse
 					// This allows us to handle Ripple @ syntax like @count++ without

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

@@ -356,10 +356,13 @@ const visitors = {
 		}
 
 		// Store component metadata in analysis
-		context.state.analysis.component_metadata.push({
-			id: node.id.name,
-			async: metadata.await,
-		});
+		// Only add metadata if component has a name (not anonymous)
+		if (node.id) {
+			context.state.analysis.component_metadata.push({
+				id: node.id.name,
+				async: metadata.await,
+			});
+		}
 	},
 
 	ForStatement(node, context) {

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

@@ -925,8 +925,10 @@ const visitors = {
 									const args = [handler, b.id('__block'), ...hoisted_params];
 									delegated_assignment = b.array(args);
 								} else if (
-									handler.type === 'Identifier' &&
-									is_declared_function_within_component(handler, context)
+									(handler.type === 'Identifier' &&
+										is_declared_function_within_component(handler, context)) ||
+									handler.type === 'ArrowFunctionExpression' ||
+									handler.type === 'FunctionExpression'
 								) {
 									delegated_assignment = handler;
 								} else {

package/src/compiler/scope.js

@@ -150,7 +150,10 @@ export function create_scopes(ast, root, parent) {
 			const scope = state.scope.child();
 			scopes.set(node, scope);
 
-			scope.declare(node.id, 'normal', 'component');
+			// Only declare the component name if it has an id (not anonymous)
+			if (node.id) {
+				scope.declare(node.id, 'normal', 'component');
+			}
 
 			add_params(scope, node.params);
 			next({ scope });

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

@@ -194,7 +194,12 @@ function set_attribute_helper(element, key, value) {
  * @returns {string}
  */
 function to_class(value, hash) {
-	return value == null ? (hash ?? '') : clsx([value, hash]);
+	return value == null
+		? (hash ?? '')
+		: // Fast-path for string values
+			typeof value === 'string'
+			? value + (hash ? ' ' + hash : '')
+			: clsx([value, hash]);
 }
 
 /**
@@ -207,24 +212,27 @@ function to_class(value, hash) {
 export function set_class(dom, value, hash, is_html = true) {
 	// @ts-expect-error need to add __className to patched prototype
 	var prev_class_name = dom.__className;
-	var next_class_name = to_class(value, hash);
-
-	if (prev_class_name !== next_class_name) {
-		// Removing the attribute when the value is only an empty string causes
-		// peformance issues vs simply making the className an empty string. So
-		// we should only remove the class if the the value is nullish.
-		if (value == null && !hash) {
-			dom.removeAttribute('class');
-		} else {
-			if (is_html) {
-				dom.className = next_class_name;
+
+	if (prev_class_name !== value) {
+		var next_class_name = to_class(value, hash);
+
+		if (prev_class_name !== next_class_name) {
+			// Removing the attribute when the value is only an empty string causes
+			// peformance issues vs simply making the className an empty string. So
+			// we should only remove the class if the the value is nullish.
+			if (value == null && !hash) {
+				dom.removeAttribute('class');
 			} else {
-				dom.setAttribute('class', next_class_name);
+				if (is_html) {
+					dom.className = next_class_name;
+				} else {
+					dom.setAttribute('class', next_class_name);
+				}
 			}
 		}
 
 		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
+		dom.__className = value;
 	}
 }
 

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

@@ -232,4 +232,40 @@ describe('basic client > components & composition', () => {
 		flushSync();
 		expect(countSpan.textContent).toBe('1');
 	});
+
+	it('renders components as named and anonymous properties', () => {
+		const UI = {
+			span: component Span(){
+				<span>{'Hello from Span'}</span>
+			},
+			button: component({ children }) {
+				<button>
+					<children />
+				</button>
+			}
+		};
+
+		component App(){
+			<div>
+				<h1>{'Component as Property Test'}</h1>
+				<UI.span />
+				<UI.button>
+					component children() {
+						<span>{'Click me!'}</span>
+					}
+				</UI.button>
+			</div>
+		}
+
+		render(App);
+
+		const heading = container.querySelector('h1');
+		const span = container.querySelector('span');
+		const button = container.querySelector('button');
+		const buttonSpan = button.querySelector('span');
+
+		expect(heading.textContent).toBe('Component as Property Test');
+		expect(span.textContent).toBe('Hello from Span');
+		expect(buttonSpan.textContent).toBe('Click me!');
+	});
 });