@pyreon/react-compat 0.13.1 → 0.15.0

package/lib/types/index.d.ts

@@ -1,4 +1,4 @@
-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 { CSSProperties, Context, ErrorBoundary, Fragment, Props, Suspense, VNode, VNode as VNode$1, VNodeChild, VNodeChild as VNodeChild$1, createRef, h, h as createElement, lazy } from "@pyreon/core";
 import { batch } from "@pyreon/reactivity";
 
 //#region src/index.d.ts
@@ -9,8 +9,9 @@ import { batch } from "@pyreon/reactivity";
 declare function useState<T>(initial: T | (() => T)): [T, (v: T | ((prev: T) => T)) => void];
 /**
  * React-compatible `useReducer` — returns `[state, dispatch]`.
+ * Supports the 3-argument form: `useReducer(reducer, initialArg, init)`.
  */
-declare function useReducer<S, A>(reducer: (state: S, action: A) => S, initial: S | (() => S)): [S, (action: A) => void];
+declare function useReducer<S, A>(reducer: (state: S, action: A) => S, initialArg: S | (() => S), init?: (arg: S) => S): [S, (action: A) => void];
 /**
  * React-compatible `useEffect` — runs after render when deps change.
  * Returns cleanup on unmount and before re-running.
@@ -20,6 +21,11 @@ declare function useEffect(fn: () => (() => void) | void, deps?: unknown[]): voi
  * React-compatible `useLayoutEffect` — runs synchronously after DOM mutations.
  */
 declare function useLayoutEffect(fn: () => (() => void) | void, deps?: unknown[]): void;
+/**
+ * React-compatible `useInsertionEffect` — runs synchronously before layout effects.
+ * Intended for CSS-in-JS libraries to inject styles before DOM reads.
+ */
+declare function useInsertionEffect(fn: () => (() => void) | void, deps?: unknown[]): void;
 /**
  * React-compatible `useMemo` — returns the cached value, recomputed when deps change.
  */
