ripple 0.2.115 → 0.2.116

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

@@ -0,0 +1,443 @@
+/** @import { Block, Tracked } from '#client' */
+
+import { effect, render } from './blocks.js';
+import { on } from './events.js';
+import { active_block, get, set, tick, untrack } from './runtime.js';
+import { is_array, is_tracked_object } from './utils.js';
+
+/**
+ * Resize observer singleton.
+ * One listener per element only!
+ * https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ
+ */
+class ResizeObserverSingleton {
+	/** */
+	#listeners = new WeakMap();
+
+	/** @type {ResizeObserver | undefined} */
+	#observer;
+
+	/** @type {ResizeObserverOptions} */
+	#options;
+
+	/** @static */
+	static entries = new WeakMap();
+
+	/** @param {ResizeObserverOptions} options */
+	constructor(options) {
+		this.#options = options;
+	}
+
+	/**
+	 * @param {Element} element
+	 * @param {(entry: ResizeObserverEntry) => any} listener
+	 */
+	observe(element, listener) {
+		var listeners = this.#listeners.get(element) || new Set();
+		listeners.add(listener);
+
+		this.#listeners.set(element, listeners);
+		this.#getObserver().observe(element, this.#options);
+
+		return () => {
+			var listeners = this.#listeners.get(element);
+			listeners.delete(listener);
+
+			if (listeners.size === 0) {
+				this.#listeners.delete(element);
+				/** @type {ResizeObserver} */ (this.#observer).unobserve(element);
+			}
+		};
+	}
+
+	#getObserver() {
+		return (
+			this.#observer ??
+			(this.#observer = new ResizeObserver(
+				/** @param {any} entries */ (entries) => {
+					for (var entry of entries) {
+						ResizeObserverSingleton.entries.set(entry.target, entry);
+						for (var listener of this.#listeners.get(entry.target) || []) {
+							listener(entry);
+						}
+					}
+				},
+			))
+		);
+	}
+}
+
+var resize_observer_content_box = /* @__PURE__ */ new ResizeObserverSingleton({
+	box: 'content-box',
+});
+
+var resize_observer_border_box = /* @__PURE__ */ new ResizeObserverSingleton({
+	box: 'border-box',
+});
+
+var resize_observer_device_pixel_content_box = /* @__PURE__ */ new ResizeObserverSingleton({
+	box: 'device-pixel-content-box',
+});
+
+/**
+ * @param {string} value
+ */
+function to_number(value) {
+	return value === '' ? null : +value;
+}
+
+/**
+ * @param {HTMLInputElement} input
+ */
+function is_numberlike_input(input) {
+	var type = input.type;
+	return type === 'number' || type === 'range';
+}
+
+/** @param {HTMLOptionElement} option */
+function get_option_value(option) {
+	return option.value;
+}
+
+/**
+ * Selects the correct option(s) (depending on whether this is a multiple select)
+ * @template V
+ * @param {HTMLSelectElement} select
+ * @param {V} value
+ * @param {boolean} mounting
+ */
+function select_option(select, value, mounting = false) {
+	if (select.multiple) {
+		// If value is null or undefined, keep the selection as is
+		if (value == undefined) {
+			return;
+		}
+
+		// If not an array, warn and keep the selection as is
+		if (!is_array(value)) {
+			// TODO
+		}
+
+		// Otherwise, update the selection
+		for (var option of select.options) {
+			option.selected = /** @type {string[]} */ (value).includes(get_option_value(option));
+		}
+
+		return;
+	}
+
+	for (option of select.options) {
+		var option_value = get_option_value(option);
+		if (option_value === value) {
+			option.selected = true;
+			return;
+		}
+	}
+
+	if (!mounting || value !== undefined) {
+		select.selectedIndex = -1; // no option should be selected
+	}
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLInputElement | HTMLSelectElement) => void}
+ */
+export function bindValue(maybe_tracked) {
+	if (!is_tracked_object(maybe_tracked)) {
+		throw new TypeError('bindValue() argument is not a tracked object');
+	}
+
+	var block = /** @type {Block} */ (active_block);
+	var tracked = /** @type {Tracked} */ (maybe_tracked);
+
+	return (node) => {
+		var clear_event;
+
+		if (node.tagName === 'SELECT') {
+			var select = /** @type {HTMLSelectElement} */ (node);
+			var mounting = true;
+
+			clear_event = on(select, 'change', async () => {
+				var query = ':checked';
+				/** @type {unknown} */
+				var value;
+
+				if (select.multiple) {
+					value = [].map.call(select.querySelectorAll(query), get_option_value);
+				} else {
+					/** @type {HTMLOptionElement | null} */
+					var selected_option =
+						select.querySelector(query) ??
+						// will fall back to first non-disabled option if no option is selected
+						select.querySelector('option:not([disabled])');
+					value = selected_option && get_option_value(selected_option);
+				}
+
+				set(tracked, value, block);
+			});
+
+			effect(() => {
+				var value = get(tracked);
+				select_option(select, value, mounting);
+
+				// Mounting and value undefined -> take selection from dom
+				if (mounting && value === undefined) {
+					/** @type {HTMLOptionElement | null} */
+					var selected_option = select.querySelector(':checked');
+					if (selected_option !== null) {
+						value = get_option_value(selected_option);
+						set(tracked, value, block);
+					}
+				}
+
+				mounting = false;
+			});
+		} else {
+			var input = /** @type {HTMLInputElement} */ (node);
+
+			clear_event = on(input, 'input', async () => {
+				/** @type {any} */
+				var value = input.value;
+				value = is_numberlike_input(input) ? to_number(value) : value;
+				set(tracked, value, block);
+
+				await tick();
+
+				if (value !== (value = get(tracked))) {
+					var start = input.selectionStart;
+					var end = input.selectionEnd;
+					input.value = value ?? '';
+
+					// Restore selection
+					if (end !== null) {
+						input.selectionStart = start;
+						input.selectionEnd = Math.min(end, input.value.length);
+					}
+				}
+			});
+
+			render(() => {
+				var value = get(tracked);
+
+				if (is_numberlike_input(input) && value === to_number(input.value)) {
+					return;
+				}
+
+				if (input.type === 'date' && !value && !input.value) {
+					return;
+				}
+
+				if (value !== input.value) {
+					input.value = value ?? '';
+				}
+			});
+
+			return clear_event;
+		}
+	};
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLInputElement) => void}
+ */
+export function bindChecked(maybe_tracked) {
+	if (!is_tracked_object(maybe_tracked)) {
+		throw new TypeError('bindChecked() argument is not a tracked object');
+	}
+
+	const block = /** @type {any} */ (active_block);
+	const tracked = /** @type {Tracked} */ (maybe_tracked);
+
+	return (input) => {
+		const clear_event = on(input, 'change', () => {
+			set(tracked, input.checked, block);
+		});
+
+		return clear_event;
+	};
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @param {'clientWidth' | 'clientHeight' | 'offsetWidth' | 'offsetHeight'} type
+ */
+function bind_element_size(maybe_tracked, type) {
+	if (!is_tracked_object(maybe_tracked)) {
+		throw new TypeError(
+			`bind${type.charAt(0).toUpperCase() + type.slice(1)}() argument is not a tracked object`,
+		);
+	}
+
+	var block = /** @type {any} */ (active_block);
+	var tracked = /** @type {Tracked<any>} */ (maybe_tracked);
+
+	return (/** @type {HTMLElement} */ element) => {
+		var unsubscribe = resize_observer_border_box.observe(element, () =>
+			set(tracked, element[type], block),
+		);
+
+		effect(() => {
+			untrack(() => set(tracked, element[type], block));
+			return unsubscribe;
+		});
+	};
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLElement) => void}
+ */
+export function bindClientWidth(maybe_tracked) {
+	return bind_element_size(maybe_tracked, 'clientWidth');
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLElement) => void}
+ */
+export function bindClientHeight(maybe_tracked) {
+	return bind_element_size(maybe_tracked, 'clientHeight');
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLElement) => void}
+ */
+export function bindOffsetWidth(maybe_tracked) {
+	return bind_element_size(maybe_tracked, 'offsetWidth');
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLElement) => void}
+ */
+export function bindOffsetHeight(maybe_tracked) {
+	return bind_element_size(maybe_tracked, 'offsetHeight');
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @param {'contentRect' | 'contentBoxSize' | 'borderBoxSize' | 'devicePixelContentBoxSize'} type
+ */
+function bind_element_rect(maybe_tracked, type) {
+	if (!is_tracked_object(maybe_tracked)) {
+		throw new TypeError(
+			`bind${type.charAt(0).toUpperCase() + type.slice(1)}() argument is not a tracked object`,
+		);
+	}
+
+	var block = /** @type {any} */ (active_block);
+	var tracked = /** @type {Tracked<any>} */ (maybe_tracked);
+	var observer =
+		type === 'contentRect' || type === 'contentBoxSize'
+			? resize_observer_content_box
+			: type === 'borderBoxSize'
+				? resize_observer_border_box
+				: resize_observer_device_pixel_content_box;
+
+	return (/** @type {HTMLElement} */ element) => {
+		var unsubscribe = observer.observe(
+			element,
+			/** @param {any} entry */ (entry) => set(tracked, entry[type], block),
+		);
+
+		effect(() => unsubscribe);
+	};
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLElement) => void}
+ */
+export function bindContentRect(maybe_tracked) {
+	return bind_element_rect(maybe_tracked, 'contentRect');
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLElement) => void}
+ */
+export function bindContentBoxSize(maybe_tracked) {
+	return bind_element_rect(maybe_tracked, 'contentBoxSize');
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLElement) => void}
+ */
+export function bindBorderBoxSize(maybe_tracked) {
+	return bind_element_rect(maybe_tracked, 'borderBoxSize');
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLElement) => void}
+ */
+export function bindDevicePixelContentBoxSize(maybe_tracked) {
+	return bind_element_rect(maybe_tracked, 'devicePixelContentBoxSize');
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @param {'innerHTML' | 'innerText' | 'textContent'} property
+ * @returns {(node: HTMLElement) => void}
+ */
+export function bind_content_editable(maybe_tracked, property) {
+	if (!is_tracked_object(maybe_tracked)) {
+		throw new TypeError(
+			`bind${property.charAt(0).toUpperCase() + property.slice(1)}() argument is not a tracked object`,
+		);
+	}
+
+	const block = /** @type {any} */ (active_block);
+	const tracked = /** @type {Tracked} */ (maybe_tracked);
+
+	return (element) => {
+		const clear_event = on(element, 'input', () => {
+			set(tracked, element[property], block);
+		});
+
+		render(() => {
+			var value = get(tracked);
+
+			if (element[property] !== value) {
+				if (value == null) {
+					// @ts-ignore
+					var non_null_value = element[property];
+					set(tracked, non_null_value, block);
+				} else {
+					// @ts-ignore
+					element[property] = value + '';
+				}
+			}
+		});
+
+		return clear_event;
+	};
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLElement) => void}
+ */
+export function bindInnerHTML(maybe_tracked) {
+	return bind_content_editable(maybe_tracked, 'innerHTML');
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLElement) => void}
+ */
+export function bindInnerText(maybe_tracked) {
+	return bind_content_editable(maybe_tracked, 'innerText');
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLElement) => void}
+ */
+export function bindTextContent(maybe_tracked) {
+	return bind_content_editable(maybe_tracked, 'textContent');
+}

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

