ripple 0.2.207 → 0.2.208

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.207",
+  "version": "0.2.208",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -97,6 +97,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.207"
+    "ripple": "0.2.208"
   }
 }

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

@@ -248,15 +248,35 @@ export function bindValue(maybe_tracked, set_func = undefined) {
 			});
 		} else {
 			var input = /** @type {HTMLInputElement} */ (node);
-			var selection_restore_needed = false;
 
 			clear_event = on(input, 'input', () => {
-				selection_restore_needed = true;
 				/** @type {any} */
 				var value = input.value;
 				value = is_numberlike_input(input) ? to_number(value) : value;
-				// the setter will schedule a microtask and the render block below will run
 				setter(value);
+				const getter_value = getter();
+
+				// Check the getter to see if it's different from the input.value
+				// The setter may have decided not to update its track value or update it to something else
+				// We treat the getter as the source of truth since we cannot verify the change otherwise
+				// If getter() !== input.value, we set the input value right away
+				// the `render` block may be scheduled only if the tracked value has changed
+				// but it will not do anything if getter() === input.value
+				// The result is: the `render` block will ALWAYS exit early if the microtask
+				// came from this event handler
+				if (value !== getter_value) {
+					var start = input.selectionStart;
+					var end = input.selectionEnd;
+
+					input.value = getter_value ?? '';
+
+					if (end !== null && start !== null) {
+						end = Math.min(end, input.value.length);
+						start = Math.min(start, end);
+						input.selectionStart = start;
+						input.selectionEnd = end;
+					}
+				}
 			});
 
 			render(() => {
@@ -271,23 +291,9 @@ export function bindValue(maybe_tracked, set_func = undefined) {
 				}
 
 				if (value !== input.value) {
-					if (selection_restore_needed) {
-						var start = input.selectionStart;
-						var end = input.selectionEnd;
-
-						input.value = value ?? '';
-
-						// Restore selection
-						if (end !== null && start !== null) {
-							end = Math.min(end, input.value.length);
-							start = Math.min(start, end);
-							input.selectionStart = start;
-							input.selectionEnd = end;
-						}
-						selection_restore_needed = false;
-					} else {
-						input.value = value ?? '';
-					}
+					// this can only get here if the tracked value was changed directly,
+					// and not via the input event
+					input.value = value ?? '';
 				}
 			});
 

package/tests/client/input-value.test.ripple

@@ -1516,207 +1516,389 @@ describe('use value()', () => {
 		// Should fall back to first non-disabled option
 		expect(select.options[1].selected).toBe(true);
 	});
-});
-
-describe('bindClientWidth and bindClientHeight', () => {
-	it('should bind element clientWidth', () => {
-		const logs: number[] = [];
 
+	it('should accurately reflect values mutated through a tracked setter', () => {
 		component App() {
-			const width = track(0);
-
-			effect(() => {
-				logs.push(@width);
-			});
+			let value = track(
+				'',
+				(val) => {
+					return val;
+				},
+				(next) => {
+					if (next.includes('c')) {
+						next = next.replace(/c/g, '');
+					}
+					return next;
+				},
+			);
 
-			<div {ref bindClientWidth(width)} />
+			<input type="text" {ref bindValue(value)} />
+			<div>{@value}</div>
 		}
 
 		render(App);
 		flushSync();
 
+		const input = container.querySelector('input') as HTMLInputElement;
 		const div = container.querySelector('div') as HTMLDivElement;
 
-		Object.defineProperty(div, 'clientWidth', {
-			configurable: true,
-			get: () => 200,
-		});
+		expect(input.value).toBe('');
+		expect(div.textContent).toBe('');
 
-		triggerResize(div, {
-			contentRect: new DOMRectReadOnly(0, 0, 200, 100),
-		});
+		input.value = 'abc';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
 		flushSync();
 
-		expect(logs[logs.length - 1]).toBe(200);
+		expect(input.value).toBe('ab');
+		expect(div.textContent).toBe('ab');
 	});
 
-	it('should bind element clientWidth with a getter and setter', () => {
-		const logs: number[] = [];
-
+	it('should accurately reflect values when a getter modifies value', () => {
 		component App() {
-			const width = #{ value: 0 };
-
-			effect(() => {
-				logs.push(width.value);
-			});
+			let value = track(
+				'',
+				(val) => {
+					if (val.includes('c')) {
+						val = val.replace(/c/g, '');
+					}
+					return val;
+				},
+				(next) => {
+					return next;
+				},
+			);
 
-			<div {ref bindClientWidth(() => width.value, (v: number) => (width.value = v))} />
+			<input type="text" {ref bindValue(value)} />
+			<div>{@value}</div>
 		}
 
 		render(App);
 		flushSync();
 
+		const input = container.querySelector('input') as HTMLInputElement;
 		const div = container.querySelector('div') as HTMLDivElement;
 
-		Object.defineProperty(div, 'clientWidth', {
-			configurable: true,
-			get: () => 200,
-		});
+		expect(input.value).toBe('');
+		expect(div.textContent).toBe('');
 
-		triggerResize(div, {
-			contentRect: new DOMRectReadOnly(0, 0, 200, 100),
-		});
+		input.value = 'abc';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
 		flushSync();
 
-		expect(logs[logs.length - 1]).toBe(200);
+		expect(input.value).toBe('ab');
+		expect(div.textContent).toBe('ab');
 	});
 
-	it('should bind element clientHeight', () => {
-		const logs: number[] = [];
-
+	it('should always prefer what getter returns even if setter mutates next', () => {
 		component App() {
-			const height = track(0);
-
-			effect(() => {
-				logs.push(@height);
-			});
+			let value = track(
+				'',
+				(val) => {
+					return val.replace(/[c,b]+/g, '');
+				},
+				(next) => {
+					if (next.includes('c')) {
+						next = next.replace(/c/g, '');
+					}
+					return next;
+				},
+			);
 
-			<div {ref bindClientHeight(height)} />
+			<input type="text" {ref bindValue(value)} />
+			<div>{@value}</div>
 		}
 
 		render(App);
 		flushSync();
 
+		const input = container.querySelector('input') as HTMLInputElement;
 		const div = container.querySelector('div') as HTMLDivElement;
 
-		Object.defineProperty(div, 'clientHeight', {
-			configurable: true,
-			get: () => 150,
-		});
+		expect(input.value).toBe('');
+		expect(div.textContent).toBe('');
 
-		triggerResize(div, {
-			contentRect: new DOMRectReadOnly(0, 0, 100, 150),
-		});
+		input.value = 'abc';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
 		flushSync();
 
-		expect(logs[logs.length - 1]).toBe(150);
+		expect(input.value).toBe('a');
+		expect(div.textContent).toBe('a');
 	});
 
-	it('should bind element clientHeight with a getter and setter', () => {
-		const logs: number[] = [];
-
-		component App() {
-			const height = #{ value: 0 };
-			effect(() => {
-				logs.push(height.value);
-			});
+	it(
+		'should accurately reflect values mutated through an effect even after a setter mutation',
+		() => {
+			component App() {
+				let value = track(
+					'',
+					(val) => {
+						return val;
+					},
+					(next) => {
+						if (next.includes('c')) {
+							next = next.replace(/c/g, '');
+						}
+						return next;
+					},
+				);
 
-			<div {ref bindClientHeight(() => height.value, (v: number) => (height.value = v))} />
-		}
+				effect(() => {
+					@value;
 
-		render(App);
-		flushSync();
+					untrack(() => {
+						if (@value.includes('a')) {
+							@value = @value.replace(/a/g, '');
+						}
+					});
+				});
+				<input type="text" {ref bindValue(value)} />
+				<div>{@value}</div>
+			}
 
-		const div = container.querySelector('div') as HTMLDivElement;
+			render(App);
+			flushSync();
 
-		Object.defineProperty(div, 'clientHeight', {
-			configurable: true,
-			get: () => 150,
-		});
+			const input = container.querySelector('input') as HTMLInputElement;
+			const div = container.querySelector('div') as HTMLDivElement;
 
-		triggerResize(div, {
-			contentRect: new DOMRectReadOnly(0, 0, 100, 150),
-		});
-		flushSync();
+			expect(input.value).toBe('');
+			expect(div.textContent).toBe('');
 
-		expect(logs[logs.length - 1]).toBe(150);
-	});
-});
+			input.value = 'abc';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			flushSync();
 
-describe('bindOffsetWidth and bindOffsetHeight', () => {
-	it('should bind element offsetWidth', () => {
-		const logs: number[] = [];
+			expect(input.value).toBe('b');
+			expect(div.textContent).toBe('b');
+		},
+	);
 
+	it('should accurately reflect values mutated through a tracked setter via bind accessors', () => {
 		component App() {
-			const width = track(0);
-
-			effect(() => {
-				logs.push(@width);
-			});
+			let value = track('');
+			const value_accessors = [
+				() => {
+					return @value;
+				},
+				(v: string) => {
+					if (v.includes('c')) {
+						v = v.replace(/c/g, '');
+					}
+					@value = v;
+				},
+			];
 
-			<div {ref bindOffsetWidth(width)} />
+			<input type="text" {ref bindValue(...value_accessors)} />
 		}
 
 		render(App);
 		flushSync();
 
-		const div = container.querySelector('div') as HTMLDivElement;
+		const input = container.querySelector('input') as HTMLInputElement;
 
-		Object.defineProperty(div, 'offsetWidth', {
-			configurable: true,
-			get: () => 250,
-		});
+		expect(input.value).toBe('');
 
-		triggerResize(div, {
-			contentRect: new DOMRectReadOnly(0, 0, 250, 100),
-		});
+		input.value = 'abc';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
 		flushSync();
 
-		expect(logs[logs.length - 1]).toBe(250);
+		expect(input.value).toBe('ab');
 	});
 
-	it('should bind element offsetWidth with a getter and setter', () => {
-		const logs: number[] = [];
-
+	it('should prefer what getter returns via bind accessors', () => {
 		component App() {
-			const width = #{ value: 0 };
-
-			effect(() => {
-				logs.push(width.value);
-			});
+			let value = track('');
+			const value_accessors = [
+				() => {
+					if (@value.includes('c')) {
+						return @value.replace(/c/g, '');
+					}
+					return @value;
+				},
+				(v: string) => {
+					@value = v;
+				},
+			];
 
-			<div {ref bindOffsetWidth(() => width.value, (v: number) => (width.value = v))} />
+			<input type="text" {ref bindValue(...value_accessors)} />
 		}
 
 		render(App);
 		flushSync();
 
-		const div = container.querySelector('div') as HTMLDivElement;
+		const input = container.querySelector('input') as HTMLInputElement;
 
-		Object.defineProperty(div, 'offsetWidth', {
-			configurable: true,
-			get: () => 250,
-		});
+		expect(input.value).toBe('');
 
-		triggerResize(div, {
-			contentRect: new DOMRectReadOnly(0, 0, 250, 100),
-		});
+		input.value = 'abc';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
 		flushSync();
 
-		expect(logs[logs.length - 1]).toBe(250);
+		expect(input.value).toBe('ab');
 	});
 
-	it('should bind element offsetHeight', () => {
+	it(
+		'should always prefer what getter returns even if setter mutates next via bind accessors',
+		() => {
+			component App() {
+				let value = track('');
+				const value_accessors = [
+					() => {
+						return @value.replace(/[c,b]+/g, '');
+					},
+					(v: string) => {
+						if (v.includes('c')) {
+							v = v.replace(/c/g, '');
+						}
+						@value = v;
+					},
+				];
+
+				<input type="text" {ref bindValue(...value_accessors)} />
+			}
+
+			render(App);
+			flushSync();
+
+			const input = container.querySelector('input') as HTMLInputElement;
+
+			expect(input.value).toBe('');
+
+			input.value = 'abc';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			flushSync();
+
+			expect(input.value).toBe('a');
+		},
+	);
+
+	it(
+		'should accurately reflect values mutated through an effect even after a setter mutation via bind accessors',
+		() => {
+			component App() {
+				let value = track('');
+				const value_accessors = [
+					() => {
+						return @value;
+					},
+					(v: string) => {
+						if (v.includes('c')) {
+							v = v.replace(/c/g, '');
+						}
+						@value = v;
+					},
+				];
+
+				effect(() => {
+					@value;
+
+					untrack(() => {
+						if (@value.includes('a')) {
+							@value = @value.replace(/a/g, '');
+						}
+					});
+				});
+				<input type="text" {ref bindValue(...value_accessors)} />
+			}
+
+			render(App);
+			flushSync();
+
+			const input = container.querySelector('input') as HTMLInputElement;
+
+			expect(input.value).toBe('');
+
+			input.value = 'abc';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			flushSync();
+
+			expect(input.value).toBe('b');
+		},
+	);
+
+	it(
+		'should keep the input.value unchanged and synced with the tracked when the setter blocks updates to the tracked via bind accessors',
+		() => {
+			component App() {
+				let value = track('');
+				const value_accessors = [
+					() => {
+						return @value;
+					},
+					(v: string) => {
+						// no update
+					},
+				];
+
+				<input type="text" {ref bindValue(...value_accessors)} />
+				<div>{@value}</div>
+			}
+
+			render(App);
+			flushSync();
+
+			const input = container.querySelector('input') as HTMLInputElement;
+			const div = container.querySelector('div') as HTMLDivElement;
+
+			expect(input.value).toBe('');
+
+			input.value = 'abc';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			flushSync();
+
+			expect(input.value).toBe('');
+			expect(div.textContent).toBe('');
+		},
+	);
+
+	it(
+		'should keep the input.value unchanged and synced with the tracked when the setter blocks updates to the tracked via track get / set',
+		() => {
+			component App() {
+				let value = track(
+					'',
+					(v) => {
+						return v;
+					},
+					() => {
+						return '';
+					},
+				);
+
+				<input type="text" {ref bindValue(value)} />
+				<div>{@value}</div>
+			}
+
+			render(App);
+			flushSync();
+
+			const input = container.querySelector('input') as HTMLInputElement;
+			const div = container.querySelector('div') as HTMLDivElement;
+
+			expect(input.value).toBe('');
+
+			input.value = 'abc';
+			input.dispatchEvent(new Event('input', { bubbles: true }));
+			flushSync();
+
+			expect(input.value).toBe('');
+			expect(div.textContent).toBe('');
+		},
+	);
+});
+
+describe('bindClientWidth and bindClientHeight', () => {
+	it('should bind element clientWidth', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const height = track(0);
+			const width = track(0);
 
 			effect(() => {
-				logs.push(@height);
+				logs.push(@width);
 			});
 
-			<div {ref bindOffsetHeight(height)} />
+			<div {ref bindClientWidth(width)} />
 		}
 
 		render(App);
@@ -1724,29 +1906,30 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 
 		const div = container.querySelector('div') as HTMLDivElement;
 
-		Object.defineProperty(div, 'offsetHeight', {
+		Object.defineProperty(div, 'clientWidth', {
 			configurable: true,
-			get: () => 175,
+			get: () => 200,
 		});
 
 		triggerResize(div, {
-			contentRect: new DOMRectReadOnly(0, 0, 100, 175),
+			contentRect: new DOMRectReadOnly(0, 0, 200, 100),
 		});
 		flushSync();
 
-		expect(logs[logs.length - 1]).toBe(175);
+		expect(logs[logs.length - 1]).toBe(200);
 	});
 
-	it('should bind element offsetHeight with a getter and setter', () => {
+	it('should bind element clientWidth with a getter and setter', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const height = #{ value: 0 };
+			const width = #{ value: 0 };
+
 			effect(() => {
-				logs.push(height.value);
+				logs.push(width.value);
 			});
 
-			<div {ref bindOffsetHeight(() => height.value, (v: number) => (height.value = v))} />
+			<div {ref bindClientWidth(() => width.value, (v: number) => (width.value = v))} />
 		}
 
 		render(App);
@@ -1754,32 +1937,30 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 
 		const div = container.querySelector('div') as HTMLDivElement;
 
-		Object.defineProperty(div, 'offsetHeight', {
+		Object.defineProperty(div, 'clientWidth', {
 			configurable: true,
-			get: () => 175,
+			get: () => 200,
 		});
 
 		triggerResize(div, {
-			contentRect: new DOMRectReadOnly(0, 0, 100, 175),
+			contentRect: new DOMRectReadOnly(0, 0, 200, 100),
 		});
 		flushSync();
 
-		expect(logs[logs.length - 1]).toBe(175);
+		expect(logs[logs.length - 1]).toBe(200);
 	});
-});
 
-describe('bindContentRect', () => {
-	it('should bind element contentRect', () => {
-		const logs: DOMRectReadOnly[] = [];
+	it('should bind element clientHeight', () => {
+		const logs: number[] = [];
 
 		component App() {
-			const rect = track(null);
+			const height = track(0);
 
 			effect(() => {
-				if (@rect) logs.push(@rect);
+				logs.push(@height);
 			});
 
-			<div {ref bindContentRect(rect)} />
+			<div {ref bindClientHeight(height)} />
 		}
 
 		render(App);
@@ -1787,33 +1968,29 @@ describe('bindContentRect', () => {
 
 		const div = container.querySelector('div') as HTMLDivElement;
 
-		const mockRect = new DOMRectReadOnly(10, 20, 300, 200);
+		Object.defineProperty(div, 'clientHeight', {
+			configurable: true,
+			get: () => 150,
+		});
+
 		triggerResize(div, {
-			contentRect: mockRect,
+			contentRect: new DOMRectReadOnly(0, 0, 100, 150),
 		});
 		flushSync();
 
-		expect(logs.length).toBeGreaterThan(0);
-		const lastRect = logs[logs.length - 1];
-		expect(lastRect.width).toBe(300);
-		expect(lastRect.height).toBe(200);
+		expect(logs[logs.length - 1]).toBe(150);
 	});
 
-	it('should bind element contentRect with a getter and setter', () => {
-		const logs: DOMRectReadOnly[] = [];
+	it('should bind element clientHeight with a getter and setter', () => {
+		const logs: number[] = [];
 
 		component App() {
-			const rect: TrackedObject<{ value: DOMRectReadOnly | null }> = #{ value: null };
+			const height = #{ value: 0 };
 			effect(() => {
-				if (rect.value) logs.push(rect.value);
+				logs.push(height.value);
 			});
 
-			<div
-				{ref bindContentRect<null | DOMRectReadOnly>(
-					() => rect.value,
-					(v: DOMRectReadOnly) => (rect.value = v),
-				)}
-			/>
+			<div {ref bindClientHeight(() => height.value, (v: number) => (height.value = v))} />
 		}
 
 		render(App);
@@ -1821,31 +1998,32 @@ describe('bindContentRect', () => {
 
 		const div = container.querySelector('div') as HTMLDivElement;
 
-		const mockRect = new DOMRectReadOnly(10, 20, 300, 200);
+		Object.defineProperty(div, 'clientHeight', {
+			configurable: true,
+			get: () => 150,
+		});
+
 		triggerResize(div, {
-			contentRect: mockRect,
+			contentRect: new DOMRectReadOnly(0, 0, 100, 150),
 		});
 		flushSync();
 
-		expect(logs.length).toBeGreaterThan(0);
-		const lastRect = logs[logs.length - 1];
-		expect(lastRect.width).toBe(300);
-		expect(lastRect.height).toBe(200);
+		expect(logs[logs.length - 1]).toBe(150);
 	});
 });
 
-describe('bindContentBoxSize', () => {
-	it('should bind element contentBoxSize', () => {
-		const logs: any[] = [];
+describe('bindOffsetWidth and bindOffsetHeight', () => {
+	it('should bind element offsetWidth', () => {
+		const logs: number[] = [];
 
 		component App() {
-			const boxSize = track(null);
+			const width = track(0);
 
 			effect(() => {
-				if (@boxSize) logs.push(@boxSize);
+				logs.push(@width);
 			});
 
-			<div {ref bindContentBoxSize(boxSize)} />
+			<div {ref bindOffsetWidth(width)} />
 		}
 
 		render(App);
@@ -1853,16 +2031,207 @@ describe('bindContentBoxSize', () => {
 
 		const div = container.querySelector('div') as HTMLDivElement;
 
-		const mockBoxSize = [
-			{ blockSize: 200, inlineSize: 300 },
-		];
+		Object.defineProperty(div, 'offsetWidth', {
+			configurable: true,
+			get: () => 250,
+		});
+
 		triggerResize(div, {
-			contentBoxSize: mockBoxSize as any,
+			contentRect: new DOMRectReadOnly(0, 0, 250, 100),
 		});
 		flushSync();
 
-		expect(logs.length).toBeGreaterThan(0);
-		expect(logs[logs.length - 1]).toBe(mockBoxSize);
+		expect(logs[logs.length - 1]).toBe(250);
+	});
+
+	it('should bind element offsetWidth with a getter and setter', () => {
+		const logs: number[] = [];
+
+		component App() {
+			const width = #{ value: 0 };
+
+			effect(() => {
+				logs.push(width.value);
+			});
+
+			<div {ref bindOffsetWidth(() => width.value, (v: number) => (width.value = v))} />
+		}
+
+		render(App);
+		flushSync();
+
+		const div = container.querySelector('div') as HTMLDivElement;
+
+		Object.defineProperty(div, 'offsetWidth', {
+			configurable: true,
+			get: () => 250,
+		});
+
+		triggerResize(div, {
+			contentRect: new DOMRectReadOnly(0, 0, 250, 100),
+		});
+		flushSync();
+
+		expect(logs[logs.length - 1]).toBe(250);
+	});
+
+	it('should bind element offsetHeight', () => {
+		const logs: number[] = [];
+
+		component App() {
+			const height = track(0);
+
+			effect(() => {
+				logs.push(@height);
+			});
+
+			<div {ref bindOffsetHeight(height)} />
+		}
+
+		render(App);
+		flushSync();
+
+		const div = container.querySelector('div') as HTMLDivElement;
+
+		Object.defineProperty(div, 'offsetHeight', {
+			configurable: true,
+			get: () => 175,
+		});
+
+		triggerResize(div, {
+			contentRect: new DOMRectReadOnly(0, 0, 100, 175),
+		});
+		flushSync();
+
+		expect(logs[logs.length - 1]).toBe(175);
+	});
+
+	it('should bind element offsetHeight with a getter and setter', () => {
+		const logs: number[] = [];
+
+		component App() {
+			const height = #{ value: 0 };
+			effect(() => {
+				logs.push(height.value);
+			});
+
+			<div {ref bindOffsetHeight(() => height.value, (v: number) => (height.value = v))} />
+		}
+
+		render(App);
+		flushSync();
+
+		const div = container.querySelector('div') as HTMLDivElement;
+
+		Object.defineProperty(div, 'offsetHeight', {
+			configurable: true,
+			get: () => 175,
+		});
+
+		triggerResize(div, {
+			contentRect: new DOMRectReadOnly(0, 0, 100, 175),
+		});
+		flushSync();
+
+		expect(logs[logs.length - 1]).toBe(175);
+	});
+});
+
+describe('bindContentRect', () => {
+	it('should bind element contentRect', () => {
+		const logs: DOMRectReadOnly[] = [];
+
+		component App() {
+			const rect = track(null);
+
+			effect(() => {
+				if (@rect) logs.push(@rect);
+			});
+
+			<div {ref bindContentRect(rect)} />
+		}
+
+		render(App);
+		flushSync();
+
+		const div = container.querySelector('div') as HTMLDivElement;
+
+		const mockRect = new DOMRectReadOnly(10, 20, 300, 200);
+		triggerResize(div, {
+			contentRect: mockRect,
+		});
+		flushSync();
+
+		expect(logs.length).toBeGreaterThan(0);
+		const lastRect = logs[logs.length - 1];
+		expect(lastRect.width).toBe(300);
+		expect(lastRect.height).toBe(200);
+	});
+
+	it('should bind element contentRect with a getter and setter', () => {
+		const logs: DOMRectReadOnly[] = [];
+
+		component App() {
+			const rect: TrackedObject<{ value: DOMRectReadOnly | null }> = #{ value: null };
+			effect(() => {
+				if (rect.value) logs.push(rect.value);
+			});
+
+			<div
+				{ref bindContentRect<null | DOMRectReadOnly>(
+					() => rect.value,
+					(v: DOMRectReadOnly) => (rect.value = v),
+				)}
+			/>
+		}
+
+		render(App);
+		flushSync();
+
+		const div = container.querySelector('div') as HTMLDivElement;
+
+		const mockRect = new DOMRectReadOnly(10, 20, 300, 200);
+		triggerResize(div, {
+			contentRect: mockRect,
+		});
+		flushSync();
+
+		expect(logs.length).toBeGreaterThan(0);
+		const lastRect = logs[logs.length - 1];
+		expect(lastRect.width).toBe(300);
+		expect(lastRect.height).toBe(200);
+	});
+});
+
+describe('bindContentBoxSize', () => {
+	it('should bind element contentBoxSize', () => {
+		const logs: any[] = [];
+
+		component App() {
+			const boxSize = track(null);
+
+			effect(() => {
+				if (@boxSize) logs.push(@boxSize);
+			});
+
+			<div {ref bindContentBoxSize(boxSize)} />
+		}
+
+		render(App);
+		flushSync();
+
+		const div = container.querySelector('div') as HTMLDivElement;
+
+		const mockBoxSize = [
+			{ blockSize: 200, inlineSize: 300 },
+		];
+		triggerResize(div, {
+			contentBoxSize: mockBoxSize as any,
+		});
+		flushSync();
+
+		expect(logs.length).toBeGreaterThan(0);
+		expect(logs[logs.length - 1]).toBe(mockBoxSize);
 	});
 
 	it('should bind element contentBoxSize with a getter and setter', () => {
@@ -2534,305 +2903,6 @@ describe('bindNode', () => {
 
 		expect(input.value).toBe('Set by ref');
 	});
-
-	it('should accurately reflect values mutated through a tracked setter', () => {
-		component App() {
-			let value = track(
-				'',
-				(val) => {
-					return val;
-				},
-				(next) => {
-					if (next.includes('c')) {
-						next = next.replace(/c/g, '');
-					}
-					return next;
-				},
-			);
-
-			<input type="text" {ref bindValue(value)} />
-			<div>{@value}</div>
-		}
-
-		render(App);
-		flushSync();
-
-		const input = container.querySelector('input') as HTMLInputElement;
-		const div = container.querySelector('div') as HTMLDivElement;
-
-		expect(input.value).toBe('');
-		expect(div.textContent).toBe('');
-
-		input.value = 'abc';
-		input.dispatchEvent(new Event('input', { bubbles: true }));
-		flushSync();
-
-		expect(input.value).toBe('ab');
-		expect(div.textContent).toBe('ab');
-	});
-
-	it('should accurately reflect values when a getter modifies value', () => {
-		component App() {
-			let value = track(
-				'',
-				(val) => {
-					if (val.includes('c')) {
-						val = val.replace(/c/g, '');
-					}
-					return val;
-				},
-				(next) => {
-					return next;
-				},
-			);
-
-			<input type="text" {ref bindValue(value)} />
-			<div>{@value}</div>
-		}
-
-		render(App);
-		flushSync();
-
-		const input = container.querySelector('input') as HTMLInputElement;
-		const div = container.querySelector('div') as HTMLDivElement;
-
-		expect(input.value).toBe('');
-		expect(div.textContent).toBe('');
-
-		input.value = 'abc';
-		input.dispatchEvent(new Event('input', { bubbles: true }));
-		flushSync();
-
-		expect(input.value).toBe('ab');
-		expect(div.textContent).toBe('ab');
-	});
-
-	it('should always prefer what getter returns even if setter mutates next', () => {
-		component App() {
-			let value = track(
-				'',
-				(val) => {
-					return val.replace(/[c,b]+/g, '');
-				},
-				(next) => {
-					if (next.includes('c')) {
-						next = next.replace(/c/g, '');
-					}
-					return next;
-				},
-			);
-
-			<input type="text" {ref bindValue(value)} />
-			<div>{@value}</div>
-		}
-
-		render(App);
-		flushSync();
-
-		const input = container.querySelector('input') as HTMLInputElement;
-		const div = container.querySelector('div') as HTMLDivElement;
-
-		expect(input.value).toBe('');
-		expect(div.textContent).toBe('');
-
-		input.value = 'abc';
-		input.dispatchEvent(new Event('input', { bubbles: true }));
-		flushSync();
-
-		expect(input.value).toBe('a');
-		expect(div.textContent).toBe('a');
-	});
-
-	it(
-		'should accurately reflect values mutated through an effect even after a setter mutation',
-		() => {
-			component App() {
-				let value = track(
-					'',
-					(val) => {
-						return val;
-					},
-					(next) => {
-						if (next.includes('c')) {
-							next = next.replace(/c/g, '');
-						}
-						return next;
-					},
-				);
-
-				effect(() => {
-					@value;
-
-					untrack(() => {
-						if (@value.includes('a')) {
-							@value = @value.replace(/a/g, '');
-						}
-					});
-				});
-				<input type="text" {ref bindValue(value)} />
-				<div>{@value}</div>
-			}
-
-			render(App);
-			flushSync();
-
-			const input = container.querySelector('input') as HTMLInputElement;
-			const div = container.querySelector('div') as HTMLDivElement;
-
-			expect(input.value).toBe('');
-			expect(div.textContent).toBe('');
-
-			input.value = 'abc';
-			input.dispatchEvent(new Event('input', { bubbles: true }));
-			flushSync();
-
-			expect(input.value).toBe('b');
-			expect(div.textContent).toBe('b');
-		},
-	);
-
-	it('should accurately reflect values mutated through a tracked setter via bind accessors', () => {
-		component App() {
-			let value = track('');
-			const value_accessors = [
-				() => {
-					return @value;
-				},
-				(v: string) => {
-					if (v.includes('c')) {
-						v = v.replace(/c/g, '');
-					}
-					@value = v;
-				},
-			];
-
-			<input type="text" {ref bindValue(...value_accessors)} />
-		}
-
-		render(App);
-		flushSync();
-
-		const input = container.querySelector('input') as HTMLInputElement;
-
-		expect(input.value).toBe('');
-
-		input.value = 'abc';
-		input.dispatchEvent(new Event('input', { bubbles: true }));
-		flushSync();
-
-		expect(input.value).toBe('ab');
-	});
-
-	it('should prefer what getter returns via bind accessors', () => {
-		component App() {
-			let value = track('');
-			const value_accessors = [
-				() => {
-					if (@value.includes('c')) {
-						return @value.replace(/c/g, '');
-					}
-					return @value;
-				},
-				(v: string) => {
-					@value = v;
-				},
-			];
-
-			<input type="text" {ref bindValue(...value_accessors)} />
-		}
-
-		render(App);
-		flushSync();
-
-		const input = container.querySelector('input') as HTMLInputElement;
-
-		expect(input.value).toBe('');
-
-		input.value = 'abc';
-		input.dispatchEvent(new Event('input', { bubbles: true }));
-		flushSync();
-
-		expect(input.value).toBe('ab');
-	});
-
-	it(
-		'should always prefer what getter returns even if setter mutates next via bind accessors',
-		() => {
-			component App() {
-				let value = track('');
-				const value_accessors = [
-					() => {
-						return @value.replace(/[c,b]+/g, '');
-					},
-					(v: string) => {
-						if (v.includes('c')) {
-							v = v.replace(/c/g, '');
-						}
-						@value = v;
-					},
-				];
-
-				<input type="text" {ref bindValue(...value_accessors)} />
-			}
-
-			render(App);
-			flushSync();
-
-			const input = container.querySelector('input') as HTMLInputElement;
-
-			expect(input.value).toBe('');
-
-			input.value = 'abc';
-			input.dispatchEvent(new Event('input', { bubbles: true }));
-			flushSync();
-
-			expect(input.value).toBe('a');
-		},
-	);
-
-	it(
-		'should accurately reflect values mutated through an effect even after a setter mutation via bind accessors',
-		() => {
-			component App() {
-				let value = track('');
-				const value_accessors = [
-					() => {
-						return @value;
-					},
-					(v: string) => {
-						if (v.includes('c')) {
-							v = v.replace(/c/g, '');
-						}
-						@value = v;
-					},
-				];
-
-				effect(() => {
-					@value;
-
-					untrack(() => {
-						if (@value.includes('a')) {
-							@value = @value.replace(/a/g, '');
-						}
-					});
-				});
-				<input type="text" {ref bindValue(...value_accessors)} />
-			}
-
-			render(App);
-			flushSync();
-
-			const input = container.querySelector('input') as HTMLInputElement;
-
-			expect(input.value).toBe('');
-
-			input.value = 'abc';
-			input.dispatchEvent(new Event('input', { bubbles: true }));
-			flushSync();
-
-			expect(input.value).toBe('b');
-		},
-	);
 });
 
 describe('bindFiles', () => {