veles 0.0.7 → 0.0.9

package/dist/index.d.cts

@@ -1,18 +1,39 @@
-import { V as VelesElement, a as VelesComponent } from './types.d-DgVBp6oa.cjs';
-export { F as Fragment, c as createElement } from './fragment-CU26z590.cjs';
-export { S as State, c as createState } from './create-state-D1JASFVs.cjs';
+import { V as VelesElement, a as VelesComponentObject, c as VelesChildren } from './types.d-CjiJHqth.cjs';
+export { Fragment, jsx as createElement } from './jsx-runtime.cjs';
+export { S as State, c as createState } from './index-BkD2Za6F.cjs';
 
+/**
+ * Attach Veles component tree to a regular HTML node.
+ * Right now it will wrap the app into an additional `<div>` tag.
+ *
+ * It returns a function which when executed, will remove the Veles
+ * tree from DOM and remove all subscriptions.
+ */
 declare function attachComponent({ htmlElement, component, }: {
     htmlElement: HTMLElement;
-    component: VelesElement | VelesComponent;
+    component: VelesElement | VelesComponentObject;
 }): () => void;
 
 declare function onMount(cb: () => void | Function): void;
 declare function onUnmount(cb: Function): void;
 
+/**
+ * Create a reference which has special treatment if passed as
+ * ref={ref} to any DOM Node. `ref.current` will contain the
+ * rendered node, even if it changes.
+ */
 declare function createRef<T>(initialRefValue?: T | null): {
     velesRef: true;
     current: T | null;
 };
 
-export { attachComponent, createRef, onMount, onUnmount };
+declare function createContext<T>(): {
+    Provider: ({ value, children }: {
+        value: T;
+        children?: VelesChildren;
+    }) => VelesComponentObject | VelesElement;
+    addContext: (value: T) => void;
+    readContext: () => T;
+};
+
+export { attachComponent, createContext, createRef, onMount, onUnmount };

package/dist/index.d.ts

@@ -1,18 +1,39 @@
-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';
+import { V as VelesElement, a as VelesComponentObject, c as VelesChildren } from './types.d-CjiJHqth.js';
+export { Fragment, jsx as createElement } from './jsx-runtime.js';
+export { S as State, c as createState } from './index-DBdVF_11.js';
 
+/**
+ * Attach Veles component tree to a regular HTML node.
+ * Right now it will wrap the app into an additional `<div>` tag.
+ *
+ * It returns a function which when executed, will remove the Veles
+ * tree from DOM and remove all subscriptions.
+ */
 declare function attachComponent({ htmlElement, component, }: {
     htmlElement: HTMLElement;
-    component: VelesElement | VelesComponent;
+    component: VelesElement | VelesComponentObject;
 }): () => void;
 
 declare function onMount(cb: () => void | Function): void;
 declare function onUnmount(cb: Function): void;
 
+/**
+ * Create a reference which has special treatment if passed as
+ * ref={ref} to any DOM Node. `ref.current` will contain the
+ * rendered node, even if it changes.
+ */
 declare function createRef<T>(initialRefValue?: T | null): {
     velesRef: true;
     current: T | null;
 };
 
-export { attachComponent, createRef, onMount, onUnmount };
+declare function createContext<T>(): {
+    Provider: ({ value, children }: {
+        value: T;
+        children?: VelesChildren;
+    }) => VelesComponentObject | VelesElement;
+    addContext: (value: T) => void;
+    readContext: () => T;
+};
+
+export { attachComponent, createContext, createRef, onMount, onUnmount };

package/dist/index.js

