what-react 0.11.1 → 0.11.3

package/dom.d.ts

@@ -0,0 +1,57 @@
+// what-react/dom — react-dom compatible surface (src/dom.js).
+// Alias `react-dom` → `what-react/dom` to run React libraries that render.
+
+import type { ReactNode } from './index';
+
+export interface Root {
+  render(children: ReactNode): void;
+  unmount(): void;
+}
+
+export function createRoot(container: Element | DocumentFragment): Root;
+export function hydrateRoot(
+  container: Element | DocumentFragment,
+  initialChildren: ReactNode,
+): Root;
+
+export function render(
+  element: ReactNode,
+  container: Element | DocumentFragment,
+  callback?: () => void,
+): void;
+
+export function unmountComponentAtNode(
+  container: Element | DocumentFragment,
+): boolean;
+
+export function createPortal(
+  children: ReactNode,
+  container: Element | DocumentFragment,
+  key?: string | null,
+): ReactNode;
+
+export function flushSync<R>(fn: () => R): R;
+
+export function findDOMNode(
+  component: unknown,
+): Element | Text | null;
+
+export function unstable_batchedUpdates<A, R>(
+  fn: (arg: A) => R,
+  arg?: A,
+): R;
+
+export const version: string;
+
+declare const ReactDOM: {
+  createRoot: typeof createRoot;
+  hydrateRoot: typeof hydrateRoot;
+  render: typeof render;
+  unmountComponentAtNode: typeof unmountComponentAtNode;
+  createPortal: typeof createPortal;
+  flushSync: typeof flushSync;
+  findDOMNode: typeof findDOMNode;
+  unstable_batchedUpdates: typeof unstable_batchedUpdates;
+  version: string;
+};
+export default ReactDOM;

package/index.d.ts

