@pyreon/solid-compat 0.2.0 → 0.3.0

package/src/tests/repro.test.ts

@@ -0,0 +1,172 @@
+import type { ComponentFn } from "@pyreon/core"
+import { ErrorBoundary as CoreEB, Show as CoreShow, Suspense as CoreSuspense } from "@pyreon/core"
+import { mount } from "@pyreon/runtime-dom"
+import { children, createSignal, ErrorBoundary, onCleanup, onMount, Show, Suspense } from "../index"
+import { jsx } from "../jsx-runtime"
+
+describe("DOM integration - children helper", () => {
+  it("children helper should render VNode children, not [object Object]", () => {
+    function ColoredBox(props: { color: string; children?: any }) {
+      const resolved = children(() => props.children)
+      return jsx("div", {
+        style: `border: 2px solid ${props.color}`,
+        children: resolved(),
+      })
+    }
+
+    function App() {
+      return jsx(ColoredBox as ComponentFn, {
+        color: "blue",
+        children: jsx("p", { children: "Hello" }),
+      })
+    }
+
+    const container = document.createElement("div")
+    mount(jsx(App, {}), container)
+
+    expect(container.innerHTML).not.toContain("[object Object]")
+    expect(container.innerHTML).toContain("<p>Hello</p>")
+  })
+
+  it("simple compat component renders children correctly", () => {
+    function Wrapper(props: { children?: any }) {
+      return jsx("div", { class: "wrapper", children: props.children })
+    }
+
+    function App() {
+      return jsx(Wrapper as ComponentFn, {
+        children: jsx("span", { children: "inner" }),
+      })
+    }
+
+    const container = document.createElement("div")
+    mount(jsx(App, {}), container)
+
+    expect(container.innerHTML).not.toContain("[object Object]")
+    expect(container.innerHTML).toContain("<span>inner</span>")
+  })
+
+  it("re-exported Show/Suspense/ErrorBoundary are same references as core", () => {
+    expect(Show).toBe(CoreShow)
+    expect(Suspense).toBe(CoreSuspense)
+    expect(ErrorBoundary).toBe(CoreEB)
+  })
+
+  it("Show from solid-compat works through compat jsx runtime", () => {
+    const [visible] = createSignal(true)
+
+    function App() {
+      return jsx(Show as ComponentFn, {
+        when: visible,
+        children: jsx("p", { children: "visible!" }),
+      })
+    }
+
+    const container = document.createElement("div")
+    mount(jsx(App, {}), container)
+
+    expect(container.innerHTML).toContain("visible!")
+    expect(container.innerHTML).not.toContain("[object Object]")
+  })
+
+  it("nested compat components with children pass-through", () => {
+    function Demo(props: { title: string; children?: any }) {
+      return jsx("section", {
+        children: [jsx("h2", { children: props.title }), props.children],
+      })
+    }
+
+    function ColoredBox(props: { color: string; children?: any }) {
+      const resolved = children(() => props.children)
+      return jsx("div", {
+        style: `border: 2px solid ${props.color}`,
+        children: resolved(),
+      })
+    }
+
+    function App() {
+      return jsx(Demo as ComponentFn, {
+        title: "Test",
+        children: jsx(ColoredBox as ComponentFn, {
+          color: "blue",
+          children: jsx("p", { children: "Hello" }),
+        }),
+      })
+    }
+
+    const container = document.createElement("div")
+    mount(jsx(App, {}), container)
+
+    expect(container.innerHTML).not.toContain("[object Object]")
+    expect(container.innerHTML).toContain("<p>Hello</p>")
+    expect(container.innerHTML).toContain("<h2>Test</h2>")
+  })
+})
+
+describe("child instance preservation - no infinite re-render", () => {
+  it("onMount in child does not cause infinite loop when writing parent state", async () => {
+    let mountCount = 0
+
+    function Inner(props: { onEvent: (msg: string) => void }) {
+      onMount(() => {
+        mountCount++
+        props.onEvent("mounted")
+        return undefined
+      })
+      return jsx("p", { children: "alive" })
+    }
+
+    function Parent() {
+      const [_events, setEvents] = createSignal<string[]>([])
+      const addEvent = (msg: string) => setEvents((prev) => [...prev, msg])
+
+      return jsx("div", {
+        children: jsx(Inner as ComponentFn, { onEvent: addEvent }),
+      })
+    }
+
+    const container = document.createElement("div")
+    mount(jsx(Parent, {}), container)
+
+    // Wait for microtasks (onMount fires via microtask, re-render via microtask)
+    await new Promise((r) => setTimeout(r, 100))
+
+    // onMount should fire only once, not loop infinitely
+    expect(mountCount).toBeLessThanOrEqual(2)
+    expect(container.innerHTML).toContain("alive")
+  })
+
+  it("onCleanup in child does not cause infinite loop when writing parent state", async () => {
+    let cleanupCount = 0
+
+    function Inner(props: { onEvent: (msg: string) => void }) {
+      onCleanup(() => {
+        cleanupCount++
+        props.onEvent("cleaned up")
+      })
+      return jsx("p", { children: "alive" })
+    }
+
+    function Parent() {
+      const [show, _setShow] = createSignal(true)
+      const [_events, setEvents] = createSignal<string[]>([])
+      const addEvent = (msg: string) => setEvents((prev) => [...prev, msg])
+
+      return jsx("div", {
+        children: jsx(Show as ComponentFn, {
+          when: show,
+          children: jsx(Inner as ComponentFn, { onEvent: addEvent }),
+        }),
+      })
+    }
+
+    const container = document.createElement("div")
+    mount(jsx(Parent, {}), container)
+
+    await new Promise((r) => setTimeout(r, 100))
+
+    // onCleanup should not fire during normal render
+    expect(cleanupCount).toBe(0)
+    expect(container.innerHTML).toContain("alive")
+  })
+})

