@pyreon/runtime-dom 0.14.0 → 0.16.0

package/src/tests/fanout-repro.test.tsx

@@ -0,0 +1,219 @@
+/** @jsxImportSource @pyreon/core */
+/**
+ * Reproduction of the deferred bug from PR #490 (queryReactiveKey-1000 journey).
+ *
+ * The pure-reactivity unit test (packages/core/reactivity/src/tests/fanout-repro.test.ts)
+ * passes — many effects subscribing to one signal all fire on every external
+ * .set. So the bug must involve actual Pyreon mount frames (provide/onMount/etc),
+ * not just the reactivity primitives.
+ *
+ * This test mounts a real Pyreon component with N effects subscribing to a
+ * shared signal, then writes to that signal in a tight external loop —
+ * mirroring the real shape from the queryReactiveKey-1000 journey.
+ */
+import { For, h } from '@pyreon/core'
+import { effect, signal } from '@pyreon/reactivity'
+import { describe, expect, it } from 'vitest'
+import { mount } from '../index'
+
+describe('signal fan-out under tight external write loop — INSIDE mount frame', () => {
+  it('100 effects in a Pyreon component — each fires on every external .set', () => {
+    const sig = signal(0)
+    const counts = new Array(100).fill(0)
+
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    const Component = () => {
+      for (let i = 0; i < 100; i++) {
+        const idx = i
+        effect(() => {
+          sig()
+          counts[idx]++
+        })
+      }
+      return h('div', null, 'mounted')
+    }
+
+    const dispose = mount(h(Component, null), root)
+
+    // All 100 effects ran their initial setup.
+    for (const c of counts) expect(c).toBe(1)
+
+    // 10 external writes outside any batch.
+    for (let i = 1; i <= 10; i++) sig.set(i)
+
+    // Each effect should have re-fired 10 more times → total = 11.
+    let failed = 0
+    for (let i = 0; i < counts.length; i++) {
+      if (counts[i] !== 11) failed++
+    }
+    expect(failed, `effects with wrong count (out of 100)`).toBe(0)
+
+    dispose()
+    root.remove()
+  })
+
+  it('100 effects + an extra effect AFTER the loop — all fire on each .set', () => {
+    // Real-bug shape: a diagnostic effect placed AFTER the useQuery loop
+    // saw 0 re-runs across 10 flips, while a BEFORE-loop one saw 1 of 10.
+    const sig = signal(0)
+    const counts = new Array(100).fill(0)
+    let beforeRuns = 0
+    let afterRuns = 0
+
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    const Component = () => {
+      effect(() => {
+        sig()
+        beforeRuns++
+      })
+      for (let i = 0; i < 100; i++) {
+        const idx = i
+        effect(() => {
+          sig()
+          counts[idx]++
+        })
+      }
+      effect(() => {
+        sig()
+        afterRuns++
+      })
+      return h('div', null, 'mounted')
+    }
+
+    const dispose = mount(h(Component, null), root)
+
+    expect(beforeRuns).toBe(1)
+    expect(afterRuns).toBe(1)
+    for (const c of counts) expect(c).toBe(1)
+
+    for (let i = 1; i <= 10; i++) sig.set(i)
+
+    expect(beforeRuns, 'before-loop effect runs').toBe(11)
+    expect(afterRuns, 'after-loop effect runs').toBe(11)
+    let failed = 0
+    for (let i = 0; i < counts.length; i++) {
+      if (counts[i] !== 11) failed++
+    }
+    expect(failed, `effects with wrong count`).toBe(0)
+
+    dispose()
+    root.remove()
+  })
+
+  it('the body of each effect ALSO writes to a per-effect local signal (mimics useQuery slot writes)', () => {
+    // useQuery's effect body calls observer.setOptions which triggers the
+    // observer's subscribe callback which does batch(() => 9 signal.sets).
+    // Approximate that with: each outer effect's body creates its own local
+    // signal and writes to it in a batch.
+    const sig = signal(0)
+    const counts = new Array(100).fill(0)
+
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    const Component = () => {
+      for (let i = 0; i < 100; i++) {
+        const idx = i
+        const slot = signal('')
+        effect(() => {
+          sig() // subscribe
+          // Mimic batched writes inside the effect body
+          slot.set(`run-${counts[idx]}`)
+          counts[idx]++
+        })
+      }
+      return h('div', null, 'mounted')
+    }
+
+    const dispose = mount(h(Component, null), root)
+
+    for (const c of counts) expect(c).toBe(1)
+
+    for (let i = 1; i <= 10; i++) sig.set(i)
+
+    let failed = 0
+    for (let i = 0; i < counts.length; i++) {
+      if (counts[i] !== 11) failed++
+    }
+    expect(failed, `effects with wrong count`).toBe(0)
+
+    dispose()
+    root.remove()
+  })
+
+  // ─── The real bug shape: <For> wrapping the queries ───────────────────────
+  //
+  // mountFor (`packages/core/runtime-dom/src/nodes.ts`) wraps its body in
+  // effect() but does NOT untrack the child mountChild calls (mountReactive
+  // does — line 92 of nodes.ts). As a result, any signal read during a
+  // child component's setup tracks against the For effect's run. When the
+  // tracked signal flips, For's effect re-runs → runCleanup() disposes ALL
+  // inner effects (the per-item setOptions effects) → handleIncrementalUpdate
+  // sees keys unchanged → does not re-mount → setOptions effects gone +
+  // never recreated. signalWrite fires N times but effectRun stays at the
+  // initial-mount count — the exact PR #490 observation.
+
+  it('REGRESSION: 100 effects mounted under <For> re-fire when shared signal flips', () => {
+    // Mirrors the queryReactiveKey-1000 shape: a mode/count tuple keys the
+    // For so its body mounts QueryAtScale-equivalent ONCE. Inside, N effects
+    // subscribe to a separate `reactKey` signal. External flips of reactKey
+    // must propagate to all N inner effects.
+    const reactKey = signal(0)
+    const counts = new Array(100).fill(0)
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    // Stable single-item array — For mounts the inner component exactly once.
+    const items = [{ id: 1 }] as const
+    type Item = (typeof items)[number]
+
+    const Inner = (props: { item: Item }) => {
+      // Read props.item to keep the component honest — same shape as
+      // QueryAtScale (which reads props.mode + props.count). That read
+      // tracks against the OUTER For effect via makeReactiveProps' getter.
+      void props.item.id
+
+      // Mimic useQuery's "read signal at construction time, OUTSIDE the
+      // inner effect" pattern. This is what `new QueryObserver(client,
+      // options())` does — options() reads reactKey while activeEffect is
+      // the outer effect (For's run), leaking the subscription up.
+      const _seed = reactKey() // ← this is the leak
+
+      // Plus: 100 effects each subscribing to reactKey via their own bodies.
+      for (let i = 0; i < 100; i++) {
+        const idx = i
+        effect(() => {
+          reactKey()
+          counts[idx]++
+        })
+      }
+      return h('div', { 'data-testid': 'inner' }, `mounted ${_seed}`)
+    }
+
+    const dispose = mount(
+      h(For, {
+        each: items,
+        by: (it: Item) => it.id,
+        children: (it: Item) => h(Inner, { item: it }),
+      }),
+      root,
+    )
+
+    for (const c of counts) expect(c).toBe(1)
+
+    for (let i = 1; i <= 10; i++) reactKey.set(i)
+
+    let failed = 0
+    for (let i = 0; i < counts.length; i++) {
+      if (counts[i] !== 11) failed++
+    }
+    expect(failed, `effects with wrong count after 10 flips`).toBe(0)
+
+    dispose()
+    root.remove()
+  })
+})

