ripple 0.3.64 → 0.3.66

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

@@ -28,7 +28,7 @@ import {
 } from '../client/constants.js';
 import { DEV } from 'esm-env';
 import { is_ripple_object } from '../client/utils.js';
-import { array_slice, is_array } from '@tsrx/core/runtime/language-helpers';
+import { iterable_array_from, array_slice, is_array } from '@tsrx/core/runtime/language-helpers';
 import {
 	escape,
 	escape_script,
@@ -44,6 +44,10 @@ import {
 	is_tag_valid_with_ancestor,
 } from '../../../html-tree-validation.js';
 import { get_async_track_result } from '../../../utils/async.js';
+import {
+	throw_tracked_index_reference_error,
+	throw_tracked_index_value_error,
+} from '../../../utils/errors.js';
 import { get_track_async_script_id } from '../../../utils/track-async-serialization.js';
 import * as devalue from 'devalue';
 import {
@@ -696,17 +700,26 @@ export async function render(component, passed_in_options = {}) {
 			}
 		},
 		(error) => {
-			// TODO - allow a global error template in ripple.config.ts
 			// We're not going to send the error in the stream stream.error()
 			// as we should send sent the error template
 
 			// store the error to be returned
 			top_level_error = error;
-			console.error(error);
+			const output = /** @type {Block | null} */ (root_block)?.o;
+			if (output?.isSyncRun()) {
+				output._decrementPending();
+				output._finishSyncRun();
+			}
+			if (options.rootBoundary?.catch) {
+				options.rootBoundary.catch({ error, reset: noop });
+			} else {
+				console.error(error);
+			}
 		},
 		() => {
-			// TODO - allow a global pending in ripple.config.ts
-			// pending would be implemented as part of the streaming rendering support
+			if (options.rootBoundary?.pending) {
+				options.rootBoundary.pending({});
+			}
 		},
 	);
 
@@ -863,12 +876,49 @@ export function get(tracked) {
 		return tracked;
 	}
 
