@pyreon/svelte-compat 0.17.0

package/src/tests/store-entry.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import * as storeEntry from '../store'
+
+/**
+ * `@pyreon/svelte-compat/store` is the `svelte/store` import surface —
+ * the vite plugin's `compat: 'svelte'` aliases `svelte/store` to it.
+ * It must re-export exactly the store API (no lifecycle/context) so the
+ * subpath mirrors Svelte's real `svelte/store` shape, and the
+ * re-exported functions must be the same identities as `../index`.
+ */
+describe('@pyreon/svelte-compat/store entry', () => {
+  it('exposes exactly the store API', () => {
+    expect(Object.keys(storeEntry).sort()).toEqual([
+      'derived',
+      'get',
+      'readable',
+      'readonly',
+      'writable',
+    ])
+  })
+
+  it('re-exported writable/derived/get round-trip through the subpath', () => {
+    const n = storeEntry.writable(2)
+    const doubled = storeEntry.derived(n, (v: number) => v * 2)
+    expect(storeEntry.get(doubled)).toBe(4)
+    n.set(5)
+    expect(storeEntry.get(doubled)).toBe(10)
+
+    const ro = storeEntry.readonly(n)
+    expect('set' in ro).toBe(false)
+    expect(storeEntry.get(ro)).toBe(5)
+
+    const r = storeEntry.readable(7)
+    expect(storeEntry.get(r)).toBe(7)
+  })
+})

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