@@ -34,6 +40,48 @@ declare function useCallback<T extends (...args: never[]) => unknown>(fn: T, dep
 declare function useRef<T>(initial?: T): {
   current: T | null;
 };
+declare const COMPAT_CTX: unique symbol;
+/**
+ * Compat-specific context with subscriber notification and tree-scoped nesting.
+ *
+ * Uses Pyreon's native context stack for tree-scoped Provider nesting (inner
+ * Providers override outer ones for their subtree), with a subscriber set
+ * layered on top for React-style consumer re-rendering.
+ */
+interface CompatContext<T> {
+  /** Brand marker so `useContext` can distinguish compat contexts */
+  readonly [COMPAT_CTX_BRAND]: true;
+  /** Default value when no Provider is mounted */
+  _defaultValue: T;
+  /** Pyreon native context for tree-scoped value+subscriber storage */
+  _pyreonCtx: Context<{
+    value: T;
+    subscribers: Set<() => void>;
+  }>;
+  /** Subscribers at the default (no-Provider) level */
+  _subscribers: Set<() => void>;
+  /** React-compatible Provider component (native Pyreon, NOT compat-wrapped).
+   * Returns a reactive accessor `() => VNodeChild` for Pyreon's renderer. */
+  Provider: (props: Record<string, unknown>) => unknown;
+}
+declare const COMPAT_CTX_BRAND: typeof COMPAT_CTX;
+/**
+ * React-compatible `createContext` — creates a context with a Provider that
+ * supports nested Providers (inner overrides outer for its subtree) and
+ * notifies all `useContext` consumers when its value changes.
+ */
+declare function createContext<T>(defaultValue: T): CompatContext<T>;
+/**
+ * React-compatible `useContext` — reads the current context value and
+ * subscribes the calling component to future value changes.
+ *
+ * Reads from Pyreon's tree-scoped context stack (correct nesting) and
+ * subscribes to the nearest Provider's subscriber set for re-rendering.
+ *
+ * Works with both compat contexts (from this module's `createContext`) and
+ * Pyreon native contexts (from `@pyreon/core`).
+ */
+declare function useContext<T>(context: CompatContext<T> | Context<T>): T;
 /**
  * React-compatible `useId` — returns a stable unique string per hook call.
  */
@@ -41,6 +89,9 @@ declare function useId(): string;
 /**
  * React-compatible `memo` — wraps a component to skip re-render when props
  * are shallowly equal.
+ *
+ * Each component INSTANCE gets its own props/result cache via a hook slot,
+ * so two `<MemoComp />` usages don't share memoization state.
  */
 declare function memo<P extends Record<string, unknown>>(component: (props: P) => VNodeChild$1, areEqual?: (prevProps: P, nextProps: P) => boolean): (props: P) => VNodeChild$1;
 /**
@@ -76,7 +127,7 @@ declare function forwardRef<P extends Record<string, unknown>>(render: (props: P
 /**
  * React-compatible `cloneElement` — creates a new VNode with merged props.
  */
-declare function cloneElement(element: VNode, props?: Record<string, unknown>, ...children: VNodeChild$1[]): VNode;
+declare function cloneElement(element: VNode$1, props?: Record<string, unknown>, ...children: VNodeChild$1[]): VNode$1;
 /**
  * React-compatible `Children` utilities for working with VNode children.
  */
@@ -102,6 +153,156 @@ declare const Children: {
    */
   only(children: VNodeChild$1 | VNodeChild$1[]): VNodeChild$1;
 };
+/**
+ * React-compatible `useSyncExternalStore` — subscribes to an external store.
+ * Re-subscribes automatically when the `subscribe` function identity changes.
+ */
+declare function useSyncExternalStore<T>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T): T;
+/**
+ * React-compatible `use` — reads a Context or suspends on a Promise.
+ * Can be called conditionally (unlike other hooks).
+ *
+ * IMPORTANT: Promises must have a stable identity across renders.
+ * Create promises outside the component or memoize them. Calling
+ * `use(fetch('/api'))` creates a new promise each render and will
+ * cause infinite suspension.
+ */
+declare function use<T>(resource: Context<T> | CompatContext<T> | Promise<T>): T;
+/**
+ * React-compatible `useActionState` — manages async action state with pending indicator.
+ */
+declare function useActionState<S, P>(action: (state: S, payload: P) => S | Promise<S>, initialState: S): [S, (payload: P) => void, boolean];
+/**
+ * React-compatible `startTransition` — runs the callback synchronously.
+ * No concurrent mode in Pyreon, so transitions are immediate.
+ */
+declare function startTransition(fn: () => void): void;
+/**
+ * React-compatible `isValidElement` — checks if a value is a VNode.
+ */
+declare function isValidElement(value: unknown): value is VNode$1;
+/**
+ * React-compatible `useDebugValue` — no-op in Pyreon (no React DevTools integration).
+ */
+declare function useDebugValue<T>(_value: T, _format?: (v: T) => unknown): void;
+/**
+ * React-compatible `flushSync` — runs the callback synchronously.
+ *
+ * BEHAVIORAL DIFFERENCE: In Pyreon's compat model, state updates are
+ * batched via microtask. flushSync runs the callback and returns its
+ * result, but the DOM updates triggered by state changes inside the
+ * callback still fire asynchronously. For DOM measurement after state
+ * updates, use `await act(() => setState(...))` in tests, or
+ * `requestAnimationFrame` in production code.
+ */
+declare function flushSync<T>(fn: () => T): T;
+/**
+ * React-compatible `act` — flushes pending microtasks for testing.
+ */
+declare function act(fn: () => void | Promise<void>): Promise<void>;
+declare const version = "19.0.0-pyreon";
+/**
+ * React-compatible `StrictMode` — pass-through in Pyreon (no double-invoke behavior).
+ */
+declare function StrictMode(props: {
+  children?: VNodeChild$1;
+}): VNodeChild$1;
+/**
+ * React-compatible `Profiler` — pass-through in Pyreon (no profiling integration).
+ */
+declare function Profiler(props: {
+  id: string;
+  onRender?: (...args: unknown[]) => void;
+  children?: VNodeChild$1;
+}): VNodeChild$1;
+/**
+ * React-compatible `Component` class stub.
+ * Class components are not fully supported — use function components with hooks.
+ */
+declare class Component<P = Record<string, unknown>, S = Record<string, unknown>> {
+  props: Readonly<P>;
+  state: Readonly<S>;
+  constructor(props: P);
+  setState(_partial: Partial<S> | ((prev: S) => Partial<S>)): void;
+  forceUpdate(): void;
+  render(): VNodeChild$1;
+}
+/**
+ * React-compatible `PureComponent` class stub.
+ */
+declare class PureComponent<P = Record<string, unknown>, S = Record<string, unknown>> extends Component<P, S> {}
+type FC<P = Record<string, unknown>> = (props: P) => VNodeChild$1;
+type FunctionComponent<P = Record<string, unknown>> = FC<P>;
+type ReactElement = VNode$1;
+type ReactNode = VNodeChild$1;
+type JSXElementConstructor<P> = (props: P) => VNodeChild$1;
+type Dispatch<A> = (action: A) => void;
+type SetStateAction<S> = S | ((prev: S) => S);
+type RefObject<T> = {
+  readonly current: T | null;
+};
+type MutableRefObject<T> = {
+  current: T;
+};
+type RefCallback<T> = (instance: T | null) => void;
+type ForwardedRef<T> = RefObject<T> | RefCallback<T> | null;
+type PropsWithChildren<P = Record<string, unknown>> = P & {
+  children?: ReactNode;
+};
+type PropsWithRef<P> = P & {
+  ref?: RefObject<unknown> | RefCallback<unknown> | null;
+};
+type SyntheticEvent<T = Element> = Event & {
+  currentTarget: T;
+};
+type ChangeEvent<T = Element> = Event & {
+  currentTarget: T;
+  target: T;
+};
+type FormEvent<T = Element> = Event & {
+  currentTarget: T;
+};
+type MouseEvent<T = Element> = globalThis.MouseEvent & {
+  currentTarget: T;
+};
+type KeyboardEvent<T = Element> = globalThis.KeyboardEvent & {
+  currentTarget: T;
+};
+type FocusEvent<T = Element> = globalThis.FocusEvent & {
+  currentTarget: T;
+};
+type DragEvent<T = Element> = globalThis.DragEvent & {
+  currentTarget: T;
+};
+type PointerEvent<T = Element> = globalThis.PointerEvent & {
+  currentTarget: T;
+};
+type TouchEvent<T = Element> = globalThis.TouchEvent & {
+  currentTarget: T;
+};
+type ClipboardEvent<T = Element> = globalThis.ClipboardEvent & {
+  currentTarget: T;
+};
+type AnimationEvent<T = Element> = globalThis.AnimationEvent & {
+  currentTarget: T;
+};
+type TransitionEvent<T = Element> = globalThis.TransitionEvent & {
+  currentTarget: T;
+};
+type WheelEvent<T = Element> = globalThis.WheelEvent & {
+  currentTarget: T;
+};
+type HTMLAttributes<T = HTMLElement> = Record<string, unknown> & {
+  ref?: RefObject<T> | RefCallback<T> | null;
+};
+type InputHTMLAttributes<T = HTMLInputElement> = HTMLAttributes<T>;
+type TextareaHTMLAttributes<T = HTMLTextAreaElement> = HTMLAttributes<T>;
+type SelectHTMLAttributes<T = HTMLSelectElement> = HTMLAttributes<T>;
+type ButtonHTMLAttributes<T = HTMLButtonElement> = HTMLAttributes<T>;
+type AnchorHTMLAttributes<T = HTMLAnchorElement> = HTMLAttributes<T>;
+type FormHTMLAttributes<T = HTMLFormElement> = HTMLAttributes<T>;
+type ImgHTMLAttributes<T = HTMLImageElement> = HTMLAttributes<T>;
+type SVGAttributes<T = SVGElement> = HTMLAttributes<T>;
 //#endregion
