@pyreon/react-compat 0.12.8 → 0.12.10

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"6c313ed2-1","name":"jsx-runtime.ts"},{"uid":"6c313ed2-3","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"6c313ed2-1":{"renderedLength":186,"gzipLength":138,"brotliLength":0,"metaUid":"6c313ed2-0"},"6c313ed2-3":{"renderedLength":4990,"gzipLength":1386,"brotliLength":0,"metaUid":"6c313ed2-2"}},"nodeMetas":{"6c313ed2-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"index.js":"6c313ed2-1"},"imported":[{"uid":"6c313ed2-4"},{"uid":"6c313ed2-5"}],"importedBy":[{"uid":"6c313ed2-2"}]},"6c313ed2-2":{"id":"/src/index.ts","moduleParts":{"index.js":"6c313ed2-3"},"imported":[{"uid":"6c313ed2-4"},{"uid":"6c313ed2-5"},{"uid":"6c313ed2-0"}],"importedBy":[],"isEntry":true},"6c313ed2-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"6c313ed2-2"},{"uid":"6c313ed2-0"}]},"6c313ed2-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"6c313ed2-2"},{"uid":"6c313ed2-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"32dc1380-1","name":"jsx-runtime.ts"},{"uid":"32dc1380-3","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"32dc1380-1":{"renderedLength":186,"gzipLength":138,"brotliLength":0,"metaUid":"32dc1380-0"},"32dc1380-3":{"renderedLength":7034,"gzipLength":1959,"brotliLength":0,"metaUid":"32dc1380-2"}},"nodeMetas":{"32dc1380-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"index.js":"32dc1380-1"},"imported":[{"uid":"32dc1380-4"},{"uid":"32dc1380-5"}],"importedBy":[{"uid":"32dc1380-2"}]},"32dc1380-2":{"id":"/src/index.ts","moduleParts":{"index.js":"32dc1380-3"},"imported":[{"uid":"32dc1380-4"},{"uid":"32dc1380-5"},{"uid":"32dc1380-0"}],"importedBy":[],"isEntry":true},"32dc1380-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"32dc1380-2"},{"uid":"32dc1380-0"}]},"32dc1380-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"32dc1380-2"},{"uid":"32dc1380-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/analysis/jsx-runtime.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"jsx-runtime.js","children":[{"name":"src","children":[{"uid":"d0bc860c-1","name":"jsx-runtime.ts"},{"uid":"d0bc860c-3","name":"jsx-dev-runtime.ts"}]}]}],"isRoot":true},"nodeParts":{"d0bc860c-1":{"renderedLength":2389,"gzipLength":846,"brotliLength":0,"metaUid":"d0bc860c-0"},"d0bc860c-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"d0bc860c-2"}},"nodeMetas":{"d0bc860c-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"d0bc860c-1"},"imported":[{"uid":"d0bc860c-4"},{"uid":"d0bc860c-5"}],"importedBy":[{"uid":"d0bc860c-2"}]},"d0bc860c-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"d0bc860c-3"},"imported":[{"uid":"d0bc860c-0"}],"importedBy":[],"isEntry":true},"d0bc860c-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"d0bc860c-0"}]},"d0bc860c-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"d0bc860c-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"jsx-runtime.js","children":[{"name":"src","children":[{"uid":"243e8c0a-1","name":"jsx-runtime.ts"},{"uid":"243e8c0a-3","name":"jsx-dev-runtime.ts"}]}]}],"isRoot":true},"nodeParts":{"243e8c0a-1":{"renderedLength":2522,"gzipLength":870,"brotliLength":0,"metaUid":"243e8c0a-0"},"243e8c0a-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"243e8c0a-2"}},"nodeMetas":{"243e8c0a-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"243e8c0a-1"},"imported":[{"uid":"243e8c0a-4"},{"uid":"243e8c0a-5"}],"importedBy":[{"uid":"243e8c0a-2"}]},"243e8c0a-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"243e8c0a-3"},"imported":[{"uid":"243e8c0a-0"}],"importedBy":[],"isEntry":true},"243e8c0a-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"243e8c0a-0"}]},"243e8c0a-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"243e8c0a-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -1,4 +1,4 @@
-import { ErrorBoundary, Fragment, Portal, Suspense, createContext, h, h as createElement, lazy, useContext } from "@pyreon/core";
+import { ErrorBoundary, Fragment, Portal, Suspense, createContext, h, h as createElement, h as h$1, lazy, useContext } from "@pyreon/core";
 import { batch } from "@pyreon/reactivity";
 
 //#region src/jsx-runtime.ts
@@ -208,7 +208,74 @@ function createPortal(children, target) {
 		children
 	});
 }
