@pyreon/runtime-dom 0.13.1 → 0.14.0

package/lib/index.js

@@ -303,7 +303,8 @@ function installDevTools() {
 
 //#endregion
 //#region src/nodes.ts
-const __DEV__$4 = import.meta.env?.DEV === true;
+const __DEV__$5 = import.meta.env?.DEV === true;
+const _countSink$3 = globalThis;
 /**
 * Move all nodes strictly between `start` and `end` into a throwaway
 * DocumentFragment, detaching them from the live DOM in O(n) top-level moves.
@@ -367,6 +368,7 @@ function growLisArrays(lis, n) {
 function computeKeyedLis(lis, n, newKeyOrder, curPos) {
 	const { tails, tailIdx, pred } = lis;
 	let lisLen = 0;
+	let ops = 0;
 	for (let i = 0; i < n; i++) {
 		const key = newKeyOrder[i];
 		if (key === void 0) continue;
@@ -376,6 +378,7 @@ function computeKeyedLis(lis, n, newKeyOrder, curPos) {
 		let hi = lisLen;
 		while (lo < hi) {
 			const mid = lo + hi >> 1;
+			ops++;
 			if (tails[mid] < v) lo = mid + 1;
 			else hi = mid;
 		}
@@ -384,6 +387,7 @@ function computeKeyedLis(lis, n, newKeyOrder, curPos) {
 		if (lo > 0) pred[i] = tailIdx[lo - 1];
 		if (lo === lisLen) lisLen++;
 	}
+	if (__DEV__$5 && ops > 0) _countSink$3.__pyreon_count__?.("runtime.mountFor.lisOps", ops);
 	return lisLen;
 }
 function markStayingEntries(lis, lisLen) {
@@ -521,21 +525,36 @@ function trySmallKReorder(n, newKeys, currentKeys, cache, liveParent, tailMarker
 function computeForLis(lis, n, newKeys, cache) {
 	const { tails, tailIdx, pred } = lis;
 	let lisLen = 0;
+	let ops = 0;
+	let lastV = -1;
 	for (let i = 0; i < n; i++) {
 		const key = newKeys[i];
 		const v = cache.get(key)?.pos ?? 0;
-		let lo = 0;
-		let hi = lisLen;
-		while (lo < hi) {
-			const mid = lo + hi >> 1;
-			if (tails[mid] < v) lo = mid + 1;
-			else hi = mid;
+		if (v > lastV) {
+			tails[lisLen] = v;
+			tailIdx[lisLen] = i;
+			if (lisLen > 0) pred[i] = tailIdx[lisLen - 1];
+			lisLen++;
+			lastV = v;
+			continue;
+		}
+		let lo;
+		if (v < lisLen && tails[v] === v) lo = v;
+		else {
+			lo = 0;
+			let hi = lisLen;
+			while (lo < hi) {
+				const mid = lo + hi >> 1;
+				ops++;
+				if (tails[mid] < v) lo = mid + 1;
+				else hi = mid;
+			}
 		}
 		tails[lo] = v;
 		tailIdx[lo] = i;
 		if (lo > 0) pred[i] = tailIdx[lo - 1];
-		if (lo === lisLen) lisLen++;
 	}
+	if (__DEV__$5 && ops > 0) _countSink$3.__pyreon_count__?.("runtime.mountFor.lisOps", ops);
 	return lisLen;
 }
 function applyForMoves(n, newKeys, stay, cache, liveParent, tailMarker) {
@@ -576,6 +595,7 @@ function mountFor(source, getKey, renderItem, parent, anchor, mountChild) {
 	parent.insertBefore(tailMarker, anchor);
 	let cache = /* @__PURE__ */ new Map();
 	let currentKeys = [];
+	const _reusableKeySet = /* @__PURE__ */ new Set();
 	let cleanupCount = 0;
 	let anchorsRegistered = false;
 	let lis = {
@@ -586,9 +606,9 @@ function mountFor(source, getKey, renderItem, parent, anchor, mountChild) {
 	};
 	const warnForKey = (seen, key) => {
 		if (!seen) return;
-		if (__DEV__$4 && key == null) console.warn("[Pyreon] <For> `by` function returned null/undefined. Keys must be strings or numbers. Check your `by` prop.");
+		if (__DEV__$5 && key == null) console.warn("[Pyreon] <For> `by` function returned null/undefined. Keys must be strings or numbers. Check your `by` prop.");
 		if (seen.has(key)) {
-			if (__DEV__$4) console.warn(`[Pyreon] Duplicate key "${String(key)}" in <For> list. Keys must be unique.`);
+			if (__DEV__$5) console.warn(`[Pyreon] Duplicate key "${String(key)}" in <For> list. Keys must be unique.`);
 			return true;
 		}
 		seen.add(key);
@@ -714,7 +734,9 @@ function mountFor(source, getKey, renderItem, parent, anchor, mountChild) {
 		return false;
 	};
 	const handleIncrementalUpdate = (items, n, newKeys, liveParent) => {
-		removeStaleForEntries(new Set(newKeys));
+		_reusableKeySet.clear();
+		for (let i = 0; i < newKeys.length; i++) _reusableKeySet.add(newKeys[i]);
+		removeStaleForEntries(_reusableKeySet);
 		mountNewForEntries(items, n, newKeys, liveParent);
 		if (!anchorsRegistered) {
 			for (const entry of cache.values()) _forAnchors.add(entry.anchor);
@@ -813,7 +835,7 @@ function moveEntryBefore(parent, startNode, before) {
 
 //#endregion
 //#region src/props.ts
-const __DEV__$3 = import.meta.env?.DEV === true;
+const __DEV__$4 = import.meta.env?.DEV === true;
 let _customSanitizer = null;
 /**
 * Set a custom HTML sanitizer used by `innerHTML` and `sanitizeHtml()`.
@@ -978,7 +1000,7 @@ function applyProps(el, props) {
 */
 function applyEventProp(el, key, value) {
 	if (typeof value !== "function") {
-		if (__DEV__$3 && value != null) console.warn(`[Pyreon] Event handler "${key}" received a non-function value (${typeof value}). Expected a function. Did you mean ${key}={() => ...}?`);
+		if (__DEV__$4 && value != null) console.warn(`[Pyreon] Event handler "${key}" received a non-function value (${typeof value}). Expected a function. Did you mean ${key}={() => ...}?`);
 		return null;
 	}
 	const eventName = (key[2]?.toLowerCase() + key.slice(3)).toLowerCase();
@@ -1009,7 +1031,7 @@ function applyEventProp(el, key, value) {
 * dispatch) eliminates the entire bug class.
 */
 function applyStaticProp(el, key, value) {
-	if (__DEV__$3 && typeof value === "function") console.warn(`[Pyreon] applyStaticProp received a function for "${key}". This likely means a new special-cased prop sink in applyProp() bypassed the reactive-wrap path. The closure would be stringified and set as a literal value. Verify the dispatch in applyProp().`);
+	if (__DEV__$4 && typeof value === "function") console.warn(`[Pyreon] applyStaticProp received a function for "${key}". This likely means a new special-cased prop sink in applyProp() bypassed the reactive-wrap path. The closure would be stringified and set as a literal value. Verify the dispatch in applyProp().`);
 	if (key === "innerHTML") {
 		const html = String(value ?? "");
 		if (typeof el.setHTML === "function") el.setHTML(html);
@@ -1076,7 +1098,7 @@ function applyClassProp(el, value) {
 }
 function setStaticProp(el, key, value) {
 	if (URL_ATTRS.has(key) && typeof value === "string" && UNSAFE_URL_RE.test(value)) {
-		if (__DEV__$3) console.warn(`[Pyreon] Blocked unsafe URL in "${key}" attribute: ${value}`);
+		if (__DEV__$4) console.warn(`[Pyreon] Blocked unsafe URL in "${key}" attribute: ${value}`);
 		return;
 	}
 	if (key === "class" || key === "className") {
@@ -1113,10 +1135,12 @@ function setStaticProp(el, key, value) {
 
 //#endregion
 //#region src/mount.ts
-const __DEV__$2 = import.meta.env?.DEV === true;
+const __DEV__$3 = import.meta.env?.DEV === true;
+const _countSink$2 = globalThis;
 const noop$1 = () => {};
 let _elementDepth = 0;
-const _mountingStack = [];
+let _mountingStack;
+if (__DEV__$3) _mountingStack = [];
 /**
 * Mount a single child into `parent`, inserting before `anchor` (null = append).
 * Returns a cleanup that removes the node(s) and disposes all reactive effects.
@@ -1125,6 +1149,7 @@ const _mountingStack = [];
 * function call overhead in tight render loops (1000+ calls per list render).
 */
 function mountChild(child, parent, anchor = null) {
+	if (__DEV__$3) _countSink$2.__pyreon_count__?.("runtime.mountChild");
 	if (typeof child === "function") {
 		const sample = runUntracked(() => child());
 		if (isKeyedArray(sample)) {
@@ -1139,7 +1164,8 @@ function mountChild(child, parent, anchor = null) {
 			parent.insertBefore(text, anchor);
 			const dispose = renderEffect(() => {
 				const v = child();
-				text.data = v == null || v === false ? "" : String(v);
+				const next = v == null || v === false ? "" : String(v);
+				if (next !== text.data) text.data = next;
 			});
 			if (_elementDepth > 0) return dispose;
 			return () => {
@@ -1180,24 +1206,26 @@ function mountChild(child, parent, anchor = null) {
 	const vnode = child;
 	if (vnode.type === Fragment) return mountChildren(vnode.children ?? [], parent, anchor);
 	if (vnode.type === ForSymbol) {
-		const { each, by, children } = vnode.props;
+		const props = vnode.props;
+		const initialEach = props.each;
+		const source = typeof initialEach === "function" ? initialEach : (() => props.each);
 		const prevDepth = _elementDepth;
 		_elementDepth = 0;
-		const cleanup = mountFor(each, by, children, parent, anchor, mountChild);
+		const cleanup = mountFor(source, props.by, props.children, parent, anchor, mountChild);
 		_elementDepth = prevDepth;
 		return cleanup;
 	}
 	if (vnode.type === PortalSymbol) {
 		const { target, children } = vnode.props;
-		if (__DEV__$2 && !target) {
+		if (__DEV__$3 && !target) {
 			console.warn("[Pyreon] <Portal> received a falsy `target`. Provide a valid DOM element.");
 			return noop$1;
 		}
-		if (__DEV__$2 && !(target instanceof Node)) console.warn(`[Pyreon] <Portal> target must be a DOM node. Received ${typeof target}. Use document.getElementById() or a ref to get the target element.`);
+		if (__DEV__$3 && !(target instanceof Node)) console.warn(`[Pyreon] <Portal> target must be a DOM node. Received ${typeof target}. Use document.getElementById() or a ref to get the target element.`);
 		return mountChild(children, target, null);
 	}
 	if (typeof vnode.type === "function") return mountComponent(vnode, parent, anchor);
-	if (__DEV__$2 && typeof vnode.type !== "string") {
+	if (__DEV__$3 && typeof vnode.type !== "string") {
 		console.warn(`[Pyreon] Invalid VNode type: expected a string tag or component function, received ${typeof vnode.type} (${String(vnode.type)}). This usually means you passed an object or class instead of a component function.`);
 		return noop$1;
 	}
@@ -1312,7 +1340,7 @@ function mountElement(vnode, parent, anchor) {
 	const isMathml = tag === "math";
 	if (isSvg) _svgDepth++;
 	if (isMathml) _mathmlDepth++;
-	if (__DEV__$2 && (vnode.children?.length ?? 0) > 0 && VOID_ELEMENTS.has(vnode.type)) console.warn(`[Pyreon] <${vnode.type}> is a void element and cannot have children. Children passed to void elements will be ignored by the browser.`);
+	if (__DEV__$3 && (vnode.children?.length ?? 0) > 0 && VOID_ELEMENTS.has(vnode.type)) console.warn(`[Pyreon] <${vnode.type}> is a void element and cannot have children. Children passed to void elements will be ignored by the browser.`);
 	const props = vnode.props;
 	const propCleanup = props !== EMPTY_PROPS ? applyProps(el, props) : null;
 	_elementDepth++;
@@ -1360,9 +1388,13 @@ function mountComponent(vnode, parent, anchor) {
 	let hooks;
 	let output;
 	const componentName = vnode.type.name || "Anonymous";
-	const compId = `${componentName}-${Math.random().toString(36).slice(2, 9)}`;
-	const parentId = _mountingStack[_mountingStack.length - 1] ?? null;
-	_mountingStack.push(compId);
+	let compId;
+	let devParentId;
+	if (__DEV__$3) {
+		compId = `${componentName}-${Math.random().toString(36).slice(2, 9)}`;
+		devParentId = _mountingStack[_mountingStack.length - 1] ?? null;
+		_mountingStack.push(compId);
+	}
 	const children = vnode.children ?? [];
 	const rawProps = children.length > 0 && vnode.props.children === void 0 ? {
 		...vnode.props,
@@ -1374,7 +1406,7 @@ function mountComponent(vnode, parent, anchor) {
 		hooks = result.hooks;
 		output = result.vnode;
 	} catch (err) {
-		_mountingStack.pop();
+		if (__DEV__$3) _mountingStack.pop();
 		setCurrentScope(null);
 		scope.stop();
 		reportError({
@@ -1386,7 +1418,7 @@ function mountComponent(vnode, parent, anchor) {
 		});
 		const handled = dispatchToErrorBoundary(err);
 		if (!handled) console.error(`[Pyreon] <${componentName}> threw during setup:`, err);
-		if (__DEV__$2 && !handled) {
+		if (__DEV__$3 && !handled) {
 			const overlay = document.createElement("pre");
 			overlay.style.cssText = "color:#e53e3e;background:#fff5f5;padding:12px;border:2px solid #e53e3e;border-radius:6px;font-size:12px;margin:4px;font-family:monospace;white-space:pre-wrap;word-break:break-word";
 			const e = err;
@@ -1398,16 +1430,16 @@ function mountComponent(vnode, parent, anchor) {
 	} finally {
 		setCurrentScope(null);
 	}
-	if (__DEV__$2 && output != null && typeof output === "object") {
+	if (__DEV__$3 && output != null && typeof output === "object") {
 		if (output instanceof Promise) console.warn(`[Pyreon] Component <${componentName}> returned a Promise. Components must be synchronous — use lazy() + Suspense for async loading, or fetch data in onMount and store it in a signal.`);
 		else if (!("type" in output) && !Array.isArray(output) && !output.__isNative) console.warn(`[Pyreon] Component <${componentName}> returned an invalid value. Components must return a VNode, string, null, function, or array.`);
 	}
-	for (const fn of hooks.update) scope.addUpdateHook(fn);
+	if (hooks.update) for (const fn of hooks.update) scope.addUpdateHook(fn);
 	let subtreeCleanup = noop$1;
 	try {
 		subtreeCleanup = output != null ? mountChild(output, parent, anchor) : noop$1;
 	} catch (err) {
-		_mountingStack.pop();
+		if (__DEV__$3) _mountingStack.pop();
 		scope.stop();
 		if (!(propagateError(err, hooks) || dispatchToErrorBoundary(err))) {
 			reportError({
@@ -1421,15 +1453,21 @@ function mountComponent(vnode, parent, anchor) {
 		}
 		return noop$1;
 	}
-	_mountingStack.pop();
-	registerComponent(compId, componentName, parent instanceof Element ? parent.firstElementChild : null, parentId);
-	const mountCleanups = [];
-	for (const fn of hooks.mount) try {
+	if (__DEV__$3) {
+		_mountingStack.pop();
+		const firstEl = parent instanceof Element ? parent.firstElementChild : null;
+		registerComponent(compId, componentName, firstEl, devParentId);
+	}
+	let mountCleanups = null;
+	if (hooks.mount) for (const fn of hooks.mount) try {
 		let cleanup;
 		scope.runInScope(() => {
 			cleanup = fn();
 		});
-		if (cleanup) mountCleanups.push(cleanup);
+		if (cleanup) {
+			if (mountCleanups === null) mountCleanups = [];
+			mountCleanups.push(cleanup);
+		}
 	} catch (err) {
 		console.error(`[Pyreon] Error in onMount hook of <${componentName}>:`, err);
 		reportError({
@@ -1440,10 +1478,10 @@ function mountComponent(vnode, parent, anchor) {
 		});
 	}
 	return () => {
-		unregisterComponent(compId);
+		if (__DEV__$3) unregisterComponent(compId);
 		scope.stop();
 		subtreeCleanup();
-		for (const fn of hooks.unmount) try {
+		if (hooks.unmount) for (const fn of hooks.unmount) try {
 			fn();
 		} catch (err) {
 			console.error(`[Pyreon] Error in onUnmount hook of <${componentName}>:`, err);
@@ -1454,7 +1492,7 @@ function mountComponent(vnode, parent, anchor) {
 				timestamp: Date.now()
 			});
 		}
-		for (const fn of mountCleanups) fn();
+		if (mountCleanups) for (const fn of mountCleanups) fn();
 	};
 }
 function mountChildren(children, parent, anchor) {
@@ -1670,13 +1708,13 @@ function hydrateComponent(vnode, domNode, parent, anchor, path = "root") {
 	}
 	setCurrentScope(null);
 	const { vnode: output, hooks } = result;
-	for (const fn of hooks.update) scope.addUpdateHook(fn);
+	if (hooks.update) for (const fn of hooks.update) scope.addUpdateHook(fn);
 	if (output != null) {
 		const [childCleanup, next] = hydrateChild(output, domNode, parent, anchor, path);
 		subtreeCleanup = childCleanup;
 		nextDom = next;
 	}
-	for (const fn of hooks.mount) try {
+	if (hooks.mount) for (const fn of hooks.mount) try {
 		let c;
 		scope.runInScope(() => {
 			c = fn();
@@ -1693,7 +1731,7 @@ function hydrateComponent(vnode, domNode, parent, anchor, path = "root") {
 	const cleanup = () => {
 		scope.stop();
 		subtreeCleanup();
-		for (const fn of hooks.unmount) fn();
+		if (hooks.unmount) for (const fn of hooks.unmount) fn();
 		for (const fn of mountCleanups) fn();
 	};
 	return [cleanup, nextDom];
@@ -1772,6 +1810,8 @@ function KeepAlive(props) {
 
 //#endregion
 //#region src/template.ts
+const __DEV__$2 = import.meta.env?.DEV === true;
+const _countSink$1 = globalThis;
 /**
 * Creates a row/item factory backed by HTML template cloning.
 *
@@ -1830,7 +1870,8 @@ function _bindText(source, node) {
 	if (source.direct) {
 		const textUpdate = () => {
 			const v = source._v;
-			node.data = v == null || v === false ? "" : String(v);
+			const next = v == null || v === false ? "" : String(v);
+			if (next !== node.data) node.data = next;
 		};
 		textUpdate();
 		return source.direct(textUpdate);
@@ -1838,7 +1879,8 @@ function _bindText(source, node) {
 	const fn = source;
 	return renderEffect(() => {
 		const v = fn();
-		node.data = v == null || v === false ? "" : String(v);
+		const next = v == null || v === false ? "" : String(v);
+		if (next !== node.data) node.data = next;
 	});
 }
 /**
@@ -1890,6 +1932,7 @@ const _tplCache = /* @__PURE__ */ new Map();
 * })
 */
 function _tpl(html, bind) {
+	if (__DEV__$2) _countSink$1.__pyreon_count__?.("runtime.tpl");
 	let tpl = _tplCache.get(html);
 	if (!tpl) {
 		tpl = document.createElement("template");
@@ -2344,6 +2387,7 @@ function TransitionGroup(props) {
 //#endregion
 //#region src/index.ts
 const __DEV__ = import.meta.env?.DEV === true;
+const _countSink = globalThis;
 /**
 * Mount a VNode tree into a container element.
 * Clears the container first, then mounts the given child.
@@ -2354,10 +2398,17 @@ const __DEV__ = import.meta.env?.DEV === true;
 */
 function mount(root, container) {
 	if (__DEV__ && container == null) throw new Error("[pyreon] mount() called with a null/undefined container. Make sure the element exists in the DOM, e.g. document.getElementById(\"app\")");
-	installDevTools();
+	if (__DEV__) {
+		_countSink.__pyreon_count__?.("runtime.mount");
+		installDevTools();
+	}
 	setupDelegation(container);
 	container.innerHTML = "";
-	return mountChild(root, container, null);
+	const unmount = mountChild(root, container, null);
+	return () => {
+		if (__DEV__) _countSink.__pyreon_count__?.("runtime.unmount");
+		unmount();
+	};
 }
 /** Alias for `mount` */
 const render = mount;