@pyreon/react-compat 0.11.4 → 0.11.6

package/README.md

@@ -14,12 +14,12 @@ bun add @pyreon/react-compat
 // Replace:
 // import { useState, useEffect } from "react"
 // With:
-import { useState, useEffect } from "@pyreon/react-compat"
+import { useState, useEffect } from '@pyreon/react-compat'
 
 function Counter() {
   const [count, setCount] = useState(0)
   useEffect(() => {
-    console.log("count changed:", count())
+    console.log('count changed:', count())
   })
   return <button onClick={() => setCount((c) => c + 1)}>{count}</button>
 }
@@ -28,17 +28,17 @@ function Counter() {
 ### Using Refs and Context
 
 ```tsx
-import { useRef, useEffect, createContext, useContext } from "@pyreon/react-compat"
+import { useRef, useEffect, createContext, useContext } from '@pyreon/react-compat'
 
-const ThemeContext = createContext("light")
+const ThemeContext = createContext('light')
 
 function ThemeDisplay() {
   const theme = useContext(ThemeContext)
   const divRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    console.log("mounted, div is:", divRef.current)
-    return () => console.log("unmounted")
+    console.log('mounted, div is:', divRef.current)
+    return () => console.log('unmounted')
   }, [])
 
   return <div ref={divRef}>Current theme: {theme}</div>
@@ -56,14 +56,16 @@ function App() {
 ### Reducer Pattern
 
 ```tsx
-import { useReducer } from "@pyreon/react-compat"
+import { useReducer } from '@pyreon/react-compat'
 
-type Action = { type: "increment" } | { type: "decrement" }
+type Action = { type: 'increment' } | { type: 'decrement' }
 
 function reducer(state: number, action: Action) {
   switch (action.type) {
-    case "increment": return state + 1
-    case "decrement": return state - 1
+    case 'increment':
+      return state + 1
+    case 'decrement':
+      return state - 1
   }
 }
 
@@ -72,8 +74,8 @@ function Counter() {
   return (
     <div>
       <span>{count}</span>
-      <button onClick={() => dispatch({ type: "increment" })}>+</button>
-      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
+      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
+      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
     </div>
   )
 }
@@ -82,9 +84,9 @@ function Counter() {
 ### Lazy Loading
 
 ```tsx
-import { lazy, Suspense } from "@pyreon/react-compat"
+import { lazy, Suspense } from '@pyreon/react-compat'
 
-const HeavyChart = lazy(() => import("./HeavyChart"))
+const HeavyChart = lazy(() => import('./HeavyChart'))
 
 function Dashboard() {
   return (

package/lib/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","names":[],"sources":["../src/dom.ts"],"sourcesContent":["import type { VNodeChild } from \"@pyreon/core\"\n/**\n * @pyreon/react-compat/dom\n *\n * Drop-in for `react-dom/client` — provides `createRoot` so you can keep\n * the same entry-point pattern as a React app.\n */\nimport { mount } from \"@pyreon/runtime-dom\"\n\n/**\n * Drop-in for React 18's `createRoot(container).render(element)`.\n *\n * @example\n * import { createRoot } from \"@pyreon/react-compat/dom\"\n * createRoot(document.getElementById(\"app\")!).render(<App />)\n */\nexport function createRoot(container: Element): {\n  render: (element: VNodeChild) => void\n  unmount: () => void\n} {\n  let cleanup: (() => void) | null = null\n  return {\n    render(element: VNodeChild) {\n      if (cleanup) cleanup()\n      cleanup = mount(element, container as HTMLElement)\n    },\n    unmount() {\n      if (cleanup) {\n        cleanup()\n        cleanup = null\n      }\n    },\n  }\n}\n\n/** Alias — matches React 17's `render(element, container)` signature. */\nexport function render(element: VNodeChild, container: Element): void {\n  mount(element, container as HTMLElement)\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,SAAgB,WAAW,WAGzB;CACA,IAAI,UAA+B;AACnC,QAAO;EACL,OAAO,SAAqB;AAC1B,OAAI,QAAS,UAAS;AACtB,aAAU,MAAM,SAAS,UAAyB;;EAEpD,UAAU;AACR,OAAI,SAAS;AACX,aAAS;AACT,cAAU;;;EAGf;;;AAIH,SAAgB,OAAO,SAAqB,WAA0B;AACpE,OAAM,SAAS,UAAyB"}
+{"version":3,"file":"dom.js","names":[],"sources":["../src/dom.ts"],"sourcesContent":["import type { VNodeChild } from '@pyreon/core'\n/**\n * @pyreon/react-compat/dom\n *\n * Drop-in for `react-dom/client` — provides `createRoot` so you can keep\n * the same entry-point pattern as a React app.\n */\nimport { mount } from '@pyreon/runtime-dom'\n\n/**\n * Drop-in for React 18's `createRoot(container).render(element)`.\n *\n * @example\n * import { createRoot } from \"@pyreon/react-compat/dom\"\n * createRoot(document.getElementById(\"app\")!).render(<App />)\n */\nexport function createRoot(container: Element): {\n  render: (element: VNodeChild) => void\n  unmount: () => void\n} {\n  let cleanup: (() => void) | null = null\n  return {\n    render(element: VNodeChild) {\n      if (cleanup) cleanup()\n      cleanup = mount(element, container as HTMLElement)\n    },\n    unmount() {\n      if (cleanup) {\n        cleanup()\n        cleanup = null\n      }\n    },\n  }\n}\n\n/** Alias — matches React 17's `render(element, container)` signature. */\nexport function render(element: VNodeChild, container: Element): void {\n  mount(element, container as HTMLElement)\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,SAAgB,WAAW,WAGzB;CACA,IAAI,UAA+B;AACnC,QAAO;EACL,OAAO,SAAqB;AAC1B,OAAI,QAAS,UAAS;AACtB,aAAU,MAAM,SAAS,UAAyB;;EAEpD,UAAU;AACR,OAAI,SAAS;AACX,aAAS;AACT,cAAU;;;EAGf;;;AAIH,SAAgB,OAAO,SAAqB,WAA0B;AACpE,OAAM,SAAS,UAAyB"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/jsx-runtime.ts","../src/index.ts"],"sourcesContent":["/**\n * Compat JSX runtime for React compatibility mode.\n *\n * When `jsxImportSource` is set to `@pyreon/react-compat` (via the vite plugin's\n * `compat: \"react\"` option), OXC rewrites JSX to import from this file:\n *   <div className=\"x\" />  →  jsx(\"div\", { className: \"x\" })\n *\n * For component VNodes, we wrap the component function so it returns a reactive\n * accessor — enabling React-style re-renders on state change while Pyreon's\n * existing renderer handles all DOM work.\n */\n\nimport type { ComponentFn, Props, VNode, VNodeChild } from \"@pyreon/core\"\nimport { Fragment, h } from \"@pyreon/core\"\nimport { signal } from \"@pyreon/reactivity\"\n\nexport { Fragment }\n\n// ─── Render context (used by hooks) ──────────────────────────────────────────\n\nexport interface RenderContext {\n  hooks: unknown[]\n  scheduleRerender: () => void\n  /** Effect entries pending execution after render */\n  pendingEffects: EffectEntry[]\n  /** Layout effect entries pending execution after render */\n  pendingLayoutEffects: EffectEntry[]\n  /** Set to true when the component is unmounted */\n  unmounted: boolean\n}\n\nexport interface EffectEntry {\n  // biome-ignore lint/suspicious/noConfusingVoidType: matches React's effect signature\n  fn: () => (() => void) | void\n  deps: unknown[] | undefined\n  cleanup: (() => void) | undefined\n}\n\nlet _currentCtx: RenderContext | null = null\nlet _hookIndex = 0\n\nexport function getCurrentCtx(): RenderContext | null {\n  return _currentCtx\n}\n\nexport function getHookIndex(): number {\n  return _hookIndex++\n}\n\nexport function beginRender(ctx: RenderContext): void {\n  _currentCtx = ctx\n  _hookIndex = 0\n  ctx.pendingEffects = []\n  ctx.pendingLayoutEffects = []\n}\n\nexport function endRender(): void {\n  _currentCtx = null\n  _hookIndex = 0\n}\n\n// ─── Effect runners ──────────────────────────────────────────────────────────\n\nfunction runLayoutEffects(entries: EffectEntry[]): void {\n  for (const entry of entries) {\n    if (entry.cleanup) entry.cleanup()\n    const cleanup = entry.fn()\n    entry.cleanup = typeof cleanup === \"function\" ? cleanup : undefined\n  }\n}\n\nfunction scheduleEffects(ctx: RenderContext, entries: EffectEntry[]): void {\n  if (entries.length === 0) return\n  queueMicrotask(() => {\n    for (const entry of entries) {\n      if (ctx.unmounted) return\n      if (entry.cleanup) entry.cleanup()\n      const cleanup = entry.fn()\n      entry.cleanup = typeof cleanup === \"function\" ? cleanup : undefined\n    }\n  })\n}\n\n// ─── Component wrapping ──────────────────────────────────────────────────────\n\n// biome-ignore lint/complexity/noBannedTypes: Function is needed for generic component wrapping\nconst _wrapperCache = new WeakMap<Function, ComponentFn>()\n\n// biome-ignore lint/complexity/noBannedTypes: Function is needed for generic component wrapping\nfunction wrapCompatComponent(reactComponent: Function): ComponentFn {\n  let wrapped = _wrapperCache.get(reactComponent)\n  if (wrapped) return wrapped\n\n  // The wrapper returns a reactive accessor (() => VNodeChild) which Pyreon's\n  // mountChild treats as a reactive expression via mountReactive.\n  wrapped = ((props: Props) => {\n    const ctx: RenderContext = {\n      hooks: [],\n      scheduleRerender: () => {\n        // Will be replaced below after version signal is created\n      },\n      pendingEffects: [],\n      pendingLayoutEffects: [],\n      unmounted: false,\n    }\n\n    const version = signal(0)\n    let updateScheduled = false\n\n    ctx.scheduleRerender = () => {\n      if (ctx.unmounted || updateScheduled) return\n      updateScheduled = true\n      queueMicrotask(() => {\n        updateScheduled = false\n        if (!ctx.unmounted) version.set(version.peek() + 1)\n      })\n    }\n\n    // Return reactive accessor — Pyreon's mountChild calls mountReactive\n    return () => {\n      version() // tracked read — triggers re-execution when state changes\n      beginRender(ctx)\n      const result = (reactComponent as ComponentFn)(props)\n      const layoutEffects = ctx.pendingLayoutEffects\n      const effects = ctx.pendingEffects\n      endRender()\n\n      runLayoutEffects(layoutEffects)\n      scheduleEffects(ctx, effects)\n\n      return result\n    }\n  }) as unknown as ComponentFn\n\n  _wrapperCache.set(reactComponent, wrapped)\n  return wrapped\n}\n\n// ─── JSX functions ───────────────────────────────────────────────────────────\n\nexport function jsx(\n  type: string | ComponentFn | symbol,\n  props: Props & { children?: VNodeChild | VNodeChild[] },\n  key?: string | number | null,\n): VNode {\n  const { children, ...rest } = props\n  const propsWithKey = (key != null ? { ...rest, key } : rest) as Props\n\n  if (typeof type === \"function\") {\n    // Wrap React-style component for re-render support\n    const wrapped = wrapCompatComponent(type)\n    const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey\n    return h(wrapped, componentProps)\n  }\n\n  // DOM element or symbol (Fragment): children go in vnode.children\n  const childArray = children === undefined ? [] : Array.isArray(children) ? children : [children]\n\n  // Map className → class for React compat\n  if (typeof type === \"string\" && propsWithKey.className !== undefined) {\n    propsWithKey.class = propsWithKey.className\n    delete propsWithKey.className\n  }\n\n  return h(type, propsWithKey, ...(childArray as VNodeChild[]))\n}\n\nexport const jsxs = jsx\nexport const jsxDEV = jsx\n","/**\n * @pyreon/react-compat\n *\n * Fully React-compatible hook API powered by Pyreon's reactive engine.\n *\n * Components re-render on state change — just like React. Hooks return plain\n * values and use deps arrays for memoization. Existing React code works\n * unchanged when paired with `pyreon({ compat: \"react\" })` in your vite config.\n *\n * USAGE:\n *   import { useState, useEffect } from \"react\"          // aliased by vite plugin\n *   import { createRoot } from \"react-dom/client\"         // aliased by vite plugin\n */\n\nexport type { Props, VNode as ReactNode, VNodeChild } from \"@pyreon/core\"\nexport { Fragment, h as createElement, h } from \"@pyreon/core\"\n\nimport type { VNodeChild } from \"@pyreon/core\"\nimport { createContext, ErrorBoundary, Portal, Suspense, useContext } from \"@pyreon/core\"\nimport { batch } from \"@pyreon/reactivity\"\nimport type { EffectEntry } from \"./jsx-runtime\"\nimport { getCurrentCtx, getHookIndex } from \"./jsx-runtime\"\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\n\nfunction requireCtx() {\n  const ctx = getCurrentCtx()\n  if (!ctx) throw new Error(\"Hook called outside of a component render\")\n  return ctx\n}\n\nfunction depsChanged(a: unknown[] | undefined, b: unknown[] | undefined): boolean {\n  if (a === undefined || b === undefined) return true\n  if (a.length !== b.length) return true\n  for (let i = 0; i < a.length; i++) {\n    if (!Object.is(a[i], b[i])) return true\n  }\n  return false\n}\n\n// ─── State ───────────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `useState` — returns `[value, setter]`.\n * Triggers a component re-render when the setter is called.\n */\nexport function useState<T>(initial: T | (() => T)): [T, (v: T | ((prev: T) => T)) => void] {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    ctx.hooks.push(typeof initial === \"function\" ? (initial as () => T)() : initial)\n  }\n\n  const value = ctx.hooks[idx] as T\n  const setter = (v: T | ((prev: T) => T)) => {\n    const current = ctx.hooks[idx] as T\n    const next = typeof v === \"function\" ? (v as (prev: T) => T)(current) : v\n    if (Object.is(current, next)) return\n    ctx.hooks[idx] = next\n    ctx.scheduleRerender()\n  }\n\n  return [value, setter]\n}\n\n// ─── Reducer ─────────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `useReducer` — returns `[state, dispatch]`.\n */\nexport function useReducer<S, A>(\n  reducer: (state: S, action: A) => S,\n  initial: S | (() => S),\n): [S, (action: A) => void] {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    ctx.hooks.push(typeof initial === \"function\" ? (initial as () => S)() : initial)\n  }\n\n  const state = ctx.hooks[idx] as S\n  const dispatch = (action: A) => {\n    const current = ctx.hooks[idx] as S\n    const next = reducer(current, action)\n    if (Object.is(current, next)) return\n    ctx.hooks[idx] = next\n    ctx.scheduleRerender()\n  }\n\n  return [state, dispatch]\n}\n\n// ─── Effects ─────────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `useEffect` — runs after render when deps change.\n * Returns cleanup on unmount and before re-running.\n */\n// biome-ignore lint/suspicious/noConfusingVoidType: matches React's useEffect signature\nexport function useEffect(fn: () => (() => void) | void, deps?: unknown[]): void {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    // First render — always run\n    const entry: EffectEntry = { fn, deps, cleanup: undefined }\n    ctx.hooks.push(entry)\n    ctx.pendingEffects.push(entry)\n  } else {\n    const entry = ctx.hooks[idx] as EffectEntry\n    if (depsChanged(entry.deps, deps)) {\n      entry.fn = fn\n      entry.deps = deps\n      ctx.pendingEffects.push(entry)\n    }\n  }\n}\n\n/**\n * React-compatible `useLayoutEffect` — runs synchronously after DOM mutations.\n */\n// biome-ignore lint/suspicious/noConfusingVoidType: matches React's useLayoutEffect signature\nexport function useLayoutEffect(fn: () => (() => void) | void, deps?: unknown[]): void {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    const entry: EffectEntry = { fn, deps, cleanup: undefined }\n    ctx.hooks.push(entry)\n    ctx.pendingLayoutEffects.push(entry)\n  } else {\n    const entry = ctx.hooks[idx] as EffectEntry\n    if (depsChanged(entry.deps, deps)) {\n      entry.fn = fn\n      entry.deps = deps\n      ctx.pendingLayoutEffects.push(entry)\n    }\n  }\n}\n\n// ─── Memoization ─────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `useMemo` — returns the cached value, recomputed when deps change.\n */\nexport function useMemo<T>(fn: () => T, deps: unknown[]): T {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    const value = fn()\n    ctx.hooks.push({ value, deps })\n    return value\n  }\n\n  const entry = ctx.hooks[idx] as { value: T; deps: unknown[] }\n  if (depsChanged(entry.deps, deps)) {\n    entry.value = fn()\n    entry.deps = deps\n  }\n  return entry.value\n}\n\n/**\n * React-compatible `useCallback` — returns the cached function when deps haven't changed.\n */\nexport function useCallback<T extends (...args: never[]) => unknown>(fn: T, deps: unknown[]): T {\n  return useMemo(() => fn, deps)\n}\n\n// ─── Refs ────────────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `useRef` — returns `{ current }` persisted across re-renders.\n */\nexport function useRef<T>(initial?: T): { current: T | null } {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    const ref = { current: initial !== undefined ? (initial as T) : null }\n    ctx.hooks.push(ref)\n  }\n\n  return ctx.hooks[idx] as { current: T | null }\n}\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\nexport { createContext, useContext }\n\n// ─── ID ──────────────────────────────────────────────────────────────────────\n\nlet _idCounter = 0\n\n/**\n * React-compatible `useId` — returns a stable unique string per hook call.\n */\nexport function useId(): string {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    ctx.hooks.push(`:r${(_idCounter++).toString(36)}:`)\n  }\n\n  return ctx.hooks[idx] as string\n}\n\n// ─── Optimization ────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `memo` — wraps a component to skip re-render when props\n * are shallowly equal.\n */\nexport function memo<P extends Record<string, unknown>>(\n  component: (props: P) => VNodeChild,\n  areEqual?: (prevProps: P, nextProps: P) => boolean,\n): (props: P) => VNodeChild {\n  const compare =\n    areEqual ??\n    ((a: P, b: P) => {\n      const keysA = Object.keys(a)\n      const keysB = Object.keys(b)\n      if (keysA.length !== keysB.length) return false\n      for (const k of keysA) {\n        if (!Object.is(a[k], b[k])) return false\n      }\n      return true\n    })\n\n  let prevProps: P | null = null\n  let prevResult: VNodeChild = null\n\n  return (props: P) => {\n    if (prevProps !== null && compare(prevProps, props)) {\n      return prevResult\n    }\n    prevProps = props\n    prevResult = (component as (p: P) => VNodeChild)(props)\n    return prevResult\n  }\n}\n\n/**\n * React-compatible `useTransition` — no concurrent mode in Pyreon.\n */\nexport function useTransition(): [boolean, (fn: () => void) => void] {\n  return [false, (fn) => fn()]\n}\n\n/**\n * React-compatible `useDeferredValue` — returns the value as-is.\n */\nexport function useDeferredValue<T>(value: T): T {\n  return value\n}\n\n// ─── Imperative handle ───────────────────────────────────────────────────────\n\n/**\n * React-compatible `useImperativeHandle`.\n */\nexport function useImperativeHandle<T>(\n  ref: { current: T | null } | null | undefined,\n  init: () => T,\n  deps?: unknown[],\n): void {\n  useLayoutEffect(() => {\n    if (ref) ref.current = init()\n    return () => {\n      if (ref) ref.current = null\n    }\n  }, deps)\n}\n\n// ─── Batching ────────────────────────────────────────────────────────────────\n\nexport { batch }\n\n// ─── Portals ─────────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `createPortal(children, target)`.\n */\nexport function createPortal(children: VNodeChild, target: Element): VNodeChild {\n  return Portal({ target, children })\n}\n\n// ─── Suspense / lazy / ErrorBoundary ─────────────────────────────────────────\n\nexport { lazy } from \"@pyreon/core\"\nexport { ErrorBoundary, Suspense }\n"],"mappings":";;;;AAsCA,IAAI,cAAoC;AACxC,IAAI,aAAa;AAEjB,SAAgB,gBAAsC;AACpD,QAAO;;AAGT,SAAgB,eAAuB;AACrC,QAAO;;;;;ACrBT,SAAS,aAAa;CACpB,MAAM,MAAM,eAAe;AAC3B,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,4CAA4C;AACtE,QAAO;;AAGT,SAAS,YAAY,GAA0B,GAAmC;AAChF,KAAI,MAAM,UAAa,MAAM,OAAW,QAAO;AAC/C,KAAI,EAAE,WAAW,EAAE,OAAQ,QAAO;AAClC,MAAK,IAAI,IAAI,GAAG,IAAI,EAAE,QAAQ,IAC5B,KAAI,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,GAAG,CAAE,QAAO;AAErC,QAAO;;;;;;AAST,SAAgB,SAAY,SAAgE;CAC1F,MAAM,MAAM,YAAY;CACxB,MAAM,MAAM,cAAc;AAE1B,KAAI,IAAI,MAAM,UAAU,IACtB,KAAI,MAAM,KAAK,OAAO,YAAY,aAAc,SAAqB,GAAG,QAAQ;CAGlF,MAAM,QAAQ,IAAI,MAAM;CACxB,MAAM,UAAU,MAA4B;EAC1C,MAAM,UAAU,IAAI,MAAM;EAC1B,MAAM,OAAO,OAAO,MAAM,aAAc,EAAqB,QAAQ,GAAG;AACxE,MAAI,OAAO,GAAG,SAAS,KAAK,CAAE;AAC9B,MAAI,MAAM,OAAO;AACjB,MAAI,kBAAkB;;AAGxB,QAAO,CAAC,OAAO,OAAO;;;;;AAQxB,SAAgB,WACd,SACA,SAC0B;CAC1B,MAAM,MAAM,YAAY;CACxB,MAAM,MAAM,cAAc;AAE1B,KAAI,IAAI,MAAM,UAAU,IACtB,KAAI,MAAM,KAAK,OAAO,YAAY,aAAc,SAAqB,GAAG,QAAQ;CAGlF,MAAM,QAAQ,IAAI,MAAM;CACxB,MAAM,YAAY,WAAc;EAC9B,MAAM,UAAU,IAAI,MAAM;EAC1B,MAAM,OAAO,QAAQ,SAAS,OAAO;AACrC,MAAI,OAAO,GAAG,SAAS,KAAK,CAAE;AAC9B,MAAI,MAAM,OAAO;AACjB,MAAI,kBAAkB;;AAGxB,QAAO,CAAC,OAAO,SAAS;;;;;;AAU1B,SAAgB,UAAU,IAA+B,MAAwB;CAC/E,MAAM,MAAM,YAAY;CACxB,MAAM,MAAM,cAAc;AAE1B,KAAI,IAAI,MAAM,UAAU,KAAK;EAE3B,MAAM,QAAqB;GAAE;GAAI;GAAM,SAAS;GAAW;AAC3D,MAAI,MAAM,KAAK,MAAM;AACrB,MAAI,eAAe,KAAK,MAAM;QACzB;EACL,MAAM,QAAQ,IAAI,MAAM;AACxB,MAAI,YAAY,MAAM,MAAM,KAAK,EAAE;AACjC,SAAM,KAAK;AACX,SAAM,OAAO;AACb,OAAI,eAAe,KAAK,MAAM;;;;;;;AASpC,SAAgB,gBAAgB,IAA+B,MAAwB;CACrF,MAAM,MAAM,YAAY;CACxB,MAAM,MAAM,cAAc;AAE1B,KAAI,IAAI,MAAM,UAAU,KAAK;EAC3B,MAAM,QAAqB;GAAE;GAAI;GAAM,SAAS;GAAW;AAC3D,MAAI,MAAM,KAAK,MAAM;AACrB,MAAI,qBAAqB,KAAK,MAAM;QAC/B;EACL,MAAM,QAAQ,IAAI,MAAM;AACxB,MAAI,YAAY,MAAM,MAAM,KAAK,EAAE;AACjC,SAAM,KAAK;AACX,SAAM,OAAO;AACb,OAAI,qBAAqB,KAAK,MAAM;;;;;;;AAU1C,SAAgB,QAAW,IAAa,MAAoB;CAC1D,MAAM,MAAM,YAAY;CACxB,MAAM,MAAM,cAAc;AAE1B,KAAI,IAAI,MAAM,UAAU,KAAK;EAC3B,MAAM,QAAQ,IAAI;AAClB,MAAI,MAAM,KAAK;GAAE;GAAO;GAAM,CAAC;AAC/B,SAAO;;CAGT,MAAM,QAAQ,IAAI,MAAM;AACxB,KAAI,YAAY,MAAM,MAAM,KAAK,EAAE;AACjC,QAAM,QAAQ,IAAI;AAClB,QAAM,OAAO;;AAEf,QAAO,MAAM;;;;;AAMf,SAAgB,YAAqD,IAAO,MAAoB;AAC9F,QAAO,cAAc,IAAI,KAAK;;;;;AAQhC,SAAgB,OAAU,SAAoC;CAC5D,MAAM,MAAM,YAAY;CACxB,MAAM,MAAM,cAAc;AAE1B,KAAI,IAAI,MAAM,UAAU,KAAK;EAC3B,MAAM,MAAM,EAAE,SAAS,YAAY,SAAa,UAAgB,MAAM;AACtE,MAAI,MAAM,KAAK,IAAI;;AAGrB,QAAO,IAAI,MAAM;;AASnB,IAAI,aAAa;;;;AAKjB,SAAgB,QAAgB;CAC9B,MAAM,MAAM,YAAY;CACxB,MAAM,MAAM,cAAc;AAE1B,KAAI,IAAI,MAAM,UAAU,IACtB,KAAI,MAAM,KAAK,MAAM,cAAc,SAAS,GAAG,CAAC,GAAG;AAGrD,QAAO,IAAI,MAAM;;;;;;AASnB,SAAgB,KACd,WACA,UAC0B;CAC1B,MAAM,UACJ,cACE,GAAM,MAAS;EACf,MAAM,QAAQ,OAAO,KAAK,EAAE;EAC5B,MAAM,QAAQ,OAAO,KAAK,EAAE;AAC5B,MAAI,MAAM,WAAW,MAAM,OAAQ,QAAO;AAC1C,OAAK,MAAM,KAAK,MACd,KAAI,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,GAAG,CAAE,QAAO;AAErC,SAAO;;CAGX,IAAI,YAAsB;CAC1B,IAAI,aAAyB;AAE7B,SAAQ,UAAa;AACnB,MAAI,cAAc,QAAQ,QAAQ,WAAW,MAAM,CACjD,QAAO;AAET,cAAY;AACZ,eAAc,UAAmC,MAAM;AACvD,SAAO;;;;;;AAOX,SAAgB,gBAAqD;AACnE,QAAO,CAAC,QAAQ,OAAO,IAAI,CAAC;;;;;AAM9B,SAAgB,iBAAoB,OAAa;AAC/C,QAAO;;;;;AAQT,SAAgB,oBACd,KACA,MACA,MACM;AACN,uBAAsB;AACpB,MAAI,IAAK,KAAI,UAAU,MAAM;AAC7B,eAAa;AACX,OAAI,IAAK,KAAI,UAAU;;IAExB,KAAK;;;;;AAYV,SAAgB,aAAa,UAAsB,QAA6B;AAC9E,QAAO,OAAO;EAAE;EAAQ;EAAU,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/jsx-runtime.ts","../src/index.ts"],"sourcesContent":["/**\n * Compat JSX runtime for React compatibility mode.\n *\n * When `jsxImportSource` is set to `@pyreon/react-compat` (via the vite plugin's\n * `compat: \"react\"` option), OXC rewrites JSX to import from this file:\n *   <div className=\"x\" />  →  jsx(\"div\", { className: \"x\" })\n *\n * For component VNodes, we wrap the component function so it returns a reactive\n * accessor — enabling React-style re-renders on state change while Pyreon's\n * existing renderer handles all DOM work.\n */\n\nimport type { ComponentFn, Props, VNode, VNodeChild } from '@pyreon/core'\nimport { Fragment, h } from '@pyreon/core'\nimport { signal } from '@pyreon/reactivity'\n\nexport { Fragment }\n\n// ─── Render context (used by hooks) ──────────────────────────────────────────\n\nexport interface RenderContext {\n  hooks: unknown[]\n  scheduleRerender: () => void\n  /** Effect entries pending execution after render */\n  pendingEffects: EffectEntry[]\n  /** Layout effect entries pending execution after render */\n  pendingLayoutEffects: EffectEntry[]\n  /** Set to true when the component is unmounted */\n  unmounted: boolean\n}\n\nexport interface EffectEntry {\n  // biome-ignore lint/suspicious/noConfusingVoidType: matches React's effect signature\n  fn: () => (() => void) | void\n  deps: unknown[] | undefined\n  cleanup: (() => void) | undefined\n}\n\nlet _currentCtx: RenderContext | null = null\nlet _hookIndex = 0\n\nexport function getCurrentCtx(): RenderContext | null {\n  return _currentCtx\n}\n\nexport function getHookIndex(): number {\n  return _hookIndex++\n}\n\nexport function beginRender(ctx: RenderContext): void {\n  _currentCtx = ctx\n  _hookIndex = 0\n  ctx.pendingEffects = []\n  ctx.pendingLayoutEffects = []\n}\n\nexport function endRender(): void {\n  _currentCtx = null\n  _hookIndex = 0\n}\n\n// ─── Effect runners ──────────────────────────────────────────────────────────\n\nfunction runLayoutEffects(entries: EffectEntry[]): void {\n  for (const entry of entries) {\n    if (entry.cleanup) entry.cleanup()\n    const cleanup = entry.fn()\n    entry.cleanup = typeof cleanup === 'function' ? cleanup : undefined\n  }\n}\n\nfunction scheduleEffects(ctx: RenderContext, entries: EffectEntry[]): void {\n  if (entries.length === 0) return\n  queueMicrotask(() => {\n    for (const entry of entries) {\n      if (ctx.unmounted) return\n      if (entry.cleanup) entry.cleanup()\n      const cleanup = entry.fn()\n      entry.cleanup = typeof cleanup === 'function' ? cleanup : undefined\n    }\n  })\n}\n\n// ─── Component wrapping ──────────────────────────────────────────────────────\n\n// biome-ignore lint/complexity/noBannedTypes: Function is needed for generic component wrapping\nconst _wrapperCache = new WeakMap<Function, ComponentFn>()\n\n// biome-ignore lint/complexity/noBannedTypes: Function is needed for generic component wrapping\nfunction wrapCompatComponent(reactComponent: Function): ComponentFn {\n  let wrapped = _wrapperCache.get(reactComponent)\n  if (wrapped) return wrapped\n\n  // The wrapper returns a reactive accessor (() => VNodeChild) which Pyreon's\n  // mountChild treats as a reactive expression via mountReactive.\n  wrapped = ((props: Props) => {\n    const ctx: RenderContext = {\n      hooks: [],\n      scheduleRerender: () => {\n        // Will be replaced below after version signal is created\n      },\n      pendingEffects: [],\n      pendingLayoutEffects: [],\n      unmounted: false,\n    }\n\n    const version = signal(0)\n    let updateScheduled = false\n\n    ctx.scheduleRerender = () => {\n      if (ctx.unmounted || updateScheduled) return\n      updateScheduled = true\n      queueMicrotask(() => {\n        updateScheduled = false\n        if (!ctx.unmounted) version.set(version.peek() + 1)\n      })\n    }\n\n    // Return reactive accessor — Pyreon's mountChild calls mountReactive\n    return () => {\n      version() // tracked read — triggers re-execution when state changes\n      beginRender(ctx)\n      const result = (reactComponent as ComponentFn)(props)\n      const layoutEffects = ctx.pendingLayoutEffects\n      const effects = ctx.pendingEffects\n      endRender()\n\n      runLayoutEffects(layoutEffects)\n      scheduleEffects(ctx, effects)\n\n      return result\n    }\n  }) as unknown as ComponentFn\n\n  _wrapperCache.set(reactComponent, wrapped)\n  return wrapped\n}\n\n// ─── JSX functions ───────────────────────────────────────────────────────────\n\nexport function jsx(\n  type: string | ComponentFn | symbol,\n  props: Props & { children?: VNodeChild | VNodeChild[] },\n  key?: string | number | null,\n): VNode {\n  const { children, ...rest } = props\n  const propsWithKey = (key != null ? { ...rest, key } : rest) as Props\n\n  if (typeof type === 'function') {\n    // Wrap React-style component for re-render support\n    const wrapped = wrapCompatComponent(type)\n    const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey\n    return h(wrapped, componentProps)\n  }\n\n  // DOM element or symbol (Fragment): children go in vnode.children\n  const childArray = children === undefined ? [] : Array.isArray(children) ? children : [children]\n\n  // Map className → class for React compat\n  if (typeof type === 'string' && propsWithKey.className !== undefined) {\n    propsWithKey.class = propsWithKey.className\n    delete propsWithKey.className\n  }\n\n  return h(type, propsWithKey, ...(childArray as VNodeChild[]))\n}\n\nexport const jsxs = jsx\nexport const jsxDEV = jsx\n","/**\n * @pyreon/react-compat\n *\n * Fully React-compatible hook API powered by Pyreon's reactive engine.\n *\n * Components re-render on state change — just like React. Hooks return plain\n * values and use deps arrays for memoization. Existing React code works\n * unchanged when paired with `pyreon({ compat: \"react\" })` in your vite config.\n *\n * USAGE:\n *   import { useState, useEffect } from \"react\"          // aliased by vite plugin\n *   import { createRoot } from \"react-dom/client\"         // aliased by vite plugin\n */\n\nexport type { Props, VNode as ReactNode, VNodeChild } from '@pyreon/core'\nexport { Fragment, h as createElement, h } from '@pyreon/core'\n\nimport type { VNodeChild } from '@pyreon/core'\nimport { createContext, ErrorBoundary, Portal, Suspense, useContext } from '@pyreon/core'\nimport { batch } from '@pyreon/reactivity'\nimport type { EffectEntry } from './jsx-runtime'\nimport { getCurrentCtx, getHookIndex } from './jsx-runtime'\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\n\nfunction requireCtx() {\n  const ctx = getCurrentCtx()\n  if (!ctx) throw new Error('Hook called outside of a component render')\n  return ctx\n}\n\nfunction depsChanged(a: unknown[] | undefined, b: unknown[] | undefined): boolean {\n  if (a === undefined || b === undefined) return true\n  if (a.length !== b.length) return true\n  for (let i = 0; i < a.length; i++) {\n    if (!Object.is(a[i], b[i])) return true\n  }\n  return false\n}\n\n// ─── State ───────────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `useState` — returns `[value, setter]`.\n * Triggers a component re-render when the setter is called.\n */\nexport function useState<T>(initial: T | (() => T)): [T, (v: T | ((prev: T) => T)) => void] {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    ctx.hooks.push(typeof initial === 'function' ? (initial as () => T)() : initial)\n  }\n\n  const value = ctx.hooks[idx] as T\n  const setter = (v: T | ((prev: T) => T)) => {\n    const current = ctx.hooks[idx] as T\n    const next = typeof v === 'function' ? (v as (prev: T) => T)(current) : v\n    if (Object.is(current, next)) return\n    ctx.hooks[idx] = next\n    ctx.scheduleRerender()\n  }\n\n  return [value, setter]\n}\n\n// ─── Reducer ─────────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `useReducer` — returns `[state, dispatch]`.\n */\nexport function useReducer<S, A>(\n  reducer: (state: S, action: A) => S,\n  initial: S | (() => S),\n): [S, (action: A) => void] {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    ctx.hooks.push(typeof initial === 'function' ? (initial as () => S)() : initial)\n  }\n\n  const state = ctx.hooks[idx] as S\n  const dispatch = (action: A) => {\n    const current = ctx.hooks[idx] as S\n    const next = reducer(current, action)\n    if (Object.is(current, next)) return\n    ctx.hooks[idx] = next\n    ctx.scheduleRerender()\n  }\n\n  return [state, dispatch]\n}\n\n// ─── Effects ─────────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `useEffect` — runs after render when deps change.\n * Returns cleanup on unmount and before re-running.\n */\n// biome-ignore lint/suspicious/noConfusingVoidType: matches React's useEffect signature\nexport function useEffect(fn: () => (() => void) | void, deps?: unknown[]): void {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    // First render — always run\n    const entry: EffectEntry = { fn, deps, cleanup: undefined }\n    ctx.hooks.push(entry)\n    ctx.pendingEffects.push(entry)\n  } else {\n    const entry = ctx.hooks[idx] as EffectEntry\n    if (depsChanged(entry.deps, deps)) {\n      entry.fn = fn\n      entry.deps = deps\n      ctx.pendingEffects.push(entry)\n    }\n  }\n}\n\n/**\n * React-compatible `useLayoutEffect` — runs synchronously after DOM mutations.\n */\n// biome-ignore lint/suspicious/noConfusingVoidType: matches React's useLayoutEffect signature\nexport function useLayoutEffect(fn: () => (() => void) | void, deps?: unknown[]): void {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    const entry: EffectEntry = { fn, deps, cleanup: undefined }\n    ctx.hooks.push(entry)\n    ctx.pendingLayoutEffects.push(entry)\n  } else {\n    const entry = ctx.hooks[idx] as EffectEntry\n    if (depsChanged(entry.deps, deps)) {\n      entry.fn = fn\n      entry.deps = deps\n      ctx.pendingLayoutEffects.push(entry)\n    }\n  }\n}\n\n// ─── Memoization ─────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `useMemo` — returns the cached value, recomputed when deps change.\n */\nexport function useMemo<T>(fn: () => T, deps: unknown[]): T {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    const value = fn()\n    ctx.hooks.push({ value, deps })\n    return value\n  }\n\n  const entry = ctx.hooks[idx] as { value: T; deps: unknown[] }\n  if (depsChanged(entry.deps, deps)) {\n    entry.value = fn()\n    entry.deps = deps\n  }\n  return entry.value\n}\n\n/**\n * React-compatible `useCallback` — returns the cached function when deps haven't changed.\n */\nexport function useCallback<T extends (...args: never[]) => unknown>(fn: T, deps: unknown[]): T {\n  return useMemo(() => fn, deps)\n}\n\n// ─── Refs ────────────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `useRef` — returns `{ current }` persisted across re-renders.\n */\nexport function useRef<T>(initial?: T): { current: T | null } {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    const ref = { current: initial !== undefined ? (initial as T) : null }\n    ctx.hooks.push(ref)\n  }\n\n  return ctx.hooks[idx] as { current: T | null }\n}\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\nexport { createContext, useContext }\n\n// ─── ID ──────────────────────────────────────────────────────────────────────\n\nlet _idCounter = 0\n\n/**\n * React-compatible `useId` — returns a stable unique string per hook call.\n */\nexport function useId(): string {\n  const ctx = requireCtx()\n  const idx = getHookIndex()\n\n  if (ctx.hooks.length <= idx) {\n    ctx.hooks.push(`:r${(_idCounter++).toString(36)}:`)\n  }\n\n  return ctx.hooks[idx] as string\n}\n\n// ─── Optimization ────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `memo` — wraps a component to skip re-render when props\n * are shallowly equal.\n */\nexport function memo<P extends Record<string, unknown>>(\n  component: (props: P) => VNodeChild,\n  areEqual?: (prevProps: P, nextProps: P) => boolean,\n): (props: P) => VNodeChild {\n  const compare =\n    areEqual ??\n    ((a: P, b: P) => {\n      const keysA = Object.keys(a)\n      const keysB = Object.keys(b)\n      if (keysA.length !== keysB.length) return false\n      for (const k of keysA) {\n        if (!Object.is(a[k], b[k])) return false\n      }\n      return true\n    })\n\n  let prevProps: P | null = null\n  let prevResult: VNodeChild = null\n\n  return (props: P) => {\n    if (prevProps !== null && compare(prevProps, props)) {\n      return prevResult\n    }\n    prevProps = props\n    prevResult = (component as (p: P) => VNodeChild)(props)\n    return prevResult\n  }\n}\n\n/**\n * React-compatible `useTransition` — no concurrent mode in Pyreon.\n */\nexport function useTransition(): [boolean, (fn: () => void) => void] {\n  return [false, (fn) => fn()]\n}\n\n/**\n * React-compatible `useDeferredValue` — returns the value as-is.\n */\nexport function useDeferredValue<T>(value: T): T {\n  return value\n}\n\n// ─── Imperative handle ───────────────────────────────────────────────────────\n\n/**\n * React-compatible `useImperativeHandle`.\n */\nexport function useImperativeHandle<T>(\n  ref: { current: T | null } | null | undefined,\n  init: () => T,\n  deps?: unknown[],\n): void {\n  useLayoutEffect(() => {\n    if (ref) ref.current = init()\n    return () => {\n      if (ref) ref.current = null\n    }\n  }, deps)\n}\n\n// ─── Batching ────────────────────────────────────────────────────────────────\n\nexport { batch }\n\n// ─── Portals ─────────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `createPortal(children, target)`.\n */\nexport function createPortal(children: VNodeChild, target: Element): VNodeChild {\n  return Portal({ target, children })\n}\n\n// ─── Suspense / lazy / ErrorBoundary ─────────────────────────────────────────\n\nexport { lazy } from '@pyreon/core'\nexport { ErrorBoundary, Suspense }\n"],"mappings":"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"}

