veles 1.1.1 → 1.1.3

package/dist/{_utils-DxfFNKLL.js → _utils-BnAXelPu.js}

@@ -108,11 +108,20 @@ function executeComponent({ element, props }) {
 }
 //#endregion
 //#region src/create-element/parse-children.ts
+function flattenChildren(children) {
+	const flattenedChildren = [];
+	function append(child) {
+		if (Array.isArray(child)) child.forEach(append);
+		else flattenedChildren.push(child);
+	}
+	append(children);
+	return flattenedChildren;
+}
 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) => {
+	flattenChildren(children).forEach((childComponent) => {
 		if (typeof childComponent === "string") {
 			const textNode = createTextElement(childComponent);
 			htmlElement.append(textNode.html);

package/dist/{_utils-DnT1tr2L.cjs → _utils-DbrPydEE.cjs}

@@ -108,11 +108,20 @@ function executeComponent({ element, props }) {
 }
 //#endregion
 //#region src/create-element/parse-children.ts
+function flattenChildren(children) {
+	const flattenedChildren = [];
+	function append(child) {
+		if (Array.isArray(child)) child.forEach(append);
+		else flattenedChildren.push(child);
+	}
+	append(children);
+	return flattenedChildren;
+}
 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) => {
+	flattenChildren(children).forEach((childComponent) => {
 		if (typeof childComponent === "string") {
 			const textNode = createTextElement(childComponent);
 			htmlElement.append(textNode.html);

package/dist/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require__utils = require("./_utils-DnT1tr2L.cjs");
+const require__utils = require("./_utils-DbrPydEE.cjs");
 //#region src/attach-component.ts
 /**
 * Attach Veles component tree to a regular HTML node.
@@ -370,6 +370,113 @@ function triggerUpdates({ value, createState, trackers, get }) {
 	});
 }
 //#endregion
+//#region src/create-state/min-heap.ts
+/**
+* A stable min-heap. Values with the same priority are returned in
+* insertion order.
+*/
+var MinHeap = class {
+	constructor(compareValues) {
+		this._entries = [];
+		this._insertionOrder = 0;
+		this._compareValues = compareValues;
+	}
+	get size() {
+		return this._entries.length;
+	}
+	push(value) {
+		const entry = {
+			value,
+			insertionOrder: this._insertionOrder++
+		};
+		let index = this._entries.length;
+		this._entries.push(entry);
+		while (index > 0) {
+			const parentIndex = Math.floor((index - 1) / 2);
+			const parentEntry = this._entries[parentIndex];
+			if (this.compareEntries(parentEntry, entry) <= 0) break;
+			this._entries[index] = parentEntry;
+			index = parentIndex;
+		}
+		this._entries[index] = entry;
+	}
+	pop() {
+		const firstEntry = this._entries[0];
+		const lastEntry = this._entries.pop();
+		if (!firstEntry || !lastEntry) return void 0;
+		if (this._entries.length === 0) return firstEntry.value;
+		let index = 0;
+		while (true) {
+			const leftChildIndex = index * 2 + 1;
+			const rightChildIndex = leftChildIndex + 1;
+			let smallestIndex = index;
+			if (leftChildIndex < this._entries.length && this.compareEntries(this._entries[leftChildIndex], lastEntry) < 0) smallestIndex = leftChildIndex;
+			if (rightChildIndex < this._entries.length && this.compareEntries(this._entries[rightChildIndex], smallestIndex === index ? lastEntry : this._entries[leftChildIndex]) < 0) smallestIndex = rightChildIndex;
+			if (smallestIndex === index) break;
+			this._entries[index] = this._entries[smallestIndex];
+			index = smallestIndex;
+		}
+		this._entries[index] = lastEntry;
+		return firstEntry.value;
+	}
+	compareEntries(entry1, entry2) {
+		const valueComparison = this._compareValues(entry1.value, entry2.value);
+		return valueComparison === 0 ? entry1.insertionOrder - entry2.insertionOrder : valueComparison;
+	}
+};
+//#endregion
+//#region src/create-state/state-scheduler.ts
+/**
+* Coordinates notifications produced by one synchronous state transaction.
+*
+* A subscriber can synchronously update another state. That nested update adds
+* its notifications to this same scheduler, allowing an older notification for
+* the same state to be replaced before it is delivered.
+*/
+var StateScheduler = class {
+	constructor() {
+		this._notifications = new MinHeap((notification1, notification2) => notification1.rank - notification2.rank);
+		this._notificationsByKey = /* @__PURE__ */ new Map();
+	}
+	scheduleNotification(notification) {
+		const existingNotification = this._notificationsByKey.get(notification.key);
+		if (existingNotification) {
+			existingNotification.value = notification.value;
+			return;
+		}
+		this._notificationsByKey.set(notification.key, notification);
+		this._notifications.push(notification);
+	}
+	deliverNotifications() {
+		while (this._notifications.size > 0) {
+			const notification = this._notifications.pop();
+			if (this._notificationsByKey.get(notification.key) !== notification) continue;
+			this._notificationsByKey.delete(notification.key);
+			notification.notify(notification.value, notification.previousValue);
+		}
+	}
+};
+let activeScheduler;
+/**
+* Top-level state updates own the scheduler and synchronously drain it. Updates
+* made by subscribers reuse the active scheduler, so they cannot deliver a
+* nested notification batch ahead of notifications already waiting to run.
+*/
+function runWithStateScheduler(runUpdate) {
+	if (activeScheduler) {
+		runUpdate(activeScheduler);
+		return;
+	}
+	const scheduler = new StateScheduler();
+	activeScheduler = scheduler;
+	try {
+		runUpdate(scheduler);
+		scheduler.deliverNotifications();
+	} finally {
+		activeScheduler = void 0;
+	}
+}
+//#endregion
 //#region src/create-state/state-core.ts
 const emptyValue = Symbol("veles-state-core-empty");
 const defaultEquality = (value1, value2) => value1 === value2;
@@ -380,8 +487,10 @@ var StateCore = class StateCore {
 		this._dirty = false;
 		this._children = /* @__PURE__ */ new Set();
 		this._value = initialValue;
-		this._parents = new Set(options.parents);
+		const parents = options.parents || [];
+		this._parents = new Set(parents);
 		this._compute = options.compute;
+		this._rank = parents.reduce((rank, parent) => Math.max(rank, parent._rank + 1), 0);
 		this._dirty = Boolean(options.dirty);
 		this._equality = options.equality || defaultEquality;
 	}
@@ -400,14 +509,16 @@ var StateCore = class StateCore {
 	}
 	set(newValue) {
 		if (this._equality(this._value, newValue)) return;
-		const prevValue = this._value;
-		this._prevValue = prevValue;
-		this._value = newValue;
-		this.notifySubscribers(newValue, prevValue);
-		this._children.forEach((child) => {
-			child._dirty = true;
+		runWithStateScheduler((scheduler) => {
+			const prevValue = this._value;
+			this._prevValue = prevValue;
+			this._value = newValue;
+			this.scheduleNotification(scheduler, newValue, prevValue);
+			this._children.forEach((child) => {
+				child._dirty = true;
+			});
+			this.flush(scheduler);
 		});
-		this.flush();
 	}
 	update(fn) {
 		const newValue = fn(this._value);
@@ -494,37 +605,62 @@ var StateCore = class StateCore {
 		this._dirty = false;
 		return { changed };
 	}
-	flush() {
-		const queue = Array.from(this._children);
-		const queued = new Set(queue);
-		while (queue.length > 0) {
-			const child = queue.shift();
+	flush(scheduler) {
+		/**
+		* We utilize a min-heap to ensure that we don't trigger notifications
+		* before all the previous necessary work is done. Otherwise it can
+		* happen too early, and we'd need to recursively check that every parent
+		* is not dirty and schedule it again.
+		*
+		* Here we achieve this by assinging a rank to each core state, which is
+		* determined by the highest rank of any of the parent + 1.
+		*
+		* After that, we process them at the same rank, ensuring that "short" branches
+		* are not executed before all their parents are done with their recomputation.
+		*/
+		const queue = new MinHeap((node1, node2) => node1._rank - node2._rank);
+		const queued = /* @__PURE__ */ new Set();
+		const enqueue = (node) => {
+			if (queued.has(node)) return;
+			queue.push(node);
+			queued.add(node);
+		};
+		this._children.forEach(enqueue);
+		while (queue.size > 0) {
+			const child = queue.pop();
 			queued.delete(child);
 			if (!child._dirty) continue;
-			if (child.hasDirtyParents()) {
-				queue.push(child);
-				queued.add(child);
+			let shouldRescheduleChild = false;
+			child._parents.forEach((parentNode) => {
+				if (parentNode._dirty) {
+					enqueue(parentNode);
+					shouldRescheduleChild = true;
+				}
+			});
+			if (shouldRescheduleChild) {
+				enqueue(child);
 				continue;
 			}
 			const { changed } = child.recompute();
 			const value = child._value;
 			if (!changed) continue;
-			child.notifySubscribers(value, child._prevValue);
+			child.scheduleNotification(scheduler, value, child._prevValue);
 			child._children.forEach((grandchild) => {
 				grandchild._dirty = true;
-				if (!queued.has(grandchild)) {
-					queue.push(grandchild);
-					queued.add(grandchild);
-				}
+				enqueue(grandchild);
 			});
 		}
 	}
-	hasDirtyParents() {
-		let hasDirtyParent = false;
-		this._parents.forEach((parent) => {
-			if (parent._dirty) hasDirtyParent = true;
+	scheduleNotification(scheduler, value, previousValue) {
+		scheduler.scheduleNotification({
+			key: this,
+			rank: this._rank,
+			value,
+			previousValue,
+			notify: (notificationValue, notificationPreviousValue) => {
+				this.notifySubscribers(notificationValue, notificationPreviousValue);
+			}
 		});
-		return hasDirtyParent;
 	}
 	notifySubscribers(value, prevValue) {
 		if (value === emptyValue) return;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { _ as onMount, a as identity, c as addPublicContext, d as popPublicContext, f as Fragment, g as hasCurrentLifecycleContext, h as createTextElement, i as getMountedNodeExecutedVersion, l as createContext, m as assignDomAttribute, n as callUnmountHandlers, o as renderTree, p as createElement, r as getExecutedComponentVelesNode, s as unique, t as callMountHandlers, u as getCurrentContext, v as onUnmount } from "./_utils-DxfFNKLL.js";
+import { _ as onMount, a as identity, c as addPublicContext, d as popPublicContext, f as Fragment, g as hasCurrentLifecycleContext, h as createTextElement, i as getMountedNodeExecutedVersion, l as createContext, m as assignDomAttribute, n as callUnmountHandlers, o as renderTree, p as createElement, r as getExecutedComponentVelesNode, s as unique, t as callMountHandlers, u as getCurrentContext, v as onUnmount } from "./_utils-BnAXelPu.js";
 //#region src/attach-component.ts
 /**
 * Attach Veles component tree to a regular HTML node.
@@ -369,6 +369,113 @@ function triggerUpdates({ value, createState, trackers, get }) {
 	});
 }
 //#endregion
+//#region src/create-state/min-heap.ts
+/**
+* A stable min-heap. Values with the same priority are returned in
+* insertion order.
+*/
+var MinHeap = class {
+	constructor(compareValues) {
+		this._entries = [];
+		this._insertionOrder = 0;
+		this._compareValues = compareValues;
+	}
+	get size() {
+		return this._entries.length;
+	}
+	push(value) {
+		const entry = {
+			value,
+			insertionOrder: this._insertionOrder++
+		};
+		let index = this._entries.length;
+		this._entries.push(entry);
+		while (index > 0) {
+			const parentIndex = Math.floor((index - 1) / 2);
+			const parentEntry = this._entries[parentIndex];
+			if (this.compareEntries(parentEntry, entry) <= 0) break;
+			this._entries[index] = parentEntry;
+			index = parentIndex;
+		}
+		this._entries[index] = entry;
+	}
+	pop() {
+		const firstEntry = this._entries[0];
+		const lastEntry = this._entries.pop();
+		if (!firstEntry || !lastEntry) return void 0;
+		if (this._entries.length === 0) return firstEntry.value;
+		let index = 0;
+		while (true) {
+			const leftChildIndex = index * 2 + 1;
+			const rightChildIndex = leftChildIndex + 1;
+			let smallestIndex = index;
+			if (leftChildIndex < this._entries.length && this.compareEntries(this._entries[leftChildIndex], lastEntry) < 0) smallestIndex = leftChildIndex;
+			if (rightChildIndex < this._entries.length && this.compareEntries(this._entries[rightChildIndex], smallestIndex === index ? lastEntry : this._entries[leftChildIndex]) < 0) smallestIndex = rightChildIndex;
+			if (smallestIndex === index) break;
+			this._entries[index] = this._entries[smallestIndex];
+			index = smallestIndex;
+		}
+		this._entries[index] = lastEntry;
+		return firstEntry.value;
+	}
+	compareEntries(entry1, entry2) {
+		const valueComparison = this._compareValues(entry1.value, entry2.value);
+		return valueComparison === 0 ? entry1.insertionOrder - entry2.insertionOrder : valueComparison;
+	}
+};
+//#endregion
+//#region src/create-state/state-scheduler.ts
+/**
+* Coordinates notifications produced by one synchronous state transaction.
+*
+* A subscriber can synchronously update another state. That nested update adds
+* its notifications to this same scheduler, allowing an older notification for
+* the same state to be replaced before it is delivered.
+*/
+var StateScheduler = class {
+	constructor() {
+		this._notifications = new MinHeap((notification1, notification2) => notification1.rank - notification2.rank);
+		this._notificationsByKey = /* @__PURE__ */ new Map();
+	}
+	scheduleNotification(notification) {
+		const existingNotification = this._notificationsByKey.get(notification.key);
+		if (existingNotification) {
+			existingNotification.value = notification.value;
+			return;
+		}
+		this._notificationsByKey.set(notification.key, notification);
+		this._notifications.push(notification);
+	}
+	deliverNotifications() {
+		while (this._notifications.size > 0) {
+			const notification = this._notifications.pop();
+			if (this._notificationsByKey.get(notification.key) !== notification) continue;
+			this._notificationsByKey.delete(notification.key);
+			notification.notify(notification.value, notification.previousValue);
+		}
+	}
+};
+let activeScheduler;
+/**
+* Top-level state updates own the scheduler and synchronously drain it. Updates
+* made by subscribers reuse the active scheduler, so they cannot deliver a
+* nested notification batch ahead of notifications already waiting to run.
+*/
+function runWithStateScheduler(runUpdate) {
+	if (activeScheduler) {
+		runUpdate(activeScheduler);
+		return;
+	}
+	const scheduler = new StateScheduler();
+	activeScheduler = scheduler;
+	try {
+		runUpdate(scheduler);
+		scheduler.deliverNotifications();
+	} finally {
+		activeScheduler = void 0;
+	}
+}
+//#endregion
 //#region src/create-state/state-core.ts
 const emptyValue = Symbol("veles-state-core-empty");
 const defaultEquality = (value1, value2) => value1 === value2;
@@ -379,8 +486,10 @@ var StateCore = class StateCore {
 		this._dirty = false;
 		this._children = /* @__PURE__ */ new Set();
 		this._value = initialValue;
-		this._parents = new Set(options.parents);
+		const parents = options.parents || [];
+		this._parents = new Set(parents);
 		this._compute = options.compute;
+		this._rank = parents.reduce((rank, parent) => Math.max(rank, parent._rank + 1), 0);
 		this._dirty = Boolean(options.dirty);
 		this._equality = options.equality || defaultEquality;
 	}
@@ -399,14 +508,16 @@ var StateCore = class StateCore {
 	}
 	set(newValue) {
 		if (this._equality(this._value, newValue)) return;
-		const prevValue = this._value;
-		this._prevValue = prevValue;
-		this._value = newValue;
-		this.notifySubscribers(newValue, prevValue);
-		this._children.forEach((child) => {
-			child._dirty = true;
+		runWithStateScheduler((scheduler) => {
+			const prevValue = this._value;
+			this._prevValue = prevValue;
+			this._value = newValue;
+			this.scheduleNotification(scheduler, newValue, prevValue);
+			this._children.forEach((child) => {
+				child._dirty = true;
+			});
+			this.flush(scheduler);
 		});
-		this.flush();
 	}
 	update(fn) {
 		const newValue = fn(this._value);
@@ -493,37 +604,62 @@ var StateCore = class StateCore {
 		this._dirty = false;
 		return { changed };
 	}
-	flush() {
-		const queue = Array.from(this._children);
-		const queued = new Set(queue);
-		while (queue.length > 0) {
-			const child = queue.shift();
+	flush(scheduler) {
+		/**
+		* We utilize a min-heap to ensure that we don't trigger notifications
+		* before all the previous necessary work is done. Otherwise it can
+		* happen too early, and we'd need to recursively check that every parent
+		* is not dirty and schedule it again.
+		*
+		* Here we achieve this by assinging a rank to each core state, which is
+		* determined by the highest rank of any of the parent + 1.
+		*
+		* After that, we process them at the same rank, ensuring that "short" branches
+		* are not executed before all their parents are done with their recomputation.
+		*/
+		const queue = new MinHeap((node1, node2) => node1._rank - node2._rank);
+		const queued = /* @__PURE__ */ new Set();
+		const enqueue = (node) => {
+			if (queued.has(node)) return;
+			queue.push(node);
+			queued.add(node);
+		};
+		this._children.forEach(enqueue);
+		while (queue.size > 0) {
+			const child = queue.pop();
 			queued.delete(child);
 			if (!child._dirty) continue;
-			if (child.hasDirtyParents()) {
-				queue.push(child);
-				queued.add(child);
+			let shouldRescheduleChild = false;
+			child._parents.forEach((parentNode) => {
+				if (parentNode._dirty) {
+					enqueue(parentNode);
+					shouldRescheduleChild = true;
+				}
+			});
+			if (shouldRescheduleChild) {
+				enqueue(child);
 				continue;
 			}
 			const { changed } = child.recompute();
 			const value = child._value;
 			if (!changed) continue;
-			child.notifySubscribers(value, child._prevValue);
+			child.scheduleNotification(scheduler, value, child._prevValue);
 			child._children.forEach((grandchild) => {
 				grandchild._dirty = true;
-				if (!queued.has(grandchild)) {
-					queue.push(grandchild);
-					queued.add(grandchild);
-				}
+				enqueue(grandchild);
 			});
 		}
 	}
-	hasDirtyParents() {
-		let hasDirtyParent = false;
-		this._parents.forEach((parent) => {
-			if (parent._dirty) hasDirtyParent = true;
+	scheduleNotification(scheduler, value, previousValue) {
+		scheduler.scheduleNotification({
+			key: this,
+			rank: this._rank,
+			value,
+			previousValue,
+			notify: (notificationValue, notificationPreviousValue) => {
+				this.notifySubscribers(notificationValue, notificationPreviousValue);
+			}
 		});
-		return hasDirtyParent;
 	}
 	notifySubscribers(value, prevValue) {
 		if (value === emptyValue) return;

package/dist/jsx-runtime.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require__utils = require("./_utils-DnT1tr2L.cjs");
+const require__utils = require("./_utils-DbrPydEE.cjs");
 exports.Fragment = require__utils.Fragment;
 exports.jsx = require__utils.createElement;
 exports.jsxDEV = require__utils.createElement;

package/dist/jsx-runtime.js

@@ -1,2 +1,2 @@
-import { f as Fragment, p as createElement } from "./_utils-DxfFNKLL.js";
+import { f as Fragment, p as createElement } from "./_utils-BnAXelPu.js";
 export { Fragment, createElement as jsx, createElement as jsxDEV, createElement as jsxs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veles",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "UI library with main focus on performance",
   "keywords": [
     "JavaScript",