@pyreon/svelte-compat 0.17.0

package/src/jsx-runtime.ts

@@ -0,0 +1,316 @@
+/**
+ * Compat JSX runtime for Svelte compatibility mode.
+ *
+ * When `jsxImportSource` is redirected to `@pyreon/svelte-compat` (via the vite
+ * plugin's `compat: "svelte"` option), OXC rewrites JSX to import from this file.
+ *
+ * For component VNodes, we wrap the component function so it returns a reactive
+ * accessor — enabling Svelte-store-driven re-renders on state change while Pyreon's
+ * existing renderer handles all DOM work.
+ *
+ * The component body runs inside `runUntracked` to prevent signal reads (from
+ * createSignal getters) from being tracked by the reactive accessor. Only the
+ * version signal triggers re-renders.
+ *
+ * ## Child instance preservation
+ *
+ * When a parent component re-renders, mountReactive does a full teardown+rebuild
+ * of the DOM tree. Without preservation, child components get brand new
+ * RenderContexts with empty hooks arrays — causing `onMount` and `onCleanup`
+ * to fire again, which can trigger infinite re-render loops.
+ *
+ * To fix this, we store child RenderContexts in the parent's hooks array (indexed
+ * by the parent's hook counter). When the child wrapper is called again after a
+ * parent re-render, it reuses the existing ctx (preserving hooks state), so
+ * hook-indexed guards like `if (idx >= ctx.hooks.length) return` work correctly
+ * and lifecycle hooks don't re-fire.
+ */
+
+import type { ComponentFn, Props, VNode, VNodeChild } from '@pyreon/core'
+import {
+  ErrorBoundary,
+  For,
+  Fragment,
+  h,
+  isNativeCompat,
+  Match,
+  onUnmount,
+  Show,
+  Suspense,
+  Switch,
+} from '@pyreon/core'
+import { runUntracked, signal } from '@pyreon/reactivity'
+
+export { Fragment }
+
+// ─── Render context (used by hooks) ──────────────────────────────────────────
+
+export interface RenderContext {
+  hooks: unknown[]
+  scheduleRerender: () => void
+  /** Effect entries pending execution after render */
+  pendingEffects: EffectEntry[]
+  /** Layout effect entries pending execution after render */
+  pendingLayoutEffects: EffectEntry[]
+  /** Set to true when the component is unmounted */
+  unmounted: boolean
+  /** Callbacks to run on unmount (lifecycle + effect cleanups) */
+  unmountCallbacks: (() => void)[]
+  /** Current component props — read by createEventDispatcher() */
+  props?: Record<string, unknown>
+}
+
+export interface EffectEntry {
+  fn: () => (() => void) | void
+  deps: unknown[] | undefined
+  cleanup: (() => void) | undefined
+}
+
+let _currentCtx: RenderContext | null = null
+let _hookIndex = 0
+
+export function getCurrentCtx(): RenderContext | null {
+  return _currentCtx
+}
+
+export function getHookIndex(): number {
+  return _hookIndex++
+}
+
+export function beginRender(ctx: RenderContext): void {
+  _currentCtx = ctx
+  _hookIndex = 0
+  ctx.pendingEffects = []
+  ctx.pendingLayoutEffects = []
+}
+
+export function endRender(): void {
+  _currentCtx = null
+  _hookIndex = 0
+}
+
+// ─── Effect runners ──────────────────────────────────────────────────────────
+
+function runLayoutEffects(entries: EffectEntry[]): void {
+  for (const entry of entries) {
+    if (entry.cleanup) entry.cleanup()
+    const cleanup = entry.fn()
+    entry.cleanup = typeof cleanup === 'function' ? cleanup : undefined
+  }
+}
+
+function scheduleEffects(ctx: RenderContext, entries: EffectEntry[]): void {
+  if (entries.length === 0) return
+  queueMicrotask(() => {
+    for (const entry of entries) {
+      if (ctx.unmounted) return
+      if (entry.cleanup) entry.cleanup()
+      const cleanup = entry.fn()
+      entry.cleanup = typeof cleanup === 'function' ? cleanup : undefined
+    }
+  })
+}
+
+// ─── Child instance preservation ─────────────────────────────────────────────
+
+/** Stored in the parent's hooks array to preserve child state across re-renders */
+interface ChildInstance {
+  ctx: RenderContext
+  version: ReturnType<typeof signal<number>>
+  updateScheduled: boolean
+}
+
+// Internal prop keys for passing parent context info to child wrappers
+const _CHILD_INSTANCE = Symbol.for('pyreon.childInstance')
+const noop = () => {
+  /* noop */
+}
+
+// ─── Component wrapping ──────────────────────────────────────────────────────
+
+const _wrapperCache = new WeakMap<Function, ComponentFn>()
+
+// Pyreon core components that must NOT be wrapped — they rely on internal reactivity
+const _nativeComponents: Set<Function> = new Set([
+  Show,
+  For,
+  Switch,
+  Match,
+  Suspense,
+  ErrorBoundary,
+])
+
+function wrapCompatComponent(solidComponent: Function): ComponentFn {
+  if (_nativeComponents.has(solidComponent)) return solidComponent as ComponentFn
+
+  let wrapped = _wrapperCache.get(solidComponent)
+  if (wrapped) return wrapped
+
+  // The wrapper returns a reactive accessor (() => VNodeChild) which Pyreon's
+  // mountChild treats as a reactive expression via mountReactive.
+  wrapped = ((props: Props) => {
+    // Check for a preserved child instance from the parent's hooks
+    const existing = (props as Record<symbol, unknown>)[_CHILD_INSTANCE] as
+      | ChildInstance
+      | undefined
+
+    const ctx: RenderContext = existing?.ctx ?? {
+      hooks: [],
+      scheduleRerender: () => {
+        // Will be replaced below after version signal is created
+      },
+      pendingEffects: [],
+      pendingLayoutEffects: [],
+      unmounted: false,
+      unmountCallbacks: [],
+    }
+
+    // When reusing an existing ctx after parent re-render, reset unmounted flag
+    // and clear stale unmount callbacks (they belong to the previous mount cycle)
+    if (existing) {
+      ctx.unmounted = false
+      ctx.unmountCallbacks = []
+    }
+
+    const version = existing?.version ?? signal(0)
+
+    // Use a shared updateScheduled flag (preserved across parent re-renders)
+    let updateScheduled = existing?.updateScheduled ?? false
+
+    ctx.scheduleRerender = () => {
+      if (ctx.unmounted || updateScheduled) return
+      updateScheduled = true
+      queueMicrotask(() => {
+        updateScheduled = false
+        if (!ctx.unmounted) version.set(version.peek() + 1)
+      })
+    }
+
+    // Register cleanup when component unmounts
+    onUnmount(() => {
+      ctx.unmounted = true
+      for (const cb of ctx.unmountCallbacks) cb()
+    })
+
+    // Strip the internal prop before passing to the component
+    const { [_CHILD_INSTANCE]: _stripped, ...cleanProps } = props as Record<
+      string | symbol,
+      unknown
+    >
+
+    // Expose props on the ctx so createEventDispatcher() can forward
+    // child events to the parent's on<Type> / on:<type> prop.
+    ctx.props = cleanProps as Record<string, unknown>
+
+    // Return reactive accessor — Pyreon's mountChild calls mountReactive
+    return () => {
+      version() // tracked read — triggers re-execution when state changes
+      beginRender(ctx)
+      // runUntracked prevents signal reads (from createSignal getters) from
+      // being tracked by this accessor — only the version signal should trigger re-renders
+      const result = runUntracked(() => (solidComponent as ComponentFn)(cleanProps as Props))
+      const layoutEffects = ctx.pendingLayoutEffects
+      const effects = ctx.pendingEffects
+      endRender()
+
+      runLayoutEffects(layoutEffects)
+      scheduleEffects(ctx, effects)
+
+      return result
+    }
+  }) as unknown as ComponentFn
+
+  // Forward __loading from lazy components so Pyreon's Suspense can detect them
+  if ('__loading' in solidComponent) {
+    ;(wrapped as unknown as Record<string, unknown>).__loading = (
+      solidComponent as unknown as Record<string, unknown>
+    ).__loading
+  }
+
+  _wrapperCache.set(solidComponent, wrapped)
+  return wrapped
+}
+
+// ─── Child instance lookup ───────────────────────────────────────────────────
+
+function createChildInstance(): ChildInstance {
+  return {
+    ctx: {
+      hooks: [],
+      scheduleRerender: noop,
+      pendingEffects: [],
+      pendingLayoutEffects: [],
+      unmounted: false,
+      unmountCallbacks: [],
+    },
+    version: signal(0),
+    updateScheduled: false,
+  }
+}
+
+/**
+ * During a parent component render, get or create the child instance at the
+ * current hook index. Returns undefined when called outside a component render.
+ */
+function resolveChildInstance(): ChildInstance | undefined {
+  const parentCtx = _currentCtx
+  if (!parentCtx) return undefined
+
+  const idx = _hookIndex++
+  if (idx < parentCtx.hooks.length) {
+    return parentCtx.hooks[idx] as ChildInstance
+  }
+  const instance = createChildInstance()
+  parentCtx.hooks[idx] = instance
+  return instance
+}
+
+// ─── JSX functions ───────────────────────────────────────────────────────────
+
+export function jsx(
+  type: string | ComponentFn | symbol,
+  props: Props & { children?: VNodeChild | VNodeChild[] },
+  key?: string | number | null,
+): VNode {
+  const { children, ...rest } = props
+  const propsWithKey = (key != null ? { ...rest, key } : rest) as Props
+
+  if (typeof type === 'function') {
+    // Defense-in-depth: hardcoded set of Pyreon core control-flow primitives
+    // that are always native (kept even after the marker convergence — these
+    // are imported into solid-compat directly, so guarding their identity
+    // doesn't cost a property lookup and ensures the marker is never lost
+    // through any tree-shaking edge case).
+    if (_nativeComponents.has(type)) {
+      const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey
+      return h(type as ComponentFn, componentProps)
+    }
+
+    // Native Pyreon framework components (context Providers, RouterView, etc.)
+    // skip compat wrapping — see `@pyreon/core`'s `nativeCompat()` for the
+    // full contract.
+    if (isNativeCompat(type)) {
+      const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey
+      return h(type as ComponentFn, componentProps)
+    }
+
+    const wrapped = wrapCompatComponent(type)
+    const componentProps =
+      children !== undefined ? { ...propsWithKey, children } : { ...propsWithKey }
+
+    const childInstance = resolveChildInstance()
+    if (childInstance) {
+      ;(componentProps as Record<symbol, unknown>)[_CHILD_INSTANCE] = childInstance
+    }
+
+    return h(wrapped, componentProps)
+  }
+
+  // DOM element or symbol (Fragment): children go in vnode.children
+  const childArray = children === undefined ? [] : Array.isArray(children) ? children : [children]
+
+  return h(type, propsWithKey, ...(childArray as VNodeChild[]))
+}
+
+export const jsxs = jsx
+export const jsxDEV = jsx