package/lib/jsx-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-runtime.js","names":[],"sources":["../src/jsx-runtime.ts"],"sourcesContent":["/**\n * Compat JSX runtime for React compatibility mode.\n *\n * When `jsxImportSource` is set to `@pyreon/react-compat` (via the vite plugin's\n * `compat: \"react\"` option), OXC rewrites JSX to import from this file:\n *   <div className=\"x\" />  →  jsx(\"div\", { className: \"x\" })\n *\n * For component VNodes, we wrap the component function so it returns a reactive\n * accessor — enabling React-style re-renders on state change while Pyreon's\n * existing renderer handles all DOM work.\n */\n\nimport type { ComponentFn, Props, VNode, VNodeChild } from \"@pyreon/core\"\nimport { Fragment, h } from \"@pyreon/core\"\nimport { signal } from \"@pyreon/reactivity\"\n\nexport { Fragment }\n\n// ─── Render context (used by hooks) ──────────────────────────────────────────\n\nexport interface RenderContext {\n  hooks: unknown[]\n  scheduleRerender: () => void\n  /** Effect entries pending execution after render */\n  pendingEffects: EffectEntry[]\n  /** Layout effect entries pending execution after render */\n  pendingLayoutEffects: EffectEntry[]\n  /** Set to true when the component is unmounted */\n  unmounted: boolean\n}\n\nexport interface EffectEntry {\n  // biome-ignore lint/suspicious/noConfusingVoidType: matches React's effect signature\n  fn: () => (() => void) | void\n  deps: unknown[] | undefined\n  cleanup: (() => void) | undefined\n}\n\nlet _currentCtx: RenderContext | null = null\nlet _hookIndex = 0\n\nexport function getCurrentCtx(): RenderContext | null {\n  return _currentCtx\n}\n\nexport function getHookIndex(): number {\n  return _hookIndex++\n}\n\nexport function beginRender(ctx: RenderContext): void {\n  _currentCtx = ctx\n  _hookIndex = 0\n  ctx.pendingEffects = []\n  ctx.pendingLayoutEffects = []\n}\n\nexport function endRender(): void {\n  _currentCtx = null\n  _hookIndex = 0\n}\n\n// ─── Effect runners ──────────────────────────────────────────────────────────\n\nfunction runLayoutEffects(entries: EffectEntry[]): void {\n  for (const entry of entries) {\n    if (entry.cleanup) entry.cleanup()\n    const cleanup = entry.fn()\n    entry.cleanup = typeof cleanup === \"function\" ? cleanup : undefined\n  }\n}\n\nfunction scheduleEffects(ctx: RenderContext, entries: EffectEntry[]): void {\n  if (entries.length === 0) return\n  queueMicrotask(() => {\n    for (const entry of entries) {\n      if (ctx.unmounted) return\n      if (entry.cleanup) entry.cleanup()\n      const cleanup = entry.fn()\n      entry.cleanup = typeof cleanup === \"function\" ? cleanup : undefined\n    }\n  })\n}\n\n// ─── Component wrapping ──────────────────────────────────────────────────────\n\n// biome-ignore lint/complexity/noBannedTypes: Function is needed for generic component wrapping\nconst _wrapperCache = new WeakMap<Function, ComponentFn>()\n\n// biome-ignore lint/complexity/noBannedTypes: Function is needed for generic component wrapping\nfunction wrapCompatComponent(reactComponent: Function): ComponentFn {\n  let wrapped = _wrapperCache.get(reactComponent)\n  if (wrapped) return wrapped\n\n  // The wrapper returns a reactive accessor (() => VNodeChild) which Pyreon's\n  // mountChild treats as a reactive expression via mountReactive.\n  wrapped = ((props: Props) => {\n    const ctx: RenderContext = {\n      hooks: [],\n      scheduleRerender: () => {\n        // Will be replaced below after version signal is created\n      },\n      pendingEffects: [],\n      pendingLayoutEffects: [],\n      unmounted: false,\n    }\n\n    const version = signal(0)\n    let updateScheduled = false\n\n    ctx.scheduleRerender = () => {\n      if (ctx.unmounted || updateScheduled) return\n      updateScheduled = true\n      queueMicrotask(() => {\n        updateScheduled = false\n        if (!ctx.unmounted) version.set(version.peek() + 1)\n      })\n    }\n\n    // Return reactive accessor — Pyreon's mountChild calls mountReactive\n    return () => {\n      version() // tracked read — triggers re-execution when state changes\n      beginRender(ctx)\n      const result = (reactComponent as ComponentFn)(props)\n      const layoutEffects = ctx.pendingLayoutEffects\n      const effects = ctx.pendingEffects\n      endRender()\n\n      runLayoutEffects(layoutEffects)\n      scheduleEffects(ctx, effects)\n\n      return result\n    }\n  }) as unknown as ComponentFn\n\n  _wrapperCache.set(reactComponent, wrapped)\n  return wrapped\n}\n\n// ─── JSX functions ───────────────────────────────────────────────────────────\n\nexport function jsx(\n  type: string | ComponentFn | symbol,\n  props: Props & { children?: VNodeChild | VNodeChild[] },\n  key?: string | number | null,\n): VNode {\n  const { children, ...rest } = props\n  const propsWithKey = (key != null ? { ...rest, key } : rest) as Props\n\n  if (typeof type === \"function\") {\n    // Wrap React-style component for re-render support\n    const wrapped = wrapCompatComponent(type)\n    const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey\n    return h(wrapped, componentProps)\n  }\n\n  // DOM element or symbol (Fragment): children go in vnode.children\n  const childArray = children === undefined ? [] : Array.isArray(children) ? children : [children]\n\n  // Map className → class for React compat\n  if (typeof type === \"string\" && propsWithKey.className !== undefined) {\n    propsWithKey.class = propsWithKey.className\n    delete propsWithKey.className\n  }\n\n  return h(type, propsWithKey, ...(childArray as VNodeChild[]))\n}\n\nexport const jsxs = jsx\nexport const jsxDEV = jsx\n"],"mappings":";;;;AAsCA,IAAI,cAAoC;AACxC,IAAI,aAAa;AAUjB,SAAgB,YAAY,KAA0B;AACpD,eAAc;AACd,cAAa;AACb,KAAI,iBAAiB,EAAE;AACvB,KAAI,uBAAuB,EAAE;;AAG/B,SAAgB,YAAkB;AAChC,eAAc;AACd,cAAa;;AAKf,SAAS,iBAAiB,SAA8B;AACtD,MAAK,MAAM,SAAS,SAAS;AAC3B,MAAI,MAAM,QAAS,OAAM,SAAS;EAClC,MAAM,UAAU,MAAM,IAAI;AAC1B,QAAM,UAAU,OAAO,YAAY,aAAa,UAAU;;;AAI9D,SAAS,gBAAgB,KAAoB,SAA8B;AACzE,KAAI,QAAQ,WAAW,EAAG;AAC1B,sBAAqB;AACnB,OAAK,MAAM,SAAS,SAAS;AAC3B,OAAI,IAAI,UAAW;AACnB,OAAI,MAAM,QAAS,OAAM,SAAS;GAClC,MAAM,UAAU,MAAM,IAAI;AAC1B,SAAM,UAAU,OAAO,YAAY,aAAa,UAAU;;GAE5D;;AAMJ,MAAM,gCAAgB,IAAI,SAAgC;AAG1D,SAAS,oBAAoB,gBAAuC;CAClE,IAAI,UAAU,cAAc,IAAI,eAAe;AAC/C,KAAI,QAAS,QAAO;AAIpB,aAAY,UAAiB;EAC3B,MAAM,MAAqB;GACzB,OAAO,EAAE;GACT,wBAAwB;GAGxB,gBAAgB,EAAE;GAClB,sBAAsB,EAAE;GACxB,WAAW;GACZ;EAED,MAAM,UAAU,OAAO,EAAE;EACzB,IAAI,kBAAkB;AAEtB,MAAI,yBAAyB;AAC3B,OAAI,IAAI,aAAa,gBAAiB;AACtC,qBAAkB;AAClB,wBAAqB;AACnB,sBAAkB;AAClB,QAAI,CAAC,IAAI,UAAW,SAAQ,IAAI,QAAQ,MAAM,GAAG,EAAE;KACnD;;AAIJ,eAAa;AACX,YAAS;AACT,eAAY,IAAI;GAChB,MAAM,SAAU,eAA+B,MAAM;GACrD,MAAM,gBAAgB,IAAI;GAC1B,MAAM,UAAU,IAAI;AACpB,cAAW;AAEX,oBAAiB,cAAc;AAC/B,mBAAgB,KAAK,QAAQ;AAE7B,UAAO;;;AAIX,eAAc,IAAI,gBAAgB,QAAQ;AAC1C,QAAO;;AAKT,SAAgB,IACd,MACA,OACA,KACO;CACP,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,eAAgB,OAAO,OAAO;EAAE,GAAG;EAAM;EAAK,GAAG;AAEvD,KAAI,OAAO,SAAS,WAIlB,QAAO,EAFS,oBAAoB,KAAK,EAClB,aAAa,SAAY;EAAE,GAAG;EAAc;EAAU,GAAG,aAC/C;CAInC,MAAM,aAAa,aAAa,SAAY,EAAE,GAAG,MAAM,QAAQ,SAAS,GAAG,WAAW,CAAC,SAAS;AAGhG,KAAI,OAAO,SAAS,YAAY,aAAa,cAAc,QAAW;AACpE,eAAa,QAAQ,aAAa;AAClC,SAAO,aAAa;;AAGtB,QAAO,EAAE,MAAM,cAAc,GAAI,WAA4B;;AAG/D,MAAa,OAAO"}
+{"version":3,"file":"jsx-runtime.js","names":[],"sources":["../src/jsx-runtime.ts"],"sourcesContent":["/**\n * Compat JSX runtime for React compatibility mode.\n *\n * When `jsxImportSource` is set to `@pyreon/react-compat` (via the vite plugin's\n * `compat: \"react\"` option), OXC rewrites JSX to import from this file:\n *   <div className=\"x\" />  →  jsx(\"div\", { className: \"x\" })\n *\n * For component VNodes, we wrap the component function so it returns a reactive\n * accessor — enabling React-style re-renders on state change while Pyreon's\n * existing renderer handles all DOM work.\n */\n\nimport type { ComponentFn, Props, VNode, VNodeChild } from '@pyreon/core'\nimport { Fragment, h } from '@pyreon/core'\nimport { signal } from '@pyreon/reactivity'\n\nexport { Fragment }\n\n// ─── Render context (used by hooks) ──────────────────────────────────────────\n\nexport interface RenderContext {\n  hooks: unknown[]\n  scheduleRerender: () => void\n  /** Effect entries pending execution after render */\n  pendingEffects: EffectEntry[]\n  /** Layout effect entries pending execution after render */\n  pendingLayoutEffects: EffectEntry[]\n  /** Set to true when the component is unmounted */\n  unmounted: boolean\n}\n\nexport interface EffectEntry {\n  // biome-ignore lint/suspicious/noConfusingVoidType: matches React's effect signature\n  fn: () => (() => void) | void\n  deps: unknown[] | undefined\n  cleanup: (() => void) | undefined\n}\n\nlet _currentCtx: RenderContext | null = null\nlet _hookIndex = 0\n\nexport function getCurrentCtx(): RenderContext | null {\n  return _currentCtx\n}\n\nexport function getHookIndex(): number {\n  return _hookIndex++\n}\n\nexport function beginRender(ctx: RenderContext): void {\n  _currentCtx = ctx\n  _hookIndex = 0\n  ctx.pendingEffects = []\n  ctx.pendingLayoutEffects = []\n}\n\nexport function endRender(): void {\n  _currentCtx = null\n  _hookIndex = 0\n}\n\n// ─── Effect runners ──────────────────────────────────────────────────────────\n\nfunction runLayoutEffects(entries: EffectEntry[]): void {\n  for (const entry of entries) {\n    if (entry.cleanup) entry.cleanup()\n    const cleanup = entry.fn()\n    entry.cleanup = typeof cleanup === 'function' ? cleanup : undefined\n  }\n}\n\nfunction scheduleEffects(ctx: RenderContext, entries: EffectEntry[]): void {\n  if (entries.length === 0) return\n  queueMicrotask(() => {\n    for (const entry of entries) {\n      if (ctx.unmounted) return\n      if (entry.cleanup) entry.cleanup()\n      const cleanup = entry.fn()\n      entry.cleanup = typeof cleanup === 'function' ? cleanup : undefined\n    }\n  })\n}\n\n// ─── Component wrapping ──────────────────────────────────────────────────────\n\n// biome-ignore lint/complexity/noBannedTypes: Function is needed for generic component wrapping\nconst _wrapperCache = new WeakMap<Function, ComponentFn>()\n\n// biome-ignore lint/complexity/noBannedTypes: Function is needed for generic component wrapping\nfunction wrapCompatComponent(reactComponent: Function): ComponentFn {\n  let wrapped = _wrapperCache.get(reactComponent)\n  if (wrapped) return wrapped\n\n  // The wrapper returns a reactive accessor (() => VNodeChild) which Pyreon's\n  // mountChild treats as a reactive expression via mountReactive.\n  wrapped = ((props: Props) => {\n    const ctx: RenderContext = {\n      hooks: [],\n      scheduleRerender: () => {\n        // Will be replaced below after version signal is created\n      },\n      pendingEffects: [],\n      pendingLayoutEffects: [],\n      unmounted: false,\n    }\n\n    const version = signal(0)\n    let updateScheduled = false\n\n    ctx.scheduleRerender = () => {\n      if (ctx.unmounted || updateScheduled) return\n      updateScheduled = true\n      queueMicrotask(() => {\n        updateScheduled = false\n        if (!ctx.unmounted) version.set(version.peek() + 1)\n      })\n    }\n\n    // Return reactive accessor — Pyreon's mountChild calls mountReactive\n    return () => {\n      version() // tracked read — triggers re-execution when state changes\n      beginRender(ctx)\n      const result = (reactComponent as ComponentFn)(props)\n      const layoutEffects = ctx.pendingLayoutEffects\n      const effects = ctx.pendingEffects\n      endRender()\n\n      runLayoutEffects(layoutEffects)\n      scheduleEffects(ctx, effects)\n\n      return result\n    }\n  }) as unknown as ComponentFn\n\n  _wrapperCache.set(reactComponent, wrapped)\n  return wrapped\n}\n\n// ─── JSX functions ───────────────────────────────────────────────────────────\n\nexport function jsx(\n  type: string | ComponentFn | symbol,\n  props: Props & { children?: VNodeChild | VNodeChild[] },\n  key?: string | number | null,\n): VNode {\n  const { children, ...rest } = props\n  const propsWithKey = (key != null ? { ...rest, key } : rest) as Props\n\n  if (typeof type === 'function') {\n    // Wrap React-style component for re-render support\n    const wrapped = wrapCompatComponent(type)\n    const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey\n    return h(wrapped, componentProps)\n  }\n\n  // DOM element or symbol (Fragment): children go in vnode.children\n  const childArray = children === undefined ? [] : Array.isArray(children) ? children : [children]\n\n  // Map className → class for React compat\n  if (typeof type === 'string' && propsWithKey.className !== undefined) {\n    propsWithKey.class = propsWithKey.className\n    delete propsWithKey.className\n  }\n\n  return h(type, propsWithKey, ...(childArray as VNodeChild[]))\n}\n\nexport const jsxs = jsx\nexport const jsxDEV = jsx\n"],"mappings":";;;;AAsCA,IAAI,cAAoC;AACxC,IAAI,aAAa;AAUjB,SAAgB,YAAY,KAA0B;AACpD,eAAc;AACd,cAAa;AACb,KAAI,iBAAiB,EAAE;AACvB,KAAI,uBAAuB,EAAE;;AAG/B,SAAgB,YAAkB;AAChC,eAAc;AACd,cAAa;;AAKf,SAAS,iBAAiB,SAA8B;AACtD,MAAK,MAAM,SAAS,SAAS;AAC3B,MAAI,MAAM,QAAS,OAAM,SAAS;EAClC,MAAM,UAAU,MAAM,IAAI;AAC1B,QAAM,UAAU,OAAO,YAAY,aAAa,UAAU;;;AAI9D,SAAS,gBAAgB,KAAoB,SAA8B;AACzE,KAAI,QAAQ,WAAW,EAAG;AAC1B,sBAAqB;AACnB,OAAK,MAAM,SAAS,SAAS;AAC3B,OAAI,IAAI,UAAW;AACnB,OAAI,MAAM,QAAS,OAAM,SAAS;GAClC,MAAM,UAAU,MAAM,IAAI;AAC1B,SAAM,UAAU,OAAO,YAAY,aAAa,UAAU;;GAE5D;;AAMJ,MAAM,gCAAgB,IAAI,SAAgC;AAG1D,SAAS,oBAAoB,gBAAuC;CAClE,IAAI,UAAU,cAAc,IAAI,eAAe;AAC/C,KAAI,QAAS,QAAO;AAIpB,aAAY,UAAiB;EAC3B,MAAM,MAAqB;GACzB,OAAO,EAAE;GACT,wBAAwB;GAGxB,gBAAgB,EAAE;GAClB,sBAAsB,EAAE;GACxB,WAAW;GACZ;EAED,MAAM,UAAU,OAAO,EAAE;EACzB,IAAI,kBAAkB;AAEtB,MAAI,yBAAyB;AAC3B,OAAI,IAAI,aAAa,gBAAiB;AACtC,qBAAkB;AAClB,wBAAqB;AACnB,sBAAkB;AAClB,QAAI,CAAC,IAAI,UAAW,SAAQ,IAAI,QAAQ,MAAM,GAAG,EAAE;KACnD;;AAIJ,eAAa;AACX,YAAS;AACT,eAAY,IAAI;GAChB,MAAM,SAAU,eAA+B,MAAM;GACrD,MAAM,gBAAgB,IAAI;GAC1B,MAAM,UAAU,IAAI;AACpB,cAAW;AAEX,oBAAiB,cAAc;AAC/B,mBAAgB,KAAK,QAAQ;AAE7B,UAAO;;;AAIX,eAAc,IAAI,gBAAgB,QAAQ;AAC1C,QAAO;;AAKT,SAAgB,IACd,MACA,OACA,KACO;CACP,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,eAAgB,OAAO,OAAO;EAAE,GAAG;EAAM;EAAK,GAAG;AAEvD,KAAI,OAAO,SAAS,WAIlB,QAAO,EAFS,oBAAoB,KAAK,EAClB,aAAa,SAAY;EAAE,GAAG;EAAc;EAAU,GAAG,aAC/C;CAInC,MAAM,aAAa,aAAa,SAAY,EAAE,GAAG,MAAM,QAAQ,SAAS,GAAG,WAAW,CAAC,SAAS;AAGhG,KAAI,OAAO,SAAS,YAAY,aAAa,cAAc,QAAW;AACpE,eAAa,QAAQ,aAAa;AAClC,SAAO,aAAa;;AAGtB,QAAO,EAAE,MAAM,cAAc,GAAI,WAA4B;;AAG/D,MAAa,OAAO"}

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@pyreon/react-compat",
-  "version": "0.11.4",
+  "version": "0.11.6",
   "description": "React-compatible API shim for Pyreon — write React-style hooks that run on Pyreon's reactive engine",
