ripple 0.3.6 → 0.3.8

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

@@ -289,6 +289,95 @@ export function run_block(block) {
 
 var empty_get_set = { get: undefined, set: undefined };
 
+class TrackedValue {
+	/**
+	 * @param {any} v
+	 * @param {Block} block
+	 * @param {{ get?: Function; set?: Function }} a
+	 */
+	constructor(v, block, a) {
+		this.a = a;
+		this.b = block;
+		this.c = 0;
+		this.f = TRACKED;
+		this.__v = v;
+	}
+	get [0]() {
+		return get_tracked(/** @type {Tracked} */ (this));
+	}
+	set [0](v) {
+		set(/** @type {Tracked} */ (this), v);
+	}
+	get [1]() {
+		return this;
+	}
+	get value() {
+		return get_tracked(/** @type {Tracked} */ (this));
+	}
+	/** @param {any} v */
+	set value(v) {
+		set(/** @type {Tracked} */ (this), v);
+	}
+	/** @returns {2} */
+	get length() {
+		return 2;
+	}
+	*[Symbol.iterator]() {
+		yield get_tracked(/** @type {Tracked} */ (this));
+		yield this;
+	}
+}
+
+class DerivedValue {
+	/**
+	 * @param {Function} fn
+	 * @param {Block} block
+	 * @param {{ get?: Function; set?: Function }} a
+	 */
+	constructor(fn, block, a) {
+		this.a = a;
+		this.b = block;
+		/** @type {null | Block[]} */
+		this.blocks = null;
+		this.c = 0;
+		this.co = active_component;
+		/** @type {null | Dependency} */
+		this.d = null;
+		this.f = TRACKED | DERIVED;
+		this.fn = fn;
+		this.__v = UNINITIALIZED;
+	}
+	get [0]() {
+		return get_derived(/** @type {Derived} */ (this));
+	}
+	set [0](v) {
+		set(/** @type {Derived} */ (this), v);
+	}
+	get [1]() {
+		return this;
+	}
+	get value() {
+		return get_derived(/** @type {Derived} */ (this));
+	}
+	/** @param {any} v */
+	set value(v) {
+		set(/** @type {Derived} */ (this), v);
+	}
+	/** @returns {2} */
+	get length() {
+		return 2;
+	}
+	*[Symbol.iterator]() {
+		yield get_derived(/** @type {Derived} */ (this));
+		yield this;
+	}
+}
+
+if (DEV) {
+	define_property(TrackedValue.prototype, 'DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY', { value: true });
+	define_property(DerivedValue.prototype, 'DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY', { value: true });
+}
+
 /**
  *
  * @param {any} v
@@ -298,25 +387,9 @@ var empty_get_set = { get: undefined, set: undefined };
  * @returns {Tracked}
  */
 export function tracked(v, block, get, set) {
-	// TODO: now we expose tracked, we should likely block access in DEV somehow
-	if (DEV) {
-		return {
-			DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY: true,
-			a: get || set ? { get, set } : empty_get_set,
-			b: block || active_block,
-			c: 0,
-			f: TRACKED,
-			__v: v,
-		};
-	}
-
-	return {
-		a: get || set ? { get, set } : empty_get_set,
-		b: block || active_block,
-		c: 0,
-		f: TRACKED,
-		__v: v,
-	};
+	return /** @type {Tracked} */ (
+		new TrackedValue(v, block || active_block, get || set ? { get, set } : empty_get_set)
+	);
 }
 
 /**
@@ -327,32 +400,9 @@ export function tracked(v, block, get, set) {
  * @returns {Derived}
  */
 export function derived(fn, block, get, set) {
-	if (DEV) {
-		return {
-			DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY: true,
-			a: get || set ? { get, set } : empty_get_set,
-			b: block || active_block,
-			blocks: null,
-			c: 0,
-			co: active_component,
-			d: null,
-			f: TRACKED | DERIVED,
-			fn,
-			__v: UNINITIALIZED,
-		};
-	}
-
-	return {
-		a: get || set ? { get, set } : empty_get_set,
-		b: block || active_block,
-		blocks: null,
-		c: 0,
-		co: active_component,
-		d: null,
-		f: TRACKED | DERIVED,
-		fn,
-		__v: UNINITIALIZED,
-	};
+	return /** @type {Derived} */ (
+		new DerivedValue(fn, block || active_block, get || set ? { get, set } : empty_get_set)
+	);
 }
 
 /**

package/src/runtime/internal/client/types.d.ts

@@ -24,6 +24,11 @@ export type Tracked<V = any> = {
 	c: number;
 	f: number;
 	__v: V;
+	readonly [0]: V;
+	[1]: Tracked<V>;
+	value: V;
+	readonly length: 2;
+	[Symbol.iterator](): Iterator<V | Tracked<V>>;
 };
 
 export type Derived = {
@@ -37,6 +42,11 @@ export type Derived = {
 	f: number;
 	fn: Function;
 	__v: any;
+	readonly [0]: any;
+	[1]: Derived;
+	value: any;
+	readonly length: 2;
+	[Symbol.iterator](): Iterator<any | Derived>;
 };
 
 export type Block = {

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

@@ -27,6 +27,18 @@ export var object_prototype = Object.prototype;
 /** @type {typeof Array.prototype} */
 export var array_prototype = Array.prototype;
 
+/**
+ * Slice helper for arrays and array-like values.
+ * @param {ArrayLike<any>} array_like
+ * @param {...number} args
+ * @returns {any[]}
+ */
+export function array_slice(array_like, ...args) {
+	return is_array(array_like)
+		? array_like.slice(...args)
+		: array_prototype.slice.call(array_like, ...args);
+}
+
 /**
  * Creates a text node that serves as an anchor point in the DOM.
  * @returns {Text}

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

@@ -5,7 +5,13 @@
 
 import { Readable } from 'stream';
 import { DERIVED, UNINITIALIZED, TRACKED } from '../client/constants.js';
-import { is_ripple_object, get_descriptor, define_property, is_array } from '../client/utils.js';
+import {
+	is_ripple_object,
+	get_descriptor,
+	define_property,
+	is_array,
+	array_slice,
+} from '../client/utils.js';
 import { escape } from '../../../utils/escaping.js';
 import { is_boolean_attribute } from '../../../compiler/utils.js';
 import { clsx } from 'clsx';
@@ -20,6 +26,7 @@ export { escape };
 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 };
 
 /** @type {null | Component} */
 export let active_component = null;
@@ -607,6 +614,84 @@ export function spread_attrs(attrs, css_hash) {
 
 var empty_get_set = { get: undefined, set: undefined };
 
+class TrackedValue {
+	/**
+	 * @param {any} v
+	 * @param {{ get?: Function; set?: Function }} a
+	 */
+	constructor(v, a) {
+		this.a = a;
+		this.c = 0;
+		this.f = TRACKED;
+		this.v = v;
+	}
+	get [0]() {
+		return get(/** @type {Tracked} */ (this));
+	}
+	set [0](v) {
+		set(/** @type {Tracked} */ (this), v);
+	}
+	get [1]() {
+		return this;
+	}
+	get value() {
+		return get(/** @type {Tracked} */ (this));
+	}
+	/** @param {any} v */
+	set value(v) {
+		set(/** @type {Tracked} */ (this), v);
+	}
+	/** @returns {2} */
+	get length() {
+		return 2;
+	}
+	*[Symbol.iterator]() {
+		yield get(/** @type {Tracked} */ (this));
+		yield this;
+	}
+}
+
+class DerivedValue {
+	/**
+	 * @param {Function} fn
+	 * @param {{ get?: Function; set?: Function }} a
+	 */
+	constructor(fn, a) {
+		this.a = a;
+		this.c = 0;
+		this.co = active_component;
+		/** @type {null | import('#server').Dependency} */
+		this.d = null;
+		this.f = TRACKED | DERIVED;
+		this.fn = fn;
+		this.v = UNINITIALIZED;
+	}
+	get [0]() {
+		return get(/** @type {Derived} */ (this));
+	}
+	set [0](v) {
+		set(/** @type {Derived} */ (this), v);
+	}
+	get [1]() {
+		return this;
+	}
+	get value() {
+		return get(/** @type {Derived} */ (this));
+	}
+	/** @param {any} v */
+	set value(v) {
+		set(/** @type {Derived} */ (this), v);
+	}
+	/** @returns {2} */
+	get length() {
+		return 2;
+	}
+	*[Symbol.iterator]() {
+		yield get(/** @type {Derived} */ (this));
+		yield this;
+	}
+}
+
 /**
  * @param {any} v
  * @param {(value: any) => any} [get]
@@ -614,12 +699,7 @@ var empty_get_set = { get: undefined, set: undefined };
  * @returns {Tracked}
  */
 function tracked(v, get, set) {
-	return {
-		a: get || set ? { get, set } : empty_get_set,
-		c: 0,
-		f: TRACKED,
-		v,
-	};
+	return /** @type {Tracked} */ (new TrackedValue(v, get || set ? { get, set } : empty_get_set));
 }
 
 /**
@@ -636,15 +716,7 @@ export function track(v, get, set) {
 	}
 
 	if (typeof v === 'function') {
-		return {
-			a: get || set ? { get, set } : empty_get_set,
-			c: 0,
-			co: active_component,
-			d: null,
-			f: TRACKED | DERIVED,
-			fn: v,
-			v: UNINITIALIZED,
-		};
+		return /** @type {Derived} */ (new DerivedValue(v, get || set ? { get, set } : empty_get_set));
 	}
 
 	return tracked(v, get, set);
@@ -678,7 +750,7 @@ export function track_split(v, l) {
 				t = v[key];
 			} else {
 				t = tracked(undefined);
-				t = define_property(t, '__v', /** @type {PropertyDescriptor} */ (get_descriptor(v, key)));
+				t = define_property(t, 'v', /** @type {PropertyDescriptor} */ (get_descriptor(v, key)));
 			}
 		} else {
 			t = tracked(undefined);

package/src/runtime/internal/server/types.d.ts

@@ -19,6 +19,11 @@ export type Derived = {
 	f: number;
 	fn: Function;
 	v: any;
+	readonly [0]: any;
+	[1]: Derived;
+	value: any;
+	readonly length: 2;
+	[Symbol.iterator](): Iterator<any | Derived>;
 };
 
 export type Tracked = {
@@ -26,4 +31,9 @@ export type Tracked = {
 	c: number;
 	f: number;
 	v: any;
+	readonly [0]: any;
+	[1]: Tracked;
+	value: any;
+	readonly length: 2;
+	[Symbol.iterator](): Iterator<any | Tracked>;
 };

package/src/utils/ast.js

@@ -195,7 +195,7 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 					if (element.type === 'RestElement') {
 						/** @type {DestructuredAssignment['expression']} */
 						const rest_expression = (object) =>
-							b.call(b.member(expression(object), 'slice'), b.literal(i));
+							b.call('_$_.array_slice', expression(object), b.literal(i));
 						if (element.argument.type === 'Identifier') {
 							assignments.push({
 								node: element.argument,

package/tests/client/array/array.copy-within.test.ripple

@@ -4,16 +4,16 @@ describe('RippleArray copyWithin', () => {
 	it('handles copyWithin operation with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let firstItem = track(() => items[0]);
-			let thirdItem = track(() => items[2]);
-			let fourthItem = track(() => items[3]);
+			let &[firstItem] = track(() => items[0]);
+			let &[thirdItem] = track(() => items[2]);
+			let &[fourthItem] = track(() => items[3]);
 
 			<button onClick={() => items.copyWithin(0, 3)}>{'copy end to start'}</button>
 			<button onClick={() => items.copyWithin(2, 0, 2)}>{'copy start to middle'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@firstItem}</pre>
-			<pre>{@thirdItem}</pre>
-			<pre>{@fourthItem}</pre>
+			<pre>{firstItem}</pre>
+			<pre>{thirdItem}</pre>
+			<pre>{fourthItem}</pre>
 		}
 
 		render(ArrayTest);
@@ -49,13 +49,13 @@ describe('RippleArray copyWithin', () => {
 	it('handles copyWithin with negative indexes and reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let secondItem = track(() => items[1]);
-			let thirdItem = track(() => items[2]);
+			let &[secondItem] = track(() => items[1]);
+			let &[thirdItem] = track(() => items[2]);
 
 			<button onClick={() => items.copyWithin(-4, -2)}>{'copy with negative indexes'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@secondItem}</pre>
-			<pre>{@thirdItem}</pre>
+			<pre>{secondItem}</pre>
+			<pre>{thirdItem}</pre>
 		}
 
 		render(ArrayTest);
@@ -80,12 +80,12 @@ describe('RippleArray copyWithin', () => {
 	it('handles copyWithin with overlapping ranges', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let entries = track(() => Array.from(items.entries()));
+			let &[entries] = track(() => Array.from(items.entries()));
 
 			<button onClick={() => items.copyWithin(2, 1, 4)}>{'copy with overlap'}</button>
 			<pre>{JSON.stringify(items)}</pre>
 
-			for (const [i, value] of @entries) {
+			for (const [i, value] of entries) {
 				<pre>{`items[${i}]: ${value}`}</pre>
 			}
 		}