ripple 0.3.8 → 0.3.9

package/src/runtime/index-client.js

@@ -102,13 +102,7 @@ export function hydrate(component, options) {
 
 export { Context } from './internal/client/context.js';
 
-export {
-	flush_sync as flushSync,
-	track,
-	track_split as trackSplit,
-	untrack,
-	tick,
-} from './internal/client/runtime.js';
+export { flush_sync as flushSync, track, untrack, tick } from './internal/client/runtime.js';
 
 export { RippleArray } from './array.js';
 
@@ -165,10 +159,5 @@ import { RippleURL } from './url.js';
 import { RippleURLSearchParams } from './url-search-params.js';
 import { RippleDate } from './date.js';
 import { MediaQuery } from './media-query.js';
-import {
-	track,
-	track_split as trackSplit,
-	untrack,
-	ref_prop as createRefKey,
-} from './internal/client/runtime.js';
+import { track, untrack, ref_prop as createRefKey } from './internal/client/runtime.js';
 import { user_effect as effect } from './internal/client/blocks.js';

package/src/runtime/index-server.js

@@ -1,8 +1,8 @@
-import { get, set, untrack, track, track_split } from './internal/server/index.js';
+import { get, set, untrack, track } from './internal/server/index.js';
 
 export { Context } from './internal/server/context.js';
 
-export { get, set, untrack, track, track_split as trackSplit };
+export { get, set, untrack, track };
 
 function noop() {}
 

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

@@ -186,7 +186,9 @@ function select_option(select, value, mounting = false) {
 
 		// Otherwise, update the selection
 		for (var option of select.options) {
-			option.selected = /** @type {string[]} */ (value).includes(get_option_value(option));
+			option.selected = /** @type {string[]} */ (value).includes(
+				/** @type {string} */ (get_option_value(option)),
+			);
 		}
 
 		return;

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

@@ -29,6 +29,7 @@ export function composite(get_component, node, props) {
 
 	render(
 		() => {
+			// @ts-ignore — get() handles non-tracked values via is_ripple_object() check
 			var component = get(get_component());
 
 			if (b !== null) {

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

@@ -168,7 +168,7 @@ export function handle_event_propagation(event) {
 				null;
 
 			try {
-				var delegated = current_target['__' + event_name];
+				var delegated = /** @type {Record<string, any>} */ (current_target)['__' + event_name];
 
 				if (delegated !== undefined && !(/** @type {any} */ (current_target).disabled)) {
 					if (is_array(delegated)) {

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

@@ -1,4 +1,3 @@
-/** @import { TemplateNode } from '#client' */
 import { render } from './blocks.js';
 import { HEAD_BLOCK } from './constants.js';
 import { COMMENT_NODE } from '../../../constants.js';
@@ -38,8 +37,8 @@ export function head(hash, render_fn) {
 		if (head_anchor === null) {
 			set_hydrating(false);
 		} else {
-			var start = /** @type {TemplateNode} */ (get_next_sibling(head_anchor));
-			head_anchor.remove(); // in case this component is repeated
+			var start = get_next_sibling(head_anchor);
+			/** @type {ChildNode} */ (head_anchor).remove(); // in case this component is repeated
 
 			set_hydrate_node(start);
 		}
@@ -54,7 +53,7 @@ export function head(hash, render_fn) {
 	} finally {
 		if (was_hydrating) {
 			set_hydrating(true);
-			set_hydrate_node(/** @type {TemplateNode} */ (previous_hydrate_node));
+			set_hydrate_node(previous_hydrate_node);
 		}
 	}
 }

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

@@ -52,7 +52,6 @@ export {
 	update_property,
 	update_pre_property,
 	track,
-	track_split,
 	push_component,
 	pop_component,
 	untrack,

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';
@@ -231,12 +231,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 +262,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() {},
@@ -702,6 +702,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 +740,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 +832,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.errors.test.ripple

@@ -89,6 +89,34 @@ describe('basic client > errors', () => {
 		);
 	});
 
+	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. Use element syntax instead, e.g. `<children />` or `<props.children />`.',
+		);
+	});
+
+	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 called like a regular function. Use element syntax instead, e.g. `<children />` or `<props.children />`.',
+		);
+	});
+
 	it('errors on mutating tracked value inside computed track() evaluation', () => {
 		component Basic() {
 			let &[count] = track(0);

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

@@ -1,5 +1,5 @@
 import type { PropsWithChildren, Tracked } from 'ripple';
-import { effect, flushSync, track, trackSplit, untrack } from 'ripple';
+import { effect, flushSync, track, untrack } from 'ripple';
 
 describe('basic client > reactivity', () => {
 	it('renders multiple reactive lexical blocks', () => {
@@ -384,162 +384,17 @@ describe('basic client > reactivity', () => {
 		expect(state.finalValue).toBe(5);
 	});
 
-	describe('track/trackSplit APIs', () => {
-		it('errors on invalid value as null for track with trackSplit', () => {
-			component App() {
-				let &[message] = track('');
-
-				try {
-					const [a, b, rest] = trackSplit(null, ['a', 'b']);
-				} catch (e) {
-					message = (e as Error).message;
-				}
-
-				<pre>{message}</pre>
-			}
-
-			render(App);
-
-			const pre = container.querySelectorAll('pre')[0];
-			expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
-		});
-
-		it('errors on invalid value as array for track with trackSplit', () => {
-			component App() {
-				let &[message] = track('');
-
-				try {
-					const [a, b, rest] = trackSplit([1, 2, 3], ['a', 'b']);
-				} catch (e) {
-					message = (e as Error).message;
-				}
-
-				<pre>{message}</pre>
-			}
-
-			render(App);
-
-			const pre = container.querySelectorAll('pre')[0];
-			expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
-		});
-
-		it('errors on invalid value as tracked for track with trackSplit', () => {
-			component App() {
-				const t = track({ a: 1, b: 2, c: 3 });
-				let &[message] = track('');
-
-				try {
-					const [a, b, rest] = trackSplit(t, ['a', 'b']);
-				} catch (e) {
-					message = (e as Error).message;
-				}
-
-				<pre>{message}</pre>
-			}
-
-			render(App);
-
-			const pre = container.querySelectorAll('pre')[0];
-			expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
-		});
-
-		it('returns undefined for non-existent props in track with trackSplit', () => {
-			component App() {
-				const [a, b, rest] = trackSplit({ a: 1, c: 1 }, ['a', 'b']);
-
-				<pre>{a.value}</pre>
-				<pre>{String(b.value)}</pre>
-				<pre>{rest.value.c}</pre>
-			}
-
-			render(App);
-
-			const preA = container.querySelectorAll('pre')[0];
-			const preB = container.querySelectorAll('pre')[1];
-			const preC = container.querySelectorAll('pre')[2];
-
-			expect(preA.textContent).toBe('1');
-			expect(preB.textContent).toBe('undefined');
-			expect(preC.textContent).toBe('1');
-		});
-
-		it('returns the same tracked object if plain track is called with a tracked object', () => {
-			component App() {
-				const t = track({ a: 1, b: 2, c: 3 });
-				const doublet = track(t);
-
-				<pre>{t === doublet}</pre>
-			}
-
-			render(App);
-
-			const pre = container.querySelectorAll('pre')[0];
-			expect(pre.textContent).toBe('true');
-		});
-
-		it('can retain reactivity for destructure rest via track trackSplit', () => {
-			let logs: string[] = [];
-
-			component App() {
-				let &[count] = track(0);
-				let &[name] = track('Click Me');
-
-				function buttonRef(el: HTMLButtonElement) {
-					logs.push('ref called');
-					return () => {
-						logs.push('cleanup ref');
-					};
-				}
-
-				<Child
-					class="my-button"
-					onClick={() => name === 'Click Me' ? name = 'Clicked' : name = 'Click Me'}
-					{count}
-					{ref buttonRef}
-				>
-					{name}
-				</Child>
-
-				<button onClick={() => count++}>{'Increment Count'}</button>
-			}
-
-			component Child(props: PropsWithChildren<{
-				count: Tracked<number>;
-				class: string;
-				onClick: () => void;
-			}>) {
-				const [children, count, rest] = trackSplit(props, ['children', 'count']);
-
-				if (count.value < 2) {
-					<button {...rest.value}>
-						<@children />
-					</button>
-				}
-				<pre>{count.value}</pre>
-			}
-
-			render(App);
-			flushSync();
-
-			const buttonClickMe = container.querySelectorAll('button')[0];
-			const buttonIncrement = container.querySelectorAll('button')[1];
-			const countPre = container.querySelector('pre');
-
-			expect(buttonClickMe.textContent).toBe('Click Me');
-			expect(countPre.textContent).toBe('0');
-			expect(logs).toEqual(['ref called']);
-
-			buttonClickMe.click();
-			buttonIncrement.click();
-			flushSync();
+	it('returns the same tracked object if plain track is called with a tracked object', () => {
+		component App() {
+			const t = track({ a: 1, b: 2, c: 3 });
+			const doublet = track(t);
 
-			expect(buttonClickMe.textContent).toBe('Clicked');
-			expect(countPre.textContent).toBe('1');
+			<pre>{t === doublet}</pre>
+		}
 
-			buttonIncrement.click();
-			flushSync();
+		render(App);
 
-			expect(logs).toEqual(['ref called', 'cleanup ref']);
-		});
+		const pre = container.querySelectorAll('pre')[0];
+		expect(pre.textContent).toBe('true');
 	});
 });

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

@@ -341,18 +341,6 @@ component App() {
 	});
 
 	it('keeps lazy destructuring as plain destructuring in to_ts output', () => {
-		const track_split_source = `
-import { trackSplit } from 'ripple';
-component App() {
-	const source = { a: 1, b: 2, c: 3 };
-	let &[a, b, rest] = trackSplit(source, ['a', 'b']);
-	const sum = a + b + rest.c;
-}
-`;
-		const track_split_result = compile_to_volar_mappings(track_split_source, 'test.ripple').code;
-		expect(track_split_result).toContain('let [a, b, rest] = trackSplit(source, [\'a\', \'b\']);');
-		expect(track_split_result).not.toContain('let lazy = trackSplit');
-
 		const track_source = `
 import { track } from 'ripple';
 component App() {
@@ -369,6 +357,37 @@ component App() {
 		expect(track_result).not.toContain('lazy0');
 	});
 
+	it('uses tracked fast path for nested lazy params typed as Tracked', () => {
+		const source = `
+import type { Tracked } from 'ripple';
+function use_nested({ value: &[count, tracked] }: { value: Tracked<number> }) {
+	count++;
+	return tracked;
+}
+`;
+		const { js } = compile(source, 'tracked-nested-lazy.ripple', { mode: 'client' });
+
+		// Nested lazy array should still use tracked tuple fast path from outer annotation.
+		expect(js.code).toContain('_$_.update(');
+		expect(js.code).not.toContain('[0]');
+		expect(js.code).not.toContain('[1]');
+	});
+
+	it('uses tracked fast path for nested lazy params at tuple rest positions', () => {
+		const source = `
+import type { Tracked } from 'ripple';
+function use_tuple_rest({ value: [head, &[count, tracked]] }: { value: [number, ...Tracked<number>[]] }) {
+	count++;
+	return tracked;
+}
+`;
+		const { js } = compile(source, 'tracked-nested-lazy-tuple-rest.ripple', { mode: 'client' });
+
+		// Tuple rest element access should resolve to Tracked<number>, not Tracked<number>[].
+		expect(js.code).toContain('_$_.update(');
+		expect(js.code).not.toContain('[1]');
+	});
+
 	it('preserves generic type args in interface extends for Volar mappings', () => {
 		const source = `
 interface PolymorphicProps<T extends keyof HTMLElementTagNameMap> {

package/tests/client/composite/composite.props.test.ripple

@@ -1,5 +1,5 @@
 import type { Tracked, Props } from 'ripple';
-import { effect, flushSync, track, trackSplit } from 'ripple';
+import { effect, flushSync, track } from 'ripple';
 
 describe('composite > props', () => {
 	it('correctly handles default prop values', () => {
@@ -106,9 +106,8 @@ describe('composite > props', () => {
 	});
 
 	it('correctly retains prop accessors and reactivity when using rest props', () => {
-		component Button(props: Props) {
-			const [children, rest] = trackSplit(props, ['children']);
-			<button {...rest.value}>
+		component Button(&{ children, ...rest }: Props) {
+			<button {...rest}>
 				<@children />
 			</button>
 			<style>
@@ -121,10 +120,9 @@ describe('composite > props', () => {
 			</style>
 		}
 
-		component Toggle(props: { pressed: Tracked<boolean> }) {
-			const [pressed, rest] = trackSplit(props, ['pressed']);
+		component Toggle(&{ pressed, ...rest }: { pressed: Tracked<boolean> }) {
 			const onClick = () => (pressed.value = !pressed.value);
-			<Button {...rest.value} class={pressed.value ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
+			<Button {...rest} class={pressed.value ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
 			<Button class={pressed.value ? 'on' : 'off'} {onClick}>{'button 2'}</Button>
 		}