ripple 0.1.1 → 0.2.0

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

@@ -0,0 +1,223 @@
+import { is_passive_event } from '../../../compiler/utils';
+import {
+	active_block,
+	active_reaction,
+	set_active_block,
+	set_active_reaction,
+	set_tracking,
+	tracking
+} from './runtime';
+import { array_from, define_property, is_array } from './utils';
+
+/** @type {Set<string>} */
+var all_registered_events = new Set();
+
+/** @type {Set<(events: Array<string>) => void>} */
+var root_event_handles = new Set();
+
+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);
+	}
+}
+
+function create_event(event_name, dom, handler, options = {}) {
+	var block = active_block;
+
+	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;
+}
+
+export function event(event_name, dom, handler, capture, passive) {
+	var options = { capture, passive };
+	create_event(event_name, dom, handler, options);
+}
+
+export function delegate(events) {
+	for (var i = 0; i < events.length; i++) {
+		all_registered_events.add(events[i]);
+	}
+
+	for (var fn of root_event_handles) {
+		fn(events);
+	}
+}
+
+export function handle_root_events(target) {
+	var registered_events = new Set();
+
+	var event_handle = (events) => {
+		for (var i = 0; i < events.length; i++) {
+			var event_name = events[i];
+
+			if (registered_events.has(event_name)) continue;
+			registered_events.add(event_name);
+
+			var passive = is_passive_event(event_name);
+
+			target.addEventListener(event_name, handle_event_propagation, { passive });
+		}
+	};
+
+	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

@@ -0,0 +1,388 @@
+import { IS_CONTROLLED } from '../../../constants';
+import { get_all_elements } from '../../array';
+import { branch, destroy_block, destroy_block_children, render } from './blocks';
+import { FOR_BLOCK, TRACKED_OBJECT } from './constants';
+import { create_text } from './operations';
+import { active_block, untrack } from './runtime';
+import { array_from, is_array } from './utils';
+
+function create_item(anchor, value, render_fn) {
+	var b = branch(() => {
+		render_fn(anchor, value);
+	});
+	return b;
+}
+
+function move(block, anchor) {
+	var node = block.s.start;
+	var end = block.s.end;
+
+	if (node === end) {
+		anchor.before(node);
+		return;
+	}
+	while (node !== end) {
+		var next_node = /** @type {TemplateNode} */ (get_next_sibling(node));
+		anchor.before(node);
+		node = next_node;
+	}
+}
+
+export function for_block(node, get_collection, render_fn, flags) {
+	var is_controlled = (flags & IS_CONTROLLED) !== 0;
+	var anchor = node;
+
+	if (is_controlled) {
+		anchor = node.appendChild(create_text());
+	}
+
+	render(() => {
+		var block = active_block;
+		var collection = get_collection();
+		var array = is_array(collection)
+			? collection
+			: collection == null
+			? []
+			: array_from(collection);
+
+		if (array[TRACKED_OBJECT] !== undefined) {
+			// TODO we previously assigned array to this, but why?
+			get_all_elements(collection);
+			collection.$length;
+		}
+
+		untrack(() => reconcile(anchor, block, array, render_fn, is_controlled));
+	}, FOR_BLOCK);
+}
+
+function reconcile_fast_clear(anchor, block, array) {
+	var state = block.s;
+	var parent_node = anchor.parentNode;
+	parent_node.textContent = '';
+	destroy_block_children(block);
+	parent_node.append(anchor);
+	state.array = array;
+	state.blocks = [];
+}
+
+function reconcile(anchor, block, b, render_fn, is_controlled) {
+	var state = block.s;
+
+	if (state === null) {
+		state = block.s = {
+			array: [],
+			blocks: []
+		};
+	}
+
+	var a = state.array;
+	var a_length = a.length;
+	var b_length = b.length;
+	var j = 0;
+
+	// Fast-path for clear
+	if (is_controlled && b_length === 0) {
+		if (a_length > 0) {
+			reconcile_fast_clear(anchor, block, b);
+		}
+		return;
+	}
+	var b_blocks = Array(b_length);
+
+	// Fast-path for create
+	if (a_length === 0) {
+		for (; j < b_length; j++) {
+			b_blocks[j] = create_item(anchor, b[j], render_fn);
+		}
+		state.array = b;
+		state.blocks = b_blocks;
+		return;
+	}
+
+	var a_blocks = state.blocks;
+	var a_val = a[j];
+	var b_val = b[j];
+	var a_end = a_length - 1;
+	var b_end = b_length - 1;
+
+	outer: {
+		while (a_val === b_val) {
+			a[j] = b_val;
+			b_blocks[j] = a_blocks[j];
+			++j;
+			if (j > a_end || j > b_end) {
+				break outer;
+			}
+			a_val = a[j];
+			b_val = b[j];
+		}
+
+		a_val = a[a_end];
+		b_val = b[b_end];
+
+		while (a_val === b_val) {
+			a[a_end] = b_val;
+			b_blocks[b_end] = a_blocks[a_end];
+			a_end--;
+			b_end--;
+			if (j > a_end || j > b_end) {
+				break outer;
+			}
+			a_val = a[a_end];
+			b_val = b[b_end];
+		}
+	}
+
+	if (j > a_end) {
+		if (j <= b_end) {
+			while (j <= b_end) {
+				b_val = b[j];
+				var target = j >= a_length ? anchor : a_blocks[j].s.start;
+				b_blocks[j++] = create_item(target, b_val, render_fn);
+			}
+		}
+	} else if (j > b_end) {
+		while (j <= a_end) {
+			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 fast_path_removal = is_controlled && a_left === a_length;
+		var sources = new Int32Array(b_left + 1);
+		var moved = false;
+		var pos = 0;
+		var patched = 0;
+		var i = 0;
+
+		// When sizes are small, just loop them through
+		if (b_length < 4 || (a_left | b_left) < 32) {
+			for (i = a_start; i <= a_end; ++i) {
+				a_val = a[i];
+				if (patched < b_left) {
+					for (j = b_start; j <= b_end; j++) {
+						b_val = b[j];
+						if (a_val === b_val) {
+							sources[j - b_start] = i + 1;
+							if (fast_path_removal) {
+								fast_path_removal = false;
+								// while (a_start < i) {
+								//     debugger
+								//     destroy_block(a_blocks[a_start++]);
+								// }
+							}
+							if (pos > j) {
+								moved = true;
+							} else {
+								pos = j;
+							}
+							b_blocks[j] = a_blocks[i];
+							++patched;
+							break;
+						}
+					}
+					if (!fast_path_removal && j > b_end) {
+						destroy_block(a_blocks[i]);
+					}
+				} else if (!fast_path_removal) {
+					destroy_block(a_blocks[i]);
+				}
+			}
+		} else {
+			var map = new Map();
+
+			for (i = b_start; i <= b_end; ++i) {
+				map.set(b[i], i);
+			}
+
+			for (i = a_start; i <= a_end; ++i) {
+				a_val = a[i];
+
+				if (patched < b_left) {
+					j = map.get(a_val);
+
+					if (j !== undefined) {
+						if (fast_path_removal) {
+							fast_path_removal = false;
+							// while (i > aStart) {
+							//     remove(a[aStart++], dom, animations);
+							// }
+						}
+						sources[j - b_start] = i + 1;
+						if (pos > j) {
+							moved = true;
+						} else {
+							pos = j;
+						}
+						b_val = b[j];
+						b_blocks[j] = a_blocks[i];
+						++patched;
+					} else if (!fast_path_removal) {
+						destroy_block(a_blocks[i]);
+					}
+				} else if (!fast_path_removal) {
+					destroy_block(a_blocks[i]);
+				}
+			}
+		}
+	}
+
+	if (fast_path_removal) {
+		reconcile_fast_clear(anchor, block, []);
+		reconcile(anchor, block, b, render_fn, is_controlled);
+		return;
+	} else if (moved) {
+		var next_pos = 0;
+		var seq = lis_algorithm(sources);
+		j = seq.length - 1;
+
+		for (i = b_left - 1; i >= 0; i--) {
+			if (sources[i] === 0) {
+				pos = i + b_start;
+				b_val = b[pos];
+				next_pos = pos + 1;
+
+				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				b_blocks[pos] = create_item(target, b_val, render_fn);
+			} else if (j < 0 || i !== seq[j]) {
+				pos = i + b_start;
+				b_val = b[pos];
+				next_pos = pos + 1;
+
+				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				move(b_blocks[pos], target);
+			} else {
+				j--;
+			}
+		}
+	} else if (patched !== b_left) {
+		for (i = b_left - 1; i >= 0; i--) {
+			if (sources[i] === 0) {
+				pos = i + b_start;
+				b_val = b[pos];
+				next_pos = pos + 1;
+
+				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
+				b_blocks[pos] = create_item(target, b_val, render_fn);
+			}
+		}
+	}
+
+	state.array = b;
+	state.blocks = b_blocks;
+}
+
+let result;
+let p;
+let maxLen = 0;
+// https://en.wikipedia.org/wiki/Longest_increasing_subsequence
+function lis_algorithm(arr) {
+	let arrI = 0;
+	let i = 0;
+	let j = 0;
+	let k = 0;
+	let u = 0;
+	let v = 0;
+	let c = 0;
+	var len = arr.length;
+
+	if (len > maxLen) {
+		maxLen = len;
+		result = new Int32Array(len);
+		p = new Int32Array(len);
+	}
+
+	for (; i < len; ++i) {
+		arrI = arr[i];
+
+		if (arrI !== 0) {
+			j = result[k];
+			if (arr[j] < arrI) {
+				p[i] = j;
+				result[++k] = i;
+				continue;
+			}
+
+			u = 0;
+			v = k;
+
+			while (u < v) {
+				c = (u + v) >> 1;
+				if (arr[result[c]] < arrI) {
+					u = c + 1;
+				} else {
+					v = c;
+				}
+			}
+
+			if (arrI < arr[result[u]]) {
+				if (u > 0) {
+					p[i] = result[u - 1];
+				}
+				result[u] = i;
+			}
+		}
+	}
+
+	u = k + 1;
+	var seq = new Int32Array(u);
+	v = result[u - 1];
+
+	while (u-- > 0) {
+		seq[u] = v;
+		v = p[v];
+		result[u] = 0;
+	}
+
+	return seq;
+}
+
+export function keyed(collection, key_fn) {
+	var block = active_block;
+	if (block === null || (block.f & FOR_BLOCK) === 0) {
+		throw new Error('keyed() must be used inside a for block');
+	}
+	var state = block.s;
+
+	if (state === null) {
+		return collection;
+	}
+
+	var a_array = state.array;
+	var a_keys = a_array.map(key_fn);
+	var a = new Map();
+
+	for (let i = 0; i < a_keys.length; i++) {
+		a.set(a_keys[i], i);
+	}
+
+	if (a.size !== a_keys.length) {
+		throw new Error('Duplicate keys are not allowed');
+	}
+
+	var b_array = is_array(collection)
+		? collection
+		: collection == null
+		? []
+		: array_from(collection);
+	var b_keys = b_array.map(key_fn);
+
+	// We only need to do this in DEV
+	var b = new Set(b_keys);
+	if (b.size !== b_keys.length) {
+		throw new Error('Duplicate keys are not allowed');
+	}
+
+	for (let i = 0; i < b_keys.length; i++) {
+		var b_val = b_keys[i];
+		var index = a.get(b_val);
+
+		if (index !== undefined) {
+			b_array[i] = a_array[index];
+		}
+	}
+
+	return b_array;
+}

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

@@ -0,0 +1,35 @@
+import { branch, destroy_block, render } from './blocks';
+import { IF_BLOCK, UNINITIALIZED } from './constants';
+
+export function if_block(node, fn) {
+	var anchor = node;
+	var has_branch = false;
+	var condition = UNINITIALIZED;
+	var b = null;
+
+	var set_branch = (fn, flag = true) => {
+		has_branch = true;
+		update_branch(flag, fn);
+	};
+
+	var update_branch = (new_condition, fn) => {
+		if (condition === (condition = new_condition)) return;
+
+		if (b !== null) {
+			destroy_block(b);
+			b = null;
+		}
+
+		if (fn !== null) {
+			b = branch(() => fn(anchor));
+		}
+	};
+
+	render(() => {
+		has_branch = false;
+		fn(set_branch);
+		if (!has_branch) {
+			update_branch(null, null);
+		}
+	}, IF_BLOCK);
+}

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

@@ -0,0 +1,53 @@
+export { first_child as child, child_frag, next_sibling as sibling } from './operations.js';
+
+export {
+	set_text,
+	set_class,
+	set_attribute,
+	set_value,
+	set_checked,
+	set_selected,
+	set_ref
+} from './render.js';
+
+export { render, async } from './blocks.js';
+
+export { event, delegate } from './events.js';
+
+export {
+	active_block,
+	scope,
+	with_scope,
+	get_tracked,
+	get_computed,
+	set,
+	computed,
+	async_computed,
+	tracked,
+	tracked_object,
+	computed_property,
+	get_property,
+	set_property,
+	update,
+	update_pre,
+	update_property,
+	update_pre_property,
+	object_values,
+	object_entries,
+	object_keys,
+	spread_object,
+	structured_clone,
+	push_component,
+	pop_component,
+	untrack
+} from './runtime.js';
+
+export { for_block as for } from './for.js';
+
+export { if_block as if } from './if.js';
+
+export { try_block as try, resume_context, aborted } from './try.js';
+
+export { template, append } from './template.js';
+
+