veles 1.1.2 → 1.1.4

package/dist/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require__utils = require("./_utils-DbrPydEE.cjs");
+const require__utils = require("./_utils-CXVRQTuz.cjs");
 //#region src/attach-component.ts
 /**
 * Attach Veles component tree to a regular HTML node.
@@ -66,69 +66,42 @@ function updateUseValueSelector({ value, selectorTrackingElement, newTrackingSel
 		newVelesElementNode.parentVelesElement = parentVelesElementRendered;
 		if ("executedVelesNode" in newVelesElementNode && newVelesElementNode.phantom) {
 			const insertAllPhantomChildren = (adjacentNode) => {
+				const adjacentSourceNode = require__utils.getExecutedVelesNodeSourceNode(adjacentNode);
 				newVelesElementNode.childComponents.forEach((childComponentofPhantom) => {
-					if ("executedVelesNode" in childComponentofPhantom) {
-						adjacentNode.html.before(childComponentofPhantom.html);
-						childComponentofPhantom.parentVelesElement = adjacentNode.parentVelesElement;
-					} else {
-						const velesElementNode = require__utils.getExecutedComponentVelesNode(childComponentofPhantom);
-						if (!velesElementNode) console.error("can't find HTML tree in a component chain");
-						else {
-							adjacentNode.html.before(velesElementNode.html);
-							velesElementNode.parentVelesElement = adjacentNode.parentVelesElement;
-						}
-					}
+					const childNode = "executedVelesComponent" in childComponentofPhantom ? require__utils.getExecutedComponentVelesNode(childComponentofPhantom) : childComponentofPhantom;
+					adjacentSourceNode.before(require__utils.getExecutedVelesNodeSourceNode(childNode));
+					childNode.parentVelesElement = adjacentNode.parentVelesElement;
 				});
 			};
 			if ("executedVelesNode" in oldVelesElementNode && oldVelesElementNode.phantom) {
 				let isInserted = false;
 				oldVelesElementNode.childComponents.forEach((childComponentofPhantom) => {
-					if ("executedVelesNode" in childComponentofPhantom) {
-						if (!isInserted) {
-							insertAllPhantomChildren(childComponentofPhantom);
-							isInserted = true;
-						}
-						childComponentofPhantom.html.remove();
-					} else {
-						const velesElementNode = require__utils.getExecutedComponentVelesNode(childComponentofPhantom);
-						if (!velesElementNode) console.error("can't find HTML tree in a component chain");
-						else {
-							if (!isInserted) {
-								insertAllPhantomChildren(velesElementNode);
-								isInserted = true;
-							}
-							velesElementNode.html.remove();
-						}
+					const childNode = "executedVelesComponent" in childComponentofPhantom ? require__utils.getExecutedComponentVelesNode(childComponentofPhantom) : childComponentofPhantom;
+					if (!isInserted) {
+						insertAllPhantomChildren(childNode);
+						isInserted = true;
 					}
+					require__utils.getExecutedVelesNodeSourceNode(childNode).remove();
 				});
 			} else {
 				insertAllPhantomChildren(oldVelesElementNode);
-				oldVelesElementNode.html.remove();
+				require__utils.getExecutedVelesNodeSourceNode(oldVelesElementNode).remove();
 			}
 		} else if ("executedVelesNode" in oldVelesElementNode && oldVelesElementNode.phantom) {
 			let isInserted = false;
 			oldVelesElementNode.childComponents.forEach((childComponentofPhantom) => {
-				if ("executedVelesNode" in childComponentofPhantom) {
-					if (!isInserted) {
-						childComponentofPhantom.html.before(newVelesElementNode.html);
-						isInserted = true;
-					}
-					childComponentofPhantom.html.remove();
-				} else {
-					const velesElementNode = require__utils.getExecutedComponentVelesNode(childComponentofPhantom);
-					if (!velesElementNode) console.error("can't find HTML tree in a component chain");
-					else {
-						if (!isInserted) {
-							velesElementNode.html.before(newVelesElementNode.html);
-							isInserted = true;
-						}
-						velesElementNode.html.remove();
-					}
+				const childSourceNode = require__utils.getExecutedVelesNodeSourceNode("executedVelesComponent" in childComponentofPhantom ? require__utils.getExecutedComponentVelesNode(childComponentofPhantom) : childComponentofPhantom);
+				if (!isInserted) {
+					childSourceNode.before(require__utils.getExecutedVelesNodeSourceNode(newVelesElementNode));
+					isInserted = true;
 				}
+				childSourceNode.remove();
 			});
 		} else try {
-			if (parentVelesElementRendered.portal) parentVelesElementRendered.portal.replaceChild(newVelesElementNode.html, oldVelesElementNode.html);
-			else parentVelesElementRendered.html.replaceChild(newVelesElementNode.html, oldVelesElementNode.html);
+			const newSourceNode = require__utils.getExecutedVelesNodeSourceNode(newVelesElementNode);
+			const oldSourceNode = require__utils.getExecutedVelesNodeSourceNode(oldVelesElementNode);
+			if (parentVelesElementRendered.portal) parentVelesElementRendered.portal.replaceChild(newSourceNode, oldSourceNode);
+			else parentVelesElementRendered.html.replaceChild(newSourceNode, oldSourceNode);
 		} catch (e) {
 			console.error("failed to update in renderSelected", e);
 		}
@@ -205,7 +178,7 @@ function updateUseAttributeValue({ element, value }) {
 //#endregion
 //#region src/create-state/update-render-each-value.ts
 function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
-	const { cb, key, renderedElements, elementsByKey, wrapperComponent, selector, savedContext } = trackingIterator;
+	const { anchor, cb, key, renderedElements, elementsByKey, wrapperComponent, selector, savedContext } = trackingIterator;
 	if (!wrapperComponent) {
 		console.error("there is no wrapper component for the iterator");
 		return;
@@ -219,19 +192,19 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 	const elements = selector ? selector(value) : value;
 	if (Array.isArray(elements)) {
 		const newRenderedElements = [];
-		const newElementsByKey = {};
-		const renderedExistingElements = {};
+		const newElementsByKey = /* @__PURE__ */ new Map();
+		const renderedExistingElements = /* @__PURE__ */ new Set();
 		elements.forEach((element, index) => {
-			let calculatedKey = "";
+			let calculatedKey = null;
 			if (typeof key === "string" && typeof element === "object" && element !== null && key in element) calculatedKey = element[key];
 			else if (typeof key === "function") calculatedKey = key({
 				element,
 				index
 			});
-			if (!calculatedKey) return;
-			const existingElement = elementsByKey[calculatedKey];
+			if (calculatedKey == null) return;
+			const existingElement = elementsByKey.get(calculatedKey);
 			if (existingElement) {
-				renderedExistingElements[calculatedKey] = true;
+				renderedExistingElements.add(calculatedKey);
 				if (existingElement.elementState.get() !== element) existingElement.elementState.set(element);
 				if (existingElement.indexState.get() !== index) existingElement.indexState.set(index);
 				newRenderedElements.push([
@@ -239,12 +212,12 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 					calculatedKey,
 					existingElement.elementState
 				]);
-				newElementsByKey[calculatedKey] = {
+				newElementsByKey.set(calculatedKey, {
 					elementState: existingElement.elementState,
 					indexState: existingElement.indexState,
 					indexValue: index,
 					node: existingElement.node
-				};
+				});
 			} else {
 				const elementState = createState(element);
 				const indexState = createState(index);
@@ -260,12 +233,12 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 					calculatedKey,
 					elementState
 				]);
-				newElementsByKey[calculatedKey] = {
+				newElementsByKey.set(calculatedKey, {
 					elementState,
 					indexState,
 					indexValue: index,
 					node
-				};
+				});
 			}
 		});
 		const newChildRenderedComponents = [];
