veles 0.0.9 → 1.0.0-alpha.1

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/dist/_utils-BZ1SMqm2.js

@@ -0,0 +1,468 @@
+//#region src/hooks/lifecycle.ts
+const contextStack = [];
+let 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");
+}
+function hasCurrentLifecycleContext() {
+	return Boolean(currentContext);
+}
+//#endregion
+//#region src/create-element/create-text-element.ts
+function createTextElement(text) {
+	const mountHandlers = [];
+	const unmountHandlers = [];
+	return {
+		velesStringElement: true,
+		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());
+			}
+		}
+	};
+}
+//#endregion
+//#region 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();
+	return {
+		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());
+			}
+		}
+	};
+}
+//#endregion
+//#region src/create-element/parse-children.ts
+function parseChildren({ children, htmlElement, velesNode, portal }) {
+	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?.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;
+					}
+				}
+			});
+			childComponent.parentVelesElement = velesNode;
+			childComponents.push(childComponent);
+		} else if (childComponent.portal) {
+			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.parentVelesElement = velesNode;
+			childComponents.push(childComponent);
+			if (portal) childComponent.portal = portal;
+			else {
+				childComponent.insertAfter = lastInsertedNode;
+				lastInsertedNode = childComponent;
+			}
+		} else if (typeof childComponent === "object" && childComponent && "velesStringElement" in childComponent && childComponent?.velesStringElement) {
+			htmlElement.append(childComponent.html);
+			childComponent.parentVelesElement = velesNode;
+			childComponents.push(childComponent);
+			lastInsertedNode = childComponent.html;
+		}
+	});
+	return childComponents;
+}
+//#endregion
+//#region src/create-element/assign-attributes.ts
+function assignAttributes({ props, htmlElement, velesNode }) {
+	Object.entries(props).forEach(([key, value]) => {
+		if (typeof value === "function" && value.velesAttribute === true) assignAttribute({
+			key,
+			value: value(htmlElement, key, velesNode),
+			htmlElement
+		});
+		else assignAttribute({
+			key,
+			value,
+			htmlElement
+		});
+	});
+}
+function assignAttribute({ key, value, htmlElement }) {
+	if (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);
+}
+//#endregion
+//#region src/create-element/create-element.ts
+function createElement(element, props = {}) {
+	if (typeof element === "string") {
+		const { children, ref, phantom = false, portal = null, ...otherProps } = props;
+		const newElement = document.createElement(element);
+		const velesNode = {};
+		if (ref?.velesRef) ref.current = newElement;
+		const childComponents = parseChildren({
+			children,
+			htmlElement: newElement,
+			velesNode,
+			portal
+		});
+		const unmountHandlers = [];
+		velesNode.html = newElement;
+		velesNode.velesNode = true;
+		velesNode.childComponents = childComponents;
+		velesNode.phantom = phantom;
+		velesNode.portal = portal;
+		const mountHandlers = [];
+		velesNode._privateMethods = {
+			_addMountHandler(cb) {
+				mountHandlers.push(cb);
+			},
+			_callMountHandlers() {
+				mountHandlers.forEach((cb) => cb());
+			},
+			_addUnmountHandler(cb) {
+				unmountHandlers.push(cb);
+			},
+			_callUnmountHandlers() {
+				unmountHandlers.forEach((cb) => cb());
+			}
+		};
+		/**
+		* Since portal node is already mounted in DOM, we can't just attach our HTML to it
+		* imediately. So we attach it only when the component is actually mounted, and detach
+		* when it is unmounted. This way we don't need to iterate the tree manually and
+		* attach/detach in every case we need to change the tree.
+		*/
+		if (portal) {
+			velesNode._privateMethods._addMountHandler(function attachNodeOnMount() {
+				velesNode.childComponents.forEach((childComponent) => {
+					if ("velesNode" in childComponent) if (childComponent.phantom) childComponent.childComponents.forEach((fragmentChildComponent) => {
+						portal.append(fragmentChildComponent.html);
+					});
+					else portal.append(childComponent.html);
+					else if ("velesStringElement" in childComponent) portal.append(childComponent.html);
+					else appendComponentToPortal(getExecutedComponentVelesNode(childComponent.executedVersion), portal);
+				});
+			});
+			velesNode._privateMethods._addUnmountHandler(function removeNodeOnUnmount() {
+				velesNode.childComponents.forEach((childComponent) => {
+					if ("velesNode" in childComponent) childComponent.html.remove();
+					else if ("velesStringElement" in childComponent) childComponent.html.remove();
+					else cleanupComponentFromPortal(getExecutedComponentVelesNode(childComponent.executedVersion));
+				});
+			});
+		}
+		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");
+}
+function appendComponentToPortal(componentNode, portal) {
+	if ("executedVelesNode" in componentNode && componentNode.phantom) {
+		componentNode.childComponents.forEach((fragmentChildComponent) => {
+			if ("executedVelesComponent" in fragmentChildComponent) appendComponentToPortal(getExecutedComponentVelesNode(fragmentChildComponent), portal);
+			else portal.append(fragmentChildComponent.html);
+		});
+		componentNode.phantom;
+	} else portal.append(componentNode.html);
+}
+function cleanupComponentFromPortal(componentNode) {
+	if ("executedVelesNode" in componentNode && componentNode.phantom) {
+		componentNode.childComponents.forEach((fragmentChildComponent) => {
+			if ("executedVelesComponent" in fragmentChildComponent) cleanupComponentFromPortal(getExecutedComponentVelesNode(fragmentChildComponent));
+			else fragmentChildComponent.html.remove();
+		});
+		componentNode.phantom;
+	} else componentNode.html.remove();
+}
+//#endregion
+//#region src/fragment.ts
+function Fragment({ children }) {
+	return createElement("div", {
+		phantom: true,
+		children
+	});
+}
+//#endregion
+//#region src/context/index.ts
+const publicContextStack = [];
+let contextIdCounter = 1;
+function createContext() {
+	const contextId = contextIdCounter++;
+	function addContext(value) {
+		const currentContextObject = publicContextStack[publicContextStack.length - 1];
+		if (!currentContextObject) console.error("cannot add Context due to missing stack value");
+		else publicContextStack[publicContextStack.length - 1] = {
+			...currentContextObject,
+			[contextId]: value
+		};
+	}
+	return {
+		Provider: ({ value, children }) => {
+			addContext(value);
+			return createElement(Fragment, { children });
+		},
+		addContext,
+		readContext: () => {
+			const currentContext = publicContextStack[publicContextStack.length - 1];
+			if (!currentContext) console.error("no Context currently available");
+			else return currentContext[contextId];
+		}
+	};
+}
+function addPublicContext(specificContext) {
+	if (specificContext) publicContextStack.push(specificContext);
+	else if (publicContextStack.length === 0) publicContextStack.push({});
+	else {
+		const currentContext = publicContextStack[publicContextStack.length - 1];
+		publicContextStack.push(currentContext);
+	}
+}
+function popPublicContext() {
+	publicContextStack.pop();
+}
+function getCurrentContext() {
+	return publicContextStack[publicContextStack.length - 1];
+}
+//#endregion
+//#region src/_utils.ts
+function getExecutedComponentVelesNode(component) {
+	if ("executedVelesStringElement" in component) return component;
+	let childNode = component;
+	while ("executedVelesComponent" in childNode) if ("executedVelesStringElement" in childNode.tree) return childNode.tree;
+	else childNode = childNode.tree;
+	return childNode;
+}
+function renderTree(component, { parentVelesElement } = {}) {
+	if ("velesStringElement" in component) {
+		const executedString = {
+			executedVelesStringElement: true,
+			_privateMethods: component._privateMethods,
+			html: component.html,
+			parentVelesElement
+		};
+		if (component.needExecutedVersion) component.executedVersion = executedString;
+		return executedString;
+	} else if ("velesComponentObject" in component) {
+		addPublicContext();
+		const componentTree = executeComponent(component);
+		const executedComponent = {};
+		executedComponent.executedVelesComponent = true;
+		executedComponent.tree = renderTree(componentTree.tree);
+		popPublicContext();
+		executedComponent._privateMethods = {
+			...componentTree._privateMethods,
+			_callMountHandlers: () => {
+				component._privateMethods._callMountHandlers();
+				componentTree._privateMethods._callMountHandlers();
+			},
+			_callUnmountHandlers: () => {
+				component._privateMethods._callUnmountHandlers();
+				componentTree._privateMethods._callUnmountHandlers();
+			}
+		};
+		const newNode = getExecutedComponentVelesNode(executedComponent);
+		if (component.portal) {
+			/**
+			* Inserting nodes is handled by the portal parent element.
+			* We still need to assign `parentVelesElement`, so that
+			* `render` updates correctly
+			*/
+			if (parentVelesElement) newNode.parentVelesElement = parentVelesElement;
+		} else if (parentVelesElement) {
+			if (component.insertAfter) if ("velesComponentObject" in component.insertAfter) component.html = insertNode({
+				velesElement: newNode,
+				adjacentNode: component.insertAfter.html,
+				parentVelesElement
+			});
+			else component.html = insertNode({
+				velesElement: newNode,
+				adjacentNode: component.insertAfter,
+				parentVelesElement
+			});
+			else component.html = insertNode({
+				velesElement: newNode,
+				adjacentNode: null,
+				parentVelesElement
+			});
+			newNode.parentVelesElement = parentVelesElement;
+		}
+		if (component.needExecutedVersion || component.portal) component.executedVersion = executedComponent;
+		return executedComponent;
+	} else if ("velesNode" in component) {
+		const executedNode = {};
+		executedNode.executedVelesNode = true;
+		executedNode._privateMethods = component._privateMethods;
+		executedNode.html = component.html;
+		if (parentVelesElement) executedNode.parentVelesElement = parentVelesElement;
+		if (component.phantom) executedNode.phantom = component.phantom;
+		if (component.portal) executedNode.portal = component.portal;
+		executedNode.childComponents = component.childComponents.map((childComponent) => renderTree(childComponent, { parentVelesElement: executedNode }));
+		if (component.needExecutedVersion) component.executedVersion = executedNode;
+		return executedNode;
+	}
+}
+function insertNode({ velesElement, adjacentNode, parentVelesElement }) {
+	if (velesElement.phantom) {
+		let lastInsertedNode = null;
+		velesElement.childComponents.forEach((childComponentofPhantom) => {
+			if ("executedVelesNode" in childComponentofPhantom) {
+				if (lastInsertedNode) lastInsertedNode.after(childComponentofPhantom.html);
+				else if (adjacentNode) adjacentNode.after(childComponentofPhantom.html);
+				else parentVelesElement.html.prepend(childComponentofPhantom.html);
+				childComponentofPhantom.parentVelesElement = parentVelesElement;
+				lastInsertedNode = childComponentofPhantom.html;
+			} else if ("executedVelesStringElement" in childComponentofPhantom) {
+				if (lastInsertedNode) lastInsertedNode.after(childComponentofPhantom.html);
+				else if (adjacentNode) adjacentNode.after(childComponentofPhantom.html);
+				else parentVelesElement.html.prepend(childComponentofPhantom.html);
+				childComponentofPhantom.parentVelesElement = parentVelesElement;
+				lastInsertedNode = childComponentofPhantom.html;
+			} else {
+				const executedNode = getExecutedComponentVelesNode(childComponentofPhantom);
+				if (lastInsertedNode) lastInsertedNode.after(executedNode.html);
+				else if (adjacentNode) adjacentNode.after(executedNode.html);
+				else parentVelesElement.html.prepend(executedNode.html);
+				executedNode.parentVelesElement = parentVelesElement;
+				lastInsertedNode = executedNode.html;
+			}
+		});
+		velesElement.parentVelesElement = parentVelesElement;
+		return lastInsertedNode;
+	} else {
+		if (adjacentNode) adjacentNode.after(velesElement.html);
+		else parentVelesElement.html.prepend(velesElement.html);
+		velesElement.parentVelesElement = parentVelesElement;
+		return velesElement.html;
+	}
+}
+function callMountHandlers(component) {
+	component._privateMethods._callMountHandlers();
+	if ("executedVelesStringElement" in component) return;
+	if ("executedVelesComponent" in component) callMountHandlers(component.tree);
+	if ("executedVelesNode" in component) component.childComponents.forEach((childComponent) => callMountHandlers(childComponent));
+}
+function callUnmountHandlers(component) {
+	if ("executedVelesStringElement" in component) {} else if ("executedVelesComponent" in component) callUnmountHandlers(component.tree);
+	else if ("executedVelesNode" in component) component.childComponents.forEach((childComponent) => callUnmountHandlers(childComponent));
+	component._privateMethods._callUnmountHandlers();
+}
+function identity(value1, value2) {
+	return value1 === value2;
+}
+function unique(arr) {
+	const map = /* @__PURE__ */ new Map();
+	const resultArr = [];
+	arr.forEach((element) => {
+		if (map.has(element)) return;
+		map.set(element, true);
+		resultArr.push(element);
+	});
+	return resultArr;
+}
+//#endregion
+export { renderTree as a, createContext as c, Fragment as d, createElement as f, onUnmount as g, onMount as h, identity as i, getCurrentContext as l, hasCurrentLifecycleContext as m, callUnmountHandlers as n, unique as o, createTextElement as p, getExecutedComponentVelesNode as r, addPublicContext as s, callMountHandlers as t, popPublicContext as u };