@torpor/view 0.3.0 → 0.3.1

package/dist/index.cjs

@@ -0,0 +1,906 @@
+const require_formatText = require('./formatText-DufG5l83.cjs');
+
+//#region src/render/$mount.ts
+/**
+* Runs and re-runs a function on component mount
+*
+* @param fn The function to run, which may return a cleanup function
+*/
+function $mount(fn) {
+	require_formatText.context_default.mountEffects.push(fn);
+}
+
+//#endregion
+//#region src/render/$run.ts
+/**
+* Runs and re-runs a function that depends on a watched object
+*
+* @param fn The function to run, which may return a cleanup function.
+*/
+function $run(fn, name) {
+	let effect = {
+		type: require_formatText.EFFECT_TYPE,
+		run: fn,
+		cleanup: void 0,
+		firstSource: null,
+		nextEffect: null,
+		extent: 0,
+		nextEffectToRun: null,
+		didError: false,
+		name
+	};
+	require_formatText.runEffect(effect);
+	return effect;
+}
+
+//#endregion
+//#region src/watch/symbols.ts
+const proxyDataSymbol = Symbol("_proxy_data");
+const proxyHandledSymbol = Symbol("_proxy_handled");
+
+//#endregion
+//#region src/render/$unwrap.ts
+/**
+* Returns the target object of a proxy
+*
+* @param object The proxy object
+*/
+function $unwrap(object) {
+	return object !== void 0 && object !== null && object[proxyDataSymbol] !== void 0 ? object[proxyDataSymbol].target ?? object : object;
+}
+
+//#endregion
+//#region src/watch/trackProxyEffect.ts
+function trackProxyEffect(data, key) {
+	let signal = data.signals.get(key);
+	if (signal === void 0) {
+		signal = {
+			type: require_formatText.SIGNAL_TYPE,
+			firstTarget: null,
+			nextSignalToUpdate: null
+		};
+		data.signals.set(key, signal);
+	}
+	require_formatText.trackEffect(signal);
+}
+
+//#endregion
+//#region src/watch/updateSignal.ts
+let lastEffect;
+/**
+* When a signal is changed, we need to
+* - Set the signal's subscriptions to recalc
+* - Set any dependent computed values to recalc
+* - Gather dependent effects that will need to be re-run
+*/
+function updateSignal(proxy, key) {
+	let signal = proxy.signals.get(key);
+	if (signal !== void 0 && signal.firstTarget !== null) {
+		require_formatText.batchStart();
+		try {
+			if (require_formatText.context_default.firstSignalToUpdate === null) require_formatText.context_default.firstSignalToUpdate = signal;
+			else if (signal.nextSignalToUpdate === null) {
+				let lastSignal = require_formatText.context_default.firstSignalToUpdate;
+				while (lastSignal.nextSignalToUpdate !== null) lastSignal = lastSignal.nextSignalToUpdate;
+				lastSignal.nextSignalToUpdate = signal;
+			}
+			lastEffect = require_formatText.context_default.firstEffectToRun;
+			if (lastEffect !== null) while (lastEffect.nextEffectToRun !== null) lastEffect = lastEffect.nextEffectToRun;
+			let targetSub = signal.firstTarget;
+			let computed;
+			outer: while (true) {
+				targetSub.active = false;
+				targetSub.recalc = true;
+				const target = targetSub.target;
+				if (target.type === require_formatText.EFFECT_TYPE) {
+					if (lastEffect === null) {
+						require_formatText.context_default.firstEffectToRun = target;
+						lastEffect = target;
+					} else if (target.nextEffectToRun === null && lastEffect !== target) {
+						lastEffect.nextEffectToRun = target;
+						lastEffect = target;
+					}
+				} else if (!target.recalc) {
+					target.recalc = true;
+					if (target.firstTarget !== null) {
+						computed = target;
+						computed.rollback = targetSub;
+						targetSub = target.firstTarget;
+						continue;
+					}
+				}
+				while (targetSub.nextTarget === null && computed !== void 0) {
+					targetSub = computed.rollback;
+					if (targetSub.source.type !== require_formatText.COMPUTED_TYPE) {
+						computed = void 0;
+						continue outer;
+					}
+					computed = targetSub.source;
+				}
+				if (targetSub.nextTarget === null) break;
+				targetSub = targetSub.nextTarget;
+			}
+		} finally {
+			require_formatText.batchEnd();
+		}
+	}
+}
+
+//#endregion
+//#region src/watch/proxyGet.ts
+function proxyGet(target, key, receiver) {
+	let data = target[proxyDataSymbol];
+	if (key === proxyDataSymbol) return data;
+	let signal = data.signals.get(key);
+	if (signal === void 0) {
+		const propDescriptor = Object.getOwnPropertyDescriptor(target, key);
+		if (propDescriptor !== void 0) {
+			if (propDescriptor.writable) {
+				if (data.shallow !== true) {
+					const value = target[key];
+					if (value !== void 0 && value !== null && typeof value === "object" && value[proxyDataSymbol] === void 0 && value.then === void 0) target[key] = $watch(value);
+				}
+				trackProxyEffect(data, key);
+			} else if (propDescriptor.get) {
+				const oldRegisterComputed = require_formatText.context_default.registerComputed;
+				try {
+					require_formatText.context_default.registerComputed = (computed) => {
+						data.signals.set(key, computed);
+					};
+					return Reflect.get(target, key, receiver);
+				} finally {
+					require_formatText.context_default.registerComputed = oldRegisterComputed;
+				}
+			}
+		} else if (data.isArray) {
+			if (arrayWrapper[key] !== void 0) return arrayWrapper[key](data, target, key);
+		}
+	} else if (signal.type === require_formatText.SIGNAL_TYPE) trackProxyEffect(data, key);
+	else if (signal.type === require_formatText.COMPUTED_TYPE) {
+		if (signal.running) throw new Error("Cycle detected");
+		else if (signal.recalc) require_formatText.checkComputed(signal);
+		else if (signal.didError) throw signal.value;
+		else require_formatText.trackEffect(signal);
+		return signal.value;
+	}
+	return Reflect.get(target, key, receiver);
+}
+const arrayWrapper = {
+	[Symbol.iterator]: function(data, target, key) {
+		trackProxyEffect(data, "length");
+		require_formatText.context_default.activeTarget = null;
+		return target[key];
+	},
+	pop: arrayHandle,
+	push: arrayHandle,
+	reverse: arrayHandle,
+	shift: arrayHandle,
+	sort: arrayHandle,
+	splice: arrayHandle,
+	unshift: arrayHandle
+};
+function arrayHandle(data, target, key) {
+	return function(...args) {
+		const result = target[key].apply(target, args);
+		updateSignal(data, "length");
+		return result;
+	};
+}
+
+//#endregion
+//#region src/watch/proxySet.ts
+function proxySet(target, key, value, receiver) {
+	const oldValue = target[key];
+	if (value !== oldValue) {
+		if (require_formatText.context_default.batchOperation > 100) throw new Error("Cycle detected");
+		let data = target[proxyDataSymbol];
+		if (oldValue && oldValue[proxyDataSymbol] !== void 0) value = $watch(value, { shallow: oldValue[proxyDataSymbol].shallow });
+		Reflect.set(target, key, value, receiver);
+		updateSignal(data, key);
+		if (data.isArray && !isNaN(+String(key))) updateSignal(data, "length");
+	}
+	return true;
+}
+
+//#endregion
+//#region src/render/$watch.ts
+/**
+* Watches an object and runs effects when its properties are changed
+*
+* @param object The object to watch
+*/
+function $watch(object, options) {
+	if (object === void 0 || object === null || object[proxyDataSymbol] !== void 0) return object;
+	object[proxyDataSymbol] = {
+		target: object,
+		isArray: Array.isArray(object),
+		shallow: options?.shallow === true,
+		signals: /* @__PURE__ */ new Map()
+	};
+	const handler = {
+		get: proxyGet,
+		set: proxySet
+	};
+	return new Proxy(object, handler);
+}
+
+//#endregion
+//#region src/render/addAnimation.ts
+function addAnimation(el, entry, exit) {
+	require_formatText.context_default.stashedAnimations.push({
+		range: require_formatText.context_default.activeRange,
+		el,
+		in: entry,
+		out: exit
+	});
+}
+
+//#endregion
+//#region src/render/addEvent.ts
+function addEvent(el, type, listener) {
+	require_formatText.context_default.stashedEvents.push({
+		range: require_formatText.context_default.activeRange,
+		el,
+		type,
+		listener
+	});
+}
+
+//#endregion
+//#region src/motion/animate.ts
+/**
+* Adds an animation for an element
+* @param el The element to animate
+* @param enter Whether the animation is being run on enter
+* @param keyframes The Web Animation API keyframes
+* @param options The Web Animmation API options
+*/
+async function animate(el, enter, keyframes, options) {
+	let animationOptions = Object.assign({
+		direction: enter ? "normal" : "reverse",
+		duration: 300,
+		easing: "ease-in-out",
+		fill: "forwards"
+	}, options);
+	const animation = el.animate(keyframes, animationOptions);
+	setTimeout(() => {
+		animation.timeline = el.ownerDocument.timeline;
+	}, 1);
+	let activeRange = require_formatText.context_default.activeRange;
+	if (activeRange) {
+		activeRange.animations ??= /* @__PURE__ */ new Set();
+		activeRange.animations.add(animation);
+		await animation.finished;
+		activeRange.animations.delete(animation);
+	}
+}
+
+//#endregion
+//#region src/render/isFragmentNode.ts
+function isFragmentNode(node) {
+	return node.nodeType === 11;
+}
+
+//#endregion
+//#region src/render/addFragment.ts
+function addFragment(fragment, parent, before, endNode) {
+	const range = require_formatText.context_default.activeRange;
+	const hydrationNode = require_formatText.context_default.hydrationNode;
+	if (hydrationNode !== null) range.endNode = endNode ?? hydrationNode;
+	else {
+		range.startNode = fragment.firstChild;
+		range.endNode = fragment.lastChild;
+	}
+	parent = before?.parentNode ?? parent;
+	if (hydrationNode === null) parent.insertBefore(fragment, before);
+	if (!isFragmentNode(parent)) {
+		if (hydrationNode === null) {
+			for (let effect of require_formatText.context_default.mountEffects) $run(effect);
+			require_formatText.context_default.mountEffects.length = 0;
+		}
+		for (let event of require_formatText.context_default.stashedEvents) {
+			require_formatText.context_default.activeRange = event.range;
+			$run(function addFragmentEvent() {
+				event.el.addEventListener(event.type, event.listener);
+				return () => {
+					event.el.removeEventListener(event.type, event.listener);
+				};
+			});
+		}
+		require_formatText.context_default.stashedEvents.length = 0;
+		for (let animation of require_formatText.context_default.stashedAnimations) {
+			require_formatText.context_default.activeRange = animation.range;
+			$run(function addFragmentAnimation() {
+				if (animation.in !== void 0) animate(animation.el, true, animation.in.keyframes, animation.in.options);
+				if (animation.out !== void 0) return () => {
+					animate(animation.el, false, animation.out.keyframes, animation.out.options);
+				};
+			});
+		}
+		require_formatText.context_default.stashedAnimations.length = 0;
+		require_formatText.context_default.activeRange = range;
+	}
+}
+
+//#endregion
+//#region src/render/applyProps.ts
+function applyProps(el, props, propNamesUsed) {
+	if (props !== void 0) {
+		for (let [name, value] of Object.entries(props)) if (!propNamesUsed.includes(name)) if (name.startsWith("on")) {
+			const eventName = name.substring(2);
+			el.addEventListener(eventName, value);
+		} else $run(function setAttribute$1() {
+			el.setAttribute(name, value);
+		});
+	}
+}
+
+//#endregion
+//#region src/render/clearRange.ts
+function clearRange(range) {
+	let animations = range.animations !== null ? Array.from(range.animations) : void 0;
+	let childRange = range.nextRange;
+	while (childRange !== null && childRange.depth > range.depth) {
+		if (childRange.animations !== null) {
+			animations ??= [];
+			animations.push(...childRange.animations);
+		}
+		releaseRange(childRange);
+		childRange.depth = -2;
+		childRange = childRange.nextRange;
+	}
+	range.nextRange = childRange;
+	if (range.previousRange !== null) range.previousRange.nextRange = range.nextRange;
+	if (range.nextRange !== null) range.nextRange.previousRange = range.previousRange;
+	if (animations !== void 0) Promise.all(animations.map((a) => a.finished)).then(() => clearNodes(range));
+	else clearNodes(range);
+}
+function clearNodes(range) {
+	if (range.startNode !== null && range.endNode !== null) {
+		let currentNode = range.endNode;
+		while (currentNode !== range.startNode) {
+			let previousNode = currentNode.previousSibling;
+			currentNode.remove();
+			currentNode = previousNode;
+		}
+		currentNode.remove();
+	}
+	releaseRange(range);
+}
+function releaseRange(range) {
+	range.startNode = null;
+	range.endNode = null;
+	range.previousRange = null;
+	range.nextRange = null;
+	range.animations = null;
+}
+
+//#endregion
+//#region src/render/clearLayoutSlot.ts
+function clearLayoutSlot(range) {
+	clearRange(range);
+}
+
+//#endregion
+//#region src/render/newRange.ts
+function newRange(name) {
+	return {
+		startNode: null,
+		endNode: null,
+		previousRange: null,
+		nextRange: null,
+		depth: -1,
+		animations: null,
+		name
+	};
+}
+
+//#endregion
+//#region src/render/popRange.ts
+function popRange(oldRange) {
+	require_formatText.context_default.activeRange = oldRange;
+}
+
+//#endregion
+//#region src/render/pushRange.ts
+function pushRange(range, toParent = false) {
+	const activeRange = require_formatText.context_default.activeRange;
+	if (toParent) {
+		const previousRange = require_formatText.context_default.previousRange;
+		range.previousRange = previousRange;
+		const nextRange = previousRange.nextRange;
+		previousRange.nextRange = range;
+		range.nextRange = nextRange;
+		range.depth = activeRange.depth + 1;
+	}
+	require_formatText.context_default.activeRange = range;
+	require_formatText.context_default.previousRange = range;
+	return activeRange;
+}
+
+//#endregion
+//#region src/render/fillLayoutSlot.ts
+function fillLayoutSlot(component, slot, parent, anchor, $props, $context) {
+	const range = newRange();
+	const oldRange = pushRange(range);
+	component(parent, anchor, $props, $context, { _: slot });
+	popRange(oldRange);
+	return range;
+}
+
+//#endregion
+//#region src/render/getFragment.ts
+function getFragment(document, array, index, html, ns) {
+	if (array[index] === void 0) if (ns === true) {
+		const template = document.createElementNS("http://www.w3.org/2000/svg", "template");
+		template.innerHTML = html;
+		const fragment = new DocumentFragment();
+		fragment.append(...template.childNodes);
+		array[index] = fragment;
+	} else {
+		const template = document.createElement("template");
+		template.innerHTML = html;
+		array[index] = template.content;
+	}
+	return array[index].cloneNode(true);
+}
+
+//#endregion
+//#region src/render/hydrate.ts
+/**
+* Hydrates a component into an existing DOM tree
+* @param parent The parent node
+* @param component The component to mount
+* @param props An object containing component props
+*/
+function hydrate(parent, component, props, slots) {
+	require_formatText.context_default.hydrationNode = parent.firstChild;
+	require_formatText.context_default.rootRange = newRange();
+	require_formatText.context_default.previousRange = require_formatText.context_default.rootRange;
+	pushRange(require_formatText.context_default.rootRange);
+	component(parent, null, props, void 0, slots);
+	require_formatText.context_default.hydrationNode = null;
+	for (let effect of require_formatText.context_default.mountEffects) $run(effect);
+	require_formatText.context_default.mountEffects.length = 0;
+}
+
+//#endregion
+//#region src/render/mount.ts
+/**
+* Mounts a component into a DOM node
+*
+* @param parent The node to mount the component into
+* @param component The component to mount
+* @param props An object containing component props
+*/
+function mount(parent, component, props, slots) {
+	if (parent.childElementCount > 0) throw new Error("The parent node must have no child elements");
+	while (parent.firstChild !== null) parent.firstChild.remove();
+	require_formatText.context_default.rootRange = newRange();
+	require_formatText.context_default.previousRange = require_formatText.context_default.rootRange;
+	pushRange(require_formatText.context_default.rootRange);
+	component(parent, null, props, void 0, slots);
+}
+
+//#endregion
+//#region src/render/newListItem.ts
+function newListItem(data, key) {
+	return {
+		startNode: null,
+		endNode: null,
+		previousRange: null,
+		nextRange: null,
+		depth: -1,
+		animations: null,
+		data,
+		key
+	};
+}
+
+//#endregion
+//#region src/render/hydrationMarkers.ts
+const HYDRATION_START = "[";
+const HYDRATION_END = "]";
+const HYDRATION_BREAK = "^";
+
+//#endregion
+//#region src/render/isCommentNode.ts
+function isCommentNode(node) {
+	return node.nodeType === 8;
+}
+
+//#endregion
+//#region src/render/isTextNode.ts
+function isTextNode(node) {
+	return node.nodeType === 3;
+}
+
+//#endregion
+//#region src/render/nodeCheckHydrationBreak.ts
+/**
+* When hydrating, removes and skips hydration comments that are inserted at the
+* start of branches and used to split up text nodes that would otherwise be
+* joined in HTML.
+*
+* @param node The node to check and maybe skip.
+* @returns The next node.
+*/
+function nodeCheckHydrationBreak(node) {
+	if (require_formatText.context_default.hydrationNode !== null) {
+		if (node !== null && isCommentNode(node) && node.data === HYDRATION_BREAK) {
+			let comment = node;
+			node = node.nextSibling;
+			comment.remove();
+		}
+		require_formatText.context_default.hydrationNode = node;
+	}
+	return node;
+}
+
+//#endregion
+//#region src/render/nodeNext.ts
+/**
+* Gets the next sibling of a node.
+*
+* When hydrating, sets the hydration node.
+*
+* @param node The node.
+* @param text Whether we require a text node.
+*/
+function nodeNext(node, text = false) {
+	if (require_formatText.context_default.hydrationNode !== null && text && isTextNode(node)) return node;
+	return nodeCheckHydrationBreak(node.nextSibling);
+}
+
+//#endregion
+//#region src/render/nodeAnchor.ts
+/**
+* Gets the anchor node for a control statement or component.
+*
+* When mounting, this just returns the anchor node parameter (because it was
+* created).
+*
+* When hydrating, there should be matched <![> and <!]> comments in the HTML,
+* and the anchor node should be after the end comment. The matched comment
+* nodes will be deleted, and the hydration node set to the first node inside
+* the matched comments.
+*
+* @param node The potential anchor node.
+* @returns The anchor node.
+*/
+function nodeAnchor(node) {
+	if (require_formatText.context_default.hydrationNode !== null) {
+		if (isCommentNode(node) && node.data === HYDRATION_START) {
+			let currentNode = nodeNext(node);
+			node.remove();
+			let level = 1;
+			while (currentNode !== null) {
+				if (isCommentNode(currentNode)) {
+					if (currentNode.data === HYDRATION_START) level += 1;
+					else if (currentNode.data === HYDRATION_END) {
+						level -= 1;
+						if (level === 0) {
+							const endNode = currentNode.nextSibling;
+							currentNode.remove();
+							if (require_formatText.context_default.hydrationNode === currentNode) require_formatText.context_default.hydrationNode = endNode;
+							return endNode;
+						}
+					}
+				}
+				currentNode = currentNode.nextSibling;
+			}
+			if (currentNode === null) throw new Error("End hydration comment not found");
+		}
+	}
+	return node;
+}
+
+//#endregion
+//#region src/render/nodeChild.ts
+/**
+* Gets the first child of a node.
+*
+* Sets the hydration node.
+*
+* @param parent The parent node.
+*/
+function nodeChild(parent) {
+	let childNode = parent.firstChild;
+	if (require_formatText.context_default.hydrationNode !== null) {
+		if (childNode === null) childNode = parent.appendChild(parent.ownerDocument.createTextNode(""));
+		require_formatText.context_default.hydrationNode = childNode;
+	}
+	return childNode;
+}
+
+//#endregion
+//#region src/render/nodeRoot.ts
+/**
+* Gets the first child in a fragment.
+*
+* When hydrating, also sets the active range's start node, while we have it.
+*
+* @param parent The parent of the fragment.
+* @param text Whether we require a text node.
+*/
+function nodeRoot(parent, text = false) {
+	if (require_formatText.context_default.hydrationNode !== null) {
+		let rootNode = require_formatText.context_default.hydrationNode;
+		if (text && !isTextNode(rootNode) && rootNode.previousSibling !== null && isTextNode(rootNode.previousSibling)) {
+			rootNode = rootNode.previousSibling;
+			require_formatText.context_default.hydrationNode = rootNode;
+		}
+		if (isCommentNode(rootNode) && rootNode.data === HYDRATION_START) {
+			rootNode = rootNode.nextSibling;
+			require_formatText.context_default.hydrationNode = rootNode;
+		}
+		const range = require_formatText.context_default.activeRange;
+		if (range.startNode === null) range.startNode = rootNode;
+		return rootNode;
+	} else return parent.firstChild;
+}
+
+//#endregion
+//#region src/render/nodeSkip.ts
+/**
+* Gets the sibling of a node, x nodes after it.
+*
+* When hydrating, sets the hydration node.
+*
+* @param node The node.
+* @param count The number of nodes to skip.
+*/
+function nodeSkip(node, count) {
+	let nextNode = node;
+	for (let i = 0; i < count; i++) nextNode = nodeCheckHydrationBreak(nextNode.nextSibling);
+	return nextNode;
+}
+
+//#endregion
+//#region src/render/runControl.ts
+/**
+* Runs an`if`, `switch` or `await` control statement
+* @param create A function that creates the control statement's branches
+*/
+function runControl(range, anchor, create) {
+	const oldRange = pushRange(range, true);
+	$run(function runControl$1() {
+		const oldBranchRange = pushRange(range);
+		create(anchor);
+		popRange(oldBranchRange);
+	});
+	if (require_formatText.context_default.hydrationNode) anchor = require_formatText.context_default.hydrationNode.nextSibling;
+	popRange(oldRange);
+}
+
+//#endregion
+//#region src/render/runControlBranch.ts
+function runControlBranch(range, create) {
+	if (range.depth === -2) return;
+	if (range.nextRange !== null && range.nextRange.depth > range.depth) clearRange(range.nextRange);
+	const oldRange = pushRange(newRange(), true);
+	create();
+	popRange(oldRange);
+}
+
+//#endregion
+//#region src/render/moveRange.ts
+function moveRange(parent, range, before) {
+	parent = before?.parentNode ?? parent;
+	const endNode = range.endNode ?? range.startNode;
+	let currentNode = range.startNode;
+	while (currentNode !== null) {
+		const nextNode = currentNode.nextSibling;
+		parent.insertBefore(currentNode, before);
+		if (currentNode === endNode) break;
+		currentNode = nextNode;
+	}
+}
+
+//#endregion
+//#region src/render/runListItems.ts
+/**
+* @param range The list's range
+* @param parent The parent DOM element
+* @param anchor The DOM element to create new items before
+* @param oldItems The list of current items
+* @param newItems The list of future items
+* @param create A function that creates the DOM elements for a new item
+*/
+function runListItems(range, parent, anchor, oldItems, newItems, create, update) {
+	let oldStartIndex = 0;
+	let oldEndIndex = oldItems.length - 1;
+	let oldStartItem = oldItems[0];
+	let oldEndItem = oldItems[oldEndIndex];
+	let newStartIndex = 0;
+	let newEndIndex = newItems.length - 1;
+	let newStartItem = newItems[0];
+	let newEndItem = newItems[newEndIndex];
+	let oldKeyToIndex;
+	let newKeyToIndex;
+	while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) if (oldStartItem === null) oldStartItem = oldItems[++oldStartIndex];
+	else if (oldEndItem === null) oldEndItem = oldItems[--oldEndIndex];
+	else if (newStartItem === null) newStartItem = newItems[++newStartIndex];
+	else if (newEndItem === null) newEndItem = newItems[--newEndIndex];
+	else if (oldStartItem.key === newStartItem.key) {
+		transferListItemData(oldStartItem, newStartItem, update);
+		oldStartItem = oldItems[++oldStartIndex];
+		newStartItem = newItems[++newStartIndex];
+	} else if (oldEndItem.key === newEndItem.key) {
+		transferListItemData(oldEndItem, newEndItem, update);
+		oldEndItem = oldItems[--oldEndIndex];
+		newEndItem = newItems[--newEndIndex];
+	} else if (oldStartItem.key === newEndItem.key) {
+		moveRange(parent, oldStartItem, oldEndItem.endNode.nextSibling);
+		transferListItemData(oldStartItem, newEndItem, update);
+		oldStartItem = oldItems[++oldStartIndex];
+		newEndItem = newItems[--newEndIndex];
+	} else if (oldEndItem.key === newStartItem.key) {
+		moveRange(parent, oldEndItem, oldStartItem.startNode);
+		transferListItemData(oldEndItem, newStartItem, update);
+		oldEndItem = oldItems[--oldEndIndex];
+		newStartItem = newItems[++newStartIndex];
+	} else {
+		if (oldKeyToIndex === void 0 || newKeyToIndex === void 0) {
+			oldKeyToIndex = /* @__PURE__ */ new Map();
+			for (let i = oldStartIndex; i < oldEndIndex; i++) oldKeyToIndex.set(oldItems[i].key, i);
+			newKeyToIndex = /* @__PURE__ */ new Map();
+			for (let i = newStartIndex; i < newEndIndex; i++) newKeyToIndex.set(newItems[i].key, i);
+		}
+		let oldIndex = oldKeyToIndex.get(newStartItem.key);
+		let newIndex = newKeyToIndex.get(oldStartItem.key);
+		if (oldIndex === void 0 && newIndex === void 0) {
+			newStartItem.data = $watch(newStartItem.data, { shallow: true });
+			create(newStartItem, oldStartItem.startNode);
+			newStartItem.previousRange = oldStartItem.previousRange;
+			newStartItem.nextRange = oldStartItem;
+			oldStartItem.previousRange = newStartItem;
+			clearRange(oldStartItem);
+			oldStartItem = oldItems[++oldStartIndex];
+			newStartItem = newItems[++newStartIndex];
+		} else if (oldIndex === void 0) {
+			newStartItem.data = $watch(newStartItem.data, { shallow: true });
+			create(newStartItem, oldStartItem.startNode);
+			newStartItem = newItems[++newStartIndex];
+		} else if (newIndex === void 0) {
+			clearRange(oldStartItem);
+			oldStartItem = oldItems[++oldStartIndex];
+		} else {
+			const oldData = oldItems[oldIndex];
+			moveRange(parent, oldData, oldStartItem.startNode);
+			transferListItemData(oldData, newStartItem, update);
+			oldItems[oldIndex] = null;
+			newStartItem = newItems[++newStartIndex];
+		}
+	}
+	if (oldStartIndex <= oldEndIndex || newStartIndex <= newEndIndex) if (oldStartIndex > oldEndIndex) {
+		let before = oldStartItem?.startNode ?? oldItems[oldItems.length - 1]?.endNode?.nextSibling ?? anchor;
+		for (; newStartIndex <= newEndIndex; newStartItem = newItems[++newStartIndex]) {
+			newStartItem.data = $watch(newStartItem.data, { shallow: true });
+			create(newStartItem, before);
+			before = newStartItem.endNode.nextSibling;
+		}
+	} else for (; oldEndIndex >= oldStartIndex; oldStartItem = oldItems[oldEndIndex--]) clearRange(oldStartItem);
+	if (newItems.length > 0) range.nextRange = newItems[0];
+	else if (oldItems.length > 0) range.nextRange = oldItems[oldItems.length - 1].nextRange;
+}
+function transferListItemData(oldItem, newItem, update) {
+	newItem.startNode = oldItem.startNode;
+	newItem.endNode = oldItem.endNode;
+	update(oldItem, newItem);
+	newItem.data = oldItem.data;
+}
+
+//#endregion
+//#region src/render/runList.ts
+/**
+* Runs a `for` control statement
+* @param create A function that creates the control statement's branches
+*/
+function runList(range, parent, anchor, buildItems, create, update) {
+	const oldRange = pushRange(range, true);
+	let listItems = [];
+	$run(function runList$1() {
+		const oldBranchRange = pushRange(range);
+		const newItems = buildItems();
+		require_formatText.context_default.activeTarget = null;
+		runListItems(range, parent, anchor, listItems, newItems, create, update);
+		listItems = newItems;
+		popRange(oldBranchRange);
+	});
+	if (require_formatText.context_default.hydrationNode !== null) anchor = require_formatText.context_default.hydrationNode.nextSibling;
+	popRange(oldRange);
+}
+
+//#endregion
+//#region src/render/setAttribute.ts
+function setAttribute(el, name, value) {
+	if (value === false || value === void 0 || value === null) el.removeAttribute(name);
+	else el.setAttribute(name, value);
+}
+
+//#endregion
+//#region src/render/setDynamicElement.ts
+function setDynamicElement(el, tag) {
+	if (require_formatText.context_default.hydrationNode !== null) return el;
+	let newElement = el.ownerDocument.createElement(tag);
+	el.replaceWith(newElement);
+	return newElement;
+}
+
+//#endregion
+//#region src/wrappers/ReactiveDate.ts
+let initialized = false;
+/**
+* Wraps a Date object for $watching.
+*/
+var ReactiveDate = class ReactiveDate extends Date {
+	constructor(...params) {
+		super(...params);
+		if (!initialized) this.#init();
+		this[proxyHandledSymbol] = true;
+		this[proxyDataSymbol] = {
+			target: this,
+			isArray: false,
+			shallow: true,
+			signals: /* @__PURE__ */ new Map()
+		};
+	}
+	#init() {
+		initialized = true;
+		let reactivePrototype = ReactiveDate.prototype;
+		let datePrototype = Date.prototype;
+		const methods = Object.getOwnPropertyNames(datePrototype);
+		for (const method of methods) {
+			if (method.startsWith("get") || method.startsWith("to") || method === "valueOf") reactivePrototype[method] = function(...args) {
+				const data = this[proxyDataSymbol];
+				const result = datePrototype[method].apply(this, args);
+				trackProxyEffect(data, "#time");
+				return result;
+			};
+			if (method.startsWith("set")) reactivePrototype[method] = function(...args) {
+				const data = this[proxyDataSymbol];
+				const result = datePrototype[method].apply(this, args);
+				updateSignal(data, "#time");
+				return result;
+			};
+		}
+	}
+};
+
+//#endregion
+exports.$batch = require_formatText.$batch;
+exports.$cache = require_formatText.$cache;
+exports.$mount = $mount;
+exports.$peek = require_formatText.$peek;
+exports.$run = $run;
+exports.$unwrap = $unwrap;
+exports.$watch = $watch;
+exports.ReactiveDate = ReactiveDate;
+exports.clearLayoutSlot = clearLayoutSlot;
+exports.fillLayoutSlot = fillLayoutSlot;
+exports.hydrate = hydrate;
+exports.mount = mount;
+exports.t_add_fragment = addFragment;
+exports.t_anchor = nodeAnchor;
+exports.t_animate = addAnimation;
+exports.t_apply_props = applyProps;
+exports.t_attribute = setAttribute;
+exports.t_child = nodeChild;
+exports.t_class = require_formatText.buildClasses;
+exports.t_dynamic = setDynamicElement;
+exports.t_event = addEvent;
+exports.t_fmt = require_formatText.formatText;
+exports.t_fragment = getFragment;
+exports.t_list_item = newListItem;
+exports.t_next = nodeNext;
+exports.t_pop_range = popRange;
+exports.t_push_range = pushRange;
+exports.t_range = newRange;
+exports.t_root = nodeRoot;
+exports.t_run_branch = runControlBranch;
+exports.t_run_control = runControl;
+exports.t_run_list = runList;
+exports.t_skip = nodeSkip;
+exports.t_style = require_formatText.buildStyles;
+//# sourceMappingURL=index.cjs.map