ripple 0.2.168 → 0.2.169

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

@@ -18,7 +18,7 @@ describe('use value()', () => {
 
 		const input = container.querySelector('input') as HTMLInputElement;
 		input.value = 'Hello';
-		input.dispatchEvent(new Event('input'));
+		input.dispatchEvent(new Event('input', { bubbles: true }));
 		flushSync();
 		expect(input.value).toBe('Hello');
 		expect(logs).toEqual(['text changed', '', 'text changed', 'Hello']);
@@ -42,7 +42,7 @@ describe('use value()', () => {
 		const input = container.querySelector('input') as HTMLInputElement;
 		expect(input.value).toBe('foo');
 		input.value = 'Hello';
-		input.dispatchEvent(new Event('input'));
+		input.dispatchEvent(new Event('input', { bubbles: true }));
 		flushSync();
 		expect(input.value).toBe('Hello');
 		expect(logs).toEqual(['text changed', 'foo', 'text changed', 'Hello']);
@@ -65,7 +65,7 @@ describe('use value()', () => {
 
 		const input = container.querySelector('input') as HTMLInputElement;
 		input.checked = true;
-		input.dispatchEvent(new Event('change'));
+		input.dispatchEvent(new Event('change', { bubbles: true }));
 		flushSync();
 
 		expect(input.checked).toBe(true);
@@ -94,7 +94,7 @@ describe('use value()', () => {
 
 		const select = container.querySelector('select') as HTMLSelectElement;
 		select.value = '3';
-		select.dispatchEvent(new Event('change'));
+		select.dispatchEvent(new Event('change', { bubbles: true }));
 		flushSync();
 
 		expect(select.value).toBe('3');

package/tests/client/media-query.test.ripple

@@ -89,7 +89,7 @@ describe('MediaQuery', () => {
 				<Child />
 			}
 
-			<button onClick={() => @show = !@show}>{'Toggle Child'}</button>
+			<button onClick={() => (@show = !@show)}>{'Toggle Child'}</button>
 		}
 
 		component Child() {

package/tests/utils/events.test.js

@@ -1,37 +1,39 @@
+/** @import { AddEventObject } from '#public'*/
+
 import { describe, it, expect } from 'vitest';
 import {
-	is_delegated,
+	is_non_delegated,
 	is_event_attribute,
-	is_capture_event,
 	get_attribute_event_name,
-	is_passive_event
+	is_passive_event,
+	is_capture_event,
 } from '../../src/utils/events.js';
 
 describe('events utility', () => {
-	describe('is_delegated', () => {
-		it('should return true for delegated events', () => {
-			expect(is_delegated('click')).toBe(true);
-			expect(is_delegated('input')).toBe(true);
-			expect(is_delegated('change')).toBe(true);
-			expect(is_delegated('mousedown')).toBe(true);
-			expect(is_delegated('keydown')).toBe(true);
-			expect(is_delegated('pointerdown')).toBe(true);
-			expect(is_delegated('touchstart')).toBe(true);
-			expect(is_delegated('focusin')).toBe(true);
-			expect(is_delegated('focusout')).toBe(true);
-		});
-
-		it('should return false for non-delegated events', () => {
-			expect(is_delegated('focus')).toBe(false);
-			expect(is_delegated('blur')).toBe(false);
-			expect(is_delegated('scroll')).toBe(false);
-			expect(is_delegated('load')).toBe(false);
-			expect(is_delegated('resize')).toBe(false);
-		});
-
-		it('should be case-sensitive', () => {
-			expect(is_delegated('Click')).toBe(false);
-			expect(is_delegated('CLICK')).toBe(false);
+	describe('is event delegated', () => {
+		it('should confirm delegated events', () => {
+			expect(is_non_delegated('click')).toBe(false);
+			expect(is_non_delegated('input')).toBe(false);
+			expect(is_non_delegated('change')).toBe(false);
+			expect(is_non_delegated('mousedown')).toBe(false);
+			expect(is_non_delegated('keydown')).toBe(false);
+			expect(is_non_delegated('pointerdown')).toBe(false);
+			expect(is_non_delegated('touchstart')).toBe(false);
+			expect(is_non_delegated('focusin')).toBe(false);
+			expect(is_non_delegated('focusout')).toBe(false);
+		});
+
+		it('should confirm non-delegated events', () => {
+			expect(is_non_delegated('focus')).toBe(true);
+			expect(is_non_delegated('blur')).toBe(true);
+			expect(is_non_delegated('scroll')).toBe(true);
+			expect(is_non_delegated('load')).toBe(true);
+			expect(is_non_delegated('resize')).toBe(true);
+		});
+
+		it('should confirm that events with any capital letters are delegated', () => {
+			expect(is_non_delegated('Click')).toBe(false);
+			expect(is_non_delegated('CLICK')).toBe(false);
 		});
 	});
 
@@ -74,6 +76,32 @@ describe('events utility', () => {
 		});
 	});
 
+	describe('get_attribute_event_name', () => {
+		it('should convert event attribute names to lowercase and strip "on" prefix', () => {
+			const fn = () => {};
+			expect(get_attribute_event_name('onClick', fn)).toBe('click');
+			expect(get_attribute_event_name('onInput', fn)).toBe('input');
+			expect(get_attribute_event_name('onMouseDown', fn)).toBe('mousedown');
+			expect(get_attribute_event_name('onKeyPress', fn)).toBe('keypress');
+			expect(get_attribute_event_name('onChange', fn)).toBe('change');
+			expect(get_attribute_event_name('onFocus', fn)).toBe('focus');
+		});
+
+		it('should keep event attribute names letter case and strip "on" prefix', () => {
+			/** @type AddEventObject */
+			const customHandler = { handleEvent: () => {} };
+			expect(get_attribute_event_name('onClick', { ...customHandler, customName: 'Click' })).toBe(
+				'Click',
+			);
+			expect(get_attribute_event_name('onInput', { ...customHandler, customName: 'Input' })).toBe(
+				'Input',
+			);
+			expect(
+				get_attribute_event_name('onMouseDown', { ...customHandler, customName: 'MouseDown' }),
+			).toBe('MouseDown');
+		});
+	});
+
 	describe('is_capture_event', () => {
 		it('should return true for capture events', () => {
 			expect(is_capture_event('clickCapture')).toBe(true);
@@ -104,25 +132,6 @@ describe('events utility', () => {
 			expect(is_capture_event('keypressCapture')).toBe(true);
 			expect(is_capture_event('clickcapture')).toBe(false);
 			expect(is_capture_event('keypresscapture')).toBe(false);
-		})
-	});
-
-	describe('get_attribute_event_name', () => {
-		it('should convert event attribute names to lowercase and strip "on" prefix', () => {
-			expect(get_attribute_event_name('onClick')).toBe('click');
-			expect(get_attribute_event_name('onInput')).toBe('input');
-			expect(get_attribute_event_name('onMouseDown')).toBe('mousedown');
-			expect(get_attribute_event_name('onKeyPress')).toBe('keypress');
-			expect(get_attribute_event_name('onChange')).toBe('change');
-			expect(get_attribute_event_name('onFocus')).toBe('focus');
-		});
-
-		it('should handle capture events and strip both "on" and "Capture"', () => {
-			expect(get_attribute_event_name('onClickCapture')).toBe('click');
-			expect(get_attribute_event_name('onMouseDownCapture')).toBe('mousedown');
-			expect(get_attribute_event_name('onMouseDownCapture')).toBe('mousedown');
-			expect(get_attribute_event_name('onGotPointerCapture')).toBe('gotpointercapture');
-			expect(get_attribute_event_name('onLostPointerCapture')).toBe('lostpointercapture');
 		});
 	});
 
@@ -130,6 +139,8 @@ describe('events utility', () => {
 		it('should return true for passive events', () => {
 			expect(is_passive_event('touchstart')).toBe(true);
 			expect(is_passive_event('touchmove')).toBe(true);
+			expect(is_passive_event('wheel')).toBe(true);
+			expect(is_passive_event('mousewheel')).toBe(true);
 		});
 
 		it('should return false for non-passive events', () => {

package/types/index.d.ts

@@ -137,39 +137,49 @@ export declare function trackSplit<V extends Props, const K extends readonly (ke
 	splitKeys: K,
 ): SplitResult<V, K>;
 
+export interface AddEventOptions extends ExtendedEventOptions {
+	customName?: string;
+}
+
+export interface AddEventObject extends AddEventOptions, EventListenerObject {}
+
+export interface ExtendedEventOptions extends AddEventListenerOptions, EventListenerOptions {
+	delegated?: boolean;
+}
+
 export function on<Type extends keyof WindowEventMap>(
 	window: Window,
 	type: Type,
 	handler: (this: Window, event: WindowEventMap[Type]) => any,
-	options?: AddEventListenerOptions | undefined,
+	options?: ExtendedEventOptions | undefined,
 ): () => void;
 
 export function on<Type extends keyof DocumentEventMap>(
 	document: Document,
 	type: Type,
 	handler: (this: Document, event: DocumentEventMap[Type]) => any,
-	options?: AddEventListenerOptions | undefined,
+	options?: ExtendedEventOptions | undefined,
 ): () => void;
 
 export function on<Element extends HTMLElement, Type extends keyof HTMLElementEventMap>(
 	element: Element,
 	type: Type,
 	handler: (this: Element, event: HTMLElementEventMap[Type]) => any,
-	options?: AddEventListenerOptions | undefined,
+	options?: ExtendedEventOptions | undefined,
 ): () => void;
 
 export function on<Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap>(
 	element: Element,
 	type: Type,
 	handler: (this: Element, event: MediaQueryListEventMap[Type]) => any,
-	options?: AddEventListenerOptions | undefined,
+	options?: ExtendedEventOptions | undefined,
 ): () => void;
 
 export function on(
 	element: EventTarget,
 	type: string,
 	handler: EventListener,
-	options?: AddEventListenerOptions | undefined,
+	options?: ExtendedEventOptions | undefined,
 ): () => void;
 
 export type TrackedObjectShallow<T> = {