veles 0.0.9 → 1.0.0-alpha.0

package/README.md

@@ -4,8 +4,6 @@
 [![Build Size](https://img.shields.io/bundlephobia/minzip/veles?label=bundle%20size)](https://bundlephobia.com/result?p=veles)
 [![Version](https://img.shields.io/npm/v/veles)](https://www.npmjs.com/package/veles)
 
-> This library is still in early stages, so the API is not 100% finalized
-
 `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
@@ -30,16 +28,16 @@ Types are installed automatically with the same package.
 import { createState } from "veles";
 
 function NameComponent() {
-  const nameState = createState("");
+  const name$ = createState("");
   return (
     <div>
       <input
         type="text"
         name="name"
-        value={nameState.useAttribute()}
-        onInput={(e) => nameState.setValue(e.target.value)}
+        value={name$.attribute()}
+        onInput={(e) => name$.set(e.target.value)}
       />
-      <p>{nameState.useValue()}</p>
+      <p>{name$.render()}</p>
     </div>
   );
 }
@@ -55,7 +53,3 @@ This will render an input and will update the Text node dynamically, without re-
 - [Differences from other frameworks](https://bloomca.github.io/veles/frameworks-difference.html)
 
 There also a companion app ([veles-calendar-app](https://github.com/Bloomca/veles-calendar-app)), which is developed using Veles and is supposed to push it to the limits, identify the issues and ideally improve performance even more.
-
-### Features
-
-The library is under development, so some features are not available yet. Namely the TypeScript type inferring is not the best (although the library does support TypeScript), and Portals are not implemented yet.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veles",
-  "version": "0.0.9",
+  "version": "1.0.0-alpha.0",
   "description": "UI library with main focus on performance",
   "type": "module",
   "main": "dist/index.js",
@@ -19,15 +19,10 @@
       "types": "./dist/jsx-runtime.d.ts",
       "import": "./dist/jsx-runtime.js",
       "require": "./dist/jsx-runtime.cjs"
-    },
-    "./utils": {
-      "types": "./dist/utils/index.d.ts",
-      "import": "./dist/utils/index.js",
-      "require": "./dist/utils/index.cjs"
     }
   },
   "scripts": {
-    "test": "jest",
+    "test": "vitest run",
     "build": "tsup",
     "ts-compile-check": "tsc -p tsconfig.json"
   },
@@ -50,11 +45,8 @@
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^24.0.0",
-    "ts-jest": "^29.1.2",
-    "tsup": "^8.0.2"
+    "tsup": "^8.0.2",
+    "vitest": "^3.2.4"
   }
 }

package/dist/chunk-2KPVWPOL.js

@@ -1,285 +0,0 @@
-// 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/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());
-      }
-    }
-  };
-}
-
-// src/create-element/parse-children.ts
-function parseChildren({
-  children,
-  htmlElement,
-  velesNode
-}) {
-  const childComponents = [];
-  if (children === void 0 || children === null) {
-    return childComponents;
-  }
-  let lastInsertedNode = null;
-  (Array.isArray(children) ? children : [children]).forEach(
-    (childComponent) => {
-      if (typeof childComponent === "string") {
-        const textNode = createTextElement(childComponent);
-        htmlElement.append(textNode.html);
-        lastInsertedNode = textNode.html;
-        childComponents.push(textNode);
-      } else if (typeof childComponent === "number") {
-        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;
-              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;
-          childComponents.push(childComponent);
-        } else {
-          htmlElement.append(childComponent.html);
-          childComponent.parentVelesElement = velesNode;
-          childComponents.push(childComponent);
-          lastInsertedNode = childComponent.html;
-        }
-      } 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;
-      }
-    }
-  );
-  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);
-      assignAttribute({ key, value: attributeValue, htmlElement });
-    } else {
-      assignAttribute({ key, value, htmlElement });
-    }
-  });
-}
-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
-function parseComponent({
-  element,
-  props
-}) {
-  const mountCbs = [];
-  const unmountCbs = [];
-  return {
-    velesComponentObject: true,
-    element,
-    props,
-    _privateMethods: {
-      _addMountHandler(cb) {
-        mountCbs.push(cb);
-      },
-      _addUnmountHandler: (cb) => {
-        unmountCbs.push(cb);
-      },
-      _callMountHandlers: () => {
-        mountCbs.forEach((cb) => cb());
-      },
-      _callUnmountHandlers: () => {
-        unmountCbs.forEach((cb) => cb());
-      }
-    }
-  };
-}
-function executeComponent({
-  element,
-  props
-}) {
-  let componentUnmountCbs = [];
-  let 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 ? createTextElement(_componentTree) : _componentTree;
-  popContext();
-  const velesComponent = {
-    velesComponent: true,
-    tree: componentTree,
-    _privateMethods: {
-      _addMountHandler(cb) {
-        componentMountCbs.push(cb);
-      },
-      _addUnmountHandler: (cb) => {
-        componentAPI.onUnmount(cb);
-      },
-      _callMountHandlers: () => {
-        componentMountCbs.forEach((cb) => {
-          const mountCbResult = cb();
-          if (typeof mountCbResult === "function") {
-            componentAPI.onUnmount(mountCbResult);
-          }
-        });
-      },
-      _callUnmountHandlers: () => {
-        componentUnmountCbs.forEach((cb) => cb());
-      }
-    }
-  };
-  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
-    });
-    const unmountHandlers = [];
-    velesNode.html = newElement;
-    velesNode.velesNode = true;
-    velesNode.childComponents = childComponents;
-    velesNode.phantom = phantom;
-    const mountHandlers = [];
-    velesNode._privateMethods = {
-      _addMountHandler(cb) {
-        mountHandlers.push(cb);
-      },
-      _callMountHandlers() {
-        mountHandlers.forEach((cb) => cb());
-      },
-      _addUnmountHandler(cb) {
-        unmountHandlers.push(cb);
-      },
-      _callUnmountHandlers() {
-        unmountHandlers.forEach((cb) => cb());
-      }
-    };
-    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 {
-  onMount,
-  onUnmount,
-  createTextElement,
-  executeComponent,
-  createElement,
-  Fragment
-};