veles 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/{_utils-BZ1SMqm2.js → _utils-CCdioDsh.js}

@@ -168,12 +168,45 @@ function parseChildren({ children, htmlElement, velesNode, portal }) {
 	return childComponents;
 }
 //#endregion
+//#region src/attribute-utils.ts
+const ENUMERATED_BOOLEAN_ATTRIBUTES = {
+	draggable: {
+		trueValue: "true",
+		falseValue: "false"
+	},
+	contenteditable: {
+		trueValue: "true",
+		falseValue: "false"
+	},
+	spellcheck: {
+		trueValue: "true",
+		falseValue: "false"
+	},
+	translate: {
+		trueValue: "yes",
+		falseValue: "no"
+	}
+};
+function assignDomAttribute({ htmlElement, attributeName, value }) {
+	if (typeof value === "boolean") {
+		const enumeratedConfig = ENUMERATED_BOOLEAN_ATTRIBUTES[attributeName.toLowerCase()];
+		if (enumeratedConfig) {
+			htmlElement.setAttribute(attributeName, value ? enumeratedConfig.trueValue : enumeratedConfig.falseValue);
+			return;
+		}
+		if (value) htmlElement.setAttribute(attributeName, "");
+		else htmlElement.removeAttribute(attributeName);
+		return;
+	}
+	htmlElement.setAttribute(attributeName, value);
+}
+//#endregion
 //#region src/create-element/assign-attributes.ts
 function assignAttributes({ props, htmlElement, velesNode }) {
 	Object.entries(props).forEach(([key, value]) => {
-		if (typeof value === "function" && value.velesAttribute === true) assignAttribute({
+		if (value && typeof value === "object" && value.velesAttribute === true) assignAttribute({
 			key,
-			value: value(htmlElement, key, velesNode),
+			value: value.getValue(htmlElement, key, velesNode),
 			htmlElement
 		});
 		else assignAttribute({
@@ -185,9 +218,11 @@ function assignAttributes({ props, htmlElement, velesNode }) {
 }
 function assignAttribute({ key, value, htmlElement }) {
 	if (typeof value === "function" && key.startsWith("on")) htmlElement.addEventListener(key.slice(2).toLocaleLowerCase(), value);
-	else if (typeof value === "boolean") {
-		if (value) htmlElement.setAttribute(key, "");
-	} else htmlElement.setAttribute(key, value);
+	else assignDomAttribute({
+		htmlElement,
+		attributeName: key,
+		value
+	});
 }
 //#endregion
 //#region src/create-element/create-element.ts
@@ -238,14 +273,14 @@ function createElement(element, props = {}) {
 					});
 					else portal.append(childComponent.html);
 					else if ("velesStringElement" in childComponent) portal.append(childComponent.html);
-					else appendComponentToPortal(getExecutedComponentVelesNode(childComponent.executedVersion), portal);
+					else appendComponentToPortal(getExecutedComponentVelesNode(getMountedNodeExecutedVersion(childComponent, "Portal child component is not mounted")), portal);
 				});
 			});
 			velesNode._privateMethods._addUnmountHandler(function removeNodeOnUnmount() {
 				velesNode.childComponents.forEach((childComponent) => {
 					if ("velesNode" in childComponent) childComponent.html.remove();
 					else if ("velesStringElement" in childComponent) childComponent.html.remove();
-					else cleanupComponentFromPortal(getExecutedComponentVelesNode(childComponent.executedVersion));
+					else cleanupComponentFromPortal(getExecutedComponentVelesNode(getMountedNodeExecutedVersion(childComponent, "Portal child component is not mounted")));
 				});
 			});
 		}
@@ -309,8 +344,8 @@ function createContext() {
 		addContext,
 		readContext: () => {
 			const currentContext = publicContextStack[publicContextStack.length - 1];
-			if (!currentContext) console.error("no Context currently available");
-			else return currentContext[contextId];
+			if (!currentContext) throw new Error("no Context currently available");
+			return currentContext[contextId];
 		}
 	};
 }
@@ -374,21 +409,29 @@ function renderTree(component, { parentVelesElement } = {}) {
 			*/
 			if (parentVelesElement) newNode.parentVelesElement = parentVelesElement;
 		} else if (parentVelesElement) {
-			if (component.insertAfter) if ("velesComponentObject" in component.insertAfter) component.html = insertNode({
-				velesElement: newNode,
-				adjacentNode: component.insertAfter.html,
-				parentVelesElement
-			});
-			else component.html = insertNode({
-				velesElement: newNode,
-				adjacentNode: component.insertAfter,
-				parentVelesElement
-			});
-			else component.html = insertNode({
-				velesElement: newNode,
-				adjacentNode: null,
-				parentVelesElement
-			});
+			if (component.insertAfter) if ("velesComponentObject" in component.insertAfter) {
+				const lastNode = insertNode({
+					velesElement: newNode,
+					adjacentNode: component.insertAfter.html ?? null,
+					parentVelesElement
+				});
+				if (lastNode) component.html = lastNode;
+			} else {
+				const lastNode = insertNode({
+					velesElement: newNode,
+					adjacentNode: component.insertAfter,
+					parentVelesElement
+				});
+				if (lastNode) component.html = lastNode;
+			}
+			else {
+				const lastNode = insertNode({
+					velesElement: newNode,
+					adjacentNode: null,
+					parentVelesElement
+				});
+				if (lastNode) component.html = lastNode;
+			}
 			newNode.parentVelesElement = parentVelesElement;
 		}
 		if (component.needExecutedVersion || component.portal) component.executedVersion = executedComponent;