@@ -65,6 +65,10 @@ export { tracked_array } from '../../array.js';
 
 export { tracked_object } from '../../object.js';
 
+export { tracked_map } from '../../map.js';
+
+export { tracked_set } from '../../set.js';
+
 export { head } from './head.js';
 
 export { script } from './script.js';

package/src/runtime/map.js

@@ -1,5 +1,5 @@
 /** @import { Block, Tracked } from '#client' */
-import { get, increment, safe_scope, set, tracked } from './internal/client/runtime.js';
+import { get, increment, safe_scope, set, tracked, with_scope } from './internal/client/runtime.js';
 
 const introspect_methods = ['entries', 'forEach', 'values', Symbol.iterator];
 
@@ -193,3 +193,13 @@ export class TrackedMap extends Map {
     return [...this];
   }
 }
+
+/**
+ * @template K, V
+ * @param {Block} block
+ * @param {...any} args
+ * @returns {TrackedMap<K, V>}
+ */
+export function tracked_map(block, ...args) {
+  return with_scope(block, () => new TrackedMap(...args));
+}

package/src/runtime/set.js

@@ -1,5 +1,5 @@
 /** @import { Block, Tracked } from '#client' */
-import { get, increment, safe_scope, set, tracked } from './internal/client/runtime.js';
+import { get, increment, safe_scope, set, tracked, with_scope } from './internal/client/runtime.js';
 
 const introspect_methods = ['entries', 'forEach', 'keys', 'values', Symbol.iterator];
 
