ripple 0.2.143 → 0.2.145

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.143",
+  "version": "0.2.145",
   "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.143"
+    "ripple": "0.2.145"
   }
 }

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/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/index-client.js

@@ -90,4 +90,5 @@ export {
 	bindInnerHTML,
 	bindInnerText,
 	bindTextContent,
+	bindNode,
 } from './internal/client/bindings.js';

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

@@ -1,10 +1,18 @@
-/** @import { Block, Tracked } from '#client' */
+/** @import { Tracked } from '#client' */
 
 import { effect, render } from './blocks.js';
 import { on } from './events.js';
-import { active_block, get, set, tick, untrack } from './runtime.js';
+import { get, set, tick, untrack } from './runtime.js';
 import { is_array, is_tracked_object } from './utils.js';
 
+/**
+ * @param {string} name
+ * @returns {TypeError}
+ */
+function not_tracked_type_error(name) {
+	return new TypeError(`${name} argument is not a tracked object`);
+}
+
 /**
  * Resize observer singleton.
  * One listener per element only!
@@ -145,10 +153,9 @@ function select_option(select, value, mounting = false) {
  */
 export function bindValue(maybe_tracked) {
 	if (!is_tracked_object(maybe_tracked)) {
-		throw new TypeError('bindValue() argument is not a tracked object');
+		throw not_tracked_type_error('bindValue()');
 	}
 
-	var block = /** @type {Block} */ (active_block);
 	var tracked = /** @type {Tracked} */ (maybe_tracked);
 
 	return (node) => {
@@ -246,10 +253,9 @@ export function bindValue(maybe_tracked) {
  */
 export function bindChecked(maybe_tracked) {
 	if (!is_tracked_object(maybe_tracked)) {
-		throw new TypeError('bindChecked() argument is not a tracked object');
+		throw not_tracked_type_error('bindChecked()');
 	}
 
-	const block = /** @type {any} */ (active_block);
 	const tracked = /** @type {Tracked} */ (maybe_tracked);
 
 	return (input) => {
@@ -267,12 +273,9 @@ export function bindChecked(maybe_tracked) {
  */
 function bind_element_size(maybe_tracked, type) {
 	if (!is_tracked_object(maybe_tracked)) {
-		throw new TypeError(
-			`bind${type.charAt(0).toUpperCase() + type.slice(1)}() argument is not a tracked object`,
-		);
+		throw not_tracked_type_error(`bind${type.charAt(0).toUpperCase() + type.slice(1)}()`);
 	}
 
-	var block = /** @type {any} */ (active_block);
 	var tracked = /** @type {Tracked<any>} */ (maybe_tracked);
 
 	return (/** @type {HTMLElement} */ element) => {
@@ -325,12 +328,9 @@ export function bindOffsetHeight(maybe_tracked) {
  */
 function bind_element_rect(maybe_tracked, type) {
 	if (!is_tracked_object(maybe_tracked)) {
-		throw new TypeError(
-			`bind${type.charAt(0).toUpperCase() + type.slice(1)}() argument is not a tracked object`,
-		);
+		throw not_tracked_type_error(`bind${type.charAt(0).toUpperCase() + type.slice(1)}()`);
 	}
 
-	var block = /** @type {any} */ (active_block);
 	var tracked = /** @type {Tracked<any>} */ (maybe_tracked);
 	var observer =
 		type === 'contentRect' || type === 'contentBoxSize'
@@ -388,12 +388,9 @@ export function bindDevicePixelContentBoxSize(maybe_tracked) {
  */
 export function bind_content_editable(maybe_tracked, property) {
 	if (!is_tracked_object(maybe_tracked)) {
-		throw new TypeError(
-			`bind${property.charAt(0).toUpperCase() + property.slice(1)}() argument is not a tracked object`,
-		);
+		throw not_tracked_type_error(`bind${property.charAt(0).toUpperCase() + property.slice(1)}()`);
 	}
 
-	const block = /** @type {any} */ (active_block);
 	const tracked = /** @type {Tracked} */ (maybe_tracked);
 
 	return (element) => {
@@ -443,3 +440,21 @@ export function bindInnerText(maybe_tracked) {
 export function bindTextContent(maybe_tracked) {
 	return bind_content_editable(maybe_tracked, 'textContent');
 }
+
+/**
+ * Syntactic sugar for binding a HTMLElement with {ref fn}
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLElement) => void}
+ */
+export function bindNode(maybe_tracked) {
+	if (!is_tracked_object(maybe_tracked)) {
+		throw not_tracked_type_error('bindNode()');
+	}
+
+	const tracked = /** @type {Tracked} */ (maybe_tracked);
+
+	/** @param {HTMLElement} node */
+	return (node) => {
+		set(tracked, node);
+	};
+}

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!');
+	});
 });

package/types/index.d.ts

@@ -287,3 +287,5 @@ export declare function bindInnerHTML<V>(tracked: Tracked<V>): (node: HTMLElemen
 export declare function bindInnerText<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
 
 export declare function bindTextContent<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+
+export declare function bindNode<V>(tracked: Tracked<V>): (node: HTMLElement) => void;