ripple 0.3.8 → 0.3.10

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

@@ -426,58 +426,6 @@ export function track(v, get, set, b) {
 	return tracked(v, b, get, set);
 }
 
-/**
- * @param {Record<string|symbol, any>} v
- * @param {(symbol | string)[]} l
- * @param {Block} b
- * @returns {Tracked[]}
- */
-export function track_split(v, l, b) {
-	var is_tracked = is_ripple_object(v);
-
-	if (is_tracked || typeof v !== 'object' || v === null || is_array(v)) {
-		throw new TypeError('Invalid value: expected a non-tracked object');
-	}
-
-	/** @type {Tracked[]} */
-	var out = [];
-	/** @type {Record<string|symbol, any>} */
-	var rest = {};
-	/** @type {Record<PropertyKey, 1>} */
-	var done = {};
-	var props = Reflect.ownKeys(v);
-
-	for (let i = 0, key, t; i < l.length; i++) {
-		key = l[i];
-
-		if (props.includes(key)) {
-			if (is_ripple_object(v[key])) {
-				t = v[key];
-			} else {
-				t = tracked(undefined, b);
-				t = define_property(t, '__v', /** @type {PropertyDescriptor} */ (get_descriptor(v, key)));
-			}
-		} else {
-			t = tracked(undefined, b);
-		}
-
-		out[i] = t;
-		done[key] = 1;
-	}
-
-	for (let i = 0, key; i < props.length; i++) {
-		key = props[i];
-		if (done[key]) {
-			continue;
-		}
-		define_property(rest, key, /** @type {PropertyDescriptor} */ (get_descriptor(v, key)));
-	}
-
-	out.push(tracked(rest, b));
-
-	return out;
-}
-
 /**
  * @param {Tracked | Derived} tracked
  * @returns {Dependency}

package/src/runtime/internal/server/index.js

@@ -1,6 +1,6 @@
 /**
 @import { Component, Dependency, Derived, Tracked } from '#server';
-@import { SSRComponent, renderToStream, render } from 'ripple/server';
+@import { SSRComponent } from 'ripple/server';
 */
 
 import { Readable } from 'stream';
@@ -17,6 +17,7 @@ import { is_boolean_attribute } from '../../../compiler/utils.js';
 import { clsx } from 'clsx';
 import { normalize_css_property_name } from '../../../utils/normalize_css_property_name.js';
 import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../constants.js';
+import { is_ripple_element, normalize_children, ripple_element } from '../../element.js';
 import {
 	is_tag_valid_with_parent,
 	is_tag_valid_with_ancestor,
@@ -27,6 +28,30 @@ export { register_component_css as register_css } from './css-registry.js';
 export { hash } from '../../../utils/hashing.js';
 export { context } from './context.js';
 export { array_slice };
+export { ripple_element, normalize_children };
+
+/**
+ * @param {Output} output
+ * @param {any} value
+ * @returns {void}
+ */
+export function render_expression(output, value) {
+	output.push(BLOCK_OPEN);
+
+	if (is_ripple_element(value)) {
+		var result = value.render(output, {});
+
+		if (result && typeof result.then === 'function') {
+			return result.then(() => {
+				output.push(BLOCK_CLOSE);
+			});
+		}
+	} else {
+		output.push(escape(value ?? ''));
+	}
+
+	output.push(BLOCK_CLOSE);
+}
 
 /** @type {null | Component} */
 export let active_component = null;
@@ -231,12 +256,12 @@ class Output {
 	}
 }
 