@@ -279,61 +252,65 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 			newChildComponents.push(newRenderedElement[0]);
 			if (positioningOffset[index]) offset = offset + positioningOffset[index];
 			const [newNode, calculatedKey, _newState] = newRenderedElement;
-			const existingElement = elementsByKey[calculatedKey];
+			const existingElement = elementsByKey.get(calculatedKey);
 			if (existingElement) {
-				const existingElementNode = require__utils.getExecutedComponentVelesNode(require__utils.getMountedNodeExecutedVersion(existingElement.node, "Existing iterator node is expected to be mounted"));
+				const existingElementSourceNode = require__utils.getExecutedVelesNodeSourceNode(require__utils.getExecutedComponentVelesNode(require__utils.getMountedNodeExecutedVersion(existingElement.node, "Existing iterator node is expected to be mounted")));
 				if (existingElement.indexValue + offset === index) {
-					currentElement = existingElementNode.html;
+					currentElement = existingElementSourceNode;
 					return;
 				}
 				if (existingElement.indexValue + offset > index) {
 					if (currentElement) {
-						currentElement.after(existingElementNode.html);
+						currentElement.after(existingElementSourceNode);
 						positioningOffset[existingElement.indexValue + 1] = -1;
 					} else {
 						const firstRenderedElement = renderedElements[0]?.[0];
-						if (firstRenderedElement?.executedVersion) require__utils.getExecutedComponentVelesNode(firstRenderedElement.executedVersion).html.before(existingElementNode.html);
+						if (firstRenderedElement?.executedVersion) require__utils.getExecutedVelesNodeSourceNode(require__utils.getExecutedComponentVelesNode(firstRenderedElement.executedVersion)).before(existingElementSourceNode);
 					}
-					currentElement = existingElementNode.html;
+					currentElement = existingElementSourceNode;
 					offset = offset + 1;
 				} else {
 					if (currentElement) {
-						currentElement.after(existingElementNode.html);
+						currentElement.after(existingElementSourceNode);
 						positioningOffset[existingElement.indexValue + 1] = 1;
 					} else {
 						const firstRenderedElement = renderedElements[0]?.[0];
-						if (firstRenderedElement?.executedVersion) require__utils.getExecutedComponentVelesNode(firstRenderedElement.executedVersion).html.before(existingElementNode.html);
+						if (firstRenderedElement?.executedVersion) require__utils.getExecutedVelesNodeSourceNode(require__utils.getExecutedComponentVelesNode(firstRenderedElement.executedVersion)).before(existingElementSourceNode);
 					}
-					currentElement = existingElementNode.html;
+					currentElement = existingElementSourceNode;
 					offset = offset - 1;
 				}
 			} else {
 				const newNodeExecutedVersion = require__utils.getMountedNodeExecutedVersion(newNode, "New iterator node is expected to be mounted");
 				const newNodeVelesElement = require__utils.getExecutedComponentVelesNode(newNodeExecutedVersion);
+				const newNodeSourceNode = require__utils.getExecutedVelesNodeSourceNode(newNodeVelesElement);
 				newNodeVelesElement.parentVelesElement = parentVelesElement;
-				if (currentElement) currentElement.after(newNodeVelesElement.html);
+				if (currentElement) currentElement.after(newNodeSourceNode);
 				else {
 					const firstRenderedElement = renderedElements[0]?.[0];
-					if (firstRenderedElement?.executedVersion) require__utils.getExecutedComponentVelesNode(firstRenderedElement.executedVersion).html.before(newNodeVelesElement.html);
-					else parentVelesElement.html.prepend(newNodeVelesElement.html);
+					if (firstRenderedElement?.executedVersion) require__utils.getExecutedVelesNodeSourceNode(require__utils.getExecutedComponentVelesNode(firstRenderedElement.executedVersion)).before(newNodeSourceNode);
+					else anchor.html.before(newNodeSourceNode);
 				}
 				offset = offset + 1;
-				currentElement = newNodeVelesElement.html;
+				currentElement = newNodeSourceNode;
 				newElementsCount = newElementsCount + 1;
 				require__utils.callMountHandlers(newNodeExecutedVersion);
 			}
 		});
 		if (renderedElements.length === newRenderedElements.length + newElementsCount) {} else renderedElements.forEach(([oldNode, calculatedKey]) => {
-			if (renderedExistingElements[calculatedKey] === true) return;
+			if (renderedExistingElements.has(calculatedKey)) return;
 			else {
 				const oldNodeExecutedVersion = require__utils.getMountedNodeExecutedVersion(oldNode, "Removed iterator node is expected to be mounted");
-				require__utils.getExecutedComponentVelesNode(oldNodeExecutedVersion).html.remove();
+				require__utils.getExecutedVelesNodeSourceNode(require__utils.getExecutedComponentVelesNode(oldNodeExecutedVersion)).remove();
 				require__utils.callUnmountHandlers(oldNodeExecutedVersion);
 				if ("executedVelesNode" in wrapperVelesElementNode) wrapperVelesElementNode.childComponents = wrapperVelesElementNode.childComponents.filter((childComponent) => childComponent !== oldNodeExecutedVersion);
 				else throw new Error("Wrapper iterator element is a string");
 				if ("velesNode" in wrapperComponent) wrapperComponent.childComponents = wrapperComponent.childComponents.filter((childComponent) => childComponent !== oldNode);
 			}
 		});