package/src/tests/hydration-integration.test.tsx

@@ -5,7 +5,7 @@
  * hydrate on client, verify signals work and DOM is reused.
  */
 import type { VNodeChild } from '@pyreon/core'
-import { For, Fragment, h, Show } from '@pyreon/core'
+import { _rp, For, Fragment, h, Show } from '@pyreon/core'
 import { signal } from '@pyreon/reactivity'
 import { renderToString } from '@pyreon/runtime-server'
 import { disableHydrationWarnings, enableHydrationWarnings, hydrateRoot } from '../index'
@@ -373,3 +373,168 @@ describe('hydration integration — mismatch recovery', () => {
     cleanup()
   })
 })
+
+// ─── onHydrationMismatch telemetry hook ────────────────────────────────────
+//
+// Pre-fix: runtime-dom emitted hydration mismatches via console.warn ONLY,
+// gated on __DEV__. Production deployments (Sentry, Datadog) had no
+// integration point — mismatches surfaced as silent recovery (text
+// rewritten or DOM remounted) with no telemetry signal. The asymmetry
+// with `@pyreon/core`'s `registerErrorHandler` (which captures component
+// + reactivity errors via the `__pyreon_report_error__` bridge) was the
+// gap.
+//
+// Post-fix: `onHydrationMismatch(handler)` registers a callback fired on
+// EVERY mismatch in dev AND prod, independent of the warn toggle.
+// Mirrors core's `registerErrorHandler` shape.
+describe('hydration integration — onHydrationMismatch telemetry hook', () => {
+  test('handler fires with full mismatch context on tag mismatch', async () => {
+    const { onHydrationMismatch } = await import('../hydration-debug')
+    const captured: Array<{ type: string; expected: unknown; actual: unknown; path: string; timestamp: number }> = []
+    const unsub = onHydrationMismatch((ctx) => {
+      captured.push({
+        type: ctx.type,
+        expected: ctx.expected,
+        actual: ctx.actual,
+        path: ctx.path,
+        timestamp: ctx.timestamp,
+      })
+    })
+
+    const el = container()
+    el.innerHTML = '<div>server content</div>'
+
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const cleanup = hydrateRoot(el, h('span', null, 'client content'))
+
+    expect(captured.length).toBeGreaterThan(0)
+    const tagMismatch = captured.find((c) => c.type === 'tag')
+    expect(tagMismatch).toBeDefined()
+    expect(tagMismatch?.expected).toBe('span')
+    expect(typeof tagMismatch?.path).toBe('string')
+    expect(typeof tagMismatch?.timestamp).toBe('number')
+
+    cleanup()
+    unsub()
+    warnSpy.mockRestore()
+  })
+
+  test('handler fires for tag mismatch in production-style silence (warn disabled)', () => {
+    const el = container()
+    el.innerHTML = '<div>server content</div>'
+
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    disableHydrationWarnings() // simulate production: warns silenced
+
+    return import('../hydration-debug').then(({ onHydrationMismatch }) => {
+      const captured: Array<{ type: string }> = []
+      const unsub = onHydrationMismatch((ctx) => {
+        captured.push({ type: ctx.type })
+      })
+
+      const cleanup = hydrateRoot(el, h('span', null, 'client content'))
+
+      // Telemetry hook fired even with warn disabled — independent.
+      expect(captured.length).toBeGreaterThan(0)
+      expect(captured.some((c) => c.type === 'tag')).toBe(true)
+      // console.warn was NOT called (production-style silence).
+      expect(warnSpy).not.toHaveBeenCalled()
+
+      cleanup()
+      unsub()
+      warnSpy.mockRestore()
+      enableHydrationWarnings()
+    })
+  })
+
+  test('multiple handlers all receive forwarded mismatches; unsub stops one cleanly', async () => {
+    const { onHydrationMismatch } = await import('../hydration-debug')
+    let count1 = 0
+    let count2 = 0
+    const unsub1 = onHydrationMismatch(() => count1++)
+    const unsub2 = onHydrationMismatch(() => count2++)
+
+    const el = container()
+    el.innerHTML = '<div>server</div>'
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    const cleanup = hydrateRoot(el, h('span', null, 'client'))
+
+    expect(count1).toBeGreaterThan(0)
+    expect(count1).toBe(count2)
+
+    // Unsubscribe one — only the other fires next time.
+    unsub1()
+    const before2 = count2
+    const el2 = container()
+    el2.innerHTML = '<p>foo</p>'
+    const cleanup2 = hydrateRoot(el2, h('article', null, 'bar'))
+
+    expect(count2).toBeGreaterThan(before2)
+
+    cleanup()
+    cleanup2()
+    unsub2()
+    warnSpy.mockRestore()
+  })
+
+  test('handler errors do not propagate into hydration', async () => {
+    const { onHydrationMismatch } = await import('../hydration-debug')
+    let goodHandlerFired = false
+    const unsubBad = onHydrationMismatch(() => {
+      throw new Error('telemetry SDK exploded')
+    })
+    const unsubGood = onHydrationMismatch(() => {
+      goodHandlerFired = true
+    })
+
+    const el = container()
+    el.innerHTML = '<div>server</div>'
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    disableHydrationWarnings()
+
+    // Hydration must complete without throwing despite bad handler.
+    const cleanup = hydrateRoot(el, h('span', null, 'client'))
+    expect(goodHandlerFired).toBe(true)
+    // Client content still rendered — recovery worked.
+    expect(el.textContent).toContain('client')
+
+    cleanup()
+    unsubBad()
+    unsubGood()
+    warnSpy.mockRestore()
+    enableHydrationWarnings()
+  })
+})
+
+// ─── _rp prop forwarding through SSR -> hydrate ─────────────────────────────
+
+describe('hydration integration — `_rp`-wrapped component props (regression)', () => {
+  // Pre-fix, hydrate.ts skipped `makeReactiveProps` on the way into a
+  // component, so `props.x` returned the raw `_rp` function instead of the
+  // resolved value. mount.ts already did the right thing, so the failure mode
+  // surfaced only on cold-start SSR/hydrate (the fundamentals NavItem layout
+  // shape — see e2e/fundamentals/playground.spec.ts). Lock in BOTH the SSR
+  // emit and the post-hydration value.
+  test('SSR emits resolved string from `_rp` prop, hydration preserves it', async () => {
+    const Link = (props: { to: string }) =>
+      h('a', { href: `#${props.to}`, id: 'lnk' }, () => props.to)
+
+    const html = await renderToString(
+      h(Link, { to: _rp(() => '/about') as unknown as string }),
+    )
+    expect(html).toBe('<a href="#/about" id="lnk">/about</a>')
+    expect(html).not.toContain('=>')
+
+    const el = container()
+    el.innerHTML = html
+    const cleanup = hydrateRoot(
+      el,
+      h(Link, { to: _rp(() => '/about') as unknown as string }),
+    )
+    const link = el.querySelector<HTMLAnchorElement>('#lnk')!
+    expect(link.getAttribute('href')).toBe('#/about')
+    expect(link.textContent).toBe('/about')
+    cleanup()
+  })
+})

