veles 0.0.5 → 0.0.7

package/dist/{chunk-V3EV7UG6.js → chunk-ILNLS6QO.js}

@@ -24,7 +24,7 @@ function onUnmount(cb) {
   }
 }
 
-// src/utils.ts
+// src/_utils.ts
 function getComponentVelesNode(component) {
   const componentsTree = [];
   if ("velesStringElement" in component) {
@@ -64,6 +64,17 @@ function callMountHandlers(component) {
 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-element/parse-children.ts
 function parseChildren({
@@ -263,20 +274,12 @@ function createElement(element, props = {}) {
   );
 }
 
-// src/fragment.ts
-function Fragment({ children }) {
-  return createElement("div", {
-    phantom: true,
-    children
-  });
-}
-
 export {
   getComponentVelesNode,
   callMountHandlers,
   identity,
+  unique,
   onMount,
   onUnmount,
-  createElement,
-  Fragment
+  createElement
 };

package/dist/chunk-MH6DPZ3V.js

@@ -0,0 +1,490 @@
+import {
+  callMountHandlers,
+  createElement,
+  getComponentVelesNode,
+  identity,
+  onMount,
+  onUnmount,
+  unique
+} from "./chunk-ILNLS6QO.js";
+
+// 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;
+}
+
+export {
+  createState
+};

package/dist/chunk-X6QYYW56.js

@@ -0,0 +1,15 @@
+import {
+  createElement
+} from "./chunk-ILNLS6QO.js";
+
+// src/fragment.ts
+function Fragment({ children }) {
+  return createElement("div", {
+    phantom: true,
+    children
+  });
+}
+
+export {
+  Fragment
+};

package/dist/create-state-Bo6TT4qP.d.ts

@@ -0,0 +1,33 @@
+import { V as VelesElement, a as VelesComponent, d as VelesStringElement, A as AttributeHelper } from './types.d-DgVBp6oa.js';
+
+type State<ValueType> = {
+    trackValue(cb: (value: ValueType) => void | Function, options?: {
+        callOnMount?: boolean;
+        skipFirstCall?: boolean;
+        comparator?: (value1: ValueType, value2: ValueType) => boolean;
+    }): void;
+    trackValueSelector<SelectorValueType>(selector: (value: ValueType) => SelectorValueType, cb: (value: SelectorValueType) => void | Function, options?: {
+        callOnMount?: boolean;
+        skipFirstCall?: boolean;
+        comparator?: (value1: SelectorValueType, value2: SelectorValueType) => boolean;
+    }): void;
+    useValue(cb?: (value: ValueType) => VelesElement | VelesComponent | string | undefined | null, comparator?: (value1: ValueType, value2: ValueType) => boolean): VelesElement | VelesComponent | VelesStringElement;
+    useValueSelector<SelectorValueType>(selector: (value: ValueType) => SelectorValueType, cb?: (value: SelectorValueType) => VelesElement | VelesComponent | string | undefined | null, comparator?: (value1: SelectorValueType, value2: SelectorValueType) => boolean): VelesElement | VelesComponent | VelesStringElement;
+    useAttribute(cb?: (value: ValueType) => any): AttributeHelper<any>;
+    useValueIterator<Element>(options: {
+        key: string | ((options: {
+            element: Element;
+            index: number;
+        }) => string);
+        selector?: (value: ValueType) => Element[];
+    }, cb: (props: {
+        elementState: State<Element>;
+        indexState: State<number>;
+    }) => VelesElement | VelesComponent): VelesComponent | VelesElement | null;
+    getValue(): ValueType;
+    getPreviousValue(): undefined | ValueType;
+    setValue(newValueCB: ((currentValue: ValueType) => ValueType) | ValueType): void;
+};
+declare function createState<T>(initialValue: T, subscribeCallback?: (setValue: ReturnType<typeof createState<T>>["setValue"]) => Function): State<T>;
+
+export { type State as S, createState as c };

package/dist/create-state-D1JASFVs.d.cts

@@ -0,0 +1,33 @@
+import { V as VelesElement, a as VelesComponent, d as VelesStringElement, A as AttributeHelper } from './types.d-DgVBp6oa.cjs';
+
+type State<ValueType> = {
+    trackValue(cb: (value: ValueType) => void | Function, options?: {
+        callOnMount?: boolean;
+        skipFirstCall?: boolean;
+        comparator?: (value1: ValueType, value2: ValueType) => boolean;
+    }): void;
+    trackValueSelector<SelectorValueType>(selector: (value: ValueType) => SelectorValueType, cb: (value: SelectorValueType) => void | Function, options?: {
+        callOnMount?: boolean;
+        skipFirstCall?: boolean;
+        comparator?: (value1: SelectorValueType, value2: SelectorValueType) => boolean;
+    }): void;
+    useValue(cb?: (value: ValueType) => VelesElement | VelesComponent | string | undefined | null, comparator?: (value1: ValueType, value2: ValueType) => boolean): VelesElement | VelesComponent | VelesStringElement;
+    useValueSelector<SelectorValueType>(selector: (value: ValueType) => SelectorValueType, cb?: (value: SelectorValueType) => VelesElement | VelesComponent | string | undefined | null, comparator?: (value1: SelectorValueType, value2: SelectorValueType) => boolean): VelesElement | VelesComponent | VelesStringElement;
+    useAttribute(cb?: (value: ValueType) => any): AttributeHelper<any>;
+    useValueIterator<Element>(options: {
+        key: string | ((options: {
+            element: Element;
+            index: number;
+        }) => string);
+        selector?: (value: ValueType) => Element[];
+    }, cb: (props: {
+        elementState: State<Element>;
+        indexState: State<number>;
+    }) => VelesElement | VelesComponent): VelesComponent | VelesElement | null;
+    getValue(): ValueType;
+    getPreviousValue(): undefined | ValueType;
+    setValue(newValueCB: ((currentValue: ValueType) => ValueType) | ValueType): void;
+};
+declare function createState<T>(initialValue: T, subscribeCallback?: (setValue: ReturnType<typeof createState<T>>["setValue"]) => Function): State<T>;
+
+export { type State as S, createState as c };

package/dist/fragment-CU26z590.d.cts

@@ -0,0 +1,9 @@
+import { C as ComponentFunction, c as VelesElementProps, V as VelesElement, a as VelesComponent, b as VelesChildren } from './types.d-DgVBp6oa.cjs';
+
+declare function createElement(element: string | ComponentFunction, props?: VelesElementProps): VelesElement | VelesComponent;
+
+declare function Fragment({ children }: {
+    children?: VelesChildren;
+}): VelesComponent | VelesElement;
+
+export { Fragment as F, createElement as c };

package/dist/fragment-IVSEC7-Q.d.ts

@@ -0,0 +1,9 @@
+import { C as ComponentFunction, c as VelesElementProps, V as VelesElement, a as VelesComponent, b as VelesChildren } from './types.d-DgVBp6oa.js';
+
+declare function createElement(element: string | ComponentFunction, props?: VelesElementProps): VelesElement | VelesComponent;
+
+declare function Fragment({ children }: {
+    children?: VelesChildren;
+}): VelesComponent | VelesElement;
+
+export { Fragment as F, createElement as c };