@ipxjs/refract 0.13.0 → 0.15.0

package/README.md

@@ -30,7 +30,7 @@ This project is an experiment and uses code generated with both Claude Opus 4.6
 - **memo** -- skip re-renders when props are unchanged
 - **Refs** -- createRef and callback refs via the `ref` prop
 - **Error boundaries** -- catch and recover from render errors
-- **SVG support** -- automatic SVG namespace handling
+- **SVG support** -- automatic SVG namespace handling (including `foreignObject` HTML fallback) with Preact-like SVG prop normalization (`xlinkHref`/`xlink:href` -> `href`, camelCase attrs preserved)
 - **dangerouslySetInnerHTML** -- raw HTML injection with sanitizer defaults in `refract/full` and configurable `setHtmlSanitizer` override
 - **Automatic batching** -- state updates are batched via microtask queue
 - **DevTools hook support** -- emits commit/unmount snapshots to a global hook or explicit hook instance
@@ -127,8 +127,8 @@ export default defineConfig({
 The compat layer is intentionally separate from core so users who do not need
 React ecosystem compatibility keep the smallest and fastest Refract bundles.
 
-Compatibility status (last verified February 22, 2026):
-- `yarn test`: 14 files passed, 91 tests passed
+Compatibility status (last verified February 23, 2026):
+- `yarn test`: 15 files passed, 100 tests passed
 - Compat-focused suites passed: `tests/compat.test.ts` (10), `tests/poc-compat.test.ts` (2), `tests/react-router-smoke.test.ts` (3)
 - Verified behaviors include `forwardRef`, portals, `createRoot`, JSX runtimes, `useSyncExternalStore`, `flushSync`, react-router tree construction/dispatcher bridging, `React.use` (Promise + context), and Suspense boundary fallback rendering
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipxjs/refract",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "A minimal React-like virtual DOM library with an optional React compat layer",
   "type": "module",
   "main": "src/refract/index.ts",

package/src/refract/dom.ts

@@ -1,15 +1,6 @@
 import type { Fiber } from "./types.js";
 
 const SVG_NS = "http://www.w3.org/2000/svg";
-const XLINK_NS = "http://www.w3.org/1999/xlink";
-const XML_NS = "http://www.w3.org/XML/1998/namespace";
-const XMLNS_NS = "http://www.w3.org/2000/xmlns/";
-const SVG_TAGS = new Set([
-  "svg", "circle", "ellipse", "line", "path", "polygon", "polyline",
-  "rect", "g", "defs", "use", "text", "tspan", "image", "clipPath",
-  "mask", "pattern", "marker", "linearGradient", "radialGradient", "stop",
-  "foreignObject", "symbol", "desc", "title",
-]);
 
 export type HtmlSanitizer = (html: string) => string;
 export type UnsafeUrlPropChecker = (key: string, value: unknown) => boolean;
@@ -73,7 +64,7 @@ export function createDom(fiber: Fiber): Node {
     return document.createTextNode(fiber.props.nodeValue as string);
   }
   const tag = fiber.type as string;
-  const isSvg = SVG_TAGS.has(tag) || isSvgContext(fiber);
+  const isSvg = tag === "svg" || isSvgContext(fiber);
   const el = isSvg
     ? document.createElementNS(SVG_NS, tag)
     : document.createElement(tag);
@@ -85,8 +76,8 @@ export function createDom(fiber: Fiber): Node {
 function isSvgContext(fiber: Fiber): boolean {
   let f = fiber.parent;
   while (f) {
+    if (f.type === "foreignObject") return false;
     if (f.type === "svg") return true;
-    if (typeof f.type === "string" && f.type !== "svg" && f.dom) return false;
     f = f.parent;
   }
   return false;
@@ -221,103 +212,6 @@ function normalizeAttributeName(key: string, isSvgElement: boolean): NormalizedA
     return { name: key, localName: key, namespaceURI: null };
   }
 
-  if (key.startsWith("xlink") && key.length > 5) {
-    const local = key.slice(5);
-    const localName = local.charAt(0).toLowerCase() + local.slice(1);
-    return { name: `xlink:${localName.toLowerCase()}`, localName: localName.toLowerCase(), namespaceURI: XLINK_NS };
-  }
-
-  if (key === "xmlnsXlink") {
-    return { name: "xmlns:xlink", localName: "xlink", namespaceURI: XMLNS_NS };
-  }
-
-  if (key.startsWith("xml") && key.length > 3) {
-    const local = key.slice(3);
-    const localName = local.charAt(0).toLowerCase() + local.slice(1);
-    return { name: `xml:${localName}`, localName, namespaceURI: XML_NS };
-  }
-
-  if (SVG_ATTR_CASE_PRESERVED.has(key) || key.startsWith("aria-") || key.startsWith("data-")) {
-    return { name: key, localName: key, namespaceURI: null };
-  }
-
-  if (SVG_ATTR_KEBAB_CASE.has(key)) {
-    const name = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-    return { name, localName: name, namespaceURI: null };
-  }
-
-  return { name: key, localName: key, namespaceURI: null };
+  const name = key.replace(/xlink(H|:h)/, "h").replace(/sName$/, "s");
+  return { name, localName: name, namespaceURI: null };
 }
-
-const SVG_ATTR_CASE_PRESERVED = new Set([
-  "viewBox",
-  "preserveAspectRatio",
-  "gradientUnits",
-  "gradientTransform",
-  "patternUnits",
-  "patternContentUnits",
-  "patternTransform",
-  "maskUnits",
-  "maskContentUnits",
-  "filterUnits",
-  "primitiveUnits",
-  "pointsAtX",
-  "pointsAtY",
-  "pointsAtZ",
-  "markerUnits",
-  "markerWidth",
-  "markerHeight",
-  "refX",
-  "refY",
-  "stdDeviation",
-]);
-
-const SVG_ATTR_KEBAB_CASE = new Set([
-  "clipPath",
-  "clipRule",
-  "fillOpacity",
-  "fillRule",
-  "floodColor",
-  "floodOpacity",
-  "strokeDasharray",
-  "strokeDashoffset",
-  "strokeLinecap",
-  "strokeLinejoin",
-  "strokeMiterlimit",
-  "strokeOpacity",
-  "strokeWidth",
-  "stopColor",
-  "stopOpacity",
-  "fontFamily",
-  "fontSize",
-  "fontSizeAdjust",
-  "fontStretch",
-  "fontStyle",
-  "fontVariant",
-  "fontWeight",
-  "glyphOrientationHorizontal",
-  "glyphOrientationVertical",
-  "letterSpacing",
-  "wordSpacing",
-  "textAnchor",
-  "textDecoration",
-  "textRendering",
-  "dominantBaseline",
-  "alignmentBaseline",
-  "baselineShift",
-  "colorInterpolation",
-  "colorInterpolationFilters",
-  "colorProfile",
-  "colorRendering",
-  "imageRendering",
-  "shapeRendering",
-  "pointerEvents",
-  "lightingColor",
-  "unicodeBidi",
-  "renderingIntent",
-  "vectorEffect",
-  "writingMode",
-  "markerStart",
-  "markerMid",
-  "markerEnd",
-]);

package/src/refract/features/hooks.ts

@@ -37,6 +37,16 @@ export function useState<T>(initial: T | (() => T)): [T, (value: T | ((prev: T)
   if (!hook._setter) {
     hook._setter = (value: T | ((prev: T) => T)) => {
       if (!hook._fiber) return;
+      // Bail out for same-value direct updates with no pending queue (matches React behavior).
+      // This prevents infinite loops when setState(sameValue) is called in effects —
+      // e.g. MUI FormControl/InputBase calling setAdornedStart(false) repeatedly.
+      if (
+        typeof value !== "function" &&
+        Object.is(value, hook.state) &&
+        (!hook.queue || (hook.queue as unknown[]).length === 0)
+      ) {
+        return;
+      }
       const action = typeof value === "function"
         ? value as (prev: T) => T
         : () => value;

package/tests/render.test.ts

@@ -91,10 +91,10 @@ describe("render", () => {
     );
 
     const use = container.querySelector("use")!;
-    expect(use.getAttribute("xlink:href")).toBeNull();
+    expect(use.getAttribute("href")).toBeNull();
   });
 
-  it("normalizes camelCase SVG attributes used by chart paths", () => {
+  it("keeps camelCase SVG attributes as-is like Preact", () => {
     const vnode = createElement(
       "svg",
       { viewBox: "0 0 100 100" },
@@ -115,11 +115,11 @@ describe("render", () => {
     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");
+    expect(group.getAttribute("clipPath")).toBe("url(#sector-mask)");
+    expect(path.getAttribute("strokeWidth")).toBe("6");
+    expect(path.getAttribute("strokeLinecap")).toBe("round");
+    expect(path.getAttribute("strokeLinejoin")).toBe("round");
+    expect(path.getAttribute("fillOpacity")).toBe("0.4");
   });
 
   it("maps xlinkHref on SVG use elements", () => {
@@ -132,10 +132,28 @@ describe("render", () => {
     render(vnode, container);
 
     const use = container.querySelector("use")!;
-    expect(use.getAttribute("xlink:href")).toBe("#slice");
+    expect(use.getAttribute("href")).toBe("#slice");
   });
 
-  it("preserves camelCase SVG attributes that are not hyphenated in SVG", () => {
+  it("maps xlink:href prop alias on SVG use elements", () => {
+    const vnode = createElement(
+      "svg",
+      null,
+      createElement("use", { "xlink:href": "#slice" }),
+    );
+    render(vnode, container);
+
+    const use = container.querySelector("use")!;
+    expect(use.getAttribute("href")).toBe("#slice");
+  });
+
+  it("maps className to class on SVG elements", () => {
+    render(createElement("svg", { className: "icon-wrap" }), container);
+    const svg = container.querySelector("svg")!;
+    expect(svg.getAttribute("class")).toBe("icon-wrap");
+  });
+
+  it("preserves camelCase SVG attributes that are already camelCase in SVG", () => {
     const vnode = createElement(
       "svg",
       null,
@@ -152,4 +170,66 @@ describe("render", () => {
     expect(gradient.getAttribute("gradient-units")).toBeNull();
     expect(gradient.getAttribute("gradient-transform")).toBeNull();
   });
+
+  it("keeps nested unknown SVG tags in SVG namespace", () => {
+    const vnode = createElement(
+      "svg",
+      null,
+      createElement("g", null, createElement("feSpotLight", { pointsAtX: 30 })),
+    );
+    render(vnode, container);
+
+    const node = container.querySelector("feSpotLight")!;
+    expect(node.namespaceURI).toBe("http://www.w3.org/2000/svg");
+  });
+
+  it("switches back to HTML namespace under foreignObject", () => {
+    const vnode = createElement(
+      "svg",
+      null,
+      createElement(
+        "foreignObject",
+        null,
+        createElement("div", { className: "inside-fo" }, "hello"),
+      ),
+    );
+    render(vnode, container);
+
+    const div = container.querySelector("div")!;
+    expect(div.namespaceURI).toBe("http://www.w3.org/1999/xhtml");
+    expect(div.getAttribute("class")).toBe("inside-fo");
+  });
+
+  it("re-enters SVG namespace for nested svg inside foreignObject", () => {
+    const vnode = createElement(
+      "svg",
+      null,
+      createElement(
+        "foreignObject",
+        null,
+        createElement("div", null, createElement("svg", null, createElement("path", { d: "M0 0" }))),
+      ),
+    );
+    render(vnode, container);
+
+    const nestedSvg = container.querySelector("foreignObject svg")!;
+    const path = container.querySelector("foreignObject svg path")!;
+    expect(nestedSvg.namespaceURI).toBe("http://www.w3.org/2000/svg");
+    expect(path.namespaceURI).toBe("http://www.w3.org/2000/svg");
+  });
+
+  it("removes stale SVG attributes on rerender", () => {
+    render(
+      createElement("svg", null, createElement("path", { strokeWidth: 4, fillOpacity: 0.5 })),
+      container,
+    );
+    render(
+      createElement("svg", null, createElement("path", { fillOpacity: 1 })),
+      container,
+    );
+
+    const path = container.querySelector("path")!;
+    expect(path.getAttribute("strokeWidth")).toBeNull();
+    expect(path.getAttribute("fillOpacity")).toBe("1");
+  });
 });