@@ -405,6 +448,7 @@ function renderTree(component, { parentVelesElement } = {}) {
 		if (component.needExecutedVersion) component.executedVersion = executedNode;
 		return executedNode;
 	}
+	throw new Error("Unknown component type in renderTree");
 }
 function insertNode({ velesElement, adjacentNode, parentVelesElement }) {
 	if (velesElement.phantom) {
@@ -440,6 +484,10 @@ function insertNode({ velesElement, adjacentNode, parentVelesElement }) {
 		return velesElement.html;
 	}
 }
+function getMountedNodeExecutedVersion(node, errorMessage) {
+	if (!node.executedVersion) throw new Error(errorMessage || "Expected node to have executedVersion by this point");
+	return node.executedVersion;
+}
 function callMountHandlers(component) {
 	component._privateMethods._callMountHandlers();
 	if ("executedVelesStringElement" in component) return;
@@ -465,4 +513,4 @@ function unique(arr) {
 	return resultArr;
 }
 //#endregion
-export { renderTree as a, createContext as c, Fragment as d, createElement as f, onUnmount as g, onMount as h, identity as i, getCurrentContext as l, hasCurrentLifecycleContext as m, callUnmountHandlers as n, unique as o, createTextElement as p, getExecutedComponentVelesNode as r, addPublicContext as s, callMountHandlers as t, popPublicContext as u };
+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 };

package/dist/{_utils-gPluq0AT.cjs → _utils-Cf3Xvo3q.cjs}

@@ -168,12 +168,45 @@ function parseChildren({ children, htmlElement, velesNode, portal }) {
 	return childComponents;
 }
 //#endregion
+//#region src/attribute-utils.ts
+const ENUMERATED_BOOLEAN_ATTRIBUTES = {
+	draggable: {
+		trueValue: "true",
+		falseValue: "false"
+	},
+	contenteditable: {
+		trueValue: "true",
+		falseValue: "false"
+	},
+	spellcheck: {
+		trueValue: "true",
+		falseValue: "false"
+	},
+	translate: {
+		trueValue: "yes",
+		falseValue: "no"
+	}
+};
+function assignDomAttribute({ htmlElement, attributeName, value }) {
+	if (typeof value === "boolean") {
+		const enumeratedConfig = ENUMERATED_BOOLEAN_ATTRIBUTES[attributeName.toLowerCase()];
+		if (enumeratedConfig) {
+			htmlElement.setAttribute(attributeName, value ? enumeratedConfig.trueValue : enumeratedConfig.falseValue);
+			return;
+		}
+		if (value) htmlElement.setAttribute(attributeName, "");
+		else htmlElement.removeAttribute(attributeName);
+		return;
+	}
+	htmlElement.setAttribute(attributeName, value);
+}
+//#endregion
 //#region src/create-element/assign-attributes.ts
 function assignAttributes({ props, htmlElement, velesNode }) {
 	Object.entries(props).forEach(([key, value]) => {
-		if (typeof value === "function" && value.velesAttribute === true) assignAttribute({
+		if (value && typeof value === "object" && value.velesAttribute === true) assignAttribute({
 			key,
-			value: value(htmlElement, key, velesNode),
+			value: value.getValue(htmlElement, key, velesNode),
 			htmlElement
 		});
 		else assignAttribute({
@@ -185,9 +218,11 @@ function assignAttributes({ props, htmlElement, velesNode }) {
 }
 function assignAttribute({ key, value, htmlElement }) {
 	if (typeof value === "function" && key.startsWith("on")) htmlElement.addEventListener(key.slice(2).toLocaleLowerCase(), value);
-	else if (typeof value === "boolean") {
-		if (value) htmlElement.setAttribute(key, "");
-	} else htmlElement.setAttribute(key, value);
+	else assignDomAttribute({
+		htmlElement,
+		attributeName: key,
+		value
+	});
 }
 //#endregion
 //#region src/create-element/create-element.ts
@@ -238,14 +273,14 @@ function createElement(element, props = {}) {
 					});
 					else portal.append(childComponent.html);
 					else if ("velesStringElement" in childComponent) portal.append(childComponent.html);
-					else appendComponentToPortal(getExecutedComponentVelesNode(childComponent.executedVersion), portal);
+					else appendComponentToPortal(getExecutedComponentVelesNode(getMountedNodeExecutedVersion(childComponent, "Portal child component is not mounted")), portal);
 				});
 			});
 			velesNode._privateMethods._addUnmountHandler(function removeNodeOnUnmount() {
 				velesNode.childComponents.forEach((childComponent) => {
 					if ("velesNode" in childComponent) childComponent.html.remove();
 					else if ("velesStringElement" in childComponent) childComponent.html.remove();
-					else cleanupComponentFromPortal(getExecutedComponentVelesNode(childComponent.executedVersion));
+					else cleanupComponentFromPortal(getExecutedComponentVelesNode(getMountedNodeExecutedVersion(childComponent, "Portal child component is not mounted")));
 				});
 			});
 		}
@@ -309,8 +344,8 @@ function createContext() {
 		addContext,
 		readContext: () => {
 			const currentContext = publicContextStack[publicContextStack.length - 1];
-			if (!currentContext) console.error("no Context currently available");
-			else return currentContext[contextId];
+			if (!currentContext) throw new Error("no Context currently available");
+			return currentContext[contextId];
 		}
 	};
 }
@@ -374,21 +409,29 @@ function renderTree(component, { parentVelesElement } = {}) {
 			*/
 			if (parentVelesElement) newNode.parentVelesElement = parentVelesElement;
 		} else if (parentVelesElement) {
-			if (component.insertAfter) if ("velesComponentObject" in component.insertAfter) component.html = insertNode({
-				velesElement: newNode,
-				adjacentNode: component.insertAfter.html,
-				parentVelesElement
-			});
-			else component.html = insertNode({
-				velesElement: newNode,
-				adjacentNode: component.insertAfter,
-				parentVelesElement
-			});
-			else component.html = insertNode({
-				velesElement: newNode,
-				adjacentNode: null,
-				parentVelesElement
-			});
+			if (component.insertAfter) if ("velesComponentObject" in component.insertAfter) {
+				const lastNode = insertNode({
+					velesElement: newNode,
+					adjacentNode: component.insertAfter.html ?? null,
+					parentVelesElement
+				});
+				if (lastNode) component.html = lastNode;
+			} else {
+				const lastNode = insertNode({
+					velesElement: newNode,
+					adjacentNode: component.insertAfter,
+					parentVelesElement
+				});
+				if (lastNode) component.html = lastNode;
+			}
+			else {
+				const lastNode = insertNode({
+					velesElement: newNode,
+					adjacentNode: null,
+					parentVelesElement
+				});
+				if (lastNode) component.html = lastNode;
+			}
 			newNode.parentVelesElement = parentVelesElement;
 		}
 		if (component.needExecutedVersion || component.portal) component.executedVersion = executedComponent;
@@ -405,6 +448,7 @@ function renderTree(component, { parentVelesElement } = {}) {
 		if (component.needExecutedVersion) component.executedVersion = executedNode;
 		return executedNode;
 	}
+	throw new Error("Unknown component type in renderTree");
 }
 function insertNode({ velesElement, adjacentNode, parentVelesElement }) {
 	if (velesElement.phantom) {
@@ -440,6 +484,10 @@ function insertNode({ velesElement, adjacentNode, parentVelesElement }) {
 		return velesElement.html;
 	}
 }
+function getMountedNodeExecutedVersion(node, errorMessage) {
+	if (!node.executedVersion) throw new Error(errorMessage || "Expected node to have executedVersion by this point");
+	return node.executedVersion;
+}
 function callMountHandlers(component) {
 	component._privateMethods._callMountHandlers();
 	if ("executedVelesStringElement" in component) return;
@@ -477,6 +525,12 @@ Object.defineProperty(exports, "addPublicContext", {
 		return addPublicContext;
 	}
 });
+Object.defineProperty(exports, "assignDomAttribute", {
+	enumerable: true,
+	get: function() {
+		return assignDomAttribute;
+	}
+});
 Object.defineProperty(exports, "callMountHandlers", {
 	enumerable: true,
 	get: function() {
@@ -519,6 +573,12 @@ Object.defineProperty(exports, "getExecutedComponentVelesNode", {
 		return getExecutedComponentVelesNode;
 	}
 });
+Object.defineProperty(exports, "getMountedNodeExecutedVersion", {
+	enumerable: true,
+	get: function() {
+		return getMountedNodeExecutedVersion;
+	}
+});
 Object.defineProperty(exports, "hasCurrentLifecycleContext", {
 	enumerable: true,
 	get: function() {

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

@@ -353,8 +353,9 @@ declare namespace JSX {
     z?: number | string | undefined | AttributeHelper<number | string | undefined>;
     zoomAndPan?: string | undefined | AttributeHelper<string | undefined>;
   }
-  export type TargetedEvent<Target extends EventTarget = EventTarget, TypedEvent extends Event = Event> = Omit<TypedEvent, "currentTarget"> & {
+  export type TargetedEvent<Target extends EventTarget = EventTarget, TypedEvent extends Event = Event> = Omit<TypedEvent, "currentTarget" | "target"> & {
     readonly currentTarget: Target;
+    readonly target: Target;
   };
   export type TargetedAnimationEvent<Target extends EventTarget> = TargetedEvent<Target, AnimationEvent>;
   export type TargetedClipboardEvent<Target extends EventTarget> = TargetedEvent<Target, ClipboardEvent>;
@@ -1494,33 +1495,33 @@ type ExecutedVelesComponent = {
 };
 // all supported child options
 type velesChild = string | number | VelesElement | VelesComponentObject | VelesStringElement;
-type VelesChildren = velesChild | velesChild[] | undefined | null;
-type VelesElementProps = {
+type VelesMaybeChild = velesChild | undefined | null;
+type VelesChildren = VelesMaybeChild | VelesMaybeChild[];
+type VelesBaseProps = {
   children?: VelesChildren;
   ref?: {
     velesRef: true;
     current: any;
   };
-  portal?: HTMLElement; // event handlers + any html properties
-  // the value can be either a string value
-  // or a function in case we support reactivity
-  // TODO: we can improve these types
-  [htmlAttribute: string]: any;
-} & JSX.HTMLAttributes;
+  portal?: HTMLElement;
+  phantom?: boolean; // Custom data-* attributes used widely in tests/apps.
+  [dataAttribute: `data-${string}`]: unknown;
+};
+type VelesElementProps = VelesBaseProps & JSX.HTMLAttributes;
 type ComponentAPI = {
   // You can return a function from the mount callback, and it will be
   // automatically registered as `onUnmount` callback
   onMount: (cb: Function) => void | Function;
   onUnmount: (cb: Function) => void;
 };
-type ComponentFunction = (props: VelesElementProps, componentAPI: ComponentAPI) => VelesElement | VelesComponentObject | VelesStringElement | string | null;
+type ComponentFunction<Props extends object = VelesElementProps> = (props: Props, componentAPI: ComponentAPI) => VelesElement | VelesComponentObject | VelesStringElement | string | null;
 type AttributeHelper<T> = {
-  (htmlElement: HTMLElement, attributeName: string, node: VelesElement): T;
-  velesAttribute: boolean;
+  velesAttribute: true;
+  getValue: (htmlElement: HTMLElement, attributeName: string, node: VelesElement) => T;
 };
 type VelesComponentObject = {
   velesComponentObject: true;
-  element: ComponentFunction;
+  element: ComponentFunction<any>;
   props: VelesElementProps;
   insertAfter?: VelesComponentObject | HTMLElement | Text | null;
   html?: HTMLElement | Text;
@@ -1537,13 +1538,14 @@ type VelesComponentObject = {
 };
 //#endregion
 //#region src/create-element/create-element.d.ts
-declare function createElement(element: string | ComponentFunction, props?: VelesElementProps): VelesElement | VelesComponentObject;
+declare function createElement<Tag extends keyof JSX.IntrinsicElements>(element: Tag, props?: VelesBaseProps & JSX.IntrinsicElements[Tag]): VelesElement;
+declare function createElement<Props extends object>(element: ComponentFunction<Props>, props?: Props): VelesComponentObject;
 //#endregion
 //#region src/fragment.d.ts
 declare function Fragment({
   children
 }: {
   children?: VelesChildren;
-}): VelesElement | VelesComponentObject;
+}): VelesElement;
 //#endregion
 export { VelesComponentObject as a, JSX as c, VelesChildren as i, createElement as n, VelesElement as o, AttributeHelper as r, VelesStringElement as s, Fragment as t };

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

@@ -353,8 +353,9 @@ declare namespace JSX {
     z?: number | string | undefined | AttributeHelper<number | string | undefined>;
     zoomAndPan?: string | undefined | AttributeHelper<string | undefined>;
   }
-  export type TargetedEvent<Target extends EventTarget = EventTarget, TypedEvent extends Event = Event> = Omit<TypedEvent, "currentTarget"> & {
+  export type TargetedEvent<Target extends EventTarget = EventTarget, TypedEvent extends Event = Event> = Omit<TypedEvent, "currentTarget" | "target"> & {
     readonly currentTarget: Target;
+    readonly target: Target;
   };
   export type TargetedAnimationEvent<Target extends EventTarget> = TargetedEvent<Target, AnimationEvent>;
   export type TargetedClipboardEvent<Target extends EventTarget> = TargetedEvent<Target, ClipboardEvent>;
@@ -1494,33 +1495,33 @@ type ExecutedVelesComponent = {
 };
 // all supported child options
 type velesChild = string | number | VelesElement | VelesComponentObject | VelesStringElement;
-type VelesChildren = velesChild | velesChild[] | undefined | null;
-type VelesElementProps = {
+type VelesMaybeChild = velesChild | undefined | null;
+type VelesChildren = VelesMaybeChild | VelesMaybeChild[];
+type VelesBaseProps = {
   children?: VelesChildren;
   ref?: {
     velesRef: true;
     current: any;
   };
-  portal?: HTMLElement; // event handlers + any html properties
-  // the value can be either a string value
-  // or a function in case we support reactivity
-  // TODO: we can improve these types
-  [htmlAttribute: string]: any;
-} & JSX.HTMLAttributes;
+  portal?: HTMLElement;
+  phantom?: boolean; // Custom data-* attributes used widely in tests/apps.
+  [dataAttribute: `data-${string}`]: unknown;
+};
+type VelesElementProps = VelesBaseProps & JSX.HTMLAttributes;
 type ComponentAPI = {
   // You can return a function from the mount callback, and it will be
   // automatically registered as `onUnmount` callback
   onMount: (cb: Function) => void | Function;
   onUnmount: (cb: Function) => void;
 };
-type ComponentFunction = (props: VelesElementProps, componentAPI: ComponentAPI) => VelesElement | VelesComponentObject | VelesStringElement | string | null;
+type ComponentFunction<Props extends object = VelesElementProps> = (props: Props, componentAPI: ComponentAPI) => VelesElement | VelesComponentObject | VelesStringElement | string | null;
 type AttributeHelper<T> = {
-  (htmlElement: HTMLElement, attributeName: string, node: VelesElement): T;
-  velesAttribute: boolean;
+  velesAttribute: true;
+  getValue: (htmlElement: HTMLElement, attributeName: string, node: VelesElement) => T;
 };
 type VelesComponentObject = {
   velesComponentObject: true;
-  element: ComponentFunction;
+  element: ComponentFunction<any>;
   props: VelesElementProps;
   insertAfter?: VelesComponentObject | HTMLElement | Text | null;
   html?: HTMLElement | Text;
@@ -1537,13 +1538,14 @@ type VelesComponentObject = {
 };
 //#endregion
 //#region src/create-element/create-element.d.ts
-declare function createElement(element: string | ComponentFunction, props?: VelesElementProps): VelesElement | VelesComponentObject;
+declare function createElement<Tag extends keyof JSX.IntrinsicElements>(element: Tag, props?: VelesBaseProps & JSX.IntrinsicElements[Tag]): VelesElement;
+declare function createElement<Props extends object>(element: ComponentFunction<Props>, props?: Props): VelesComponentObject;
 //#endregion
 //#region src/fragment.d.ts
 declare function Fragment({
   children
 }: {
   children?: VelesChildren;
-}): VelesElement | VelesComponentObject;
+}): VelesElement;
 //#endregion
 export { VelesComponentObject as a, JSX as c, VelesChildren as i, createElement as n, VelesElement as o, AttributeHelper as r, VelesStringElement as s, Fragment as t };

package/dist/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require__utils = require("./_utils-gPluq0AT.cjs");
+const require__utils = require("./_utils-Cf3Xvo3q.cjs");
 //#region src/attach-component.ts
 /**
 * Attach Veles component tree to a regular HTML node.
@@ -186,15 +186,17 @@ function addUseValueMountHandler({ usedValue, get, trackers, trackingSelectorEle
 function updateUseAttributeValue({ element, value }) {
 	const { cb, htmlElement, attributeName, attributeValue } = element;
 	const newAttributeValue = cb ? cb(value) : value;
-	if (typeof newAttributeValue === "boolean") if (newAttributeValue) htmlElement.setAttribute(attributeName, "");
-	else htmlElement.removeAttribute(attributeName);
-	else if (attributeName.startsWith("on")) {
+	if (attributeName.startsWith("on")) {
 		if (attributeValue === newAttributeValue) return;
 		const eventName = attributeName.slice(2).toLocaleLowerCase();
 		if (attributeValue) htmlElement.removeEventListener(eventName, attributeValue);
 		if (newAttributeValue && typeof newAttributeValue === "function") htmlElement.addEventListener(eventName, newAttributeValue);
 		element.attributeValue = newAttributeValue;
-	} else htmlElement.setAttribute(attributeName, newAttributeValue);
+	} else require__utils.assignDomAttribute({
+		htmlElement,
+		attributeName,
+		value: newAttributeValue
+	});
 }
 //#endregion
 //#region src/create-state/update-render-each-value.ts
@@ -204,11 +206,7 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 		console.error("there is no wrapper component for the iterator");
 		return;
 	}
-	if (!wrapperComponent.executedVersion) {
-		console.error("it seems the wrapper component was not mounted");
-		return;
-	}
-	const wrapperVelesElementNode = require__utils.getExecutedComponentVelesNode(wrapperComponent.executedVersion);
+	const wrapperVelesElementNode = require__utils.getExecutedComponentVelesNode(require__utils.getMountedNodeExecutedVersion(wrapperComponent, "Iterator wrapper is expected to be mounted"));
 	const parentVelesElement = wrapperVelesElementNode.parentVelesElement;
 	if (!parentVelesElement) {
 		console.error("there is no parent Veles node for the iterator wrapper");
@@ -273,13 +271,13 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 		let offset = 0;
 		let currentElement = null;
 		newRenderedElements.forEach((newRenderedElement, index) => {
-			newChildRenderedComponents.push(newRenderedElement[0].executedVersion);
+			newChildRenderedComponents.push(require__utils.getMountedNodeExecutedVersion(newRenderedElement[0], "Iterator child is expected to be mounted"));
 			newChildComponents.push(newRenderedElement[0]);
 			if (positioningOffset[index]) offset = offset + positioningOffset[index];
 			const [newNode, calculatedKey, newState] = newRenderedElement;
 			const existingElement = elementsByKey[calculatedKey];
 			if (existingElement) {
-				const existingElementNode = require__utils.getExecutedComponentVelesNode(existingElement.node.executedVersion);
+				const existingElementNode = require__utils.getExecutedComponentVelesNode(require__utils.getMountedNodeExecutedVersion(existingElement.node, "Existing iterator node is expected to be mounted"));
 				if (existingElement.indexValue + offset === index) {
 					currentElement = existingElementNode.html;
 					return;
@@ -306,7 +304,8 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 					offset = offset - 1;
 				}
 			} else {
-				const newNodeVelesElement = require__utils.getExecutedComponentVelesNode(newNode.executedVersion);
+				const newNodeExecutedVersion = require__utils.getMountedNodeExecutedVersion(newNode, "New iterator node is expected to be mounted");
+				const newNodeVelesElement = require__utils.getExecutedComponentVelesNode(newNodeExecutedVersion);
 				newNodeVelesElement.parentVelesElement = parentVelesElement;
 				if (currentElement) currentElement.after(newNodeVelesElement.html);
 				else {
@@ -317,15 +316,16 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 				offset = offset + 1;
 				currentElement = newNodeVelesElement.html;
 				newElementsCount = newElementsCount + 1;
-				require__utils.callMountHandlers(newNode.executedVersion);
+				require__utils.callMountHandlers(newNodeExecutedVersion);
 			}
 		});
 		if (renderedElements.length === newRenderedElements.length + newElementsCount) {} else renderedElements.forEach(([oldNode, calculatedKey]) => {
 			if (renderedExistingElements[calculatedKey] === true) return;
 			else {
-				require__utils.getExecutedComponentVelesNode(oldNode.executedVersion).html.remove();
-				require__utils.callUnmountHandlers(oldNode.executedVersion);
-				if ("executedVelesNode" in wrapperVelesElementNode) wrapperVelesElementNode.childComponents = wrapperVelesElementNode.childComponents.filter((childComponent) => childComponent !== oldNode.executedVersion);
+				const oldNodeExecutedVersion = require__utils.getMountedNodeExecutedVersion(oldNode, "Removed iterator node is expected to be mounted");
+				require__utils.getExecutedComponentVelesNode(oldNodeExecutedVersion).html.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);
 			}
@@ -608,7 +608,7 @@ function createStateFromCore(core, subscribeCallback) {
 	});
 	const result = {
 		track: (cb, options = {}) => {
-			result.trackSelected(void 0, cb, options);
+			result.trackSelected((value) => value, cb, options);
 		},
 		trackSelected(selector, cb, options = {}) {
 			const selectedCore = selector ? core.map(selector, { equality: createCoreEquality(options.comparator) }) : options.comparator ? core.map((value) => value, { equality: createCoreEquality(options.comparator) }) : core;
@@ -712,28 +712,29 @@ function createStateFromCore(core, subscribeCallback) {
 			const originalValue = core.get();
 			let wasMounted = false;
 			const attributeValue = cb ? cb(originalValue) : originalValue;
-			const attributeHelper = (htmlElement, attributeName, node) => {
-				const trackingElement = {
-					cb,
-					htmlElement,
-					attributeName,
-					attributeValue
-				};
-				node._privateMethods._addMountHandler(() => {
-					trackers.trackingAttributes.push(trackingElement);
-					if (!wasMounted && core.get() === originalValue) {} else updateUseAttributeValue({
-						element: trackingElement,
-						value: core.get()
-					});
-					if (!wasMounted) wasMounted = true;
-					node._privateMethods._addUnmountHandler(() => {
-						trackers.trackingAttributes = trackers.trackingAttributes.filter((trackingAttribute) => trackingAttribute !== trackingElement);
+			return {
+				velesAttribute: true,
+				getValue(htmlElement, attributeName, node) {
+					const trackingElement = {
+						cb,
+						htmlElement,
+						attributeName,
+						attributeValue
+					};
+					node._privateMethods._addMountHandler(() => {
+						trackers.trackingAttributes.push(trackingElement);
+						if (!wasMounted && core.get() === originalValue) {} else updateUseAttributeValue({
+							element: trackingElement,
+							value: core.get()
+						});
+						if (!wasMounted) wasMounted = true;
+						node._privateMethods._addUnmountHandler(() => {
+							trackers.trackingAttributes = trackers.trackingAttributes.filter((trackingAttribute) => trackingAttribute !== trackingElement);
+						});
 					});
-				});
-				return attributeValue;
+					return attributeValue;
+				}
 			};
-			attributeHelper.velesAttribute = true;
-			return attributeHelper;
 		},
 		dispose: () => {
 			core.dispose();

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-D252pobF.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-C16zCm8L.cjs";
 
 //#region src/attach-component.d.ts
 /**
@@ -23,6 +23,7 @@ declare function onUnmount(cb: Function): void;
 //#region src/create-state/types.d.ts
 type StateEquality<ValueType> = (value1: ValueType, value2: ValueType) => boolean;
 type StateLike<ValueType> = State<ValueType>;
+type ArrayElement<T> = T extends ReadonlyArray<infer Element> ? Element : never;
 type State<ValueType> = {
   track(cb: (value: ValueType) => void | Function, options?: {
     callOnMount?: boolean;
@@ -40,16 +41,26 @@ type State<ValueType> = {
     <SelectorValueType>(selector: (value: ValueType) => SelectorValueType, cb?: (value: SelectorValueType) => VelesElement | VelesComponentObject | string | undefined | null, comparator?: (value1: SelectorValueType, value2: SelectorValueType) => boolean): VelesElement | VelesComponentObject | VelesStringElement;
   };
   attribute(cb?: (value: ValueType) => any): AttributeHelper<any>;
-  renderEach<Element>(options: {
+  renderEach<Element extends ArrayElement<ValueType> = ArrayElement<ValueType>>(options: ValueType extends ReadonlyArray<any> ? {
     key: string | ((options: {
       element: Element;
       index: number;
     }) => string);
-    selector?: (value: ValueType) => Element[];
+    selector?: undefined;
+  } : never, cb: (props: {
+    elementState: State<Element>;
+    indexState: State<number>;
+  }) => VelesElement | VelesComponentObject): VelesComponentObject | VelesElement;
+  renderEach<SelectorValueType extends ReadonlyArray<any>, Element extends ArrayElement<SelectorValueType> = ArrayElement<SelectorValueType>>(options: {
+    key: string | ((options: {
+      element: Element;
+      index: number;
+    }) => string);
+    selector: (value: ValueType) => SelectorValueType;
   }, cb: (props: {
     elementState: State<Element>;
     indexState: State<number>;
-  }) => VelesElement | VelesComponentObject): VelesComponentObject | VelesElement | null;
+  }) => VelesElement | VelesComponentObject): VelesComponentObject | VelesElement;
   map<SelectorValueType>(selector: (value: ValueType) => SelectorValueType, options?: {
     equality?: StateEquality<SelectorValueType>;
   }): State<SelectorValueType>;
@@ -101,7 +112,7 @@ declare function createContext<T>(): {
   }: {
     value: T;
     children?: VelesChildren;
-  }) => VelesElement | VelesComponentObject;
+  }) => VelesComponentObject;
   addContext: (value: T) => void;
   readContext: () => T;
 };
@@ -113,6 +124,6 @@ declare function Portal({
 }: {
   children?: VelesChildren;
   portalNode: HTMLElement;
-}): VelesElement | VelesComponentObject;
+}): VelesElement;
 //#endregion
 export { Fragment, Portal, type State, attachComponent, createContext, createElement, createRef, createState, onMount, onUnmount };

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-BdtgAtEr.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-yC0-T2O-.js";
 
 //#region src/attach-component.d.ts
 /**
@@ -23,6 +23,7 @@ declare function onUnmount(cb: Function): void;
 //#region src/create-state/types.d.ts
 type StateEquality<ValueType> = (value1: ValueType, value2: ValueType) => boolean;
 type StateLike<ValueType> = State<ValueType>;
+type ArrayElement<T> = T extends ReadonlyArray<infer Element> ? Element : never;
 type State<ValueType> = {
   track(cb: (value: ValueType) => void | Function, options?: {
     callOnMount?: boolean;
@@ -40,16 +41,26 @@ type State<ValueType> = {
     <SelectorValueType>(selector: (value: ValueType) => SelectorValueType, cb?: (value: SelectorValueType) => VelesElement | VelesComponentObject | string | undefined | null, comparator?: (value1: SelectorValueType, value2: SelectorValueType) => boolean): VelesElement | VelesComponentObject | VelesStringElement;
   };
   attribute(cb?: (value: ValueType) => any): AttributeHelper<any>;
-  renderEach<Element>(options: {
+  renderEach<Element extends ArrayElement<ValueType> = ArrayElement<ValueType>>(options: ValueType extends ReadonlyArray<any> ? {
     key: string | ((options: {
       element: Element;
       index: number;
     }) => string);
-    selector?: (value: ValueType) => Element[];
+    selector?: undefined;
+  } : never, cb: (props: {
+    elementState: State<Element>;
+    indexState: State<number>;
+  }) => VelesElement | VelesComponentObject): VelesComponentObject | VelesElement;
+  renderEach<SelectorValueType extends ReadonlyArray<any>, Element extends ArrayElement<SelectorValueType> = ArrayElement<SelectorValueType>>(options: {
+    key: string | ((options: {
+      element: Element;
+      index: number;
+    }) => string);
+    selector: (value: ValueType) => SelectorValueType;
   }, cb: (props: {
     elementState: State<Element>;
     indexState: State<number>;
-  }) => VelesElement | VelesComponentObject): VelesComponentObject | VelesElement | null;
+  }) => VelesElement | VelesComponentObject): VelesComponentObject | VelesElement;
   map<SelectorValueType>(selector: (value: ValueType) => SelectorValueType, options?: {
     equality?: StateEquality<SelectorValueType>;
   }): State<SelectorValueType>;
@@ -101,7 +112,7 @@ declare function createContext<T>(): {
   }: {
     value: T;
     children?: VelesChildren;
-  }) => VelesElement | VelesComponentObject;
+  }) => VelesComponentObject;
   addContext: (value: T) => void;
   readContext: () => T;
 };
@@ -113,6 +124,6 @@ declare function Portal({
 }: {
   children?: VelesChildren;
   portalNode: HTMLElement;
-}): VelesElement | VelesComponentObject;
+}): VelesElement;
 //#endregion
 export { Fragment, Portal, type State, attachComponent, createContext, createElement, createRef, createState, onMount, onUnmount };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as renderTree, c as createContext, d as Fragment, f as createElement, g as onUnmount, h as onMount, i as identity, l as getCurrentContext, m as hasCurrentLifecycleContext, n as callUnmountHandlers, o as unique, p as createTextElement, r as getExecutedComponentVelesNode, s as addPublicContext, t as callMountHandlers, u as popPublicContext } from "./_utils-BZ1SMqm2.js";
+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-CCdioDsh.js";
 //#region src/attach-component.ts
 /**
 * Attach Veles component tree to a regular HTML node.
@@ -185,15 +185,17 @@ function addUseValueMountHandler({ usedValue, get, trackers, trackingSelectorEle
 function updateUseAttributeValue({ element, value }) {
 	const { cb, htmlElement, attributeName, attributeValue } = element;
 	const newAttributeValue = cb ? cb(value) : value;
-	if (typeof newAttributeValue === "boolean") if (newAttributeValue) htmlElement.setAttribute(attributeName, "");
-	else htmlElement.removeAttribute(attributeName);
-	else if (attributeName.startsWith("on")) {
+	if (attributeName.startsWith("on")) {
 		if (attributeValue === newAttributeValue) return;
 		const eventName = attributeName.slice(2).toLocaleLowerCase();
 		if (attributeValue) htmlElement.removeEventListener(eventName, attributeValue);
 		if (newAttributeValue && typeof newAttributeValue === "function") htmlElement.addEventListener(eventName, newAttributeValue);
 		element.attributeValue = newAttributeValue;
-	} else htmlElement.setAttribute(attributeName, newAttributeValue);
+	} else assignDomAttribute({
+		htmlElement,
+		attributeName,
+		value: newAttributeValue
+	});
 }
 //#endregion
 //#region src/create-state/update-render-each-value.ts
@@ -203,11 +205,7 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 		console.error("there is no wrapper component for the iterator");
 		return;
 	}
-	if (!wrapperComponent.executedVersion) {
-		console.error("it seems the wrapper component was not mounted");
-		return;
-	}
-	const wrapperVelesElementNode = getExecutedComponentVelesNode(wrapperComponent.executedVersion);
+	const wrapperVelesElementNode = getExecutedComponentVelesNode(getMountedNodeExecutedVersion(wrapperComponent, "Iterator wrapper is expected to be mounted"));
 	const parentVelesElement = wrapperVelesElementNode.parentVelesElement;
 	if (!parentVelesElement) {
 		console.error("there is no parent Veles node for the iterator wrapper");
@@ -272,13 +270,13 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 		let offset = 0;
 		let currentElement = null;
 		newRenderedElements.forEach((newRenderedElement, index) => {
-			newChildRenderedComponents.push(newRenderedElement[0].executedVersion);
+			newChildRenderedComponents.push(getMountedNodeExecutedVersion(newRenderedElement[0], "Iterator child is expected to be mounted"));
 			newChildComponents.push(newRenderedElement[0]);
 			if (positioningOffset[index]) offset = offset + positioningOffset[index];
 			const [newNode, calculatedKey, newState] = newRenderedElement;
 			const existingElement = elementsByKey[calculatedKey];
 			if (existingElement) {
-				const existingElementNode = getExecutedComponentVelesNode(existingElement.node.executedVersion);
+				const existingElementNode = getExecutedComponentVelesNode(getMountedNodeExecutedVersion(existingElement.node, "Existing iterator node is expected to be mounted"));
 				if (existingElement.indexValue + offset === index) {
 					currentElement = existingElementNode.html;
 					return;
@@ -305,7 +303,8 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 					offset = offset - 1;
 				}
 			} else {
-				const newNodeVelesElement = getExecutedComponentVelesNode(newNode.executedVersion);
+				const newNodeExecutedVersion = getMountedNodeExecutedVersion(newNode, "New iterator node is expected to be mounted");
+				const newNodeVelesElement = getExecutedComponentVelesNode(newNodeExecutedVersion);
 				newNodeVelesElement.parentVelesElement = parentVelesElement;
 				if (currentElement) currentElement.after(newNodeVelesElement.html);
 				else {
@@ -316,15 +315,16 @@ function updateUseValueIteratorValue({ value, trackingIterator, createState }) {
 				offset = offset + 1;
 				currentElement = newNodeVelesElement.html;
 				newElementsCount = newElementsCount + 1;
-				callMountHandlers(newNode.executedVersion);
+				callMountHandlers(newNodeExecutedVersion);
 			}
 		});
 		if (renderedElements.length === newRenderedElements.length + newElementsCount) {} else renderedElements.forEach(([oldNode, calculatedKey]) => {
 			if (renderedExistingElements[calculatedKey] === true) return;
 			else {
-				getExecutedComponentVelesNode(oldNode.executedVersion).html.remove();
-				callUnmountHandlers(oldNode.executedVersion);
-				if ("executedVelesNode" in wrapperVelesElementNode) wrapperVelesElementNode.childComponents = wrapperVelesElementNode.childComponents.filter((childComponent) => childComponent !== oldNode.executedVersion);
+				const oldNodeExecutedVersion = getMountedNodeExecutedVersion(oldNode, "Removed iterator node is expected to be mounted");
+				getExecutedComponentVelesNode(oldNodeExecutedVersion).html.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);
 			}
@@ -607,7 +607,7 @@ function createStateFromCore(core, subscribeCallback) {
 	});
 	const result = {
 		track: (cb, options = {}) => {
-			result.trackSelected(void 0, cb, options);
+			result.trackSelected((value) => value, cb, options);
 		},
 		trackSelected(selector, cb, options = {}) {
 			const selectedCore = selector ? core.map(selector, { equality: createCoreEquality(options.comparator) }) : options.comparator ? core.map((value) => value, { equality: createCoreEquality(options.comparator) }) : core;
@@ -711,28 +711,29 @@ function createStateFromCore(core, subscribeCallback) {
 			const originalValue = core.get();
 			let wasMounted = false;
 			const attributeValue = cb ? cb(originalValue) : originalValue;
-			const attributeHelper = (htmlElement, attributeName, node) => {
-				const trackingElement = {
-					cb,
-					htmlElement,
-					attributeName,
-					attributeValue
-				};
-				node._privateMethods._addMountHandler(() => {
-					trackers.trackingAttributes.push(trackingElement);
-					if (!wasMounted && core.get() === originalValue) {} else updateUseAttributeValue({
-						element: trackingElement,
-						value: core.get()
-					});
-					if (!wasMounted) wasMounted = true;
-					node._privateMethods._addUnmountHandler(() => {
-						trackers.trackingAttributes = trackers.trackingAttributes.filter((trackingAttribute) => trackingAttribute !== trackingElement);
+			return {
+				velesAttribute: true,
+				getValue(htmlElement, attributeName, node) {
+					const trackingElement = {
+						cb,
+						htmlElement,
+						attributeName,
+						attributeValue
+					};
+					node._privateMethods._addMountHandler(() => {
+						trackers.trackingAttributes.push(trackingElement);
+						if (!wasMounted && core.get() === originalValue) {} else updateUseAttributeValue({
+							element: trackingElement,
+							value: core.get()
+						});
+						if (!wasMounted) wasMounted = true;
+						node._privateMethods._addUnmountHandler(() => {
+							trackers.trackingAttributes = trackers.trackingAttributes.filter((trackingAttribute) => trackingAttribute !== trackingElement);
+						});
 					});
-				});
-				return attributeValue;
+					return attributeValue;
+				}
 			};
-			attributeHelper.velesAttribute = true;
-			return attributeHelper;
 		},
 		dispose: () => {
 			core.dispose();

package/dist/jsx-runtime.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require__utils = require("./_utils-gPluq0AT.cjs");
+const require__utils = require("./_utils-Cf3Xvo3q.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-D252pobF.cjs";
+import { c as JSX, n as createElement, t as Fragment } from "./fragment-C16zCm8L.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-BdtgAtEr.js";
+import { c as JSX, n as createElement, t as Fragment } from "./fragment-yC0-T2O-.js";
 export { Fragment, type JSX, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/dist/jsx-runtime.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veles",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "description": "UI library with main focus on performance",
   "type": "module",
   "main": "dist/index.js",