ripple 0.2.86 → 0.2.87

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

@@ -1,11 +1,11 @@
 import { is_passive_event } from '../../../utils/events.js';
 import {
-  active_block,
-  active_reaction,
-  set_active_block,
-  set_active_reaction,
-  set_tracking,
-  tracking,
+	active_block,
+	active_reaction,
+	set_active_block,
+	set_active_reaction,
+	set_tracking,
+	tracking,
 } from './runtime.js';
 import { array_from, define_property, is_array } from './utils.js';
 
@@ -35,136 +35,136 @@ export function on(element, type, handler, options = {}) {
  * @returns {void}
  */
 export function handle_event_propagation(event) {
-  var handler_element = this;
-  var owner_document = /** @type {Node} */ (handler_element).ownerDocument;
-  var event_name = event.type;
-  var path = event.composedPath?.() || [];
-  var current_target = /** @type {null | Element} */ (path[0] || event.target);
-
-  // composedPath contains list of nodes the event has propagated through.
-  // We check __root to skip all nodes below it in case this is a
-  // parent of the __root node, which indicates that there's nested
-  // mounted apps. In this case we don't want to trigger events multiple times.
-  var path_idx = 0;
-
-  // @ts-expect-error is added below
-  var handled_at = event.__root;
-
-  if (handled_at) {
-    var at_idx = path.indexOf(handled_at);
-    if (
-      at_idx !== -1 &&
-      (handler_element === document || handler_element === /** @type {any} */ (window))
-    ) {
-      // This is the fallback document listener or a window listener, but the event was already handled
-      // -> ignore, but set handle_at to document/window so that we're resetting the event
-      // chain in case someone manually dispatches the same event object again.
-      // @ts-expect-error
-      event.__root = handler_element;
-      return;
-    }
-
-    // We're deliberately not skipping if the index is higher, because
-    // someone could create an event programmatically and emit it multiple times,
-    // in which case we want to handle the whole propagation chain properly each time.
-    // (this will only be a false negative if the event is dispatched multiple times and
-    // the fallback document listener isn't reached in between, but that's super rare)
-    var handler_idx = path.indexOf(handler_element);
-    if (handler_idx === -1) {
-      // handle_idx can theoretically be -1 (happened in some JSDOM testing scenarios with an event listener on the window object)
-      // so guard against that, too, and assume that everything was handled at this point.
-      return;
-    }
-
-    if (at_idx <= handler_idx) {
-      path_idx = at_idx;
-    }
-  }
-
-  current_target = /** @type {Element} */ (path[path_idx] || event.target);
-  // there can only be one delegated event per element, and we either already handled the current target,
-  // or this is the very first target in the chain which has a non-delegated listener, in which case it's safe
-  // to handle a possible delegated event on it later (through the root delegation listener for example).
-  if (current_target === handler_element) return;
-
-  // Proxy currentTarget to correct target
-  define_property(event, 'currentTarget', {
-    configurable: true,
-    get() {
-      return current_target || owner_document;
-    },
-  });
-
-  var previous_block = active_block;
-  var previous_reaction = active_reaction;
-  var previous_tracking = tracking;
-
-  set_active_block(null);
-  set_active_reaction(null);
-  set_tracking(false);
-
-  try {
-    /**
-     * @type {unknown}
-     */
-    var throw_error;
-    /**
-     * @type {unknown[]}
-     */
-    var other_errors = [];
-
-    while (current_target !== null) {
-      /** @type {null | Element} */
-      var parent_element =
-        current_target.assignedSlot ||
-        current_target.parentNode ||
-        /** @type {any} */ (current_target).host ||
-        null;
-
-      try {
-        // @ts-expect-error
-        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);
-          }
-        }
-      } catch (error) {
-        if (throw_error) {
-          other_errors.push(error);
-        } else {
-          throw_error = error;
-        }
-      }
-      if (event.cancelBubble || parent_element === handler_element || parent_element === null) {
-        break;
-      }
-      current_target = parent_element;
-    }
-
-    if (throw_error) {
-      for (let error of other_errors) {
-        // Throw the rest of the errors, one-by-one on a microtask
-        queueMicrotask(() => {
-          throw error;
-        });
-      }
-      throw throw_error;
-    }
-  } finally {
-    set_active_block(previous_block);
-    // @ts-expect-error is used above
-    event.__root = handler_element;
-    // @ts-ignore remove proxy on currentTarget
-    delete event.currentTarget;
-    set_active_block(previous_block);
-    set_active_reaction(previous_reaction);
-    set_tracking(previous_tracking);
-  }
+	var handler_element = this;
+	var owner_document = /** @type {Node} */ (handler_element).ownerDocument;
+	var event_name = event.type;
+	var path = event.composedPath?.() || [];
+	var current_target = /** @type {null | Element} */ (path[0] || event.target);
+
+	// composedPath contains list of nodes the event has propagated through.
+	// We check __root to skip all nodes below it in case this is a
+	// parent of the __root node, which indicates that there's nested
+	// mounted apps. In this case we don't want to trigger events multiple times.
+	var path_idx = 0;
+
+	// @ts-expect-error is added below
+	var handled_at = event.__root;
+
+	if (handled_at) {
+		var at_idx = path.indexOf(handled_at);
+		if (
+			at_idx !== -1 &&
+			(handler_element === document || handler_element === /** @type {any} */ (window))
+		) {
+			// This is the fallback document listener or a window listener, but the event was already handled
+			// -> ignore, but set handle_at to document/window so that we're resetting the event
+			// chain in case someone manually dispatches the same event object again.
+			// @ts-expect-error
+			event.__root = handler_element;
+			return;
+		}
+
+		// We're deliberately not skipping if the index is higher, because
+		// someone could create an event programmatically and emit it multiple times,
+		// in which case we want to handle the whole propagation chain properly each time.
+		// (this will only be a false negative if the event is dispatched multiple times and
+		// the fallback document listener isn't reached in between, but that's super rare)
+		var handler_idx = path.indexOf(handler_element);
+		if (handler_idx === -1) {
+			// handle_idx can theoretically be -1 (happened in some JSDOM testing scenarios with an event listener on the window object)
+			// so guard against that, too, and assume that everything was handled at this point.
+			return;
+		}
+
+		if (at_idx <= handler_idx) {
+			path_idx = at_idx;
+		}
+	}
+
+	current_target = /** @type {Element} */ (path[path_idx] || event.target);
+	// there can only be one delegated event per element, and we either already handled the current target,
+	// or this is the very first target in the chain which has a non-delegated listener, in which case it's safe
+	// to handle a possible delegated event on it later (through the root delegation listener for example).
+	if (current_target === handler_element) return;
+
+	// Proxy currentTarget to correct target
+	define_property(event, 'currentTarget', {
+		configurable: true,
+		get() {
+			return current_target || owner_document;
+		},
+	});
+
+	var previous_block = active_block;
+	var previous_reaction = active_reaction;
+	var previous_tracking = tracking;
+
+	set_active_block(null);
+	set_active_reaction(null);
+	set_tracking(false);
+
+	try {
+		/**
+		 * @type {unknown}
+		 */
+		var throw_error;
+		/**
+		 * @type {unknown[]}
+		 */
+		var other_errors = [];
+
+		while (current_target !== null) {
+			/** @type {null | Element} */
+			var parent_element =
+				current_target.assignedSlot ||
+				current_target.parentNode ||
+				/** @type {any} */ (current_target).host ||
+				null;
+
+			try {
+				// @ts-expect-error
+				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);
+					}
+				}
+			} catch (error) {
+				if (throw_error) {
+					other_errors.push(error);
+				} else {
+					throw_error = error;
+				}
+			}
+			if (event.cancelBubble || parent_element === handler_element || parent_element === null) {
+				break;
+			}
+			current_target = parent_element;
+		}
+
+		if (throw_error) {
+			for (let error of other_errors) {
+				// Throw the rest of the errors, one-by-one on a microtask
+				queueMicrotask(() => {
+					throw error;
+				});
+			}
+			throw throw_error;
+		}
+	} finally {
+		set_active_block(previous_block);
+		// @ts-expect-error is used above
+		event.__root = handler_element;
+		// @ts-ignore remove proxy on currentTarget
+		delete event.currentTarget;
+		set_active_block(previous_block);
+		set_active_reaction(previous_reaction);
+		set_tracking(previous_tracking);
+	}
 }
 
 /**
@@ -174,73 +174,103 @@ export function handle_event_propagation(event) {
  * @param {AddEventListenerOptions} [options]
  */
 function create_event(event_name, dom, handler, options = {}) {
-  function target_handler(/** @type {Event} */ event) {
-    var previous_block = active_block;
-    var previous_reaction = active_reaction;
-    var previous_tracking = tracking;
-
-    try {
-      set_active_block(null);
-      set_active_reaction(null);
-      set_tracking(false);
-
-      if (!options.capture) {
-        // Only call in the bubble phase, else delegated events would be called before the capturing events
-        handle_event_propagation.call(dom, event);
-      }
-      if (!event.cancelBubble) {
-        return handler?.call(this, event);
-      }
-    } finally {
-      set_active_block(previous_block);
-      set_active_reaction(previous_reaction);
-      set_tracking(previous_tracking);
-    }
-  }
-
-  dom.addEventListener(event_name, target_handler, options);
-
-  return target_handler;
+	/** @this {any} */
+	function target_handler(/** @type {Event} */ event) {
+		var previous_block = active_block;
+		var previous_reaction = active_reaction;
+		var previous_tracking = tracking;
+
+		try {
+			set_active_block(null);
+			set_active_reaction(null);
+			set_tracking(false);
+
+			if (!options.capture) {
+				// Only call in the bubble phase, else delegated events would be called before the capturing events
+				handle_event_propagation.call(dom, event);
+			}
+			if (!event.cancelBubble) {
+				return handler?.call(this, event);
+			}
+		} finally {
+			set_active_block(previous_block);
+			set_active_reaction(previous_reaction);
+			set_tracking(previous_tracking);
+		}
+	}
+
+	dom.addEventListener(event_name, target_handler, options);
+
+	return target_handler;
 }
 
