veles 0.0.5 → 0.0.7

package/dist/index.d.ts

@@ -1,53 +1,12 @@
-import { V as VelesElement, a as VelesComponent, b as VelesStringElement, A as AttributeHelper } from './fragment-CHmQ0MhU.js';
-export { F as Fragment, c as createElement } from './fragment-CHmQ0MhU.js';
+import { V as VelesElement, a as VelesComponent } from './types.d-DgVBp6oa.js';
+export { F as Fragment, c as createElement } from './fragment-IVSEC7-Q.js';
+export { S as State, c as createState } from './create-state-Bo6TT4qP.js';
 
 declare function attachComponent({ htmlElement, component, }: {
     htmlElement: HTMLElement;
     component: VelesElement | VelesComponent;
 }): () => void;
 
-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>;
-        index: number;
-    }) => VelesElement | VelesComponent): VelesComponent | VelesElement | null;
-    getValue(): ValueType;
-    getPreviousValue(): undefined | ValueType;
-    setValue(newValueCB: ((currentValue: ValueType) => ValueType) | ValueType): void;
-    _triggerUpdates(): void;
-};
-declare function createState<T>(initialValue: T, subscribeCallback?: (setValue: ReturnType<typeof createState<T>>["setValue"]) => Function): State<T>;
-
-type createdState<StateType> = ReturnType<typeof createState<StateType>>;
-declare function combineState<A, B>(state1: createdState<A>, state2: createdState<B>): createdState<[A, B]>;
-declare function combineState<A, B, C>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>): createdState<[A, B, C]>;
-declare function combineState<A, B, C, D>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>): createdState<[A, B, C, D]>;
-declare function combineState<A, B, C, D, E>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>, state5: createdState<E>): createdState<[A, B, C, D, E]>;
-declare function combineState<A, B, C, D, E, F>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>, state5: createdState<E>, state6: createdState<F>): createdState<[A, B, C, D, E, F]>;
-declare function combineState<A, B, C, D, E, F, G>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>, state5: createdState<E>, state6: createdState<F>, state7: createdState<G>): createdState<[A, B, C, D, E, F, G]>;
-declare function combineState<A, B, C, D, E, F, G, H>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>, state5: createdState<E>, state6: createdState<F>, state7: createdState<G>, state8: createdState<H>): createdState<[A, B, C, D, E, F, G, H]>;
-declare function combineState<A, B, C, D, E, F, G, H, I>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>, state5: createdState<E>, state6: createdState<F>, state7: createdState<G>, state8: createdState<H>, state9: createdState<I>): createdState<[A, B, C, D, E, F, G, H, I]>;
-declare function combineState<A, B, C, D, E, F, G, H, I, J>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>, state5: createdState<E>, state6: createdState<F>, state7: createdState<G>, state8: createdState<H>, state9: createdState<I>, state10: createdState<J>): createdState<[A, B, C, D, E, F, G, H, I, J]>;
-
 declare function onMount(cb: () => void | Function): void;
 declare function onUnmount(cb: Function): void;
 
@@ -56,4 +15,4 @@ declare function createRef<T>(initialRefValue?: T | null): {
     current: T | null;
 };
 
-export { type State, attachComponent, combineState, createRef, createState, onMount, onUnmount };
+export { attachComponent, createRef, onMount, onUnmount };

package/dist/index.js