+  "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/react-compat#readme",
+  "bugs": {
+    "url": "https://github.com/pyreon/pyreon/issues"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon.git",
     "directory": "packages/tools/react-compat"
   },
-  "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/react-compat#readme",
-  "bugs": {
-    "url": "https://github.com/pyreon/pyreon/issues"
-  },
   "files": [
     "lib",
     "src",
     "README.md",
     "LICENSE"
   ],
-  "sideEffects": false,
   "type": "module",
+  "sideEffects": false,
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "types": "./lib/types/index.d.ts",
@@ -45,24 +45,24 @@
       "types": "./lib/types/jsx-runtime.d.ts"
     }
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "vl_rolldown_build",
     "dev": "vl_rolldown_build-watch",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
-    "lint": "biome check .",
+    "lint": "oxlint .",
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/core": "^0.11.4",
-    "@pyreon/reactivity": "^0.11.4",
-    "@pyreon/runtime-dom": "^0.11.4"
+    "@pyreon/core": "^0.11.6",
+    "@pyreon/reactivity": "^0.11.6",
+    "@pyreon/runtime-dom": "^0.11.6"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.3",
     "happy-dom": "^20.8.3"
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }

package/src/dom.ts

@@ -1,11 +1,11 @@
-import type { VNodeChild } from "@pyreon/core"
+import type { VNodeChild } from '@pyreon/core'
 /**
  * @pyreon/react-compat/dom
  *
  * Drop-in for `react-dom/client` — provides `createRoot` so you can keep
  * the same entry-point pattern as a React app.
  */
