veles 0.0.5 → 0.0.7

package/dist/utils/index.cjs

@@ -0,0 +1,814 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  combine: () => combineState,
+  combineState: () => combineState,
+  select: () => selectState,
+  selectState: () => selectState
+});
+module.exports = __toCommonJS(utils_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 };
+}
+function callMountHandlers(component) {
+  if ("velesStringElement" in component) {
+    return;
+  }
+  if ("velesComponent" in component) {
+    component._privateMethods._callMountHandlers();
+    callMountHandlers(component.tree);
+  }
+  if ("velesNode" in component) {
+    component.childComponents.forEach(
+      (childComponent) => callMountHandlers(childComponent)
+    );
+  }
+}
+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/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-children.ts
+function parseChildren({
+  children,
+  htmlElement,
+  velesNode
+}) {
+  const childComponents = [];
+  if (children === void 0 || children === null) {
+    return childComponents;
+  }
+  (Array.isArray(children) ? children : [children]).forEach(
+    (childComponent) => {
+      if (typeof childComponent === "string") {
+        const text = document.createTextNode(childComponent);
+        htmlElement.append(text);
+      } else if (typeof childComponent === "number") {
+        const text = document.createTextNode(String(childComponent));
+        htmlElement.append(text);
+      } 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
+              );
+              if (!velesElementNode) {
+                console.error("can't find HTML tree in a component chain");
+              } else {
+                htmlElement.append(velesElementNode.html);
+                velesElementNode.parentVelesElement = velesNode;
+              }
+            }
+          });
+          childComponent.parentVelesElement = velesNode;
+          childComponents.push(childComponent);
+        } else {
+          htmlElement.append(childComponent.html);
+          childComponent.parentVelesElement = velesNode;
+          childComponents.push(childComponent);
+        }
+      } 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 && "velesStringElement" in childComponent && (childComponent == null ? void 0 : childComponent.velesStringElement)) {
+        htmlElement.append(childComponent.html);
+        childComponent.parentVelesElement = velesNode;
+        childComponents.push(childComponent);
+      }
+    }
+  );
+  return childComponents;
+}
+
+// src/create-element/assign-attributes.ts
+function assignAttributes({
+  props,
+  htmlElement,
+  velesNode
+}) {
+  Object.entries(props).forEach(([key, value]) => {
+    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
+      );
+    } else {
+      htmlElement.setAttribute(key, value);
+    }
+  });
+}
+
+// src/create-element/parse-component.ts
+function parseComponent({
+  element,
+  props
+}) {
+  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();
+        }
+      }
+    }
+  };
+  return velesComponent;
+}
+
+// src/create-element/create-element.ts
+function createElement(element, props = {}) {
+  if (typeof element === "string") {
+    const { children, ref, phantom = false, ...otherProps } = props;
+    const newElement = document.createElement(element);
+    const velesNode = {};
+    if (ref == null ? void 0 : ref.velesRef) {
+      ref.current = newElement;
+    }
+    const childComponents = parseChildren({
+      children,
+      htmlElement: newElement,
+      velesNode
+    });
+    let unmountHandlers = [];
+    const callUnmountHandlers = () => {
+      unmountHandlers.forEach((cb) => cb());
+      unmountHandlers = [];
+      childComponents.forEach((childComponent) => {
+        childComponent._privateMethods._callUnmountHandlers();
+      });
+    };
+    velesNode.html = newElement;
+    velesNode.velesNode = true;
+    velesNode.childComponents = childComponents;
+    velesNode.phantom = phantom;
+    velesNode._privateMethods = {
+      _addUnmountHandler: (cb) => {
+        unmountHandlers.push(cb);
+      },
+      _callUnmountHandlers: callUnmountHandlers
+    };
+    assignAttributes({ props: otherProps, htmlElement: newElement, velesNode });
+    return velesNode;
+  } else if (typeof element === "function") {
+    return parseComponent({ element, props });
+  }
+  throw new Error(
+    "Veles createElement expects a valid DOM string or another component"
+  );
+}
+
+// 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/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 (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 ("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();
+                  }
+                }
+              }
+            );
+          } 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 {
+            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");
+      }
+      newTrackingSelectorElements.push(newTrackingSelectorElement);
+    });
+    trackingSelectorElements = unique(
+      trackingSelectorElements.concat(newTrackingSelectorElements)
+    );
+    trackingAttributes.forEach(({ cb, htmlElement, attributeName }) => {
+      const newAttributeValue = cb ? cb(value) : value;
+      htmlElement.setAttribute(attributeName, newAttributeValue);
+    });
+    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;
+    });
+    trackingIterators.forEach((trackingIterator) => {
+      const {
+        cb,
+        key,
+        renderedElements,
+        elementsByKey,
+        wrapperComponent,
+        selector
+      } = trackingIterator;
+      if (!wrapperComponent) {
+        console.error("there is no wrapper component for the iterator");
+        return;
+      }
+      const { velesElementNode: wrapperVelesElementNode } = getComponentVelesNode(wrapperComponent);
+      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 = 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;
+            } 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;
+            }
+          } else {
+            const { velesElementNode: newNodeVelesElement } = getComponentVelesNode(newNode);
+            newNodeVelesElement.parentVelesElement = parentVelesElement;
+            if (currentElement) {
+              currentElement.after(newNodeVelesElement.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) {
+        } 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");
+              }
+            }
+          });
+        }
+        trackingIterator.renderedElements = newRenderedElements;
+        trackingIterator.elementsByKey = newElementsByKey;
+      }
+    });
+  };
+  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;
+      trackingEffects.push({
+        cb,
+        selector,
+        comparator: options.comparator,
+        selectedValue: trackedValue
+      });
+      if (!options.skipFirstCall) {
+        if (options.callOnMount) {
+          onMount(() => {
+            cb(trackedValue);
+          });
+        } else {
+          cb(trackedValue);
+        }
+      }
+      onUnmount(() => {
+        trackingEffects = 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) : String(selectedValue);
+      const node = !returnedNode || typeof returnedNode === "string" ? createTextElement(returnedNode) : returnedNode;
+      const trackingSelectorElement = {
+        selector,
+        selectedValue,
+        cb,
+        node,
+        comparator
+      };
+      trackingSelectorElements.push(trackingSelectorElement);
+      node._privateMethods._addUnmountHandler(() => {
+        trackingSelectorElements = trackingSelectorElements.filter(
+          (el) => trackingSelectorElement !== el
+        );
+      });
+      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 trackingParams = {};
+      trackingIterators.push(trackingParams);
+      const wrapperComponent = createElement(() => {
+        onUnmount(() => {
+          trackingIterators = trackingIterators.filter(
+            (currentTrackingParams) => currentTrackingParams !== trackingParams
+          );
+        });
+        return createElement("div", {
+          phantom: true,
+          children: children.map((child) => child[0])
+        });
+      });
+      trackingParams.cb = cb;
+      trackingParams.key = options.key;
+      trackingParams.elementsByKey = elementsByKey;
+      trackingParams.renderedElements = children;
+      trackingParams.wrapperComponent = wrapperComponent;
+      if (options.selector) {
+        trackingParams.selector = options.selector;
+      }
+      return wrapperComponent;
+    },
+    useAttribute: (cb) => {
+      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
+          );
+        });
+        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();
+      }
+    }
+  };
+  if (subscribeCallback) {
+    const unsubscribe = subscribeCallback(result.setValue);
+    if (unsubscribe) {
+      onUnmount(unsubscribe);
+    }
+  }
+  return result;
+}
+
+// src/utils/combine-state.ts
+function combineState(...states) {
+  const initialValue = states.map((state) => state.getValue());
+  const combinedState = createState(initialValue);
+  states.forEach((state) => {
+    state.trackValue(() => {
+      const updatedValue = states.map((state2) => state2.getValue());
+      combinedState.setValue(updatedValue);
+    });
+  });
+  return combinedState;
+}
+
+// src/utils/select-state.ts
+function selectState(state, selector) {
+  const initialValue = selector(state.getValue());
+  const newState = createState(initialValue);
+  state.trackValueSelector(
+    selector,
+    (selectedState) => {
+      newState.setValue(selectedState);
+    },
+    { skipFirstCall: true }
+  );
+  return newState;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  combine,
+  combineState,
+  select,
+  selectState
+});