ripple 0.2.168 → 0.2.170

package/tests/client/css/global-keyframes.test.ripple

@@ -98,4 +98,61 @@ export component Test() {
 		expect(css).toContain('@keyframes foo');
 		expect(css).toContain('@keyframes bar');
 	});
+
+	it('handles animation property referencing keyframes (not marking as unused)', () => {
+		const source = `
+export component Parent() {
+	<div class="parent">
+		<Child />
+	</div>
+
+	<style>
+		/* Scoped keyframe - only usable within Parent */
+		@keyframes slideIn {
+			from { transform: translateX(-100%); }
+			to { transform: translateX(0); }
+		}
+
+		/* Global keyframe - usable in any component */
+		@keyframes -global-fadeIn {
+			0% { opacity: 0; }
+			100% { opacity: 1; }
+		}
+
+		.parent {
+			animation: slideIn 1s;
+		}
+	</style>
+}
+
+component Child() {
+	<div class="child">{'Child content'}</div>
+
+	<style>
+		.child {
+			animation: fadeIn 3s; /* Uses global fadeIn from Parent */
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		// Parent should have scoped slideIn and global fadeIn
+		expect(css).toMatch(/@keyframes ripple-[a-z0-9]+-slideIn/);
+		expect(css).toContain('@keyframes fadeIn');
+		expect(css).not.toContain('-global-fadeIn');
+
+		// Parent .parent should reference scoped slideIn
+		expect(css).toMatch(
+			/\.parent\.ripple-[a-z0-9]+\s*{[\s\S]*?animation:\s*ripple-[a-z0-9]+-slideIn 1s/,
+		);
+
+		// .parent should NOT be marked as unused
+		expect(css).not.toContain('(unused) .parent');
+
+		// Child .child should reference global fadeIn
+		expect(css).toMatch(/\.child\.ripple-[a-z0-9]+\s*{[\s\S]*?animation:\s*fadeIn 3s/);
+
+		// .child should NOT be marked as unused
+		expect(css).not.toContain('(unused) .child');
+	});
 });

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> = {