@@ -1,16 +1,17 @@
-import {
-  Fragment
-} from "./chunk-X6QYYW56.js";
-import {
-  createState
-} from "./chunk-MH6DPZ3V.js";
 import {
   callMountHandlers,
+  callUnmountHandlers,
+  createContext,
+  createState,
+  getExecutedComponentVelesNode,
+  renderTree
+} from "./chunk-VW64LMPA.js";
+import {
+  Fragment,
   createElement,
-  getComponentVelesNode,
   onMount,
   onUnmount
-} from "./chunk-ILNLS6QO.js";
+} from "./chunk-2KPVWPOL.js";
 
 // src/attach-component.ts
 function attachComponent({
@@ -18,10 +19,12 @@ function attachComponent({
   component
 }) {
   const wrappedApp = createElement("div", { children: [component] });
-  const { velesElementNode } = getComponentVelesNode(wrappedApp);
+  const wrappedAppTree = renderTree(wrappedApp);
+  const velesElementNode = getExecutedComponentVelesNode(wrappedAppTree);
   htmlElement.appendChild(velesElementNode.html);
-  callMountHandlers(wrappedApp);
+  callMountHandlers(wrappedAppTree);
   return () => {
+    callUnmountHandlers(wrappedAppTree);
     velesElementNode.html.remove();
   };
 }
@@ -36,6 +39,7 @@ function createRef(initialRefValue = null) {
 export {
   Fragment,
   attachComponent,
+  createContext,
   createElement,
   createRef,
   createState,

package/dist/jsx-runtime.cjs

@@ -26,28 +26,30 @@ __export(jsx_runtime_exports, {
 });
 module.exports = __toCommonJS(jsx_runtime_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;
+// src/create-element/create-text-element.ts
+function createTextElement(text) {
+  const mountHandlers = [];
+  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: {
+      _addMountHandler(cb) {
+        mountHandlers.push(cb);
+      },
+      _callMountHandlers() {
+        mountHandlers.forEach((cb) => cb());
+      },
+      _addUnmountHandler: (cb) => {
+        unmountHandlers.push(cb);
+      },
+      _callUnmountHandlers: () => {
+        unmountHandlers.forEach((cb) => cb());
+      }
     }
-  }
-  return { velesElementNode: childNode, componentsTree };
+  };
 }
 
 // src/create-element/parse-children.ts
@@ -60,30 +62,36 @@ function parseChildren({
   if (children === void 0 || children === null) {
     return childComponents;
   }
+  let lastInsertedNode = null;
   (Array.isArray(children) ? children : [children]).forEach(
     (childComponent) => {
       if (typeof childComponent === "string") {
-        const text = document.createTextNode(childComponent);
-        htmlElement.append(text);
+        const textNode = createTextElement(childComponent);
+        htmlElement.append(textNode.html);
+        lastInsertedNode = textNode.html;
+        childComponents.push(textNode);
       } else if (typeof childComponent === "number") {
-        const text = document.createTextNode(String(childComponent));
-        htmlElement.append(text);
+        const textNode = createTextElement(String(childComponent));
+        htmlElement.append(textNode.html);
+        lastInsertedNode = textNode.html;
+        childComponents.push(textNode);
       } else if (typeof childComponent === "object" && childComponent && "velesNode" in childComponent && (childComponent == null ? void 0 : childComponent.velesNode)) {
         if (childComponent.phantom) {
           childComponent.childComponents.forEach((childComponentofPhantom) => {
             if ("velesNode" in childComponentofPhantom) {
               htmlElement.append(childComponentofPhantom.html);
               childComponentofPhantom.parentVelesElement = velesNode;
-            } else {
-              const { velesElementNode } = getComponentVelesNode(
-                childComponentofPhantom
-              );
+              lastInsertedNode = childComponentofPhantom.html;
+            } else if ("velesStringElement" in childComponentofPhantom) {
+              const velesElementNode = childComponentofPhantom;
               if (!velesElementNode) {
                 console.error("can't find HTML tree in a component chain");
               } else {
                 htmlElement.append(velesElementNode.html);
+                lastInsertedNode = velesElementNode.html;
                 velesElementNode.parentVelesElement = velesNode;
               }
+            } else {
             }
           });
           childComponent.parentVelesElement = velesNode;
@@ -92,39 +100,18 @@ function parseChildren({
           htmlElement.append(childComponent.html);
           childComponent.parentVelesElement = velesNode;
           childComponents.push(childComponent);
+          lastInsertedNode = childComponent.html;
         }
-      } else if (typeof childComponent === "object" && childComponent && "velesComponent" in childComponent && (childComponent == null ? void 0 : childComponent.velesComponent)) {
-        const { componentsTree, velesElementNode } = getComponentVelesNode(childComponent);
-        if (!velesElementNode) {
-          console.error("can't find HTML tree in a component chain");
-        } else {
-          if ("velesNode" in velesElementNode && velesElementNode.phantom) {
-            velesElementNode.childComponents.forEach(
-              (childComponentofPhantom) => {
-                if ("velesNode" in childComponentofPhantom) {
-                  htmlElement.append(childComponentofPhantom.html);
-                  childComponentofPhantom.parentVelesElement = velesNode;
-                } else {
-                  const { componentsTree: componentsTree2, velesElementNode: velesElementNode2 } = getComponentVelesNode(childComponentofPhantom);
-                  if (!velesElementNode2) {
-                    console.error("can't find HTML tree in a component chain");
-                  } else {
-                    htmlElement.append(velesElementNode2.html);
-                    velesElementNode2.parentVelesElement = velesNode;
-                  }
-                }
-              }
-            );
-          } else {
-            htmlElement.append(velesElementNode.html);
-          }
-          velesElementNode.parentVelesElement = velesNode;
-          childComponents.push(childComponent);
-        }
+      } else if (typeof childComponent === "object" && childComponent && "velesComponentObject" in childComponent) {
+        childComponent.insertAfter = lastInsertedNode;
+        childComponent.parentVelesElement = velesNode;
+        childComponents.push(childComponent);
+        lastInsertedNode = 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);
+        lastInsertedNode = childComponent.html;
       }
     }
   );
@@ -141,31 +128,30 @@ function assignAttributes({
     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
-      );
+      assignAttribute({ key, value: attributeValue, htmlElement });
     } else {
-      htmlElement.setAttribute(key, value);
+      assignAttribute({ key, value, htmlElement });
     }
   });
 }
-
-// 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 assignAttribute({
+  key,
+  value,
+  htmlElement
+}) {
+  if (
+    // basically, any form of `on` handlers, like `onClick`, `onCopy`, etc
+    typeof value === "function" && key.startsWith("on")
+  ) {
+    htmlElement.addEventListener(key.slice(2).toLocaleLowerCase(), value);
+  } else {
+    if (typeof value === "boolean") {
+      if (value)
+        htmlElement.setAttribute(key, "");
+    } else {
+      htmlElement.setAttribute(key, value);
+    }
+  }
 }
 
 // src/create-element/parse-component.ts
@@ -173,49 +159,27 @@ 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,
+  const mountCbs = [];
+  const unmountCbs = [];
+  return {
+    velesComponentObject: true,
+    element,
+    props,
     _privateMethods: {
+      _addMountHandler(cb) {
+        mountCbs.push(cb);
+      },
       _addUnmountHandler: (cb) => {
-        componentAPI.onUnmount(cb);
+        unmountCbs.push(cb);
       },
       _callMountHandlers: () => {
-        componentMountCbs.forEach((cb) => {
-          const mountCbResult = cb();
-          if (typeof mountCbResult === "function") {
-            componentAPI.onUnmount(mountCbResult);
-          }
-        });
+        mountCbs.forEach((cb) => cb());
       },
       _callUnmountHandlers: () => {
-        componentUnmountCbs.forEach((cb) => cb());
-        if ("_privateMethods" in velesComponent.tree) {
-          velesComponent.tree._privateMethods._callUnmountHandlers();
-        }
+        unmountCbs.forEach((cb) => cb());
       }
     }
   };
-  return velesComponent;
 }
 
 // src/create-element/create-element.ts
@@ -232,23 +196,25 @@ function createElement(element, props = {}) {
       htmlElement: newElement,
       velesNode
     });
-    let unmountHandlers = [];
-    const callUnmountHandlers = () => {
-      unmountHandlers.forEach((cb) => cb());
-      unmountHandlers = [];
-      childComponents.forEach((childComponent) => {
-        childComponent._privateMethods._callUnmountHandlers();
-      });
-    };
+    const unmountHandlers = [];
     velesNode.html = newElement;
     velesNode.velesNode = true;
     velesNode.childComponents = childComponents;
     velesNode.phantom = phantom;
+    const mountHandlers = [];
     velesNode._privateMethods = {
-      _addUnmountHandler: (cb) => {
+      _addMountHandler(cb) {
+        mountHandlers.push(cb);
+      },
+      _callMountHandlers() {
+        mountHandlers.forEach((cb) => cb());
+      },
+      _addUnmountHandler(cb) {
         unmountHandlers.push(cb);
       },
-      _callUnmountHandlers: callUnmountHandlers
+      _callUnmountHandlers() {
+        unmountHandlers.forEach((cb) => cb());
+      }
     };
     assignAttributes({ props: otherProps, htmlElement: newElement, velesNode });
     return velesNode;