@ipxjs/refract 0.9.0 → 0.10.1

package/README.md

@@ -224,22 +224,22 @@ The values below are from a local run on February 17, 2026.
 
 | Framework                  | JS bundle (raw) | JS bundle (gzip) |
 |---------------------------|----------------:|-----------------:|
-| Refract (`core`)          | 8.62 kB         | 3.24 kB          |
-| Refract (`core+hooks`)    | 10.27 kB        | 3.84 kB          |
-| Refract (`core+context`)  | 9.12 kB         | 3.47 kB          |
-| Refract (`core+memo`)     | 9.29 kB         | 3.47 kB          |
-| Refract (`core+security`) | 9.53 kB         | 3.54 kB          |
-| Refract (`refract`)       | 15.20 kB        | 5.55 kB          |
-| React                     | 189.74 kB       | 59.58 kB         |
-| Preact                    | 14.46 kB        | 5.96 kB          |
+| Refract (`core`)          | 10.02 kB        | 3.74 kB          |
+| Refract (`core+hooks`)    | 12.08 kB        | 4.49 kB          |
+| Refract (`core+context`)  | 10.66 kB        | 4.00 kB          |
+| Refract (`core+memo`)     | 10.70 kB        | 3.97 kB          |
+| Refract (`core+security`) | 10.93 kB        | 4.03 kB          |
+| Refract (`refract`)       | 17.15 kB        | 6.23 kB          |
+| React                     | 189.74 kB       | 59.52 kB         |
+| Preact                    | 14.46 kB        | 5.95 kB          |
 
 Load-time metrics are machine-dependent, so the benchmark script prints a fresh
 per-run timing table (median, p95, min/max, sd) for every framework.
-The CI preset (`make bench-ci`, 40 measured + 5 warmup runs) also passed on
-February 17, 2026 with default guardrails (`DCL p95 <= 16ms`, `DCL sd <= 2ms`).
+The CI preset (`make bench-ci`, 40 measured + 5 warmup runs) enforces default
+guardrails (`DCL p95 <= 16ms`, `DCL sd <= 2ms`).
 
-From this snapshot, Refract `core` gzip JS is about 18.4x smaller than React,
-and the full `refract` entrypoint is about 10.7x smaller.
+From this snapshot, Refract `core` gzip JS is about 15.9x smaller than React,
+and the full `refract` entrypoint is about 9.6x smaller.
 
 ### Component Combination Benchmarks (Vitest)
 
@@ -249,15 +249,15 @@ Higher `hz` is better.
 
 | Component usage profile | Mount (hz) | Mount vs base | Reconcile (hz) | Reconcile vs base |
 |-------------------------|------------|---------------|----------------|-------------------|
-| `base` | 6570.25 | baseline | 3413.29 | baseline |
-| `memo` | 7257.38 | +10.5% | 7541.91 | +120.9% |
-| `context` | 6427.45 | -2.2% | 7119.35 | +108.6% |
-| `fragment` | 5935.06 | -9.7% | 3437.54 | +0.7% |
-| `keyed` | 9022.55 | +37.3% | 6535.55 | +91.5% |
-| `memo+context` | 7015.37 | +6.8% | 6782.87 | +98.7% |
-| `memo+context+keyed` | 7992.82 | +21.7% | 6803.09 | +99.3% |
-
-In this run, `keyed` was the fastest mount profile, while
+| `base` | 5160.53 | baseline | 3262.99 | baseline |
+| `memo` | 4858.51 | -5.9% | 5092.55 | +56.1% |
+| `context` | 3862.01 | -25.2% | 4954.24 | +51.8% |
+| `fragment` | 4656.36 | -9.8% | 3760.97 | +15.3% |
+| `keyed` | 5754.75 | +11.5% | 4311.45 | +32.1% |
+| `memo+context` | 5872.59 | +13.8% | 4621.45 | +41.6% |
+| `memo+context+keyed` | 5555.42 | +7.7% | 4509.78 | +38.2% |
+
+In this run, `memo+context` was the fastest mount profile, while
 `memo` was the fastest reconcile profile.
 
 ### Running the Benchmark
