@pyreon/react-compat 0.13.0 → 0.14.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, 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 (
+      (import.meta as { env?: { DEV?: boolean } }).env?.DEV &&
+      _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,14 @@ 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 (e.g. context Provider) skip compat wrapping
+    const NATIVE = Symbol.for('pyreon:native-compat')
+    if ((type as unknown as Record<symbol, boolean>)[NATIVE]) {
+      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 +218,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/tests/compat-integration.test.tsx

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