-import { mount } from "@pyreon/runtime-dom"
+import { mount } from '@pyreon/runtime-dom'
 
 /**
  * Drop-in for React 18's `createRoot(container).render(element)`.

package/src/index.ts

@@ -12,20 +12,20 @@
  *   import { createRoot } from "react-dom/client"         // aliased by vite plugin
  */
 
-export type { Props, VNode as ReactNode, VNodeChild } from "@pyreon/core"
-export { Fragment, h as createElement, h } from "@pyreon/core"
+export type { Props, VNode as ReactNode, VNodeChild } from '@pyreon/core'
+export { Fragment, h as createElement, h } from '@pyreon/core'
 
-import type { VNodeChild } from "@pyreon/core"
-import { createContext, ErrorBoundary, Portal, Suspense, useContext } from "@pyreon/core"
-import { batch } from "@pyreon/reactivity"
-import type { EffectEntry } from "./jsx-runtime"
-import { getCurrentCtx, getHookIndex } from "./jsx-runtime"
+import type { VNodeChild } from '@pyreon/core'
+import { createContext, ErrorBoundary, Portal, Suspense, useContext } from '@pyreon/core'
+import { batch } from '@pyreon/reactivity'
+import type { EffectEntry } from './jsx-runtime'
+import { getCurrentCtx, getHookIndex } from './jsx-runtime'
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 
 function requireCtx() {
   const ctx = getCurrentCtx()
-  if (!ctx) throw new Error("Hook called outside of a component render")
+  if (!ctx) throw new Error('Hook called outside of a component render')
   return ctx
 }
 