package/src/tests/mount.test.ts

@@ -7,12 +7,14 @@ import {
   For,
   Fragment,
   h,
+  lazy,
   Match,
   onMount,
   onUnmount,
   onUpdate,
   Portal,
   Show,
+  Suspense as _Suspense,
   Switch,
 } from '@pyreon/core'
 import { cell, signal } from '@pyreon/reactivity'
@@ -36,6 +38,7 @@ const Transition = _Transition as unknown as ComponentFn<Record<string, unknown>
 const TransitionGroup = _TransitionGroup as unknown as ComponentFn<Record<string, unknown>>
 const ErrorBoundary = _ErrorBoundary as unknown as ComponentFn<Record<string, unknown>>
 const KeepAlive = _KeepAlive as unknown as ComponentFn<Record<string, unknown>>
+const Suspense = _Suspense as unknown as ComponentFn<Record<string, unknown>>
 
 function container(): HTMLElement {
   const el = document.createElement('div')
@@ -773,6 +776,94 @@ describe('ErrorBoundary', () => {
     ;(el.querySelector('#fix') as HTMLButtonElement).click()
     expect(el.querySelector('#signal-ok')?.textContent).toBe('fixed')
   })
+
+  // ── lazy() + Suspense + ErrorBoundary integration ──
+  //
+  // The `lazy(loader)` wrapper throws synchronously when its loader's
+  // promise rejects (`error()` returns truthy → `throw err`).
+  //
+  // Pyreon components run ONCE — reactivity comes from reading signals
+  // inside reactive scopes. `lazy()`'s wrapper reads its `error` /
+  // `loaded` signals inline, so the surrounding context must be a
+  // reactive scope for signal changes to trigger re-render.
+  //
+  // `Suspense` wraps its children in `h(Fragment, null, () => ...)` —
+  // an explicit reactive accessor that calls `__loading()`. THAT
+  // accessor's reactive scope is what tracks lazy's signals: when the
+  // loader rejects, the accessor re-runs, the lazy child re-mounts,
+  // the wrapper throws, mountComponent catches, dispatches to the
+  // nearest `<ErrorBoundary>` on the boundary stack.
+  //
+  // Without Suspense, lazy()'s post-mount errors don't surface (no
+  // reactive scope to drive re-render). This is consistent with the
+  // framework's component-runs-once contract — but worth pinning
+  // down with explicit tests.
+
+  test('lazy() loader rejection surfaces to ErrorBoundary via Suspense', async () => {
+    const el = container()
+    const Comp = lazy<Record<string, never>>(() =>
+      Promise.reject(new Error('module load failed')),
+    )
+
+    mount(
+      h(ErrorBoundary, {
+        fallback: (err: unknown) =>
+          h('p', { id: 'lazy-fb' }, `Caught: ${(err as Error).message}`),
+        children: h(
+          Suspense,
+          { fallback: h('p', { id: 'spinner' }, 'loading...') },
+          h(Comp, {}),
+        ),
+      }),
+      el,
+    )
+
+    // Initial render: lazy is still loading → Suspense shows spinner,
+    // boundary fallback NOT triggered yet.
+    expect(el.querySelector('#spinner')).not.toBeNull()
+    expect(el.querySelector('#lazy-fb')).toBeNull()
+
+    // Wait for promise rejection to flush.
+    await new Promise((r) => setTimeout(r, 0))
+    // Reactive flush.
+    await Promise.resolve()
+
+    // After load fails: Suspense's reactive accessor re-runs → child
+    // wrapper throws → caught by mountComponent → dispatched to
+    // ErrorBoundary → fallback rendered.
+    expect(el.querySelector('#lazy-fb')?.textContent).toContain('module load failed')
+    expect(el.querySelector('#spinner')).toBeNull()
+  })
+
+  test('lazy() resolves successfully renders content without firing fallback', async () => {
+    const el = container()
+    const Inner: ComponentFn<Record<string, never>> = () =>
+      h('p', { id: 'loaded' }, 'content')
+    const Comp = lazy<Record<string, never>>(() => Promise.resolve({ default: Inner }))
+
+    let fallbackInvocations = 0
+    mount(
+      h(ErrorBoundary, {
+        fallback: () => {
+          fallbackInvocations++
+          return h('p', { id: 'should-not-appear' }, 'error')
+        },
+        children: h(
+          Suspense,
+          { fallback: h('p', { id: 'spinner' }, 'loading...') },
+          h(Comp, {}),
+        ),
+      }),
+      el,
+    )
+
+    await new Promise((r) => setTimeout(r, 0))
+    await Promise.resolve()
+
+    expect(el.querySelector('#loaded')?.textContent).toBe('content')
+    expect(el.querySelector('#should-not-appear')).toBeNull()
+    expect(fallbackInvocations).toBe(0)
+  })
 })
 
 // ─── Transition component ─────────────────────────────────────────────────────
