ripple 0.2.88 → 0.2.89

package/src/runtime/proxy.js

@@ -0,0 +1,341 @@
+/** @import { Block, Tracked } from '#client' */
+/** @import { TrackedArray } from './array.js' */
+/** @import { TrackedObject } from './object.js' */
+
+import { get, set, tracked } from './internal/client/runtime.js';
+import {
+  array_prototype,
+  get_descriptor,
+  get_prototype_of,
+  is_array,
+  object_prototype,
+} from './internal/client/utils.js';
+import {
+  MAX_ARRAY_LENGTH,
+  TRACKED_ARRAY,
+  TRACKED_OBJECT,
+  UNINITIALIZED,
+} from './internal/client/constants.js';
+
+/**
+ * @template T
+ * @param {T[] | Record<PropertyKey, any>} value
+ * @param {Block} block
+ * @returns {TrackedArray<T> | TrackedObject<T>}
+ */
+export function proxy(value, block) {
+  // if non-proxyable, or is already a proxy, return `value`
+  if (
+    typeof value !== 'object'
+    || value === null
+    || TRACKED_ARRAY in value
+    || TRACKED_OBJECT in value
+  ) {
+    return value;
+  }
+
+  const prototype = get_prototype_of(value);
+
+  if (prototype !== object_prototype && prototype !== array_prototype) {
+    return value;
+  }
+
+  var tracked_elements = new Map();
+  var is_proxied_array = is_array(value);
+  /** @type {Tracked} */
+  var tracked_len;
+
+  if (is_proxied_array) {
+    tracked_len = tracked(value.length, block);
+    tracked_elements.set('length', tracked_len);
+  }
+
+  return new Proxy(value, {
+    /**
+     * @param {PropertyKey} prop
+     */
+    get(target, prop, receiver) {
+      var t = tracked_elements.get(prop);
+      var exists = prop in target;
+
+      if (t === undefined && (!exists || get_descriptor(target, prop)?.writable)) {
+        t = tracked(exists ? /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
+        tracked_elements.set(prop, t);
+      }
+
+      if (t !== undefined) {
+        var v = get(t);
+        return v === UNINITIALIZED ? undefined : v;
+      }
+
+      var result = Reflect.get(target, prop, receiver);
+
+      if (typeof result === 'function') {
+        if (methods_returning_arrays.has(prop)) {
+          /** @type {(this: any, ...args: any[]) => any} */
+          return function (...args) {
+            var output = Reflect.apply(result, receiver, args);
+
+            if (Array.isArray(output) && output !== target) {
+              return array_proxy({ elements: output, block, use_array: true });
+            }
+
+            return output;
+          };
+        }
+
+        // When generating an iterator, we need to ensure that length is tracked
+        if (is_proxied_array && (prop === 'entries' || prop === 'values' || prop === 'keys')) {
+          receiver.length;
+        }
+      }
+
+      return result;
+    },
+
+    set(target, prop, value, receiver) {
+      var t = tracked_elements.get(prop);
+      var exists = prop in target;
+
+      if (is_proxied_array && prop === 'length') {
+        for (var i = value; i < t.v; i += 1) {
+          var other_t = tracked_elements.get(i + '');
+          if (other_t !== undefined) {
+            set(other_t, UNINITIALIZED, block);
+          } else if (i in target) {
+            // If the item exists in the original, we need to create a uninitialized tracked,
+            // else a later read of the property would result in a tracked being created with
+            // the value of the original item at that index.
+            other_t = tracked(UNINITIALIZED, block);
+            tracked_elements.set(i + '', other_t);
+          }
+        }
+      }
+
+      // If we haven't yet created a tracked for this property, we need to ensure
+      // we do so otherwise if we read it later, then the write won't be tracked and
+      // the heuristics of effects will be different vs if we had read the proxied
+      // object property before writing to that property.
+      if (t === undefined) {
+        if (!exists || get_descriptor(target, prop)?.writable) {
+          t = tracked(undefined, block);
+          set(t, value, block);
+
+          tracked_elements.set(prop, t);
+        }
+      } else {
+        exists = t.v !== UNINITIALIZED;
+
+        set(t, value, block);
+      }
+
+			var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+
+			// Set the new value before updating any tracked's so that any listeners get the new value
+			if (descriptor?.set) {
+				descriptor.set.call(receiver, value);
+			}
+
+      if (!exists && is_proxied_array && typeof prop === 'string' ) {
+        // If we have mutated an array directly, we might need to
+        // signal that length has also changed. Do it before updating metadata
+        // to ensure that iterating over the array as a result of a metadata update
+        // will not cause the length to be out of sync.
+        var n = Number(prop);
+
+        if (Number.isInteger(n) && n >= tracked_len.v) {
+          set(tracked_len, n + 1, block);
+        }
+      }
+
+      return true;
+    },
+
+    setPrototypeOf() {
+      throw new Error(`Cannot set prototype of ${is_proxied_array ? '\`TrackedArray\`' : '\`TrackedObject\`'}`);
+    },
+
+    deleteProperty(target, prop) {
+      var t = tracked_elements.get(prop);
+
+      if (t === undefined) {
+        if (prop in target) {
+          const t = tracked(UNINITIALIZED, block);
+          tracked_elements.set(prop, t);
+        }
+      } else {
+        set(t, UNINITIALIZED, block);
+      }
+
+      return Reflect.deleteProperty(target, prop);
+    },
+
+    has(target, prop) {
+      if (is_proxied_array && prop === TRACKED_ARRAY) {
+        return true;
+      }
+
+      if (prop === TRACKED_OBJECT) {
+        return true;
+      }
+
+      var t = tracked_elements.get(prop);
+      var exists = (t !== undefined && t.v !== UNINITIALIZED) || Reflect.has(target, prop);
+
+      if (t !== undefined || !exists || get_descriptor(target, prop)?.writable) {
+        if (t === undefined) {
+          t = tracked(exists ?  /** @type {any} */ (target)[prop] : UNINITIALIZED, block);
+
+          tracked_elements.set(prop, t);
+        }
+
+        var value = get(t);
+        if (value === UNINITIALIZED) {
+          return false;
+        }
+      }
+
+      return exists;
+    },
+
+    defineProperty(_, prop, descriptor) {
+      if (
+        !('value' in descriptor) ||
+        descriptor.configurable === false ||
+        descriptor.enumerable === false ||
+        descriptor.writable === false
+      ) {
+        // we disallow non-basic descriptors, because unless they are applied to the
+        // target object — which we avoid, so that state can be forked — we will run
+        // afoul of the various invariants
+        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor#invariants
+        throw new Error(
+          'Only basic property descriptors are supported with value and configurable, enumerable, and writable set to true',
+        );
+      }
+
+      var t = tracked_elements.get(prop);
+
+      if (t === undefined) {
+        t = tracked(descriptor.value, block);
+        tracked_elements.set(prop, t);
+      } else {
+        set(t, descriptor.value, block);
+      }
+
+      return true;
+    },
+
+    ownKeys(target) {
+      var own_keys = Reflect.ownKeys(target).filter((key) => {
+        var t = tracked_elements.get(key);
+        return t === undefined || t.v !== UNINITIALIZED;
+      });
+
+      for (var [key, t] of tracked_elements) {
+        if (t.v !== UNINITIALIZED && !(key in target)) {
+          own_keys.push(key);
+        }
+      }
+
+      return own_keys;
+    },
+
+    getOwnPropertyDescriptor(target, prop) {
+      var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+
+      if (descriptor && 'value' in descriptor) {
+        var t = tracked_elements.get(prop);
+        if (t) descriptor.value = get(t);
+      } else if (descriptor === undefined) {
+        var t = tracked_elements.get(prop);
+        var value = t?.v;
+
+        if (t !== undefined && value !== UNINITIALIZED) {
+          return {
+            enumerable: true,
+            configurable: true,
+            value,
+            writable: true
+          };
+        }
+      }
+
+      return descriptor;
+    },
+
+  });
+}
+
+/**
+ * @template T
+ * @param {{
+ *  elements: Iterable<T>,
+ *  block: Block,
+ *  from_static?: boolean,
+ *  use_array?: boolean
+ * }} params
+ * @returns {TrackedArray<T>}
+ */
+export function array_proxy({ elements, block, from_static = false, use_array = false }) {
+  var arr;
+  var first;
+
+  if (
+    from_static &&
+    (first = get_first_if_length(/** @type {Array<T>} */ (elements))) !== undefined
+  ) {
+    arr = new Array();
+    arr[0] = first;
+  } else if (use_array) {
+    arr = elements;
+  } else {
+    arr = new Array(...elements);
+  }
+
+  return proxy(arr, block);
+}
+
+/**
+ * @template {object} T
+ * @param {T} obj
+ * @param {Block} block
+ * @returns {TrackedObject<T>}
+ */
+export function object_proxy(obj, block) {
+  return proxy(obj, block);
+}
+
+/** @type {Set<PropertyKey>} */
+const methods_returning_arrays = new Set([
+  'concat',
+  'filter',
+  'flat',
+  'flatMap',
+  'map',
+  'slice',
+  'splice',
+  'toReversed',
+  'toSorted',
+  'toSpliced',
+  'with',
+]);
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ * @returns {number | void}
+ */
+function get_first_if_length(array) {
+  var first = array[0];
+
+  if (
+    array.length === 1 &&
+    0 in array &&
+    Number.isInteger(first) &&
+    /** @type {number} */ (first) >= 0 &&
+    /** @type {number} */ (first) <= MAX_ARRAY_LENGTH
+  ) {
+    return /** @type {number} */ (first);
+  }
+}

package/src/utils/events.js

@@ -58,11 +58,11 @@ export function is_capture_event(name) {
  * @param {string} event_name
  */
 export function get_attribute_event_name(event_name) {
-  event_name = event_name.slice(2);
+  event_name = event_name.slice(2); // strip "on"
   if (is_capture_event(event_name)) {
-    event_name = event_name.slice(0, -7);
+    event_name = event_name.slice(0, -7); // strip "Capture"
   }
-  return event_name[0].toLowerCase() + event_name.slice(1);
+  return event_name.toLowerCase();
 }
 
 const PASSIVE_EVENTS = ['touchstart', 'touchmove'];

package/tests/client/array.test.ripple

@@ -7,7 +7,7 @@ describe('TrackedArray', () => {
 
 	function render(component) {
 		mount(component, {
-		target: container
+			target: container
 		});
 	}
 
@@ -877,7 +877,7 @@ describe('TrackedArray', () => {
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('[5,4,3,2,1]');
 	});
 
-	it('handles toSorted method with reactivity', () => {
+	it('handles toSorted method with reactivity', (context) => {
 		if (!('toSorted' in Array.prototype)) {
 			context.skip();
 		}
@@ -907,7 +907,7 @@ describe('TrackedArray', () => {
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('[0,1,2,3,4]');
 	});
 
-	it('handles toSpliced method with reactivity', () => {
+	it('handles toSpliced method with reactivity', (context) => {
 		if (!('toSpliced' in Array.prototype)) {
 			context.skip();
 		}

package/tests/client/basic.test.ripple

@@ -142,6 +142,81 @@ describe('basic client', () => {
 		expect(div.classList.contains('inactive')).toBe(true);
 	});
 
+	it('render class attribute with array, nested array, nested object', () => {
+		component Basic() {
+			<div class={[
+				'foo',
+				'bar',
+				true && 'baz',
+				false && 'aaa',
+				null && 'bbb',
+				[
+					'ccc',
+					'ddd',
+					{ eee: true, fff: false }
+				]
+			]}>
+				{'Class Array'}
+			</div>
+
+			<style>
+				.foo {
+				  color: red;
+				}
+			</style>
+		}
+
+		render(Basic);
+
+		const div = container.querySelector('div');
+
+		expect(Array.from(div.classList).some(className => className.startsWith('ripple-'))).toBe(true);
+		expect(div.classList.contains('foo')).toBe(true);
+		expect(div.classList.contains('bar')).toBe(true);
+		expect(div.classList.contains('baz')).toBe(true);
+		expect(div.classList.contains('aaa')).toBe(false);
+		expect(div.classList.contains('bbb')).toBe(false);
+		expect(div.classList.contains('ccc')).toBe(true);
+		expect(div.classList.contains('ddd')).toBe(true);
+		expect(div.classList.contains('eee')).toBe(true);
+		expect(div.classList.contains('fff')).toBe(false);
+	});
+
+	it('render dynamic class object', () => {
+		component Basic() {
+			let active = track(false);
+
+			<button onClick={() => { @active = !@active }}>{'Toggle'}</button>
+			<div class={{ active: @active, inactive: !@active }}>{'Dynamic Class'}</div>
+
+			<style>
+				.active {
+					color: green;
+				}
+			</style>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const div = container.querySelector('div');
+
+		expect(Array.from(div.classList).some(className => className.startsWith('ripple-'))).toBe(true);
+		expect(div.classList.contains('inactive')).toBe(true);
+		expect(div.classList.contains('active')).toBe(false);
+
+		button.click();
+		flushSync();
+		expect(div.classList.contains('inactive')).toBe(false);
+		expect(div.classList.contains('active')).toBe(true);
+
+		button.click();
+		flushSync();
+
+		expect(div.classList.contains('inactive')).toBe(true);
+		expect(div.classList.contains('active')).toBe(false);
+	});
+
 	it('render dynamic id attribute', () => {
 		component Basic() {
 			let count = track(0);

package/tests/client/head.test.ripple

@@ -0,0 +1,196 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, track } from 'ripple';
+
+describe('head elements', () => {
+	let container;
+	let originalTitle;
+
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+		// Store original title to restore later
+		originalTitle = document.title;
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+		// Restore original title
+		document.title = originalTitle;
+	});
+
+	it('renders static title element', () => {
+		component App() {
+			<head>
+				<title>{'Static Test Title'}</title>
+			</head>
+			<div>{'Content'}</div>
+		}
+
+		render(App);
+		
+		expect(document.title).toBe('Static Test Title');
+		expect(container.querySelector('div').textContent).toBe('Content');
+	});
+
+	it('renders reactive title element', () => {
+		component App() {
+			let title = track('Initial Title');
+
+			<head>
+				<title>{@title}</title>
+			</head>
+			<div>
+				<button onClick={() => { @title = 'Updated Title'; }}>{'Update Title'}</button>
+				<span>{@title}</span>
+			</div>
+		}
+
+		render(App);
+		
+		expect(document.title).toBe('Initial Title');
+		expect(container.querySelector('span').textContent).toBe('Initial Title');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(document.title).toBe('Updated Title');
+		expect(container.querySelector('span').textContent).toBe('Updated Title');
+	});
+
+	it('renders title with template literal', () => {
+		component App() {
+			let name = track('World');
+
+			<head>
+				<title>{`Hello ${@name}!`}</title>
+			</head>
+			<div>
+				<button onClick={() => { @name = 'Ripple'; }}>{'Change Name'}</button>
+			</div>
+		}
+
+		render(App);
+		
+		expect(document.title).toBe('Hello World!');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(document.title).toBe('Hello Ripple!');
+	});
+
+	it('renders title with computed value', () => {
+		component App() {
+			let count = track(0);
+			let prefix = 'Count: ';
+
+			<head>
+				<title>{prefix + @count}</title>
+			</head>
+			<div>
+				<button onClick={() => { @count++; }}>{'Increment'}</button>
+				<span>{@count}</span>
+			</div>
+		}
+
+		render(App);
+		
+		expect(document.title).toBe('Count: 0');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(document.title).toBe('Count: 1');
+		expect(container.querySelector('span').textContent).toBe('1');
+	});
+
+	it('handles multiple title updates', () => {
+		component App() {
+			let step = track(1);
+
+			<head>
+				<title>{`Step ${@step} of 3`}</title>
+			</head>
+			<div>
+				<button onClick={() => { @step = (@step % 3) + 1 }}>{'Next Step'}</button>
+			</div>
+		}
+
+		render(App);
+		
+		expect(document.title).toBe('Step 1 of 3');
+
+		const button = container.querySelector('button');
+		
+		button.click();
+		flushSync();
+		expect(document.title).toBe('Step 2 of 3');
+
+		button.click();
+		flushSync();
+		expect(document.title).toBe('Step 3 of 3');
+
+		button.click();
+		flushSync();
+		expect(document.title).toBe('Step 1 of 3');
+	});
+
+	it('renders empty title', () => {
+		component App() {
+			<head>
+				<title>{''}</title>
+			</head>
+			<div>{'Empty title test'}</div>
+		}
+
+		render(App);
+		
+		expect(document.title).toBe('');
+	});
+
+	it('renders title with conditional content', () => {
+		component App() {
+			let showPrefix = track(true);
+			let title = track('Main Page');
+
+			<head>
+				<title>{@showPrefix ? 'App - ' + @title : @title}</title>
+			</head>
+			<div>
+				<button onClick={() => { @showPrefix = !@showPrefix }}>{'Toggle Prefix'}</button>
+				<button onClick={() => { @title = @title === 'Main Page' ? 'Settings' : 'Main Page' }}>{'Change Page'}</button>
+			</div>
+		}
+
+		render(App);
+		
+		expect(document.title).toBe('App - Main Page');
+
+		const buttons = container.querySelectorAll('button');
+		
+		// Toggle prefix off
+		buttons[0].click();
+		flushSync();
+		expect(document.title).toBe('Main Page');
+
+		// Change page
+		buttons[1].click();
+		flushSync();
+		expect(document.title).toBe('Settings');
+
+		// Toggle prefix back on
+		buttons[0].click();
+		flushSync();
+		expect(document.title).toBe('App - Settings');
+	});
+});