+		if (!anchor.executedVersion) throw new Error("Iterator anchor is expected to be mounted");
+		newChildRenderedComponents.push(anchor.executedVersion);
+		newChildComponents.push(anchor);
 		if ("executedVelesNode" in wrapperVelesElementNode) wrapperVelesElementNode.childComponents = newChildRenderedComponents;
 		if ("velesNode" in wrapperComponent) wrapperComponent.childComponents = newChildComponents;
 		trackingIterator.renderedElements = newRenderedElements;
@@ -370,6 +347,113 @@ function triggerUpdates({ value, createState, trackers, get }) {
 	});
 }
 //#endregion
+//#region src/create-state/min-heap.ts
+/**
+* A stable min-heap. Values with the same priority are returned in
+* insertion order.
+*/
+var MinHeap = class {
+	constructor(compareValues) {
+		this._entries = [];
+		this._insertionOrder = 0;
+		this._compareValues = compareValues;
+	}
+	get size() {
+		return this._entries.length;
+	}
+	push(value) {
+		const entry = {
+			value,
+			insertionOrder: this._insertionOrder++
+		};
+		let index = this._entries.length;
+		this._entries.push(entry);
+		while (index > 0) {
+			const parentIndex = Math.floor((index - 1) / 2);
+			const parentEntry = this._entries[parentIndex];
+			if (this.compareEntries(parentEntry, entry) <= 0) break;
+			this._entries[index] = parentEntry;
+			index = parentIndex;
+		}
+		this._entries[index] = entry;
+	}
+	pop() {
+		const firstEntry = this._entries[0];
+		const lastEntry = this._entries.pop();
+		if (!firstEntry || !lastEntry) return void 0;
+		if (this._entries.length === 0) return firstEntry.value;
+		let index = 0;
+		while (true) {
+			const leftChildIndex = index * 2 + 1;
+			const rightChildIndex = leftChildIndex + 1;
+			let smallestIndex = index;
+			if (leftChildIndex < this._entries.length && this.compareEntries(this._entries[leftChildIndex], lastEntry) < 0) smallestIndex = leftChildIndex;
+			if (rightChildIndex < this._entries.length && this.compareEntries(this._entries[rightChildIndex], smallestIndex === index ? lastEntry : this._entries[leftChildIndex]) < 0) smallestIndex = rightChildIndex;
+			if (smallestIndex === index) break;
+			this._entries[index] = this._entries[smallestIndex];
+			index = smallestIndex;
+		}
+		this._entries[index] = lastEntry;
+		return firstEntry.value;
+	}
+	compareEntries(entry1, entry2) {
+		const valueComparison = this._compareValues(entry1.value, entry2.value);
+		return valueComparison === 0 ? entry1.insertionOrder - entry2.insertionOrder : valueComparison;
+	}
+};
+//#endregion
+//#region src/create-state/state-scheduler.ts
+/**
+* Coordinates notifications produced by one synchronous state transaction.
+*
+* A subscriber can synchronously update another state. That nested update adds
+* its notifications to this same scheduler, allowing an older notification for
+* the same state to be replaced before it is delivered.
+*/
+var StateScheduler = class {
+	constructor() {
+		this._notifications = new MinHeap((notification1, notification2) => notification1.rank - notification2.rank);
+		this._notificationsByKey = /* @__PURE__ */ new Map();
+	}
+	scheduleNotification(notification) {
+		const existingNotification = this._notificationsByKey.get(notification.key);
+		if (existingNotification) {
+			existingNotification.value = notification.value;
+			return;
+		}
+		this._notificationsByKey.set(notification.key, notification);
+		this._notifications.push(notification);
+	}
+	deliverNotifications() {
+		while (this._notifications.size > 0) {
+			const notification = this._notifications.pop();
+			if (this._notificationsByKey.get(notification.key) !== notification) continue;
+			this._notificationsByKey.delete(notification.key);
+			notification.notify(notification.value, notification.previousValue);
+		}
+	}
+};
+let activeScheduler;
+/**
+* Top-level state updates own the scheduler and synchronously drain it. Updates
+* made by subscribers reuse the active scheduler, so they cannot deliver a
+* nested notification batch ahead of notifications already waiting to run.
+*/
+function runWithStateScheduler(runUpdate) {
+	if (activeScheduler) {
+		runUpdate(activeScheduler);
+		return;
+	}
+	const scheduler = new StateScheduler();
+	activeScheduler = scheduler;
+	try {
+		runUpdate(scheduler);
+		scheduler.deliverNotifications();
+	} finally {
+		activeScheduler = void 0;
+	}
+}
+//#endregion
 //#region src/create-state/state-core.ts
 const emptyValue = Symbol("veles-state-core-empty");
 const defaultEquality = (value1, value2) => value1 === value2;