@@ -193,3 +193,13 @@ export class TrackedSet extends Set {
     return [...this];
   }
 }
+
+/**
+ * @template V
+ * @param {Block} block
+ * @param {...any} args
+ * @returns {TrackedSet<V>}
+ */
+export function tracked_set(block, ...args) {
+  return with_scope(block, () => new TrackedSet(...args));
+}

package/tests/client/map.test.ripple

@@ -138,4 +138,85 @@ describe('TrackedMap', () => {
 
         expect(container.querySelectorAll('pre')[0].textContent).toBe('[["foo",1],["bar",2]]');
     });
+
+    it('creates empty TrackedMap using #Map() shorthand syntax', () => {
+        component MapTest() {
+            let map = #Map();
+            
+            <button onClick={() => map.set('a', 1)}>{'add'}</button>
+            <pre>{map.size}</pre>
+        }
+
+        render(MapTest);
+
+        expect(container.querySelector('pre').textContent).toBe('0');
+
+        const addButton = container.querySelector('button');
+        addButton.click();
+        flushSync();
+
+        expect(container.querySelector('pre').textContent).toBe('1');
+    });
+    
+
+    it('creates TrackedMap with initial entries using #Map() shorthand syntax', () => {
+        component MapTest() {
+            let map = #Map([['a', 1], ['b', 2], ['c', 3]]);
+            let value = track(() => map.get('b'));
+
+            <button onClick={() => map.set('b', 10)}>{'update'}</button>
+            <pre>{map.size}</pre>
+            <pre>{@value}</pre>
+        }
+
+        render(MapTest);
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('3');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+
+        const updateButton = container.querySelector('button');
+        updateButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('10');
+    });
+
+    it('handles all operations with #Map() shorthand syntax', () => {
+        component MapTest() {
+            let map = #Map([['x', 100], ['y', 200]]);
+            let keys = track(() => Array.from(map.keys()));
+
+            <button onClick={() => map.set('z', 300)}>{'add'}</button>
+            <button onClick={() => map.delete('x')}>{'delete'}</button>
+            <button onClick={() => map.clear()}>{'clear'}</button>
+
+            <pre>{JSON.stringify(@keys)}</pre>
+            <pre>{map.size}</pre>
+        }
+
+        render(MapTest);
+
+        const [addButton, deleteButton, clearButton] = container.querySelectorAll('button');
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('["x","y"]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+
+        addButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('["x","y","z"]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+        deleteButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('["y","z"]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+
+        clearButton.click();
+        flushSync();
+
+        expect(container.querySelectorAll('pre')[0].textContent).toBe('[]');
+        expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+    });
 });