@@ -1520,7 +1611,7 @@ describe('mount — edge cases', () => {
 
   test('mounting array of children', () => {
     const el = container()
-    mount(h('div', null, ...[h('span', null, 'a'), h('span', null, 'b'), h('span', null, 'c')]), el)
+    mount(h('div', null, h('span', null, 'a'), h('span', null, 'b'), h('span', null, 'c')), el)
     expect(el.querySelectorAll('span').length).toBe(3)
   })
 

package/src/tests/native-markers.test.ts

@@ -0,0 +1,19 @@
+import { isNativeCompat } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import { KeepAlive } from '../keep-alive'
+import { Transition } from '../transition'
+import { TransitionGroup } from '../transition-group'
+
+// Marker-presence assertion (PR 3 lock-in). Bisect-verified: removing
+// `nativeCompat(...)` from any of these files fails the corresponding test.
+describe('native-compat markers — @pyreon/runtime-dom', () => {
+  it('Transition is marked native', () => {
+    expect(isNativeCompat(Transition)).toBe(true)
+  })
+  it('TransitionGroup is marked native', () => {
+    expect(isNativeCompat(TransitionGroup)).toBe(true)
+  })
+  it('KeepAlive is marked native', () => {
+    expect(isNativeCompat(KeepAlive)).toBe(true)
+  })
+})

package/src/tests/runtime-dom.browser.test.ts

@@ -149,6 +149,57 @@ describe('runtime-dom in real browser', () => {
     unmount()
   })
 
+  it('delegated event handler sees `currentTarget` as the bound element, not the listener root', async () => {
+    // Regression for a real Pyreon framework bug found via PR #329's form
+    // section. Pyreon's TargetedEvent<E> type promises `currentTarget` is
+    // the per-element type (e.g. HTMLInputElement), but native event
+    // delegation leaves `currentTarget` as the container (where the
+    // listener is registered). User code that writes
+    // `(ev.currentTarget as HTMLInputElement).value` would silently read
+    // from a <div> and get undefined.
+    //
+    // The fix is in delegate.ts: per-handler Object.defineProperty
+    // override of currentTarget, matching React/Vue/Solid behavior.
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'wrap' },
+        h('input', {
+          id: 'inp',
+          type: 'text',
+          'data-marker': 'real-input',
+          onInput: (ev: Event) => {
+            const ct = ev.currentTarget as HTMLInputElement | null
+            // Capture observable signals so the test can assert on them
+            ;(globalThis as { __test_ct_tag?: string | undefined }).__test_ct_tag = ct?.tagName
+            ;(globalThis as { __test_ct_value?: string | undefined }).__test_ct_value =
+              ct?.value
+            ;(globalThis as { __test_ct_marker?: string | null | undefined }).__test_ct_marker =
+              ct?.getAttribute('data-marker') ?? null
+          },
+        }),
+      ),
+    )
+
+    const inp = container.querySelector<HTMLInputElement>('#inp')!
+    inp.value = 'hello'
+    inp.dispatchEvent(new Event('input', { bubbles: true }))
+    await flush()
+
+    // Without the fix: tagName would be 'DIV' (or whatever container is),
+    // value would be undefined, marker would be null.
+    expect((globalThis as { __test_ct_tag?: string | undefined }).__test_ct_tag).toBe('INPUT')
+    expect((globalThis as { __test_ct_value?: string | undefined }).__test_ct_value).toBe('hello')
+    expect((globalThis as { __test_ct_marker?: string | null | undefined }).__test_ct_marker).toBe(
+      'real-input',
+    )
+
+    unmount()
+    delete (globalThis as { __test_ct_tag?: string | undefined }).__test_ct_tag
+    delete (globalThis as { __test_ct_value?: string | undefined }).__test_ct_value
+    delete (globalThis as { __test_ct_marker?: string | null | undefined }).__test_ct_marker
+  })
+
   it('dispatches a real PointerEvent and fires the onClick handler', async () => {
     const clicks = signal(0)
     const { container, unmount } = mountInBrowser(
@@ -177,12 +228,13 @@ describe('runtime-dom in real browser', () => {
     unmount()
   })
 
-  it('emits the duplicate-key __DEV__ warning under Vite (DEV=true)', async () => {
-    // import.meta.env.DEV is true in this dev-mode browser run, which is the
-    // exact replacement Vite/Rolldown apply at build-time. The warning must
-    // fire here. The companion `runtime-dom.prod-bundle.test.ts` Node test
-    // proves the same code path is dead in a prod bundle (DEV=false).
-    expect(import.meta.env.DEV).toBe(true)
+  it('emits the duplicate-key dev warning under non-production NODE_ENV', async () => {
+    // process.env.NODE_ENV !== 'production' in this dev browser run — the
+    // bundler-agnostic gate that every modern bundler auto-replaces at
+    // consumer build time. The warning must fire here. The companion
+    // `runtime-dom.prod-bundle.test.ts` Node test proves the same code path
+    // is dead in a prod bundle (NODE_ENV='production').
+    expect(process.env.NODE_ENV).not.toBe('production')
 
     const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
     const dupes = signal([