+/**
+ * @param {string} event_name
+ * @param {Element} dom
+ * @param {EventListener} [handler]
+ * @param {boolean} [capture]
+ * @param {boolean} [passive]
+ * @returns {void}
+ */
 export function event(event_name, dom, handler, capture, passive) {
-  var options = { capture, passive };
-  create_event(event_name, dom, handler, options);
+	var options = { capture, passive };
+	create_event(event_name, dom, handler, options);
 }
 
+/**
+ * @param {Array<string>} events
+ * @returns {void}
+ */
 export function delegate(events) {
-  for (var i = 0; i < events.length; i++) {
-    all_registered_events.add(events[i]);
-  }
+	for (var i = 0; i < events.length; i++) {
+		all_registered_events.add(events[i]);
+	}
 
-  for (var fn of root_event_handles) {
-    fn(events);
-  }
+	for (var fn of root_event_handles) {
+		fn(events);
+	}
 }
 
+/** @param {Element} target */
 export function handle_root_events(target) {
-  var registered_events = new Set();
+	var registered_events = new Set();
+
+	/**
+	 * @typedef {Object} EventHandleOptions
+	 * @property {boolean} [passive]
+	 */
 
-  var event_handle = (events) => {
-    for (var i = 0; i < events.length; i++) {
-      var event_name = events[i];
+	/**
+	 * @typedef {(
+	 *   events: Array<string>
+	 * ) => void} EventHandle
+	 */
 
-      if (registered_events.has(event_name)) continue;
-      registered_events.add(event_name);
+	/** @type {EventHandle} */
+	var event_handle = (/** @type {Array<string>} */ events) => {
+		for (var i = 0; i < events.length; i++) {
+			var event_name = events[i];
 
-      var passive = is_passive_event(event_name);
+			if (registered_events.has(event_name)) continue;
+			registered_events.add(event_name);
 
-      target.addEventListener(event_name, handle_event_propagation, { passive });
-    }
-  };
+			/** @type {boolean} */
+			var passive = is_passive_event(event_name);
 
-  event_handle(array_from(all_registered_events));
-  root_event_handles.add(event_handle);
+			/** @type {EventHandleOptions} */
+			var options = { passive };
+
+			target.addEventListener(event_name, handle_event_propagation, options);
+		}
+	};
 
-  return () => {
-    for (var event_name of registered_events) {
-      target.removeEventListener(event_name, handle_event_propagation);
-    }
-    root_event_handles.delete(event_handle);
-  };
+	event_handle(array_from(all_registered_events));
+	root_event_handles.add(event_handle);
+
+	return () => {
+		for (var event_name of registered_events) {
+			target.removeEventListener(event_name, handle_event_propagation);
+		}
+		root_event_handles.delete(event_handle);
+	};
 }

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

