ripple 0.2.56 → 0.2.57

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

package/src/compiler/phases/2-analyze/index.js

@@ -4,7 +4,6 @@ import { create_scopes, ScopeRoot } from '../../scope.js';
 import {
   get_delegated_event,
   is_element_dom_element,
-  is_event_attribute,
   is_inside_component,
   is_ripple_import,
   is_void_element,
@@ -13,6 +12,7 @@ import { extract_paths } from '../../../utils/ast.js';
 import is_reference from 'is-reference';
 import { prune_css } from './prune.js';
 import { error } from '../../errors.js';
+import { is_event_attribute } from '../../../utils/events.js';
 
 function mark_control_flow_has_template(path) {
   for (let i = path.length - 1; i >= 0; i -= 1) {

package/src/compiler/phases/3-transform/index.js

@@ -7,9 +7,7 @@ import { IS_CONTROLLED, TEMPLATE_FRAGMENT } from '../../../constants.js';
 import { sanitize_template_string } from '../../../utils/sanitize_template_string.js';
 import {
   build_hoisted_params,
-  is_event_attribute,
   is_inside_component,
-  is_passive_event,
   build_assignment,
   visit_assignment_expression,
   escape_html,
@@ -27,6 +25,7 @@ import {
 import is_reference from 'is-reference';
 import { object } from '../../../utils/ast.js';
 import { render_stylesheets } from './stylesheet.js';
+import { is_event_attribute, is_passive_event } from '../../../utils/events.js';
 
 function add_ripple_internal_import(context) {
   if (!context.state.to_ts) {

package/src/compiler/utils.js

@@ -1,5 +1,6 @@
 import { build_assignment_value } from '../utils/ast.js';
 import * as b from '../utils/builders.js';
+import { get_attribute_event_name, is_delegated, is_event_attribute } from '../utils/events.js';
 
 const regex_return_characters = /\r/g;
 
@@ -146,47 +147,6 @@ export function is_dom_property(name) {
   return DOM_PROPERTIES.includes(name);
 }
 
-/** List of Element events that will be delegated */
-const DELEGATED_EVENTS = [
-  'beforeinput',
-  'click',
-  'change',
-  'dblclick',
-  'contextmenu',
-  'focusin',
-  'focusout',
-  'input',
-  'keydown',
-  'keyup',
-  'mousedown',
-  'mousemove',
-  'mouseout',
-  'mouseover',
-  'mouseup',
-  'pointerdown',
-  'pointermove',
-  'pointerout',
-  'pointerover',
-  'pointerup',
-  'touchend',
-  'touchmove',
-  'touchstart',
-];
-
-export function is_delegated(event_name) {
-  return DELEGATED_EVENTS.includes(event_name);
-}
-
-const PASSIVE_EVENTS = ['touchstart', 'touchmove'];
-
-export function is_passive_event(name) {
-  return PASSIVE_EVENTS.includes(name);
-}
-
-export function is_event_attribute(attr) {
-  return attr.startsWith('on') && attr.length > 2 && attr[2] === attr[2].toUpperCase();
-}
-
 const unhoisted = { hoisted: false };
 
 export function get_delegated_event(event_name, handler, state) {

package/src/runtime/array.js

@@ -16,7 +16,7 @@ export function TrackedArray(...elements) {
 
   var block = safe_scope();
 
-  return proxy(elements, block);
+  return proxy({ elements, block });
 }
 
 /**
@@ -29,7 +29,7 @@ export function TrackedArray(...elements) {
 TrackedArray.from = function (arrayLike, mapFn, thisArg) {
   var block = safe_scope();
   var elements = mapFn ? Array.from(arrayLike, mapFn, thisArg) : Array.from(arrayLike);
-  return proxy(elements, block, true);
+  return proxy({ elements, block, from_static: true });
 };
 
 /**
@@ -40,7 +40,7 @@ TrackedArray.from = function (arrayLike, mapFn, thisArg) {
 TrackedArray.of = function (...items) {
   var block = safe_scope();
   var elements = Array.of(...items);
-  return proxy(elements, block, true);
+  return proxy({ elements, block, from_static: true });
 };
 
 /**
@@ -55,26 +55,31 @@ TrackedArray.fromAsync = async function (arrayLike, mapFn, thisArg) {
   var elements = mapFn
     ? await Array.fromAsync(arrayLike, mapFn, thisArg)
     : await Array.fromAsync(arrayLike);
-  return proxy(elements, block, true);
+  return proxy({ elements, block, from_static: true });
 };
 
 /**
  * @template T
- * @param {Iterable<T>} elements
- * @param {Block} block
- * @param {boolean} is_from_static
+ * @param {{
+ *  elements: Iterable<T>,
+ *  block: Block,
+ *  from_static?: boolean,
+ *  use_array?: boolean
+ * }} params
  * @returns {TrackedArray<T>}
  */
-function proxy(elements, block, is_from_static = false) {
+function proxy({ elements, block, from_static = false, use_array = false }) {
   var arr;
   var first;
 
   if (
-    is_from_static &&
+    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);
   }
@@ -98,7 +103,22 @@ function proxy(elements, block, is_from_static = false) {
         return v === UNINITIALIZED ? undefined : v;
       }
 
-      return Reflect.get(target, prop, receiver);
+      var result = Reflect.get(target, prop, receiver);
+
+      if (typeof result === "function" && 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 proxy({ elements: output, block, use_array: true });
+          }
+
+          return output;
+        };
+      }
+
+      return result;
     },
 
     set(target, prop, value, receiver) {
@@ -197,6 +217,32 @@ function proxy(elements, block, is_from_static = 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;
+    },
   });
 }
 
@@ -218,3 +264,17 @@ function get_first_if_length(array) {
     return /** @type {number} */ (first);
   }
 }
+
+const methods_returning_arrays = new Set([
+  "concat",
+  "filter",
+  "flat",
+  "flatMap",
+  "map",
+  "slice",
+  "splice",
+  "toReversed",
+  "toSorted",
+  "toSpliced",
+  "with",
+]);

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

@@ -1,4 +1,4 @@
-import { is_passive_event } from '../../../compiler/utils';
+import { is_passive_event } from '../../../utils/events';
 import {
   active_block,
   active_reaction,

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

@@ -1,6 +1,14 @@
 import { destroy_block, ref } from './blocks';
 import { REF_PROP } from './constants';
-import { get_descriptors, get_own_property_symbols, get_prototype_of } from './utils';
+import {
+  get_descriptors,
+  get_own_property_symbols,
+  get_prototype_of,
+  is_tracked_object,
+} from './utils';
+import { delegate, event } from './events';
+import { get_attribute_event_name, is_delegated, is_event_attribute } from '../../../utils/events';
+import { get } from './runtime';
 
 export function set_text(text, value) {
   // For objects, we apply string coercion (which might make things like $state array references in the template reactive) before diffing
@@ -67,8 +75,24 @@ export function set_attributes(element, attributes) {
 
     let value = attributes[key];
 
+    if (is_tracked_object(value)) {
+      value = get(value);
+    }
+
     if (key === 'class') {
       set_class(element, value);
+    } else if (is_event_attribute(key)) {
+      // Handle event handlers in spread props
+      const event_name = get_attribute_event_name(key);
+
+      if (is_delegated(event_name)) {
+        // Use delegation for delegated events
+        element['__' + event_name] = value;
+        delegate([event_name]);
+      } else {
+        // Use addEventListener for non-delegated events
+        event(event_name, element, value);
+      }
     } else {
       set_attribute(element, key, value);
     }

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

@@ -26,7 +26,7 @@ import {
   REF_PROP,
 } from './constants';
 import { capture, suspend } from './try.js';
-import { define_property } from './utils';
+import { define_property, is_tracked_object } from './utils';
 
 const FLUSH_MICROTASK = 0;
 const FLUSH_SYNC = 1;
@@ -1003,7 +1003,7 @@ export async function maybe_tracked(v) {
   var restore = capture();
   let value;
 
-  if (typeof v === 'object' && v !== null && typeof v.f === 'number') {
+  if (is_tracked_object(v)) {
     if ((v.f & DERIVED) !== 0) {
       value = await async_computed(v.fn, v.b);
     } else {

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

@@ -23,3 +23,7 @@ export function create_anchor() {
 export function is_positive_integer(value) {
   return Number.isInteger(value) && /**@type {number} */ (value) >= 0;
 }
+
+export function is_tracked_object(v) {
+  return typeof v === 'object' && v !== null && typeof v.f === 'number';
+}

package/src/utils/events.js

@@ -0,0 +1,67 @@
+/** List of Element events that will be delegated */
+const DELEGATED_EVENTS = [
+  'beforeinput',
+  'click',
+  'change',
+  'dblclick',
+  'contextmenu',
+  'focusin',
+  'focusout',
+  'input',
+  'keydown',
+  'keyup',
+  'mousedown',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+  'pointerdown',
+  'pointermove',
+  'pointerout',
+  'pointerover',
+  'pointerup',
+  'touchend',
+  'touchmove',
+  'touchstart',
+];
+
+/**
+ * Checks if an event should be delegated
+ * @param {string} event_name - The event name (e.g., 'click', 'focus')
+ * @returns {boolean}
+ */
+export function is_delegated(event_name) {
+  return DELEGATED_EVENTS.includes(event_name);
+}
+
+export function is_event_attribute(attr) {
+  return attr.startsWith('on') && attr.length > 2 && attr[2] === attr[2].toUpperCase();
+}
+
+/**
+ * @param {string} name
+ */
+export function is_capture_event(name) {
+  return (
+    name.endsWith('Capture') &&
+    name.toLowerCase() !== 'gotpointercapture' &&
+    name.toLowerCase() !== 'lostpointercapture'
+  );
+}
+
+/**
+ * @param {string} event_name
+ */
+export function get_attribute_event_name(event_name) {
+  event_name = event_name.slice(2);
+  if (is_capture_event(event_name)) {
+    event_name = event_name.slice(0, -7);
+  }
+  return event_name[0].toLowerCase() + event_name.slice(1);
+}
+
+const PASSIVE_EVENTS = ['touchstart', 'touchmove'];
+
+export function is_passive_event(name) {
+  return PASSIVE_EVENTS.includes(name);
+}

package/tests/basic.test.ripple

@@ -470,6 +470,96 @@ describe('basic', () => {
 		expect(bubbleDiv.textContent).toBe('1');
 	});
 
+	it('renders with event listeners in spread props', () => {
+		component Basic() {
+			let count = track(0);
+
+			const minus = { 
+				onClick() {
+					@count--
+				}
+			}
+
+			const plus = { 
+				onClick() {
+					@count++
+				}
+			}
+
+			<div>
+				<button {...minus} class='minus'>{'-'}</button>
+				<span class='count'>{@count}</span>
+				<button {...plus} class='plus'>{'+'}</button>
+			</div>
+		}
+
+		render(Basic);
+
+		const minusButton = container.querySelector('.minus');
+		const plusButton = container.querySelector('.plus');
+		const countSpan = container.querySelector('.count');
+
+		expect(countSpan.textContent).toBe('0');
+
+		// Test that the buttons don't have string onclick attributes
+		expect(minusButton.getAttribute('onclick')).toBe(null);
+		expect(plusButton.getAttribute('onclick')).toBe(null);
+
+		// Test that the event handlers work
+		minusButton.click();
+		flushSync();
+		expect(countSpan.textContent).toBe('-1');
+
+		plusButton.click();
+		flushSync();
+		expect(countSpan.textContent).toBe('0');
+
+		plusButton.click();
+		flushSync();
+		expect(countSpan.textContent).toBe('1');
+	});
+
+	it('handles both delegated and non-delegated events in spread props', () => {
+		component Basic() {
+			let clickCount = track(0);
+			let focusCount = track(0);
+
+			const mixedHandler = { 
+				onClick() {  // Delegated event
+					@clickCount++
+				},
+				onFocus() { // Non-delegated event
+					@focusCount++
+				}
+			}
+
+			<div>
+				<button {...mixedHandler} class='mixed-button'>{'Test'}</button>
+				<span class='click-count'>{@clickCount}</span>
+				<span class='focus-count'>{@focusCount}</span>
+			</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('.mixed-button');
+		const clickSpan = container.querySelector('.click-count');
+		const focusSpan = container.querySelector('.focus-count');
+
+		expect(clickSpan.textContent).toBe('0');
+		expect(focusSpan.textContent).toBe('0');
+
+		// Test delegated event (click)
+		button.click();
+		flushSync();
+		expect(clickSpan.textContent).toBe('1');
+
+		// Test non-delegated event (focus)
+		button.dispatchEvent(new Event('focus'));
+		flushSync();
+		expect(focusSpan.textContent).toBe('1');
+	});
+
 	it('renders with component composition and children', () => {
 		component Card(props) {
 			<div class='card'>