@@ -380,8 +464,10 @@ var StateCore = class StateCore {
 		this._dirty = false;
 		this._children = /* @__PURE__ */ new Set();
 		this._value = initialValue;
-		this._parents = new Set(options.parents);
+		const parents = options.parents || [];
+		this._parents = new Set(parents);
 		this._compute = options.compute;
+		this._rank = parents.reduce((rank, parent) => Math.max(rank, parent._rank + 1), 0);
 		this._dirty = Boolean(options.dirty);
 		this._equality = options.equality || defaultEquality;
 	}
@@ -400,14 +486,16 @@ var StateCore = class StateCore {
 	}
 	set(newValue) {
 		if (this._equality(this._value, newValue)) return;
-		const prevValue = this._value;
-		this._prevValue = prevValue;
-		this._value = newValue;
-		this.notifySubscribers(newValue, prevValue);
-		this._children.forEach((child) => {
-			child._dirty = true;
+		runWithStateScheduler((scheduler) => {
+			const prevValue = this._value;
+			this._prevValue = prevValue;
+			this._value = newValue;
+			this.scheduleNotification(scheduler, newValue, prevValue);
+			this._children.forEach((child) => {
+				child._dirty = true;
+			});
+			this.flush(scheduler);
 		});
-		this.flush();
 	}
 	update(fn) {
 		const newValue = fn(this._value);
@@ -494,37 +582,62 @@ var StateCore = class StateCore {
 		this._dirty = false;
 		return { changed };
 	}
-	flush() {
-		const queue = Array.from(this._children);
-		const queued = new Set(queue);
-		while (queue.length > 0) {
-			const child = queue.shift();
+	flush(scheduler) {
+		/**
+		* We utilize a min-heap to ensure that we don't trigger notifications
+		* before all the previous necessary work is done. Otherwise it can
+		* happen too early, and we'd need to recursively check that every parent
+		* is not dirty and schedule it again.
+		*
+		* Here we achieve this by assinging a rank to each core state, which is
+		* determined by the highest rank of any of the parent + 1.
+		*
+		* After that, we process them at the same rank, ensuring that "short" branches
+		* are not executed before all their parents are done with their recomputation.
+		*/
+		const queue = new MinHeap((node1, node2) => node1._rank - node2._rank);
+		const queued = /* @__PURE__ */ new Set();
+		const enqueue = (node) => {
+			if (queued.has(node)) return;
+			queue.push(node);
+			queued.add(node);
+		};
+		this._children.forEach(enqueue);
+		while (queue.size > 0) {
+			const child = queue.pop();
 			queued.delete(child);
 			if (!child._dirty) continue;
-			if (child.hasDirtyParents()) {
-				queue.push(child);
-				queued.add(child);
+			let shouldRescheduleChild = false;
+			child._parents.forEach((parentNode) => {
+				if (parentNode._dirty) {
+					enqueue(parentNode);
+					shouldRescheduleChild = true;
+				}
+			});
+			if (shouldRescheduleChild) {
+				enqueue(child);
 				continue;
 			}
 			const { changed } = child.recompute();
 			const value = child._value;
 			if (!changed) continue;
-			child.notifySubscribers(value, child._prevValue);
+			child.scheduleNotification(scheduler, value, child._prevValue);
 			child._children.forEach((grandchild) => {
 				grandchild._dirty = true;
-				if (!queued.has(grandchild)) {
-					queue.push(grandchild);
-					queued.add(grandchild);
-				}
+				enqueue(grandchild);
 			});
 		}
 	}
-	hasDirtyParents() {
-		let hasDirtyParent = false;
-		this._parents.forEach((parent) => {
-			if (parent._dirty) hasDirtyParent = true;
+	scheduleNotification(scheduler, value, previousValue) {
+		scheduler.scheduleNotification({
+			key: this,
+			rank: this._rank,
+			value,
+			previousValue,
+			notify: (notificationValue, notificationPreviousValue) => {
+				this.notifySubscribers(notificationValue, notificationPreviousValue);
+			}
 		});
-		return hasDirtyParent;
 	}
 	notifySubscribers(value, prevValue) {
 		if (value === emptyValue) return;
@@ -645,7 +758,10 @@ function createStateFromCore(core, subscribeCallback) {
 			trackingParams.savedContext = currentContext;
 			const wrapperComponent = require__utils.createElement((_props, componentAPI) => {
 				const children = [];
-				const elementsByKey = {};
+				const anchor = require__utils.createTextElement("");
+				anchor.needExecutedVersion = true;
+				trackingParams.anchor = anchor;
+				const elementsByKey = /* @__PURE__ */ new Map();
 				const stateValue = core.get();
 				const elements = options.selector ? options.selector(stateValue) : stateValue;
 				if (!Array.isArray(elements)) {
@@ -653,7 +769,7 @@ function createStateFromCore(core, subscribeCallback) {
 					return null;
 				}
 				elements.forEach((element, index) => {
-					let calculatedKey = "";
+					let calculatedKey = null;
 					if (typeof options.key === "string" && typeof element === "object" && element !== null && options.key in element) calculatedKey = element[options.key];
 					else if (typeof options.key === "function") calculatedKey = options.key({
 						element,
@@ -661,18 +777,18 @@ function createStateFromCore(core, subscribeCallback) {
 					});
 					const elementState = createState(element);
 					const indexState = createState(index);
-					if (!calculatedKey) return;
+					if (calculatedKey == null) return;
 					let node = cb({
 						elementState,
 						indexState
 					});
 					node.needExecutedVersion = true;
-					elementsByKey[calculatedKey] = {
+					elementsByKey.set(calculatedKey, {
 						node,
 						indexState,
 						indexValue: index,
 						elementState
-					};
+					});
 					children.push([
 						node,
 						calculatedKey,
@@ -689,7 +805,7 @@ function createStateFromCore(core, subscribeCallback) {
 				});
 				return require__utils.createElement("div", {
 					phantom: true,
-					children: children.map((child) => child[0])
+					children: [...children.map((child) => child[0]), anchor]
 				});
 			});
 			wrapperComponent.needExecutedVersion = true;

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { a as VelesComponentObject, i as VelesChildren, n as createElement, o as VelesElement, r as AttributeHelper, s as VelesStringElement, t as Fragment } from "./fragment-C16zCm8L.cjs";
+import { a as VelesComponentObject, i as VelesChildren, n as createElement, o as VelesElement, r as AttributeHelper, s as VelesStringElement, t as Fragment } from "./fragment-COsp_SDE.cjs";
 
 //#region src/attach-component.d.ts
 /**
@@ -24,6 +24,7 @@ declare function onUnmount(cb: Function): void;
 type StateEquality<ValueType> = (value1: ValueType, value2: ValueType) => boolean;
 type StateLike<ValueType> = State<ValueType>;
 type ArrayElement<T> = T extends ReadonlyArray<infer Element> ? Element : never;
+type IteratorKey = string | number;
 type State<ValueType> = {
   track(cb: (value: ValueType) => void | Function, options?: {
     callOnMount?: boolean;
@@ -45,7 +46,7 @@ type State<ValueType> = {
     key: string | ((options: {
       element: Element;
       index: number;
-    }) => string);
+    }) => IteratorKey);
     selector?: undefined;
   } : never, cb: (props: {
     elementState: State<Element>;
@@ -55,7 +56,7 @@ type State<ValueType> = {
     key: string | ((options: {
       element: Element;
       index: number;
-    }) => string);
+    }) => IteratorKey);
     selector: (value: ValueType) => SelectorValueType;
   }, cb: (props: {
     elementState: State<Element>;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { a as VelesComponentObject, i as VelesChildren, n as createElement, o as VelesElement, r as AttributeHelper, s as VelesStringElement, t as Fragment } from "./fragment-yC0-T2O-.js";
+import { a as VelesComponentObject, i as VelesChildren, n as createElement, o as VelesElement, r as AttributeHelper, s as VelesStringElement, t as Fragment } from "./fragment-CPcYB5D5.js";
 
 //#region src/attach-component.d.ts
 /**
@@ -24,6 +24,7 @@ declare function onUnmount(cb: Function): void;
 type StateEquality<ValueType> = (value1: ValueType, value2: ValueType) => boolean;
 type StateLike<ValueType> = State<ValueType>;
 type ArrayElement<T> = T extends ReadonlyArray<infer Element> ? Element : never;
+type IteratorKey = string | number;
 type State<ValueType> = {
   track(cb: (value: ValueType) => void | Function, options?: {
     callOnMount?: boolean;
@@ -45,7 +46,7 @@ type State<ValueType> = {
     key: string | ((options: {
       element: Element;
       index: number;
-    }) => string);
+    }) => IteratorKey);
     selector?: undefined;
   } : never, cb: (props: {
     elementState: State<Element>;
@@ -55,7 +56,7 @@ type State<ValueType> = {
     key: string | ((options: {
       element: Element;
       index: number;
-    }) => string);
+    }) => IteratorKey);
     selector: (value: ValueType) => SelectorValueType;
   }, cb: (props: {
     elementState: State<Element>;