@ipxjs/refract 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipxjs/refract",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "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");
+  });
 });