@pyreon/runtime-dom 0.5.4 → 0.5.6

package/src/props.ts

@@ -1,4 +1,6 @@
 import type { Props } from "@pyreon/core"
+import { normalizeStyleValue, toKebabCase } from "@pyreon/core"
+
 import { batch, renderEffect } from "@pyreon/reactivity"
 import { DELEGATED_EVENTS, delegatedPropName } from "./delegate"
 
@@ -187,23 +189,26 @@ const EVENT_RE = /^on[A-Z]/
  * Uses for-in instead of Object.keys() to avoid allocating a keys array.
  */
 export function applyProps(el: Element, props: Props): Cleanup | null {
-  let cleanup: Cleanup | null = null
+  let first: Cleanup | null = null
+  let cleanups: Cleanup[] | null = 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
+      if (!first) {
+        first = c
+      } else if (!cleanups) {
+        cleanups = [first, c]
       } else {
-        const prev = cleanup
-        cleanup = () => {
-          prev()
-          c()
-        }
+        cleanups.push(c)
       }
     }
   }
-  return cleanup
+  if (cleanups)
+    return () => {
+      for (const c of cleanups) c()
+    }
+  return first
 }
 
 /**
@@ -213,28 +218,37 @@ export function applyProps(el: Element, props: Props): Cleanup | null {
  * - `() => value` (non-event function) → reactive via effect
  * - anything else → static attribute / DOM property
  */
-export function applyProp(el: Element, key: string, value: unknown): Cleanup | null {
-  // Event listener: onClick → "click"
-  // Delegated events use expando properties (picked up by the container's delegated listener).
-  // Non-delegated events use addEventListener directly.
-  // Both paths wrap in batch() so multiple signal writes coalesce into one DOM update.
-  if (EVENT_RE.test(key)) {
-    const eventName = key[2]?.toLowerCase() + key.slice(3)
-    const handler = value as EventListener
-
-    if (DELEGATED_EVENTS.has(eventName)) {
-      const prop = delegatedPropName(eventName)
-      ;(el as unknown as Record<string, unknown>)[prop] = (e: Event) => batch(() => handler(e))
-      return () => {
-        ;(el as unknown as Record<string, unknown>)[prop] = undefined
-      }
+/**
+ * Bind an event handler (onClick → "click") with batching + delegation support.
+ */
+function applyEventProp(el: Element, key: string, value: unknown): Cleanup | null {
+  if (__DEV__ && 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 as EventListener
+
+  if (DELEGATED_EVENTS.has(eventName)) {
+    const prop = delegatedPropName(eventName)
+    ;(el as unknown as Record<string, unknown>)[prop] = (e: Event) => batch(() => handler(e))
+    return () => {
+      ;(el as unknown as Record<string, unknown>)[prop] = undefined
     }
-
-    const batched: EventListener = (e) => batch(() => handler(e))
-    el.addEventListener(eventName, batched)
-    return () => el.removeEventListener(eventName, batched)
   }
 
+  const batched: EventListener = (e) => batch(() => handler(e))
+  el.addEventListener(eventName, batched)
+  return () => el.removeEventListener(eventName, batched)
+}
+
+export function applyProp(el: Element, key: string, value: unknown): Cleanup | null {
+  // Event listener: onClick → "click"
+  if (EVENT_RE.test(key)) return applyEventProp(el, key, value)
+
   // innerHTML — sanitized via Sanitizer API or fallback allowlist sanitizer
   if (key === "innerHTML") {
     if (typeof (el as HTMLElement & { setHTML?: (h: string) => void }).setHTML === "function") {
@@ -297,7 +311,11 @@ function applyStyleProp(el: HTMLElement, value: unknown): void {
   if (typeof value === "string") {
     el.style.cssText = value
   } else if (value != null && typeof value === "object") {
-    Object.assign(el.style, value)
+    const obj = value as Record<string, unknown>
+    for (const k in obj) {
+      const css = normalizeStyleValue(k, obj[k])
+      el.style.setProperty(k.startsWith("--") ? k : toKebabCase(k), css)
+    }
   }
 }
 

package/src/tests/coverage.test.ts

@@ -13,6 +13,7 @@ import {
   onMount,
   onUnmount,
   onUpdate,
+  Portal,
 } from "@pyreon/core"
 import { signal } from "@pyreon/reactivity"
 import { installDevTools, registerComponent, unregisterComponent } from "../devtools"
@@ -360,6 +361,37 @@ describe("mount.ts — uncovered branches", () => {
     warnSpy.mockRestore()
   })
 
+  test("component returning Promise triggers dev warning", () => {
+    const el = container()
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+
+    const AsyncComp = (() => Promise.resolve(null)) as unknown as ComponentFn
+    mount(h(AsyncComp, null), el)
+
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("returned a Promise"))
+    warnSpy.mockRestore()
+  })
+
+  test("void element with children triggers dev warning", () => {
+    const el = container()
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+
+    mount(h("img", null, "child text"), el)
+
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("void element"))
+    warnSpy.mockRestore()
+  })
+
+  test("Portal with falsy target warns", () => {
+    const el = container()
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+
+    mount(h(Portal, { target: null }), el)
+
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("Portal"))
+    warnSpy.mockRestore()
+  })
+
   test("component subtree mount error with propagateError (lines 298-309)", () => {
     const el = container()
     const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {})
@@ -914,6 +946,16 @@ describe("props.ts — uncovered branches", () => {
     unmount()
   })
 
+  test("non-function event handler triggers dev warning", () => {
+    const el = container()
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+
+    mount(h("button", { onClick: "not a function" }), el)
+
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("non-function value"))
+    warnSpy.mockRestore()
+  })
+
   test("n-show prop toggles display (lines 273-277)", () => {
     const el = container()
     const visible = signal(true)

package/src/tests/mount.test.ts

@@ -975,6 +975,23 @@ describe("mount — props (extended)", () => {
     expect(div.style.marginTop).toBe("10px")
   })
 
+  test("style object auto-appends px to numeric values", () => {
+    const el = container()
+    mount(h("div", { style: { height: 100, marginTop: 20, opacity: 0.5, zIndex: 10 } }), el)
+    const div = el.querySelector("div") as HTMLElement
+    expect(div.style.height).toBe("100px")
+    expect(div.style.marginTop).toBe("20px")
+    expect(div.style.opacity).toBe("0.5")
+    expect(div.style.zIndex).toBe("10")
+  })
+
+  test("style object handles CSS custom properties", () => {
+    const el = container()
+    mount(h("div", { style: { "--my-color": "red" } }), el)
+    const div = el.querySelector("div") as HTMLElement
+    expect(div.style.getPropertyValue("--my-color")).toBe("red")
+  })
+
   test("className sets class attribute", () => {
     const el = container()
     mount(h("div", { className: "my-class" }), el)
@@ -1841,7 +1858,6 @@ describe("hydrateRoot — extended", () => {
     const Comp = defineComponent(() => {
       onMount(() => {
         mountCalled = true
-        return undefined
       })
       return h("span", null, "mounted")
     })

package/src/transition-group.ts

@@ -251,7 +251,6 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
   // Fire the effect once the container is in the DOM
   onMount(() => {
     ready.set(true)
-    return undefined
   })
 
   onUnmount(() => {