veles 0.0.7 → 0.0.8

package/dist/chunk-GVPFIZZW.js

@@ -0,0 +1,928 @@
+import {
+  Fragment,
+  createElement,
+  createTextElement,
+  executeComponent,
+  onMount,
+  onUnmount
+} from "./chunk-4QXZSBVZ.js";
+
+// src/context/index.ts
+var publicContextStack = [];
+var contextIdCounter = 1;
+function createContext() {
+  const contextId = contextIdCounter++;
+  function addContext(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 }) => {
+      addContext(value);
+      return createElement(Fragment, { children });
+    },
+    addContext,
+    readContext: () => {
+      const currentContext = publicContextStack[publicContextStack.length - 1];
+      if (!currentContext) {
+        console.error("no Context currently available");
+      } else {
+        return currentContext[contextId];
+      }
+    }
+  };
+}
+function addPublicContext(specificContext) {
+  if (specificContext) {
+    publicContextStack.push(specificContext);
+  } else {
+    if (publicContextStack.length === 0) {
+      publicContextStack.push({});
+    } else {
+      const currentContext = publicContextStack[publicContextStack.length - 1];
+      publicContextStack.push(currentContext);
+    }
+  }
+}
+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/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
+  };
+  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 ("executedVelesNode" in oldVelesElementNode && oldVelesElementNode.phantom) {
+        let isInserted = false;
+        oldVelesElementNode.childComponents.forEach(
+          (childComponentofPhantom) => {
+            if ("executedVelesNode" in childComponentofPhantom) {
+              if (!isInserted) {
+                insertAllPhantomChildren(childComponentofPhantom);
+                isInserted = true;
+              }
+              childComponentofPhantom.html.remove();
+            } else {
+              const velesElementNode = getExecutedComponentVelesNode(
+                childComponentofPhantom
+              );
+              if (!velesElementNode) {
+                console.error("can't find HTML tree in a component chain");
+              } else {
+                if (!isInserted) {
+                  insertAllPhantomChildren(velesElementNode);
+                  isInserted = true;
+                }
+                velesElementNode.html.remove();
+              }
+            }
+          }
+        );
+      } 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 {
+        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
+          );
+        }
+      }
+    }
+    parentVelesElementRendered.childComponents = parentVelesElementRendered.childComponents.map(
+      (childComponent) => childComponent === node.executedVersion ? newRenderedNode : childComponent
+    );
+    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
+    });
+    callMountHandlers(newRenderedNode);
+    newNode._privateMethods._addUnmountHandler(() => {
+      trackers.trackingSelectorElements = trackers.trackingSelectorElements.filter(
+        (el) => el !== newTrackingSelectorElement
+      );
+    });
+  } 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 {
+      }
+      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
+        };
+      } 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 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 {
+            }
+          }
+          currentElement = existingElementNode.html;
+          offset = offset + 1;
+        } 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 == null ? void 0 : firstRenderedElement.executedVersion) {
+              const firstRenderedVelesNode = getExecutedComponentVelesNode(
+                firstRenderedElement.executedVersion
+              );
+              firstRenderedVelesNode.html.before(existingElementNode.html);
+            } else {
+            }
+          }
+          currentElement = existingElementNode.html;
+          offset = offset - 1;
+        }
+      } else {
+        const newNodeVelesElement = getExecutedComponentVelesNode(
+          newNode.executedVersion
+        );
+        newNodeVelesElement.parentVelesElement = parentVelesElement;
+        if (currentElement) {
+          currentElement.after(newNodeVelesElement.html);
+        } else {
+          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);
+          }
+        }
+        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
+    trackValue: (cb, options = {}) => {
+      result.trackValueSelector(void 0, cb, options);
+    },
+    trackValueSelector(selector, cb, options = {}) {
+      const trackedValue = selector ? selector(value) : value;
+      trackers.trackingEffects.push({
+        cb,
+        selector,
+        comparator: options.comparator,
+        selectedValue: trackedValue
+      });
+      if (!options.skipFirstCall) {
+        if (options.callOnMount) {
+          onMount(() => {
+            cb(trackedValue);
+          });
+        } else {
+          cb(trackedValue);
+        }
+      }
+      onUnmount(() => {
+        trackers.trackingEffects = trackers.trackingEffects.filter(
+          (trackingCallback) => trackingCallback.cb !== cb
+        );
+      });
+    },
+    useValue: (cb, comparator) => {
+      return result.useValueSelector(void 0, cb, comparator);
+    },
+    useValueSelector(selector, cb, comparator = identity) {
+      const selectedValue = selector ? selector(value) : value;
+      const returnedNode = cb ? cb(selectedValue) : selectedValue == void 0 ? "" : String(selectedValue);
+      const node = !returnedNode || typeof returnedNode === "string" ? createTextElement(returnedNode) : returnedNode;
+      const currentContext = getCurrentContext();
+      node.needExecutedVersion = true;
+      const trackingSelectorElement = {
+        selector,
+        selectedValue,
+        cb,
+        node,
+        comparator,
+        savedContext: currentContext
+      };
+      addUseValueMountHandler({
+        usedValue: value,
+        getValue: () => value,
+        trackers,
+        trackingSelectorElement
+      });
+      return node;
+    },
+    useValueIterator(options, cb) {
+      const currentContext = getCurrentContext();
+      const trackingParams = {};
+      trackingParams.savedContext = currentContext;
+      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.wrapperComponent = wrapperComponent;
+      if (options.selector) {
+        trackingParams.selector = options.selector;
+      }
+      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,
+          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;
+      };
+      attributeHelper.velesAttribute = true;
+      return attributeHelper;
+    },
+    // useful for stuff like callbacks
+    getValue: () => {
+      return value;
+    },
+    getPreviousValue: () => {
+      return previousValue;
+    },
+    // set up new value only through the callback which
+    // gives the latest value to ensure no outdated data
+    // can be used for the state
+    setValue: (newValueCB) => {
+      const newValue = (
+        // @ts-expect-error
+        typeof newValueCB === "function" ? newValueCB(value) : newValueCB
+      );
+      if (newValue !== value) {
+        previousValue = value;
+        value = newValue;
+        triggerUpdates({ value, createState, trackers, getValue: () => value });
+      }
+    }
+  };
+  if (subscribeCallback) {
+    const unsubscribe = subscribeCallback(result.setValue);
+    if (unsubscribe) {
+      onUnmount(unsubscribe);
+    }
+  }
+  return result;
+}
+
+export {
+  createContext,
+  getExecutedComponentVelesNode,
+  renderTree,
+  callMountHandlers,
+  callUnmountHandlers,
+  createState
+};