@@ -304,7 +304,7 @@ How Refract compares to React and Preact:
 | SVG support                    | Yes     | Yes   | Yes    |
 | **Components**                 |         |       |        |
 | Functional components          | Yes     | Yes   | Yes    |
-| Class components               | No      | Yes   | Yes    |
+| Class components               | Partial⁶ | Yes   | Yes    |
 | **Hooks**                      |         |       |        |
 | useState                       | Yes     | Yes   | Yes    |
 | useEffect                      | Yes     | Yes   | Yes    |
@@ -329,10 +329,10 @@ How Refract compares to React and Preact:
 | className prop                 | Yes     | Yes   | Yes¹   |
 | dangerouslySetInnerHTML        | Yes     | Yes   | Yes    |
 | Portals                        | Yes     | Yes   | Yes    |
-| Suspense / lazy                | No      | Yes   | Yes²   |
+| Suspense / lazy                | No⁸     | Yes   | Yes²   |
 | Error boundaries               | Yes³    | Yes   | Yes    |
 | Server-side rendering          | No      | Yes   | Yes    |
-| Hydration                      | No      | Yes   | Yes    |
+| Hydration                      | No⁹     | Yes   | Yes    |
 | **Security**                   |         |       |        |
 | Default HTML sanitizer for `dangerouslySetInnerHTML` | Yes | No | No |
 | Configurable HTML sanitizer hook (`setHtmlSanitizer`) | Yes | No | No |
@@ -340,19 +340,22 @@ How Refract compares to React and Preact:
 | Fiber architecture             | Yes     | Yes   | No     |
 | Concurrent rendering           | No      | Yes   | No     |
 | Automatic batching             | Yes     | Yes   | Yes    |
-| memo / PureComponent           | Yes     | Yes   | Yes    |
+| memo / PureComponent           | Partial¹⁰ | Yes | Yes    |
 | **Ecosystem**                  |         |       |        |
 | DevTools                       | Basic (hook API) | Yes   | Yes    |
-| React compatibility layer      | Yes⁶    | N/A   | Yes⁷   |
-| **Bundle Size (gzip, JS)**     | ~3.2-5.6 kB⁴ | ~59.5 kB | ~6.0 kB |
+| React compatibility layer      | Partial⁶ | N/A  | Yes⁷   |
+| **Bundle Size (gzip, JS)**     | ~3.7-6.3 kB⁴ | ~59.5 kB | ~6.0 kB |
 
 ¹ Preact supports both `class` and `className`.
 ² Preact has partial Suspense support via `preact/compat`.
-³ Refract uses the `useErrorBoundary` hook rather than class-based error boundaries.
+³ Refract core uses the `useErrorBoundary` hook; compat wrappers can emulate class-style boundaries.
 ⁴ Refract size depends on entrypoint (`refract/core` vs `refract` full).
 ⁵ Refract exposes `useTransition` / `useDeferredValue` but currently runs both synchronously (no concurrent scheduling).
-⁶ Available via opt-in compat entrypoints (`refract/compat/react*`).
+⁶ Available via opt-in compat entrypoints (`refract/compat/react*`) with partial React API parity.
 ⁷ Preact compatibility is provided through `preact/compat`.
+⁸ Compat exports `Suspense`/`lazy`, but full suspension/fallback semantics are not implemented.
+⁹ `hydrateRoot` is exposed in compat, but currently performs client render rather than true SSR hydration.
+¹⁰ `memo` is supported; `PureComponent` is compat-oriented and does not guarantee full React shallow-compare behavior.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipxjs/refract",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "A minimal React-like virtual DOM library with an optional React compat layer",
   "type": "module",
   "main": "src/refract/index.ts",
@@ -28,6 +28,10 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.3.8",
+    "@mui/x-charts": "^8.27.0",
     "@types/jsdom": "^27.0.0",
     "jsdom": "^28.0.0",
     "react": "^19.2.4",