@@ -0,0 +1,547 @@
+import type { ComponentFn } from '@pyreon/core'
+import { mount as pyreonMount } from '@pyreon/runtime-dom'
+import { describe, expect, it, vi } from 'vitest'
+import type { RenderContext } from '../jsx-runtime'
+import { beginRender, endRender, getCurrentCtx, jsx } from '../jsx-runtime'
+import {
+  afterUpdate,
+  beforeUpdate,
+  createEventDispatcher,
+  derived,
+  flushSync,
+  get,
+  getAllContexts,
+  getContext,
+  hasContext,
+  mount,
+  onDestroy,
+  onMount,
+  readable,
+  readonly,
+  setContext,
+  tick,
+  unmount,
+  writable,
+} from '../index'
+
+// ─── Test helpers ─────────────────────────────────────────────────────────────
+
+/** Runs `fn` inside a fresh RenderContext to exercise hook-index code paths. */
+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
+    },
+  }
+}
+
+function container(): HTMLElement {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+  return el
+}
+
+describe('@pyreon/svelte-compat — svelte/store', () => {
+  // ─── writable ──────────────────────────────────────────────────────────
+
+  it('writable calls subscriber synchronously with the initial value', () => {
+    const store = writable(1)
+    const seen: number[] = []
+    store.subscribe((v) => seen.push(v))
+    expect(seen).toEqual([1])
+  })
+
+  it('writable set notifies subscribers', () => {
+    const store = writable(0)
+    const seen: number[] = []
+    store.subscribe((v) => seen.push(v))
+    store.set(5)
+    expect(seen).toEqual([0, 5])
+  })
+
+  it('writable update applies the updater to the current value', () => {
+    const store = writable(10)
+    const seen: number[] = []
+    store.subscribe((v) => seen.push(v))
+    store.update((n) => n + 3)
+    expect(seen).toEqual([10, 13])
+  })
+
+  it('writable supports multiple independent subscribers', () => {
+    const store = writable('a')
+    const a: string[] = []
+    const b: string[] = []
+    store.subscribe((v) => a.push(v))
+    store.subscribe((v) => b.push(v))
+    store.set('b')
+    expect(a).toEqual(['a', 'b'])
+    expect(b).toEqual(['a', 'b'])
+  })
+
+  it('writable unsubscribe stops further notifications', () => {
+    const store = writable(0)
+    const seen: number[] = []
+    const unsub = store.subscribe((v) => seen.push(v))
+    store.set(1)
+    unsub()
+    store.set(2)
+    expect(seen).toEqual([0, 1])
+  })
+
+  it('writable invalidate fires before run on change', () => {
+    const store = writable(0)
+    const order: string[] = []
+    store.subscribe(
+      () => order.push('run'),
+      () => order.push('invalidate'),
+    )
+    store.set(1)
+    // Real Svelte semantics: the initial subscribe calls `run` only (no
+    // `invalidate`); each subsequent change is the two-phase
+    // `invalidate` → `run`. So: run(0), then invalidate(1), run(1).
+    expect(order).toEqual(['run', 'invalidate', 'run'])
+  })
+
+  it('writable runs start on first subscriber and stop on last', () => {
+    const start = vi.fn(() => stop)
+    const stop = vi.fn()
+    const store = writable<number>(0, start)
+    expect(start).not.toHaveBeenCalled()
+    const u1 = store.subscribe(() => {})
+    expect(start).toHaveBeenCalledTimes(1)
+    const u2 = store.subscribe(() => {})
+    expect(start).toHaveBeenCalledTimes(1) // not called again
+    u1()
+    expect(stop).not.toHaveBeenCalled() // still one subscriber
+    u2()
+    expect(stop).toHaveBeenCalledTimes(1)
+  })
+
+  it('writable start can push values via its set argument', () => {
+    const store = writable<number>(0, (set) => {
+      set(42)
+      return () => {}
+    })
+    expect(get(store)).toBe(42)
+  })
+
+  // ─── readable ──────────────────────────────────────────────────────────
+
+  it('readable exposes only subscribe', () => {
+    const store = readable(7)
+    expect(typeof store.subscribe).toBe('function')
+    expect((store as unknown as Record<string, unknown>).set).toBeUndefined()
+    expect(get(store)).toBe(7)
+  })
+
+  it('readable start notifier can drive values', () => {
+    const store = readable<number>(0, (set) => {
+      set(99)
+    })
+    expect(get(store)).toBe(99)
+  })
+
+  // ─── readonly ──────────────────────────────────────────────────────────
+
+  it('readonly returns a subscribe-only view of a writable', () => {
+    const w = writable(1)
+    const ro = readonly(w)
+    expect((ro as unknown as Record<string, unknown>).set).toBeUndefined()
+    const seen: number[] = []
+    ro.subscribe((v) => seen.push(v))
+    w.set(2)
+    expect(seen).toEqual([1, 2])
+  })
+
+  // ─── get ───────────────────────────────────────────────────────────────
+
+  it('get reads the current value without keeping a subscription', () => {
+    const store = writable(123)
+    expect(get(store)).toBe(123)
+    store.set(456)
+    expect(get(store)).toBe(456)
+  })
+
+  // ─── derived ───────────────────────────────────────────────────────────
+
+  it('derived (single store, sync) maps the source value', () => {
+    const n = writable(2)
+    const doubled = derived(n, (v: number) => v * 2)
+    const seen: number[] = []
+    doubled.subscribe((v) => seen.push(v))
+    expect(seen).toEqual([4])
+    n.set(5)
+    expect(seen).toEqual([4, 10])
+  })
+
+  it('derived (array of stores, sync) combines values', () => {
+    const a = writable(1)
+    const b = writable(2)
+    const sum = derived([a, b], ([x, y]: [number, number]) => x + y)
+    const seen: number[] = []
+    sum.subscribe((v) => seen.push(v))
+    expect(seen).toEqual([3])
+    a.set(10)
+    expect(seen).toEqual([3, 12])
+    b.set(20)
+    expect(seen).toEqual([3, 12, 30])
+  })
+
+  it('derived (async set form) shows the initial value then the async value', async () => {
+    const n = writable(1)
+    const async = derived(
+      n,
+      (v: number, set: (x: number) => void) => {
+        // Deferred set models a real async source (fetch/timer): the
+        // initial value is shown until the async result lands.
+        const id = setTimeout(() => set(v + 100), 0)
+        return () => clearTimeout(id)
+      },
+      0,
+    )
+    const seen: number[] = []
+    async.subscribe((v) => seen.push(v))
+    expect(seen).toEqual([0]) // initial value, async not yet resolved
+    await new Promise((r) => setTimeout(r, 10))
+    expect(seen).toEqual([0, 101])
+    n.set(2)
+    await new Promise((r) => setTimeout(r, 10))
+    expect(seen).toEqual([0, 101, 102])
+  })
+
+  it('derived (async form) runs the returned cleanup before the next run', () => {
+    const n = writable(1)
+    const cleanup = vi.fn()
+    const d = derived(
+      n,
+      (v: number, set: (x: number) => void) => {
+        set(v)
+        return cleanup
+      },
+      0,
+    )
+    const unsub = d.subscribe(() => {})
+    expect(cleanup).not.toHaveBeenCalled()
+    n.set(2) // re-runs sync → previous cleanup fires
+    expect(cleanup).toHaveBeenCalledTimes(1)
+    unsub() // last subscriber → start's stop runs final cleanup
+    expect(cleanup).toHaveBeenCalledTimes(2)
+  })
+})
+
+describe('@pyreon/svelte-compat — svelte lifecycle', () => {
+  it('onMount runs after the first render and its cleanup on unmount', async () => {
+    const mounted = vi.fn()
+    const cleaned = vi.fn()
+    const Comp: ComponentFn = () => {
+      onMount(() => {
+        mounted()
+        return cleaned
+      })
+      return jsx('div', { children: 'hi' })
+    }
+    const el = container()
+    const dispose = pyreonMount(jsx(Comp, {}), el)
+    await new Promise((r) => setTimeout(r, 30))
+    expect(mounted).toHaveBeenCalledTimes(1)
+    dispose()
+    expect(cleaned).toHaveBeenCalledTimes(1)
+  })
+
+  it('onMount is hook-index-stable across re-renders (no double registration)', () => {
+    const runner = createHookRunner()
+    const fn = vi.fn()
+    // First render: registers (pendingEffects gets the entry, hook slot set).
+    runner.run(() => onMount(fn))
+    expect(runner.ctx.pendingEffects).toHaveLength(1)
+    expect(runner.ctx.hooks).toHaveLength(1)
+    // Re-render: beginRender clears pendingEffects; the hook-index guard
+    // must NOT re-push (onMount runs exactly once, Svelte semantics).
+    runner.run(() => onMount(fn))
+    expect(runner.ctx.pendingEffects).toHaveLength(0)
+    expect(runner.ctx.hooks).toHaveLength(1)
+  })
+
+  it('onMount outside a component falls back to the Pyreon lifecycle', () => {
+    // No current ctx → exercises the pyreonOnMount branch (no throw).
+    expect(() => onMount(() => {})).not.toThrow()
+  })
+
+  it('onDestroy runs when the component unmounts', async () => {
+    const destroyed = vi.fn()
+    const Comp: ComponentFn = () => {
+      onDestroy(destroyed)
+      return jsx('div', { children: 'x' })
+    }
+    const el = container()
+    const dispose = pyreonMount(jsx(Comp, {}), el)
+    await new Promise((r) => setTimeout(r, 10))
+    dispose()
+    expect(destroyed).toHaveBeenCalledTimes(1)
+  })
+
+  it('onDestroy is hook-index-stable across re-renders', () => {
+    const runner = createHookRunner()
+    const fn = vi.fn()
+    runner.run(() => onDestroy(fn))
+    runner.run(() => onDestroy(fn))
+    expect(runner.ctx.unmountCallbacks).toHaveLength(1)
+  })
+
+  it('onDestroy outside a component does not throw', () => {
+    expect(() => onDestroy(() => {})).not.toThrow()
+  })
+
+  it('beforeUpdate runs once before the first render commits', () => {
+    const runner = createHookRunner()
+    const fn = vi.fn()
+    runner.run(() => beforeUpdate(fn))
+    runner.run(() => beforeUpdate(fn))
+    expect(fn).toHaveBeenCalledTimes(1)
+  })
+
+  it('beforeUpdate outside a component runs immediately', () => {
+    const fn = vi.fn()
+    beforeUpdate(fn)
+    expect(fn).toHaveBeenCalledTimes(1)
+  })
+
+  it('afterUpdate runs after the first render', async () => {
+    const fn = vi.fn()
+    const Comp: ComponentFn = () => {
+      afterUpdate(fn)
+      return jsx('div', { children: 'a' })
+    }
+    const el = container()
+    pyreonMount(jsx(Comp, {}), el)
+    await new Promise((r) => setTimeout(r, 30))
+    expect(fn).toHaveBeenCalledTimes(1)
+  })
+
+  it('tick resolves after the current microtask', async () => {
+    let flag = false
+    queueMicrotask(() => {
+      flag = true
+    })
+    await tick()
+    expect(flag).toBe(true)
+  })
+})
+
+describe('@pyreon/svelte-compat — svelte context', () => {
+  it('setContext/getContext propagate through the component tree', () => {
+    const KEY = Symbol('theme')
+    const Consumer: ComponentFn = () => {
+      const theme = getContext<string>(KEY)
+      return jsx('span', { 'data-theme': theme, children: theme })
+    }
+    const Provider: ComponentFn = () => {
+      setContext(KEY, 'dark')
+      return jsx(Consumer, {})
+    }
+    const el = container()
+    pyreonMount(jsx(Provider, { children: undefined }), el)
+    const span = el.querySelector('span')
+    expect(span?.getAttribute('data-theme')).toBe('dark')
+  })
+
+  it('hasContext reports whether a value was provided', () => {
+    const KEY = 'k'
+    let inside = false
+    let outside = true
+    const Consumer: ComponentFn = () => {
+      inside = hasContext(KEY)
+      return jsx('i', {})
+    }
+    const Provider: ComponentFn = () => {
+      setContext(KEY, 1)
+      return jsx(Consumer, {})
+    }
+    const Bare: ComponentFn = () => {
+      outside = hasContext('never-set')
+      return jsx('i', {})
+    }
+    const el = container()
+    pyreonMount(jsx(Provider, {}), el)
+    pyreonMount(jsx(Bare, {}), container())
+    expect(inside).toBe(true)
+    expect(outside).toBe(false)
+  })
+
+  it('getAllContexts returns a Map (best-effort)', () => {
+    expect(getAllContexts()).toBeInstanceOf(Map)
+  })
+
+  it('setContext returns the provided value', () => {
+    let returned: unknown
+    const Comp: ComponentFn = () => {
+      returned = setContext('x', 99)
+      return jsx('i', {})
+    }
+    pyreonMount(jsx(Comp, {}), container())
+    expect(returned).toBe(99)
+  })
+})
+
+describe('@pyreon/svelte-compat — createEventDispatcher', () => {
+  it('dispatches a CustomEvent to the on<Type> prop', async () => {
+    const handler = vi.fn()
+    const Child: ComponentFn = () => {
+      const dispatch = createEventDispatcher<{ ping: number }>()
+      onMount(() => {
+        dispatch('ping', 7)
+      })
+      return jsx('span', { children: 'child' })
+    }
+    const Parent: ComponentFn = () => jsx(Child, { onPing: handler })
+    const el = container()
+    pyreonMount(jsx(Parent, {}), el)
+    await new Promise((r) => setTimeout(r, 30))
+    expect(handler).toHaveBeenCalledTimes(1)
+    const evt = handler.mock.calls[0]![0] as CustomEvent
+    expect(evt.type).toBe('ping')
+    expect(evt.detail).toBe(7)
+  })
+
+  it('returns true when the event is not cancelled', () => {
+    let result: boolean | undefined
+    const Child: ComponentFn = () => {
+      const dispatch = createEventDispatcher<{ go: void }>()
+      result = dispatch('go')
+      return jsx('i', {})
+    }
+    pyreonMount(jsx(Child, {}), container())
+    expect(result).toBe(true)
+  })
+})
+
+describe('@pyreon/svelte-compat — mount/unmount/flushSync', () => {
+  it('mount renders a component into the target and unmount removes it', () => {
+    const App = () => jsx('div', { id: 'svelte-app', children: 'mounted' })
+    const target = container()
+    const mounted = mount(App, { target })
+    expect(target.querySelector('#svelte-app')?.textContent).toBe('mounted')
+    unmount(mounted as Record<symbol, unknown>)
+    expect(target.querySelector('#svelte-app')).toBeNull()
+  })
+
+  it('mount passes props through to the component', () => {
+    const App = (props: { label: string }) => jsx('div', { id: 'lbl', children: props.label })
+    const target = container()
+    mount(App, { target, props: { label: 'hello' } })
+    expect(target.querySelector('#lbl')?.textContent).toBe('hello')
+  })
+
+  it('unmount is a no-op on an object never mounted', () => {
+    expect(() => unmount({} as Record<symbol, unknown>)).not.toThrow()
+  })
+
+  it('flushSync invokes fn and returns its result', () => {
+    expect(flushSync(() => 42)).toBe(42)
+  })
+
+  it('flushSync with no fn returns undefined', () => {
+    expect(flushSync()).toBeUndefined()
+  })
+})
+
+describe('@pyreon/svelte-compat — jsx-runtime coverage', () => {
+  it('native components pass through without wrapping', async () => {
+    const { Show } = await import('../index')
+    const vnode = jsx(Show as ComponentFn, {
+      when: () => true,
+      children: jsx('span', { children: 'hi' }),
+    })
+    expect(vnode.type).toBe(Show)
+  })
+
+  it('jsx forwards a key prop', () => {
+    const vnode = jsx('div', { children: 'test' }, 'my-key')
+    expect(vnode.props.key).toBe('my-key')
+  })
+
+  it('jsx handles no children and array children', () => {
+    expect(jsx('div', { class: 'empty' })).toBeDefined()
+    const list = jsx('ul', {
+      children: [jsx('li', { children: 'a' }), jsx('li', { children: 'b' })],
+    })
+    expect(list).toBeDefined()
+  })
+
+  it('wrapCompatComponent caches the wrapper per component', () => {
+    const Comp: ComponentFn = () => jsx('div', { children: 'c' })
+    const v1 = jsx(Comp, {})
+    const v2 = jsx(Comp, {})
+    expect(v1.type).toBe(v2.type)
+  })
+
+  it('component re-renders on store change and patches the DOM', async () => {
+    const count = writable(0)
+    const Comp: ComponentFn = () => {
+      let v = 0
+      count.subscribe((n) => {
+        v = n
+      })
+      return jsx('span', { id: 'cnt', children: String(v) })
+    }
+    const el = container()
+    const dispose = pyreonMount(jsx(Comp, {}), el)
+    expect(el.querySelector('#cnt')?.textContent).toBe('0')
+    count.set(3)
+    await new Promise((r) => setTimeout(r, 30))
+    expect(el.querySelector('#cnt')?.textContent).toBe('3')
+    dispose()
+  })
+
+  it('scheduleRerender after unmount does not re-render', async () => {
+    const count = writable(0)
+    let renders = 0
+    const Comp: ComponentFn = () => {
+      renders++
+      count.subscribe(() => {})
+      return jsx('span', { children: 'x' })
+    }
+    const el = container()
+    const dispose = pyreonMount(jsx(Comp, {}), el)
+    await new Promise((r) => setTimeout(r, 10))
+    const before = renders
+    dispose()
+    count.set(1)
+    await new Promise((r) => setTimeout(r, 30))
+    expect(renders).toBe(before)
+  })
+
+  it('layout effects pushed during render run with cleanup', () => {
+    const log: string[] = []
+    let pushed = false
+    const Comp: ComponentFn = () => {
+      const ctx = getCurrentCtx()!
+      if (!pushed) {
+        pushed = true
+        ctx.pendingLayoutEffects.push({
+          fn: () => {
+            log.push('run')
+            return () => log.push('cleanup')
+          },
+          deps: undefined,
+          cleanup: undefined,
+        })
+      }
+      return jsx('div', { children: 'lf' })
+    }
+    pyreonMount(jsx(Comp, {}), container())
+    expect(log).toContain('run')
+  })
+})