@pyreon/runtime-dom 0.5.4 → 0.5.6

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"bebce038-1","name":"delegate.ts"},{"uid":"bebce038-3","name":"hydration-debug.ts"},{"uid":"bebce038-5","name":"devtools.ts"},{"uid":"bebce038-7","name":"nodes.ts"},{"uid":"bebce038-9","name":"props.ts"},{"uid":"bebce038-11","name":"mount.ts"},{"uid":"bebce038-13","name":"hydrate.ts"},{"uid":"bebce038-15","name":"keep-alive.ts"},{"uid":"bebce038-17","name":"template.ts"},{"uid":"bebce038-19","name":"transition.ts"},{"uid":"bebce038-21","name":"transition-group.ts"},{"uid":"bebce038-23","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"bebce038-1":{"renderedLength":1968,"gzipLength":967,"brotliLength":0,"metaUid":"bebce038-0"},"bebce038-3":{"renderedLength":704,"gzipLength":397,"brotliLength":0,"metaUid":"bebce038-2"},"bebce038-5":{"renderedLength":6803,"gzipLength":2095,"brotliLength":0,"metaUid":"bebce038-4"},"bebce038-7":{"renderedLength":16149,"gzipLength":4315,"brotliLength":0,"metaUid":"bebce038-6"},"bebce038-9":{"renderedLength":5779,"gzipLength":2234,"brotliLength":0,"metaUid":"bebce038-8"},"bebce038-11":{"renderedLength":7951,"gzipLength":2338,"brotliLength":0,"metaUid":"bebce038-10"},"bebce038-13":{"renderedLength":7652,"gzipLength":2325,"brotliLength":0,"metaUid":"bebce038-12"},"bebce038-15":{"renderedLength":1447,"gzipLength":692,"brotliLength":0,"metaUid":"bebce038-14"},"bebce038-17":{"renderedLength":4250,"gzipLength":1760,"brotliLength":0,"metaUid":"bebce038-16"},"bebce038-19":{"renderedLength":4007,"gzipLength":1316,"brotliLength":0,"metaUid":"bebce038-18"},"bebce038-21":{"renderedLength":6362,"gzipLength":1937,"brotliLength":0,"metaUid":"bebce038-20"},"bebce038-23":{"renderedLength":811,"gzipLength":491,"brotliLength":0,"metaUid":"bebce038-22"}},"nodeMetas":{"bebce038-0":{"id":"/src/delegate.ts","moduleParts":{"index.js":"bebce038-1"},"imported":[{"uid":"bebce038-24"}],"importedBy":[{"uid":"bebce038-22"},{"uid":"bebce038-12"},{"uid":"bebce038-8"}]},"bebce038-2":{"id":"/src/hydration-debug.ts","moduleParts":{"index.js":"bebce038-3"},"imported":[],"importedBy":[{"uid":"bebce038-22"},{"uid":"bebce038-12"}]},"bebce038-4":{"id":"/src/devtools.ts","moduleParts":{"index.js":"bebce038-5"},"imported":[],"importedBy":[{"uid":"bebce038-22"},{"uid":"bebce038-10"}]},"bebce038-6":{"id":"/src/nodes.ts","moduleParts":{"index.js":"bebce038-7"},"imported":[{"uid":"bebce038-24"}],"importedBy":[{"uid":"bebce038-12"},{"uid":"bebce038-10"}]},"bebce038-8":{"id":"/src/props.ts","moduleParts":{"index.js":"bebce038-9"},"imported":[{"uid":"bebce038-24"},{"uid":"bebce038-0"}],"importedBy":[{"uid":"bebce038-22"},{"uid":"bebce038-12"},{"uid":"bebce038-10"}]},"bebce038-10":{"id":"/src/mount.ts","moduleParts":{"index.js":"bebce038-11"},"imported":[{"uid":"bebce038-25"},{"uid":"bebce038-24"},{"uid":"bebce038-4"},{"uid":"bebce038-6"},{"uid":"bebce038-8"}],"importedBy":[{"uid":"bebce038-22"},{"uid":"bebce038-12"},{"uid":"bebce038-14"},{"uid":"bebce038-20"}]},"bebce038-12":{"id":"/src/hydrate.ts","moduleParts":{"index.js":"bebce038-13"},"imported":[{"uid":"bebce038-25"},{"uid":"bebce038-24"},{"uid":"bebce038-0"},{"uid":"bebce038-2"},{"uid":"bebce038-10"},{"uid":"bebce038-6"},{"uid":"bebce038-8"}],"importedBy":[{"uid":"bebce038-22"}]},"bebce038-14":{"id":"/src/keep-alive.ts","moduleParts":{"index.js":"bebce038-15"},"imported":[{"uid":"bebce038-25"},{"uid":"bebce038-24"},{"uid":"bebce038-10"}],"importedBy":[{"uid":"bebce038-22"}]},"bebce038-16":{"id":"/src/template.ts","moduleParts":{"index.js":"bebce038-17"},"imported":[],"importedBy":[{"uid":"bebce038-22"}]},"bebce038-18":{"id":"/src/transition.ts","moduleParts":{"index.js":"bebce038-19"},"imported":[{"uid":"bebce038-25"},{"uid":"bebce038-24"}],"importedBy":[{"uid":"bebce038-22"}]},"bebce038-20":{"id":"/src/transition-group.ts","moduleParts":{"index.js":"bebce038-21"},"imported":[{"uid":"bebce038-25"},{"uid":"bebce038-24"},{"uid":"bebce038-10"}],"importedBy":[{"uid":"bebce038-22"}]},"bebce038-22":{"id":"/src/index.ts","moduleParts":{"index.js":"bebce038-23"},"imported":[{"uid":"bebce038-0"},{"uid":"bebce038-12"},{"uid":"bebce038-2"},{"uid":"bebce038-14"},{"uid":"bebce038-10"},{"uid":"bebce038-8"},{"uid":"bebce038-16"},{"uid":"bebce038-18"},{"uid":"bebce038-20"},{"uid":"bebce038-4"}],"importedBy":[],"isEntry":true},"bebce038-24":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"bebce038-0"},{"uid":"bebce038-12"},{"uid":"bebce038-14"},{"uid":"bebce038-10"},{"uid":"bebce038-8"},{"uid":"bebce038-18"},{"uid":"bebce038-20"},{"uid":"bebce038-6"}]},"bebce038-25":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"bebce038-12"},{"uid":"bebce038-14"},{"uid":"bebce038-10"},{"uid":"bebce038-18"},{"uid":"bebce038-20"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"b1c3db5e-1","name":"delegate.ts"},{"uid":"b1c3db5e-3","name":"hydration-debug.ts"},{"uid":"b1c3db5e-5","name":"devtools.ts"},{"uid":"b1c3db5e-7","name":"nodes.ts"},{"uid":"b1c3db5e-9","name":"props.ts"},{"uid":"b1c3db5e-11","name":"mount.ts"},{"uid":"b1c3db5e-13","name":"hydrate.ts"},{"uid":"b1c3db5e-15","name":"keep-alive.ts"},{"uid":"b1c3db5e-17","name":"template.ts"},{"uid":"b1c3db5e-19","name":"transition.ts"},{"uid":"b1c3db5e-21","name":"transition-group.ts"},{"uid":"b1c3db5e-23","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"b1c3db5e-1":{"renderedLength":1968,"gzipLength":967,"brotliLength":0,"metaUid":"b1c3db5e-0"},"b1c3db5e-3":{"renderedLength":704,"gzipLength":397,"brotliLength":0,"metaUid":"b1c3db5e-2"},"b1c3db5e-5":{"renderedLength":6803,"gzipLength":2095,"brotliLength":0,"metaUid":"b1c3db5e-4"},"b1c3db5e-7":{"renderedLength":16273,"gzipLength":4364,"brotliLength":0,"metaUid":"b1c3db5e-6"},"b1c3db5e-9":{"renderedLength":6361,"gzipLength":2445,"brotliLength":0,"metaUid":"b1c3db5e-8"},"b1c3db5e-11":{"renderedLength":8893,"gzipLength":2712,"brotliLength":0,"metaUid":"b1c3db5e-10"},"b1c3db5e-13":{"renderedLength":7652,"gzipLength":2325,"brotliLength":0,"metaUid":"b1c3db5e-12"},"b1c3db5e-15":{"renderedLength":1447,"gzipLength":692,"brotliLength":0,"metaUid":"b1c3db5e-14"},"b1c3db5e-17":{"renderedLength":4250,"gzipLength":1760,"brotliLength":0,"metaUid":"b1c3db5e-16"},"b1c3db5e-19":{"renderedLength":4007,"gzipLength":1316,"brotliLength":0,"metaUid":"b1c3db5e-18"},"b1c3db5e-21":{"renderedLength":6362,"gzipLength":1937,"brotliLength":0,"metaUid":"b1c3db5e-20"},"b1c3db5e-23":{"renderedLength":811,"gzipLength":491,"brotliLength":0,"metaUid":"b1c3db5e-22"}},"nodeMetas":{"b1c3db5e-0":{"id":"/src/delegate.ts","moduleParts":{"index.js":"b1c3db5e-1"},"imported":[{"uid":"b1c3db5e-24"}],"importedBy":[{"uid":"b1c3db5e-22"},{"uid":"b1c3db5e-12"},{"uid":"b1c3db5e-8"}]},"b1c3db5e-2":{"id":"/src/hydration-debug.ts","moduleParts":{"index.js":"b1c3db5e-3"},"imported":[],"importedBy":[{"uid":"b1c3db5e-22"},{"uid":"b1c3db5e-12"}]},"b1c3db5e-4":{"id":"/src/devtools.ts","moduleParts":{"index.js":"b1c3db5e-5"},"imported":[],"importedBy":[{"uid":"b1c3db5e-22"},{"uid":"b1c3db5e-10"}]},"b1c3db5e-6":{"id":"/src/nodes.ts","moduleParts":{"index.js":"b1c3db5e-7"},"imported":[{"uid":"b1c3db5e-24"}],"importedBy":[{"uid":"b1c3db5e-12"},{"uid":"b1c3db5e-10"}]},"b1c3db5e-8":{"id":"/src/props.ts","moduleParts":{"index.js":"b1c3db5e-9"},"imported":[{"uid":"b1c3db5e-25"},{"uid":"b1c3db5e-24"},{"uid":"b1c3db5e-0"}],"importedBy":[{"uid":"b1c3db5e-22"},{"uid":"b1c3db5e-12"},{"uid":"b1c3db5e-10"}]},"b1c3db5e-10":{"id":"/src/mount.ts","moduleParts":{"index.js":"b1c3db5e-11"},"imported":[{"uid":"b1c3db5e-25"},{"uid":"b1c3db5e-24"},{"uid":"b1c3db5e-4"},{"uid":"b1c3db5e-6"},{"uid":"b1c3db5e-8"}],"importedBy":[{"uid":"b1c3db5e-22"},{"uid":"b1c3db5e-12"},{"uid":"b1c3db5e-14"},{"uid":"b1c3db5e-20"}]},"b1c3db5e-12":{"id":"/src/hydrate.ts","moduleParts":{"index.js":"b1c3db5e-13"},"imported":[{"uid":"b1c3db5e-25"},{"uid":"b1c3db5e-24"},{"uid":"b1c3db5e-0"},{"uid":"b1c3db5e-2"},{"uid":"b1c3db5e-10"},{"uid":"b1c3db5e-6"},{"uid":"b1c3db5e-8"}],"importedBy":[{"uid":"b1c3db5e-22"}]},"b1c3db5e-14":{"id":"/src/keep-alive.ts","moduleParts":{"index.js":"b1c3db5e-15"},"imported":[{"uid":"b1c3db5e-25"},{"uid":"b1c3db5e-24"},{"uid":"b1c3db5e-10"}],"importedBy":[{"uid":"b1c3db5e-22"}]},"b1c3db5e-16":{"id":"/src/template.ts","moduleParts":{"index.js":"b1c3db5e-17"},"imported":[],"importedBy":[{"uid":"b1c3db5e-22"}]},"b1c3db5e-18":{"id":"/src/transition.ts","moduleParts":{"index.js":"b1c3db5e-19"},"imported":[{"uid":"b1c3db5e-25"},{"uid":"b1c3db5e-24"}],"importedBy":[{"uid":"b1c3db5e-22"}]},"b1c3db5e-20":{"id":"/src/transition-group.ts","moduleParts":{"index.js":"b1c3db5e-21"},"imported":[{"uid":"b1c3db5e-25"},{"uid":"b1c3db5e-24"},{"uid":"b1c3db5e-10"}],"importedBy":[{"uid":"b1c3db5e-22"}]},"b1c3db5e-22":{"id":"/src/index.ts","moduleParts":{"index.js":"b1c3db5e-23"},"imported":[{"uid":"b1c3db5e-0"},{"uid":"b1c3db5e-12"},{"uid":"b1c3db5e-2"},{"uid":"b1c3db5e-14"},{"uid":"b1c3db5e-10"},{"uid":"b1c3db5e-8"},{"uid":"b1c3db5e-16"},{"uid":"b1c3db5e-18"},{"uid":"b1c3db5e-20"},{"uid":"b1c3db5e-4"}],"importedBy":[],"isEntry":true},"b1c3db5e-24":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"b1c3db5e-0"},{"uid":"b1c3db5e-12"},{"uid":"b1c3db5e-14"},{"uid":"b1c3db5e-10"},{"uid":"b1c3db5e-8"},{"uid":"b1c3db5e-18"},{"uid":"b1c3db5e-20"},{"uid":"b1c3db5e-6"}]},"b1c3db5e-25":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"b1c3db5e-12"},{"uid":"b1c3db5e-14"},{"uid":"b1c3db5e-10"},{"uid":"b1c3db5e-8"},{"uid":"b1c3db5e-18"},{"uid":"b1c3db5e-20"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

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, createRef, dispatchToErrorBoundary, h, onMount, onUnmount, propagateError, reportError, runWithHooks } from "@pyreon/core";
+import { EMPTY_PROPS, ForSymbol, Fragment, PortalSymbol, createRef, dispatchToErrorBoundary, h, normalizeStyleValue, onMount, onUnmount, propagateError, reportError, runWithHooks, toKebabCase } from "@pyreon/core";
 
 //#region src/delegate.ts
 /**
@@ -584,8 +584,9 @@ function mountFor(source, getKey, renderItem, parent, anchor, mountChild) {
 		pred: new Int32Array(16),
 		stay: new Uint8Array(16)
 	};
-	const warnDuplicateKeys = (seen, key) => {
+	const warnForKey = (seen, key) => {
 		if (!__DEV__$4 || !seen) return;
+		if (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)) console.warn(`[Pyreon] Duplicate key "${String(key)}" in <For> list. Keys must be unique.`);
 		seen.add(key);
 	};
@@ -628,7 +629,7 @@ function mountFor(source, getKey, renderItem, parent, anchor, mountChild) {
 		for (let i = 0; i < n; i++) {
 			const item = items[i];
 			const key = getKey(item);
-			warnDuplicateKeys(_seenKeys, key);
+			warnForKey(_seenKeys, key);
 			keys[i] = key;
 			renderInto(item, key, i, frag, null);
 		}
@@ -641,7 +642,7 @@ function mountFor(source, getKey, renderItem, parent, anchor, mountChild) {
 		const _seenUpdate = __DEV__$4 ? /* @__PURE__ */ new Set() : null;
 		for (let i = 0; i < n; i++) {
 			newKeys[i] = getKey(items[i]);
-			warnDuplicateKeys(_seenUpdate, newKeys[i]);
+			warnForKey(_seenUpdate, newKeys[i]);
 		}
 		return newKeys;
 	};