-	if ((tracked.f & DERIVED) !== 0) {
-		update_derived(/** @type {Derived} **/ (tracked));
-		if (tracking) {
-			register_dependency(tracked);
+	return (tracked.f & DERIVED) !== 0
+		? get_derived(/** @type {Derived} */ (tracked))
+		: get_tracked(/** @type {Tracked} */ (tracked));
+}
+
+/**
+ * @param {Tracked} tracked
+ * @returns {any}
+ */
+export function get_tracked(tracked) {
+	if (tracking) {
+		register_dependency(tracked);
+	}
+
+	if (tracked.v === SUSPENSE_PENDING || tracked.v === SUSPENSE_REJECTED) {
+		var is_try_block = false;
+		if (
+			!inside_async_track &&
+			(!active_block ||
+				active_block.f & COMPONENT_BLOCK ||
+				(is_try_block = (active_block.f & TRY_BLOCK) !== 0))
+		) {
+			throw new Error(
+				`Reads on pending tracked or derived values directly inside ${is_try_block ? 'try' : 'component'} body are prohibited. Use trackPending() test for safe access or create another derived instead.`,
+			);
 		}
-	} else if (tracking) {
+
+		// this will be caught by the run_block and the block will be re-run
+		// once the async tracked dependency's promise resolves
+		throw ASYNC_DERIVED_READ_THROWN;
+	}
+
+	var g = tracked.a.get;
+	return g ? g(tracked.v) : tracked.v;
+}
+
+/**
+ * @param {Derived} tracked
+ * @returns {any}
+ */
+export function get_derived(tracked) {
+	update_derived(tracked);
+	if (tracking) {
 		register_dependency(tracked);
 	}
 
@@ -894,6 +944,60 @@ export function get(tracked) {
 	return g ? g(tracked.v) : tracked.v;
 }
 
+/**
+ * @param {any} lazy
+ * @param {number} [index]
+ * @returns {any}
+ */
+export function lazy_array_get(lazy, index = 0) {
+	if (is_array(lazy)) {
+		return lazy[index];
+	}
+	var flags = lazy.f;
+	if (flags === TRACKED) {
+		return index === 0
+			? get_tracked(/** @type {Tracked} */ (lazy))
+			: index === 1
+				? lazy
+				: undefined;
+	}
+	if (flags === DERIVED) {
+		return index === 0
+			? get_derived(/** @type {Derived} */ (lazy))
+			: index === 1
+				? lazy
+				: undefined;
+	}
+	return iterable_array_from(lazy, index)[0];
+}
+
+/**
+ * @param {any} lazy
+ * @param {number} [index]
+ * @returns {any[]}
+ */
+export function lazy_array_rest(lazy, index = 0) {
+	if (is_array(lazy)) {
+		return lazy.slice(index);
+	}
+	var flags = lazy.f;
+	if (flags === TRACKED) {
+		return index === 0
+			? [get_tracked(/** @type {Tracked} */ (lazy)), lazy]
+			: index === 1
+				? [lazy]
+				: [];
+	}
+	if (flags === DERIVED) {
+		return index === 0
+			? [get_derived(/** @type {Derived} */ (lazy)), lazy]
+			: index === 1
+				? [lazy]
+				: [];
+	}
+	return iterable_array_from(lazy, index);
+}
+
 /**
  * @param {Derived | Tracked} tracked
  * @param {any} value
@@ -908,6 +1012,57 @@ export function set(tracked, value) {
 	}
 }
 
+/**
+ * @param {any} lazy
+ * @param {any} value
+ * @param {number} [index]
+ * @returns {void}
+ */
+export function lazy_array_set(lazy, value, index = 0) {
+	if (is_array(lazy)) {
+		lazy[index] = value;
+		return;
+	}
+	var flags = lazy.f;
+	if (flags === TRACKED || flags === DERIVED) {
+		if (index === 0) {
+			set(/** @type {Derived | Tracked} */ (lazy), value);
+			return;
+		}
+		if (index === 1) {
+			throw_tracked_index_reference_error();
+		}
+		return;
+	}
+	lazy[index] = value;
+}
+
+/**
+ * @param {any} lazy
+ * @param {number} [index]
+ * @param {number} [d]
+ * @returns {number}
+ */
+export function lazy_array_update(lazy, index = 0, d = 1) {
+	var value = lazy_array_get(lazy, index);
+	var result = d === 1 ? value++ : value--;
+	lazy_array_set(lazy, value, index);
+	return result;
+}
+
+/**
+ * @param {any} lazy
+ * @param {number} [index]
+ * @param {number} [d]
+ * @returns {number}
+ */
+export function lazy_array_update_pre(lazy, index = 0, d = 1) {
+	var value = lazy_array_get(lazy, index);
+	var new_value = d === 1 ? ++value : --value;
+	lazy_array_set(lazy, new_value, index);
+	return new_value;
+}
+
 /**
  * @param {Tracked} tracked
  * @param {number} [d]
@@ -1082,19 +1237,19 @@ class TrackedValue {
 	}
 	/** @returns {any} */
 	get [0]() {
-		return get(/** @type {Tracked} */ (this));
+		return throw_tracked_index_value_error();
 	}
 	/** @param {any} v */
 	set [0](v) {
-		set(/** @type {Tracked} */ (this), v);
+		throw_tracked_index_value_error();
 	}
 	/** @returns {Tracked} */
 	get [1]() {
-		return /** @type {Tracked} */ (this);
+		return throw_tracked_index_reference_error();
 	}
 	/** @returns {any} */
 	get value() {
-		return get(/** @type {Tracked} */ (this));
+		return get_tracked(/** @type {Tracked} */ (this));
 	}
 	/** @param {any} v */
 	set value(v) {
@@ -1106,7 +1261,7 @@ class TrackedValue {
 	}
 	/** @returns {Iterator<any | Tracked>} */
 	*[Symbol.iterator]() {
-		yield get(/** @type {Tracked} */ (this));
+		yield get_tracked(/** @type {Tracked} */ (this));
 		yield this;
 	}
 }
@@ -1140,19 +1295,19 @@ class DerivedValue {
 	}
 	/** @returns {any} */
 	get [0]() {
-		return get(/** @type {Derived} */ (this));
+		return throw_tracked_index_value_error();
 	}
 	/** @param {any} v */
 	set [0](v) {
-		set(/** @type {Derived} */ (this), v);
+		throw_tracked_index_value_error();
 	}
 	/** @returns {Derived} */
 	get [1]() {
-		return /** @type {Derived} */ (this);
+		return throw_tracked_index_reference_error();
 	}
 	/** @returns {any} */
 	get value() {
-		return get(/** @type {Derived} */ (this));
+		return get_derived(/** @type {Derived} */ (this));
 	}
 	/** @param {any} v */
 	set value(v) {
@@ -1164,7 +1319,7 @@ class DerivedValue {
 	}
 	/** @returns {Iterator<any | Derived>} */
 	*[Symbol.iterator]() {
-		yield get(/** @type {Derived} */ (this));
+		yield get_derived(/** @type {Derived} */ (this));
 		yield this;
 	}
 }

package/src/utils/errors.js

@@ -0,0 +1,13 @@
+/** @returns {never} */
+export function throw_tracked_index_value_error() {
+	throw new Error(
+		'Do not access tracked values with [0]. Use .value or &[] lazy destructuring instead. Numeric tracked access leads to degraded performance.',
+	);
+}
+
+/** @returns {never} */
+export function throw_tracked_index_reference_error() {
+	throw new Error(
+		'Do not access tracked values with [1]. Use the tracked value directly instead. Numeric tracked access leads to degraded performance.',
+	);
+}

package/tests/client/async-suspend.test.tsrx

@@ -659,7 +659,7 @@ describe('async suspense', () => {
 		},
 	);
 
-	it('throws when trackAsync is used without a try/pending boundary', () => {
+	it('uses the root pending boundary when trackAsync has no local try/pending boundary', () => {
 		component App() {
 			let &[value] = trackAsync(() => Promise.resolve('test'));
 			<div>{value}</div>
@@ -667,6 +667,6 @@ describe('async suspense', () => {
 
 		expect(() => {
 			render(App);
-		}).toThrow('Missing parent `try { ... } pending { ... }` statement');
+		}).not.toThrow();
 	});
 });

package/tests/client/basic/basic.get-set.test.tsrx

@@ -1,11 +1,11 @@
-import { effect, flushSync, get, set, track, untrack } from 'ripple';
+import { effect, flushSync, track, untrack } from 'ripple';
 
-describe('basic client > get/set functions', () => {
+describe('basic client > tracked value access', () => {
 	it('gets tracked value', () => {
 		component Test() {
 			let count = track(0);
 
-			<div>{get(count)}</div>
+			<div>{count.value}</div>
 		}
 
 		render(Test);
@@ -18,7 +18,7 @@ describe('basic client > get/set functions', () => {
 		component Test() {
 			let &[count] = track(0);
 
-			<p>{get(count)}</p>
+			<p>{count}</p>
 			<button onClick={() => count++}>{'increment'}</button>
 		}
 
@@ -38,7 +38,7 @@ describe('basic client > get/set functions', () => {
 		component Test() {
 			let &[count] = track(0);
 
-			<p>{get(count)}</p>
+			<p>{count}</p>
 			<button
 				onClick={() => {
 					count++;
@@ -66,8 +66,8 @@ describe('basic client > get/set functions', () => {
 		component Test() {
 			let count = track(0);
 
-			<p>{get(count)}</p>
-			<button onClick={() => set(count, 10)}>{'set to 10'}</button>
+			<p>{count.value}</p>
+			<button onClick={() => (count.value = 10)}>{'set to 10'}</button>
 		}
 
 		render(Test);
@@ -86,12 +86,12 @@ describe('basic client > get/set functions', () => {
 		component Test() {
 			let count = track(0);
 
-			<p>{get(count)}</p>
+			<p>{count.value}</p>
 			<button
 				onClick={() => {
-					set(count, 5);
-					set(count, 15);
-					set(count, 25);
+					count.value = 5;
+					count.value = 15;
+					count.value = 25;
 				}}
 			>
 				{'set multiple times'}
@@ -114,8 +114,8 @@ describe('basic client > get/set functions', () => {
 		component Test() {
 			let count = track(0);
 
-			<p>{get(count)}</p>
-			<button onClick={() => set(count, get(count) + 10)}>{'add 10'}</button>
+			<p>{count.value}</p>
+			<button onClick={() => (count.value = count.value + 10)}>{'add 10'}</button>
 		}
 
 		render(Test);
@@ -140,12 +140,12 @@ describe('basic client > get/set functions', () => {
 		component Test() {
 			let count = track(0);
 
-			<p>{get(count)}</p>
+			<p>{count.value}</p>
 			<button
 				onClick={() => {
-					set(count, get(count) + 5);
-					set(count, get(count) + 15);
-					set(count, get(count) + 25);
+					count.value = count.value + 5;
+					count.value = count.value + 15;
+					count.value = count.value + 25;
 				}}
 			>
 				{'add multiple times'}
@@ -177,7 +177,7 @@ describe('basic client > get/set functions', () => {
 
 		component Test() {
 			let count = store();
-			<p>{get(count)}</p>
+			<p>{count.value}</p>
 		}
 
 		render(Test);
@@ -194,8 +194,8 @@ describe('basic client > get/set functions', () => {
 		component Test() {
 			let count = store();
 
-			<p>{get(count)}</p>
-			<button onClick={() => set(count, 50)}>{'set to 50'}</button>
+			<p>{count.value}</p>
+			<button onClick={() => (count.value = 50)}>{'set to 50'}</button>
 		}
 
 		render(Test);
@@ -216,11 +216,11 @@ describe('basic client > get/set functions', () => {
 			let double = track(0);
 
 			effect(() => {
-				set(double, get(count) * 2);
+				double.value = count.value * 2;
 			});
 
-			<p>{get(double)}</p>
-			<button onClick={() => set(count, get(count) + 1)}>{'increment'}</button>
+			<p>{double.value}</p>
+			<button onClick={() => (count.value = count.value + 1)}>{'increment'}</button>
 		}
 
 		render(Test);
@@ -247,12 +247,12 @@ describe('basic client > get/set functions', () => {
 
 			effect(() => {
 				untrack(() => {
-					set(double, get(count) * 2);
+					double.value = count.value * 2;
 				});
 			});
 
-			<p>{get(double)}</p>
-			<button onClick={() => set(count, get(count) + 1)}>{'increment'}</button>
+			<p>{double.value}</p>
+			<button onClick={() => (count.value = count.value + 1)}>{'increment'}</button>
 		}
 
 		render(Test);

package/tests/client/compiler/__snapshots__/compiler.assignments.test.rsrx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`compiler > assignments > compiles tracked values in effect with assignment expression 1`] = `"state.count = _$_.get(lazy);"`;
+exports[`compiler > assignments > compiles tracked values in effect with assignment expression 1`] = `"state.count = lazy.value;"`;
 
 exports[`compiler > assignments > compiles tracked values in effect with update expressions 1`] = `
 "_$_.untrack(() => {

package/tests/client/compiler/__snapshots__/compiler.assignments.test.tsrx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`compiler > assignments > compiles tracked values in effect with assignment expression 1`] = `"state.count = _$_.get(lazy);"`;
+exports[`compiler > assignments > compiles tracked values in effect with assignment expression 1`] = `"state.count = lazy.value;"`;
 
 exports[`compiler > assignments > compiles tracked values in effect with update expressions 1`] = `
 "_$_.untrack(() => {

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

@@ -139,4 +139,84 @@ component App() {
 		const effect_match = result.code.match(EFFECT_BODY_REGEX);
 		expect(effect_match?.[1].trim()).toMatchSnapshot();
 	});
+
+	it('compiles unknown lazy array destructuring through lazy array helpers', () => {
+		const source = `import { track } from 'ripple';
+component Child({ tr: &[count, tr] }) {
+	count++;
+	tr[0]++;
+	<div>{count}</div>
+}
+component App() {
+	let tracked = track(0);
+	<Child tr={tracked} />
+}`;
+		const { code } = compile(source, 'test.tsrx', { mode: 'client' });
+
+		expect(code).toContain('_$_.lazy_array_get(lazy, 0)');
+		expect(code).toContain('_$_.lazy_array_update(lazy, 0)');
+		expect(code).toContain('_$_.lazy_array_get(lazy, 1)');
+		expect(code).toContain('_$_.lazy_array_update(_$_.lazy_array_get(lazy, 1), 0)');
+		expect(code).not.toContain('lazy[0]');
+		expect(code).not.toContain('lazy[1][0]');
+	});
+
+	it('compiles writes to unknown lazy array index 1 through lazy array helpers', () => {
+		const source = `component Child({ pair: &[first, second] }) {
+	second = 10;
+	<div>{first}</div>
+}
+component App() {
+	<Child pair={[0, 1]} />
+}`;
+		const { code } = compile(source, 'test.tsrx', { mode: 'client' });
+
+		expect(code).toContain('_$_.lazy_array_set(lazy, 10, 1)');
+		expect(code).not.toContain('lazy[1] =');
+	});
+
+	it('does not double-wrap member access on lazy array value bindings', () => {
+		const source = `component Child({ pair: &[first] }) {
+	let value = first[0];
+	<div>{value}</div>
+}
+component App() {
+	<Child pair={[{ 0: 'x' }]} />
+}`;
+		const { code } = compile(source, 'test.tsrx', { mode: 'client' });
+
+		expect(code).toContain('let value = _$_.lazy_array_get(lazy, 0)[0];');
+		expect(code).not.toContain('_$_.lazy_array_get(_$_.lazy_array_get(lazy, 0), 0)');
+	});
+
+	it('throws on indexed access through known tracked lazy destructures', () => {
+		const source = `import { track } from 'ripple';
+component App() {
+	let &[value, tracked_ref] = track({ 0: 'x' });
+	let nested = value[0];
+	tracked_ref[0] = { 0: 'y' };
+	let next = value[0];
+	<div>{nested}{next}</div>
+}`;
+
+		expect(() => compile(source, 'test.tsrx', { mode: 'client' })).toThrow(
+			/Use \.value or &\[\] lazy destructuring/,
+		);
+	});
+
+	it('throws on known tracked indexed access', () => {
+		const source = `import { track } from 'ripple';
+component App() {
+	let tracked = track(0);
+	tracked[0]++;
+	tracked[0] = tracked[0] + 1;
+	let value = tracked[0];
+	let ref = tracked[1];
+	<div>{value}</div>
+}`;
+
+		expect(() => compile(source, 'test.tsrx', { mode: 'client' })).toThrow(
+			/Use \.value or &\[\] lazy destructuring/,
+		);
+	});
 });

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

@@ -1,5 +1,8 @@
 import { compile } from '@tsrx/ripple';
 
+const value_message = /Use \.value or &\[\] lazy destructuring/;
+const reference_message = /Use the tracked value directly instead/;
+
 describe('Compiler: Tracked Object Direct Access Checks', () => {
 	it('should error on direct access to __v of a tracked object', () => {
 		const code = `
@@ -77,12 +80,12 @@ import { track } from 'ripple';
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
-	it('should compile successfully with correct get() function access', () => {
+	it('should compile successfully with correct value access', () => {
 		const code = `
-import { get, track } from 'ripple';
+import { track } from 'ripple';
             export default component App() {
                 let count = track(0);
-                console.log(get(count));
+                console.log(count.value);
             }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
@@ -122,7 +125,7 @@ import { get, track } from 'ripple';
 		},
 	);
 
-	it('should allow indexed [0] access on a tracked object', () => {
+	it('should error on indexed [0] access on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
             export default component App() {
@@ -130,10 +133,10 @@ import { track } from 'ripple';
                 console.log(count[0]);
             }
         `;
-		expect(() => compile(code, 'test.tsrx')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).toThrow(value_message);
 	});
 
-	it('should allow indexed [1] access on a tracked object', () => {
+	it('should error on indexed [1] access on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
             export default component App() {
@@ -141,16 +144,57 @@ import { track } from 'ripple';
                 let raw = count[1];
             }
         `;
-		expect(() => compile(code, 'test.tsrx')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).toThrow(reference_message);
 	});
 
-	it('should allow [0] write on a tracked object', () => {
+	it('should error on indexed [0] write on a tracked object', () => {
 		const code = `
 import { track } from 'ripple';
             export default component App() {
                 let count = track(0);
                 count[0] = 5;
             }
+        `;
+		expect(() => compile(code, 'test.tsrx')).toThrow(value_message);
+	});
+
+	it('collects tracked numeric index errors in loose mode', () => {
+		const code = `
+import { track } from 'ripple';
+            export default component App() {
+                let count = track(0);
+                console.log(count[0]);
+                let raw = count[1];
+            }
+        `;
+		const result = compile(code, 'test.tsrx', { loose: true });
+
+		expect(result.errors.map((error) => error.message)).toEqual(
+			expect.arrayContaining([
+				expect.stringMatching(value_message),
+				expect.stringMatching(reference_message),
+			]),
+		);
+	});
+
+	it('should error on indexed access through a known tracked lazy ref binding', () => {
+		const code = `
+import { track } from 'ripple';
+            export default component App() {
+                let &[value, tracked_ref] = track(0);
+                tracked_ref[0]++;
+            }
+        `;
+		expect(() => compile(code, 'test.tsrx')).toThrow(value_message);
+	});
+
+	it('should allow lazy destructuring a tracked value', () => {
+		const code = `
+import { track } from 'ripple';
+            export default component App() {
+                let &[value, tracked_ref] = track(0);
+                console.log(value, tracked_ref.value);
+            }
         `;
 		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});