veles 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Seva Zaikov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,304 @@
+# Veles
+
+![Tests status](https://github.com/bloomca/veles/actions/workflows/pull-request-workflow.yaml/badge.svg)
+
+> The library is in very early stages and is not published yet as some crucial APIs are still under development
+
+`Veles` is a component-based performance-focused UI library. The main goal of this library is to provide a composable way to build highly interactive interfaces, which should be performant out of the box, as long as you follow the recommendations.
+
+## Performance
+
+This library's primary focus is in performance. What this means is that it allows you to write your code in a way which will ensure that when the data in your app changes, only the smallest relevant parts will update. Despite of similarities with React in syntax, it does not follow the same waterfall style for component re-renders. Instead, it gives you API to subscribe to atomic changes in your tracked state and re-render only parts of the UI which actually depend on the value. Internally, it renders new HTML and replaces the old node. A similar approach is done for attributes, where in case of changes, only the relevant attribute will be updated in place, but nothing else will change.
+
+It is important to note that the performance benefits will only be observed (and relevant as well) in case of a pretty high interactivity. It might not be faster than any other UI framework on the first render, the biggest improvement lies in the power of subscribing to individual changes.
+
+## API
+
+### AttachComponent
+
+Attach Veles tree to a regular DOM Node.
+
+> [!NOTE]
+> As of right now, this method will wrap the component's HTML into one additional `div`. This will probably go away in the future, but for now it simplifies some things significantly.
+
+```js
+import { createElement, attachComponent } from "veles";
+
+const appContainer = document.getElementById("app");
+attachComponent({ htmlElement: appContainer, component: createElement(App) });
+```
+
+### createElement
+
+Create Veles tree. Accepts strings for regular valid HTML elements (like `div`, `span`, etc) and functions which are expected to return another Veles tree from `createElement`.
+
+> [!NOTE]
+> JSX should be almost fully supported as long as you specify `Veles.createElement` pragma
+
+```js
+import { createElement } from "veles";
+
+function App() {
+  return createElement("div", {
+    class: "app-container",
+    children: [
+      createElement("h1", { children: "Veles app" }),
+      createElement("p", { children: "Random description" }),
+    ],
+  });
+}
+```
+
+### createState
+
+`createState` is the API which is responsible for the interactivity in Veles applications, and it is the only one. You can either pass the initial value and then update it manually in callbacks or some other subscriptions, or you can pass a function as the second argument and you can subscribe to any external data store and update the state reacting to it.
+
+`createState` returns an object with a variety of subscription methods. It is important to understand that just creating the state object does not affect the component at all. When the state value updates, only the components which are rendered by these subscription methods will update, but the component where the state was created is not affected.
+
+The simplest way to react to state changes in the UI is to use `useValue` method from the state object. Let's build a simple counter to demonstrate:
+
+```js
+import { createElement, createState } from "veles";
+
+function Counter() {
+  const counterState = createState(0);
+  return createElement("div", {
+    children: [
+      createElement("h1", { children: "Counter" }),
+      createElement("div", {
+        children: counterState.useValue(
+          (counterValue) => `counter value is: ${counterValue}`
+        ),
+      }),
+      createElement("button", {
+        onClick: () => {
+          counterState.setValue(
+            (currentCounterValue) => currentCounterValue + 1
+          );
+        },
+        children: "+",
+      }),
+    ],
+  });
+}
+```
+
+### createState and partial subscriptions
+
+If you have an object in your store, even atomic updates will be wasteful. Let's say you have an object with several fields, but you are only interested in the `title` property. If you use `useValue`, it will do unnecessary work. To help with that, there is a `useValueSelector` state method, which accepts a selector function as the first parameter. Here is an example:
+
+```js
+import { createElement, createState } from "veles";
+
+function App() {
+  const taskState = createState({
+    id: 5,
+    title: "title",
+    description: "long description",
+  });
+  return createElement("div", {
+    children: [
+      createElement("h1", { children: "App" }),
+      createElement("div", {
+        children: taskState.useSelectorValue(
+          (task) => task.title,
+          (title) => `task title: ${title}`
+        ),
+      }),
+    ],
+  });
+}
+```
+
+The component which listens for `title` will only be rendered again when the title changes.
+
+### createState and lists
+
+Lists performance is one of the cornerstones of this library, and to help with that, it provides a special state method `useValueIterator`. This method ensures that when the state changes, instead of re-rendering the whole list, it checks each list element individually, moves them into correct order without unnecessary re-renders, and in case of changes element data, it will update the passed state object, so that only subscribed parts will re-render.
+
+> [!NOTE]
+> the library determines the uniqueness by calculating the key. You can either pass a string which will be a property name, or you can pass a function which will be executed with the element and the index. If the result is different from any previous calculations, it treats it as a new component.
+
+Let's build a simple list component:
+
+```js
+import { createState, createElement } from "veles";
+
+function List() {
+  const listState = createState([
+    { id: 1, name: "first task" },
+    { id: 2, name: "second task" },
+    { id: 3, name: "third task" },
+  ]);
+
+  return createElement("div", {
+    children: [
+      createElement("h1", { children: "list" }),
+      listState.useValueIterator<{ id: number; name: string }>(
+        { key: "id" },
+        ({ elementState }) => {
+          return createElement("div", {
+            children: [
+              elementState.useValueSelector((element) => element.name, (name) =>
+                createElement("div", { children: name })
+              ),
+            ],
+          });
+        }
+      ),
+    ],
+  });
+}
+```
+
+### createState and attributes
+
+In order to avoid unnecessary re-renders when you to change properties on a wrapper element/component, there is a special state method `useAttribute`. It allows to recalculate value for an attribute every time the state changes, but instead of re-rendering, it calls the `htmlNode.setAttribute` method. Here is an example:
+
+```js
+import { createElement, createState } from "veles";
+
+function Counter() {
+  const counterState = createState(0);
+  return createElement("div", {
+    children: [
+      createElement("h1", { children: "Counter" }),
+      counterState.useValue((counterValue) =>
+        createElement("div", { children: `counter value is: ${counterValue}` })
+      ),
+      createElement("button", {
+        onClick: () => {
+          counterState.setValue(
+            (currentCounterValue) => currentCounterValue + 1
+          );
+        },
+        style: counterState.useAttribute(
+          (currentValue) => `width: ${50 + currentValue}px;`
+        ),
+        children: "+",
+      }),
+    ],
+  });
+}
+```
+
+You can see that we dynamically change the width of the button with every press.
+
+### createState and subscribing to updates
+
+What if you don't want to render anything when the value changes, but you want to call your code? The state provides `trackValue` method, which does exactly that. Here is an example:
+
+```js
+import { createElement, createState } from "veles";
+
+function Counter() {
+  const counterState = createState(0);
+
+  counterState.trackValue((counterValue) => {
+    console.log(`new counter value is ${counterValue}`);
+  });
+
+  return createElement("div", {
+    children: [
+      createElement("h1", { children: "Counter" }),
+      counterState.useValue((counterValue) =>
+        createElement("div", { children: `counter value is: ${counterValue}` })
+      ),
+      createElement("button", {
+        onClick: () => {
+          counterState.setValue(
+            (currentCounterValue) => currentCounterValue + 1
+          );
+        },
+        children: "+",
+      }),
+    ],
+  });
+}
+```
+
+This subscription will not cause any re-renders. By default, the first call will happen during the component initialization, and you can pass a second options object to alter this behaviour. You can either set `{ skipFirstCall: true }` to completely skip it, or you can specify to run it when the component is mounted in DOM: `{ callOnMount: true }`.
+
+### Subscribing to partial updates
+
+In case you don't want to subscribe to the whole state, you have 2 options. You can either provide a `{ comparator: (prevValue, nextValue) => prevValue === nextValue }` property in the options object, or you can use `state.trackValueSelector()` method. You can also combine them, if you need that for some reason.
+
+### Combining different states
+
+Since `createState` is the only way to add dynamic behaviour to the application, sooner or later you'll need to build UI which depends on several states. To do so, you can use `combineState` function which accepts any amount of state objects, and returns an array with all combined values in it.
+
+```js
+import { createElement, createState } from "veles";
+
+function Counter() {
+  const firstcounterState = createState(0);
+  const secondCounterState = createState(0);
+  const combinedCounterState = combineState(
+    firstcounterState,
+    secondCounterState
+  );
+  return createElement("div", {
+    children: [
+      createElement("h1", { children: "Counter" }),
+      firstcounterState.useValue((counterValue) =>
+        createElement("div", {
+          children: `first counter value is: ${counterValue}`,
+        })
+      ),
+      secondCounterState.useValue((counterValue) =>
+        createElement("div", {
+          children: `second counter value is: ${counterValue}`,
+        })
+      ),
+      combinedCounterState.useValueSelector(
+        ([firstValue, secondValue]) => firstValue + secondValue,
+        (counterValue) =>
+          createElement("div", {
+            children: `combined counter value is: ${counterValue}`,
+          })
+      ),
+      createElement("button", {
+        onClick: () => {
+          firstcounterState.setValue(
+            (currentCounterValue) => currentCounterValue + 1
+          );
+        },
+        children: "add to the first counter",
+      }),
+      createElement("button", {
+        onClick: () => {
+          secondCounterState.setValue(
+            (currentCounterValue) => currentCounterValue + 1
+          );
+        },
+        children: "add to the second counter",
+      }),
+    ],
+  });
+}
+```
+
+### Components lifecycle
+
+Right now there are `onMount` and `onUnmount` lifecycle hooks. In your component, just import and call them to add a callback.
+
+> [!NOTE]
+> You can only use them during the original initialization of the component. If you want to add some callbacks later, use the same version passed as a second argument to your component
+
+```js
+import { createElement, onMount, onUnmount } from "veles";
+
+function App(_props, componentAPI) {
+  // could be used as `componentAPI.onMount()`
+  onMount(() => {
+    console.log("called when the component mounts");
+  });
+  // could be used as `componentAPI.onUnmount()`
+  onUnmount(() => {
+    console.log("called when the component unmounts");
+  });
+  return createElement("div", {
+    children: "Application",
+  });
+}
+```

package/dist/chunk-EVX3ZDYT.js

@@ -0,0 +1,271 @@
+// 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/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/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/fragment.ts
+function Fragment({ children }) {
+  return createElement("div", {
+    phantom: true,
+    children
+  });
+}
+
+export {
+  getComponentVelesNode,
+  identity,
+  onMount,
+  onUnmount,
+  createElement,
+  Fragment
+};
+//# sourceMappingURL=chunk-EVX3ZDYT.js.map

package/dist/chunk-EVX3ZDYT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/lifecycle.ts","../src/utils.ts","../src/create-element/parse-children.ts","../src/create-element/assign-attributes.ts","../src/create-element/parse-component.ts","../src/create-element/create-element.ts","../src/fragment.ts"],"sourcesContent":["import { ComponentAPI } from \"../types\";\n\n// lifecycle hooks\n// currently, all components need to be synchronous\n// so we execute them and set background context\n// since components can be nested, we need to keep the array\nconst contextStack: ComponentAPI[] = [];\n// all hooks need to know the current context\n// it should way more convenient this way compared to passing\n// `componentAPI` to every method\nlet currentContext: ComponentAPI | null = null;\n\nfunction addContext(newContext: ComponentAPI) {\n  contextStack.push(newContext);\n  currentContext = newContext;\n}\n\nfunction popContext() {\n  contextStack.pop();\n  currentContext = contextStack[contextStack.length - 1];\n}\n\nfunction onMount(cb: Function) {\n  if (currentContext) {\n    currentContext.onMount(cb);\n  } else {\n    console.error(\"missing current context\");\n  }\n}\n\nfunction onUnmount(cb: Function) {\n  if (currentContext) {\n    currentContext.onUnmount(cb);\n  } else {\n    console.error(\"missing current context\");\n  }\n}\n\nexport { addContext, popContext, onMount, onUnmount };\n","import type { VelesComponent, VelesElement, VelesStringElement } from \"./types\";\n\nfunction getComponentVelesNode(\n  component: VelesComponent | VelesElement | VelesStringElement\n): {\n  velesElementNode: VelesElement | VelesStringElement;\n  componentsTree: VelesComponent[];\n} {\n  const componentsTree: VelesComponent[] = [];\n\n  if (\"velesStringElement\" in component) {\n    return {\n      velesElementNode: component,\n      componentsTree: [],\n    };\n  }\n\n  let childNode: VelesComponent | VelesElement = component;\n  // we can have multiple components nested, we need to get\n  // to the actual HTML to attach it\n  while (\"velesComponent\" in childNode) {\n    componentsTree.push(childNode);\n    if (\"velesStringElement\" in childNode.tree) {\n      return {\n        velesElementNode: childNode.tree,\n        componentsTree,\n      };\n    } else {\n      childNode = childNode.tree;\n    }\n  }\n\n  return { velesElementNode: childNode, componentsTree };\n}\n\nfunction identity<T>(value1: T, value2: T) {\n  return value1 === value2;\n}\n\nexport { getComponentVelesNode, identity };\n","import { getComponentVelesNode } from \"../utils\";\n\nimport type {\n  VelesComponent,\n  VelesElement,\n  VelesStringElement,\n  VelesElementProps,\n} from \"../types\";\n\nfunction parseChildren({\n  children,\n  htmlElement,\n  velesNode,\n}: {\n  children: VelesElementProps[\"children\"];\n  htmlElement: HTMLElement;\n  velesNode: VelesElement;\n}) {\n  const childComponents: (\n    | VelesElement\n    | VelesComponent\n    | VelesStringElement\n  )[] = [];\n\n  if (children === undefined || children === null) {\n    return childComponents;\n  }\n\n  (Array.isArray(children) ? children : [children]).forEach(\n    (childComponent) => {\n      if (typeof childComponent === \"string\") {\n        const text = document.createTextNode(childComponent);\n        htmlElement.append(text);\n      } else if (\n        typeof childComponent === \"object\" &&\n        childComponent &&\n        \"velesNode\" in childComponent &&\n        childComponent?.velesNode\n      ) {\n        if (childComponent.phantom) {\n          // we need to get ALL the children of it and attach it to this node\n          childComponent.childComponents.forEach((childComponentofPhantom) => {\n            if (\"velesNode\" in childComponentofPhantom) {\n              htmlElement.append(childComponentofPhantom.html);\n              childComponentofPhantom.parentVelesElement = velesNode;\n            } else {\n              const { componentsTree, velesElementNode } =\n                getComponentVelesNode(childComponentofPhantom);\n\n              if (!velesElementNode) {\n                console.error(\"can't find HTML tree in a component chain\");\n              } else {\n                htmlElement.append(velesElementNode.html);\n\n                // TODO: address the same concern as below\n                componentsTree.forEach((component) => {\n                  component._privateMethods._callMountHandlers();\n                });\n\n                velesElementNode.parentVelesElement = velesNode;\n              }\n            }\n          });\n          childComponent.parentVelesElement = velesNode;\n          childComponents.push(childComponent);\n        } else {\n          // TODO: check that it is a valid DOM Node\n          htmlElement.append(childComponent.html);\n          childComponent.parentVelesElement = velesNode;\n          childComponents.push(childComponent);\n        }\n      } else if (\n        typeof childComponent === \"object\" &&\n        childComponent &&\n        \"velesComponent\" in childComponent &&\n        childComponent?.velesComponent\n      ) {\n        // we need to save the whole components chain, so that\n        // we can trigger `mount` hooks on all of them correctly\n        const { componentsTree, velesElementNode } =\n          getComponentVelesNode(childComponent);\n\n        if (!velesElementNode) {\n          console.error(\"can't find HTML tree in a component chain\");\n        } else {\n          if (\"velesNode\" in velesElementNode && velesElementNode.phantom) {\n            // we need to get ALL the children of it and attach it to this node\n            velesElementNode.childComponents.forEach(\n              (childComponentofPhantom) => {\n                if (\"velesNode\" in childComponentofPhantom) {\n                  htmlElement.append(childComponentofPhantom.html);\n                  childComponentofPhantom.parentVelesElement = velesNode;\n                } else {\n                  const { componentsTree, velesElementNode } =\n                    getComponentVelesNode(childComponentofPhantom);\n\n                  if (!velesElementNode) {\n                    console.error(\"can't find HTML tree in a component chain\");\n                  } else {\n                    htmlElement.append(velesElementNode.html);\n\n                    // Same explanation as below. Components are mounted synchronously\n                    setTimeout(() => {\n                      componentsTree.forEach((component) => {\n                        component._privateMethods._callMountHandlers();\n                      });\n                    }, 0);\n                    velesElementNode.parentVelesElement = velesNode;\n                  }\n                }\n              }\n            );\n          } else {\n            htmlElement.append(velesElementNode.html);\n          }\n\n          /**\n           * Components are mounted synchronously, so we can safely wait for the next\n           * CPU tick and be sure that new markup is attached to DOM.\n           */\n          setTimeout(() => {\n            componentsTree.forEach((component) => {\n              component._privateMethods._callMountHandlers();\n            });\n          }, 0);\n          velesElementNode.parentVelesElement = velesNode;\n          childComponents.push(childComponent);\n        }\n      } else if (\n        typeof childComponent === \"object\" &&\n        childComponent &&\n        \"velesStringElement\" in childComponent &&\n        childComponent?.velesStringElement\n      ) {\n        // TODO: check that it is a valid DOM Node\n        htmlElement.append(childComponent.html);\n        childComponent.parentVelesElement = velesNode;\n        childComponents.push(childComponent);\n      }\n    }\n  );\n\n  return childComponents;\n}\n\nexport { parseChildren };\n","import type { VelesElement } from \"../types\";\n\nfunction assignAttributes({\n  props,\n  htmlElement,\n  velesNode,\n}: {\n  props: Record<string, any>;\n  htmlElement: HTMLElement;\n  velesNode: VelesElement;\n}) {\n  Object.entries(props).forEach(([key, value]) => {\n    const isFunction = typeof value === \"function\";\n    if (isFunction && value.velesAttribute === true) {\n      const attributeValue = value(htmlElement, key, velesNode);\n      htmlElement.setAttribute(key, attributeValue);\n    } else if (\n      // basically, any form of `on` handlers, like `onClick`, `onCopy`, etc\n      isFunction &&\n      key.length > 2 &&\n      key.startsWith(\"on\")\n    ) {\n      // TODO: think if this is robust enough\n      htmlElement.addEventListener(\n        key[2].toLocaleLowerCase() + key.slice(3),\n        value\n      );\n    } else {\n      htmlElement.setAttribute(key, value);\n    }\n  });\n}\n\nexport { assignAttributes };\n","import { addContext, popContext } from \"../hooks/lifecycle\";\n\nimport type {\n  VelesComponent,\n  VelesStringElement,\n  VelesElementProps,\n  ComponentAPI,\n  ComponentFunction,\n} from \"../types\";\n\nfunction parseComponent({\n  element,\n  props,\n}: {\n  element: ComponentFunction;\n  props: VelesElementProps;\n}) {\n  const componentUnmountCbs: Function[] = [];\n  const componentMountCbs: Function[] = [];\n  const componentAPI: ComponentAPI = {\n    onMount: (cb) => {\n      componentMountCbs.push(cb);\n    },\n    onUnmount: (cb) => {\n      componentUnmountCbs.push(cb);\n    },\n  };\n  // at this moment we enter new context\n  addContext(componentAPI);\n  const _componentTree = element(props, componentAPI);\n\n  const componentTree =\n    typeof _componentTree === \"string\" || !_componentTree\n      ? ({\n          velesStringElement: true,\n          html: document.createTextNode(\n            typeof _componentTree === \"string\" ? _componentTree : \"\"\n          ),\n        } as VelesStringElement)\n      : _componentTree;\n\n  // here we exit our context\n  popContext();\n  const velesComponent: VelesComponent = {\n    velesComponent: true,\n    tree: componentTree,\n    _privateMethods: {\n      _addUnmountHandler: (cb: Function) => {\n        componentAPI.onUnmount(cb);\n      },\n      _callMountHandlers: () => {\n        componentMountCbs.forEach((cb) => cb());\n      },\n      _callUnmountHandlers: () => {\n        componentUnmountCbs.forEach((cb) => cb());\n        // this should trigger recursive checks, whether it is a VelesNode or VelesComponent\n        // string Nodes don't have lifecycle handlers\n        if (\"_privateMethods\" in velesComponent.tree) {\n          velesComponent.tree._privateMethods._callUnmountHandlers();\n        }\n      },\n    },\n  };\n\n  return velesComponent;\n}\n\nexport { parseComponent };\n","import { parseChildren } from \"./parse-children\";\nimport { assignAttributes } from \"./assign-attributes\";\nimport { parseComponent } from \"./parse-component\";\n\nimport type {\n  VelesComponent,\n  VelesElement,\n  VelesElementProps,\n  ComponentFunction,\n} from \"../types\";\n\nfunction createElement(\n  element: string | ComponentFunction,\n  props: VelesElementProps = {}\n): VelesElement | VelesComponent {\n  if (typeof element === \"string\") {\n    const { children, ref, phantom = false, ...otherProps } = props;\n    const newElement = document.createElement(element);\n    const velesNode = {} as VelesElement;\n\n    if (ref?.velesRef) {\n      ref.current = newElement;\n    }\n\n    const childComponents = parseChildren({\n      children,\n      htmlElement: newElement,\n      velesNode,\n    });\n\n    // these handlers are attached directly to the DOM element\n    // specifically, the top level node which is rendered after\n    // using `useValue` function and also listeners from\n    // `useAttribute`\n    let unmountHandlers: Function[] = [];\n    const callUnmountHandlers = () => {\n      unmountHandlers.forEach((cb) => cb());\n      unmountHandlers = [];\n\n      childComponents.forEach((childComponent) => {\n        childComponent._privateMethods._callUnmountHandlers();\n      });\n    };\n\n    velesNode.html = newElement;\n    velesNode.velesNode = true;\n    velesNode.childComponents = childComponents;\n    velesNode.phantom = phantom;\n    velesNode._privateMethods = {\n      _addUnmountHandler: (cb: Function) => {\n        unmountHandlers.push(cb);\n      },\n      _callUnmountHandlers: callUnmountHandlers,\n    };\n\n    // assign all the DOM attributes, including event listeners\n    assignAttributes({ props: otherProps, htmlElement: newElement, velesNode });\n\n    return velesNode;\n\n    // functions mean that we want to render another component\n  } else if (typeof element === \"function\") {\n    return parseComponent({ element, props });\n  }\n\n  // otherwise we use the API wrong, so we throw an error\n  throw new Error(\n    \"Veles createElement expects a valid DOM string or another component\"\n  );\n}\n\nexport { createElement };\n","import { createElement } from \"./create-element\";\n\nimport type { VelesChildren } from \"./types\";\n\nfunction Fragment({ children }: { children: VelesChildren }) {\n  return createElement(\"div\", {\n    phantom: true,\n    children,\n  });\n}\n\nexport { Fragment };\n"],"mappings":"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","names":["componentsTree","velesElementNode"]}