ripple 0.3.65 → 0.3.66

package/tests/client/compiler/compiler.typescript.test.tsrx

@@ -26,6 +26,29 @@ function getString(e: string = 'test') {
 		expect(result.code).toMatchSnapshot();
 	});
 
+	it('removes TypeScript-only expression wrappers from assignment and update targets', () => {
+		const source = `
+beforeAll(() => {
+	(global as any).ResizeObserver = createMockResizeObserver;
+	(global as any).count++;
+});
+
+component Test() {
+	let toggle: { value: boolean } | undefined;
+	toggle!.value = false;
+	toggle!.value++;
+}`;
+
+		const { code } = compile(source, 'test.tsrx', { mode: 'client' });
+
+		expect(code).toContain('global.ResizeObserver = createMockResizeObserver');
+		expect(code).toContain('global.count++');
+		expect(code).toContain('toggle.value = false');
+		expect(code).toContain('toggle.value++');
+		expect(code).not.toContain('as any');
+		expect(code).not.toContain('!');
+	});
+
 	it('removes class TypeScript syntax from JS output', () => {
 		const source = `interface BaseEvent {}
 

package/tests/client/lazy-array.test.tsrx

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { flushSync, track } from 'ripple';
+
+describe('lazy array destructuring', () => {
+	it('updates unknown lazy array bindings through tracked values', () => {
+		component Child({ tr: &[count, tr] }) {
+			<button
+				onClick={() => {
+					count++;
+					tr[0]++;
+				}}
+			>
+				{count}
+			</button>
+		}
+
+		component App() {
+			let tracked = track(0);
+
+			<Child tr={tracked} />
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+		expect(button?.textContent).toBe('0');
+
+		flushSync(() => {
+			button?.click();
+		});
+
+		expect(button?.textContent).toBe('2');
+	});
+});

package/tests/client/lazy-destructuring.test.tsrx

@@ -1,3 +1,4 @@
+import type { Tracked } from 'ripple';
 import { flushSync, track } from 'ripple';
 
 describe('lazy destructuring', () => {
@@ -77,9 +78,22 @@ describe('lazy destructuring', () => {
 		expect(container.querySelector('pre')!.textContent).toBe('30-40');
 	});
 
+	it('preserves numeric member access on lazy array value bindings', () => {
+		component Child({ pair: &[first] }: { pair: [{ 0: string }] }) {
+			<pre>{first[0]}</pre>
+		}
+
+		component Test() {
+			<Child pair={[{ 0: 'x' }]} />
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('x');
+	});
+
 	it('supports default values in lazy object destructuring', () => {
 		component Test() {
-			const obj = { a: 5 };
+			const obj: { a: number; b?: number } = { a: 5 };
 			const &{ a, b = 99 } = obj;
 			<pre>{`${a}-${b}`}</pre>
 		}
@@ -127,7 +141,7 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports nested lazy destructuring in non-lazy component params', () => {
-		component Inner({ something: &[first, second] }) {
+		component Inner({ something: &[first, second] }: { something: Tracked<number> }) {
 			first = second.value + 1;
 			<pre>{`${first}-${second.value}`}</pre>
 		}
@@ -143,7 +157,11 @@ describe('lazy destructuring', () => {
 	it(
 		'preserves lazy getter/setter behavior for nested rest destructuring in non-lazy component params',
 		() => {
-			component Inner({ values: [head, ...&{ length: rest_length, 0: first_rest }] }) {
+			component Inner({
+				values: [head, ...&{ length: rest_length, 0: first_rest }],
+			}: {
+				values: [number, Tracked<number>, Tracked<number>];
+			}) {
 				const before = `${first_rest?.value ?? 'nil'}-${rest_length}`;
 				rest_length = 0;
 				<pre>{`${head}-${before}-${first_rest?.value ?? 'nil'}-${rest_length}`}</pre>
@@ -175,7 +193,7 @@ describe('lazy destructuring', () => {
 		component Test() {
 			const something = track(1);
 
-			function getInfo({ something: &[first, second] }) {
+			function getInfo({ something: &[first, second] }: { something: Tracked<number> }) {
 				first = second.value + 1;
 				return `${first}-${second.value}`;
 			}
@@ -192,7 +210,11 @@ describe('lazy destructuring', () => {
 		'preserves lazy getter/setter behavior for nested rest destructuring in non-lazy function params',
 		() => {
 			component Test() {
-				function summarize({ values: [head, ...&{ length: rest_length, 0: first_rest }] }) {
+				function summarize({
+					values: [head, ...&{ length: rest_length, 0: first_rest }],
+				}: {
+					values: [number, Tracked<number>, Tracked<number>];
+				}) {
 					const before = `${first_rest?.value ?? 'nil'}-${rest_length}`;
 					rest_length = 0;
 					return `${head}-${before}-${first_rest?.value ?? 'nil'}-${rest_length}`;
@@ -276,11 +298,11 @@ describe('lazy destructuring', () => {
 	it('supports rest destructuring from iterable array-like tracked values', () => {
 		component Test() {
 			let &[value, ...rest] = track(0);
-			<pre>{`${value}-${rest.length}-${rest[0] === value}`}</pre>
+			<pre>{`${value}-${rest.length}-${(rest[0] as Tracked<number>).value === value}`}</pre>
 		}
 
 		render(Test);
-		expect(container.querySelector('pre')!.textContent).toBe('0-1-false');
+		expect(container.querySelector('pre')!.textContent).toBe('0-1-true');
 	});
 
 	it('supports rest destructuring from length-only array-like sources', () => {
@@ -294,6 +316,23 @@ describe('lazy destructuring', () => {
 		expect(container.querySelector('pre')!.textContent).toBe('x-y,z');
 	});
 
+	it('supports rest destructuring from iterable sources', () => {
+		component Test() {
+			const source = {
+				*[Symbol.iterator]() {
+					yield 'x';
+					yield 'y';
+					yield 'z';
+				},
+			};
+			const &[first, ...rest] = source;
+			<pre>{`${first}-${rest.join(',')}`}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('x-y,z');
+	});
+
 	it('supports update expressions on lazy bindings with default values', () => {
 		component Test() {
 			const obj: { count?: number } = {};
@@ -320,7 +359,7 @@ describe('lazy destructuring', () => {
 
 	it('supports standalone lazy array destructuring with track()', () => {
 		component Test() {
-			let count;
+			let count: number;
 			&[count] = track(0);
 			<div>{count}</div>
 			<button
@@ -361,6 +400,38 @@ describe('lazy destructuring', () => {
 		expect(container.querySelector('div')!.textContent).toBe('100');
 	});
 
+	it('supports direct value access on tracked values', () => {
+		component Test() {
+			let tracked = track(0);
+			++tracked.value;
+			tracked.value++;
+			tracked.value = tracked.value + 1;
+			let value = tracked.value;
+			let ref = tracked;
+
+			<pre>{`${value}-${ref === tracked}`}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('3-true');
+	});
+
+	it('supports lazy destructured tracked ref value access', () => {
+		component Child({ pair: &[value, tracked_ref] }: { pair: Tracked<number> }) {
+			++tracked_ref.value;
+			tracked_ref.value++;
+			<pre>{`${value}-${tracked_ref.value}`}</pre>
+		}
+
+		component Test() {
+			let tracked = track(0);
+			<Child pair={tracked} />
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('2-2');
+	});
+
 	it('supports standalone lazy object destructuring', () => {
 		component Test() {
 			let a;

package/tests/client/tracked-index-access.test.tsrx

@@ -0,0 +1,113 @@
+import { describe, expect, it } from 'vitest';
+import { track } from 'ripple';
+import {
+	lazy_array_get,
+	lazy_array_set,
+	lazy_array_update,
+} from '../../src/runtime/internal/client/runtime.js';
+
+const value_message = /Use \.value or &\[\] lazy destructuring/;
+const reference_message = /Use the tracked value directly instead/;
+const value_index = Number(0);
+const reference_index = Number(1);
+
+describe('client tracked numeric access', () => {
+	it('throws when tracked values are accessed through numeric properties', () => {
+		let value: any;
+
+		component Test() {
+			value = track(0);
+			<div />
+		}
+
+		render(Test);
+
+		expect(() => value[value_index]).toThrow(value_message);
+		expect(() => {
+			value[value_index] = 1;
+		}).toThrow(value_message);
+		expect(() => value[reference_index]).toThrow(reference_message);
+	});
+
+	it('throws when derived values are accessed through numeric properties', () => {
+		let value: any;
+
+		component Test() {
+			value = track(() => 1);
+			<div />
+		}
+
+		render(Test);
+
+		expect(() => value[value_index]).toThrow(value_message);
+		expect(() => {
+			value[value_index] = 2;
+		}).toThrow(value_message);
+		expect(() => value[reference_index]).toThrow(reference_message);
+	});
+
+	it('sets tracked lazy index 0 and rejects tracked lazy index 1', () => {
+		let value: any;
+		let next: any;
+
+		component Test() {
+			value = track(0);
+			next = track(1);
+			<div />
+		}
+
+		render(Test);
+
+		lazy_array_set(value, 2, 0);
+		expect(value.value).toBe(2);
+		expect(() => {
+			lazy_array_set(value, next, 1);
+		}).toThrow(reference_message);
+		expect(() => {
+			lazy_array_update(value, 1);
+		}).toThrow(reference_message);
+	});
+
+	it('returns undefined for tracked lazy indexes past the tuple length', () => {
+		let value: any;
+		let derived: any;
+
+		component Test() {
+			value = track(0);
+			derived = track(() => value.value + 1);
+			<div />
+		}
+
+		render(Test);
+
+		expect(lazy_array_get(value, 0)).toBe(0);
+		expect(lazy_array_get(value, 1)).toBe(value);
+		expect(lazy_array_get(value, 2)).toBeUndefined();
+		expect(lazy_array_get(derived, 0)).toBe(1);
+		expect(lazy_array_get(derived, 1)).toBe(derived);
+		expect(lazy_array_get(derived, 2)).toBeUndefined();
+	});
+
+	it('ignores tracked lazy writes past the tuple length', () => {
+		let value: any;
+		let derived: any;
+
+		component Test() {
+			value = track(0);
+			derived = track(() => value.value + 1);
+			<div />
+		}
+
+		render(Test);
+
+		lazy_array_set(value, 10, 2);
+		lazy_array_update(value, 2);
+		lazy_array_set(derived, 20, 2);
+		lazy_array_update(derived, 2);
+
+		expect(lazy_array_get(value, 2)).toBeUndefined();
+		expect(lazy_array_get(derived, 2)).toBeUndefined();
+		expect(Object.hasOwn(value, 2)).toBe(false);
+		expect(Object.hasOwn(derived, 2)).toBe(false);
+	});
+});

package/tests/hydration/compiled/client/basic.js

@@ -537,7 +537,7 @@ export function DynamicArrayFromTrack(__anchor, _, __block) {
 	{
 		var expression_23 = _$_.child(div_16);
 
-		_$_.expression(expression_23, () => _$_.get(lazy));
+		_$_.expression(expression_23, () => lazy.value);
 		_$_.pop(div_16);
 	}
 
@@ -707,7 +707,7 @@ export function TextPropWithToggle(__anchor, _, __block) {
 		node_5,
 		{
 			get children() {
-				return _$_.normalize_children(_$_.get(lazy_1) ? 'hello' : '');
+				return _$_.normalize_children(lazy_1.value ? 'hello' : '');
 			}
 		},
 		_$_.active_block

package/tests/hydration/compiled/client/events.js

@@ -29,7 +29,7 @@ export function ClickCounter(__anchor, _, __block) {
 		{
 			var expression = _$_.child(span_1);
 
-			_$_.expression(expression, () => _$_.get(lazy));
+			_$_.expression(expression, () => lazy.value);
 			_$_.pop(span_1);
 		}
 	}
@@ -56,7 +56,7 @@ export function IncrementDecrement(__anchor, _, __block) {
 		{
 			var expression_1 = _$_.child(span_2);
 
-			_$_.expression(expression_1, () => _$_.get(lazy_1));
+			_$_.expression(expression_1, () => lazy_1.value);
 			_$_.pop(span_2);
 		}
 
@@ -94,7 +94,7 @@ export function MultipleEvents(__anchor, _, __block) {
 		{
 			var expression_2 = _$_.child(span_3);
 
-			_$_.expression(expression_2, () => _$_.get(lazy_2));
+			_$_.expression(expression_2, () => lazy_2.value);
 			_$_.pop(span_3);
 		}
 
@@ -103,7 +103,7 @@ export function MultipleEvents(__anchor, _, __block) {
 		{
 			var expression_3 = _$_.child(span_4);
 
-			_$_.expression(expression_3, () => _$_.get(lazy_3));
+			_$_.expression(expression_3, () => lazy_3.value);
 			_$_.pop(span_4);
 		}
 	}
@@ -135,7 +135,7 @@ export function MultiStateUpdate(__anchor, _, __block) {
 		{
 			var expression_4 = _$_.child(span_5);
 
-			_$_.expression(expression_4, () => _$_.get(lazy_4));
+			_$_.expression(expression_4, () => lazy_4.value);
 			_$_.pop(span_5);
 		}
 
@@ -144,7 +144,7 @@ export function MultiStateUpdate(__anchor, _, __block) {
 		{
 			var expression_5 = _$_.child(span_6);
 
-			_$_.expression(expression_5, () => _$_.get(lazy_5));
+			_$_.expression(expression_5, () => lazy_5.value);
 			_$_.pop(span_6);
 		}
 	}
@@ -163,13 +163,13 @@ export function ToggleButton(__anchor, _, __block) {
 		var button_6 = _$_.child(div_5);
 
 		button_6.__click = () => {
-			_$_.set(lazy_6, !_$_.get(lazy_6));
+			_$_.set(lazy_6, !lazy_6.value);
 		};
 
 		{
 			var expression_6 = _$_.child(button_6);
 
-			_$_.expression(expression_6, () => _$_.get(lazy_6) ? 'ON' : 'OFF');
+			_$_.expression(expression_6, () => lazy_6.value ? 'ON' : 'OFF');
 			_$_.pop(button_6);
 		}
 	}
@@ -221,7 +221,7 @@ export function ParentWithChildButton(__anchor, _, __block) {
 		{
 			var expression_8 = _$_.child(span_7);
 
-			_$_.expression(expression_8, () => _$_.get(lazy_7));
+			_$_.expression(expression_8, () => lazy_7.value);
 			_$_.pop(span_7);
 		}