package/src/refract/compat/react-jsx-runtime.ts

@@ -1,6 +1,6 @@
 import { createElement, Fragment } from "../createElement.js";
 import type { VNode, VNodeType } from "../types.js";
-import { isClassComponent, wrapClassComponent, getWrappedHandler } from "./react.js";
+import { resolveCompatType, getWrappedHandler } from "./react.js";
 
 type JsxProps = Record<string, unknown> | null | undefined;
 type JsxChild = VNode | string | number | boolean | null | undefined | JsxChild[];
@@ -19,7 +19,7 @@ function normalizeVNodeChildren(vnode: VNode): VNode {
 }
 
 function createJsxElement(type: VNodeType, rawProps: JsxProps, key?: string): ReturnType<typeof createElement> {
-  const effectiveType = isClassComponent(type) ? wrapClassComponent(type as Function) : type;
+  const effectiveType = resolveCompatType(type);
   
   const props = { ...(rawProps ?? {}) };
   if (key !== undefined) {
@@ -56,4 +56,4 @@ export function jsxs(type: VNodeType, props: JsxProps, key?: string): ReturnType
   return createJsxElement(type, props, key);
 }
 
-export { Fragment };
+export { Fragment };

package/src/refract/compat/react.ts

@@ -1,6 +1,6 @@
 import { createElement as createElementImpl, Fragment } from "../createElement.js";
 import { memo } from "../memo.js";
-import { createContext as createContextImpl } from "../features/context.js";
+import { createContext as createContextImpl, setContextValue } from "../features/context.js";
 import {
   createRef,
   useErrorBoundary,
@@ -15,6 +15,9 @@ import {
 } from "./sharedInternals.js";
 
 const REACT_ELEMENT_TYPE = Symbol.for("react.element");
+const REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
+const REACT_MEMO_TYPE = Symbol.for("react.memo");
+const REACT_CONTEXT_TYPE = Symbol.for("react.context");
 type ElementChild = VNode | string | number | boolean | null | undefined | ElementChild[];
 
 ensureHookDispatcherRuntime();
@@ -292,6 +295,7 @@ export function lazy<T extends { default: (...args: any[]) => any }>(
 // ---------------------------------------------------------------------------
 
 const classWrapperCache = new WeakMap<Function, Function>();
+const exoticTypeCache = new WeakMap<object, unknown>();
 
 export function isClassComponent(type: unknown): boolean {
   return (
@@ -389,6 +393,76 @@ export function wrapClassComponent(ClassComp: Function): (props: any) => unknown
   return Wrapper;
 }
 
+export function resolveCompatType(type: unknown): unknown {
+  if (isClassComponent(type)) {
+    return wrapClassComponent(type as Function);
+  }
+
+  if (!type || typeof type !== "object") {
+    return type;
+  }
+
+  const cached = exoticTypeCache.get(type as object);
+  if (cached) return cached;
+
+  const exoticType = type as {
+    $$typeof?: symbol;
+    compare?: (a: Record<string, unknown>, b: Record<string, unknown>) => boolean;
+    displayName?: string;
+    render?: (props: Props, ref: { current: unknown } | ((value: unknown) => void) | null) => VNode;
+    type?: unknown;
+  };
+
+  if (exoticType.$$typeof === REACT_FORWARD_REF_TYPE && typeof exoticType.render === "function") {
+    const render = exoticType.render;
+    const wrappedForwardRef: RefractComponent = (props: Props) => {
+      const { ref, ...rest } = props as Props & { ref?: { current: unknown } | ((value: unknown) => void) | null };
+      return render(rest, ref ?? null);
+    };
+    (wrappedForwardRef as any).displayName = exoticType.displayName
+      ?? `ForwardRef(${(render as any).name || "anonymous"})`;
+    exoticTypeCache.set(type as object, wrappedForwardRef);
+    return wrappedForwardRef;
+  }
+
+  if (exoticType.$$typeof === REACT_MEMO_TYPE && exoticType.type != null) {
+    const resolvedInner = resolveCompatType(exoticType.type);
+    if (typeof resolvedInner === "function") {
+      const wrappedMemo = memo(
+        resolvedInner as (props: Props) => VNode,
+        typeof exoticType.compare === "function" ? exoticType.compare : undefined,
+      );
+      (wrappedMemo as any).displayName = exoticType.displayName
+        ?? (resolvedInner as any).displayName
+        ?? (resolvedInner as any).name
+        ?? "Memo";
+      exoticTypeCache.set(type as object, wrappedMemo);
+      return wrappedMemo;
+    }
+    exoticTypeCache.set(type as object, resolvedInner);
+    return resolvedInner;
+  }
+
+  if (exoticType.$$typeof === REACT_CONTEXT_TYPE) {
+    const contextObject = type as object;
+    const wrappedContextProvider: RefractComponent = (props: Props) => {
+      setContextValue(contextObject, props.value);
+      const children = props.children ?? [];
+      if (Array.isArray(children)) {
+        return children.length === 1
+          ? children[0] as VNode
+          : createElementImpl(Fragment, null, ...(children as ElementChild[]));
+      }
+      return children as VNode;
+    };
+    (wrappedContextProvider as any).displayName = (exoticType as any).displayName ?? "ContextProvider";
+    exoticTypeCache.set(type as object, wrappedContextProvider);
+    return wrappedContextProvider;
+  }
+
+  return type;
+}
+
 // ---------------------------------------------------------------------------
 // Event Wrapping
 // ---------------------------------------------------------------------------
@@ -457,7 +531,7 @@ function normalizeChildrenSingle(vnode: any): any {
 }
 
 export function createElement(type: unknown, props?: unknown, ...children: unknown[]): VNode {
-  const effectiveType = isClassComponent(type) ? wrapClassComponent(type as Function) : type;
+  const effectiveType = resolveCompatType(type);
 
   if (typeof type === 'string' && props && typeof props === 'object') {
     const newProps = { ...props } as Record<string, unknown>;
@@ -527,4 +601,4 @@ const ReactCompat = {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
 };
 
-export default ReactCompat;
+export default ReactCompat;

package/src/refract/coreRenderer.ts

@@ -4,6 +4,7 @@ import { reconcileChildren } from "./reconcile.js";
 import { Fragment } from "./createElement.js";
 import { Portal } from "./portal.js";
 import { createDom, applyProps } from "./dom.js";
+import { setContextValue } from "./features/context.js";
 import {
   runAfterComponentRenderHandlers,
   runAfterCommitHandlers,
@@ -24,6 +25,11 @@ export let isRendering = false;
 /** Store root fiber per container */
 const roots = new WeakMap<Node, Fiber>();
 let deletions: Fiber[] = [];
+const REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
+const REACT_MEMO_TYPE = Symbol.for("react.memo");
+const REACT_CONTEXT_TYPE = Symbol.for("react.context");
+const REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+const exoticTypeCache = new WeakMap<object, unknown>();
 
 export function pushDeletion(fiber: Fiber): void {
   deletions.push(fiber);
@@ -61,8 +67,9 @@ export function renderFiber(vnode: VNode, container: Node): void {
 /** Process a single fiber: call component, diff children.
  *  Returns true if bailed out (children should be skipped). */
 function processWorkUnit(fiber: Fiber): boolean {
-  const isComponent = typeof fiber.type === "function";
-  const isFragment = fiber.type === Fragment;
+  const resolvedType = resolveExoticFiberType(fiber.type);
+  const isComponent = typeof resolvedType === "function";
+  const isFragment = fiber.type === Fragment || fiber.type === REACT_FRAGMENT_TYPE;
   const isPortal = fiber.type === Portal;
 
   if (isComponent) {
@@ -74,7 +81,7 @@ function processWorkUnit(fiber: Fiber): boolean {
     fiber._hookIndex = 0;
     if (!fiber.hooks) fiber.hooks = [];
 
-    const comp = fiber.type as (props: Props) => unknown;
+    const comp = resolvedType as (props: Props) => unknown;
     runBeforeComponentRenderHandlers(fiber);
     try {
       const children = normalizeRenderedChildren(comp(fiber.props));
@@ -106,6 +113,46 @@ function processWorkUnit(fiber: Fiber): boolean {
   return false;
 }
 
+function resolveExoticFiberType(type: Fiber["type"]): unknown {
+  if (!type || type === "TEXT" || typeof type !== "object") {
+    return type;
+  }
+
+  const cached = exoticTypeCache.get(type as object);
+  if (cached) return cached;
+
+  const marker = (type as { $$typeof?: symbol }).$$typeof;
+
+  if (marker === REACT_MEMO_TYPE) {
+    const inner = (type as { type?: unknown }).type;
+    const resolved = inner == null ? type : resolveExoticFiberType(inner as Fiber["type"]);
+    exoticTypeCache.set(type as object, resolved);
+    return resolved;
+  }
+
+  if (marker === REACT_FORWARD_REF_TYPE && typeof (type as { render?: unknown }).render === "function") {
+    const render = (type as { render: (props: Props, ref: unknown) => unknown }).render;
+    const wrapped = (props: Props) => {
+      const { ref, ...rest } = props as Props & { ref?: unknown };
+      return render(rest, ref ?? null);
+    };
+    exoticTypeCache.set(type as object, wrapped);
+    return wrapped;
+  }
+
+  if (marker === REACT_CONTEXT_TYPE) {
+    const contextObject = type as object;
+    const wrapped = (props: Props) => {
+      setContextValue(contextObject, props.value);
+      return props.children ?? null;
+    };
+    exoticTypeCache.set(type as object, wrapped);
+    return wrapped;
+  }
+
+  return type;
+}
+
 /** Iterative depth-first work loop (avoids stack overflow on deep trees) */
 function performWork(rootFiber: Fiber): void {
   let fiber: Fiber | null = rootFiber;
@@ -160,7 +207,19 @@ function flattenRenderedChildren(raw: RenderedChild[]): VNode[] {
       result.push({ type: "TEXT", props: { nodeValue: String(child) }, key: null });
       continue;
     }
-    result.push(child);
+    if (typeof child === "object") {
+      const record = child as Record<string, unknown>;
+      if ("type" in record && "props" in record) {
+        const rawKey = record.key;
+        result.push({
+          type: record.type as VNode["type"],
+          props: (record.props && typeof record.props === "object")
+            ? record.props as Props
+            : {},
+          key: typeof rawKey === "string" || typeof rawKey === "number" ? rawKey : null,
+        });
+      }
+    }
   }
   return result;
 }

package/src/refract/dom.ts

@@ -91,17 +91,19 @@ function isSvgContext(fiber: Fiber): boolean {
 
 /** Apply props to a DOM element, diffing against old props */
 export function applyProps(
-  el: HTMLElement,
+  el: Element,
   oldProps: Record<string, unknown>,
   newProps: Record<string, unknown>,
 ): void {
+  const isSvgElement = el.namespaceURI === SVG_NS;
+
   for (const key of Object.keys(oldProps)) {
     if (key === "children" || key === "key" || key === "ref") continue;
     if (!(key in newProps)) {
       if (key.startsWith("on")) {
         el.removeEventListener(key.slice(2).toLowerCase(), getEventListener(oldProps[key]));
       } else {
-        el.removeAttribute(key);
+        el.removeAttribute(normalizeAttributeName(key, isSvgElement));
       }
     }
   }
@@ -134,11 +136,11 @@ export function applyProps(
           const styles = newProps[key] as Record<string, unknown>;
           for (const prop of Object.keys(prevStyles)) {
             if (!(prop in styles)) {
-              (el.style as unknown as Record<string, string>)[prop] = "";
+              (el as HTMLElement).style[prop as any] = "";
             }
           }
           for (const [prop, val] of Object.entries(styles)) {
-            (el.style as unknown as Record<string, string>)[prop] = val == null ? "" : String(val);
+            (el as HTMLElement).style[prop as any] = val == null ? "" : String(val);
           }
         } else {
           el.removeAttribute("style");
@@ -165,19 +167,37 @@ export function applyProps(
           el.addEventListener(event, getEventListener(newProps[key]));
         } else {
           const value = newProps[key];
+          const attrName = normalizeAttributeName(key, isSvgElement);
           if (unsafeUrlPropChecker(key, value)) {
-            el.removeAttribute(key);
+            el.removeAttribute(attrName);
             continue;
           }
           if (value == null || value === false) {
-            el.removeAttribute(key);
+            el.removeAttribute(attrName);
           } else if (value === true) {
-            el.setAttribute(key, "true");
+            el.setAttribute(attrName, "true");
           } else {
-            el.setAttribute(key, String(value));
+            el.setAttribute(attrName, String(value));
           }
         }
         break;
     }
   }
 }
+
+function normalizeAttributeName(key: string, isSvgElement: boolean): string {
+  if (!isSvgElement) return key;
+  if (key === "xlinkHref") return "xlink:href";
+  if (key === "xmlnsXlink") return "xmlns:xlink";
+  if (key === "xmlSpace") return "xml:space";
+  if (key === "xmlLang") return "xml:lang";
+  if (key === "xmlBase") return "xml:base";
+  if (SVG_ATTR_CASE_PRESERVED.has(key)) return key;
+  if (key.startsWith("aria-") || key.startsWith("data-")) return key;
+  return key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+
+const SVG_ATTR_CASE_PRESERVED = new Set([
+  "viewBox",
+  "preserveAspectRatio",
+]);

package/src/refract/features/context.ts

@@ -10,14 +10,27 @@ export interface Context<T> {
   _defaultValue: T;
 }
 
+export function setContextValue(context: unknown, value: unknown): void {
+  const fiber = currentFiber!;
+  if (typeof context === "object" && context !== null) {
+    const maybeId = (context as { _id?: unknown })._id;
+    if (typeof maybeId === "number") {
+      if (!fiber._contexts) fiber._contexts = new Map();
+      fiber._contexts.set(maybeId, value);
+      return;
+    }
+
+    if (!fiber._objectContexts) fiber._objectContexts = new Map();
+    fiber._objectContexts.set(context, value);
+  }
+}
+
 export function createContext<T>(defaultValue: T): Context<T> {
   const id = contextId++;
 
   const Provider = (props: Props) => {
     // Store the context value on the fiber during render
-    const fiber = currentFiber!;
-    if (!fiber._contexts) fiber._contexts = new Map();
-    fiber._contexts.set(id, props.value);
+    setContextValue({ _id: id }, props.value);
 
     const children = props.children ?? [];
     if (Array.isArray(children)) {
@@ -32,6 +45,21 @@ export function createContext<T>(defaultValue: T): Context<T> {
 
 export function useContext<T>(context: Context<T>): T {
   const fiber = currentFiber!;
+  if (typeof context === "object" && context !== null && !("_id" in context)) {
+    let f = fiber.parent;
+    while (f) {
+      if (f._objectContexts?.has(context as unknown as object)) {
+        return f._objectContexts.get(context as unknown as object) as T;
+      }
+      f = f.parent;
+    }
+
+    if ("_currentValue" in (context as unknown as Record<string, unknown>)) {
+      return (context as unknown as { _currentValue: T })._currentValue;
+    }
+    return undefined as T;
+  }
+
   // Walk up the fiber tree to find the nearest Provider
   let f = fiber.parent;
   while (f) {

package/src/refract/reconcile.ts

@@ -20,7 +20,7 @@ function createFiber(
   if (oldFiber && oldFiber.type === child.type) {
     return {
       type: oldFiber.type,
-      props: child.props,
+      props: child.props ?? {},
       key: child.key,
       dom: oldFiber.dom,
       parentDom: parentFiber.dom ?? parentFiber.parentDom,
@@ -34,7 +34,7 @@ function createFiber(
   }
   return {
     type: child.type,
-    props: child.props,
+    props: child.props ?? {},
     key: child.key,
     dom: null,
     parentDom: parentFiber.dom ?? parentFiber.parentDom,

package/src/refract/types.ts

@@ -46,6 +46,7 @@ export interface Fiber {
   hooks: Hook[] | null;
   _hookIndex?: number;
   _contexts?: Map<number, unknown>;
+  _objectContexts?: Map<object, unknown>;
   _errorHandler?: (error: unknown) => void;
   alternate: Fiber | null;
   flags: number;

package/tests/mui-pie-smoke.test.ts

@@ -0,0 +1,54 @@
+import { createRequire } from "node:module";
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it } from "vitest";
+import { PieChart } from "@mui/x-charts/PieChart";
+import { registerExternalReactModule } from "../src/refract/compat/react.js";
+
+const require = createRequire(import.meta.url);
+const externalReact = require("react") as typeof React;
+registerExternalReactModule(externalReact);
+
+describe("@mui/x-charts PieChart compatibility smoke", () => {
+  it("mounts a PieChart tree with legend and surface", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+
+    root.render(
+      React.createElement(PieChart, {
+        width: 240,
+        height: 180,
+        skipAnimation: true,
+        series: [
+          {
+            data: [
+              { id: 0, value: 40, label: "A" },
+              { id: 1, value: 60, label: "B" },
+            ],
+            innerRadius: 40,
+            outerRadius: 70,
+            paddingAngle: 2,
+            cornerRadius: 4,
+          },
+        ],
+      }),
+    );
+
+    await new Promise<void>((resolve) => setTimeout(resolve, 25));
+
+    const svg = container.querySelector("svg");
+    expect(svg).not.toBeNull();
+
+    const legendItems = container.querySelectorAll(".MuiChartsLegend-item");
+    expect(legendItems.length).toBe(2);
+
+    const surface = container.querySelector(".MuiChartsSurface-root");
+    expect(surface).not.toBeNull();
+    expect(container.querySelector("svg g")).not.toBeNull();
+    expect(container.querySelector("undefined")).toBeNull();
+
+    root.unmount();
+    container.remove();
+  });
+});

package/tests/render.test.ts

@@ -79,4 +79,45 @@ describe("render", () => {
     const link = container.querySelector("a")!;
     expect(link.getAttribute("href")).toBe("https://example.com");
   });
+
+  it("normalizes camelCase SVG attributes used by chart paths", () => {
+    const vnode = createElement(
+      "svg",
+      { viewBox: "0 0 100 100" },
+      createElement("g", { clipPath: "url(#sector-mask)" },
+        createElement("path", {
+          d: "M 10 10 L 20 20",
+          strokeWidth: 6,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          fillOpacity: 0.4,
+        }),
+      ),
+    );
+    render(vnode, container);
+
+    const svg = container.querySelector("svg")!;
+    const group = container.querySelector("g")!;
+    const path = container.querySelector("path")!;
+
+    expect(svg.getAttribute("viewBox")).toBe("0 0 100 100");
+    expect(group.getAttribute("clip-path")).toBe("url(#sector-mask)");
+    expect(path.getAttribute("stroke-width")).toBe("6");
+    expect(path.getAttribute("stroke-linecap")).toBe("round");
+    expect(path.getAttribute("stroke-linejoin")).toBe("round");
+    expect(path.getAttribute("fill-opacity")).toBe("0.4");
+  });
+
+  it("maps xlinkHref on SVG use elements", () => {
+    const vnode = createElement(
+      "svg",
+      null,
+      createElement("defs", null, createElement("path", { id: "slice", d: "M 0 0 L 5 5" })),
+      createElement("use", { xlinkHref: "#slice" }),
+    );
+    render(vnode, container);
+
+    const use = container.querySelector("use")!;
+    expect(use.getAttribute("xlink:href")).toBe("#slice");
+  });
 });