veles 0.0.7 → 0.0.8

package/dist/index.cjs

@@ -21,6 +21,7 @@ var src_exports = {};
 __export(src_exports, {
   Fragment: () => Fragment,
   attachComponent: () => attachComponent,
+  createContext: () => createContext,
   createElement: () => createElement,
   createRef: () => createRef,
   createState: () => createState,
@@ -29,56 +30,127 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/_utils.ts
-function getComponentVelesNode(component) {
-  const componentsTree = [];
-  if ("velesStringElement" in component) {
-    return {
-      velesElementNode: component,
-      componentsTree: []
-    };
-  }
-  let childNode = component;
-  while ("velesComponent" in childNode) {
-    componentsTree.push(childNode);
-    if ("velesStringElement" in childNode.tree) {
-      return {
-        velesElementNode: childNode.tree,
-        componentsTree
-      };
-    } else {
-      childNode = childNode.tree;
-    }
-  }
-  return { velesElementNode: childNode, componentsTree };
+// src/hooks/lifecycle.ts
+var contextStack = [];
+var currentContext = null;
+function addContext(newContext) {
+  contextStack.push(newContext);
+  currentContext = newContext;
 }
-function callMountHandlers(component) {
-  if ("velesStringElement" in component) {
-    return;
-  }
-  if ("velesComponent" in component) {
-    component._privateMethods._callMountHandlers();
-    callMountHandlers(component.tree);
+function popContext() {
+  contextStack.pop();
+  currentContext = contextStack[contextStack.length - 1];
+}
+function onMount(cb) {
+  if (currentContext) {
+    currentContext.onMount(cb);
+  } else {
+    console.error("missing current context");
   }
-  if ("velesNode" in component) {
-    component.childComponents.forEach(
-      (childComponent) => callMountHandlers(childComponent)
-    );
+}
+function onUnmount(cb) {
+  if (currentContext) {
+    currentContext.onUnmount(cb);
+  } else {
+    console.error("missing current context");
   }
 }
-function identity(value1, value2) {
-  return value1 === value2;
+
+// src/create-element/create-text-element.ts
+function createTextElement(text) {
+  const mountHandlers = [];
+  const unmountHandlers = [];
+  return {
+    velesStringElement: true,
+    // in case there is no text, we create an empty Text node, so we still can
+    // have a reference to it, replace it, call lifecycle methods, etc
+    html: document.createTextNode(text || ""),
+    _privateMethods: {
+      _addMountHandler(cb) {
+        mountHandlers.push(cb);
+      },
+      _callMountHandlers() {
+        mountHandlers.forEach((cb) => cb());
+      },
+      _addUnmountHandler: (cb) => {
+        unmountHandlers.push(cb);
+      },
+      _callUnmountHandlers: () => {
+        unmountHandlers.forEach((cb) => cb());
+      }
+    }
+  };
 }
-function unique(arr) {
-  const map = /* @__PURE__ */ new Map();
-  const resultArr = [];
-  arr.forEach((element) => {
-    if (map.has(element))
-      return;
-    map.set(element, true);
-    resultArr.push(element);
-  });
-  return resultArr;
+
+// src/create-element/parse-component.ts
+function parseComponent({
+  element,
+  props
+}) {
+  const mountCbs = [];
+  const unmountCbs = [];
+  return {
+    velesComponentObject: true,
+    element,
+    props,
+    _privateMethods: {
+      _addMountHandler(cb) {
+        mountCbs.push(cb);
+      },
+      _addUnmountHandler: (cb) => {
+        unmountCbs.push(cb);
+      },
+      _callMountHandlers: () => {
+        mountCbs.forEach((cb) => cb());
+      },
+      _callUnmountHandlers: () => {
+        unmountCbs.forEach((cb) => cb());
+      }
+    }
+  };
+}
+function executeComponent({
+  element,
+  props
+}) {
+  let componentUnmountCbs = [];
+  let componentMountCbs = [];
+  const componentAPI = {
+    onMount: (cb) => {
+      componentMountCbs.push(cb);
+    },
+    onUnmount: (cb) => {
+      componentUnmountCbs.push(cb);
+    }
+  };
+  addContext(componentAPI);
+  const _componentTree = element(props, componentAPI);
+  const componentTree = typeof _componentTree === "string" || !_componentTree ? createTextElement(_componentTree) : _componentTree;
+  popContext();
+  const velesComponent = {
+    velesComponent: true,
+    tree: componentTree,
+    _privateMethods: {
+      _addMountHandler(cb) {
+        componentMountCbs.push(cb);
+      },
+      _addUnmountHandler: (cb) => {
+        componentAPI.onUnmount(cb);
+      },
+      _callMountHandlers: () => {
+        componentMountCbs.forEach((cb) => {
+          const mountCbResult = cb();
+          if (typeof mountCbResult === "function") {
+            componentAPI.onUnmount(mountCbResult);
+          }
+        });
+      },
+      _callUnmountHandlers: () => {
+        componentUnmountCbs.forEach((cb) => cb());
+      }
+    }
+  };
+  return velesComponent;
 }
 
 // src/create-element/parse-children.ts
@@ -91,30 +163,36 @@ function parseChildren({
   if (children === void 0 || children === null) {
     return childComponents;
   }
+  let lastInsertedNode = null;
   (Array.isArray(children) ? children : [children]).forEach(
     (childComponent) => {
       if (typeof childComponent === "string") {
-        const text = document.createTextNode(childComponent);
-        htmlElement.append(text);
+        const textNode = createTextElement(childComponent);
+        htmlElement.append(textNode.html);
+        lastInsertedNode = textNode.html;
+        childComponents.push(textNode);
       } else if (typeof childComponent === "number") {
-        const text = document.createTextNode(String(childComponent));
-        htmlElement.append(text);
+        const textNode = createTextElement(String(childComponent));
+        htmlElement.append(textNode.html);
+        lastInsertedNode = textNode.html;
+        childComponents.push(textNode);
       } else if (typeof childComponent === "object" && childComponent && "velesNode" in childComponent && (childComponent == null ? void 0 : childComponent.velesNode)) {
         if (childComponent.phantom) {
           childComponent.childComponents.forEach((childComponentofPhantom) => {
             if ("velesNode" in childComponentofPhantom) {
               htmlElement.append(childComponentofPhantom.html);
               childComponentofPhantom.parentVelesElement = velesNode;
-            } else {
-              const { velesElementNode } = getComponentVelesNode(
-                childComponentofPhantom
-              );
+              lastInsertedNode = childComponentofPhantom.html;
+            } else if ("velesStringElement" in childComponentofPhantom) {
+              const velesElementNode = childComponentofPhantom;
               if (!velesElementNode) {
                 console.error("can't find HTML tree in a component chain");
               } else {
                 htmlElement.append(velesElementNode.html);
+                lastInsertedNode = velesElementNode.html;
                 velesElementNode.parentVelesElement = velesNode;
               }
+            } else {
             }
           });
           childComponent.parentVelesElement = velesNode;
@@ -123,39 +201,18 @@ function parseChildren({
           htmlElement.append(childComponent.html);
           childComponent.parentVelesElement = velesNode;
           childComponents.push(childComponent);
+          lastInsertedNode = childComponent.html;
         }
-      } else if (typeof childComponent === "object" && childComponent && "velesComponent" in childComponent && (childComponent == null ? void 0 : childComponent.velesComponent)) {
-        const { componentsTree, velesElementNode } = getComponentVelesNode(childComponent);
-        if (!velesElementNode) {
-          console.error("can't find HTML tree in a component chain");
-        } else {
-          if ("velesNode" in velesElementNode && velesElementNode.phantom) {
-            velesElementNode.childComponents.forEach(
-              (childComponentofPhantom) => {
-                if ("velesNode" in childComponentofPhantom) {
-                  htmlElement.append(childComponentofPhantom.html);
-                  childComponentofPhantom.parentVelesElement = velesNode;
-                } else {
-                  const { componentsTree: componentsTree2, velesElementNode: velesElementNode2 } = getComponentVelesNode(childComponentofPhantom);
-                  if (!velesElementNode2) {
-                    console.error("can't find HTML tree in a component chain");
-                  } else {
-                    htmlElement.append(velesElementNode2.html);
-                    velesElementNode2.parentVelesElement = velesNode;
-                  }
-                }
-              }
-            );
-          } else {
-            htmlElement.append(velesElementNode.html);
-          }
-          velesElementNode.parentVelesElement = velesNode;
-          childComponents.push(childComponent);
-        }
+      } else if (typeof childComponent === "object" && childComponent && "velesComponentObject" in childComponent) {
+        childComponent.insertAfter = lastInsertedNode;
+        childComponent.parentVelesElement = velesNode;
+        childComponents.push(childComponent);
+        lastInsertedNode = childComponent;
       } else if (typeof childComponent === "object" && childComponent && "velesStringElement" in childComponent && (childComponent == null ? void 0 : childComponent.velesStringElement)) {
         htmlElement.append(childComponent.html);
         childComponent.parentVelesElement = velesNode;
         childComponents.push(childComponent);
+        lastInsertedNode = childComponent.html;
       }
     }
   );
@@ -172,95 +229,33 @@ function assignAttributes({
     const isFunction = typeof value === "function";
     if (isFunction && value.velesAttribute === true) {
       const attributeValue = value(htmlElement, key, velesNode);
-      htmlElement.setAttribute(key, attributeValue);
-    } else if (
-      // basically, any form of `on` handlers, like `onClick`, `onCopy`, etc
-      isFunction && key.length > 2 && key.startsWith("on")
-    ) {
-      htmlElement.addEventListener(
-        key[2].toLocaleLowerCase() + key.slice(3),
-        value
-      );
+      assignAttribute({ key, value: attributeValue, htmlElement });
     } else {
-      htmlElement.setAttribute(key, value);
+      assignAttribute({ key, value, htmlElement });
     }
   });
 }
-
-// src/hooks/lifecycle.ts
-var contextStack = [];
-var currentContext = null;
-function addContext(newContext) {
-  contextStack.push(newContext);
-  currentContext = newContext;
-}
-function popContext() {
-  contextStack.pop();
-  currentContext = contextStack[contextStack.length - 1];
-}
-function onMount(cb) {
-  if (currentContext) {
-    currentContext.onMount(cb);
-  } else {
-    console.error("missing current context");
-  }
-}
-function onUnmount(cb) {
-  if (currentContext) {
-    currentContext.onUnmount(cb);
-  } else {
-    console.error("missing current context");
-  }
-}
-
-// src/create-element/parse-component.ts
-function parseComponent({
-  element,
-  props
+function assignAttribute({
+  key,
+  value,
+  htmlElement
 }) {
-  const componentUnmountCbs = [];
-  const componentMountCbs = [];
-  const componentAPI = {
-    onMount: (cb) => {
-      componentMountCbs.push(cb);
-    },
-    onUnmount: (cb) => {
-      componentUnmountCbs.push(cb);
-    }
-  };
-  addContext(componentAPI);
-  const _componentTree = element(props, componentAPI);
-  const componentTree = typeof _componentTree === "string" || !_componentTree ? {
-    velesStringElement: true,
-    html: document.createTextNode(
-      typeof _componentTree === "string" ? _componentTree : ""
-    )
-  } : _componentTree;
-  popContext();
-  const velesComponent = {
-    velesComponent: true,
-    tree: componentTree,
-    _privateMethods: {
-      _addUnmountHandler: (cb) => {
-        componentAPI.onUnmount(cb);
-      },
-      _callMountHandlers: () => {
-        componentMountCbs.forEach((cb) => {
-          const mountCbResult = cb();
-          if (typeof mountCbResult === "function") {
-            componentAPI.onUnmount(mountCbResult);
-          }
-        });
-      },
-      _callUnmountHandlers: () => {
-        componentUnmountCbs.forEach((cb) => cb());
-        if ("_privateMethods" in velesComponent.tree) {
-          velesComponent.tree._privateMethods._callUnmountHandlers();
-        }
-      }
+  if (
+    // basically, any form of `on` handlers, like `onClick`, `onCopy`, etc
+    typeof value === "function" && key.startsWith("on")
+  ) {
+    htmlElement.addEventListener(
+      key[2].toLocaleLowerCase() + key.slice(3),
+      value
+    );
+  } else {
+    if (typeof value === "boolean") {
+      if (value)
+        htmlElement.setAttribute(key, "");
+    } else {
+      htmlElement.setAttribute(key, value);
     }
-  };
-  return velesComponent;
+  }
 }
 
 // src/create-element/create-element.ts
@@ -277,23 +272,25 @@ function createElement(element, props = {}) {
       htmlElement: newElement,
       velesNode
     });
-    let unmountHandlers = [];
-    const callUnmountHandlers = () => {
-      unmountHandlers.forEach((cb) => cb());
-      unmountHandlers = [];
-      childComponents.forEach((childComponent) => {
-        childComponent._privateMethods._callUnmountHandlers();
-      });
-    };
+    const unmountHandlers = [];
     velesNode.html = newElement;
     velesNode.velesNode = true;
     velesNode.childComponents = childComponents;
     velesNode.phantom = phantom;
+    const mountHandlers = [];
     velesNode._privateMethods = {
-      _addUnmountHandler: (cb) => {
+      _addMountHandler(cb) {
+        mountHandlers.push(cb);
+      },
+      _callMountHandlers() {
+        mountHandlers.forEach((cb) => cb());
+      },
+      _addUnmountHandler(cb) {
         unmountHandlers.push(cb);
       },
-      _callUnmountHandlers: callUnmountHandlers
+      _callUnmountHandlers() {
+        unmountHandlers.forEach((cb) => cb());
+      }
     };
     assignAttributes({ props: otherProps, htmlElement: newElement, velesNode });
     return velesNode;
@@ -305,347 +302,766 @@ function createElement(element, props = {}) {
   );
 }
 
+// src/fragment.ts
+function Fragment({ children }) {
+  return createElement("div", {
+    phantom: true,
+    children
+  });
+}
+
+// src/context/index.ts
+var publicContextStack = [];
+var contextIdCounter = 1;
+function createContext() {
+  const contextId = contextIdCounter++;
+  function addContext2(value) {
+    const currentContextObject = publicContextStack[publicContextStack.length - 1];
+    if (!currentContextObject) {
+      console.error("cannot add Context due to missing stack value");
+    } else {
+      publicContextStack[publicContextStack.length - 1] = {
+        ...currentContextObject,
+        [contextId]: value
+      };
+    }
+  }
+  return {
+    Provider: ({ value, children }) => {
+      addContext2(value);
+      return createElement(Fragment, { children });
+    },
+    addContext: addContext2,
+    readContext: () => {
+      const currentContext2 = publicContextStack[publicContextStack.length - 1];
+      if (!currentContext2) {
+        console.error("no Context currently available");
+      } else {
+        return currentContext2[contextId];
+      }
+    }
+  };
+}
+function addPublicContext(specificContext) {
+  if (specificContext) {
+    publicContextStack.push(specificContext);
+  } else {
+    if (publicContextStack.length === 0) {
+      publicContextStack.push({});
+    } else {
+      const currentContext2 = publicContextStack[publicContextStack.length - 1];
+      publicContextStack.push(currentContext2);
+    }
+  }
+}
+function popPublicContext() {
+  publicContextStack.pop();
+}
+function getCurrentContext() {
+  return publicContextStack[publicContextStack.length - 1];
+}
+
+// src/_utils.ts
+function getExecutedComponentVelesNode(component) {
+  if ("executedVelesStringElement" in component) {
+    return component;
+  }
+  let childNode = component;
+  while ("executedVelesComponent" in childNode) {
+    if ("executedVelesStringElement" in childNode.tree) {
+      return childNode.tree;
+    } else {
+      childNode = childNode.tree;
+    }
+  }
+  return childNode;
+}
+function renderTree(component, { parentVelesElement } = {}) {
+  if ("velesStringElement" in component) {
+    const executedString = {
+      executedVelesStringElement: true,
+      _privateMethods: component._privateMethods,
+      html: component.html,
+      parentVelesElement
+    };
+    if (component.needExecutedVersion) {
+      component.executedVersion = executedString;
+    }
+    return executedString;
+  } else if ("velesComponentObject" in component) {
+    addPublicContext();
+    const componentTree = executeComponent(component);
+    const executedComponent = {};
+    executedComponent.executedVelesComponent = true;
+    executedComponent.tree = renderTree(componentTree.tree);
+    popPublicContext();
+    executedComponent._privateMethods = {
+      ...componentTree._privateMethods,
+      _callMountHandlers: () => {
+        component._privateMethods._callMountHandlers();
+        componentTree._privateMethods._callMountHandlers();
+      },
+      _callUnmountHandlers: () => {
+        component._privateMethods._callUnmountHandlers();
+        componentTree._privateMethods._callUnmountHandlers();
+      }
+    };
+    const newNode = getExecutedComponentVelesNode(executedComponent);
+    if (parentVelesElement) {
+      if (component.insertAfter) {
+        if ("velesComponentObject" in component.insertAfter) {
+          const lastNode = insertNode({
+            velesElement: newNode,
+            adjacentNode: component.insertAfter.html,
+            parentVelesElement
+          });
+          component.html = lastNode;
+        } else {
+          const lastNode = insertNode({
+            velesElement: newNode,
+            adjacentNode: component.insertAfter,
+            parentVelesElement
+          });
+          component.html = lastNode;
+        }
+      } else {
+        const lastNode = insertNode({
+          velesElement: newNode,
+          // it means we are inserting the first element
+          adjacentNode: null,
+          parentVelesElement
+        });
+        component.html = lastNode;
+      }
+      newNode.parentVelesElement = parentVelesElement;
+    }
+    if (component.needExecutedVersion) {
+      component.executedVersion = executedComponent;
+    }
+    return executedComponent;
+  } else if ("velesNode" in component) {
+    const executedNode = {};
+    executedNode.executedVelesNode = true;
+    executedNode._privateMethods = component._privateMethods;
+    executedNode.html = component.html;
+    if (parentVelesElement) {
+      executedNode.parentVelesElement = parentVelesElement;
+    }
+    if (component.phantom) {
+      executedNode.phantom = component.phantom;
+    }
+    executedNode.childComponents = component.childComponents.map(
+      (childComponent) => renderTree(childComponent, { parentVelesElement: executedNode })
+    );
+    if (component.needExecutedVersion) {
+      component.executedVersion = executedNode;
+    }
+    return executedNode;
+  }
+}
+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;
+        }
+      }
+    );
+    velesElement.parentVelesElement = parentVelesElement;
+    return lastInsertedNode;
+  } else {
+    if (adjacentNode) {
+      adjacentNode.after(velesElement.html);
+    } else {
+      parentVelesElement.html.prepend(velesElement.html);
+    }
+    velesElement.parentVelesElement = parentVelesElement;
+    return velesElement.html;
+  }
+}
+function callMountHandlers(component) {
+  component._privateMethods._callMountHandlers();
+  if ("executedVelesStringElement" in component) {
+    return;
+  }
+  if ("executedVelesComponent" in component) {
+    callMountHandlers(component.tree);
+  }
+  if ("executedVelesNode" in component) {
+    component.childComponents.forEach(
+      (childComponent) => callMountHandlers(childComponent)
+    );
+  }
+}
+function callUnmountHandlers(component) {
+  if ("executedVelesStringElement" in component) {
+  } else if ("executedVelesComponent" in component) {
+    callUnmountHandlers(component.tree);
+  } else if ("executedVelesNode" in component) {
+    component.childComponents.forEach(
+      (childComponent) => callUnmountHandlers(childComponent)
+    );
+  }
+  component._privateMethods._callUnmountHandlers();
+}
+function identity(value1, value2) {
+  return value1 === value2;
+}
+function unique(arr) {
+  const map = /* @__PURE__ */ new Map();
+  const resultArr = [];
+  arr.forEach((element) => {
+    if (map.has(element))
+      return;
+    map.set(element, true);
+    resultArr.push(element);
+  });
+  return resultArr;
+}
+
 // src/attach-component.ts
 function attachComponent({
   htmlElement,
   component
 }) {
   const wrappedApp = createElement("div", { children: [component] });
-  const { velesElementNode } = getComponentVelesNode(wrappedApp);
+  const wrappedAppTree = renderTree(wrappedApp);
+  const velesElementNode = getExecutedComponentVelesNode(wrappedAppTree);
   htmlElement.appendChild(velesElementNode.html);
-  callMountHandlers(wrappedApp);
+  callMountHandlers(wrappedAppTree);
   return () => {
+    callUnmountHandlers(wrappedAppTree);
     velesElementNode.html.remove();
   };
 }
 
-// src/create-element/create-text-element.ts
-function createTextElement(text) {
-  const unmountHandlers = [];
-  return {
-    velesStringElement: true,
-    // in case there is no text, we create an empty Text node, so we still can
-    // have a reference to it, replace it, call lifecycle methods, etc
-    html: document.createTextNode(text || ""),
-    _privateMethods: {
-      _addUnmountHandler: (cb) => {
-        unmountHandlers.push(cb);
-      },
-      _callUnmountHandlers: () => {
-        unmountHandlers.forEach((cb) => cb());
-      }
-    }
+// src/create-state/update-usevalue-selector-value.ts
+function updateUseValueSelector({
+  value,
+  selectorTrackingElement,
+  newTrackingSelectorElements,
+  trackers,
+  getValue
+}) {
+  const { selectedValue, selector, cb, node, comparator, savedContext } = selectorTrackingElement;
+  const newSelectedValue = selector ? selector(value) : value;
+  if (comparator(selectedValue, newSelectedValue)) {
+    newTrackingSelectorElements.push(selectorTrackingElement);
+    return;
+  }
+  addPublicContext(savedContext);
+  const returnednewNode = cb ? cb(newSelectedValue) : newSelectedValue == void 0 ? "" : String(newSelectedValue);
+  const newNode = !returnednewNode || typeof returnednewNode === "string" ? createTextElement(returnednewNode) : returnednewNode;
+  const newRenderedNode = renderTree(newNode);
+  popPublicContext();
+  newNode.executedVersion = newRenderedNode;
+  if (!node.executedVersion) {
+    console.error("the node was not mounted");
+    return;
+  }
+  const oldVelesElementNode = getExecutedComponentVelesNode(
+    node.executedVersion
+  );
+  const newVelesElementNode = getExecutedComponentVelesNode(newRenderedNode);
+  const parentVelesElement = node.parentVelesElement;
+  const parentVelesElementRendered = oldVelesElementNode.parentVelesElement;
+  const newTrackingSelectorElement = {
+    selector,
+    selectedValue: newSelectedValue,
+    cb,
+    node: newNode,
+    comparator,
+    savedContext
   };
-}
-
-// src/hooks/create-state.ts
-function createState(initialValue, subscribeCallback) {
-  let value = initialValue;
-  let previousValue = void 0;
-  let trackingEffects = [];
-  let trackingSelectorElements = [];
-  let trackingAttributes = [];
-  let trackingIterators = [];
-  const _triggerUpdates = () => {
-    const newTrackingSelectorElements = [];
-    trackingSelectorElements.forEach((selectorTrackingElement) => {
-      const { selectedValue, selector, cb, node, comparator } = selectorTrackingElement;
-      const newSelectedValue = selector ? selector(value) : value;
-      if (comparator(selectedValue, newSelectedValue)) {
-        newTrackingSelectorElements.push(selectorTrackingElement);
-        return;
-      }
-      const returnednewNode = cb ? cb(newSelectedValue) : String(newSelectedValue);
-      const newNode = !returnednewNode || typeof returnednewNode === "string" ? createTextElement(returnednewNode) : returnednewNode;
-      const { velesElementNode: oldVelesElementNode } = getComponentVelesNode(node);
-      const { velesElementNode: newVelesElementNode } = getComponentVelesNode(newNode);
-      const parentVelesElement = oldVelesElementNode.parentVelesElement;
-      const newTrackingSelectorElement = {
-        selector,
-        selectedValue: newSelectedValue,
-        cb,
-        node: newNode,
-        comparator
+  if (parentVelesElementRendered) {
+    newNode.parentVelesElement = parentVelesElement;
+    newVelesElementNode.parentVelesElement = parentVelesElementRendered;
+    if ("executedVelesNode" in newVelesElementNode && newVelesElementNode.phantom) {
+      const insertAllPhantomChildren = (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;
+              }
+            }
+          }
+        );
       };
-      if (parentVelesElement) {
-        newVelesElementNode.parentVelesElement = parentVelesElement;
-        if ("velesNode" in newVelesElementNode && newVelesElementNode.phantom) {
-          const insertAllPhantomChildren = (adjacentNode) => {
-            newVelesElementNode.childComponents.forEach(
-              (childComponentofPhantom) => {
-                if ("velesNode" in childComponentofPhantom) {
-                  adjacentNode.html.before(childComponentofPhantom.html);
-                  childComponentofPhantom.parentVelesElement = adjacentNode.parentVelesElement;
-                } else {
-                  const { velesElementNode } = getComponentVelesNode(
-                    childComponentofPhantom
-                  );
-                  if (!velesElementNode) {
-                    console.error("can't find HTML tree in a component chain");
-                  } else {
-                    adjacentNode.html.before(velesElementNode.html);
-                    velesElementNode.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;
               }
-            );
-          };
-          if ("velesNode" in oldVelesElementNode && oldVelesElementNode.phantom) {
-            let isInserted = false;
-            oldVelesElementNode.childComponents.forEach(
-              (childComponentofPhantom) => {
-                if ("velesNode" in childComponentofPhantom) {
-                  if (!isInserted) {
-                    insertAllPhantomChildren(childComponentofPhantom);
-                    isInserted = true;
-                  }
-                  childComponentofPhantom.html.remove();
-                } else {
-                  const { velesElementNode } = getComponentVelesNode(
-                    childComponentofPhantom
-                  );
-                  if (!velesElementNode) {
-                    console.error("can't find HTML tree in a component chain");
-                  } else {
-                    if (!isInserted) {
-                      insertAllPhantomChildren(velesElementNode);
-                      isInserted = true;
-                    }
-                    velesElementNode.html.remove();
-                  }
+              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();
               }
-            );
-          } else {
-            insertAllPhantomChildren(oldVelesElementNode);
-            oldVelesElementNode.html.remove();
+            }
           }
-        } else {
-          if ("velesNode" in oldVelesElementNode && oldVelesElementNode.phantom) {
-            let isInserted = false;
-            oldVelesElementNode.childComponents.forEach(
-              (childComponentofPhantom) => {
-                if ("velesNode" in childComponentofPhantom) {
-                  if (!isInserted) {
-                    childComponentofPhantom.html.before(
-                      newVelesElementNode.html
-                    );
-                    isInserted = true;
-                  }
-                  childComponentofPhantom.html.remove();
-                } else {
-                  const { velesElementNode } = getComponentVelesNode(
-                    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();
-                  }
+        );
+      } else {
+        insertAllPhantomChildren(oldVelesElementNode);
+        oldVelesElementNode.html.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();
               }
-            );
-          } else {
-            parentVelesElement.html.replaceChild(
-              newVelesElementNode.html,
-              oldVelesElementNode.html
-            );
+            }
           }
-        }
-        parentVelesElement.childComponents = parentVelesElement.childComponents.map(
-          (childComponent) => childComponent === node ? newNode : node
         );
-        node._privateMethods._callUnmountHandlers();
-        callMountHandlers(newNode);
-        newNode._privateMethods._addUnmountHandler(() => {
-          trackingSelectorElements = trackingSelectorElements.filter(
-            (el) => el !== newTrackingSelectorElement
-          );
-        });
       } else {
-        console.log("parent node was not found");
+        try {
+          parentVelesElementRendered.html.replaceChild(
+            newVelesElementNode.html,
+            oldVelesElementNode.html
+          );
+        } catch (e) {
+          console.error("failed to update...");
+          console.log(document.body.innerHTML);
+          console.log(oldVelesElementNode.parentVelesElement.html.innerHTML);
+          console.log(
+            //@ts-expect-error
+            oldVelesElementNode.parentVelesElement.childComponents[0].html.textContent
+          );
+        }
       }
-      newTrackingSelectorElements.push(newTrackingSelectorElement);
-    });
-    trackingSelectorElements = unique(
-      trackingSelectorElements.concat(newTrackingSelectorElements)
+    }
+    parentVelesElementRendered.childComponents = parentVelesElementRendered.childComponents.map(
+      (childComponent) => childComponent === node.executedVersion ? newRenderedNode : childComponent
     );
-    trackingAttributes.forEach(({ cb, htmlElement, attributeName }) => {
-      const newAttributeValue = cb ? cb(value) : value;
-      htmlElement.setAttribute(attributeName, newAttributeValue);
+    if (parentVelesElement == null ? void 0 : parentVelesElement.childComponents) {
+      parentVelesElement.childComponents = parentVelesElement.childComponents.map(
+        (childComponent) => childComponent === node ? newNode : childComponent
+      );
+    }
+    callUnmountHandlers(node.executedVersion);
+    addUseValueMountHandler({
+      usedValue: value,
+      trackers,
+      getValue,
+      trackingSelectorElement: newTrackingSelectorElement
     });
-    trackingEffects.forEach((trackingEffect) => {
-      const { cb, selectedValue, selector, comparator } = trackingEffect;
-      const newSelectedValue = selector ? selector(value) : value;
-      if (comparator ? comparator(selectedValue, newSelectedValue) : selectedValue === newSelectedValue) {
-        return;
-      }
-      cb(newSelectedValue);
-      trackingEffect.selectedValue = newSelectedValue;
+    callMountHandlers(newRenderedNode);
+    newNode._privateMethods._addUnmountHandler(() => {
+      trackers.trackingSelectorElements = trackers.trackingSelectorElements.filter(
+        (el) => el !== newTrackingSelectorElement
+      );
     });
-    trackingIterators.forEach((trackingIterator) => {
-      const {
-        cb,
-        key,
-        renderedElements,
-        elementsByKey,
-        wrapperComponent,
-        selector
-      } = trackingIterator;
-      if (!wrapperComponent) {
-        console.error("there is no wrapper component for the iterator");
-        return;
+  } else {
+    console.log("parent node was not found");
+  }
+  newTrackingSelectorElements.push(newTrackingSelectorElement);
+}
+function addUseValueMountHandler({
+  usedValue,
+  getValue,
+  trackers,
+  trackingSelectorElement
+}) {
+  trackingSelectorElement.node._privateMethods._addMountHandler(() => {
+    const currentValue = getValue();
+    if (usedValue === currentValue) {
+      trackers.trackingSelectorElements.push(trackingSelectorElement);
+      trackingSelectorElement.node._privateMethods._addUnmountHandler(() => {
+        trackers.trackingSelectorElements = trackers.trackingSelectorElements.filter(
+          (el) => trackingSelectorElement !== el
+        );
+      });
+    } else {
+      const newTrackingSelectorElements = [];
+      updateUseValueSelector({
+        value: getValue(),
+        trackers,
+        selectorTrackingElement: trackingSelectorElement,
+        newTrackingSelectorElements,
+        getValue
+      });
+      if (newTrackingSelectorElements[0]) {
+        const newTrackingSelectorElement = newTrackingSelectorElements[0];
+        if (newTrackingSelectorElement.node === trackingSelectorElement.node) {
+          trackers.trackingSelectorElements.push(newTrackingSelectorElement);
+          newTrackingSelectorElement.node._privateMethods._addUnmountHandler(
+            () => {
+              trackers.trackingSelectorElements = trackers.trackingSelectorElements.filter(
+                (el) => trackingSelectorElement !== el
+              );
+            }
+          );
+        } else {
+        }
+      } else {
+      }
+    }
+  });
+}
+
+// src/create-state/update-useattribute-value.ts
+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 (attributeValue === newAttributeValue) {
+      return;
+    }
+    const eventName = attributeName[2].toLocaleLowerCase() + attributeName.slice(3);
+    if (attributeValue) {
+      htmlElement.removeEventListener(eventName, attributeValue);
+    }
+    if (newAttributeValue && typeof newAttributeValue === "function") {
+      htmlElement.addEventListener(eventName, newAttributeValue);
+    }
+    element.attributeValue = newAttributeValue;
+  } else {
+    htmlElement.setAttribute(attributeName, newAttributeValue);
+  }
+}
+
+// src/create-state/update-usevalueiterator-value.ts
+function updateUseValueIteratorValue({
+  value,
+  trackingIterator,
+  createState: createState2
+}) {
+  const {
+    cb,
+    key,
+    renderedElements,
+    elementsByKey,
+    wrapperComponent,
+    selector,
+    savedContext
+  } = trackingIterator;
+  if (!wrapperComponent) {
+    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 parentVelesElement = wrapperVelesElementNode.parentVelesElement;
+  if (!parentVelesElement) {
+    console.error("there is no parent Veles node for the iterator wrapper");
+    return;
+  }
+  const elements = selector ? selector(value) : value;
+  if (Array.isArray(elements)) {
+    const newRenderedElements = [];
+    const newElementsByKey = {};
+    const renderedExistingElements = {};
+    elements.forEach((element, index) => {
+      let calculatedKey = "";
+      if (typeof key === "string" && typeof element === "object" && element !== null && key in element) {
+        calculatedKey = element[key];
+      } else if (typeof key === "function") {
+        calculatedKey = key({ element, index });
+      } else {
       }
-      const { velesElementNode: wrapperVelesElementNode } = getComponentVelesNode(wrapperComponent);
-      const parentVelesElement = wrapperVelesElementNode.parentVelesElement;
-      if (!parentVelesElement) {
-        console.error("there is no parent Veles node for the iterator wrapper");
+      if (!calculatedKey) {
         return;
       }
-      const elements = selector ? selector(value) : value;
-      if (Array.isArray(elements)) {
-        const newRenderedElements = [];
-        const newElementsByKey = {};
-        const renderedExistingElements = {};
-        elements.forEach((element, index) => {
-          let calculatedKey = "";
-          if (typeof key === "string" && typeof element === "object" && element !== null && key in element) {
-            calculatedKey = element[key];
-          } else if (typeof key === "function") {
-            calculatedKey = key({ element, index });
-          } else {
-          }
-          if (!calculatedKey) {
-            return;
-          }
-          const existingElement = elementsByKey[calculatedKey];
-          if (existingElement) {
-            renderedExistingElements[calculatedKey] = true;
-            const currentValue = existingElement.elementState.getValue();
-            if (currentValue !== element) {
-              existingElement.elementState.setValue(element);
-            }
-            const currentIndex = existingElement.indexState.getValue();
-            if (currentIndex !== index) {
-              existingElement.indexState.setValue(index);
-            }
-            newRenderedElements.push([
-              existingElement.node,
-              calculatedKey,
-              existingElement.elementState
-            ]);
-            newElementsByKey[calculatedKey] = {
-              elementState: existingElement.elementState,
-              indexState: existingElement.indexState,
-              indexValue: index,
-              node: existingElement.node
-            };
+      const existingElement = elementsByKey[calculatedKey];
+      if (existingElement) {
+        renderedExistingElements[calculatedKey] = true;
+        const currentValue = existingElement.elementState.getValue();
+        if (currentValue !== element) {
+          existingElement.elementState.setValue(element);
+        }
+        const currentIndex = existingElement.indexState.getValue();
+        if (currentIndex !== index) {
+          existingElement.indexState.setValue(index);
+        }
+        newRenderedElements.push([
+          existingElement.node,
+          calculatedKey,
+          existingElement.elementState
+        ]);
+        newElementsByKey[calculatedKey] = {
+          elementState: existingElement.elementState,
+          indexState: existingElement.indexState,
+          indexValue: index,
+          node: existingElement.node
+        };
+      } else {
+        const elementState = createState2(element);
+        const indexState = createState2(index);
+        addPublicContext(savedContext);
+        const node = cb({ elementState, indexState });
+        const renderedNode = renderTree(node);
+        node.executedVersion = renderedNode;
+        popPublicContext();
+        newRenderedElements.push([node, calculatedKey, elementState]);
+        newElementsByKey[calculatedKey] = {
+          elementState,
+          indexState,
+          indexValue: index,
+          node
+        };
+      }
+    });
+    const newChildRenderedComponents = [];
+    const newChildComponents = [];
+    const positioningOffset = {};
+    let newElementsCount = 0;
+    let offset = 0;
+    let currentElement = null;
+    newRenderedElements.forEach((newRenderedElement, index) => {
+      var _a, _b, _c;
+      newChildRenderedComponents.push(newRenderedElement[0].executedVersion);
+      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
+        );
+        if (existingElement.indexValue + offset === index) {
+          currentElement = existingElementNode.html;
+          return;
+        }
+        if (existingElement.indexValue + offset > index) {
+          if (currentElement) {
+            currentElement.after(existingElementNode.html);
+            positioningOffset[existingElement.indexValue + 1] = -1;
           } else {
-            const elementState = createState(element);
-            const indexState = createState(index);
-            const node = cb({ elementState, indexState });
-            newRenderedElements.push([node, calculatedKey, elementState]);
-            newElementsByKey[calculatedKey] = {
-              elementState,
-              indexState,
-              indexValue: index,
-              node
-            };
-          }
-        });
-        const positioningOffset = {};
-        let newElementsCount = 0;
-        let offset = 0;
-        let currentElement = null;
-        newRenderedElements.forEach((newRenderedElement, index) => {
-          var _a, _b, _c;
-          if (positioningOffset[index]) {
-            offset = offset + positioningOffset[index];
-          }
-          const [newNode, calculatedKey, newState] = newRenderedElement;
-          const existingElement = elementsByKey[calculatedKey];
-          if (existingElement) {
-            const { velesElementNode: existingElementNode } = getComponentVelesNode(existingElement.node);
-            if (existingElement.indexValue + offset === index) {
-              currentElement = existingElementNode.html;
-              return;
-            }
-            if (existingElement.indexValue + offset > index) {
-              if (currentElement) {
-                currentElement.after(existingElementNode.html);
-                positioningOffset[existingElement.indexValue + 1] = -1;
-              } else {
-                const firstRenderedElement = (_a = renderedElements[0]) == null ? void 0 : _a[0];
-                if (firstRenderedElement) {
-                  const { velesElementNode: firstRenderedVelesNode } = getComponentVelesNode(firstRenderedElement);
-                  firstRenderedVelesNode.html.before(existingElementNode.html);
-                } else {
-                }
-              }
-              currentElement = existingElementNode.html;
-              offset = offset + 1;
+            const firstRenderedElement = (_a = renderedElements[0]) == null ? void 0 : _a[0];
+            if (firstRenderedElement == null ? void 0 : firstRenderedElement.executedVersion) {
+              const firstRenderedVelesNode = getExecutedComponentVelesNode(
+                firstRenderedElement.executedVersion
+              );
+              firstRenderedVelesNode.html.before(existingElementNode.html);
             } else {
-              if (currentElement) {
-                currentElement.after(existingElementNode.html);
-                positioningOffset[existingElement.indexValue + 1] = 1;
-              } else {
-                const firstRenderedElement = (_b = renderedElements[0]) == null ? void 0 : _b[0];
-                if (firstRenderedElement) {
-                  const { velesElementNode: firstRenderedVelesNode } = getComponentVelesNode(firstRenderedElement);
-                  firstRenderedVelesNode.html.before(existingElementNode.html);
-                } else {
-                }
-              }
-              currentElement = existingElementNode.html;
-              offset = offset - 1;
             }
+          }
+          currentElement = existingElementNode.html;
+          offset = offset + 1;
+        } else {
+          if (currentElement) {
+            currentElement.after(existingElementNode.html);
+            positioningOffset[existingElement.indexValue + 1] = 1;
           } else {
-            const { velesElementNode: newNodeVelesElement } = getComponentVelesNode(newNode);
-            newNodeVelesElement.parentVelesElement = parentVelesElement;
-            if (currentElement) {
-              currentElement.after(newNodeVelesElement.html);
+            const firstRenderedElement = (_b = renderedElements[0]) == null ? void 0 : _b[0];
+            if (firstRenderedElement == null ? void 0 : firstRenderedElement.executedVersion) {
+              const firstRenderedVelesNode = getExecutedComponentVelesNode(
+                firstRenderedElement.executedVersion
+              );
+              firstRenderedVelesNode.html.before(existingElementNode.html);
             } else {
-              const firstRenderedElement = (_c = renderedElements[0]) == null ? void 0 : _c[0];
-              if (firstRenderedElement) {
-                const { velesElementNode: firstRenderedVelesNode } = getComponentVelesNode(firstRenderedElement);
-                firstRenderedVelesNode.html.before(newNodeVelesElement.html);
-              } else {
-                parentVelesElement.html.prepend(newNodeVelesElement.html);
-              }
             }
-            offset = offset + 1;
-            currentElement = newNodeVelesElement.html;
-            newElementsCount = newElementsCount + 1;
-            callMountHandlers(newNode);
           }
-        });
-        if (renderedElements.length === newRenderedElements.length + newElementsCount) {
+          currentElement = existingElementNode.html;
+          offset = offset - 1;
+        }
+      } else {
+        const newNodeVelesElement = getExecutedComponentVelesNode(
+          newNode.executedVersion
+        );
+        newNodeVelesElement.parentVelesElement = parentVelesElement;
+        if (currentElement) {
+          currentElement.after(newNodeVelesElement.html);
         } else {
-          renderedElements.forEach(([oldNode, calculatedKey]) => {
-            if (renderedExistingElements[calculatedKey] === true) {
-              return;
-            } else {
-              const { velesElementNode: oldRenderedVelesNode } = getComponentVelesNode(oldNode);
-              oldRenderedVelesNode.html.remove();
-              oldNode._privateMethods._callUnmountHandlers();
-              if ("velesNode" in wrapperVelesElementNode) {
-                wrapperVelesElementNode.childComponents = wrapperVelesElementNode.childComponents.filter(
-                  (childComponent) => childComponent !== oldNode
-                );
-              } else {
-                throw new Error("Wrapper iterator element is a string");
-              }
-            }
-          });
+          const firstRenderedElement = (_c = renderedElements[0]) == null ? void 0 : _c[0];
+          if (firstRenderedElement == null ? void 0 : firstRenderedElement.executedVersion) {
+            const firstRenderedVelesNode = getExecutedComponentVelesNode(
+              firstRenderedElement.executedVersion
+            );
+            firstRenderedVelesNode.html.before(newNodeVelesElement.html);
+          } else {
+            parentVelesElement.html.prepend(newNodeVelesElement.html);
+          }
         }
-        trackingIterator.renderedElements = newRenderedElements;
-        trackingIterator.elementsByKey = newElementsByKey;
+        offset = offset + 1;
+        currentElement = newNodeVelesElement.html;
+        newElementsCount = newElementsCount + 1;
+        callMountHandlers(newNode.executedVersion);
       }
     });
+    if (renderedElements.length === newRenderedElements.length + newElementsCount) {
+    } else {
+      renderedElements.forEach(([oldNode, calculatedKey]) => {
+        if (renderedExistingElements[calculatedKey] === true) {
+          return;
+        } else {
+          const oldRenderedVelesNode = getExecutedComponentVelesNode(
+            oldNode.executedVersion
+          );
+          oldRenderedVelesNode.html.remove();
+          callUnmountHandlers(oldNode.executedVersion);
+          if ("executedVelesNode" in wrapperVelesElementNode) {
+            wrapperVelesElementNode.childComponents = wrapperVelesElementNode.childComponents.filter(
+              (childComponent) => childComponent !== oldNode.executedVersion
+            );
+          } else {
+            throw new Error("Wrapper iterator element is a string");
+          }
+          if ("velesNode" in wrapperComponent) {
+            wrapperComponent.childComponents = wrapperComponent.childComponents.filter(
+              (childComponent) => childComponent !== oldNode
+            );
+          }
+        }
+      });
+    }
+    if ("executedVelesNode" in wrapperVelesElementNode) {
+      wrapperVelesElementNode.childComponents = newChildRenderedComponents;
+    }
+    if ("velesNode" in wrapperComponent) {
+      wrapperComponent.childComponents = newChildComponents;
+    }
+    trackingIterator.renderedElements = newRenderedElements;
+    trackingIterator.elementsByKey = newElementsByKey;
+  }
+}
+
+// src/create-state/trigger-updates.ts
+function triggerUpdates({
+  value,
+  createState: createState2,
+  trackers,
+  getValue
+}) {
+  const newTrackingSelectorElements = [];
+  trackers.trackingSelectorElements.forEach(
+    (selectorTrackingElement) => updateUseValueSelector({
+      value,
+      selectorTrackingElement,
+      newTrackingSelectorElements,
+      trackers,
+      getValue
+    })
+  );
+  trackers.trackingSelectorElements = unique(
+    trackers.trackingSelectorElements.concat(newTrackingSelectorElements)
+  );
+  trackers.trackingAttributes.forEach((element) => {
+    updateUseAttributeValue({ element, value });
+  });
+  trackers.trackingEffects.forEach((trackingEffect) => {
+    const { cb, selectedValue, selector, comparator } = trackingEffect;
+    const newSelectedValue = selector ? selector(value) : value;
+    if (comparator ? comparator(selectedValue, newSelectedValue) : selectedValue === newSelectedValue) {
+      return;
+    }
+    cb(newSelectedValue);
+    trackingEffect.selectedValue = newSelectedValue;
+  });
+  trackers.trackingIterators.forEach((trackingIterator) => {
+    updateUseValueIteratorValue({ value, trackingIterator, createState: createState2 });
+  });
+}
+
+// src/create-state/index.ts
+function createState(initialValue, subscribeCallback) {
+  let value = initialValue;
+  let previousValue = void 0;
+  const trackers = {
+    trackingEffects: [],
+    trackingSelectorElements: [],
+    trackingAttributes: [],
+    trackingIterators: []
   };
   const result = {
     // supposed to be used at the component level
@@ -654,7 +1070,7 @@ function createState(initialValue, subscribeCallback) {
     },
     trackValueSelector(selector, cb, options = {}) {
       const trackedValue = selector ? selector(value) : value;
-      trackingEffects.push({
+      trackers.trackingEffects.push({
         cb,
         selector,
         comparator: options.comparator,
@@ -670,7 +1086,7 @@ function createState(initialValue, subscribeCallback) {
         }
       }
       onUnmount(() => {
-        trackingEffects = trackingEffects.filter(
+        trackers.trackingEffects = trackers.trackingEffects.filter(
           (trackingCallback) => trackingCallback.cb !== cb
         );
       });
@@ -680,70 +1096,79 @@ function createState(initialValue, subscribeCallback) {
     },
     useValueSelector(selector, cb, comparator = identity) {
       const selectedValue = selector ? selector(value) : value;
-      const returnedNode = cb ? cb(selectedValue) : String(selectedValue);
+      const returnedNode = cb ? cb(selectedValue) : selectedValue == void 0 ? "" : String(selectedValue);
       const node = !returnedNode || typeof returnedNode === "string" ? createTextElement(returnedNode) : returnedNode;
+      const currentContext2 = getCurrentContext();
+      node.needExecutedVersion = true;
       const trackingSelectorElement = {
         selector,
         selectedValue,
         cb,
         node,
-        comparator
+        comparator,
+        savedContext: currentContext2
       };
-      trackingSelectorElements.push(trackingSelectorElement);
-      node._privateMethods._addUnmountHandler(() => {
-        trackingSelectorElements = trackingSelectorElements.filter(
-          (el) => trackingSelectorElement !== el
-        );
+      addUseValueMountHandler({
+        usedValue: value,
+        getValue: () => value,
+        trackers,
+        trackingSelectorElement
       });
       return node;
     },
     useValueIterator(options, cb) {
-      const children = [];
-      const elementsByKey = {};
-      const elements = options.selector ? options.selector(value) : value;
-      if (!Array.isArray(elements)) {
-        console.error("useValueIterator received non-array value");
-        return null;
-      }
-      elements.forEach((element, index) => {
-        let calculatedKey = "";
-        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, index });
-        } else {
-        }
-        const elementState = createState(element);
-        const indexState = createState(index);
-        if (!calculatedKey) {
-          return;
-        }
-        let node = cb({ elementState, indexState });
-        elementsByKey[calculatedKey] = {
-          node,
-          indexState,
-          indexValue: index,
-          elementState
-        };
-        children.push([node, calculatedKey, elementState]);
-      });
+      const currentContext2 = getCurrentContext();
       const trackingParams = {};
-      trackingIterators.push(trackingParams);
-      const wrapperComponent = createElement(() => {
-        onUnmount(() => {
-          trackingIterators = trackingIterators.filter(
-            (currentTrackingParams) => currentTrackingParams !== trackingParams
-          );
+      trackingParams.savedContext = currentContext2;
+      const wrapperComponent = createElement((_props, componentAPI) => {
+        const children = [];
+        const elementsByKey = {};
+        const elements = options.selector ? options.selector(value) : value;
+        if (!Array.isArray(elements)) {
+          console.error("useValueIterator received non-array value");
+          return null;
+        }
+        elements.forEach((element, index) => {
+          let calculatedKey = "";
+          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, index });
+          } else {
+          }
+          const elementState = createState(element);
+          const indexState = createState(index);
+          if (!calculatedKey) {
+            return;
+          }
+          let node = cb({ elementState, indexState });
+          node.needExecutedVersion = true;
+          elementsByKey[calculatedKey] = {
+            node,
+            indexState,
+            indexValue: index,
+            elementState
+          };
+          children.push([node, calculatedKey, elementState]);
+        });
+        trackingParams.elementsByKey = elementsByKey;
+        trackingParams.renderedElements = children;
+        trackers.trackingIterators.push(trackingParams);
+        onMount(() => {
+          componentAPI.onUnmount(() => {
+            trackers.trackingIterators = trackers.trackingIterators.filter(
+              (currentTrackingParams) => currentTrackingParams !== trackingParams
+            );
+          });
         });
         return createElement("div", {
           phantom: true,
           children: children.map((child) => child[0])
         });
       });
+      wrapperComponent.needExecutedVersion = true;
       trackingParams.cb = cb;
       trackingParams.key = options.key;
-      trackingParams.elementsByKey = elementsByKey;
-      trackingParams.renderedElements = children;
       trackingParams.wrapperComponent = wrapperComponent;
       if (options.selector) {
         trackingParams.selector = options.selector;
@@ -751,14 +1176,30 @@ function createState(initialValue, subscribeCallback) {
       return wrapperComponent;
     },
     useAttribute: (cb) => {
+      const originalValue = value;
+      let wasMounted = false;
       const attributeValue = cb ? cb(value) : value;
       const attributeHelper = (htmlElement, attributeName, node) => {
-        const trackingElement = { cb, htmlElement, attributeName };
-        trackingAttributes.push(trackingElement);
-        node._privateMethods._addUnmountHandler(() => {
-          trackingAttributes = trackingAttributes.filter(
-            (trackingAttribute) => trackingAttribute !== trackingElement
-          );
+        const trackingElement = {
+          cb,
+          htmlElement,
+          attributeName,
+          attributeValue
+        };
+        node._privateMethods._addMountHandler(() => {
+          trackers.trackingAttributes.push(trackingElement);
+          if (!wasMounted && value === originalValue) {
+          } else {
+            updateUseAttributeValue({ element: trackingElement, value });
+          }
+          if (!wasMounted) {
+            wasMounted = true;
+          }
+          node._privateMethods._addUnmountHandler(() => {
+            trackers.trackingAttributes = trackers.trackingAttributes.filter(
+              (trackingAttribute) => trackingAttribute !== trackingElement
+            );
+          });
         });
         return attributeValue;
       };
@@ -783,7 +1224,7 @@ function createState(initialValue, subscribeCallback) {
       if (newValue !== value) {
         previousValue = value;
         value = newValue;
-        _triggerUpdates();
+        triggerUpdates({ value, createState, trackers, getValue: () => value });
       }
     }
   };
@@ -803,18 +1244,11 @@ function createRef(initialRefValue = null) {
     current: initialRefValue
   };
 }
-
-// src/fragment.ts
-function Fragment({ children }) {
-  return createElement("div", {
-    phantom: true,
-    children
-  });
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Fragment,
   attachComponent,
+  createContext,
   createElement,
   createRef,
   createState,