+/**
+* React-compatible `forwardRef` — pass-through in Pyreon.
+* Refs are regular props in Pyreon, so no wrapper is needed.
+* The render function receives (props, ref) — we merge ref into props.
+*/
+function forwardRef(render) {
+	return (props) => {
+		const { ref, ...rest } = props;
+		return render(rest, ref ?? null);
+	};
+}
+/**
+* React-compatible `cloneElement` — creates a new VNode with merged props.
+*/
+function cloneElement(element, props, ...children) {
+	const mergedProps = {
+		...element.props,
+		...props
+	};
+	const mergedChildren = children.length > 0 ? children : element.children;
+	return h$1(element.type, mergedProps, ...mergedChildren);
+}
+function flattenChildren(children) {
+	if (children == null) return [];
+	if (!Array.isArray(children)) return [children];
+	const result = [];
+	for (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));
+	else result.push(child);
+	return result;
+}
+/**
+* React-compatible `Children` utilities for working with VNode children.
+*/
+const Children = {
+	map(children, fn) {
+		const flat = flattenChildren(children);
+		const result = [];
+		for (let i = 0; i < flat.length; i++) {
+			const child = flat[i];
+			if (child == null || child === true || child === false) continue;
+			result.push(fn(child, i));
+		}
+		return result;
+	},
+	forEach(children, fn) {
+		const flat = flattenChildren(children);
+		for (let i = 0; i < flat.length; i++) {
+			const child = flat[i];
+			if (child == null || child === true || child === false) continue;
+			fn(child, i);
+		}
+	},
+	count(children) {
+		const flat = flattenChildren(children);
+		let count = 0;
+		for (const child of flat) if (child != null && child !== true && child !== false) count++;
+		return count;
+	},
+	toArray(children) {
+		return flattenChildren(children).filter((child) => child != null && child !== true && child !== false);
+	},
+	only(children) {
+		const arr = Children.toArray(children);
+		if (arr.length !== 1) throw new Error("[Pyreon] Children.only expected exactly one child");
+		return arr[0];
+	}
+};
 
 //#endregion
-export { ErrorBoundary, Fragment, Suspense, batch, createContext, createElement, createPortal, h, lazy, memo, useCallback, useContext, useDeferredValue, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useTransition };
+export { Children, ErrorBoundary, Fragment, Suspense, batch, cloneElement, createContext, createElement, createPortal, forwardRef, h, lazy, memo, useCallback, useContext, useDeferredValue, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useTransition };
 //# sourceMappingURL=index.js.map

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  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\nconst _wrapperCache = new WeakMap<Function, ComponentFn>()\n\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 */\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 */\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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"}
+{"version":3,"file":"index.js","names":["h"],"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  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\nconst _wrapperCache = new WeakMap<Function, ComponentFn>()\n\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 React-style attributes to standard HTML attributes\n  if (typeof type === 'string') {\n    if (propsWithKey.className !== undefined) {\n      propsWithKey.class = propsWithKey.className\n      delete propsWithKey.className\n    }\n    if (propsWithKey.htmlFor !== undefined) {\n      propsWithKey.for = propsWithKey.htmlFor\n      delete propsWithKey.htmlFor\n    }\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 { VNode, VNodeChild } from '@pyreon/core'\nimport { createContext, ErrorBoundary, h, 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 */\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 */\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\n// ─── forwardRef ─────────────────────────────────────────────────────────────\n\n/**\n * React-compatible `forwardRef` — pass-through in Pyreon.\n * Refs are regular props in Pyreon, so no wrapper is needed.\n * The render function receives (props, ref) — we merge ref into props.\n */\nexport function forwardRef<P extends Record<string, unknown>>(\n  render: (props: P, ref: { current: unknown } | null) => VNodeChild,\n): (props: P & { ref?: { current: unknown } | null }) => VNodeChild {\n  return (props: P & { ref?: { current: unknown } | null }) => {\n    const { ref, ...rest } = props\n    return render(rest as P, ref ?? null)\n  }\n}\n\n// ─── cloneElement ───────────────────────────────────────────────────────────\n\n/**\n * React-compatible `cloneElement` — creates a new VNode with merged props.\n */\nexport function cloneElement(\n  element: VNode,\n  props?: Record<string, unknown>,\n  ...children: VNodeChild[]\n): VNode {\n  const mergedProps = { ...element.props, ...props }\n  const mergedChildren = children.length > 0 ? children : element.children\n  return h(element.type, mergedProps, ...mergedChildren)\n}\n\n// ─── Children utilities ─────────────────────────────────────────────────────\n\nfunction flattenChildren(children: VNodeChild | VNodeChild[]): VNodeChild[] {\n  if (children == null) return []\n  if (!Array.isArray(children)) return [children]\n  const result: VNodeChild[] = []\n  for (const child of children) {\n    if (Array.isArray(child)) {\n      result.push(...flattenChildren(child))\n    } else {\n      result.push(child)\n    }\n  }\n  return result\n}\n\n/**\n * React-compatible `Children` utilities for working with VNode children.\n */\nexport const Children = {\n  /**\n   * Iterate over children, calling `fn` for each non-null child.\n   */\n  map<T>(children: VNodeChild | VNodeChild[], fn: (child: VNodeChild, index: number) => T): T[] {\n    const flat = flattenChildren(children)\n    const result: T[] = []\n    for (let i = 0; i < flat.length; i++) {\n      const child = flat[i]\n      if (child == null || child === true || child === false) continue\n      result.push(fn(child, i))\n    }\n    return result\n  },\n\n  /**\n   * Call `fn` for each non-null child (no return value).\n   */\n  forEach(children: VNodeChild | VNodeChild[], fn: (child: VNodeChild, index: number) => void): void {\n    const flat = flattenChildren(children)\n    for (let i = 0; i < flat.length; i++) {\n      const child = flat[i]\n      if (child == null || child === true || child === false) continue\n      fn(child, i)\n    }\n  },\n\n  /**\n   * Count non-null children.\n   */\n  count(children: VNodeChild | VNodeChild[]): number {\n    const flat = flattenChildren(children)\n    let count = 0\n    for (const child of flat) {\n      if (child != null && child !== true && child !== false) count++\n    }\n    return count\n  },\n\n  /**\n   * Convert children to a flat array.\n   */\n  toArray(children: VNodeChild | VNodeChild[]): VNodeChild[] {\n    const flat = flattenChildren(children)\n    return flat.filter((child) => child != null && child !== true && child !== false)\n  },\n\n  /**\n   * Assert and return the only child. Throws if not exactly one child.\n   */\n  only(children: VNodeChild | VNodeChild[]): VNodeChild {\n    const arr = Children.toArray(children)\n    if (arr.length !== 1) {\n      throw new Error('[Pyreon] Children.only expected exactly one child')\n    }\n    return arr[0] as VNodeChild\n  },\n}\n"],"mappings":"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"}