-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 };
+export { AnchorHTMLAttributes, AnimationEvent, ButtonHTMLAttributes, type CSSProperties, ChangeEvent, Children, ClipboardEvent, CompatContext, Component, type Context, Dispatch, DragEvent, ErrorBoundary, FC, FocusEvent, FormEvent, FormHTMLAttributes, ForwardedRef, Fragment, FunctionComponent, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, JSXElementConstructor, KeyboardEvent, MouseEvent, MutableRefObject, PointerEvent, Profiler, type Props, PropsWithChildren, PropsWithRef, PureComponent, ReactElement, ReactNode, RefCallback, RefObject, SVGAttributes, SelectHTMLAttributes, SetStateAction, StrictMode, Suspense, SyntheticEvent, TextareaHTMLAttributes, TouchEvent, TransitionEvent, type VNode, type VNodeChild, WheelEvent, act, batch, cloneElement, createContext, createElement, createPortal, createRef, flushSync, forwardRef, h, isValidElement, lazy, memo, startTransition, use, useActionState, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, useTransition, version };
 //# sourceMappingURL=index2.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/react-compat",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "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": {
@@ -14,6 +14,7 @@
   },
   "files": [
     "lib",
+    "!lib/**/*.map",
     "src",
     "README.md",
     "LICENSE"
@@ -52,17 +53,20 @@
     "build": "vl_rolldown_build",
     "dev": "vl_rolldown_build-watch",
     "test": "vitest run",
+    "test:browser": "vitest run --config ./vitest.browser.config.ts",
     "typecheck": "tsc --noEmit",
     "lint": "oxlint .",
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/core": "^0.13.1",
-    "@pyreon/reactivity": "^0.13.1",
-    "@pyreon/runtime-dom": "^0.13.1"
+    "@pyreon/core": "^0.15.0",
+    "@pyreon/reactivity": "^0.15.0",
+    "@pyreon/runtime-dom": "^0.15.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.9",
+    "@pyreon/test-utils": "^0.13.2",
+    "@vitest/browser-playwright": "^4.1.4",
     "happy-dom": "^20.8.3"
   }
 }

package/src/env.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Minimal process type — just enough for `process.env.NODE_ENV` checks.
+ * Avoids requiring @types/node in consumers that import pyreon source
+ * via the `"bun"` export condition.
+ */
+declare var process: { env: { NODE_ENV?: string } }