package/src/store.ts

@@ -0,0 +1,26 @@
+/**
+ * `@pyreon/svelte-compat/store` — the `svelte/store` import surface.
+ *
+ * Svelte code does `import { writable } from 'svelte/store'`; the vite
+ * plugin's `compat: 'svelte'` aliases that specifier to this entry.
+ * Re-exports only the store API (not lifecycle/context) so the subpath
+ * mirrors Svelte's real `svelte/store` shape; the everything-entry is
+ * `@pyreon/svelte-compat` (`./index`).
+ */
+
+export {
+  derived,
+  get,
+  readable,
+  readonly,
+  writable,
+} from './index'
+export type {
+  Invalidator,
+  Readable,
+  StartStopNotifier,
+  Subscriber,
+  Unsubscriber,
+  Updater,
+  Writable,
+} from './index'

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

@@ -0,0 +1,67 @@
+import { h } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import { mountInBrowser } from '@pyreon/test-utils/browser'
+import { derived, get, readable, writable } from './index'
+
+/**
+ * Real-browser smoke test for `@pyreon/svelte-compat`.
+ *
+ * Per the test-environment-parity rule (`pyreon/require-browser-smoke-test`),
+ * every browser-categorized package must ship at least one
+ * `*.browser.test.*` file. This catches regressions that happy-dom unit
+ * tests can hide: importing the public API and exercising the Svelte
+ * store contract end-to-end in real Chromium, including a store-driven
+ * DOM mount.
+ */
+describe('@pyreon/svelte-compat — browser smoke', () => {
+  it('writable round-trips set/update + subscribe', () => {
+    const count = writable(0)
+    const seen: number[] = []
+    const unsub = count.subscribe((v) => seen.push(v))
+    count.set(7)
+    count.update((n) => n + 1)
+    unsub()
+    count.set(99) // ignored — unsubscribed
+    expect(seen).toEqual([0, 7, 8])
+    expect(get(count)).toBe(99)
+  })
+
+  it('derived recomputes from source stores', () => {
+    const a = writable(2)
+    const b = writable(3)
+    const sum = derived([a, b], ([x, y]: [number, number]) => x + y)
+    expect(get(sum)).toBe(5)
+    a.set(10)
+    expect(get(sum)).toBe(13)
+  })
+
+  it('readable start/stop notifier fires on 0→1 / 1→0', () => {
+    let started = 0
+    let stopped = 0
+    const store = readable(1, () => {
+      started++
+      return () => {
+        stopped++
+      }
+    })
+    const u1 = store.subscribe(() => {})
+    const u2 = store.subscribe(() => {})
+    expect(started).toBe(1) // only on 0→1
+    u1()
+    expect(stopped).toBe(0) // still 1 subscriber
+    u2()
+    expect(stopped).toBe(1) // 1→0
+  })
+
+  it('mounts a store-driven element in real browser + cleans up', () => {
+    const label = writable('svelte-compat')
+    let current = ''
+    label.subscribe((v) => (current = v))
+    const vnode = h('div', { id: 'svelte-compat' }, current)
+    const { container, unmount } = mountInBrowser(vnode)
+    const el = container.querySelector('#svelte-compat')!
+    expect(el.textContent).toBe('svelte-compat')
+    unmount()
+    expect(document.getElementById('svelte-compat')).toBeNull()
+  })
+})