@@ -49,13 +49,13 @@ export function useState<T>(initial: T | (() => T)): [T, (v: T | ((prev: T) => T
   const idx = getHookIndex()
 
   if (ctx.hooks.length <= idx) {
-    ctx.hooks.push(typeof initial === "function" ? (initial as () => T)() : initial)
+    ctx.hooks.push(typeof initial === 'function' ? (initial as () => T)() : initial)
   }
 
   const value = ctx.hooks[idx] as T
   const setter = (v: T | ((prev: T) => T)) => {
     const current = ctx.hooks[idx] as T
-    const next = typeof v === "function" ? (v as (prev: T) => T)(current) : v
+    const next = typeof v === 'function' ? (v as (prev: T) => T)(current) : v
     if (Object.is(current, next)) return
     ctx.hooks[idx] = next
     ctx.scheduleRerender()
@@ -77,7 +77,7 @@ export function useReducer<S, A>(
   const idx = getHookIndex()
 
   if (ctx.hooks.length <= idx) {
-    ctx.hooks.push(typeof initial === "function" ? (initial as () => S)() : initial)
+    ctx.hooks.push(typeof initial === 'function' ? (initial as () => S)() : initial)
   }
 
   const state = ctx.hooks[idx] as S
@@ -291,5 +291,5 @@ export function createPortal(children: VNodeChild, target: Element): VNodeChild
 
 // ─── Suspense / lazy / ErrorBoundary ─────────────────────────────────────────
 
-export { lazy } from "@pyreon/core"
+export { lazy } from '@pyreon/core'
 export { ErrorBoundary, Suspense }

package/src/jsx-dev-runtime.ts

@@ -1 +1 @@
-export { Fragment, jsx, jsxs } from "./jsx-runtime"
+export { Fragment, jsx, jsxs } from './jsx-runtime'

package/src/jsx-runtime.ts

@@ -10,9 +10,9 @@
  * existing renderer handles all DOM work.
  */
 
-import type { ComponentFn, Props, VNode, VNodeChild } from "@pyreon/core"
-import { Fragment, h } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
+import type { ComponentFn, Props, VNode, VNodeChild } from '@pyreon/core'
+import { Fragment, h } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
 
 export { Fragment }
 
@@ -65,7 +65,7 @@ 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
+    entry.cleanup = typeof cleanup === 'function' ? cleanup : undefined
   }
 }
 
@@ -76,7 +76,7 @@ function scheduleEffects(ctx: RenderContext, entries: EffectEntry[]): void {
       if (ctx.unmounted) return
       if (entry.cleanup) entry.cleanup()
       const cleanup = entry.fn()
-      entry.cleanup = typeof cleanup === "function" ? cleanup : undefined
+      entry.cleanup = typeof cleanup === 'function' ? cleanup : undefined
     }
   })
 }
