@pyreon/runtime-dom 0.11.4 → 0.11.6

package/src/tests/setup.ts

@@ -1,3 +1,3 @@
-import { GlobalRegistrator } from "@happy-dom/global-registrator"
+import { GlobalRegistrator } from '@happy-dom/global-registrator'
 
 GlobalRegistrator.register()

package/src/tests/show-context.test.ts

@@ -1,38 +1,38 @@
-import { createContext, Fragment, h, provide, useContext } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
-import { mount } from "@pyreon/runtime-dom"
-import { describe, expect, it } from "vitest"
+import { createContext, Fragment, h, provide, useContext } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { mount } from '@pyreon/runtime-dom'
+import { describe, expect, it } from 'vitest'
 
-const TestCtx = createContext("default")
+const TestCtx = createContext('default')
 
-describe("context inheritance through reactive boundaries", () => {
-  it("child inside reactive accessor inherits parent context", async () => {
+describe('context inheritance through reactive boundaries', () => {
+  it('child inside reactive accessor inherits parent context', async () => {
     let childValue: string | undefined
 
     function Child() {
       childValue = useContext(TestCtx)
-      return h("span", null, childValue)
+      return h('span', null, childValue)
     }
 
     function Parent() {
-      provide(TestCtx, "from-parent")
+      provide(TestCtx, 'from-parent')
       const show = signal(false)
       setTimeout(() => show.set(true), 10)
       return () => (show() ? h(Child, null) : null)
     }
 
-    const container = document.createElement("div")
+    const container = document.createElement('div')
     mount(h(Parent, null), container)
     await new Promise((r) => setTimeout(r, 50))
-    expect(childValue).toBe("from-parent")
+    expect(childValue).toBe('from-parent')
   })
 
-  it("deeply nested context survives through multiple reactive layers", async () => {
+  it('deeply nested context survives through multiple reactive layers', async () => {
     let innerValue: string | undefined
 
     function Inner() {
       innerValue = useContext(TestCtx)
-      return h("span", null, innerValue)
+      return h('span', null, innerValue)
     }
 
     function Middle() {
@@ -42,16 +42,16 @@ describe("context inheritance through reactive boundaries", () => {
     }
 
     function Outer() {
-      provide(TestCtx, "outer-value")
+      provide(TestCtx, 'outer-value')
       const show = signal(false)
       setTimeout(() => show.set(true), 5)
       return () => (show() ? h(Middle, null) : null)
     }
 
-    const container = document.createElement("div")
+    const container = document.createElement('div')
     mount(h(Outer, null), container)
     await new Promise((r) => setTimeout(r, 100))
-    expect(innerValue).toBe("outer-value")
+    expect(innerValue).toBe('outer-value')
   })
 
   it("sibling providers don't leak context to each other", async () => {
@@ -60,21 +60,21 @@ describe("context inheritance through reactive boundaries", () => {
 
     function ChildA() {
       childAValue = useContext(TestCtx)
-      return h("span", null, childAValue)
+      return h('span', null, childAValue)
     }
 
     function ChildB() {
       childBValue = useContext(TestCtx)
-      return h("span", null, childBValue)
+      return h('span', null, childBValue)
     }
 
     function ProviderA() {
-      provide(TestCtx, "A")
+      provide(TestCtx, 'A')
       return h(ChildA, null)
     }
 
     function ProviderB() {
-      provide(TestCtx, "B")
+      provide(TestCtx, 'B')
       return h(ChildB, null)
     }
 
@@ -82,26 +82,26 @@ describe("context inheritance through reactive boundaries", () => {
       return h(Fragment, null, h(ProviderA, null), h(ProviderB, null))
     }
 
-    const container = document.createElement("div")
+    const container = document.createElement('div')
     mount(h(App, null), container)
     await new Promise((r) => setTimeout(r, 50))
 
-    expect(childAValue).toBe("A")
-    expect(childBValue).toBe("B")
+    expect(childAValue).toBe('A')
+    expect(childBValue).toBe('B')
   })
 
-  it("Show toggle preserves context across hide/show cycle", async () => {
+  it('Show toggle preserves context across hide/show cycle', async () => {
     let childValue: string | undefined
     let mountCount = 0
 
     function Child() {
       mountCount++
       childValue = useContext(TestCtx)
-      return h("span", null, childValue)
+      return h('span', null, childValue)
     }
 
     function Parent() {
-      provide(TestCtx, "persistent")
+      provide(TestCtx, 'persistent')
       const show = signal(true)
 
       // Hide then show again
@@ -111,67 +111,67 @@ describe("context inheritance through reactive boundaries", () => {
       return () => (show() ? h(Child, null) : null)
     }
 
-    const container = document.createElement("div")
+    const container = document.createElement('div')
     mount(h(Parent, null), container)
     await new Promise((r) => setTimeout(r, 100))
 
-    expect(childValue).toBe("persistent")
+    expect(childValue).toBe('persistent')
     expect(mountCount).toBe(2) // mounted twice (initial + re-show)
   })
 
-  it("reactive context getter updates JSX without re-running component", async () => {
-    const ModeCtx = createContext<() => string>(() => "light")
+  it('reactive context getter updates JSX without re-running component', async () => {
+    const ModeCtx = createContext<() => string>(() => 'light')
     let renderCount = 0
 
     function Child() {
       const getMode = useContext(ModeCtx)
       renderCount++
       // Reading the getter inside a reactive accessor — updates when mode changes
-      return h("span", null, () => getMode())
+      return h('span', null, () => getMode())
     }
 
     function Parent() {
-      const mode = signal<string>("light")
+      const mode = signal<string>('light')
       provide(ModeCtx, () => mode())
-      setTimeout(() => mode.set("dark"), 10)
+      setTimeout(() => mode.set('dark'), 10)
       return h(Child, null)
     }
 
-    const container = document.createElement("div")
+    const container = document.createElement('div')
     mount(h(Parent, null), container)
 
-    expect(container.textContent).toBe("light")
+    expect(container.textContent).toBe('light')
 
     await new Promise((r) => setTimeout(r, 50))
-    expect(container.textContent).toBe("dark")
+    expect(container.textContent).toBe('dark')
     // Component setup ran once — JSX expression re-evaluated reactively
     expect(renderCount).toBe(1)
   })
 
-  it("nested Show inside For with context", async () => {
-    const ItemCtx = createContext("none")
+  it('nested Show inside For with context', async () => {
+    const ItemCtx = createContext('none')
     const collected: string[] = []
 
     function Item() {
       const val = useContext(ItemCtx)
       collected.push(val)
-      return h("li", null, val)
+      return h('li', null, val)
     }
 
     function Parent() {
-      provide(ItemCtx, "parent-provided")
+      provide(ItemCtx, 'parent-provided')
       const items = signal([1, 2, 3])
       const show = signal(false)
       setTimeout(() => show.set(true), 10)
 
-      return () => (show() ? h("ul", null, ...items().map((i) => h(Item, { key: i }))) : null)
+      return () => (show() ? h('ul', null, ...items().map((i) => h(Item, { key: i }))) : null)
     }
 
-    const container = document.createElement("div")
+    const container = document.createElement('div')
     mount(h(Parent, null), container)
     await new Promise((r) => setTimeout(r, 50))
 
     expect(collected.length).toBe(3)
-    expect(collected.every((v) => v === "parent-provided")).toBe(true)
+    expect(collected.every((v) => v === 'parent-provided')).toBe(true)
   })
 })

package/src/tests/template.test.ts

@@ -1,123 +1,123 @@
-import { computed, signal } from "@pyreon/reactivity"
-import { _bindDirect, _bindText } from "../template"
+import { computed, signal } from '@pyreon/reactivity'
+import { _bindDirect, _bindText } from '../template'
 
 // ─── _bindText ──────────────────────────────────────────────────────────────
 
-describe("_bindText", () => {
-  test("fast path: signal source sets text and updates reactively", () => {
-    const s = signal("hello")
-    const node = document.createTextNode("")
+describe('_bindText', () => {
+  test('fast path: signal source sets text and updates reactively', () => {
+    const s = signal('hello')
+    const node = document.createTextNode('')
 
     const dispose = _bindText(s, node)
-    expect(node.data).toBe("hello")
+    expect(node.data).toBe('hello')
 
-    s.set("world")
-    expect(node.data).toBe("world")
+    s.set('world')
+    expect(node.data).toBe('world')
 
     dispose()
   })
 
-  test("fast path: computed source sets text and updates reactively", () => {
+  test('fast path: computed source sets text and updates reactively', () => {
     const s = signal(2)
     const doubled = computed(() => s() * 2)
-    const node = document.createTextNode("")
+    const node = document.createTextNode('')
 
     const dispose = _bindText(doubled, node)
-    expect(node.data).toBe("4")
+    expect(node.data).toBe('4')
 
     s.set(5)
-    expect(node.data).toBe("10")
+    expect(node.data).toBe('10')
 
     dispose()
   })
 
-  test("fallback: plain function source uses renderEffect", () => {
-    const s = signal("initial")
+  test('fallback: plain function source uses renderEffect', () => {
+    const s = signal('initial')
     // Plain function — no .direct property
     const getter = () => s()
-    const node = document.createTextNode("")
+    const node = document.createTextNode('')
 
     const dispose = _bindText(getter as unknown as Parameters<typeof _bindText>[0], node)
-    expect(node.data).toBe("initial")
+    expect(node.data).toBe('initial')
 
-    s.set("updated")
-    expect(node.data).toBe("updated")
+    s.set('updated')
+    expect(node.data).toBe('updated')
 
     dispose()
   })
 
-  test("disposal stops updates for signal source", () => {
-    const s = signal("a")
-    const node = document.createTextNode("")
+  test('disposal stops updates for signal source', () => {
+    const s = signal('a')
+    const node = document.createTextNode('')
 
     const dispose = _bindText(s, node)
-    expect(node.data).toBe("a")
+    expect(node.data).toBe('a')
 
     dispose()
 
-    s.set("b")
-    expect(node.data).toBe("a")
+    s.set('b')
+    expect(node.data).toBe('a')
   })
 
-  test("disposal stops updates for computed source", () => {
+  test('disposal stops updates for computed source', () => {
     const s = signal(1)
     const c = computed(() => s() + 10)
-    const node = document.createTextNode("")
+    const node = document.createTextNode('')
 
     const dispose = _bindText(c, node)
-    expect(node.data).toBe("11")
+    expect(node.data).toBe('11')
 
     dispose()
 
     s.set(2)
-    expect(node.data).toBe("11")
+    expect(node.data).toBe('11')
   })
 
-  test("disposal stops updates for plain function source", () => {
-    const s = signal("x")
+  test('disposal stops updates for plain function source', () => {
+    const s = signal('x')
     const getter = () => s()
-    const node = document.createTextNode("")
+    const node = document.createTextNode('')
 
     const dispose = _bindText(getter as unknown as Parameters<typeof _bindText>[0], node)
-    expect(node.data).toBe("x")
+    expect(node.data).toBe('x')
 
     dispose()
 
-    s.set("y")
-    expect(node.data).toBe("x")
+    s.set('y')
+    expect(node.data).toBe('x')
   })
 
-  test("null value renders as empty string", () => {
-    const s = signal<string | null>("text")
-    const node = document.createTextNode("")
+  test('null value renders as empty string', () => {
+    const s = signal<string | null>('text')
+    const node = document.createTextNode('')
 
     const dispose = _bindText(s, node)
-    expect(node.data).toBe("text")
+    expect(node.data).toBe('text')
 
     s.set(null)
-    expect(node.data).toBe("")
+    expect(node.data).toBe('')
 
     dispose()
   })
 
-  test("false value renders as empty string", () => {
-    const s = signal<string | false>("text")
-    const node = document.createTextNode("")
+  test('false value renders as empty string', () => {
+    const s = signal<string | false>('text')
+    const node = document.createTextNode('')
 
     const dispose = _bindText(s, node)
     s.set(false)
-    expect(node.data).toBe("")
+    expect(node.data).toBe('')
 
     dispose()
   })
 
-  test("undefined value renders as empty string", () => {
-    const s = signal<string | undefined>("text")
-    const node = document.createTextNode("")
+  test('undefined value renders as empty string', () => {
+    const s = signal<string | undefined>('text')
+    const node = document.createTextNode('')
 
     const dispose = _bindText(s, node)
     s.set(undefined)
-    expect(node.data).toBe("")
+    expect(node.data).toBe('')
 
     dispose()
   })
@@ -125,70 +125,70 @@ describe("_bindText", () => {
 
 // ─── _bindDirect ────────────────────────────────────────────────────────────
 
-describe("_bindDirect", () => {
-  test("fast path: signal source calls updater immediately and on change", () => {
-    const s = signal("red")
-    const el = document.createElement("div")
+describe('_bindDirect', () => {
+  test('fast path: signal source calls updater immediately and on change', () => {
+    const s = signal('red')
+    const el = document.createElement('div')
 
     const dispose = _bindDirect(s, (v) => {
       el.className = String(v)
     })
 
-    expect(el.className).toBe("red")
+    expect(el.className).toBe('red')
 
-    s.set("blue")
-    expect(el.className).toBe("blue")
+    s.set('blue')
+    expect(el.className).toBe('blue')
 
     dispose()
   })
 
-  test("fallback: plain function source uses renderEffect", () => {
+  test('fallback: plain function source uses renderEffect', () => {
     const s = signal(10)
     const getter = () => s()
-    const el = document.createElement("div")
+    const el = document.createElement('div')
 
     const dispose = _bindDirect(getter as unknown as Parameters<typeof _bindDirect>[0], (v) => {
       el.style.width = `${v}px`
     })
 
-    expect(el.style.width).toBe("10px")
+    expect(el.style.width).toBe('10px')
 
     s.set(20)
-    expect(el.style.width).toBe("20px")
+    expect(el.style.width).toBe('20px')
 
     dispose()
   })
 
-  test("disposal stops updates for signal source", () => {
-    const s = signal("a")
-    const el = document.createElement("div")
+  test('disposal stops updates for signal source', () => {
+    const s = signal('a')
+    const el = document.createElement('div')
 
     const dispose = _bindDirect(s, (v) => {
-      el.setAttribute("data-val", String(v))
+      el.setAttribute('data-val', String(v))
     })
 
-    expect(el.getAttribute("data-val")).toBe("a")
+    expect(el.getAttribute('data-val')).toBe('a')
 
     dispose()
 
-    s.set("b")
-    expect(el.getAttribute("data-val")).toBe("a")
+    s.set('b')
+    expect(el.getAttribute('data-val')).toBe('a')
   })
 
-  test("disposal stops updates for plain function source", () => {
+  test('disposal stops updates for plain function source', () => {
     const s = signal(1)
     const getter = () => s()
-    const el = document.createElement("div")
+    const el = document.createElement('div')
 
     const dispose = _bindDirect(getter as unknown as Parameters<typeof _bindDirect>[0], (v) => {
-      el.setAttribute("data-num", String(v))
+      el.setAttribute('data-num', String(v))
     })
 
-    expect(el.getAttribute("data-num")).toBe("1")
+    expect(el.getAttribute('data-num')).toBe('1')
 
     dispose()
 
     s.set(2)
-    expect(el.getAttribute("data-num")).toBe("1")
+    expect(el.getAttribute('data-num')).toBe('1')
   })
 })