package/src/tests/child-instance-leak-repro.test.ts

@@ -0,0 +1,123 @@
+/**
+ * REPRODUCTION + REGRESSION — `writable.subscribe()` from a child
+ * component's body, combined with the parent-re-render
+ * ChildInstance-preservation in `jsx-runtime.ts:170-173`, leaked one
+ * store subscriber per parent re-render cycle.
+ *
+ * Pre-fix flow:
+ * 1. First render: `subscribe(handler)` pushes its unsub into
+ *    `ctx.unmountCallbacks` and caches `{unsub}` at `ctx.hooks[idx]`.
+ * 2. Parent re-renders → wrapper sees the cached ChildInstance →
+ *    `ctx.unmountCallbacks = []` RESETS the array (the wrapper's
+ *    cycle-N callbacks are stale and need to be dropped before
+ *    cycle-N+1 begins).
+ * 3. Child re-runs → `subscribe(handler)` hits the cached fast path
+ *    `if (cached) { run(v); return cached.unsub }` → **does NOT
+ *    re-push the cached unsub** into the new (empty) unmountCallbacks.
+ * 4. Component eventually unmounts → unmountCallbacks loop runs over
+ *    an array missing the original unsub → the store's internal
+ *    `subs.Set` keeps the subscriber forever.
+ *
+ * Class D event-listener pile-up shape (the subscriber set IS the
+ * listener set). Linear growth per parent re-render cycle.
+ */
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import type { RenderContext } from '../jsx-runtime'
+import { beginRender, endRender } from '../jsx-runtime'
+import { writable } from '../index'
+
+describe('svelte-compat — writable.subscribe survives ChildInstance preservation', () => {
+  let ctx: RenderContext
+
+  beforeEach(() => {
+    ctx = {
+      hooks: [],
+      scheduleRerender: () => {},
+      pendingEffects: [],
+      pendingLayoutEffects: [],
+      unmounted: false,
+      unmountCallbacks: [],
+    }
+  })
+  afterEach(() => {
+    // Make sure no test leaves a render in progress that could leak
+    // into the next test's ctx.
+    try {
+      endRender()
+    } catch {
+      // already ended
+    }
+  })
+
+  it('REGRESSION: cached subscribe re-attaches its unsub after unmountCallbacks reset', () => {
+    const store = writable(0)
+    // Reach into the store's internal subscriber set via a probe
+    // subscriber that we can count after teardown.
+    const observed: number[] = []
+
+    // First render — calls subscribe(handler) once, registers in
+    // unmountCallbacks.
+    beginRender(ctx)
+    store.subscribe((v) => observed.push(v))
+    endRender()
+    expect(ctx.unmountCallbacks.length).toBe(1)
+
+    // Parent re-render — wrapper resets unmountCallbacks to []
+    // (mirroring jsx-runtime.ts:172). The cached hook at index 0
+    // still has the unsub.
+    ctx.unmountCallbacks = []
+
+    // Child re-runs subscribe(handler) — hits the cached path.
+    beginRender(ctx)
+    store.subscribe((v) => observed.push(v))
+    endRender()
+
+    // The critical assertion: the cached unsub MUST be back in
+    // unmountCallbacks after the cached fast path fires. Pre-fix the
+    // array stays empty.
+    expect(ctx.unmountCallbacks.length).toBe(1)
+
+    // Simulate unmount — the unmountCallbacks loop runs.
+    for (const cb of ctx.unmountCallbacks) cb()
+
+    // Post-unmount, the store should have no remaining subscribers.
+    // Write to the store — if the subscription survived the unmount,
+    // observed.length would increment.
+    const beforeCount = observed.length
+    store.set(42)
+    expect(observed.length).toBe(beforeCount)
+  })
+
+  it('REGRESSION: 10 parent re-render cycles do NOT accumulate subscribers', () => {
+    const store = writable(0)
+    const observed: number[] = []
+
+    // First render registers the subscription.
+    beginRender(ctx)
+    store.subscribe((v) => observed.push(v))
+    endRender()
+
+    // 10 parent re-render cycles. Each one resets unmountCallbacks
+    // then runs the child's subscribe call again (cached path).
+    for (let i = 0; i < 10; i++) {
+      ctx.unmountCallbacks = []
+      beginRender(ctx)
+      store.subscribe((v) => observed.push(v))
+      endRender()
+    }
+
+    // After 10 cycles the unmountCallbacks array should still have
+    // exactly ONE entry (the same unsub from the first registration).
+    // Pre-fix it has 0 (every cycle reset, none re-pushed) so the
+    // unmount cleanup never fires.
+    expect(ctx.unmountCallbacks.length).toBe(1)
+
+    // Unmount cleans up.
+    for (const cb of ctx.unmountCallbacks) cb()
+
+    const beforeCount = observed.length
+    store.set(99)
+    // Post-unmount the subscriber must be gone — no further writes.
+    expect(observed.length).toBe(beforeCount)
+  })
+})