package/tests/client/set.test.ripple

@@ -96,4 +96,85 @@ describe('TrackedSet', () => {
 
     expect(container.querySelectorAll('pre')[0].textContent).toBe('false');
   });
+
+  it('creates empty TrackedSet using #Set() shorthand syntax', () => {
+    component SetTest() {
+      let items = #Set();
+
+      <button onClick={() => items.add(1)}>{'add'}</button>
+      <pre>{items.size}</pre>
+    }
+
+    render(SetTest);
+
+    expect(container.querySelector('pre').textContent).toBe('0');
+
+    const addButton = container.querySelector('button');
+    addButton.click();
+    flushSync();
+
+    expect(container.querySelector('pre').textContent).toBe('1');
+  });
+
+  it('creates TrackedSet with initial values using #Set() shorthand syntax', () => {
+    component SetTest() {
+      let items = #Set([1, 2, 3, 4]);
+      let hasValue = track(() => items.has(3));
+
+      <button onClick={() => items.delete(3)}>{'delete'}</button>
+      <pre>{items.size}</pre>
+      <pre>{@hasValue}</pre>
+    }
+
+    render(SetTest);
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('4');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('true');
+
+    const deleteButton = container.querySelector('button');
+    deleteButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('3');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('false');
+  });
+
+  it('handles all operations with #Set() shorthand syntax', () => {
+    component SetTest() {
+      let items = #Set([10, 20, 30]);
+      let values = track(() => Array.from(items.values()));
+
+      <button onClick={() => items.add(40)}>{'add'}</button>
+      <button onClick={() => items.delete(20)}>{'delete'}</button>
+      <button onClick={() => items.clear()}>{'clear'}</button>
+
+      <pre>{JSON.stringify(@values)}</pre>
+      <pre>{items.size}</pre>
+    }
+
+    render(SetTest);
+
+    const [addButton, deleteButton, clearButton] = container.querySelectorAll('button');
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,20,30]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+    addButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,20,30,40]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+
+    deleteButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,30,40]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+    clearButton.click();
+    flushSync();
+
+    expect(container.querySelectorAll('pre')[0].textContent).toBe('[]');
+    expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+  });
 });