veles 1.1.3 → 1.1.4

package/dist/{_utils-BnAXelPu.js → _utils-B1lbF1Al.js}

@@ -151,6 +151,9 @@ function parseChildren({ children, htmlElement, velesNode, portal }) {
 			childComponent.parentVelesElement = velesNode;
 			childComponents.push(childComponent);
 		} else if (childComponent.portal) {
+			if (!childComponent.portalAnchor) throw new Error("Portal node is missing its source anchor");
+			htmlElement.append(childComponent.portalAnchor);
+			lastInsertedNode = childComponent.portalAnchor;
 			childComponent.parentVelesElement = velesNode;
 			childComponents.push(childComponent);
 		} else {
@@ -183,6 +186,7 @@ const FORM_VALUE_TAGS = new Set([
 	"TEXTAREA",
 	"SELECT"
 ]);
+const ATTRIBUTE_ALIASES = { htmlfor: "for" };
 const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 	draggable: {
 		trueValue: "true",
@@ -203,6 +207,11 @@ const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 };
 function assignDomAttribute({ htmlElement, attributeName, value, previousValue }) {
 	const normalizedAttributeName = attributeName.toLowerCase();
+	const domAttributeName = ATTRIBUTE_ALIASES[normalizedAttributeName] ?? attributeName;
+	if (normalizedAttributeName === "dangerouslysetinnerhtml") {
+		assignInnerHTML(htmlElement, value);
+		return;
+	}
 	if (normalizedAttributeName === "value" && isFormValueElement(htmlElement)) {
 		assignFormValueProperty(htmlElement, value);
 		return;
@@ -215,7 +224,7 @@ function assignDomAttribute({ htmlElement, attributeName, value, previousValue }
 		assignBooleanProperty(htmlElement, "selected", value);
 		return;
 	}
-	if (attributeName === "style") {
+	if (normalizedAttributeName === "style") {
 		assignStyle({
 			value,
 			previousValue,
@@ -223,21 +232,32 @@ function assignDomAttribute({ htmlElement, attributeName, value, previousValue }
 		});
 		return;
 	}
+	if (typeof value === "boolean" && (normalizedAttributeName.startsWith("aria-") || normalizedAttributeName.startsWith("data-"))) {
+		htmlElement.setAttribute(domAttributeName, String(value));
+		return;
+	}
 	if (typeof value === "boolean") {
 		const enumeratedConfig = ENUMERATED_BOOLEAN_ATTRIBUTES[normalizedAttributeName];
 		if (enumeratedConfig) {
-			htmlElement.setAttribute(attributeName, value ? enumeratedConfig.trueValue : enumeratedConfig.falseValue);
+			htmlElement.setAttribute(domAttributeName, value ? enumeratedConfig.trueValue : enumeratedConfig.falseValue);
 			return;
 		}
-		if (value) htmlElement.setAttribute(attributeName, "");
-		else htmlElement.removeAttribute(attributeName);
+		if (value) htmlElement.setAttribute(domAttributeName, "");
+		else htmlElement.removeAttribute(domAttributeName);
 		return;
 	}
 	if (value == null) {
-		htmlElement.removeAttribute(attributeName);
+		htmlElement.removeAttribute(domAttributeName);
+		return;
+	}
+	htmlElement.setAttribute(domAttributeName, value);
+}
+function assignInnerHTML(htmlElement, value) {
+	if (value == null) {
+		htmlElement.innerHTML = "";
 		return;
 	}
-	htmlElement.setAttribute(attributeName, value);
+	if (typeof value === "object" && "__html" in value) htmlElement.innerHTML = value.__html == null ? "" : String(value.__html);
 }
 function isFormValueElement(htmlElement) {
 	return FORM_VALUE_TAGS.has(htmlElement.tagName);
@@ -326,6 +346,7 @@ function createElement(element, props = {}) {
 		velesNode.childComponents = childComponents;
 		velesNode.phantom = phantom;
 		velesNode.portal = portal;
+		if (portal) velesNode.portalAnchor = document.createTextNode("");
 		const mountHandlers = [];
 		velesNode._privateMethods = {
 			_addMountHandler(cb) {
@@ -397,10 +418,17 @@ function cleanupComponentFromPortal(componentNode) {
 //#endregion
 //#region src/fragment.ts
 function Fragment({ children }) {
-	return createElement("div", {
+	const fragment = createElement("div", {
 		phantom: true,
 		children
 	});
+	if (fragment.childComponents.length === 0) {
+		const anchor = createTextElement("");
+		anchor.parentVelesElement = fragment;
+		fragment.childComponents.push(anchor);
+		fragment.html.append(anchor.html);
+	}
+	return fragment;
 }
 //#endregion
 //#region src/context/index.ts
@@ -523,45 +551,43 @@ function renderTree(component, { parentVelesElement } = {}) {
 		executedNode.html = component.html;
 		if (parentVelesElement) executedNode.parentVelesElement = parentVelesElement;
 		if (component.phantom) executedNode.phantom = component.phantom;
-		if (component.portal) executedNode.portal = component.portal;
+		if (component.portal) {
+			if (!component.portalAnchor) throw new Error("Portal node is missing its source anchor");
+			executedNode.portal = component.portal;
+			executedNode.portalAnchor = component.portalAnchor;
+		}
 		executedNode.childComponents = component.childComponents.map((childComponent) => renderTree(childComponent, { parentVelesElement: executedNode }));
 		if (component.needExecutedVersion) component.executedVersion = executedNode;
 		return executedNode;
 	}
 	throw new Error("Unknown component type in renderTree");
 }
+function getExecutedVelesNodeSourceNode(node) {
+	if ("executedVelesNode" in node && node.portal) {
+		if (!node.portalAnchor) throw new Error("Portal node is missing its source anchor");
+		return node.portalAnchor;
+	}
+	return node.html;
+}
 function insertNode({ velesElement, adjacentNode, parentVelesElement }) {
 	if (velesElement.phantom) {
 		let lastInsertedNode = null;
 		velesElement.childComponents.forEach((childComponentofPhantom) => {
-			if ("executedVelesNode" in childComponentofPhantom) {
-				if (lastInsertedNode) lastInsertedNode.after(childComponentofPhantom.html);
-				else if (adjacentNode) adjacentNode.after(childComponentofPhantom.html);
-				else parentVelesElement.html.prepend(childComponentofPhantom.html);
-				childComponentofPhantom.parentVelesElement = parentVelesElement;
-				lastInsertedNode = childComponentofPhantom.html;
-			} else if ("executedVelesStringElement" in childComponentofPhantom) {
-				if (lastInsertedNode) lastInsertedNode.after(childComponentofPhantom.html);
-				else if (adjacentNode) adjacentNode.after(childComponentofPhantom.html);
-				else parentVelesElement.html.prepend(childComponentofPhantom.html);
-				childComponentofPhantom.parentVelesElement = parentVelesElement;
-				lastInsertedNode = childComponentofPhantom.html;
-			} else {
-				const executedNode = getExecutedComponentVelesNode(childComponentofPhantom);
-				if (lastInsertedNode) lastInsertedNode.after(executedNode.html);
-				else if (adjacentNode) adjacentNode.after(executedNode.html);
-				else parentVelesElement.html.prepend(executedNode.html);
-				executedNode.parentVelesElement = parentVelesElement;
-				lastInsertedNode = executedNode.html;
-			}
+			const lastInsertedChildNode = insertNode({
+				velesElement: "executedVelesComponent" in childComponentofPhantom ? getExecutedComponentVelesNode(childComponentofPhantom) : childComponentofPhantom,
+				adjacentNode: lastInsertedNode ?? adjacentNode,
+				parentVelesElement
+			});
+			if (lastInsertedChildNode) lastInsertedNode = lastInsertedChildNode;
 		});
 		velesElement.parentVelesElement = parentVelesElement;
 		return lastInsertedNode;
 	} else {
-		if (adjacentNode) adjacentNode.after(velesElement.html);
-		else parentVelesElement.html.prepend(velesElement.html);
+		const sourceNode = getExecutedVelesNodeSourceNode(velesElement);
+		if (adjacentNode) adjacentNode.after(sourceNode);
+		else parentVelesElement.html.prepend(sourceNode);
 		velesElement.parentVelesElement = parentVelesElement;
-		return velesElement.html;
+		return sourceNode;
 	}
 }
 function getMountedNodeExecutedVersion(node, errorMessage) {
@@ -593,4 +619,4 @@ function unique(arr) {
 	return resultArr;
 }
 //#endregion
-export { onMount as _, identity as a, addPublicContext as c, popPublicContext as d, Fragment as f, hasCurrentLifecycleContext as g, createTextElement as h, getMountedNodeExecutedVersion as i, createContext as l, assignDomAttribute as m, callUnmountHandlers as n, renderTree as o, createElement as p, getExecutedComponentVelesNode as r, unique as s, callMountHandlers as t, getCurrentContext as u, onUnmount as v };
+export { hasCurrentLifecycleContext as _, getMountedNodeExecutedVersion as a, unique as c, getCurrentContext as d, popPublicContext as f, createTextElement as g, assignDomAttribute as h, getExecutedVelesNodeSourceNode as i, addPublicContext as l, createElement as m, callUnmountHandlers as n, identity as o, Fragment as p, getExecutedComponentVelesNode as r, renderTree as s, callMountHandlers as t, createContext as u, onMount as v, onUnmount as y };

package/dist/{_utils-DbrPydEE.cjs → _utils-CXVRQTuz.cjs}

@@ -151,6 +151,9 @@ function parseChildren({ children, htmlElement, velesNode, portal }) {
 			childComponent.parentVelesElement = velesNode;
 			childComponents.push(childComponent);
 		} else if (childComponent.portal) {
+			if (!childComponent.portalAnchor) throw new Error("Portal node is missing its source anchor");
+			htmlElement.append(childComponent.portalAnchor);
+			lastInsertedNode = childComponent.portalAnchor;
 			childComponent.parentVelesElement = velesNode;
 			childComponents.push(childComponent);
 		} else {
@@ -183,6 +186,7 @@ const FORM_VALUE_TAGS = new Set([
 	"TEXTAREA",
 	"SELECT"
 ]);
+const ATTRIBUTE_ALIASES = { htmlfor: "for" };
 const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 	draggable: {
 		trueValue: "true",
@@ -203,6 +207,11 @@ const ENUMERATED_BOOLEAN_ATTRIBUTES = {
 };
 function assignDomAttribute({ htmlElement, attributeName, value, previousValue }) {
 	const normalizedAttributeName = attributeName.toLowerCase();
+	const domAttributeName = ATTRIBUTE_ALIASES[normalizedAttributeName] ?? attributeName;
+	if (normalizedAttributeName === "dangerouslysetinnerhtml") {
+		assignInnerHTML(htmlElement, value);
+		return;
+	}
 	if (normalizedAttributeName === "value" && isFormValueElement(htmlElement)) {
 		assignFormValueProperty(htmlElement, value);
 		return;
@@ -215,7 +224,7 @@ function assignDomAttribute({ htmlElement, attributeName, value, previousValue }
 		assignBooleanProperty(htmlElement, "selected", value);
 		return;
 	}
-	if (attributeName === "style") {
+	if (normalizedAttributeName === "style") {
 		assignStyle({
 			value,
 			previousValue,
@@ -223,21 +232,32 @@ function assignDomAttribute({ htmlElement, attributeName, value, previousValue }
 		});
 		return;
 	}
+	if (typeof value === "boolean" && (normalizedAttributeName.startsWith("aria-") || normalizedAttributeName.startsWith("data-"))) {
+		htmlElement.setAttribute(domAttributeName, String(value));
+		return;
+	}
 	if (typeof value === "boolean") {
 		const enumeratedConfig = ENUMERATED_BOOLEAN_ATTRIBUTES[normalizedAttributeName];
 		if (enumeratedConfig) {
-			htmlElement.setAttribute(attributeName, value ? enumeratedConfig.trueValue : enumeratedConfig.falseValue);
+			htmlElement.setAttribute(domAttributeName, value ? enumeratedConfig.trueValue : enumeratedConfig.falseValue);
 			return;
 		}
-		if (value) htmlElement.setAttribute(attributeName, "");
-		else htmlElement.removeAttribute(attributeName);
+		if (value) htmlElement.setAttribute(domAttributeName, "");
+		else htmlElement.removeAttribute(domAttributeName);
+		return;
+	}
+	if (value == null) {
+		htmlElement.removeAttribute(domAttributeName);
 		return;
 	}
+	htmlElement.setAttribute(domAttributeName, value);
+}
+function assignInnerHTML(htmlElement, value) {
 	if (value == null) {
-		htmlElement.removeAttribute(attributeName);
+		htmlElement.innerHTML = "";
 		return;
 	}
-	htmlElement.setAttribute(attributeName, value);
+	if (typeof value === "object" && "__html" in value) htmlElement.innerHTML = value.__html == null ? "" : String(value.__html);
 }
 function isFormValueElement(htmlElement) {
 	return FORM_VALUE_TAGS.has(htmlElement.tagName);
@@ -326,6 +346,7 @@ function createElement(element, props = {}) {
 		velesNode.childComponents = childComponents;
 		velesNode.phantom = phantom;
 		velesNode.portal = portal;
+		if (portal) velesNode.portalAnchor = document.createTextNode("");
 		const mountHandlers = [];
 		velesNode._privateMethods = {
 			_addMountHandler(cb) {
@@ -397,10 +418,17 @@ function cleanupComponentFromPortal(componentNode) {
 //#endregion
 //#region src/fragment.ts
 function Fragment({ children }) {
-	return createElement("div", {
+	const fragment = createElement("div", {
 		phantom: true,
 		children
 	});
+	if (fragment.childComponents.length === 0) {
+		const anchor = createTextElement("");
+		anchor.parentVelesElement = fragment;
+		fragment.childComponents.push(anchor);
+		fragment.html.append(anchor.html);
+	}
+	return fragment;
 }
 //#endregion
 //#region src/context/index.ts
@@ -523,45 +551,43 @@ function renderTree(component, { parentVelesElement } = {}) {
 		executedNode.html = component.html;
 		if (parentVelesElement) executedNode.parentVelesElement = parentVelesElement;
 		if (component.phantom) executedNode.phantom = component.phantom;
-		if (component.portal) executedNode.portal = component.portal;
+		if (component.portal) {
+			if (!component.portalAnchor) throw new Error("Portal node is missing its source anchor");
+			executedNode.portal = component.portal;
+			executedNode.portalAnchor = component.portalAnchor;
+		}
 		executedNode.childComponents = component.childComponents.map((childComponent) => renderTree(childComponent, { parentVelesElement: executedNode }));
 		if (component.needExecutedVersion) component.executedVersion = executedNode;
 		return executedNode;
 	}
 	throw new Error("Unknown component type in renderTree");
 }
+function getExecutedVelesNodeSourceNode(node) {
+	if ("executedVelesNode" in node && node.portal) {
+		if (!node.portalAnchor) throw new Error("Portal node is missing its source anchor");
+		return node.portalAnchor;
+	}
+	return node.html;
+}
 function insertNode({ velesElement, adjacentNode, parentVelesElement }) {
 	if (velesElement.phantom) {
 		let lastInsertedNode = null;
 		velesElement.childComponents.forEach((childComponentofPhantom) => {
-			if ("executedVelesNode" in childComponentofPhantom) {
-				if (lastInsertedNode) lastInsertedNode.after(childComponentofPhantom.html);
-				else if (adjacentNode) adjacentNode.after(childComponentofPhantom.html);
-				else parentVelesElement.html.prepend(childComponentofPhantom.html);
-				childComponentofPhantom.parentVelesElement = parentVelesElement;
-				lastInsertedNode = childComponentofPhantom.html;
-			} else if ("executedVelesStringElement" in childComponentofPhantom) {
-				if (lastInsertedNode) lastInsertedNode.after(childComponentofPhantom.html);
-				else if (adjacentNode) adjacentNode.after(childComponentofPhantom.html);
-				else parentVelesElement.html.prepend(childComponentofPhantom.html);
-				childComponentofPhantom.parentVelesElement = parentVelesElement;
-				lastInsertedNode = childComponentofPhantom.html;
-			} else {
-				const executedNode = getExecutedComponentVelesNode(childComponentofPhantom);
-				if (lastInsertedNode) lastInsertedNode.after(executedNode.html);
-				else if (adjacentNode) adjacentNode.after(executedNode.html);
-				else parentVelesElement.html.prepend(executedNode.html);
-				executedNode.parentVelesElement = parentVelesElement;
-				lastInsertedNode = executedNode.html;
-			}
+			const lastInsertedChildNode = insertNode({
+				velesElement: "executedVelesComponent" in childComponentofPhantom ? getExecutedComponentVelesNode(childComponentofPhantom) : childComponentofPhantom,
+				adjacentNode: lastInsertedNode ?? adjacentNode,
+				parentVelesElement
+			});
+			if (lastInsertedChildNode) lastInsertedNode = lastInsertedChildNode;
 		});
 		velesElement.parentVelesElement = parentVelesElement;
 		return lastInsertedNode;
 	} else {
-		if (adjacentNode) adjacentNode.after(velesElement.html);
-		else parentVelesElement.html.prepend(velesElement.html);
+		const sourceNode = getExecutedVelesNodeSourceNode(velesElement);
+		if (adjacentNode) adjacentNode.after(sourceNode);
+		else parentVelesElement.html.prepend(sourceNode);
 		velesElement.parentVelesElement = parentVelesElement;
-		return velesElement.html;
+		return sourceNode;
 	}
 }
 function getMountedNodeExecutedVersion(node, errorMessage) {
@@ -653,6 +679,12 @@ Object.defineProperty(exports, "getExecutedComponentVelesNode", {
 		return getExecutedComponentVelesNode;
 	}
 });
+Object.defineProperty(exports, "getExecutedVelesNodeSourceNode", {
+	enumerable: true,
+	get: function() {
+		return getExecutedVelesNodeSourceNode;
+	}
+});
 Object.defineProperty(exports, "getMountedNodeExecutedVersion", {
 	enumerable: true,
 	get: function() {

package/dist/{fragment-C16zCm8L.d.cts → fragment-COsp_SDE.d.cts}

@@ -1428,6 +1428,7 @@ type VelesElement = {
   html: HTMLElement;
   phantom?: boolean;
   portal?: null | HTMLElement;
+  portalAnchor?: Text;
   needExecutedVersion?: boolean;
   executedVersion?: ExecutedVelesElement; // every element except the most top one should have one
   parentVelesElement?: VelesElement;
@@ -1443,7 +1444,8 @@ type ExecutedVelesElement = {
   executedVelesNode: true;
   html: HTMLElement;
   phantom?: boolean;
-  portal?: HTMLElement; // every element except the most top one should have one
+  portal?: HTMLElement;
+  portalAnchor?: Text; // every element except the most top one should have one
   parentVelesElement?: ExecutedVelesElement;
   childComponents: (ExecutedVelesElement | ExecutedVelesComponent | ExecutedVelesStringElement)[]; // not intended to be used directly
   _privateMethods: {

package/dist/{fragment-yC0-T2O-.d.ts → fragment-CPcYB5D5.d.ts}

@@ -1428,6 +1428,7 @@ type VelesElement = {
   html: HTMLElement;
   phantom?: boolean;
   portal?: null | HTMLElement;
+  portalAnchor?: Text;
   needExecutedVersion?: boolean;
   executedVersion?: ExecutedVelesElement; // every element except the most top one should have one
   parentVelesElement?: VelesElement;
@@ -1443,7 +1444,8 @@ type ExecutedVelesElement = {
   executedVelesNode: true;
   html: HTMLElement;
   phantom?: boolean;
-  portal?: HTMLElement; // every element except the most top one should have one
+  portal?: HTMLElement;
+  portalAnchor?: Text; // every element except the most top one should have one
   parentVelesElement?: ExecutedVelesElement;
   childComponents: (ExecutedVelesElement | ExecutedVelesComponent | ExecutedVelesStringElement)[]; // not intended to be used directly
   _privateMethods: {

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;
@@ -781,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)) {
@@ -789,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,
@@ -797,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,
@@ -825,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>;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { _ as onMount, a as identity, c as addPublicContext, d as popPublicContext, f as Fragment, g as hasCurrentLifecycleContext, h as createTextElement, i as getMountedNodeExecutedVersion, l as createContext, m as assignDomAttribute, n as callUnmountHandlers, o as renderTree, p as createElement, r as getExecutedComponentVelesNode, s as unique, t as callMountHandlers, u as getCurrentContext, v as onUnmount } from "./_utils-BnAXelPu.js";
+import { _ as hasCurrentLifecycleContext, a as getMountedNodeExecutedVersion, c as unique, d as getCurrentContext, f as popPublicContext, g as createTextElement, h as assignDomAttribute, i as getExecutedVelesNodeSourceNode, l as addPublicContext, m as createElement, n as callUnmountHandlers, o as identity, p as Fragment, r as getExecutedComponentVelesNode, s as renderTree, t as callMountHandlers, u as createContext, v as onMount, y as onUnmount } from "./_utils-B1lbF1Al.js";
 //#region src/attach-component.ts
 /**
 * Attach Veles component tree to a regular HTML node.
@@ -65,69 +65,42 @@ function updateUseValueSelector({ value, selectorTrackingElement, newTrackingSel
 		newVelesElementNode.parentVelesElement = parentVelesElementRendered;
 		if ("executedVelesNode" in newVelesElementNode && newVelesElementNode.phantom) {
 			const insertAllPhantomChildren = (adjacentNode) => {
+				const adjacentSourceNode = getExecutedVelesNodeSourceNode(adjacentNode);
 				newVelesElementNode.childComponents.forEach((childComponentofPhantom) => {
-					if ("executedVelesNode" in childComponentofPhantom) {
-						adjacentNode.html.before(childComponentofPhantom.html);
-						childComponentofPhantom.parentVelesElement = adjacentNode.parentVelesElement;
-					} else {
-						const velesElementNode = 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 ? getExecutedComponentVelesNode(childComponentofPhantom) : childComponentofPhantom;
+					adjacentSourceNode.before(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 = 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 ? getExecutedComponentVelesNode(childComponentofPhantom) : childComponentofPhantom;
+					if (!isInserted) {
+						insertAllPhantomChildren(childNode);
+						isInserted = true;
 					}
+					getExecutedVelesNodeSourceNode(childNode).remove();
 				});
 			} else {
 				insertAllPhantomChildren(oldVelesElementNode);
-				oldVelesElementNode.html.remove();
+				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 = 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 = getExecutedVelesNodeSourceNode("executedVelesComponent" in childComponentofPhantom ? getExecutedComponentVelesNode(childComponentofPhantom) : childComponentofPhantom);
+				if (!isInserted) {
+					childSourceNode.before(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 = getExecutedVelesNodeSourceNode(newVelesElementNode);
+			const oldSourceNode = 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);
 		}
@@ -204,7 +177,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;
@@ -218,19 +191,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([
@@ -238,12 +211,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);
@@ -259,12 +232,12 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 					calculatedKey,
 					elementState
 				]);
-				newElementsByKey[calculatedKey] = {
+				newElementsByKey.set(calculatedKey, {
 					elementState,
 					indexState,
 					indexValue: index,
 					node
-				};
+				});
 			}
 		});
 		const newChildRenderedComponents = [];
@@ -278,61 +251,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 = getExecutedComponentVelesNode(getMountedNodeExecutedVersion(existingElement.node, "Existing iterator node is expected to be mounted"));
+				const existingElementSourceNode = getExecutedVelesNodeSourceNode(getExecutedComponentVelesNode(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) getExecutedComponentVelesNode(firstRenderedElement.executedVersion).html.before(existingElementNode.html);
+						if (firstRenderedElement?.executedVersion) getExecutedVelesNodeSourceNode(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) getExecutedComponentVelesNode(firstRenderedElement.executedVersion).html.before(existingElementNode.html);
+						if (firstRenderedElement?.executedVersion) getExecutedVelesNodeSourceNode(getExecutedComponentVelesNode(firstRenderedElement.executedVersion)).before(existingElementSourceNode);
 					}
-					currentElement = existingElementNode.html;
+					currentElement = existingElementSourceNode;
 					offset = offset - 1;
 				}
 			} else {
 				const newNodeExecutedVersion = getMountedNodeExecutedVersion(newNode, "New iterator node is expected to be mounted");
 				const newNodeVelesElement = getExecutedComponentVelesNode(newNodeExecutedVersion);
+				const newNodeSourceNode = 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) getExecutedComponentVelesNode(firstRenderedElement.executedVersion).html.before(newNodeVelesElement.html);
-					else parentVelesElement.html.prepend(newNodeVelesElement.html);
+					if (firstRenderedElement?.executedVersion) getExecutedVelesNodeSourceNode(getExecutedComponentVelesNode(firstRenderedElement.executedVersion)).before(newNodeSourceNode);
+					else anchor.html.before(newNodeSourceNode);
 				}
 				offset = offset + 1;
-				currentElement = newNodeVelesElement.html;
+				currentElement = newNodeSourceNode;
 				newElementsCount = newElementsCount + 1;
 				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 = getMountedNodeExecutedVersion(oldNode, "Removed iterator node is expected to be mounted");
-				getExecutedComponentVelesNode(oldNodeExecutedVersion).html.remove();
+				getExecutedVelesNodeSourceNode(getExecutedComponentVelesNode(oldNodeExecutedVersion)).remove();
 				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;
@@ -780,7 +757,10 @@ function createStateFromCore(core, subscribeCallback) {
 			trackingParams.savedContext = currentContext;
 			const wrapperComponent = createElement((_props, componentAPI) => {
 				const children = [];
-				const elementsByKey = {};
+				const anchor = 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)) {
@@ -788,7 +768,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,
@@ -796,18 +776,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,
@@ -824,7 +804,7 @@ function createStateFromCore(core, subscribeCallback) {
 				});
 				return createElement("div", {
 					phantom: true,
-					children: children.map((child) => child[0])
+					children: [...children.map((child) => child[0]), anchor]
 				});
 			});
 			wrapperComponent.needExecutedVersion = true;

package/dist/jsx-runtime.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");
 exports.Fragment = require__utils.Fragment;
 exports.jsx = require__utils.createElement;
 exports.jsxDEV = require__utils.createElement;

package/dist/jsx-runtime.d.cts

@@ -1,2 +1,2 @@
-import { c as JSX, n as createElement, t as Fragment } from "./fragment-C16zCm8L.cjs";
+import { c as JSX, n as createElement, t as Fragment } from "./fragment-COsp_SDE.cjs";
 export { Fragment, type JSX, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/jsx-runtime.d.ts

@@ -1,2 +1,2 @@
-import { c as JSX, n as createElement, t as Fragment } from "./fragment-yC0-T2O-.js";
+import { c as JSX, n as createElement, t as Fragment } from "./fragment-CPcYB5D5.js";
 export { Fragment, type JSX, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/jsx-runtime.js

@@ -1,2 +1,2 @@
-import { f as Fragment, p as createElement } from "./_utils-BnAXelPu.js";
+import { m as createElement, p as Fragment } from "./_utils-B1lbF1Al.js";
 export { Fragment, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veles",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "UI library with main focus on performance",
   "keywords": [
     "JavaScript",