package/src/tests/lifecycle-cleanup-leak-repro.test.ts

@@ -0,0 +1,81 @@
+/**
+ * REPRODUCTION + REGRESSION — `onMount`-returned cleanup + `onDestroy`
+ * callbacks survive ChildInstance preservation across a parent re-render.
+ *
+ * The lifecycle sibling of the #739 `writable.subscribe` re-push bug:
+ *
+ * 1. First render: `onMount`/`onDestroy` push their cleanup into
+ *    `ctx.unmountCallbacks` AND store it at `ctx.hooks[idx]` (hook-indexed,
+ *    once).
+ * 2. Parent re-render preserves the ChildInstance and the wrapper resets
+ *    `ctx.unmountCallbacks = []` (jsx-runtime.ts:172) to drop stale callbacks.
+ * 3. Child re-runs `onMount`/`onDestroy` → the `idx < hooks.length` (cached)
+ *    path. Pre-fix this path did NOTHING, so the cleanup was never re-pushed.
+ * 4. Final unmount runs the (now-empty) `unmountCallbacks` → the `onMount`
+ *    cleanup never runs and `onDestroy` never fires — a leaked resource per
+ *    surviving child instance.
+ *
+ * The fix re-pushes the stored cleanup on the cached path (the same shape as
+ * the store-path #739 fix). This test drives a manual render context through
+ * first-render → reset → re-render and asserts the callbacks are restored and
+ * actually fire on unmount. Bisect: revert the `else`-branch re-push in
+ * index.ts onMount/onDestroy → the post-reset assertions fail.
+ */
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import type { RenderContext } from '../jsx-runtime'
+import { beginRender, endRender } from '../jsx-runtime'
+import { onDestroy, onMount } from '../index'
+
+describe('svelte-compat — onMount/onDestroy cleanup survives ChildInstance preservation', () => {
+  let ctx: RenderContext
+  beforeEach(() => {
+    ctx = {
+      hooks: [],
+      scheduleRerender: () => {},
+      pendingEffects: [],
+      pendingLayoutEffects: [],
+      unmounted: false,
+      unmountCallbacks: [],
+    }
+  })
+  afterEach(() => {
+    try {
+      endRender()
+    } catch {
+      // already ended
+    }
+  })
+
+  it('REGRESSION: onMount-cleanup + onDestroy re-attach after unmountCallbacks reset', () => {
+    let destroyRan = false
+
+    // First render — registers onMount cleanup (idx 0) + onDestroy (idx 1).
+    beginRender(ctx)
+    onMount(() => () => {})
+    onDestroy(() => {
+      destroyRan = true
+    })
+    endRender()
+    expect(ctx.unmountCallbacks.length).toBe(2)
+
+    // Parent re-render — wrapper resets unmountCallbacks to [] (jsx-runtime.ts:172).
+    // The cached hooks at idx 0/1 still hold the cleanup callbacks.
+    ctx.unmountCallbacks = []
+
+    // Child re-runs the lifecycle hooks — hits the cached (idx < length) path.
+    beginRender(ctx)
+    onMount(() => () => {})
+    onDestroy(() => {
+      destroyRan = true
+    })
+    endRender()
+
+    // Critical assertion: both cleanups MUST be back in unmountCallbacks after
+    // the cached path. Pre-fix the array stays empty (cleanups orphaned).
+    expect(ctx.unmountCallbacks.length).toBe(2)
+
+    // Simulate final unmount — the loop runs; onDestroy must fire.
+    for (const cb of ctx.unmountCallbacks) cb()
+    expect(destroyRan).toBe(true)
+  })
+})

