@pyreon/runtime-dom 0.13.1 → 0.15.0

package/lib/index.js

@@ -1,5 +1,5 @@
 import { batch, effect, effectScope, renderEffect, runUntracked, setCurrentScope, signal } from "@pyreon/reactivity";
-import { EMPTY_PROPS, ForSymbol, Fragment, PortalSymbol, captureContextStack, createRef, cx, dispatchToErrorBoundary, h, makeReactiveProps, normalizeStyleValue, onMount, onUnmount, propagateError, reportError, restoreContextStack, runWithHooks, toKebabCase } from "@pyreon/core";
+import { EMPTY_PROPS, ForSymbol, Fragment, PortalSymbol, captureContextStack, createRef, cx, dispatchToErrorBoundary, h, makeReactiveProps, nativeCompat, normalizeStyleValue, onMount, onUnmount, propagateError, reportError, restoreContextStack, runWithHooks, toKebabCase } from "@pyreon/core";
 
 //#region src/delegate.ts
 /**
@@ -66,6 +66,10 @@ function setupDelegation(container) {
 			while (el && el !== container) {
 				const handler = el[prop];
 				if (typeof handler === "function") {
+					Object.defineProperty(e, "currentTarget", {
+						value: el,
+						configurable: true
+					});
 					batch(() => handler(e));
 					if (e.cancelBubble) break;
 				}
@@ -77,13 +81,29 @@ function setupDelegation(container) {
 
 //#endregion
 //#region src/hydration-debug.ts
-let _enabled = import.meta.env?.DEV === true;
+let _enabled = process.env.NODE_ENV !== "production";
 function enableHydrationWarnings() {
 	_enabled = true;
 }
 function disableHydrationWarnings() {
 	_enabled = false;
 }
+let _handlers = [];
+/**
+* Register a hydration mismatch handler. Called on every mismatch in BOTH
+* development and production, independent of the dev-mode warn toggle.
+*
+* Mirrors `@pyreon/core`'s `registerErrorHandler` pattern — multiple
+* handlers can be registered; each is called in registration order;
+* handler errors are swallowed so they don't propagate into the
+* framework. Returns an unregister function.
+*/
+function onHydrationMismatch(handler) {
+	_handlers.push(handler);
+	return () => {
+		_handlers = _handlers.filter((h) => h !== handler);
+	};
+}
 /**
 * Emit a hydration mismatch warning.
 * @param type  - Kind of mismatch
@@ -91,9 +111,20 @@ function disableHydrationWarnings() {
 * @param actual   - What the DOM had
 * @param path     - Human-readable path in the tree, e.g. "root > div > span"
 */