@@ -0,0 +1,272 @@
+// what-react — TypeScript declarations for the React compatibility layer.
+//
+// what-react implements React's public API (hooks that return VALUES,
+// re-rendering components, keyed reconciliation) on What's runtime. These
+// declarations type the surface that is *actually exported* from src/index.js
+// so `import { useState, createElement } from 'what-react'` is type-checked
+// instead of resolving to `any`.
+//
+// Scope: the module's own exports. When you alias `react` → `what-react` to run
+// third-party React libraries, those libraries still bring their own
+// `@types/react` declarations — these types are for code that imports
+// what-react directly.
+
+// ---------------------------------------------------------------------------
+// Core element / node types
+// ---------------------------------------------------------------------------
+
+export type Key = string | number;
+
+export interface RefObject<T> {
+  readonly current: T | null;
+}
+export interface MutableRefObject<T> {
+  current: T;
+}
+export type RefCallback<T> = (instance: T | null) => void;
+export type Ref<T> = RefCallback<T> | RefObject<T> | null;
+
+export interface ReactElement<P = any, T = any> {
+  type: T;
+  props: P;
+  key: Key | null;
+}
+
+export type ReactNode =
+  | ReactElement
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | Iterable<ReactNode>;
+
+export interface FunctionComponent<P = {}> {
+  (props: P & { children?: ReactNode }): ReactElement | null;
+  displayName?: string;
+}
+export type FC<P = {}> = FunctionComponent<P>;
+
+export interface ComponentClass<P = {}, S = {}> {
+  new (props: P): Component<P, S>;
+  displayName?: string;
+}
+export type ComponentType<P = {}> = FunctionComponent<P> | ComponentClass<P>;
+
+export interface ExoticComponent<P = {}> {
+  (props: P): ReactElement | null;
+}
+
+// ---------------------------------------------------------------------------
+// Hooks
+// ---------------------------------------------------------------------------
+
+export type Dispatch<A> = (value: A) => void;
+export type SetStateAction<S> = S | ((prev: S) => S);
+
+export function useState<S>(
+  initialState: S | (() => S),
+): [S, Dispatch<SetStateAction<S>>];
+export function useState<S = undefined>(): [
+  S | undefined,
+  Dispatch<SetStateAction<S | undefined>>,
+];
+
+export type Reducer<S, A> = (prevState: S, action: A) => S;
+export type ReducerState<R> = R extends Reducer<infer S, any> ? S : never;
+export type ReducerAction<R> = R extends Reducer<any, infer A> ? A : never;
+
+export function useReducer<R extends Reducer<any, any>>(
+  reducer: R,
+  initialState: ReducerState<R>,
+): [ReducerState<R>, Dispatch<ReducerAction<R>>];
+export function useReducer<R extends Reducer<any, any>, I>(
+  reducer: R,
+  initialArg: I,
+  init: (arg: I) => ReducerState<R>,
+): [ReducerState<R>, Dispatch<ReducerAction<R>>];
+
+export type DependencyList = ReadonlyArray<unknown>;
+export type EffectCallback = () => void | (() => void);
+
+export function useEffect(effect: EffectCallback, deps?: DependencyList): void;
+export function useLayoutEffect(
+  effect: EffectCallback,
+  deps?: DependencyList,
+): void;
+export function useInsertionEffect(
+  effect: EffectCallback,
+  deps?: DependencyList,
+): void;
+
+export function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;
+export function useCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  deps: DependencyList,
+): T;
+
+export function useRef<T>(initialValue: T): MutableRefObject<T>;
+export function useRef<T>(initialValue: T | null): RefObject<T>;
+export function useRef<T = undefined>(): MutableRefObject<T | undefined>;
+
+export function useImperativeHandle<T, R extends T>(
+  ref: Ref<T> | undefined,
+  create: () => R,
+  deps?: DependencyList,
+): void;
+
+export interface ProviderProps<T> {
+  value: T;
+  children?: ReactNode;
+}
+export interface ConsumerProps<T> {
+  children: (value: T) => ReactNode;
+}
+export type Provider<T> = FunctionComponent<ProviderProps<T>>;
+export type Consumer<T> = FunctionComponent<ConsumerProps<T>>;
+export interface Context<T> {
+  Provider: Provider<T>;
+  Consumer: Consumer<T>;
+  displayName?: string;
+}
+export function createContext<T>(defaultValue: T): Context<T>;
+export function useContext<T>(context: Context<T>): T;
+
+export function useSyncExternalStore<T>(
+  subscribe: (onStoreChange: () => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T,
+): T;
+
+export function useTransition(): [boolean, (callback: () => void) => void];
+export function startTransition(scope: () => void): void;
+export function useDeferredValue<T>(value: T): T;
+export function useId(): string;
+export function useDebugValue<T>(value?: T, format?: (value: T) => any): void;
+export function use<T>(usable: Promise<T> | Context<T>): T;
+
+// ---------------------------------------------------------------------------
+// Element creation & utilities
+// ---------------------------------------------------------------------------
+
+export function createElement(
+  type: any,
+  props?: any,
+  ...children: ReactNode[]
+): ReactElement;
+
+export const Fragment: ExoticComponent<{ children?: ReactNode }>;
+
+export interface ForwardRefRenderFunction<T, P = {}> {
+  (props: P, ref: Ref<T>): ReactElement | null;
+}
+export function forwardRef<T, P = {}>(
+  render: ForwardRefRenderFunction<T, P>,
+): FunctionComponent<P & { ref?: Ref<T> }>;
+
+export function createRef<T = any>(): RefObject<T>;
+
+export function memo<P extends object>(
+  Component: FunctionComponent<P>,
+  areEqual?: (prev: Readonly<P>, next: Readonly<P>) => boolean,
+): FunctionComponent<P>;
+
+export function lazy<T extends ComponentType<any>>(
+  loader: () => Promise<{ default: T }>,
+): T;
+
+export interface SuspenseProps {
+  children?: ReactNode;
+  fallback?: ReactNode;
+}
+export function Suspense(props: SuspenseProps): ReactElement | null;
+
+export const Children: {
+  map<T>(
+    children: ReactNode,
+    fn: (child: ReactNode, index: number) => T,
+  ): T[];
+  forEach(
+    children: ReactNode,
+    fn: (child: ReactNode, index: number) => void,
+  ): void;
+  count(children: ReactNode): number;
+  only(children: ReactNode): ReactElement;
+  toArray(children: ReactNode): ReactNode[];
+};
+
+export function cloneElement(
+  element: ReactElement,
+  props?: any,
+  ...children: ReactNode[]
+): ReactElement;
+
+export function createFactory(
+  type: any,
+): (props?: any, ...children: ReactNode[]) => ReactElement;
+
+export function isValidElement(object: unknown): object is ReactElement;
+
+export function StrictMode(props: { children?: ReactNode }): ReactElement | null;
+
+export function act(callback: () => void | Promise<void>): Promise<void>;
+
+// Class components are shimmed but expose the familiar base-class surface.
+export class Component<P = {}, S = {}> {
+  constructor(props: P);
+  props: Readonly<P> & { children?: ReactNode };
+  state: Readonly<S>;
+  setState(
+    state: Partial<S> | ((prev: Readonly<S>, props: Readonly<P>) => Partial<S>),
+    callback?: () => void,
+  ): void;
+  forceUpdate(callback?: () => void): void;
+  render(): ReactNode;
+}
+export class PureComponent<P = {}, S = {}> extends Component<P, S> {}
+
+export function unstable_flushUpdates(): void;
+
+export const version: string;
+
+// ---------------------------------------------------------------------------
+// Default export — the React namespace object bundling the above.
+// ---------------------------------------------------------------------------
+
+declare const React: {
+  createElement: typeof createElement;
+  cloneElement: typeof cloneElement;
+  createFactory: typeof createFactory;
+  createRef: typeof createRef;
+  createContext: typeof createContext;
+  forwardRef: typeof forwardRef;
+  memo: typeof memo;
+  lazy: typeof lazy;
+  isValidElement: typeof isValidElement;
+  Children: typeof Children;
+  Fragment: typeof Fragment;
+  Suspense: typeof Suspense;
+  StrictMode: typeof StrictMode;
+  Component: typeof Component;
+  PureComponent: typeof PureComponent;
+  act: typeof act;
+  useState: typeof useState;
+  useReducer: typeof useReducer;
+  useMemo: typeof useMemo;
+  useCallback: typeof useCallback;
+  useRef: typeof useRef;
+  useEffect: typeof useEffect;
+  useLayoutEffect: typeof useLayoutEffect;
+  useInsertionEffect: typeof useInsertionEffect;
+  useImperativeHandle: typeof useImperativeHandle;
+  useContext: typeof useContext;
+  useSyncExternalStore: typeof useSyncExternalStore;
+  useTransition: typeof useTransition;
+  useDeferredValue: typeof useDeferredValue;
+  startTransition: typeof startTransition;
+  useId: typeof useId;
+  useDebugValue: typeof useDebugValue;
+  use: typeof use;
+  version: string;
+};
+export default React;

package/jsx-dev-runtime.d.ts

@@ -0,0 +1,18 @@
+// what-react/jsx-dev-runtime — development JSX runtime type definitions.
+// Mirrors jsx-runtime.d.ts; TS uses this under "jsx": "react-jsxdev".
+
+import type { ReactElement, Key } from './index';
+
+export { Fragment } from './index';
+export { JSX } from './jsx-runtime';
+
+export function jsx(type: any, props: any, key?: Key): ReactElement;
+export function jsxs(type: any, props: any, key?: Key): ReactElement;
+export function jsxDEV(
+  type: any,
+  props: any,
+  key?: Key,
+  isStaticChildren?: boolean,
+  source?: unknown,
+  self?: unknown,
+): ReactElement;

package/jsx-runtime.d.ts

@@ -0,0 +1,300 @@
+// what-react/jsx-runtime — JSX automatic-runtime type definitions.
+//
+// Enables type-checked JSX authoring against what-react with:
+//   "jsx": "react-jsx", "jsxImportSource": "what-react"
+//
+// The prop model is React's (camelCase events, `className`, object `style`,
+// plain — not reactive — values), matching what-react's real React semantics.
+// Common attributes are typed for autocomplete; an index signature keeps
+// arbitrary/custom attributes and web-component tags valid.
+
+import type { ReactElement, ReactNode, Ref, Key } from './index';
+
+export { Fragment } from './index';
+
+export function jsx(type: any, props: any, key?: Key): ReactElement;
+export function jsxs(type: any, props: any, key?: Key): ReactElement;
+
+type EventHandler<E extends Event = Event> = (
+  event: E & { currentTarget: EventTarget & Element; target: Element },
+) => void;
+
+interface DOMEventHandlers {
+  onClick?: EventHandler<MouseEvent>;
+  onDoubleClick?: EventHandler<MouseEvent>;
+  onMouseDown?: EventHandler<MouseEvent>;
+  onMouseUp?: EventHandler<MouseEvent>;
+  onMouseEnter?: EventHandler<MouseEvent>;
+  onMouseLeave?: EventHandler<MouseEvent>;
+  onMouseMove?: EventHandler<MouseEvent>;
+  onMouseOver?: EventHandler<MouseEvent>;
+  onMouseOut?: EventHandler<MouseEvent>;
+  onContextMenu?: EventHandler<MouseEvent>;
+  onInput?: EventHandler<InputEvent>;
+  onChange?: EventHandler<Event>;
+  onSubmit?: EventHandler<SubmitEvent>;
+  onReset?: EventHandler<Event>;
+  onKeyDown?: EventHandler<KeyboardEvent>;
+  onKeyUp?: EventHandler<KeyboardEvent>;
+  onKeyPress?: EventHandler<KeyboardEvent>;
+  onFocus?: EventHandler<FocusEvent>;
+  onBlur?: EventHandler<FocusEvent>;
+  onScroll?: EventHandler<Event>;
+  onWheel?: EventHandler<WheelEvent>;
+  onDragStart?: EventHandler<DragEvent>;
+  onDragOver?: EventHandler<DragEvent>;
+  onDrop?: EventHandler<DragEvent>;
+  onTouchStart?: EventHandler<TouchEvent>;
+  onTouchMove?: EventHandler<TouchEvent>;
+  onTouchEnd?: EventHandler<TouchEvent>;
+}
+
+interface HTMLAttributes extends DOMEventHandlers {
+  children?: ReactNode;
+  key?: Key;
+  ref?: Ref<any>;
+  dangerouslySetInnerHTML?: { __html: string };
+
+  className?: string;
+  class?: string;
+  id?: string;
+  style?: string | Record<string, string | number>;
+  title?: string;
+  role?: string;
+  slot?: string;
+  lang?: string;
+  dir?: string;
+  hidden?: boolean;
+  draggable?: boolean;
+  contentEditable?: boolean | 'true' | 'false' | 'inherit';
+  spellCheck?: boolean;
+  tabIndex?: number;
+
+  [dataAttr: `data-${string}`]: any;
+  [ariaAttr: `aria-${string}`]: any;
+  // what-react passes unknown attributes straight through — keep them valid.
+  [attr: string]: any;
+}
+
+interface InputAttributes extends HTMLAttributes {
+  type?: string;
+  value?: string | number | ReadonlyArray<string>;
+  defaultValue?: string | number | ReadonlyArray<string>;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+  min?: string | number;
+  max?: string | number;
+  step?: string | number;
+  pattern?: string;
+  autoComplete?: string;
+  autoFocus?: boolean;
+  multiple?: boolean;
+  accept?: string;
+}
+
+interface AnchorAttributes extends HTMLAttributes {
+  href?: string;
+  target?: string;
+  rel?: string;
+  download?: string | boolean;
+}
+
+interface ImgAttributes extends HTMLAttributes {
+  src?: string;
+  srcSet?: string;
+  alt?: string;
+  width?: string | number;
+  height?: string | number;
+  loading?: 'eager' | 'lazy';
+  decoding?: 'async' | 'auto' | 'sync';
+}
+
+interface ButtonAttributes extends HTMLAttributes {
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+  name?: string;
+  value?: string | number;
+  form?: string;
+}
+
+interface FormAttributes extends HTMLAttributes {
+  action?: string;
+  method?: string;
+  encType?: string;
+  noValidate?: boolean;
+  target?: string;
+}
+
+interface LabelAttributes extends HTMLAttributes {
+  htmlFor?: string;
+  for?: string;
+}
+
+interface OptionAttributes extends HTMLAttributes {
+  value?: string | number;
+  selected?: boolean;
+  disabled?: boolean;
+}
+
+interface SelectAttributes extends HTMLAttributes {
+  value?: string | number | ReadonlyArray<string>;
+  defaultValue?: string | number | ReadonlyArray<string>;
+  name?: string;
+  disabled?: boolean;
+  required?: boolean;
+  multiple?: boolean;
+}
+
+interface TextareaAttributes extends HTMLAttributes {
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  rows?: number;
+  cols?: number;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+}
+
+interface MediaAttributes extends HTMLAttributes {
+  src?: string;
+  controls?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  poster?: string;
+  preload?: string;
+}
+
+interface SVGAttributes extends HTMLAttributes {
+  width?: string | number;
+  height?: string | number;
+  viewBox?: string;
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: string | number;
+  x?: string | number;
+  y?: string | number;
+  cx?: string | number;
+  cy?: string | number;
+  r?: string | number;
+  d?: string;
+  points?: string;
+  transform?: string;
+  xmlns?: string;
+}
+
+export namespace JSX {
+  type Element = ReactElement;
+  interface ElementChildrenAttribute {
+    children: {};
+  }
+  interface IntrinsicAttributes {
+    key?: Key;
+  }
+
+  interface IntrinsicElements {
+    a: AnchorAttributes;
+    img: ImgAttributes;
+    input: InputAttributes;
+    button: ButtonAttributes;
+    form: FormAttributes;
+    label: LabelAttributes;
+    option: OptionAttributes;
+    select: SelectAttributes;
+    textarea: TextareaAttributes;
+    video: MediaAttributes;
+    audio: MediaAttributes;
+    source: MediaAttributes;
+
+    div: HTMLAttributes;
+    span: HTMLAttributes;
+    p: HTMLAttributes;
+    section: HTMLAttributes;
+    article: HTMLAttributes;
+    header: HTMLAttributes;
+    footer: HTMLAttributes;
+    main: HTMLAttributes;
+    aside: HTMLAttributes;
+    nav: HTMLAttributes;
+    h1: HTMLAttributes;
+    h2: HTMLAttributes;
+    h3: HTMLAttributes;
+    h4: HTMLAttributes;
+    h5: HTMLAttributes;
+    h6: HTMLAttributes;
+    ul: HTMLAttributes;
+    ol: HTMLAttributes;
+    li: HTMLAttributes;
+    dl: HTMLAttributes;
+    dt: HTMLAttributes;
+    dd: HTMLAttributes;
+    table: HTMLAttributes;
+    thead: HTMLAttributes;
+    tbody: HTMLAttributes;
+    tfoot: HTMLAttributes;
+    tr: HTMLAttributes;
+    th: HTMLAttributes;
+    td: HTMLAttributes;
+    caption: HTMLAttributes;
+    colgroup: HTMLAttributes;
+    col: HTMLAttributes;
+    fieldset: HTMLAttributes;
+    legend: HTMLAttributes;
+    strong: HTMLAttributes;
+    em: HTMLAttributes;
+    b: HTMLAttributes;
+    i: HTMLAttributes;
+    u: HTMLAttributes;
+    small: HTMLAttributes;
+    mark: HTMLAttributes;
+    code: HTMLAttributes;
+    pre: HTMLAttributes;
+    kbd: HTMLAttributes;
+    blockquote: HTMLAttributes;
+    hr: HTMLAttributes;
+    br: HTMLAttributes;
+    figure: HTMLAttributes;
+    figcaption: HTMLAttributes;
+    details: HTMLAttributes;
+    summary: HTMLAttributes;
+    dialog: HTMLAttributes;
+    picture: HTMLAttributes;
+    iframe: HTMLAttributes;
+    canvas: HTMLAttributes;
+    template: HTMLAttributes;
+    time: HTMLAttributes;
+    progress: HTMLAttributes;
+    meter: HTMLAttributes;
+    output: HTMLAttributes;
+    datalist: HTMLAttributes;
+    optgroup: HTMLAttributes;
+
+    svg: SVGAttributes;
+    g: SVGAttributes;
+    path: SVGAttributes;
+    circle: SVGAttributes;
+    ellipse: SVGAttributes;
+    rect: SVGAttributes;
+    line: SVGAttributes;
+    polyline: SVGAttributes;
+    polygon: SVGAttributes;
+    text: SVGAttributes;
+    tspan: SVGAttributes;
+    defs: SVGAttributes;
+    linearGradient: SVGAttributes;
+    radialGradient: SVGAttributes;
+    stop: SVGAttributes;
+    clipPath: SVGAttributes;
+    use: SVGAttributes;
+
+    // Custom elements / web components remain valid.
+    [tagName: string]: HTMLAttributes;
+  }
+}

package/package.json

@@ -1,22 +1,43 @@
 {
   "name": "what-react",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "description": "React compatibility layer for What Framework — real React semantics (value hooks, re-renders, context) on a dedicated compat runtime",
   "type": "module",
   "sideEffects": false,
   "main": "src/index.js",
+  "types": "index.d.ts",
   "scripts": {
     "test": "node --test 'test/*.test.js'"
   },
   "exports": {
-    ".": "./src/index.js",
-    "./dom": "./src/dom.js",
-    "./jsx-runtime": "./src/jsx-runtime.js",
-    "./jsx-dev-runtime": "./src/jsx-dev-runtime.js",
-    "./vite": "./src/vite-plugin.js"
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./src/index.js"
+    },
+    "./dom": {
+      "types": "./dom.d.ts",
+      "import": "./src/dom.js"
+    },
+    "./jsx-runtime": {
+      "types": "./jsx-runtime.d.ts",
+      "import": "./src/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./jsx-dev-runtime.d.ts",
+      "import": "./src/jsx-dev-runtime.js"
+    },
+    "./vite": {
+      "types": "./vite.d.ts",
+      "import": "./src/vite-plugin.js"
+    }
   },
   "files": [
-    "src"
+    "src",
+    "index.d.ts",
+    "dom.d.ts",
+    "jsx-runtime.d.ts",
+    "jsx-dev-runtime.d.ts",
+    "vite.d.ts"
   ],
   "keywords": [
     "react",
@@ -27,7 +48,7 @@
     "compatibility"
   ],
   "peerDependencies": {
-    "what-core": "^0.11.1"
+    "what-core": "^0.11.3"
   },
   "author": "ZVN DEV (https://zvndev.com)",
   "license": "MIT",

package/src/runtime.js

@@ -467,6 +467,38 @@ function mountRNode(v, kind, container, svg, owner) {
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
+// A portal target may live inside an <svg> (recharts 3.x z-index layers are
+// SVG <g> portal targets). Children portaled into an SVG container must be
+// created in the SVG namespace, not HTML.
+function targetSvg(target) {
+  return !!target && target.namespaceURI === SVG_NS && target.tagName !== 'foreignObject';
+}
+
+// camelCase React SVG prop → correct kebab/colon SVG attribute name.
+// Covers the presentation/text/clip attributes charting libs (recharts) emit.
+const SVG_ATTR_MAP = {
+  strokeWidth: 'stroke-width', strokeDasharray: 'stroke-dasharray',
+  strokeDashoffset: 'stroke-dashoffset', strokeLinecap: 'stroke-linecap',
+  strokeLinejoin: 'stroke-linejoin', strokeMiterlimit: 'stroke-miterlimit',
+  strokeOpacity: 'stroke-opacity', fillOpacity: 'fill-opacity',
+  fillRule: 'fill-rule', clipPath: 'clip-path', clipRule: 'clip-rule',
+  stopColor: 'stop-color', stopOpacity: 'stop-opacity',
+  textAnchor: 'text-anchor', dominantBaseline: 'dominant-baseline',
+  alignmentBaseline: 'alignment-baseline', baselineShift: 'baseline-shift',
+  colorInterpolation: 'color-interpolation',
+  colorInterpolationFilters: 'color-interpolation-filters',
+  floodColor: 'flood-color', floodOpacity: 'flood-opacity',
+  letterSpacing: 'letter-spacing', wordSpacing: 'word-spacing',
+  pointerEvents: 'pointer-events', shapeRendering: 'shape-rendering',
+  vectorEffect: 'vector-effect', paintOrder: 'paint-order',
+  markerStart: 'marker-start', markerMid: 'marker-mid', markerEnd: 'marker-end',
+  // Font + rendering attrs recharts emits on <text>/axis/tick/legend elements.
+  fontSize: 'font-size', fontFamily: 'font-family', fontWeight: 'font-weight',
+  fontStyle: 'font-style', fontVariant: 'font-variant', fontStretch: 'font-stretch',
+  textRendering: 'text-rendering', imageRendering: 'image-rendering',
+  writingMode: 'writing-mode', lightingColor: 'lighting-color',
+};
+
 function mountElement(v, container, svg, owner) {
   const tag = v.tag;
   const childSvg = (svg || tag === 'svg') && tag !== 'foreignObject';
@@ -551,7 +583,7 @@ function mountPortal(v, container, owner) {
     console.warn('[what-react] createPortal: target container not found');
     return rn;
   }
-  rn.children = patchChildren(target, [], normalizeChildren(v.children), null, false, owner);
+  rn.children = patchChildren(target, [], normalizeChildren(v.children), null, targetSvg(target), owner);
   return rn;
 }
 
@@ -705,13 +737,13 @@ function patchPortal(rn, v, owner) {
   const target = v.props && v.props.container;
   if (target === rn.container) {
     if (target) {
-      rn.children = patchChildren(target, rn.children, normalizeChildren(v.children), null, false, owner);
+      rn.children = patchChildren(target, rn.children, normalizeChildren(v.children), null, targetSvg(target), owner);
     }
   } else {
     for (const child of rn.children) unmountRNode(child, true);
     rn.container = target || null;
     rn.children = target
-      ? patchChildren(target, [], normalizeChildren(v.children), null, false, owner)
+      ? patchChildren(target, [], normalizeChildren(v.children), null, targetSvg(target), owner)
       : [];
   }
   rn.vnode = v;
@@ -1130,8 +1162,16 @@ export function setProperty(el, name, value, oldValue, svg) {
       el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', value);
       return;
     }
-    if (value == null || value === false) el.removeAttribute(name);
-    else el.setAttribute(name, value === true ? '' : value);
+    // React accepts camelCase SVG presentation props (strokeWidth, fontSize, …)
+    // and the spec expects kebab-case attribute names. Unlike HTML elements,
+    // SVG-namespaced elements preserve the exact case passed to setAttribute —
+    // so "strokeWidth" stays "strokeWidth", not "strokewidth". That camelCase
+    // name is not a valid SVG presentation attribute, so the renderer silently
+    // ignores it. Map the known ones to their correct kebab-case equivalents.
+    const mapped = SVG_ATTR_MAP[name];
+    const attr = mapped || name;
+    if (value == null || value === false) el.removeAttribute(attr);
+    else el.setAttribute(attr, value === true ? '' : value);
     return;
   }
 

package/vite.d.ts

@@ -0,0 +1,21 @@
+// what-react/vite — Vite plugin that aliases `react`/`react-dom` to what-react
+// and keeps installed React packages out of pre-bundling (src/vite-plugin.js).
+
+export interface ReactCompatOptions {
+  /** Additional packages to exclude from Vite's dependency pre-bundling. */
+  exclude?: string[];
+  /** Auto-detect installed React packages to exclude. Defaults to true. */
+  autoDetect?: boolean;
+}
+
+// Structural Vite plugin shape — assignable to Vite's `PluginOption` without
+// taking a hard type dependency on `vite`.
+export interface ReactCompatPlugin {
+  name: string;
+  enforce?: 'pre' | 'post';
+  [hook: string]: unknown;
+}
+
+export function reactCompat(options?: ReactCompatOptions): ReactCompatPlugin;
+
+export default reactCompat;