@@ -146,7 +146,7 @@ export function jsx(
   const { children, ...rest } = props
   const propsWithKey = (key != null ? { ...rest, key } : rest) as Props
 
-  if (typeof type === "function") {
+  if (typeof type === 'function') {
     // Wrap React-style component for re-render support
     const wrapped = wrapCompatComponent(type)
     const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey
@@ -157,7 +157,7 @@ export function jsx(
   const childArray = children === undefined ? [] : Array.isArray(children) ? children : [children]
 
   // Map className → class for React compat
-  if (typeof type === "string" && propsWithKey.className !== undefined) {
+  if (typeof type === 'string' && propsWithKey.className !== undefined) {
     propsWithKey.class = propsWithKey.className
     delete propsWithKey.className
   }

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

@@ -1,7 +1,7 @@
-import { h } from "@pyreon/core"
-import { effect, signal } from "@pyreon/reactivity"
-import { mount } from "@pyreon/runtime-dom"
-import { createRoot, render } from "../dom"
+import { h } from '@pyreon/core'
+import { effect, signal } from '@pyreon/reactivity'
+import { mount } from '@pyreon/runtime-dom'
+import { createRoot, render } from '../dom'
 import {
   batch,
   createContext,
@@ -24,12 +24,12 @@ import {
   useRef,
   useState,
   useTransition,
-} from "../index"
-import type { RenderContext } from "../jsx-runtime"
-import { beginRender, endRender, jsx } from "../jsx-runtime"
+} from '../index'
+import type { RenderContext } from '../jsx-runtime'
+import { beginRender, endRender, jsx } from '../jsx-runtime'
 
 function container(): HTMLElement {
-  const el = document.createElement("div")
+  const el = document.createElement('div')
   document.body.appendChild(el)
   return el
 }
@@ -71,13 +71,13 @@ function createHookRunner() {
 
 // ─── useState ─────────────────────────────────────────────────────────────────
 
-describe("useState", () => {
-  test("returns [value, setter] — value is the initial value", () => {
+describe('useState', () => {
+  test('returns [value, setter] — value is the initial value', () => {
     const [count] = withHookCtx(() => useState(0))
     expect(count).toBe(0)
   })
 
-  test("setter updates value on re-render", () => {
+  test('setter updates value on re-render', () => {
     const runner = createHookRunner()
     const [, setCount] = runner.run(() => useState(0))
     setCount(5)
@@ -85,7 +85,7 @@ describe("useState", () => {
     expect(count2).toBe(5)
   })
 
-  test("setter with function updater", () => {
+  test('setter with function updater', () => {
     const runner = createHookRunner()
     const [, setCount] = runner.run(() => useState(10))
     setCount((prev) => prev + 1)
@@ -93,7 +93,7 @@ describe("useState", () => {
     expect(count2).toBe(11)
   })
 
-  test("initializer function is called once", () => {
+  test('initializer function is called once', () => {
     let calls = 0
     const runner = createHookRunner()
     runner.run(() =>
@@ -113,7 +113,7 @@ describe("useState", () => {
     expect(calls).toBe(1)
   })
 
-  test("setter does nothing when value is the same (Object.is)", () => {
+  test('setter does nothing when value is the same (Object.is)', () => {
     const runner = createHookRunner()
     let rerenders = 0
     runner.ctx.scheduleRerender = () => {
@@ -126,7 +126,7 @@ describe("useState", () => {
     expect(rerenders).toBe(1)
   })
 
-  test("re-render in a component via compat JSX runtime", async () => {
+  test('re-render in a component via compat JSX runtime', async () => {
     const el = container()
     let renderCount = 0
     let triggerSet: (v: number | ((p: number) => number)) => void = () => {}
@@ -135,13 +135,13 @@ describe("useState", () => {
       const [count, setCount] = useState(0)
       renderCount++
       triggerSet = setCount
-      return h("span", null, String(count))
+      return h('span', null, String(count))
     }
 
     // Use compat jsx() to wrap the component
     const vnode = jsx(Counter, {})
     mount(vnode, el)
-    expect(el.textContent).toBe("0")
+    expect(el.textContent).toBe('0')
     // mountChild samples the accessor once (untracked) + effect runs it once = 2 renders
     const initialRenders = renderCount
 
@@ -150,33 +150,33 @@ describe("useState", () => {
     await new Promise<void>((r) => queueMicrotask(r))
     // Need another microtask for the effect to propagate
     await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.textContent).toBe("1")
+    expect(el.textContent).toBe('1')
     expect(renderCount).toBe(initialRenders + 1)
   })
 })
 
 // ─── useReducer ───────────────────────────────────────────────────────────────
 
-describe("useReducer", () => {
-  test("dispatch applies reducer", () => {
+describe('useReducer', () => {
+  test('dispatch applies reducer', () => {
     const runner = createHookRunner()
-    type Action = { type: "inc" } | { type: "dec" }
+    type Action = { type: 'inc' } | { type: 'dec' }
     const reducer = (state: number, action: Action) =>
-      action.type === "inc" ? state + 1 : state - 1
+      action.type === 'inc' ? state + 1 : state - 1
 
     const [state0, dispatch] = runner.run(() => useReducer(reducer, 0))
     expect(state0).toBe(0)
 
-    dispatch({ type: "inc" })
+    dispatch({ type: 'inc' })
     const [state1] = runner.run(() => useReducer(reducer, 0))
     expect(state1).toBe(1)
 
-    dispatch({ type: "dec" })
+    dispatch({ type: 'dec' })
     const [state2] = runner.run(() => useReducer(reducer, 0))
     expect(state2).toBe(0)
   })
 
-  test("initializer function is called once", () => {
+  test('initializer function is called once', () => {
     let calls = 0
     const runner = createHookRunner()
     const [state] = runner.run(() =>
@@ -203,22 +203,22 @@ describe("useReducer", () => {
     expect(calls).toBe(1)
   })
 
-  test("dispatch does nothing when reducer returns same state", () => {
+  test('dispatch does nothing when reducer returns same state', () => {
     const runner = createHookRunner()
     let rerenders = 0
     runner.ctx.scheduleRerender = () => {
       rerenders++
     }
     const [, dispatch] = runner.run(() => useReducer((_s: number, _a: string) => 5, 5))
-    dispatch("anything") // reducer returns 5, same as current
+    dispatch('anything') // reducer returns 5, same as current
     expect(rerenders).toBe(0)
   })
 })
 
 // ─── useEffect ────────────────────────────────────────────────────────────────
 
-describe("useEffect", () => {
-  test("effect runs after render via compat JSX runtime", async () => {
+describe('useEffect', () => {
+  test('effect runs after render via compat JSX runtime', async () => {
     const el = container()
     let effectRuns = 0
 
@@ -226,7 +226,7 @@ describe("useEffect", () => {
       useEffect(() => {
         effectRuns++
       })
-      return h("div", null, "test")
+      return h('div', null, 'test')
     }
 
     mount(jsx(Comp, {}), el)
@@ -235,7 +235,7 @@ describe("useEffect", () => {
     expect(effectRuns).toBeGreaterThanOrEqual(1)
   })
 
-  test("effect with empty deps runs once", async () => {
+  test('effect with empty deps runs once', async () => {
     const el = container()
     let effectRuns = 0
     let triggerSet: (v: number) => void = () => {}
@@ -246,7 +246,7 @@ describe("useEffect", () => {
       useEffect(() => {
         effectRuns++
       }, [])
-      return h("div", null, String(count))
+      return h('div', null, String(count))
     }
 
     mount(jsx(Comp, {}), el)
@@ -260,7 +260,7 @@ describe("useEffect", () => {
     expect(effectRuns).toBe(1)
   })
 
-  test("effect with deps re-runs when deps change", async () => {
+  test('effect with deps re-runs when deps change', async () => {
     const el = container()
     let effectRuns = 0
     let triggerSet: (v: number | ((p: number) => number)) => void = () => {}
@@ -271,7 +271,7 @@ describe("useEffect", () => {
       useEffect(() => {
         effectRuns++
       }, [count])
-      return h("div", null, String(count))
+      return h('div', null, String(count))
     }
 
     mount(jsx(Comp, {}), el)
@@ -286,7 +286,7 @@ describe("useEffect", () => {
     expect(effectRuns).toBe(2)
   })
 
-  test("effect cleanup runs before re-execution", async () => {
+  test('effect cleanup runs before re-execution', async () => {
     const el = container()
     let cleanups = 0
     let triggerSet: (v: number | ((p: number) => number)) => void = () => {}
@@ -299,7 +299,7 @@ describe("useEffect", () => {
           cleanups++
         }
       }, [count])
-      return h("div", null, String(count))
+      return h('div', null, String(count))
     }
 
     mount(jsx(Comp, {}), el)
@@ -313,7 +313,7 @@ describe("useEffect", () => {
     expect(cleanups).toBe(1)
   })
 
-  test("pendingEffects populated during render", () => {
+  test('pendingEffects populated during render', () => {
     const runner = createHookRunner()
     runner.run(() => {
       useEffect(() => {
@@ -323,7 +323,7 @@ describe("useEffect", () => {
     expect(runner.ctx.pendingEffects).toHaveLength(1)
   })
 
-  test("effect with same deps does not re-queue", () => {
+  test('effect with same deps does not re-queue', () => {
     const runner = createHookRunner()
     runner.run(() => {
       useEffect(() => {}, [1, 2])
@@ -340,8 +340,8 @@ describe("useEffect", () => {
 
 // ─── useLayoutEffect ─────────────────────────────────────────────────────────
 
-describe("useLayoutEffect", () => {
-  test("layout effect runs synchronously during render in compat runtime", () => {
+describe('useLayoutEffect', () => {
+  test('layout effect runs synchronously during render in compat runtime', () => {
     const el = container()
     let effectRuns = 0
 
@@ -349,7 +349,7 @@ describe("useLayoutEffect", () => {
       useLayoutEffect(() => {
         effectRuns++
       })
-      return h("div", null, "layout")
+      return h('div', null, 'layout')
     }
 
     mount(jsx(Comp, {}), el)
@@ -357,7 +357,7 @@ describe("useLayoutEffect", () => {
     expect(effectRuns).toBeGreaterThanOrEqual(1)
   })
 
-  test("pendingLayoutEffects populated during render", () => {
+  test('pendingLayoutEffects populated during render', () => {
     const runner = createHookRunner()
     runner.run(() => {
       useLayoutEffect(() => {})
@@ -365,7 +365,7 @@ describe("useLayoutEffect", () => {
     expect(runner.ctx.pendingLayoutEffects).toHaveLength(1)
   })
 
-  test("layout effect with same deps does not re-queue", () => {
+  test('layout effect with same deps does not re-queue', () => {
     const runner = createHookRunner()
     runner.run(() => {
       useLayoutEffect(() => {}, [1])
@@ -381,13 +381,13 @@ describe("useLayoutEffect", () => {
 
 // ─── useMemo ──────────────────────────────────────────────────────────────────
 
-describe("useMemo", () => {
-  test("returns computed value", () => {
+describe('useMemo', () => {
+  test('returns computed value', () => {
     const value = withHookCtx(() => useMemo(() => 3 * 2, []))
     expect(value).toBe(6)
   })
 
-  test("recomputes when deps change", () => {
+  test('recomputes when deps change', () => {
     const runner = createHookRunner()
     const v1 = runner.run(() => useMemo(() => 10, [1]))
     expect(v1).toBe(10)
@@ -404,8 +404,8 @@ describe("useMemo", () => {
 
 // ─── useCallback ──────────────────────────────────────────────────────────────
 
-describe("useCallback", () => {
-  test("returns the same function when deps unchanged", () => {
+describe('useCallback', () => {
+  test('returns the same function when deps unchanged', () => {
     const runner = createHookRunner()
     const fn1 = () => 42
     const fn2 = () => 99
@@ -415,7 +415,7 @@ describe("useCallback", () => {
     expect(result1()).toBe(42)
   })
 
-  test("returns new function when deps change", () => {
+  test('returns new function when deps change', () => {
     const runner = createHookRunner()
     const fn1 = () => 42
     const fn2 = () => 99
@@ -429,24 +429,24 @@ describe("useCallback", () => {
 
 // ─── useRef ───────────────────────────────────────────────────────────────────
 
-describe("useRef", () => {
-  test("returns { current } with null default", () => {
+describe('useRef', () => {
+  test('returns { current } with null default', () => {
     const ref = withHookCtx(() => useRef<HTMLDivElement>())
     expect(ref.current).toBeNull()
   })
 
-  test("returns { current } with initial value", () => {
+  test('returns { current } with initial value', () => {
     const ref = withHookCtx(() => useRef(42))
     expect(ref.current).toBe(42)
   })
 
-  test("current is mutable", () => {
+  test('current is mutable', () => {
     const ref = withHookCtx(() => useRef(0))
     ref.current = 10
     expect(ref.current).toBe(10)
   })
 
-  test("same ref object persists across re-renders", () => {
+  test('same ref object persists across re-renders', () => {
     const runner = createHookRunner()
     const ref1 = runner.run(() => useRef(0))
     ref1.current = 99
@@ -458,27 +458,27 @@ describe("useRef", () => {
 
 // ─── memo ─────────────────────────────────────────────────────────────────────
 
-describe("memo", () => {
-  test("skips re-render when props are shallowly equal", () => {
+describe('memo', () => {
+  test('skips re-render when props are shallowly equal', () => {
     let renderCount = 0
     const MyComp = (props: { name: string }) => {
       renderCount++
-      return h("span", null, props.name)
+      return h('span', null, props.name)
     }
     const Memoized = memo(MyComp)
-    Memoized({ name: "a" })
+    Memoized({ name: 'a' })
     expect(renderCount).toBe(1)
-    Memoized({ name: "a" })
+    Memoized({ name: 'a' })
     expect(renderCount).toBe(1) // same props — skipped
-    Memoized({ name: "b" })
+    Memoized({ name: 'b' })
     expect(renderCount).toBe(2) // different props — re-rendered
   })
 
-  test("custom areEqual function", () => {
+  test('custom areEqual function', () => {
     let renderCount = 0
     const MyComp = (props: { x: number; y: number }) => {
       renderCount++
-      return h("span", null, String(props.x))
+      return h('span', null, String(props.x))
     }
     // Only compare x, ignore y
     const Memoized = memo(MyComp, (prev, next) => prev.x === next.x)
@@ -490,11 +490,11 @@ describe("memo", () => {
     expect(renderCount).toBe(2) // x changed → re-rendered
   })
 
-  test("different number of keys triggers re-render", () => {
+  test('different number of keys triggers re-render', () => {
     let renderCount = 0
     const MyComp = (_props: Record<string, unknown>) => {
       renderCount++
-      return h("span", null, "x")
+      return h('span', null, 'x')
     }
     const Memoized = memo(MyComp)
     Memoized({ a: 1 })
@@ -506,8 +506,8 @@ describe("memo", () => {
 
 // ─── useTransition ────────────────────────────────────────────────────────────
 
-describe("useTransition", () => {
-  test("returns [false, fn => fn()]", () => {
+describe('useTransition', () => {
+  test('returns [false, fn => fn()]', () => {
     const [isPending, startTransition] = useTransition()
     expect(isPending).toBe(false)
     let ran = false
@@ -520,10 +520,10 @@ describe("useTransition", () => {
 
 // ─── useDeferredValue ─────────────────────────────────────────────────────────
 
-describe("useDeferredValue", () => {
-  test("returns value as-is", () => {
+describe('useDeferredValue', () => {
+  test('returns value as-is', () => {
     expect(useDeferredValue(42)).toBe(42)
-    expect(useDeferredValue("hello")).toBe("hello")
+    expect(useDeferredValue('hello')).toBe('hello')
     const obj = { a: 1 }
     expect(useDeferredValue(obj)).toBe(obj)
   })
@@ -531,15 +531,15 @@ describe("useDeferredValue", () => {
 
 // ─── useId ────────────────────────────────────────────────────────────────────
 
-describe("useId", () => {
-  test("returns a unique string within a component", () => {
+describe('useId', () => {
+  test('returns a unique string within a component', () => {
     const el = container()
     const ids: string[] = []
 
     const Comp = () => {
       ids.push(useId())
       ids.push(useId())
-      return h("div", null, "id-test")
+      return h('div', null, 'id-test')
     }
 
     mount(jsx(Comp, {}), el)
@@ -547,11 +547,11 @@ describe("useId", () => {
     expect(ids.length).toBeGreaterThanOrEqual(2)
     // Within a single render, two useId calls produce different IDs
     expect(ids[0]).not.toBe(ids[1])
-    expect(typeof ids[0]).toBe("string")
-    expect(ids[0]?.startsWith(":r")).toBe(true)
+    expect(typeof ids[0]).toBe('string')
+    expect(ids[0]?.startsWith(':r')).toBe(true)
   })
 
-  test("IDs are stable across re-renders", async () => {
+  test('IDs are stable across re-renders', async () => {
     const el = container()
     const idHistory: string[] = []
     let triggerSet: (v: number) => void = () => {}
@@ -561,7 +561,7 @@ describe("useId", () => {
       triggerSet = setCount
       const id = useId()
       idHistory.push(id)
-      return h("div", null, `${id}-${count}`)
+      return h('div', null, `${id}-${count}`)
     }
 
     mount(jsx(Comp, {}), el)
@@ -581,32 +581,32 @@ describe("useId", () => {
 
 // ─── createPortal ─────────────────────────────────────────────────────────────
 
-describe("createPortal", () => {
-  test("creates a portal VNode that renders into target", () => {
+describe('createPortal', () => {
+  test('creates a portal VNode that renders into target', () => {
     const src = container()
     const target = container()
-    mount(createPortal(h("span", null, "portaled"), target), src)
-    expect(target.querySelector("span")?.textContent).toBe("portaled")
-    expect(src.querySelector("span")).toBeNull()
+    mount(createPortal(h('span', null, 'portaled'), target), src)
+    expect(target.querySelector('span')?.textContent).toBe('portaled')
+    expect(src.querySelector('span')).toBeNull()
   })
 })
 
 // ─── lazy ─────────────────────────────────────────────────────────────────────
 
-describe("lazy", () => {
-  test("returns a component that loads async", async () => {
-    const MyComp = (props: { text: string }) => h("p", null, props.text)
+describe('lazy', () => {
+  test('returns a component that loads async', async () => {
+    const MyComp = (props: { text: string }) => h('p', null, props.text)
     const Lazy = lazy(() => Promise.resolve({ default: MyComp }))
 
-    expect(Lazy({ text: "hello" })).toBeNull()
+    expect(Lazy({ text: 'hello' })).toBeNull()
 
     await new Promise<void>((r) => setTimeout(r, 10))
-    const result = Lazy({ text: "hello" })
+    const result = Lazy({ text: 'hello' })
     expect(result).not.toBeNull()
   })
 
-  test("__loading reports loading state", async () => {
-    const MyComp = () => h("div", null, "loaded")
+  test('__loading reports loading state', async () => {
+    const MyComp = () => h('div', null, 'loaded')
     const Lazy = lazy(() => Promise.resolve({ default: MyComp }))
     expect(Lazy.__loading()).toBe(true)
     await new Promise<void>((r) => setTimeout(r, 10))
@@ -616,8 +616,8 @@ describe("lazy", () => {
 
 // ─── batch ────────────────────────────────────────────────────────────────────
 
-describe("batch", () => {
-  test("groups multiple signal updates into one flush", () => {
+describe('batch', () => {
+  test('groups multiple signal updates into one flush', () => {
     const a = signal(0)
     const b = signal(0)
     let runs = 0
@@ -637,88 +637,88 @@ describe("batch", () => {
 
 // ─── createRoot (dom.ts) ──────────────────────────────────────────────────────
 
-describe("createRoot", () => {
-  test("render mounts element into container", () => {
+describe('createRoot', () => {
+  test('render mounts element into container', () => {
     const el = container()
     const root = createRoot(el)
-    root.render(h("div", { id: "root-test" }, "hello"))
-    expect(el.querySelector("#root-test")?.textContent).toBe("hello")
+    root.render(h('div', { id: 'root-test' }, 'hello'))
+    expect(el.querySelector('#root-test')?.textContent).toBe('hello')
   })
 
-  test("unmount removes content", () => {
+  test('unmount removes content', () => {
     const el = container()
     const root = createRoot(el)
-    root.render(h("p", null, "mounted"))
-    expect(el.querySelector("p")).not.toBeNull()
+    root.render(h('p', null, 'mounted'))
+    expect(el.querySelector('p')).not.toBeNull()
     root.unmount()
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
   })
 
-  test("re-render replaces previous content", () => {
+  test('re-render replaces previous content', () => {
     const el = container()
     const root = createRoot(el)
-    root.render(h("span", null, "first"))
-    expect(el.textContent).toBe("first")
-    root.render(h("span", null, "second"))
-    expect(el.textContent).toBe("second")
+    root.render(h('span', null, 'first'))
+    expect(el.textContent).toBe('first')
+    root.render(h('span', null, 'second'))
+    expect(el.textContent).toBe('second')
   })
 
-  test("unmount after unmount is safe (no-op)", () => {
+  test('unmount after unmount is safe (no-op)', () => {
     const el = container()
     const root = createRoot(el)
-    root.render(h("div", null, "x"))
+    root.render(h('div', null, 'x'))
     root.unmount()
     root.unmount()
-    expect(el.innerHTML).toBe("")
+    expect(el.innerHTML).toBe('')
   })
 })
 
 // ─── render (dom.ts) ──────────────────────────────────────────────────────────
 
-describe("render", () => {
-  test("mounts element into container", () => {
+describe('render', () => {
+  test('mounts element into container', () => {
     const el = container()
-    render(h("div", { id: "render-test" }, "world"), el)
-    expect(el.querySelector("#render-test")?.textContent).toBe("world")
+    render(h('div', { id: 'render-test' }, 'world'), el)
+    expect(el.querySelector('#render-test')?.textContent).toBe('world')
   })
 })
 
 // ─── useImperativeHandle ─────────────────────────────────────────────────────
 
-describe("useImperativeHandle", () => {
-  test("sets ref.current via layout effect", () => {
+describe('useImperativeHandle', () => {
+  test('sets ref.current via layout effect', () => {
     const el = container()
     const ref = { current: null as { greet: () => string } | null }
 
     const Comp = () => {
       useImperativeHandle(ref, () => ({
-        greet: () => "hello",
+        greet: () => 'hello',
       }))
-      return h("div", null, "imp")
+      return h('div', null, 'imp')
     }
 
     mount(jsx(Comp, {}), el)
     expect(ref.current).not.toBeNull()
-    expect(ref.current?.greet()).toBe("hello")
+    expect(ref.current?.greet()).toBe('hello')
   })
 
-  test("no-op when ref is null", () => {
+  test('no-op when ref is null', () => {
     const el = container()
 
     const Comp = () => {
       useImperativeHandle(null, () => ({ value: 42 }))
-      return h("div", null, "no-ref")
+      return h('div', null, 'no-ref')
     }
 
     mount(jsx(Comp, {}), el)
   })
 
-  test("no-op when ref is undefined", () => {
+  test('no-op when ref is undefined', () => {
     const el = container()
 
     const Comp = () => {
       useImperativeHandle(undefined, () => ({ value: 42 }))
-      return h("div", null, "undef-ref")
+      return h('div', null, 'undef-ref')
     }
 
     mount(jsx(Comp, {}), el)
@@ -727,125 +727,125 @@ describe("useImperativeHandle", () => {
 
 // ─── Re-exports ───────────────────────────────────────────────────────────────
 
-describe("re-exports", () => {
-  test("createElement is h", () => {
+describe('re-exports', () => {
+  test('createElement is h', () => {
     expect(createElement).toBe(h)
   })
 
-  test("Fragment is exported", () => {
-    expect(typeof Fragment).toBe("symbol")
+  test('Fragment is exported', () => {
+    expect(typeof Fragment).toBe('symbol')
   })
 
-  test("createContext creates context with default", () => {
-    const Ctx = createContext("default")
-    expect(useContext(Ctx)).toBe("default")
+  test('createContext creates context with default', () => {
+    const Ctx = createContext('default')
+    expect(useContext(Ctx)).toBe('default')
   })
 
-  test("useContext reads from context", () => {
+  test('useContext reads from context', () => {
     const Ctx = createContext(42)
     expect(useContext(Ctx)).toBe(42)
   })
 
-  test("Suspense is exported", () => {
-    expect(typeof Suspense).toBe("function")
+  test('Suspense is exported', () => {
+    expect(typeof Suspense).toBe('function')
   })
 
-  test("ErrorBoundary is exported", () => {
-    expect(typeof ErrorBoundary).toBe("function")
+  test('ErrorBoundary is exported', () => {
+    expect(typeof ErrorBoundary).toBe('function')
   })
 
-  test("useLayoutEffect is a function", () => {
-    expect(typeof useLayoutEffect).toBe("function")
+  test('useLayoutEffect is a function', () => {
+    expect(typeof useLayoutEffect).toBe('function')
   })
 })
 
 // ─── jsx-runtime ──────────────────────────────────────────────────────────────
 
-describe("jsx-runtime", () => {
-  test("jsx with string type creates element VNode", () => {
-    const vnode = jsx("div", { className: "test", children: "hello" })
+describe('jsx-runtime', () => {
+  test('jsx with string type creates element VNode', () => {
+    const vnode = jsx('div', { className: 'test', children: 'hello' })
     // className should be mapped to class
-    expect(vnode.props.class).toBe("test")
+    expect(vnode.props.class).toBe('test')
     expect(vnode.props.className).toBeUndefined()
   })
 
-  test("jsx with key prop", () => {
-    const vnode = jsx("div", { children: "x" }, "my-key")
-    expect(vnode.props.key).toBe("my-key")
+  test('jsx with key prop', () => {
+    const vnode = jsx('div', { children: 'x' }, 'my-key')
+    expect(vnode.props.key).toBe('my-key')
   })
 
-  test("jsx with component wraps for re-render", () => {
-    const MyComp = () => h("span", null, "hi")
+  test('jsx with component wraps for re-render', () => {
+    const MyComp = () => h('span', null, 'hi')
     const vnode = jsx(MyComp, {})
     // The component should be wrapped (different from original)
     expect(vnode.type).not.toBe(MyComp)
-    expect(typeof vnode.type).toBe("function")
+    expect(typeof vnode.type).toBe('function')
   })
 
-  test("jsx with Fragment", () => {
-    const vnode = jsx(Fragment, { children: [h("span", null, "a"), h("span", null, "b")] })
+  test('jsx with Fragment', () => {
+    const vnode = jsx(Fragment, { children: [h('span', null, 'a'), h('span', null, 'b')] })
     expect(vnode.type).toBe(Fragment)
   })
 
-  test("jsx with single child (not array)", () => {
-    const vnode = jsx("div", { children: "text" })
+  test('jsx with single child (not array)', () => {
+    const vnode = jsx('div', { children: 'text' })
     expect(vnode.children).toHaveLength(1)
   })
 
-  test("jsx with no children", () => {
-    const vnode = jsx("div", {})
+  test('jsx with no children', () => {
+    const vnode = jsx('div', {})
     expect(vnode.children).toHaveLength(0)
   })
 
-  test("jsx component with children in props", () => {
-    const MyComp = (props: { children?: string }) => h("div", null, props.children ?? "")
-    const vnode = jsx(MyComp, { children: "child-text" })
-    expect(typeof vnode.type).toBe("function")
+  test('jsx component with children in props', () => {
+    const MyComp = (props: { children?: string }) => h('div', null, props.children ?? '')
+    const vnode = jsx(MyComp, { children: 'child-text' })
+    expect(typeof vnode.type).toBe('function')
   })
 })
 
 // ─── Hook error when called outside component ────────────────────────────────
 
-describe("hooks outside component", () => {
-  test("useState throws when called outside render", () => {
-    expect(() => useState(0)).toThrow("Hook called outside")
+describe('hooks outside component', () => {
+  test('useState throws when called outside render', () => {
+    expect(() => useState(0)).toThrow('Hook called outside')
   })
 
-  test("useEffect throws when called outside render", () => {
-    expect(() => useEffect(() => {})).toThrow("Hook called outside")
+  test('useEffect throws when called outside render', () => {
+    expect(() => useEffect(() => {})).toThrow('Hook called outside')
   })
 
-  test("useRef throws when called outside render", () => {
-    expect(() => useRef(0)).toThrow("Hook called outside")
+  test('useRef throws when called outside render', () => {
+    expect(() => useRef(0)).toThrow('Hook called outside')
   })
 
-  test("useMemo throws when called outside render", () => {
-    expect(() => useMemo(() => 0, [])).toThrow("Hook called outside")
+  test('useMemo throws when called outside render', () => {
+    expect(() => useMemo(() => 0, [])).toThrow('Hook called outside')
   })
 
-  test("useId throws when called outside render", () => {
-    expect(() => useId()).toThrow("Hook called outside")
+  test('useId throws when called outside render', () => {
+    expect(() => useId()).toThrow('Hook called outside')
   })
 
-  test("useReducer throws when called outside render", () => {
-    expect(() => useReducer((s: number) => s, 0)).toThrow("Hook called outside")
+  test('useReducer throws when called outside render', () => {
+    expect(() => useReducer((s: number) => s, 0)).toThrow('Hook called outside')
   })
 })
 
 // ─── Edge cases ──────────────────────────────────────────────────────────────
 
-describe("edge cases", () => {
-  test("useState with string initial", () => {
-    const [val] = withHookCtx(() => useState("hello"))
-    expect(val).toBe("hello")
+describe('edge cases', () => {
+  test('useState with string initial', () => {
+    const [val] = withHookCtx(() => useState('hello'))
+    expect(val).toBe('hello')
   })
 
-  test("useReducer with non-function initial", () => {
-    const [state] = withHookCtx(() => useReducer((s: string, a: string) => s + a, "start"))
-    expect(state).toBe("start")
+  test('useReducer with non-function initial', () => {
+    const [state] = withHookCtx(() => useReducer((s: string, a: string) => s + a, 'start'))
+    expect(state).toBe('start')
   })
 
-  test("depsChanged handles different length arrays", () => {
+  test('depsChanged handles different length arrays', () => {
     const runner = createHookRunner()
     runner.run(() => {
       useEffect(() => {}, [1, 2])
@@ -859,7 +859,7 @@ describe("edge cases", () => {
     expect(runner.ctx.pendingEffects).toHaveLength(1)
   })
 
-  test("depsChanged with undefined deps always re-runs", () => {
+  test('depsChanged with undefined deps always re-runs', () => {
     const runner = createHookRunner()
     runner.run(() => {
       useEffect(() => {})

package/src/tests/setup.ts

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