package/src/tests/solid-compat.test.ts

@@ -27,11 +27,30 @@ import {
   untrack,
   useContext,
 } from "../index"
-
-function _container(): HTMLElement {
-  const el = document.createElement("div")
-  document.body.appendChild(el)
-  return el
+import type { RenderContext } from "../jsx-runtime"
+import { beginRender, endRender } from "../jsx-runtime"
+
+// ─── Test helpers ─────────────────────────────────────────────────────────────
+
+/** Re-render helper: calls fn with the same ctx to simulate re-render */
+function createHookRunner() {
+  const ctx: RenderContext = {
+    hooks: [],
+    scheduleRerender: () => {},
+    pendingEffects: [],
+    pendingLayoutEffects: [],
+    unmounted: false,
+    unmountCallbacks: [],
+  }
+  return {
+    ctx,
+    run<T>(fn: () => T): T {
+      beginRender(ctx)
+      const result = fn()
+      endRender()
+      return result
+    },
+  }
 }
 
 describe("@pyreon/solid-compat", () => {
@@ -60,6 +79,36 @@ describe("@pyreon/solid-compat", () => {
     expect(count()).toBe(15)
   })
 
+  // ─── createSignal in component context ─────────────────────────────────
+
+  it("createSignal in component context stores in hooks", () => {
+    const runner = createHookRunner()
+    const [count] = runner.run(() => createSignal(42))
+    expect(count()).toBe(42)
+    // Re-render returns same signal from hooks
+    const [count2] = runner.run(() => createSignal(42))
+    expect(count2()).toBe(42)
+  })
+
+  it("createSignal setter in component context triggers scheduleRerender", () => {
+    const runner = createHookRunner()
+    let rerenders = 0
+    runner.ctx.scheduleRerender = () => {
+      rerenders++
+    }
+    const [, setCount] = runner.run(() => createSignal(0))
+    setCount(5)
+    expect(rerenders).toBe(1)
+  })
+
+  it("createSignal setter persists across re-renders", () => {
+    const runner = createHookRunner()
+    const [, setCount] = runner.run(() => createSignal(0))
+    setCount(99)
+    const [count2] = runner.run(() => createSignal(0))
+    expect(count2()).toBe(99)
+  })
+
   // ─── createEffect ─────────────────────────────────────────────────────
 
   it("createEffect tracks signal reads", () => {
@@ -76,6 +125,45 @@ describe("@pyreon/solid-compat", () => {
     })
   })
 
+  it("createEffect in component context is hook-indexed", () => {
+    const runner = createHookRunner()
+    let effectRuns = 0
+    runner.run(() => {
+      const [count] = createSignal(0)
+      createEffect(() => {
+        count() // track
+        effectRuns++
+      })
+    })
+    expect(effectRuns).toBe(1)
+    // Re-render — effect should NOT be created again
+    runner.run(() => {
+      createSignal(0) // consume hook index
+      createEffect(() => {
+        effectRuns += 100 // should never run
+      })
+    })
+    expect(effectRuns).toBe(1) // still 1, not re-created
+  })
+
+  it("createEffect in component context is disposed on unmount", () => {
+    const runner = createHookRunner()
+    let effectRuns = 0
+    const [, setCount] = runner.run(() => {
+      const sig = createSignal(0)
+      createEffect(() => {
+        sig[0]()
+        effectRuns++
+      })
+      return sig
+    })
+    expect(effectRuns).toBe(1)
+    // Simulate unmount
+    for (const cb of runner.ctx.unmountCallbacks) cb()
+    setCount(5)
+    expect(effectRuns).toBe(1) // effect was disposed
+  })
+
   // ─── createRenderEffect ────────────────────────────────────────────────
 
   it("createRenderEffect tracks signal reads like createEffect", () => {
@@ -130,6 +218,21 @@ describe("@pyreon/solid-compat", () => {
     })
   })
 
+  it("createMemo in component context is hook-indexed", () => {
+    const runner = createHookRunner()
+    const doubled = runner.run(() => {
+      const [count] = createSignal(5)
+      return createMemo(() => count() * 2)
+    })
+    expect(doubled()).toBe(10)
+    // Re-render returns same computed from hooks
+    const doubled2 = runner.run(() => {
+      createSignal(5) // consume hook index
+      return createMemo(() => 999) // fn ignored on re-render
+    })
+    expect(doubled2()).toBe(10) // still uses original computed
+  })
+
   // ─── createRoot ───────────────────────────────────────────────────────
 
   it("createRoot provides cleanup", () => {
@@ -291,6 +394,21 @@ describe("@pyreon/solid-compat", () => {
     })
   })
 
+  it("createSelector in component context is hook-indexed", () => {
+    const runner = createHookRunner()
+    const isSelected = runner.run(() => {
+      const [selected] = createSignal(1)
+      return createSelector(selected)
+    })
+    expect(isSelected(1)).toBe(true)
+    // Re-render returns same selector
+    const isSelected2 = runner.run(() => {
+      createSignal(1) // consume hook index
+      return createSelector(() => 999) // fn ignored on re-render
+    })
+    expect(isSelected2).toBe(isSelected) // same instance
+  })
+
   // ─── mergeProps ───────────────────────────────────────────────────────
 
   it("mergeProps combines objects", () => {
@@ -369,30 +487,24 @@ describe("@pyreon/solid-compat", () => {
     expect(typeof Lazy.preload).toBe("function")
   })
 
-  it("lazy component throws promise before loaded (for Suspense)", () => {
+  it("lazy component uses __loading protocol before loaded (for Suspense)", () => {
     const Lazy = lazy(() => Promise.resolve({ default: () => h("div", null, "loaded") }))
-    let thrown: unknown
-    try {
-      Lazy({})
-    } catch (e) {
-      thrown = e
-    }
-    expect(thrown).toBeInstanceOf(Promise)
+    // Before resolved, __loading returns true and component returns null
+    expect(Lazy.__loading()).toBe(true)
+    const result = Lazy({})
+    expect(result).toBeNull()
   })
 
   it("lazy component renders after loading", async () => {
     const MyComp = () => h("div", null, "loaded")
     const Lazy = lazy(() => Promise.resolve({ default: MyComp }))
 
-    // Trigger load by catching the thrown promise, then await it
-    let thrown: unknown
-    try {
-      Lazy({})
-    } catch (e) {
-      thrown = e
-    }
-    await thrown
+    // Trigger load
+    Lazy({})
+    // Wait for promise to resolve
+    await Lazy.preload()
 
+    expect(Lazy.__loading()).toBe(false)
     const result = Lazy({})
     expect(result).not.toBeNull()
   })
@@ -475,6 +587,32 @@ describe("@pyreon/solid-compat", () => {
     expect(typeof onCleanup).toBe("function")
   })
 
+  it("onMount in component context only runs on first render", () => {
+    const runner = createHookRunner()
+    runner.run(() => {
+      onMount(() => undefined)
+    })
+    expect(runner.ctx.pendingEffects).toHaveLength(1)
+    // Re-render — should NOT add another effect
+    runner.run(() => {
+      onMount(() => undefined)
+    })
+    expect(runner.ctx.pendingEffects).toHaveLength(0) // cleared by beginRender
+  })
+
+  it("onCleanup in component context registers unmount callback", () => {
+    const runner = createHookRunner()
+    let cleaned = false
+    runner.run(() => {
+      onCleanup(() => {
+        cleaned = true
+      })
+    })
+    expect(cleaned).toBe(false)
+    for (const cb of runner.ctx.unmountCallbacks) cb()
+    expect(cleaned).toBe(true)
+  })
+
   // ─── createContext / useContext ────────────────────────────────────────
 
   it("createContext creates context with default value", () => {
@@ -644,4 +782,13 @@ describe("@pyreon/solid-compat", () => {
     const result = runWithOwner(null, () => "hello")
     expect(result).toBe("hello")
   })
+
+  // ─── JSX runtime ───────────────────────────────────────────────────────
+
+  it("jsx-runtime exports are available", async () => {
+    const jsxRuntime = await import("../jsx-runtime")
+    expect(typeof jsxRuntime.jsx).toBe("function")
+    expect(typeof jsxRuntime.jsxs).toBe("function")
+    expect(typeof jsxRuntime.Fragment).toBe("symbol")
+  })
 })