@pyreon/react-compat 0.13.1 → 0.15.0

package/src/jsx-runtime.ts

@@ -11,7 +11,7 @@
  */
 
 import type { ComponentFn, Props, VNode, VNodeChild } from '@pyreon/core'
-import { Fragment, h } from '@pyreon/core'
+import { Fragment, h, isNativeCompat, onUnmount } from '@pyreon/core'
 import { signal } from '@pyreon/reactivity'
 
 export { Fragment }
@@ -21,12 +21,16 @@ export { Fragment }
 export interface RenderContext {
   hooks: unknown[]
   scheduleRerender: () => void
+  /** Insertion effect entries pending execution before layout effects */
+  pendingInsertionEffects: EffectEntry[]
   /** 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
+  /** Hook count from the previous render (dev-mode ordering guard) */
+  _hookCount?: number
 }
 
 export interface EffectEntry {
@@ -37,6 +41,7 @@ export interface EffectEntry {
 
 let _currentCtx: RenderContext | null = null
 let _hookIndex = 0
+let _expectedHookCount = -1
 
 export function getCurrentCtx(): RenderContext | null {
   return _currentCtx
@@ -49,11 +54,33 @@ export function getHookIndex(): number {
 export function beginRender(ctx: RenderContext): void {
   _currentCtx = ctx
   _hookIndex = 0
+  ctx.pendingInsertionEffects = []
   ctx.pendingEffects = []
   ctx.pendingLayoutEffects = []
+
+  // On re-renders, remember the hook count from last render
+  if (ctx._hookCount !== undefined) {
+    _expectedHookCount = ctx._hookCount
+  } else {
+    _expectedHookCount = -1
+  }
 }
 
 export function endRender(): void {
+  if (_currentCtx) {
+    // Dev-mode: check hook count matches expected
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      _expectedHookCount !== -1 &&
+      _hookIndex !== _expectedHookCount
+    ) {
+      console.error(
+        `[Pyreon] Hook count changed between renders (expected ${_expectedHookCount}, got ${_hookIndex}). ` +
+          `This usually means a hook is called conditionally. Hooks must be called in the same order every render.`,
+      )
+    }
+    _currentCtx._hookCount = _hookIndex
+  }
   _currentCtx = null
   _hookIndex = 0
 }
@@ -96,6 +123,7 @@ function wrapCompatComponent(reactComponent: Function): ComponentFn {
       scheduleRerender: () => {
         // Will be replaced below after version signal is created
       },
+      pendingInsertionEffects: [],
       pendingEffects: [],
       pendingLayoutEffects: [],
       unmounted: false,
@@ -113,15 +141,37 @@ function wrapCompatComponent(reactComponent: Function): ComponentFn {
       })
     }
 
+    // Register cleanup for all hooks on unmount
+    onUnmount(() => {
+      ctx.unmounted = true
+      for (const hook of ctx.hooks) {
+        if (hook && typeof hook === 'object' && 'cleanup' in hook) {
+          const entry = hook as EffectEntry
+          if (typeof entry.cleanup === 'function') entry.cleanup()
+        }
+        if (hook && typeof hook === 'object' && 'unsubscribe' in hook) {
+          const sub = hook as { unsubscribe?: () => void }
+          if (typeof sub.unsubscribe === 'function') sub.unsubscribe()
+        }
+        if (hook && typeof hook === 'object' && '_contextUnsub' in hook) {
+          const ctxHook = hook as { _contextUnsub?: () => void }
+          if (typeof ctxHook._contextUnsub === 'function') ctxHook._contextUnsub()
+        }
+      }
+    })
+
     // Return reactive accessor — Pyreon's mountChild calls mountReactive
     return () => {
       version() // tracked read — triggers re-execution when state changes
       beginRender(ctx)
       const result = (reactComponent as ComponentFn)(props)
+      const insertionEffects = ctx.pendingInsertionEffects
       const layoutEffects = ctx.pendingLayoutEffects
       const effects = ctx.pendingEffects
       endRender()
 
+      // Run in React's order: insertion → layout → passive
+      runLayoutEffects(insertionEffects)
       runLayoutEffects(layoutEffects)
       scheduleEffects(ctx, effects)
 
@@ -144,9 +194,17 @@ export function jsx(
   const propsWithKey = (key != null ? { ...rest, key } : rest) as Props
 
   if (typeof type === 'function') {
+    const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey
+    // Native Pyreon components (context Provider, RouterView, QueryClientProvider,
+    // etc.) skip compat wrapping — they manage their own reactivity via signals
+    // and Pyreon's lifecycle, and wrapping them would run their setup body inside
+    // the compat layer's render context instead of Pyreon's, breaking `provide()`,
+    // `onMount()`, and `onUnmount()`.
+    if (isNativeCompat(type)) {
+      return h(type as ComponentFn, componentProps)
+    }
     // Wrap React-style component for re-render support
     const wrapped = wrapCompatComponent(type)
-    const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey
     return h(wrapped, componentProps)
   }
 
@@ -163,6 +221,39 @@ export function jsx(
       propsWithKey.for = propsWithKey.htmlFor
       delete propsWithKey.htmlFor
     }
+
+    // React's onChange fires on every keystroke for form elements (like onInput)
+    if (
+      (type === 'input' || type === 'textarea' || type === 'select') &&
+      propsWithKey.onChange !== undefined
+    ) {
+      if (propsWithKey.onInput === undefined) {
+        propsWithKey.onInput = propsWithKey.onChange
+      }
+      delete propsWithKey.onChange
+    }
+
+    // autoFocus → autofocus
+    if (propsWithKey.autoFocus !== undefined) {
+      propsWithKey.autofocus = propsWithKey.autoFocus
+      delete propsWithKey.autoFocus
+    }
+
+    // defaultValue / defaultChecked → value / checked when no controlled value
+    if (type === 'input' || type === 'textarea') {
+      if (propsWithKey.defaultValue !== undefined && propsWithKey.value === undefined) {
+        propsWithKey.value = propsWithKey.defaultValue
+        delete propsWithKey.defaultValue
+      }
+      if (propsWithKey.defaultChecked !== undefined && propsWithKey.checked === undefined) {
+        propsWithKey.checked = propsWithKey.defaultChecked
+        delete propsWithKey.defaultChecked
+      }
+    }
+
+    // Strip React-only props that have no DOM equivalent
+    delete propsWithKey.suppressHydrationWarning
+    delete propsWithKey.suppressContentEditableWarning
   }
 
   return h(type, propsWithKey, ...(childArray as VNodeChild[]))

package/src/react-compat-rerender.browser.test.tsx

@@ -0,0 +1,59 @@
+import type { VNodeChild } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
+import { jsx } from './jsx-runtime'
+import { useState } from './index'
+
+/**
+ * Real-browser regression test for the react-compat re-render path.
+ *
+ * The compat wrapper schedules re-renders via `scheduleRerender` →
+ * `queueMicrotask` → `version.set(...)`. Pyreon's `mountReactive`
+ * detects the version change and re-runs the accessor, which re-runs
+ * the user component and produces a new VNode tree. mountReactive
+ * tears down the old subtree and mounts the new one.
+ *
+ * **Important**: react-compat does FULL DOM REPLACEMENT on every
+ * re-render — there is no VDOM diffing in the compat layer (Pyreon's
+ * native pattern is fine-grained reactivity, not whole-component
+ * re-renders). Tests that capture a DOM reference BEFORE click and
+ * then assert on it AFTER click will see stale content because the
+ * captured reference points to a now-detached node. **Always re-query
+ * the DOM after a state change**.
+ *
+ * Phase A2's smoke for react-compat held a stale reference and
+ * appeared to show the wrapper was broken; this test characterises
+ * the correct behavior + the re-query gotcha so future authors don't
+ * trip on the same edge.
+ */
+describe('@pyreon/react-compat — real-browser re-render', () => {
+  it('clicking a button increments useState count and DOM reflects', async () => {
+    function Counter(): VNodeChild {
+      const [count, setCount] = useState(0)
+      return jsx('button', {
+        id: 'rc-counter',
+        onClick: () => setCount((n: number) => n + 1),
+        children: `count: ${count}`,
+      })
+    }
+
+    const { container, unmount } = mountInBrowser(jsx(Counter, {}))
+    // Read 1: initial mount
+    expect(container.querySelector('#rc-counter')!.textContent).toBe('count: 0')
+
+    // Click the CURRENT button — re-query after each interaction because
+    // react-compat replaces the DOM subtree on re-render (see file-level
+    // doc comment).
+    container.querySelector<HTMLButtonElement>('#rc-counter')!.click()
+    await flush()
+    await flush()
+    expect(container.querySelector('#rc-counter')!.textContent).toBe('count: 1')
+
+    container.querySelector<HTMLButtonElement>('#rc-counter')!.click()
+    await flush()
+    await flush()
+    expect(container.querySelector('#rc-counter')!.textContent).toBe('count: 2')
+
+    unmount()
+  })
+})

package/src/react-compat.browser.test.tsx

@@ -0,0 +1,34 @@
+import type { VNodeChild } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import { mountInBrowser } from '@pyreon/test-utils/browser'
+import { jsx } from './jsx-runtime'
+import { useState } from './index'
+
+/**
+ * Real-browser smoke test for `@pyreon/react-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 / hook-runner unit tests
+ * can hide: importing the public API, mounting through the JSX runtime
+ * wrapper, and exercising the React-style hook entry point in a real
+ * browser DOM (not a Node DOM polyfill).
+ *
+ * Companion unit tests in `src/tests/*.test.ts` test the hook semantics
+ * via `withHookCtx` runners. This smoke proves the integration: the
+ * package can be imported and mounted end-to-end in real Chromium.
+ */
+describe('@pyreon/react-compat — browser smoke', () => {
+  it('renders a component using useState in real browser', () => {
+    function Greeting(): VNodeChild {
+      const [name] = useState('Pyreon')
+      return jsx('div', { id: 'greeting', children: `hello, ${name}` })
+    }
+
+    const { container, unmount } = mountInBrowser(jsx(Greeting, {}))
+    const greeting = container.querySelector('#greeting')!
+    expect(greeting.textContent).toBe('hello, Pyreon')
+    unmount()
+    expect(document.getElementById('greeting')).toBeNull()
+  })
+})

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

@@ -25,6 +25,7 @@ function createHookRunner() {
   const ctx: RenderContext = {
     hooks: [],
     scheduleRerender: () => {},
+    pendingInsertionEffects: [],
     pendingEffects: [],
     pendingLayoutEffects: [],
     unmounted: false,

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

@@ -0,0 +1,88 @@
+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.
+//
+// PR #422 wired `isNativeCompat(type)` into react-compat's `jsx()` runtime.
+// PR #425 added `nativeCompat()` calls to 24 framework components. This file
+// proves the bypass actually works at the unit-test layer:
+//
+//   1. **Bypass identity** (load-bearing): `jsx(NativeProvider, {})` returns
+//      vnode with `type === NativeProvider` (not the wrapper), proving the
+//      marker check fires.
+//   2. **Wrap-when-unmarked** (load-bearing): UNMARKED components still go
+//      through `wrapCompatComponent` — proves the bypass is selective, not
+//      blanket.
+//   3. **Mount + provide() smoke** (sanity, not bisect-load-bearing): the
+//      marked Provider mounts cleanly through compat-mode jsx() and its
+//      `provide()` reaches the descendant Consumer. Note: synchronous mount
+//      preserves provide() context even WITH the wrapper (provide() pushes
+//      onto the global context stack regardless), so removing the marker
+//      from a Provider in this test won't fail — the actual bug post-mark
+//      removal is multi-render-cycle (signal change re-fires the wrapper's
+//      accessor → provide() in re-run lands in stale stack). PR #427's e2e
+//      gate covers that shape end-to-end against real router state.
+//
+// Bisect-verified: removing the `if (isNativeCompat(type))` branch from
+// jsx-runtime.ts 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('react-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, {})
+
+    // Bypass: vnode.type IS the source fn, not a cached wrapper.
+    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)
+    // No nativeCompat() call.
+
+    const vnode = jsx(Unmarked, {})
+
+    // Wrapper: vnode.type is the cached wrapper, NOT the source fn.
+    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')
+    // Pre-PR-3, the Provider's body would run in the compat wrapper's
+    // runUntracked accessor and `provide()` would land in a torn-down
+    // context stack. Consumer would read 'default'. Post-PR-3, the marker
+    // routes Provider through h() directly, the body runs inside Pyreon's
+    // setup frame, provide() reaches descendants. Consumer reads 'native'.
+    expect(span?.getAttribute('data-value')).toBe('native')
+    expect(span?.textContent).toBe('native')
+  })
+})