@@ -947,20 +948,19 @@ const EVENT_RE = /^on[A-Z]/;
 * Uses for-in instead of Object.keys() to avoid allocating a keys array.
 */
 function applyProps(el, props) {
-	let cleanup = null;
+	let first = null;
+	let cleanups = null;
 	for (const key in props) {
 		if (key === "key" || key === "ref") continue;
 		const c = applyProp(el, key, props[key]);
-		if (c) if (!cleanup) cleanup = c;
-		else {
-			const prev = cleanup;
-			cleanup = () => {
-				prev();
-				c();
-			};
-		}
+		if (c) if (!first) first = c;
+		else if (!cleanups) cleanups = [first, c];
+		else cleanups.push(c);
 	}
-	return cleanup;
+	if (cleanups) return () => {
+		for (const c of cleanups) c();
+	};
+	return first;
 }
 /**
 * Apply a single prop.
@@ -969,21 +969,29 @@ function applyProps(el, props) {
 * - `() => value` (non-event function) → reactive via effect
 * - anything else → static attribute / DOM property
 */
-function applyProp(el, key, value) {
-	if (EVENT_RE.test(key)) {
-		const eventName = key[2]?.toLowerCase() + key.slice(3);
-		const handler = value;
-		if (DELEGATED_EVENTS.has(eventName)) {
-			const prop = delegatedPropName(eventName);
-			el[prop] = (e) => batch(() => handler(e));
-			return () => {
-				el[prop] = void 0;
-			};
-		}
-		const batched = (e) => batch(() => handler(e));
-		el.addEventListener(eventName, batched);
-		return () => el.removeEventListener(eventName, batched);
+/**
+* Bind an event handler (onClick → "click") with batching + delegation support.
+*/
+function applyEventProp(el, key, value) {
+	if (__DEV__$3 && typeof value !== "function") {
+		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);
+	const handler = value;
+	if (DELEGATED_EVENTS.has(eventName)) {
+		const prop = delegatedPropName(eventName);
+		el[prop] = (e) => batch(() => handler(e));
+		return () => {
+			el[prop] = void 0;
+		};
 	}
+	const batched = (e) => batch(() => handler(e));
+	el.addEventListener(eventName, batched);
+	return () => el.removeEventListener(eventName, batched);
+}
+function applyProp(el, key, value) {
+	if (EVENT_RE.test(key)) return applyEventProp(el, key, value);
 	if (key === "innerHTML") {
 		if (typeof el.setHTML === "function") el.setHTML(value);
 		else el.innerHTML = sanitizeHtml(value);
@@ -1023,7 +1031,13 @@ const UNSAFE_URL_RE = /^\s*(?:javascript|data):/i;
 /** Apply a style prop (string or object). */
 function applyStyleProp(el, value) {
 	if (typeof value === "string") el.style.cssText = value;
-	else if (value != null && typeof value === "object") Object.assign(el.style, value);
+	else if (value != null && typeof value === "object") {
+		const obj = value;
+		for (const k in obj) {
+			const css = normalizeStyleValue(k, obj[k]);
+			el.style.setProperty(k.startsWith("--") ? k : toKebabCase(k), css);
+		}
+	}
 }
 function setStaticProp(el, key, value) {
 	if (URL_ATTRS.has(key) && typeof value === "string" && UNSAFE_URL_RE.test(value)) {
@@ -1132,14 +1146,35 @@ function mountChild(child, parent, anchor = null) {
 	}
 	if (vnode.type === PortalSymbol) {
 		const { target, children } = vnode.props;
-		if (__DEV__$2 && !target) return noop$1;
+		if (__DEV__$2 && !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.`);
 		return mountChild(children, target, null);
 	}
 	if (typeof vnode.type === "function") return mountComponent(vnode, parent, anchor);
 	return mountElement(vnode, parent, anchor);
 }
+const VOID_ELEMENTS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
 function mountElement(vnode, parent, anchor) {
 	const el = document.createElement(vnode.type);
+	if (__DEV__$2 && vnode.children.length > 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++;
@@ -1210,7 +1245,10 @@ function mountComponent(vnode, parent, anchor) {
 	} finally {
 		setCurrentScope(null);
 	}
-	if (__DEV__$2 && output != null && typeof output === "object" && !("type" in output)) console.warn(`[Pyreon] Component <${componentName}> returned an invalid value. Components must return a VNode, string, null, or function.`);
+	if (__DEV__$2 && 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)) console.warn(`[Pyreon] Component <${componentName}> returned an invalid value. Components must return a VNode, string, null, or function.`);
+	}
 	for (const fn of hooks.update) scope.addUpdateHook(fn);
 	let subtreeCleanup = noop$1;
 	try {