veles 0.0.1

package/dist/index.cjs

@@ -0,0 +1,727 @@
+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/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Fragment: () => Fragment,
+  attachComponent: () => attachComponent,
+  combineState: () => combineState,
+  createElement: () => createElement,
+  createRef: () => createRef,
+  createState: () => createState,
+  onMount: () => onMount,
+  onUnmount: () => onUnmount
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/utils.ts
+function getComponentVelesNode(component) {
+  const componentsTree = [];
+  if ("velesStringElement" in component) {
+    return {
+      velesElementNode: component,
+      componentsTree: []
+    };
+  }
+  let childNode = component;
+  while ("velesComponent" in childNode) {
+    componentsTree.push(childNode);
+    if ("velesStringElement" in childNode.tree) {
+      return {
+        velesElementNode: childNode.tree,
+        componentsTree
+      };
+    } else {
+      childNode = childNode.tree;
+    }
+  }
+  return { velesElementNode: childNode, componentsTree };
+}
+function identity(value1, value2) {
+  return value1 === value2;
+}
+
+// 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 === "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 { componentsTree, velesElementNode } = getComponentVelesNode(childComponentofPhantom);
+              if (!velesElementNode) {
+                console.error("can't find HTML tree in a component chain");
+              } else {
+                htmlElement.append(velesElementNode.html);
+                componentsTree.forEach((component) => {
+                  component._privateMethods._callMountHandlers();
+                });
+                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);
+                    setTimeout(() => {
+                      componentsTree2.forEach((component) => {
+                        component._privateMethods._callMountHandlers();
+                      });
+                    }, 0);
+                    velesElementNode2.parentVelesElement = velesNode;
+                  }
+                }
+              }
+            );
+          } else {
+            htmlElement.append(velesElementNode.html);
+          }
+          setTimeout(() => {
+            componentsTree.forEach((component) => {
+              component._privateMethods._callMountHandlers();
+            });
+          }, 0);
+          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/hooks/lifecycle.ts
+var contextStack = [];
+var currentContext = null;
+function addContext(newContext) {
+  contextStack.push(newContext);
+  currentContext = newContext;
+}
+function popContext() {
+  contextStack.pop();
+  currentContext = contextStack[contextStack.length - 1];
+}
+function onMount(cb) {
+  if (currentContext) {
+    currentContext.onMount(cb);
+  } else {
+    console.error("missing current context");
+  }
+}
+function onUnmount(cb) {
+  if (currentContext) {
+    currentContext.onUnmount(cb);
+  } else {
+    console.error("missing current context");
+  }
+}
+
+// src/create-element/parse-component.ts
+function parseComponent({
+  element,
+  props
+}) {
+  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) => cb());
+      },
+      _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/attach-component.ts
+function attachComponent({
+  htmlElement,
+  component
+}) {
+  const wrappedApp = createElement("div", { children: [component] });
+  const { velesElementNode } = getComponentVelesNode(wrappedApp);
+  htmlElement.appendChild(velesElementNode.html);
+  return () => {
+    velesElementNode.html.remove();
+  };
+}
+
+// src/create-element/create-text-element.ts
+function createTextElement(text) {
+  const unmountHandlers = [];
+  return {
+    velesStringElement: true,
+    // in case there is no text, we create an empty Text node, so we still can
+    // have a reference to it, replace it, call lifecycle methods, etc
+    html: document.createTextNode(text || ""),
+    _privateMethods: {
+      _addUnmountHandler: (cb) => {
+        unmountHandlers.push(cb);
+      },
+      _callUnmountHandlers: () => {
+        unmountHandlers.forEach((cb) => cb());
+      }
+    }
+  };
+}
+
+// src/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(selectedValue);
+      const node = !returnedNode || typeof returnedNode === "string" ? createTextElement(returnedNode) : returnedNode;
+      trackingSelectorElements.push({
+        selector,
+        selectedValue,
+        cb,
+        node,
+        comparator
+      });
+      node._privateMethods._addUnmountHandler(() => {
+        trackingSelectorElements = trackingSelectorElements.filter(
+          (trackingSelectorElement) => trackingSelectorElement.cb !== cb
+        );
+      });
+      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(value);
+      const attributeHelper = (htmlElement, attributeName, node) => {
+        trackingAttributes.push({ cb, htmlElement, attributeName });
+        node._privateMethods._addUnmountHandler(() => {
+          trackingAttributes = trackingAttributes.filter(
+            (trackingAttribute) => trackingAttribute.cb !== cb
+          );
+        });
+        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 = newValueCB(value);
+      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(newSelectedValue);
+          const newNode = !returnednewNode || typeof returnednewNode === "string" ? createTextElement(returnednewNode) : returnednewNode;
+          const { velesElementNode: oldVelesElementNode } = getComponentVelesNode(node);
+          const { velesElementNode: newVelesElementNode } = getComponentVelesNode(newNode);
+          const parentVelesElement = oldVelesElementNode.parentVelesElement;
+          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();
+            trackingSelectorElements.push({
+              selector,
+              selectedValue: newSelectedValue,
+              cb,
+              node: newNode,
+              comparator
+            });
+            newNode._privateMethods._addUnmountHandler(() => {
+              trackingSelectorElements = trackingSelectorElements.filter(
+                (trackingSelectorElement) => trackingSelectorElement.cb !== cb
+              );
+            });
+          } else {
+            console.log("parent node was not found");
+          }
+          return {
+            selectedValue: newSelectedValue,
+            selector,
+            cb,
+            node: newNode,
+            comparator
+          };
+        }
+      );
+      trackingAttributes.forEach(({ cb, htmlElement, attributeName }) => {
+        const newAttributeValue = cb(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);
+      });
+      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;
+            }
+          });
+          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 {
+    velesRef: true,
+    current: initialRefValue
+  };
+}
+
+// src/fragment.ts
+function Fragment({ children }) {
+  return createElement("div", {
+    phantom: true,
+    children
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Fragment,
+  attachComponent,
+  combineState,
+  createElement,
+  createRef,
+  createState,
+  onMount,
+  onUnmount
+});
+//# sourceMappingURL=index.cjs.map