package/lib/jsx-runtime.js

@@ -80,9 +80,15 @@ function jsx(type, props, key) {
 		children
 	} : propsWithKey);
 	const childArray = children === void 0 ? [] : Array.isArray(children) ? children : [children];
-	if (typeof type === "string" && propsWithKey.className !== void 0) {
-		propsWithKey.class = propsWithKey.className;
-		delete propsWithKey.className;
+	if (typeof type === "string") {
+		if (propsWithKey.className !== void 0) {
+			propsWithKey.class = propsWithKey.className;
+			delete propsWithKey.className;
+		}
+		if (propsWithKey.htmlFor !== void 0) {
+			propsWithKey.for = propsWithKey.htmlFor;
+			delete propsWithKey.htmlFor;
+		}
 	}
 	return h(type, propsWithKey, ...childArray);
 }

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  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\nconst _wrapperCache = new WeakMap<Function, ComponentFn>()\n\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":";;;;AAqCA,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;;AAKJ,MAAM,gCAAgB,IAAI,SAAgC;AAE1D,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  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\nconst _wrapperCache = new WeakMap<Function, ComponentFn>()\n\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 React-style attributes to standard HTML attributes\n  if (typeof type === 'string') {\n    if (propsWithKey.className !== undefined) {\n      propsWithKey.class = propsWithKey.className\n      delete propsWithKey.className\n    }\n    if (propsWithKey.htmlFor !== undefined) {\n      propsWithKey.for = propsWithKey.htmlFor\n      delete propsWithKey.htmlFor\n    }\n  }\n\n  return h(type, propsWithKey, ...(childArray as VNodeChild[]))\n}\n\nexport const jsxs = jsx\nexport const jsxDEV = jsx\n"],"mappings":";;;;AAqCA,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;;AAKJ,MAAM,gCAAgB,IAAI,SAAgC;AAE1D,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,UAAU;AAC5B,MAAI,aAAa,cAAc,QAAW;AACxC,gBAAa,QAAQ,aAAa;AAClC,UAAO,aAAa;;AAEtB,MAAI,aAAa,YAAY,QAAW;AACtC,gBAAa,MAAM,aAAa;AAChC,UAAO,aAAa;;;AAIxB,QAAO,EAAE,MAAM,cAAc,GAAI,WAA4B;;AAG/D,MAAa,OAAO"}

package/lib/types/index.d.ts

@@ -1,4 +1,4 @@
-import { ErrorBoundary, Fragment, Props, Suspense, VNode as ReactNode, VNodeChild, VNodeChild as VNodeChild$1, createContext, h, h as createElement, lazy, useContext } from "@pyreon/core";
+import { ErrorBoundary, Fragment, Props, Suspense, VNode, VNode as ReactNode, VNodeChild, VNodeChild as VNodeChild$1, createContext, h, h as createElement, lazy, useContext } from "@pyreon/core";
 import { batch } from "@pyreon/reactivity";
 
 //#region src/index.d.ts