-function warnHydrationMismatch(_type, _expected, _actual, _path) {
-	if (!_enabled) return;
-	console.warn(`[Pyreon] Hydration mismatch (${_type}): expected ${String(_expected)}, got ${String(_actual)} at ${_path}`);
+function warnHydrationMismatch(type, expected, actual, path) {
+	if (_enabled) console.warn(`[Pyreon] Hydration mismatch (${type}): expected ${String(expected)}, got ${String(actual)} at ${path}`);
+	if (_handlers.length > 0) {
+		const ctx = {
+			type,
+			expected,
+			actual,
+			path,
+			timestamp: Date.now()
+		};
+		for (const h of _handlers) try {
+			h(ctx);
+		} catch {}
+	}
 }
 
 //#endregion
@@ -279,13 +310,18 @@ function installDevTools() {
 	});
 	const win = window;
 	win.$p = {
+		/** List all mounted components */
 		components: () => devtools.getAllComponents(),
+		/** Component tree (roots only) */
 		tree: () => devtools.getComponentTree(),
+		/** Highlight a component by id */
 		highlight: (id) => devtools.highlight(id),
+		/** Toggle component inspector overlay */
 		inspect: () => {
 			if (_overlayActive) disableOverlay();
 			else enableOverlay();
 		},
+		/** Print component count */
 		stats: () => {
 			const all = devtools.getAllComponents();
 			const roots = devtools.getComponentTree();
@@ -295,6 +331,7 @@ function installDevTools() {
 				roots: roots.length
 			};
 		},
+		/** Quick help */
 		help: () => {
 			console.log("[Pyreon] $p commands:\n  $p.components() — list all mounted components\n  $p.tree()       — component tree (roots only)\n  $p.highlight(id)— outline a component\n  $p.inspect()    — toggle component inspector\n  $p.stats()      — print component count\n  $p.help()       — this message");
 		}
@@ -303,7 +340,8 @@ function installDevTools() {
 
 //#endregion
 //#region src/nodes.ts
-const __DEV__$4 = import.meta.env?.DEV === true;
+const __DEV__$5 = process.env.NODE_ENV !== "production";
+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 +405,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 +415,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 +424,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 +562,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 +632,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 +643,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 +771,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 +872,7 @@ function moveEntryBefore(parent, startNode, before) {
 
 //#endregion
 //#region src/props.ts
-const __DEV__$3 = import.meta.env?.DEV === true;
+const __DEV__$4 = process.env.NODE_ENV !== "production";
 let _customSanitizer = null;
 /**
 * Set a custom HTML sanitizer used by `innerHTML` and `sanitizeHtml()`.
@@ -978,7 +1037,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 +1068,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 +1135,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 +1172,12 @@ function setStaticProp(el, key, value) {
 
 //#endregion
 //#region src/mount.ts
-const __DEV__$2 = import.meta.env?.DEV === true;
+const __DEV__$3 = process.env.NODE_ENV !== "production";
+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 +1186,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 +1201,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 +1243,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 +1377,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 +1425,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 +1443,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 +1455,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 +1467,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 +1490,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 +1515,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 +1529,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) {
@@ -1647,10 +1722,10 @@ function hydrateComponent(vnode, domNode, parent, anchor, path = "root") {
 	const mountCleanups = [];
 	let nextDom = domNode;
 	const componentName = vnode.type.name || "Anonymous";
-	const mergedProps = (vnode.children ?? []).length > 0 && vnode.props.children === void 0 ? {
+	const mergedProps = makeReactiveProps((vnode.children ?? []).length > 0 && vnode.props.children === void 0 ? {
 		...vnode.props,
 		children: (vnode.children ?? []).length === 1 ? (vnode.children ?? [])[0] : vnode.children ?? []
-	} : vnode.props;
+	} : vnode.props);
 	let result;
 	try {
 		result = runWithHooks(vnode.type, mergedProps);
@@ -1670,13 +1745,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 +1768,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];
@@ -1769,9 +1844,12 @@ function KeepAlive(props) {
 		style: "display: contents"
 	});
 }
+nativeCompat(KeepAlive);
 
 //#endregion
 //#region src/template.ts
+const __DEV__$2 = process.env.NODE_ENV !== "production";
+const _countSink$1 = globalThis;
 /**
 * Creates a row/item factory backed by HTML template cloning.
 *
@@ -1830,7 +1908,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 +1917,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;
 	});
 }
 /**
@@ -1865,6 +1945,7 @@ function _bindDirect(source, updater) {
 	const fn = source;
 	return renderEffect(() => updater(fn()));
 }
+const TPL_CACHE_MAX = 1024;
 const _tplCache = /* @__PURE__ */ new Map();
 /**
 * Compiler-emitted template instantiation.
@@ -1890,10 +1971,18 @@ 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");
 		tpl.innerHTML = html;
+		if (_tplCache.size >= TPL_CACHE_MAX) {
+			const oldest = _tplCache.keys().next().value;
+			if (oldest !== void 0) _tplCache.delete(oldest);
+		}
+		_tplCache.set(html, tpl);
+	} else {
+		_tplCache.delete(html);
 		_tplCache.set(html, tpl);
 	}
 	const el = tpl.content.firstElementChild?.cloneNode(true);
@@ -1928,7 +2017,7 @@ function _mountSlot(children, parent, placeholder) {
 
 //#endregion
 //#region src/transition.ts
-const __DEV__$1 = import.meta.env?.DEV === true;
+const __DEV__$1 = process.env.NODE_ENV !== "production";
 /**
 * Transition — adds CSS enter/leave animation classes to a single child element,
 * controlled by the reactive `show` prop.
@@ -2087,6 +2176,7 @@ function Transition(props) {
 		};
 	});
 }
+nativeCompat(Transition);
 
 //#endregion
 //#region src/transition-group.ts
@@ -2340,10 +2430,12 @@ function TransitionGroup(props) {
 	});
 	return h(tag, { ref: containerRef });
 }
+nativeCompat(TransitionGroup);
 
 //#endregion
 //#region src/index.ts
-const __DEV__ = import.meta.env?.DEV === true;
+const __DEV__ = process.env.NODE_ENV !== "production";
+const _countSink = globalThis;
 /**
 * Mount a VNode tree into a container element.
 * Clears the container first, then mounts the given child.
@@ -2354,14 +2446,21 @@ 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;
 
 //#endregion
-export { DELEGATED_EVENTS, KeepAlive, Transition, TransitionGroup, applyProps as _applyProps, applyProps, _bindDirect, _bindText, _mountSlot, _tpl, applyProp, createTemplate, delegatedPropName, disableHydrationWarnings, enableHydrationWarnings, hydrateRoot, mount, mountChild, render, sanitizeHtml, setSanitizer, setupDelegation };
+export { DELEGATED_EVENTS, KeepAlive, Transition, TransitionGroup, applyProps as _applyProps, applyProps, _bindDirect, _bindText, _mountSlot, _tpl, applyProp, createTemplate, delegatedPropName, disableHydrationWarnings, enableHydrationWarnings, hydrateRoot, mount, mountChild, onHydrationMismatch, render, sanitizeHtml, setSanitizer, setupDelegation };
 //# sourceMappingURL=index.js.map