ripple 0.2.168 → 0.2.170

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.168",
+  "version": "0.2.170",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.168"
+    "ripple": "0.2.170"
   }
 }

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

@@ -2,7 +2,7 @@ import * as b from '../../../utils/builders.js';
 import { walk } from 'zimmerframe';
 import { create_scopes, ScopeRoot } from '../../scope.js';
 import {
-	get_delegated_event,
+	is_delegated_event,
 	get_parent_block_node,
 	is_element_dom_element,
 	is_inside_component,
@@ -729,16 +729,15 @@ const visitors = {
 						}
 
 						if (is_event_attribute(attr.name.name)) {
-							const event_name = attr.name.name.slice(2).toLowerCase();
 							const handler = visit(attr.value, state);
-							const delegated_event = get_delegated_event(event_name, handler, state);
+							const is_delegated = is_delegated_event(attr.name.name, handler, context);
 
-							if (delegated_event) {
+							if (is_delegated) {
 								if (attr.metadata === undefined) {
 									attr.metadata = {};
 								}
 
-								attr.metadata.delegated = delegated_event;
+								attr.metadata.delegated = is_delegated;
 							}
 						} else if (attr.value !== null) {
 							visit(attr.value, state);

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

@@ -845,6 +845,26 @@ function get_parent_rules(rule) {
 	return rules;
 }
 
+/**
+ * Check if a CSS rule contains animation or animation-name properties
+ * @param {Compiler.AST.CSS.Rule} rule
+ * @returns {boolean}
+ */
+function rule_has_animation(rule) {
+	if (!rule.block) return false;
+
+	for (const child of rule.block.children) {
+		if (child.type === 'Declaration') {
+			const prop = child.property?.toLowerCase();
+			if (prop === 'animation' || prop === 'animation-name') {
+				return true;
+			}
+		}
+	}
+
+	return false;
+}
+
 export function prune_css(css, element) {
 	walk(css, null, {
 		Rule(node, context) {
@@ -859,14 +879,9 @@ export function prune_css(css, element) {
 
 			seen.clear();
 
-			if (
-				apply_selector(
-					selectors,
-					/** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule),
-					element,
-					BACKWARD,
-				)
-			) {
+			const rule = /** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule);
+
+			if (apply_selector(selectors, rule, element, BACKWARD) || rule_has_animation(rule)) {
 				node.metadata.used = true;
 			}
 

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

@@ -40,7 +40,11 @@ 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';
+import {
+	get_original_event_name,
+	is_event_attribute,
+	normalize_event_name,
+} from '../../../../utils/events.js';
 import { createHash } from 'node:crypto';
 
 function add_ripple_internal_import(context) {
@@ -976,55 +980,35 @@ const visitors = {
 						}
 
 						if (is_event_attribute(name)) {
-							let capture = name.endsWith('Capture');
-							let event_name = capture
-								? name.slice(2, -7).toLowerCase()
-								: name.slice(2).toLowerCase();
-							let handler = visit(attr.value, state);
+							const metadata = { tracking: false, await: false };
+							let handler = visit(attr.value, { ...state, metadata });
+							const id = state.flush_node();
 
 							if (attr.metadata?.delegated) {
-								let delegated_assignment;
+								const event_name = normalize_event_name(name);
 
 								if (!state.events.has(event_name)) {
 									state.events.add(event_name);
 								}
 
-								if (
-									(handler.type === 'Identifier' &&
-										is_declared_function_within_component(handler, context)) ||
-									handler.type === 'ArrowFunctionExpression' ||
-									handler.type === 'FunctionExpression'
-								) {
-									delegated_assignment = handler;
-								} else {
-									delegated_assignment = b.array([handler, b.id('__block')]);
-								}
-								const id = state.flush_node();
-
 								state.init.push(
-									b.stmt(b.assignment('=', b.member(id, '__' + event_name), delegated_assignment)),
+									b.stmt(b.assignment('=', b.member(id, '__' + event_name), handler)),
 								);
 							} else {
-								const passive = is_passive_event(event_name);
-								const id = state.flush_node();
-
-								state.init.push(
-									b.stmt(
-										b.call(
-											'_$_.event',
-											b.literal(event_name),
-											id,
-											handler,
-											capture && b.true,
-											passive === undefined ? undefined : b.literal(passive),
-										),
-									),
-								);
+								const event_name = get_original_event_name(name);
+								// Check if handler is reactive (contains tracking)
+								if (metadata.tracking) {
+									// Use reactive_event with a thunk to re-evaluate when dependencies change
+									state.init.push(
+										b.stmt(b.call('_$_.render_event', b.literal(event_name), id, b.thunk(handler))),
+									);
+								} else {
+									state.init.push(b.stmt(b.call('_$_.event', b.literal(event_name), id, handler)));
+								}
 							}
 
 							continue;
 						}
-
 						const metadata = { tracking: false, await: false };
 						const expression = visit(attr.value, { ...state, metadata });
 						// All other attributes

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

@@ -195,7 +195,7 @@ const visitors = {
 				const character = state.code.original[index];
 
 				if (regex_css_name_boundary.test(character)) {
-					if (character !== ' ') {
+					if (name) {
 						const append_index = index - name.length;
 						state.keyframes[name] ??= { indexes: [], local: undefined };
 						if (state.keyframes[name].local) {

package/src/compiler/utils.js

@@ -1,8 +1,8 @@
-/** @import { Identifier, Pattern, Super, FunctionExpression, FunctionDeclaration, ArrowFunctionExpression, MemberExpression, AssignmentExpression, Expression, Node, AssignmentOperator, CallExpression } from 'estree' */
-/** @import { Component, Element, Attribute, SpreadAttribute, ScopeInterface, Binding, RippleNode, CompilerState, TransformContext, DelegatedEventResult, TextNode } from '#compiler' */
+/** @import { Identifier, Pattern, Super, MemberExpression, AssignmentExpression, Expression, Node, AssignmentOperator } from 'estree' */
+/** @import { Component, Element, RippleNode, TransformContext } from '#compiler' */
 import { build_assignment_value, extract_paths } 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';
+import { is_capture_event, is_non_delegated, normalize_event_name } from '../utils/events.js';
 
 const regex_return_characters = /\r/g;
 
@@ -173,12 +173,19 @@ export function is_dom_property(name) {
  * Determines if an event handler can be delegated
  * @param {string} event_name
  * @param {Expression} handler
- * @param {CompilerState} state
+ * @param {TransformContext} context
  * @returns {boolean}
  */
-export function get_delegated_event(event_name, handler, state) {
+export function is_delegated_event(event_name, handler, context) {
 	// Handle delegated event handlers. Bail out if not a delegated event.
-	if (!handler || !is_delegated(event_name)) {
+	if (
+		!handler ||
+		is_capture_event(event_name) ||
+		is_non_delegated(normalize_event_name(event_name)) ||
+		(handler.type !== 'FunctionExpression' &&
+			handler.type !== 'ArrowFunctionExpression' &&
+			!is_declared_function_within_component(/** @type {Identifier}*/ (handler), context))
+	) {
 		return false;
 	}
 	return true;

package/src/jsx-runtime.d.ts

@@ -1,3 +1,5 @@
+import type { AddEventObject } from '#public';
+
 /**
  * Ripple JSX Runtime Type Definitions
  * Ripple components are imperative and don't return JSX elements
@@ -40,9 +42,9 @@ interface HTMLAttributes {
 	className?: string;
 	id?: string;
 	style?: string | Record<string, string | number>;
-	onClick?: (event: MouseEvent) => void;
-	onInput?: (event: InputEvent) => void;
-	onChange?: (event: Event) => void;
+	onClick?: EventListener | AddEventObject;
+	onInput?: EventListener | AddEventObject;
+	onChange?: EventListener | AddEventObject;
 	children?: any;
 	[key: string]: any;
 }

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

@@ -1,4 +1,13 @@
-import { is_passive_event } from '../../../utils/events.js';
+/** @import { AddEventObject, AddEventOptions, ExtendedEventOptions } from '#public'*/
+/**
+ * @typedef {EventTarget & Record<string, any>} DelegatedEventTarget
+ */
+import {
+	event_name_from_capture,
+	is_capture_event,
+	is_non_delegated,
+	is_passive_event,
+} from '../../../utils/events.js';
 import {
 	active_block,
 	active_reaction,
@@ -8,6 +17,7 @@ import {
 	tracking,
 } from './runtime.js';
 import { array_from, define_property, is_array } from './utils.js';
+import { render } from './blocks.js';
 
 /** @type {Set<string>} */
 var all_registered_events = new Set();
@@ -15,21 +25,44 @@ var all_registered_events = new Set();
 /** @type {Set<(events: Array<string>) => void>} */
 var root_event_handles = new Set();
 
+/**
+ * @param {AddEventOptions} options
+ * @returns {AddEventListenerOptions}
+ */
+function get_event_options(options) {
+	/** @type AddEventListenerOptions */
+	var event_options = {};
+
+	if (options.capture) {
+		event_options.capture = true;
+	}
+	if (options.once) {
+		event_options.once = true;
+	}
+	if (options.passive) {
+		event_options.passive = true;
+	}
+	if (options.signal) {
+		event_options.signal = options.signal;
+	}
+	return event_options;
+}
+
 /**
  * @param {EventTarget} element
  * @param {string} type
  * @param {EventListener} handler
- * @param {AddEventListenerOptions} [options]
+ * @param {ExtendedEventOptions} [options]
  */
 export function on(element, type, handler, options = {}) {
-	var target_handler = create_event(type.toLowerCase(), element, handler, options);
+	var remove_listener = create_event(type, element, handler, options);
 
 	return () => {
-		element.removeEventListener(type, target_handler, options);
+		remove_listener();
 	};
 }
 
-let last_propagated_event = null;
+var last_propagated_event = null;
 
 /**
  * @this {EventTarget}
@@ -130,12 +163,7 @@ export function handle_event_propagation(event) {
 				var delegated = current_target['__' + event_name];
 
 				if (delegated !== undefined && !(/** @type {any} */ (current_target).disabled)) {
-					if (is_array(delegated)) {
-						var [fn, block, ...data] = delegated;
-						fn.apply(current_target, [event, ...data, block]);
-					} else {
-						delegated.call(current_target, event);
-					}
+					delegated.call(current_target, event);
 				}
 			} catch (error) {
 				if (throw_error) {
@@ -174,12 +202,51 @@ export function handle_event_propagation(event) {
 /**
  * @param {string} event_name
  * @param {EventTarget} dom
- * @param {EventListener} [handler]
- * @param {AddEventListenerOptions} [options]
+ * @param {EventListener} handler
+ * @param {AddEventOptions} options
+ * @returns {() => void}
  */
-function create_event(event_name, dom, handler, options = {}) {
-	/** @this {any} */
-	function target_handler(/** @type {Event} */ event) {
+function create_event(event_name, dom, handler, options) {
+	var is_delegated = true;
+
+	if (is_capture_event(event_name)) {
+		event_name = event_name_from_capture(event_name);
+
+		if (!('capture' in options) || options.capture !== false) {
+			options.capture = true;
+		}
+	}
+
+	event_name =
+		options.customName && options.customName?.length
+			? options.customName
+			: event_name.toLowerCase();
+
+	if (
+		options.delegated === false ||
+		options.capture ||
+		options.passive ||
+		options.once ||
+		options.signal ||
+		is_non_delegated(event_name)
+	) {
+		is_delegated = false;
+	}
+
+	if (is_delegated) {
+		var prop = '__' + event_name;
+		/** @type {DelegatedEventTarget} */ (dom)[prop] = handler;
+		delegate([event_name]);
+		return () => {
+			/** @type {DelegatedEventTarget} */ (dom)[prop] = undefined;
+		};
+	}
+
+	/**
+	 * @type {EventListener}
+	 * @this {Element}
+	 */
+	function target_handler(event) {
 		var previous_block = active_block;
 		var previous_reaction = active_reaction;
 		var previous_tracking = tracking;
@@ -203,22 +270,64 @@ function create_event(event_name, dom, handler, options = {}) {
 		}
 	}
 
-	dom.addEventListener(event_name, target_handler, options);
+	var event_options = get_event_options(options);
 
-	return target_handler;
+	dom.addEventListener(event_name, target_handler, event_options);
+	return () => {
+		dom.removeEventListener(event_name, target_handler, event_options);
+	};
 }
 
 /**
  * @param {string} event_name
  * @param {Element} dom
- * @param {EventListener} [handler]
- * @param {boolean} [capture]
- * @param {boolean} [passive]
- * @returns {void}
+ * @param {EventListener | AddEventObject} handler
+ * @returns {() => void}
+ */
+export function event(event_name, dom, handler) {
+	/** @type AddEventOptions */
+	var options = {};
+	/** @type {EventListener} */
+	var event_handler;
+
+	if (typeof handler === 'object' && 'handleEvent' in handler) {
+		({ handleEvent: event_handler, ...options } = handler);
+	} else {
+		event_handler = handler;
+	}
+
+	return create_event(event_name, dom, event_handler, options);
+}
+
+/**
+ * Reactive version of event that automatically cleans up and re-attaches
+ * when the handler changes
+ * @param {string} event_name
+ * @param {Element} dom
+ * @param {() => EventListener | AddEventObject} get_handler
  */
-export function event(event_name, dom, handler, capture, passive) {
-	var options = { capture, passive };
-	create_event(event_name, dom, handler, options);
+export function render_event(event_name, dom, get_handler) {
+	/** @type {EventListener | AddEventObject | undefined} */
+	var prev;
+	/** @type {(() => void) | undefined} */
+	var remove_listener;
+
+	render(() => {
+		var handler = get_handler();
+
+		if (handler !== prev) {
+			if (remove_listener) {
+				remove_listener();
+				remove_listener = undefined;
+			}
+
+			prev = handler;
+
+			if (handler) {
+				remove_listener = event(event_name, dom, handler);
+			}
+		}
+	});
 }
 
 /**

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

@@ -19,7 +19,7 @@ export {
 
 export { render, render_spread, async, ref, branch, destroy_block, root } from './blocks.js';
 
-export { event, delegate } from './events.js';
+export { event, render_event, delegate } from './events.js';
 
 export {
 	active_block,

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

@@ -1,6 +1,6 @@
 /** @import { Block } from '#client' */
 
-import { destroy_block, ref } from './blocks.js';
+import { branch, destroy_block, ref } from './blocks.js';
 import { REF_PROP } from './constants.js';
 import {
 	get_descriptors,
@@ -8,12 +8,8 @@ import {
 	get_prototype_of,
 	is_tracked_object,
 } from './utils.js';
-import { delegate, event } from './events.js';
-import {
-	get_attribute_event_name,
-	is_delegated,
-	is_event_attribute,
-} from '../../../utils/events.js';
+import { event } from './events.js';
+import { get_attribute_event_name, is_event_attribute } from '../../../utils/events.js';
 import { get } from './runtime.js';
 import { clsx } from 'clsx';
 import { normalize_css_property_name } from '../../../utils/normalize_css_property_name.js';
@@ -131,8 +127,9 @@ export function apply_styles(element, new_styles) {
  * @param {Element} element
  * @param {string} key
  * @param {any} value
+ * @param {Record<string, (() => void) | undefined>} remove_listeners
  */
-function set_attribute_helper(element, key, value) {
+function set_attribute_helper(element, key, value, remove_listeners) {
 	if (key === 'class') {
 		const is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
 		set_class(/** @type {HTMLElement} */ (element), value, undefined, is_html);
@@ -143,16 +140,11 @@ function set_attribute_helper(element, key, value) {
 		element.classList.add(value);
 	} else if (typeof key === 'string' && 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
-			/** @type {any} */ (element)['__' + event_name] = value;
-			delegate([event_name]);
-		} else {
-			// Use addEventListener for non-delegated events
-			event(event_name, element, value);
+		const event_name = get_attribute_event_name(key, value);
+		if (remove_listeners[key]) {
+			remove_listeners[key]();
 		}
+		remove_listeners[key] = event(event_name, element, value);
 	} else {
 		set_attribute(element, key, value);
 	}
@@ -257,22 +249,25 @@ export function set_selected(element, selected) {
 export function apply_element_spread(element, fn) {
 	/** @type {Record<string | symbol, any>} */
 	var prev = {};
-	/** @type {Record<symbol, Block>} */
+	/** @type {Record<symbol, Block | undefined>} */
 	var effects = {};
+	/** @type {Record<string | symbol, (() => void) | undefined>} */
+	var remove_listeners = {};
 
 	return () => {
 		var next = fn();
 
-		for (let symbol of get_own_property_symbols(effects)) {
-			if (!next[symbol]) {
+		for (const symbol of get_own_property_symbols(effects)) {
+			if (!next[symbol] && effects[symbol]) {
 				destroy_block(effects[symbol]);
+				effects[symbol] = undefined;
 			}
 		}
 
 		for (const symbol of get_own_property_symbols(next)) {
 			var ref_fn = next[symbol];
 
-			if (symbol.description === REF_PROP && (!prev || ref_fn !== prev[symbol])) {
+			if (symbol.description === REF_PROP && (!(symbol in prev) || ref_fn !== prev[symbol])) {
 				if (effects[symbol]) {
 					destroy_block(effects[symbol]);
 				}
@@ -282,7 +277,24 @@ export function apply_element_spread(element, fn) {
 			next[symbol] = ref_fn;
 		}
 
-		/** @type {Record<string | symbol, any>} */
+		for (let key in remove_listeners) {
+			// Remove event listeners that are no longer present
+			if (!(key in next) && remove_listeners[key]) {
+				remove_listeners[key]();
+				remove_listeners[key] = undefined;
+			}
+		}
+
+		for (const key in prev) {
+			if (!(key in next)) {
+				if (key === '#class') {
+					continue;
+				}
+				set_attribute_helper(element, key, null, remove_listeners);
+			}
+		}
+
+		/** @type {typeof prev} */
 		const current = {};
 		for (const key in next) {
 			if (key === 'children') continue;
@@ -293,13 +305,11 @@ export function apply_element_spread(element, fn) {
 			}
 			current[key] = value;
 
-			if (!(key in prev) || prev[key] !== value) {
-				prev[key] = value;
-			} else if (key !== '#class') {
+			if (key in prev && prev[key] === value && key !== '#class') {
 				continue;
 			}
 
-			set_attribute_helper(element, key, value);
+			set_attribute_helper(element, key, value, remove_listeners);
 		}
 		prev = current;
 	};

package/src/runtime/media-query.js

@@ -20,8 +20,8 @@ export function MediaQuery(query, fallback) {
 
 	let final_query =
 		parenthesis_regex.test(query) ||
-			// we need to use `some` here because technically this `window.matchMedia('random,screen')` still returns true
-			query.split(/[\s,]+/).some((keyword) => non_parenthesized_keywords.has(keyword.trim()))
+		// we need to use `some` here because technically this `window.matchMedia('random,screen')` still returns true
+		query.split(/[\s,]+/).some((keyword) => non_parenthesized_keywords.has(keyword.trim()))
 			? query
 			: `(${query})`;
 	const q = window.matchMedia(final_query);
@@ -29,11 +29,17 @@ export function MediaQuery(query, fallback) {
 
 	return new ReactiveValue(
 		() => get(matches),
-		() => on(q, 'change', () => {
-			// skip wrapping in untrack as createSubscriber already does it
-			if (q.matches !== get(matches)) {
-				set(matches, q.matches)
-			}
-		})
+		() =>
+			on(
+				q,
+				'change',
+				() => {
+					// skip wrapping in untrack as createSubscriber already does it
+					if (q.matches !== get(matches)) {
+						set(matches, q.matches);
+					}
+				},
+				{ delegated: false },
+			),
 	);
 }