@@ -61,6 +61,47 @@ declare function useImperativeHandle<T>(ref: {
  * React-compatible `createPortal(children, target)`.
  */
 declare function createPortal(children: VNodeChild$1, target: Element): VNodeChild$1;
+/**
+ * React-compatible `forwardRef` — pass-through in Pyreon.
+ * Refs are regular props in Pyreon, so no wrapper is needed.
+ * The render function receives (props, ref) — we merge ref into props.
+ */
+declare function forwardRef<P extends Record<string, unknown>>(render: (props: P, ref: {
+  current: unknown;
+} | null) => VNodeChild$1): (props: P & {
+  ref?: {
+    current: unknown;
+  } | null;
+}) => VNodeChild$1;
+/**
+ * React-compatible `cloneElement` — creates a new VNode with merged props.
+ */
+declare function cloneElement(element: VNode, props?: Record<string, unknown>, ...children: VNodeChild$1[]): VNode;
+/**
+ * React-compatible `Children` utilities for working with VNode children.
+ */
+declare const Children: {
+  /**
+   * Iterate over children, calling `fn` for each non-null child.
+   */
+  map<T>(children: VNodeChild$1 | VNodeChild$1[], fn: (child: VNodeChild$1, index: number) => T): T[];
+  /**
+   * Call `fn` for each non-null child (no return value).
+   */
+  forEach(children: VNodeChild$1 | VNodeChild$1[], fn: (child: VNodeChild$1, index: number) => void): void;
+  /**
+   * Count non-null children.
+   */
+  count(children: VNodeChild$1 | VNodeChild$1[]): number;
+  /**
+   * Convert children to a flat array.
+   */
+  toArray(children: VNodeChild$1 | VNodeChild$1[]): VNodeChild$1[];
+  /**
+   * Assert and return the only child. Throws if not exactly one child.
+   */
+  only(children: VNodeChild$1 | VNodeChild$1[]): VNodeChild$1;
+};
 //#endregion
-export { ErrorBoundary, Fragment, type Props, type ReactNode, Suspense, type VNodeChild, batch, createContext, createElement, createPortal, h, lazy, memo, useCallback, useContext, useDeferredValue, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useTransition };
+export { Children, ErrorBoundary, Fragment, type Props, type ReactNode, Suspense, type VNodeChild, batch, cloneElement, createContext, createElement, createPortal, forwardRef, h, lazy, memo, useCallback, useContext, useDeferredValue, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useTransition };
 //# sourceMappingURL=index2.d.ts.map

package/lib/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index2.d.ts","names":[],"sources":["../../../src/index.ts"],"mappings":";;;;;;;;iBA8CgB,QAAA,GAAA,CAAY,OAAA,EAAS,CAAA,UAAW,CAAA,KAAM,CAAA,GAAI,CAAA,EAAG,CAAA,KAAM,IAAA,EAAM,CAAA,KAAM,CAAA;;;;iBAyB/D,UAAA,MAAA,CACd,OAAA,GAAU,KAAA,EAAO,CAAA,EAAG,MAAA,EAAQ,CAAA,KAAM,CAAA,EAClC,OAAA,EAAS,CAAA,UAAW,CAAA,KAClB,CAAA,GAAI,MAAA,EAAQ,CAAA;AAHhB;;;;AAAA,iBA6BgB,SAAA,CAAU,EAAA,6BAA+B,IAAA;;;;iBAsBzC,eAAA,CAAgB,EAAA,6BAA+B,IAAA;;;;iBAuB/C,OAAA,GAAA,CAAW,EAAA,QAAU,CAAA,EAAG,IAAA,cAAkB,CAAA;;;;iBAqB1C,WAAA,eAA0B,IAAA,sBAAA,CAA2B,EAAA,EAAI,CAAA,EAAG,IAAA,cAAkB,CAAA;;;;iBAS9E,MAAA,GAAA,CAAU,OAAA,GAAU,CAAA;EAAM,OAAA,EAAS,CAAA;AAAA;;;;iBAuBnC,KAAA,CAAA;AAlGhB;;;;AAAA,iBAmHgB,IAAA,WAAe,MAAA,kBAAA,CAC7B,SAAA,GAAY,KAAA,EAAO,CAAA,KAAM,YAAA,EACzB,QAAA,IAAY,SAAA,EAAW,CAAA,EAAG,SAAA,EAAW,CAAA,gBACnC,KAAA,EAAO,CAAA,KAAM,YAAA;AAhGjB;;;AAAA,iBA6HgB,aAAA,CAAA,cAA4B,EAAA;;AAtG5C;;iBA6GgB,gBAAA,GAAA,CAAoB,KAAA,EAAO,CAAA,GAAI,CAAA;;;;iBAS/B,mBAAA,GAAA,CACd,GAAA;EAAO,OAAA,EAAS,CAAA;AAAA,sBAChB,IAAA,QAAY,CAAA,EACZ,IAAA;;AApGF;;iBAuHgB,YAAA,CAAa,QAAA,EAAU,YAAA,EAAY,MAAA,EAAQ,OAAA,GAAU,YAAA"}
+{"version":3,"file":"index2.d.ts","names":[],"sources":["../../../src/index.ts"],"mappings":";;;;;;;;iBA8CgB,QAAA,GAAA,CAAY,OAAA,EAAS,CAAA,UAAW,CAAA,KAAM,CAAA,GAAI,CAAA,EAAG,CAAA,KAAM,IAAA,EAAM,CAAA,KAAM,CAAA;;;;iBAyB/D,UAAA,MAAA,CACd,OAAA,GAAU,KAAA,EAAO,CAAA,EAAG,MAAA,EAAQ,CAAA,KAAM,CAAA,EAClC,OAAA,EAAS,CAAA,UAAW,CAAA,KAClB,CAAA,GAAI,MAAA,EAAQ,CAAA;AAHhB;;;;AAAA,iBA6BgB,SAAA,CAAU,EAAA,6BAA+B,IAAA;;;;iBAsBzC,eAAA,CAAgB,EAAA,6BAA+B,IAAA;;;;iBAuB/C,OAAA,GAAA,CAAW,EAAA,QAAU,CAAA,EAAG,IAAA,cAAkB,CAAA;;;;iBAqB1C,WAAA,eAA0B,IAAA,sBAAA,CAA2B,EAAA,EAAI,CAAA,EAAG,IAAA,cAAkB,CAAA;;;;iBAS9E,MAAA,GAAA,CAAU,OAAA,GAAU,CAAA;EAAM,OAAA,EAAS,CAAA;AAAA;;;;iBAuBnC,KAAA,CAAA;AAlGhB;;;;AAAA,iBAmHgB,IAAA,WAAe,MAAA,kBAAA,CAC7B,SAAA,GAAY,KAAA,EAAO,CAAA,KAAM,YAAA,EACzB,QAAA,IAAY,SAAA,EAAW,CAAA,EAAG,SAAA,EAAW,CAAA,gBACnC,KAAA,EAAO,CAAA,KAAM,YAAA;AAhGjB;;;AAAA,iBA6HgB,aAAA,CAAA,cAA4B,EAAA;;AAtG5C;;iBA6GgB,gBAAA,GAAA,CAAoB,KAAA,EAAO,CAAA,GAAI,CAAA;;;;iBAS/B,mBAAA,GAAA,CACd,GAAA;EAAO,OAAA,EAAS,CAAA;AAAA,sBAChB,IAAA,QAAY,CAAA,EACZ,IAAA;;AApGF;;iBAuHgB,YAAA,CAAa,QAAA,EAAU,YAAA,EAAY,MAAA,EAAQ,OAAA,GAAU,YAAA;;;;;;iBAgBrD,UAAA,WAAqB,MAAA,kBAAA,CACnC,MAAA,GAAS,KAAA,EAAO,CAAA,EAAG,GAAA;EAAO,OAAA;AAAA,aAA8B,YAAA,IACtD,KAAA,EAAO,CAAA;EAAM,GAAA;IAAQ,OAAA;EAAA;AAAA,MAAgC,YAAA;;;;iBAYzC,YAAA,CACd,OAAA,EAAS,KAAA,EACT,KAAA,GAAQ,MAAA,sBACL,QAAA,EAAU,YAAA,KACZ,KAAA;;;AAzHH;cAkJa,QAAA;;;;SAIN,QAAA,EAAY,YAAA,GAAa,YAAA,IAAY,EAAA,GAAO,KAAA,EAAO,YAAA,EAAY,KAAA,aAAkB,CAAA,GAAI,CAAA;EArIxE;;;oBAmJA,YAAA,GAAa,YAAA,IAAY,EAAA,GAAO,KAAA,EAAO,YAAA,EAAY,KAAA;EAlJ5C;;;kBA8JT,YAAA,GAAa,YAAA;EA5Jd;;;oBAwKG,YAAA,GAAa,YAAA,KAAe,YAAA;EA3KjB;;;iBAmLd,YAAA,GAAa,YAAA,KAAe,YAAA;AAAA"}

package/lib/types/jsx-runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-runtime2.d.ts","names":[],"sources":["../../../src/jsx-runtime.ts"],"mappings":";;;iBAyIgB,GAAA,CACd,IAAA,WAAe,WAAA,WACf,KAAA,EAAO,KAAA;EAAU,QAAA,GAAW,UAAA,GAAa,UAAA;AAAA,GACzC,GAAA,4BACC,KAAA;AAAA,cAuBU,IAAA,SAAI,GAAA"}
+{"version":3,"file":"jsx-runtime2.d.ts","names":[],"sources":["../../../src/jsx-runtime.ts"],"mappings":";;;iBAyIgB,GAAA,CACd,IAAA,WAAe,WAAA,WACf,KAAA,EAAO,KAAA;EAAU,QAAA,GAAW,UAAA,GAAa,UAAA;AAAA,GACzC,GAAA,4BACC,KAAA;AAAA,cA6BU,IAAA,SAAI,GAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/react-compat",
-  "version": "0.12.8",
+  "version": "0.12.10",
   "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": {
@@ -57,9 +57,9 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/core": "^0.12.8",
-    "@pyreon/reactivity": "^0.12.8",
-    "@pyreon/runtime-dom": "^0.12.8"
+    "@pyreon/core": "^0.12.10",
+    "@pyreon/reactivity": "^0.12.10",
+    "@pyreon/runtime-dom": "^0.12.10"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.9",

package/src/index.ts

@@ -15,8 +15,8 @@
 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 type { VNode, VNodeChild } from '@pyreon/core'
+import { createContext, ErrorBoundary, h, Portal, Suspense, useContext } from '@pyreon/core'
 import { batch } from '@pyreon/reactivity'
 import type { EffectEntry } from './jsx-runtime'
 import { getCurrentCtx, getHookIndex } from './jsx-runtime'
@@ -291,3 +291,112 @@ export function createPortal(children: VNodeChild, target: Element): VNodeChild
 
 export { lazy } from '@pyreon/core'
 export { ErrorBoundary, Suspense }
+
+// ─── forwardRef ─────────────────────────────────────────────────────────────
+
+/**
+ * React-compatible `forwardRef` — pass-through in Pyreon.
+ * Refs are regular props in Pyreon, so no wrapper is needed.
+ * The render function receives (props, ref) — we merge ref into props.
+ */
+export function forwardRef<P extends Record<string, unknown>>(
+  render: (props: P, ref: { current: unknown } | null) => VNodeChild,
+): (props: P & { ref?: { current: unknown } | null }) => VNodeChild {
+  return (props: P & { ref?: { current: unknown } | null }) => {
+    const { ref, ...rest } = props
+    return render(rest as P, ref ?? null)
+  }
+}
+
+// ─── cloneElement ───────────────────────────────────────────────────────────
+
+/**
+ * React-compatible `cloneElement` — creates a new VNode with merged props.
+ */
+export function cloneElement(
+  element: VNode,
+  props?: Record<string, unknown>,
+  ...children: VNodeChild[]
+): VNode {
+  const mergedProps = { ...element.props, ...props }
+  const mergedChildren = children.length > 0 ? children : element.children
+  return h(element.type, mergedProps, ...mergedChildren)
+}
+
+// ─── Children utilities ─────────────────────────────────────────────────────
+
+function flattenChildren(children: VNodeChild | VNodeChild[]): VNodeChild[] {
+  if (children == null) return []
+  if (!Array.isArray(children)) return [children]
+  const result: VNodeChild[] = []
+  for (const child of children) {
+    if (Array.isArray(child)) {
+      result.push(...flattenChildren(child))
+    } else {
+      result.push(child)
+    }
+  }
+  return result
+}
+
+/**
+ * React-compatible `Children` utilities for working with VNode children.
+ */
+export const Children = {
+  /**
+   * Iterate over children, calling `fn` for each non-null child.
+   */
+  map<T>(children: VNodeChild | VNodeChild[], fn: (child: VNodeChild, index: number) => T): T[] {
+    const flat = flattenChildren(children)
+    const result: T[] = []
+    for (let i = 0; i < flat.length; i++) {
+      const child = flat[i]
+      if (child == null || child === true || child === false) continue
+      result.push(fn(child, i))
+    }
+    return result
+  },
+
+  /**
+   * Call `fn` for each non-null child (no return value).
+   */
+  forEach(children: VNodeChild | VNodeChild[], fn: (child: VNodeChild, index: number) => void): void {
+    const flat = flattenChildren(children)
+    for (let i = 0; i < flat.length; i++) {
+      const child = flat[i]
+      if (child == null || child === true || child === false) continue
+      fn(child, i)
+    }
+  },
+
+  /**
+   * Count non-null children.
+   */
+  count(children: VNodeChild | VNodeChild[]): number {
+    const flat = flattenChildren(children)
+    let count = 0
+    for (const child of flat) {
+      if (child != null && child !== true && child !== false) count++
+    }
+    return count
+  },
+
+  /**
+   * Convert children to a flat array.
+   */
+  toArray(children: VNodeChild | VNodeChild[]): VNodeChild[] {
+    const flat = flattenChildren(children)
+    return flat.filter((child) => child != null && child !== true && child !== false)
+  },
+
+  /**
+   * Assert and return the only child. Throws if not exactly one child.
+   */
+  only(children: VNodeChild | VNodeChild[]): VNodeChild {
+    const arr = Children.toArray(children)
+    if (arr.length !== 1) {
+      throw new Error('[Pyreon] Children.only expected exactly one child')
+    }
+    return arr[0] as VNodeChild
+  },
+}

package/src/jsx-runtime.ts

@@ -153,10 +153,16 @@ export function jsx(
   // DOM element or symbol (Fragment): children go in vnode.children
   const childArray = children === undefined ? [] : Array.isArray(children) ? children : [children]
 
-  // Map className → class for React compat
-  if (typeof type === 'string' && propsWithKey.className !== undefined) {
-    propsWithKey.class = propsWithKey.className
-    delete propsWithKey.className
+  // Map React-style attributes to standard HTML attributes
+  if (typeof type === 'string') {
+    if (propsWithKey.className !== undefined) {
+      propsWithKey.class = propsWithKey.className
+      delete propsWithKey.className
+    }
+    if (propsWithKey.htmlFor !== undefined) {
+      propsWithKey.for = propsWithKey.htmlFor
+      delete propsWithKey.htmlFor
+    }
   }
 
   return h(type, propsWithKey, ...(childArray as VNodeChild[]))

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

@@ -0,0 +1,397 @@
+import { h } from '@pyreon/core'
+import { mount } from '@pyreon/runtime-dom'
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  memo,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from '../index'
+import type { RenderContext } from '../jsx-runtime'
+import { beginRender, endRender, jsx } from '../jsx-runtime'
+
+function container(): HTMLElement {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+  return el
+}
+
+/** Creates a RenderContext for testing hooks outside of full render cycle */
+function createHookRunner() {
+  const ctx: RenderContext = {
+    hooks: [],
+    scheduleRerender: () => {},
+    pendingEffects: [],
+    pendingLayoutEffects: [],
+    unmounted: false,
+  }
+  return {
+    ctx,
+    run<T>(fn: () => T): T {
+      beginRender(ctx)
+      const result = fn()
+      endRender()
+      return result
+    },
+  }
+}
+
+function withHookCtx<T>(fn: () => T): T {
+  const runner = createHookRunner()
+  return runner.run(fn)
+}
+
+// ─── useState ────────────────────────────────────────────────────────────────
+
+describe('useState', () => {
+  test('returns [value, setter]', () => {
+    const [count, setCount] = withHookCtx(() => useState(0))
+    expect(count).toBe(0)
+    expect(typeof setCount).toBe('function')
+  })
+
+  test('setter with value updates signal', () => {
+    const runner = createHookRunner()
+    const [, setCount] = runner.run(() => useState(0))
+    setCount(42)
+    const [count2] = runner.run(() => useState(0))
+    expect(count2).toBe(42)
+  })
+
+  test('setter with function updates based on current', () => {
+    const runner = createHookRunner()
+    const [, setCount] = runner.run(() => useState(10))
+    setCount((prev) => prev * 2)
+    const [count2] = runner.run(() => useState(10))
+    expect(count2).toBe(20)
+  })
+})
+
+// ─── useEffect ───────────────────────────────────────────────────────────────
+
+describe('useEffect', () => {
+  test('runs immediately without deps', async () => {
+    const el = container()
+    let effectRuns = 0
+
+    const Comp = () => {
+      useEffect(() => {
+        effectRuns++
+      })
+      return h('div', null, 'test')
+    }
+
+    mount(jsx(Comp, {}), el)
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(effectRuns).toBeGreaterThanOrEqual(1)
+  })
+
+  test('runs cleanup on re-run', async () => {
+    const el = container()
+    let cleanups = 0
+    let triggerSet: (v: number | ((p: number) => number)) => void = () => {}
+
+    const Comp = () => {
+      const [count, setCount] = useState(0)
+      triggerSet = setCount
+      useEffect(() => {
+        return () => {
+          cleanups++
+        }
+      }, [count])
+      return h('div', null, String(count))
+    }
+
+    mount(jsx(Comp, {}), el)
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(cleanups).toBe(0)
+
+    triggerSet((p) => p + 1)
+    await new Promise<void>((r) => queueMicrotask(r))
+    await new Promise<void>((r) => queueMicrotask(r))
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(cleanups).toBe(1)
+  })
+
+  test('empty deps [] = runs once', async () => {
+    const el = container()
+    let effectRuns = 0
+    let triggerSet: (v: number) => void = () => {}
+
+    const Comp = () => {
+      const [count, setCount] = useState(0)
+      triggerSet = setCount
+      useEffect(() => {
+        effectRuns++
+      }, [])
+      return h('div', null, String(count))
+    }
+
+    mount(jsx(Comp, {}), el)
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(effectRuns).toBe(1)
+
+    // Re-render should NOT re-run the effect
+    triggerSet(1)
+    await new Promise<void>((r) => queueMicrotask(r))
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(effectRuns).toBe(1)
+  })
+})
+
+// ─── useMemo ─────────────────────────────────────────────────────────────────
+
+describe('useMemo', () => {
+  test('returns computed value', () => {
+    const value = withHookCtx(() => useMemo(() => 6 * 7, []))
+    expect(value).toBe(42)
+  })
+
+  test('recalculates when dep changes', () => {
+    const runner = createHookRunner()
+    const v1 = runner.run(() => useMemo(() => 'a', ['x']))
+    expect(v1).toBe('a')
+
+    // Same deps — cached
+    const v2 = runner.run(() => useMemo(() => 'b', ['x']))
+    expect(v2).toBe('a')
+
+    // Different deps — recompute
+    const v3 = runner.run(() => useMemo(() => 'c', ['y']))
+    expect(v3).toBe('c')
+  })
+})
+
+// ─── useRef ──────────────────────────────────────────────────────────────────
+
+describe('useRef', () => {
+  test('initial current value', () => {
+    const ref = withHookCtx(() => useRef(99))
+    expect(ref.current).toBe(99)
+  })
+
+  test('mutable current', () => {
+    const ref = withHookCtx(() => useRef(0))
+    ref.current = 123
+    expect(ref.current).toBe(123)
+  })
+})
+
+// ─── useReducer ──────────────────────────────────────────────────────────────
+
+describe('useReducer', () => {
+  test('dispatch actions update state', () => {
+    const runner = createHookRunner()
+    type Action = { type: 'add'; payload: number } | { type: 'reset' }
+    const reducer = (state: number, action: Action): number => {
+      switch (action.type) {
+        case 'add':
+          return state + action.payload
+        case 'reset':
+          return 0
+        default:
+          return state
+      }
+    }
+
+    const [s0, dispatch] = runner.run(() => useReducer(reducer, 10))
+    expect(s0).toBe(10)
+
+    dispatch({ type: 'add', payload: 5 })
+    const [s1] = runner.run(() => useReducer(reducer, 10))
+    expect(s1).toBe(15)
+
+    dispatch({ type: 'reset' })
+    const [s2] = runner.run(() => useReducer(reducer, 10))
+    expect(s2).toBe(0)
+  })
+})
+
+// ─── memo ────────────────────────────────────────────────────────────────────
+
+describe('memo', () => {
+  test('returns same component (memoized)', () => {
+    let renders = 0
+    const Inner = (props: { x: number }) => {
+      renders++
+      return h('span', null, String(props.x))
+    }
+    const Memoized = memo(Inner)
+
+    Memoized({ x: 1 })
+    expect(renders).toBe(1)
+
+    Memoized({ x: 1 })
+    expect(renders).toBe(1) // same props — skipped
+
+    Memoized({ x: 2 })
+    expect(renders).toBe(2) // different props — re-rendered
+  })
+})
+
+// ─── forwardRef ──────────────────────────────────────────────────────────────
+
+describe('forwardRef', () => {
+  test('passes ref through to render function', () => {
+    const ref = { current: null as HTMLDivElement | null }
+    let receivedRef: { current: unknown } | null = null
+
+    const FancyInput = forwardRef<{ label: string }>((props, fwdRef) => {
+      receivedRef = fwdRef
+      return h('div', null, props.label)
+    })
+
+    FancyInput({ label: 'test', ref })
+    expect(receivedRef).toBe(ref)
+  })
+
+  test('ref defaults to null when not provided', () => {
+    let receivedRef: { current: unknown } | null = 'not-called' as unknown as null
+
+    const Comp = forwardRef<Record<string, unknown>>((_props, fwdRef) => {
+      receivedRef = fwdRef
+      return h('div', null, 'no-ref')
+    })
+
+    Comp({})
+    expect(receivedRef).toBeNull()
+  })
+})
+
+// ─── Children utilities ──────────────────────────────────────────────────────
+
+describe('Children utilities', () => {
+  test('Children.map iterates VNode children', () => {
+    const children = [h('span', null, 'a'), h('span', null, 'b'), h('span', null, 'c')]
+    const mapped = Children.map(children, (child, index) => ({ child, index }))
+    expect(mapped).toHaveLength(3)
+    expect(mapped[0]?.index).toBe(0)
+    expect(mapped[1]?.index).toBe(1)
+    expect(mapped[2]?.index).toBe(2)
+  })
+
+  test('Children.count returns count', () => {
+    const children = [h('span', null, 'a'), h('span', null, 'b')]
+    expect(Children.count(children)).toBe(2)
+  })
+
+  test('Children.count skips null/undefined/boolean', () => {
+    const children = [h('span', null, 'a'), null, undefined, true, false, h('span', null, 'b')]
+    expect(Children.count(children)).toBe(2)
+  })
+
+  test('Children.toArray converts to flat array', () => {
+    const children = [h('span', null, 'a'), [h('span', null, 'b'), h('span', null, 'c')]]
+    const arr = Children.toArray(children)
+    expect(arr).toHaveLength(3)
+  })
+
+  test('Children.toArray filters out null/undefined/boolean', () => {
+    const children = [null, h('span', null, 'a'), undefined, false, true]
+    const arr = Children.toArray(children)
+    expect(arr).toHaveLength(1)
+  })
+
+  test('Children.only returns single child', () => {
+    const child = h('span', null, 'only')
+    const result = Children.only([child])
+    expect(result).toBe(child)
+  })
+
+  test('Children.only throws with multiple children', () => {
+    const children = [h('span', null, 'a'), h('span', null, 'b')]
+    expect(() => Children.only(children)).toThrow('exactly one child')
+  })
+
+  test('Children.only throws with no children', () => {
+    expect(() => Children.only([])).toThrow('exactly one child')
+  })
+
+  test('Children.forEach iterates without return', () => {
+    const children = [h('span', null, 'a'), h('span', null, 'b')]
+    const indices: number[] = []
+    Children.forEach(children, (_child, index) => {
+      indices.push(index)
+    })
+    expect(indices).toEqual([0, 1])
+  })
+
+  test('Children.map with single child (not array)', () => {
+    const child = h('span', null, 'solo')
+    const mapped = Children.map(child, (_c, i) => i)
+    expect(mapped).toEqual([0])
+  })
+
+  test('Children.count with single child', () => {
+    expect(Children.count(h('span', null, 'x'))).toBe(1)
+  })
+
+  test('Children.count with null', () => {
+    expect(Children.count(null)).toBe(0)
+  })
+})
+
+// ─── cloneElement ────────────────────────────────────────────────────────────
+
+describe('cloneElement', () => {
+  test('clones element with merged props', () => {
+    const original = h('div', { id: 'original', class: 'a' }, 'hello')
+    const cloned = cloneElement(original, { class: 'b', 'data-new': true })
+    expect(cloned.type).toBe('div')
+    expect(cloned.props.id).toBe('original')
+    expect(cloned.props.class).toBe('b')
+    expect(cloned.props['data-new']).toBe(true)
+  })
+
+  test('clones element preserving children when none provided', () => {
+    const original = h('div', null, 'child')
+    const cloned = cloneElement(original)
+    expect(cloned.children).toHaveLength(1)
+    expect(cloned.children[0]).toBe('child')
+  })
+
+  test('clones element with new children', () => {
+    const original = h('div', null, 'old')
+    const cloned = cloneElement(original, {}, 'new1', 'new2')
+    expect(cloned.children).toHaveLength(2)
+    expect(cloned.children[0]).toBe('new1')
+    expect(cloned.children[1]).toBe('new2')
+  })
+})
+
+// ─── JSX runtime attribute mapping ──────────────────────────────────────────
+
+describe('jsx-runtime attribute mapping', () => {
+  test('className is mapped to class', () => {
+    const vnode = jsx('div', { className: 'my-class', children: 'text' })
+    expect(vnode.props.class).toBe('my-class')
+    expect(vnode.props.className).toBeUndefined()
+  })
+
+  test('htmlFor is mapped to for', () => {
+    const vnode = jsx('label', { htmlFor: 'input-id', children: 'Label' })
+    expect(vnode.props.for).toBe('input-id')
+    expect(vnode.props.htmlFor).toBeUndefined()
+  })
+
+  test('className and htmlFor on same element', () => {
+    const vnode = jsx('label', { className: 'label-class', htmlFor: 'name', children: 'Name' })
+    expect(vnode.props.class).toBe('label-class')
+    expect(vnode.props.for).toBe('name')
+    expect(vnode.props.className).toBeUndefined()
+    expect(vnode.props.htmlFor).toBeUndefined()
+  })
+
+  test('className/htmlFor not mapped on component types', () => {
+    const MyComp = (props: { className?: string; htmlFor?: string }) =>
+      h('div', null, props.className ?? '')
+    const vnode = jsx(MyComp, { className: 'keep', htmlFor: 'keep' })
+    // Component props should pass through to the wrapper — no rename
+    expect(vnode.type).not.toBe(MyComp) // wrapped by compat runtime
+    expect(typeof vnode.type).toBe('function')
+  })
+})