package/src/tests/native-marker-bypass.test.tsx

@@ -0,0 +1,72 @@
+import type { ComponentFn } from '@pyreon/core'
+import { createContext, h, nativeCompat, provide, useContext } from '@pyreon/core'
+import { mount } from '@pyreon/runtime-dom'
+import { describe, expect, it } from 'vitest'
+import { jsx } from '../jsx-runtime'
+
+// Per-compat unit-level regression test for the marker-bypass contract.
+// See `react-compat/src/tests/native-marker-bypass.test.tsx` for the full
+// rationale + bisect-verification notes.
+//
+// svelte-compat note: the jsx-runtime is the framework-agnostic compat
+// wrapper (shared verbatim with solid-compat). jsx() has TWO native-
+// routing paths in sequence — first the hardcoded `_nativeComponents`
+// Set as defense-in-depth (Show, For, Switch, Match, Suspense,
+// ErrorBoundary), then the marker check. These tests use USER-defined
+// Native/Provider/Consumer (NOT in the hardcoded set), so the bypass
+// MUST come from the marker path (`isNativeCompat(type)`), proving the
+// marker check fires correctly.
+//
+// Bisect-verified per file: removing the `if (isNativeCompat(type))`
+// branch from svelte-compat's jsx-runtime (while keeping the
+// `_nativeComponents` set check) causes test #1 to fail with
+// `expected [Function wrapped] to be [Function Native]`.
+
+function container(): HTMLElement {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+  return el
+}
+
+describe('svelte-compat — nativeCompat() marker bypass', () => {
+  it('jsx() routes marked components through h() directly (no wrapper)', () => {
+    const Native = (props: { children?: unknown }) => h('div', null, props.children as never)
+    nativeCompat(Native)
+
+    const vnode = jsx(Native, {})
+
+    expect(vnode.type).toBe(Native)
+  })
+
+  it('jsx() wraps UNMARKED components (control — bypass is selective)', () => {
+    const Unmarked = (props: { children?: unknown }) => h('div', null, props.children as never)
+
+    const vnode = jsx(Unmarked, {})
+
+    expect(vnode.type).not.toBe(Unmarked)
+    expect(typeof vnode.type).toBe('function')
+  })
+
+  it('marked Provider mounts inside Pyreon setup frame — provide() reaches descendants', () => {
+    const Ctx = createContext<string>('default')
+
+    const Provider: ComponentFn = (props) => {
+      provide(Ctx, props.value as string)
+      return props.children as never
+    }
+    nativeCompat(Provider)
+
+    const Consumer: ComponentFn = () => {
+      const value = useContext(Ctx)
+      return h('span', { 'data-value': value }, value)
+    }
+    nativeCompat(Consumer)
+
+    const el = container()
+    mount(jsx(Provider, { value: 'native', children: jsx(Consumer, {}) }), el)
+
+    const span = el.querySelector('span')
+    expect(span?.getAttribute('data-value')).toBe('native')
+    expect(span?.textContent).toBe('native')
+  })
+})

package/src/tests/setup.ts

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