-/** @type {render} */
+/** @type {import('ripple/server').render} */
 export async function render(component) {
 	const output = new Output(null, null);
 	let head = '';
 	let body = '';
-	let css = new Set();
+	let css = /** @type {Set<string>} */ (new Set());
 
 	// Reset dev-mode element tracking state at the start of each render
 	reset_element_state();
@@ -262,7 +287,7 @@ export async function render(component) {
 	return { head, body, css };
 }
 
-/** @type {renderToStream} */
+/** @type {import('ripple/server').renderToStream} */
 export function renderToStream(component) {
 	const stream = new Readable({
 		read() {},
@@ -596,7 +621,7 @@ export function spread_attrs(attrs, css_hash) {
 	for (name in attrs) {
 		var value = attrs[name];
 
-		if (typeof value === 'function') continue;
+		if (name === 'children' || typeof value === 'function' || is_ripple_element(value)) continue;
 
 		if (is_ripple_object(value)) {
 			value = get(value);
@@ -702,6 +727,24 @@ function tracked(v, get, set) {
 	return /** @type {Tracked} */ (new TrackedValue(v, get || set ? { get, set } : empty_get_set));
 }
 
+/**
+ * @param {Record<string, unknown>} obj
+ * @param {string[]} exclude_keys
+ * @returns {Record<string, unknown>}
+ */
+export function exclude_from_object(obj, exclude_keys) {
+	/** @type {Record<string, unknown>} */
+	var new_obj = {};
+
+	for (const key of Object.keys(obj)) {
+		if (!exclude_keys.includes(key)) {
+			new_obj[key] = obj[key];
+		}
+	}
+
+	return new_obj;
+}
+
 /**
  * @param {any} v
  * @param {(value: any) => any} [get]
@@ -722,57 +765,6 @@ export function track(v, get, set) {
 	return tracked(v, get, set);
 }
 
-/**
- * @param {Record<string|symbol, any>} v
- * @param {(symbol | string)[]} l
- * @returns {Tracked[]}
- */
-export function track_split(v, l) {
-	var is_tracked = is_ripple_object(v);
-
-	if (is_tracked || typeof v !== 'object' || v === null || is_array(v)) {
-		throw new TypeError('Invalid value: expected a non-tracked object');
-	}
-
-	/** @type {Tracked[]} */
-	var out = [];
-	/** @type {Record<string|symbol, any>} */
-	var rest = {};
-	/** @type {Record<PropertyKey, 1>} */
-	var done = {};
-	var props = Reflect.ownKeys(v);
-
-	for (let i = 0, key, t; i < l.length; i++) {
-		key = l[i];
-
-		if (props.includes(key)) {
-			if (is_ripple_object(v[key])) {
-				t = v[key];
-			} else {
-				t = tracked(undefined);
-				t = define_property(t, 'v', /** @type {PropertyDescriptor} */ (get_descriptor(v, key)));
-			}
-		} else {
-			t = tracked(undefined);
-		}
-
-		out[i] = t;
-		done[key] = 1;
-	}
-
-	for (let i = 0, key; i < props.length; i++) {
-		key = props[i];
-		if (done[key]) {
-			continue;
-		}
-		define_property(rest, key, /** @type {PropertyDescriptor} */ (get_descriptor(v, key)));
-	}
-
-	out.push(tracked(rest));
-
-	return out;
-}
-
 /**
  * @param {any} _
  * @param {ConstructorParameters<typeof URL>} params
@@ -865,6 +857,15 @@ export function ripple_object(obj) {
 	return obj;
 }
 
+/**
+ * @template K, V
+ * @param {Iterable<readonly [K, V]>} [iterable]
+ * @returns {Map<K, V>}
+ */
+export function ripple_map(iterable) {
+	return new Map(iterable);
+}
+
 /**
  * Returns the fallback value if the given value is undefined.
  * @template T

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

@@ -7,21 +7,20 @@ import type {
 	PropsWithChildrenOptional,
 } from 'ripple';
 import { flushSync, track } from 'ripple';
+import { did_error } from '../capture-error.js';
 
 describe('basic client > components & composition', () => {
 	it('renders with component composition and children', () => {
 		component Card(props: PropsWithChildren<{}>) {
-			<div class="card">
-				<props.children />
-			</div>
+			<div class="card">{props.children}</div>
 		}
 
 		component Basic() {
-			<Card>
-				component children() {
-					<p>{'Card content here'}</p>
-				}
-			</Card>
+			component children() {
+				<p>{'Card content here'}</p>
+			}
+
+			<Card {children} />
 		}
 
 		render(Basic);
@@ -37,17 +36,17 @@ describe('basic client > components & composition', () => {
 		component Card(props: PropsWithChildrenOptional<{ test?: Component }>) {
 			<div class="card">
 				if (props.children) {
-					<props.children />
+					{props.children}
 				}
 			</div>
 		}
 
 		component Basic() {
-			<Card>
-				component test() {
-					<p>{'Card content here'}</p>
-				}
-			</Card>
+			component test() {
+				<p>{'Card content here'}</p>
+			}
+
+			<Card {test} />
 		}
 
 		render(Basic);
@@ -59,22 +58,23 @@ describe('basic client > components & composition', () => {
 		expect(paragraph).toBeFalsy();
 	});
 
-	it('allows tracked variable and slot component with same name in nested scope', () => {
+	it('allows tracked variables alongside explicit component props', () => {
 		component Card(props: PropsWithChildrenOptional<{ test?: Component }>) {
 			<div class="card">
 				if (props.children) {
-					<props.children />
+					{props.children}
 				}
 			</div>
 		}
 
 		component Basic() {
 			let &[test] = track(false);
-			<Card>
-				component test() {
-					<p>{'Card content here'}</p>
-				}
-			</Card>
+
+			component TestSlot() {
+				<p>{'Card content here'}</p>
+			}
+
+			<Card test={TestSlot} />
 			<div>{test ? 'yes' : 'no'}</div>
 		}
 
@@ -90,9 +90,7 @@ describe('basic client > components & composition', () => {
 
 	it('renders a component when children is set a component prop', () => {
 		component Card(props: PropsWithChildren<{}>) {
-			<div class="card">
-				<props.children />
-			</div>
+			<div class="card">{props.children}</div>
 		}
 
 		component Basic() {
@@ -211,6 +209,28 @@ describe('basic client > components & composition', () => {
 		expect(countDiv.textContent).toBe('3');
 	});
 
+	it('updates explicit text children props reactively', () => {
+		component TextProp(&{ children }: PropsWithChildren<{}>) {
+			<div class="text-prop">{children}</div>
+		}
+
+		component Basic() {
+			let &[show] = track(false);
+
+			<TextProp children={show ? 'hello' : ''} />
+			<button class="show-text" onClick={() => (show = true)}>{'Show'}</button>
+		}
+
+		render(Basic);
+
+		expect(container.querySelector('.text-prop')?.textContent).toBe('');
+
+		container.querySelector('.show-text')?.click();
+		flushSync();
+
+		expect(container.querySelector('.text-prop')?.textContent).toBe('hello');
+	});
+
 	it('it retains this context with bracketed prop functions and keeps original chaining', () => {
 		component App() {
 			const SYMBOL_PROP = Symbol();
@@ -233,60 +253,40 @@ describe('basic client > components & composition', () => {
 
 			const obj2 = null;
 
+			function trigger_nonexistent() {
+				hasError = did_error(() => {
+					// @ts-ignore
+					obj['nonexistent']();
+				});
+			}
+
+			function trigger_nonexistent_chaining() {
+				hasError = did_error(() => {
+					// @ts-ignore
+					obj['nonexistent']?.();
+				});
+			}
+
+			function trigger_object_null() {
+				hasError = did_error(() => {
+					// @ts-ignore
+					obj2['nonexistent']();
+				});
+			}
+
+			function trigger_object_null_chained() {
+				hasError = did_error(() => {
+					// @ts-ignore
+					obj2?.['nonexistent']?.();
+				});
+			}
+
 			<button onClick={() => obj['increment']()}>{'Increment'}</button>
 			<button onClick={() => obj[SYMBOL_PROP]()}>{'Increment'}</button>
-			<button
-				onClick={() => {
-					hasError = false;
-					try {
-						// @ts-ignore
-						obj['nonexistent']();
-					} catch {
-						hasError = true;
-					}
-				}}
-			>
-				{'Nonexistent'}
-			</button>
-			<button
-				onClick={() => {
-					hasError = false;
-					try {
-						// @ts-ignore
-						obj['nonexistent']?.();
-					} catch {
-						hasError = true;
-					}
-				}}
-			>
-				{'Nonexistent chaining'}
-			</button>
-			<button
-				onClick={() => {
-					hasError = false;
-					try {
-						// @ts-ignore
-						obj2['nonexistent']();
-					} catch {
-						hasError = true;
-					}
-				}}
-			>
-				{'Object null'}
-			</button>
-			<button
-				onClick={() => {
-					hasError = false;
-					try {
-						// @ts-ignore
-						obj2?.['nonexistent']?.();
-					} catch {
-						hasError = true;
-					}
-				}}
-			>
-				{'Object null chained'}
-			</button>
+			<button onClick={trigger_nonexistent}>{'Nonexistent'}</button>
+			<button onClick={trigger_nonexistent_chaining}>{'Nonexistent chaining'}</button>
+			<button onClick={trigger_object_null}>{'Object null'}</button>
+			<button onClick={trigger_object_null_chained}>{'Object null chained'}</button>
 			<button onClick={() => obj.arr[obj.arr.length - 1]()}>{'BinaryExpression prop'}</button>
 
 			<span>{obj.count.value}</span>
@@ -346,21 +346,19 @@ describe('basic client > components & composition', () => {
 				<span>{'Hello from Span'}</span>
 			},
 			button: component({ children }: PropsWithChildren<{}>) {
-				<button>
-					<children />
-				</button>
+				<button>{children}</button>
 			},
 		};
 
 		component App() {
+			component children() {
+				<span>{'Click me!'}</span>
+			}
+
 			<div>
 				<h1>{'Component as Property Test'}</h1>
 				<UI.span />
-				<UI.button>
-					component children() {
-						<span>{'Click me!'}</span>
-					}
-				</UI.button>
+				<UI.button {children} />
 			</div>
 		}
 
@@ -378,13 +376,13 @@ describe('basic client > components & composition', () => {
 
 	it('handles empty string children', () => {
 		component Button({ children }: PropsWithChildren<{}>) {
-			<children />
+			{children}
 		}
 
 		component App() {
-			let text = '';
+			let content = '';
 			<Button>{''}</Button>
-			<Button>{text}</Button>
+			<Button>{content}</Button>
 		}
 
 		expect(() => {

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

@@ -70,9 +70,7 @@ describe('basic client > errors', () => {
 
 		expect(() => {
 			compile(code, 'test.ripple');
-		}).toThrow(
-			'`children` cannot be rendered using text interpolation. Use `<children />` instead.',
-		);
+		}).not.toThrow();
 	});
 
 	it('should throw error for interpolating props.children as text', () => {
@@ -82,10 +80,36 @@ describe('basic client > errors', () => {
 			}
 		`;
 
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).not.toThrow();
+	});
+
+	it('should throw error for calling children as a function', () => {
+		const code = `
+			export component Layout({ children }) {
+				{children()}
+			}
+		`;
+
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).toThrow(
+			'`children` cannot be called like a regular function. Render it with `{children}` or `{props.children}` instead.',
+		);
+	});
+
+	it('should throw error for calling props.children as a function', () => {
+		const code = `
+			export component Layout(props) {
+				{props.children()}
+			}
+		`;
+
 		expect(() => {
 			compile(code, 'test.ripple');
 		}).toThrow(
-			'`children` cannot be rendered using text interpolation. Use `<children />` instead.',
+			'`children` cannot be called like a regular function. Render it with `{children}` or `{props.children}` instead.',
 		);
 	});