@@ -1,3 +1,5 @@
+/** @import { Block } from '#client' */
+
 import { IS_CONTROLLED, IS_INDEXED } from '../../../constants.js';
 import { branch, destroy_block, destroy_block_children, render } from './blocks.js';
 import { FOR_BLOCK, TRACKED_ARRAY } from './constants.js';
@@ -5,6 +7,15 @@ import { create_text, next_sibling } from './operations.js';
 import { active_block, set, tracked, untrack } from './runtime.js';
 import { array_from, is_array } from './utils.js';
 
+/**
+ * @template V
+ * @param {Node} anchor
+ * @param {V} value
+ * @param {number} index
+ * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {boolean} is_indexed
+ * @returns {Block}
+ */
 function create_item(anchor, value, index, render_fn, is_indexed) {
   var b = branch(() => {
     var tracked_index;
@@ -31,6 +42,11 @@ function create_item(anchor, value, index, render_fn, is_indexed) {
   return b;
 }
 
+/**
+ * @param {Block} block
+ * @param {Element} anchor
+ * @returns {void}
+ */
 function move(block, anchor) {
   var node = block.s.start;
   var end = block.s.end;
@@ -40,7 +56,7 @@ function move(block, anchor) {
     return;
   }
   while (node !== null) {
-    var next_node = /** @type {TemplateNode} */ (next_sibling(node));
+    var next_node = /** @type {Node} */ (next_sibling(node));
     anchor.before(node);
     node = next_node;
     if (node === end) {
@@ -50,6 +66,11 @@ function move(block, anchor) {
   }
 }
 
+/**
+ * @template V
+ * @param {V[] | Iterable<V>} collection
+ * @returns {V[]}
+ */
 function collection_to_array(collection) {
   var array = is_array(collection) ? collection : collection == null ? [] : array_from(collection);
 
@@ -62,10 +83,18 @@ function collection_to_array(collection) {
   return array;
 }
 
+/**
+ * @template V
+ * @param {Element} node
+ * @param {() => V[] | Iterable<V>} get_collection
+ * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {number} flags
+ * @returns {void}
+ */
 export function for_block(node, get_collection, render_fn, flags) {
   var is_controlled = (flags & IS_CONTROLLED) !== 0;
   var is_indexed = (flags & IS_INDEXED) !== 0;
-  var anchor = node;
+  var anchor = /** @type {Element | Text} */ (node);
 
   if (is_controlled) {
     anchor = node.appendChild(create_text());
@@ -82,9 +111,16 @@ export function for_block(node, get_collection, render_fn, flags) {
   }, FOR_BLOCK);
 }
 
+/**
+ * @template V
+ * @param {Element | Text} anchor
+ * @param {Block} block
+ * @param {V[]} array
+ * @returns {void}
+ */
 function reconcile_fast_clear(anchor, block, array) {
   var state = block.s;
-  var parent_node = anchor.parentNode;
+  var parent_node = /** @type {Element} */ (anchor.parentNode);
   parent_node.textContent = '';
   destroy_block_children(block);
   parent_node.append(anchor);
@@ -92,13 +128,48 @@ function reconcile_fast_clear(anchor, block, array) {
   state.blocks = [];
 }
 
+/**
+ * @param {Block} block
+ * @param {number} index
+ * @returns {void}
+ */
 function update_index(block, index) {
   set(block.s.i, index, block);
 }
 
+/**
+ * @template V
+ * @param {Element | Text} anchor
+ * @param {Block} block
+ * @param {V[]} b
+ * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {boolean} is_controlled
+ * @param {boolean} is_indexed
+ * @returns {void}
+ */
 function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
   var state = block.s;
 
+  // Variables used in conditional branches - declare with initial values
+  /** @type {number} */
+  var a_start = 0;
+  /** @type {number} */
+  var b_start = 0;
+  /** @type {number} */
+  var a_left = 0;
+  /** @type {number} */
+  var b_left = 0;
+  /** @type {Int32Array} */
+  var sources = new Int32Array(0);
+  /** @type {boolean} */
+  var moved = false;
+  /** @type {number} */
+  var pos = 0;
+  /** @type {number} */
+  var patched = 0;
+  /** @type {number} */
+  var i = 0;
+
   if (state === null) {
     state = block.s = {
       array: [],
@@ -187,15 +258,15 @@ function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
       destroy_block(a_blocks[j++]);
     }
   } else {
-    var a_start = j;
-    var b_start = j;
-    var a_left = a_end - j + 1;
-    var b_left = b_end - j + 1;
-    var sources = new Int32Array(b_left + 1);
-    var moved = false;
-    var pos = 0;
-    var patched = 0;
-    var i = 0;
+    a_start = j;
+    b_start = j;
+    a_left = a_end - j + 1;
+    b_left = b_end - j + 1;
+    sources = new Int32Array(b_left + 1);
+    moved = false;
+    pos = 0;
+    patched = 0;
+    i = 0;
 
     fast_path_removal = is_controlled && a_left === a_length;
 
@@ -321,10 +392,16 @@ function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
   state.blocks = b_blocks;
 }
 
+/** @type {Int32Array} */
 let result;
+/** @type {Int32Array} */
 let p;
 let maxLen = 0;
 // https://en.wikipedia.org/wiki/Longest_increasing_subsequence
+/**
+ * @param {Int32Array} arr
+ * @returns {Int32Array}
+ */
 function lis_algorithm(arr) {
   let arrI = 0;
   let i = 0;
@@ -386,6 +463,13 @@ function lis_algorithm(arr) {
   return seq;
 }
 
+/**
+ * @template V
+ * @template K
+ * @param {V[] | Iterable<V>} collection
+ * @param {(item: V) => K} key_fn
+ * @returns {V[]}
+ */
 export function keyed(collection, key_fn) {
   var block = active_block;
   if (block === null || (block.f & FOR_BLOCK) === 0) {
@@ -404,7 +488,7 @@ export function keyed(collection, key_fn) {
   var state = block.s;
 
   if (state === null) {
-    return collection;
+    return b_array;
   }
 
   var a_array = state.array;

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

@@ -1,17 +1,28 @@
+/** @import { Block } from '#client' */
+
 import { branch, destroy_block, render } from './blocks.js';
 import { IF_BLOCK, UNINITIALIZED } from './constants.js';
 
+/**
+ * @param {Node} node
+ * @param {(set_branch: (fn: (anchor: Node) => void, flag?: boolean) => void) => void} fn
+ * @returns {void}
+ */
 export function if_block(node, fn) {
   var anchor = node;
   var has_branch = false;
+  /** @type {any} */
   var condition = UNINITIALIZED;
+  /** @type {Block | null} */
   var b = null;
 
+  /** @type {(fn: (anchor: Node) => void, flag?: boolean) => void} */
   var set_branch = (fn, flag = true) => {
     has_branch = true;
     update_branch(flag, fn);
   };
 
+  /** @type {(new_condition: any, fn: ((anchor: Node) => void) | null) => void} */
   var update_branch = (new_condition, fn) => {
     if (condition === (condition = new_condition)) return;