@@ -1,12 +1,16 @@
 import {
-  Fragment,
+  Fragment
+} from "./chunk-X6QYYW56.js";
+import {
+  createState
+} from "./chunk-MH6DPZ3V.js";
+import {
   callMountHandlers,
   createElement,
   getComponentVelesNode,
-  identity,
   onMount,
   onUnmount
-} from "./chunk-V3EV7UG6.js";
+} from "./chunk-ILNLS6QO.js";
 
 // src/attach-component.ts
 function attachComponent({
@@ -22,409 +26,6 @@ function attachComponent({
   };
 }
 
-// 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 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);
-        if (!calculatedKey) {
-          return;
-        }
-        let node = cb({ elementState, index });
-        elementsByKey[calculatedKey] = {
-          node,
-          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;
-        result._triggerUpdates();
-      }
-    },
-    // TODO: remove it from this object completely
-    // and access it from closure
-    _triggerUpdates: () => {
-      trackingSelectorElements = trackingSelectorElements.map(
-        (selectorTrackingElement) => {
-          const { selectedValue, selector, cb, node, comparator } = selectorTrackingElement;
-          const newSelectedValue = selector ? selector(value) : value;
-          if (comparator(selectedValue, newSelectedValue)) {
-            return selectorTrackingElement;
-          }
-          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;
-            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");
-          }
-          return newTrackingSelectorElement;
-        }
-      );
-      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);
-              }
-              newRenderedElements.push([
-                existingElement.node,
-                calculatedKey,
-                existingElement.elementState
-              ]);
-              newElementsByKey[calculatedKey] = {
-                elementState: existingElement.elementState,
-                index,
-                node: existingElement.node
-              };
-            } else {
-              const elementState = createState(element);
-              const node = cb({ elementState, index });
-              newRenderedElements.push([node, calculatedKey, elementState]);
-              newElementsByKey[calculatedKey] = {
-                elementState,
-                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.index + offset === index) {
-                currentElement = existingElementNode.html;
-                return;
-              }
-              if (existingElement.index + offset > index) {
-                if (currentElement) {
-                  currentElement.after(existingElementNode.html);
-                  positioningOffset[existingElement.index + 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.index + 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;
-        }
-      });
-    }
-  };
-  if (subscribeCallback) {
-    const unsubscribe = subscribeCallback(result.setValue);
-    if (unsubscribe) {
-      onUnmount(unsubscribe);
-    }
-  }
-  return result;
-}
-
-// src/hooks/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/create-ref.ts
 function createRef(initialRefValue = null) {
   return {
@@ -435,7 +36,6 @@ function createRef(initialRefValue = null) {
 export {
   Fragment,
   attachComponent,
-  combineState,
   createElement,
   createRef,
   createState,

package/dist/jsx-runtime.cjs

@@ -26,7 +26,7 @@ __export(jsx_runtime_exports, {
 });
 module.exports = __toCommonJS(jsx_runtime_exports);
 
-// src/utils.ts
+// src/_utils.ts
 function getComponentVelesNode(component) {
   const componentsTree = [];
   if ("velesStringElement" in component) {

package/dist/jsx-runtime.d.cts

@@ -1,5 +1,5 @@
-import { A as AttributeHelper, d as VelesChildren } from './fragment-CHmQ0MhU.cjs';
-export { F as Fragment, c as jsx, c as jsxDEV, c as jsxs } from './fragment-CHmQ0MhU.cjs';
+export { F as Fragment, c as jsx, c as jsxDEV, c as jsxs } from './fragment-CU26z590.cjs';
+import { A as AttributeHelper, b as VelesChildren } from './types.d-DgVBp6oa.cjs';
 
 // pretty much all the credit goes to Preact JSX type definitions
 // https://github.com/preactjs/preact/blob/main/src/jsx.d.ts

package/dist/jsx-runtime.d.ts

@@ -1,5 +1,5 @@
-import { A as AttributeHelper, d as VelesChildren } from './fragment-CHmQ0MhU.js';
-export { F as Fragment, c as jsx, c as jsxDEV, c as jsxs } from './fragment-CHmQ0MhU.js';
+export { F as Fragment, c as jsx, c as jsxDEV, c as jsxs } from './fragment-IVSEC7-Q.js';
+import { A as AttributeHelper, b as VelesChildren } from './types.d-DgVBp6oa.js';
 
 // pretty much all the credit goes to Preact JSX type definitions
 // https://github.com/preactjs/preact/blob/main/src/jsx.d.ts

package/dist/jsx-runtime.js

@@ -1,7 +1,9 @@
 import {
-  Fragment,
+  Fragment
+} from "./chunk-X6QYYW56.js";
+import {
   createElement
-} from "./chunk-V3EV7UG6.js";
+} from "./chunk-ILNLS6QO.js";
 export {
   Fragment,
   createElement as jsx,

package/dist/{fragment-CHmQ0MhU.d.cts → types.d-DgVBp6oa.d.cts}

@@ -253,10 +253,4 @@ type AttributeHelper<T> = {
   velesAttribute: boolean;
 };
 
-declare function createElement(element: string | ComponentFunction, props?: VelesElementProps): VelesElement | VelesComponent;
-
-declare function Fragment({ children }: {
-    children: VelesChildren;
-}): VelesComponent | VelesElement;
-
-export { type AttributeHelper as A, Fragment as F, type VelesElement as V, type VelesComponent as a, type VelesStringElement as b, createElement as c, type VelesChildren as d };
+export type { AttributeHelper as A, ComponentFunction as C, VelesElement as V, VelesComponent as a, VelesChildren as b, VelesElementProps as c, VelesStringElement as d };

package/dist/{fragment-CHmQ0MhU.d.ts → types.d-DgVBp6oa.d.ts}

@@ -253,10 +253,4 @@ type AttributeHelper<T> = {
   velesAttribute: boolean;
 };
 
-declare function createElement(element: string | ComponentFunction, props?: VelesElementProps): VelesElement | VelesComponent;
-
-declare function Fragment({ children }: {
-    children: VelesChildren;
-}): VelesComponent | VelesElement;
-
-export { type AttributeHelper as A, Fragment as F, type VelesElement as V, type VelesComponent as a, type VelesStringElement as b, createElement as c, type VelesChildren as d };
+export type { AttributeHelper as A, ComponentFunction as C, VelesElement as V, VelesComponent as a, VelesChildren as b, VelesElementProps as c, VelesStringElement as d };