@ipxjs/refract 0.12.0 → 0.14.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.12.0",
+  "version": "0.14.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/compat/react.ts

@@ -91,11 +91,13 @@ function childrenToArray(children: unknown): unknown[] {
   if (children === undefined || children === null) return [];
   if (!Array.isArray(children)) return [children];
   const out: unknown[] = [];
-  const stack = [...children];
+  const stack: unknown[] = [children];
   while (stack.length > 0) {
-    const child = stack.shift();
+    const child = stack.pop();
     if (Array.isArray(child)) {
-      stack.unshift(...child);
+      for (let i = child.length - 1; i >= 0; i--) {
+        stack.push(child[i]);
+      }
       continue;
     }
     if (child === undefined || child === null || typeof child === "boolean") {

package/src/refract/compat/sharedInternals.ts

@@ -107,6 +107,7 @@ const secretInternals: ReactSecretInternalsCompat = {
 const externalClientInternals = new Set<ReactClientInternalsCompat>();
 const externalSecretInternals = new Set<ReactSecretInternalsCompat>();
 const dispatcherStack: (RefractHookDispatcher | null)[] = [];
+const MAX_EXTERNAL_INTERNALS = 8;
 
 let runtimeInitialized = false;
 
@@ -135,7 +136,7 @@ export function registerExternalReactModule(moduleValue: unknown): void {
 
   const candidateClient = moduleRecord.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
   if (candidateClient && typeof candidateClient === "object" && "H" in (candidateClient as Record<string, unknown>)) {
-    externalClientInternals.add(candidateClient as ReactClientInternalsCompat);
+    addBoundedInternal(externalClientInternals, candidateClient as ReactClientInternalsCompat);
   }
 
   const candidateSecret = moduleRecord.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
@@ -147,12 +148,23 @@ export function registerExternalReactModule(moduleValue: unknown): void {
     && typeof dispatcherHolder.ReactCurrentDispatcher === "object"
     && "current" in (dispatcherHolder.ReactCurrentDispatcher as Record<string, unknown>)
   ) {
-    externalSecretInternals.add(candidateSecret as ReactSecretInternalsCompat);
+    addBoundedInternal(externalSecretInternals, candidateSecret as ReactSecretInternalsCompat);
   }
 
   syncDispatcherToExternal();
 }
 
+function addBoundedInternal<T>(set: Set<T>, value: T): void {
+  if (set.has(value)) return;
+  if (set.size >= MAX_EXTERNAL_INTERNALS) {
+    const oldest = set.values().next().value as T | undefined;
+    if (oldest !== undefined) {
+      set.delete(oldest);
+    }
+  }
+  set.add(value);
+}
+
 function beforeComponentRender(): void {
   dispatcherStack.push(clientInternals.H);
   setDispatcher(dispatcher);

package/src/refract/coreRenderer.ts

@@ -54,8 +54,12 @@ export function renderFiber(vnode: VNode, container: Node): void {
   };
   deletions = [];
   isRendering = true;
-  performWork(rootFiber);
-  isRendering = false;
+  try {
+    performWork(rootFiber);
+  } finally {
+    isRendering = false;
+    currentFiber = null;
+  }
   const committedDeletions = deletions.slice();
   commitRoot(rootFiber);
   clearAlternates(rootFiber);
@@ -90,6 +94,7 @@ function processWorkUnit(fiber: Fiber): boolean {
       if (!tryHandleRenderError(fiber, error)) throw error;
     } finally {
       runAfterComponentRenderHandlers(fiber);
+      currentFiber = null;
     }
   } else if (isFragment) {
     reconcileChildren(fiber, normalizeChildrenProp(fiber.props.children));
@@ -254,33 +259,57 @@ function getNextDomSibling(fiber: Fiber): Node | null {
 /** Collect all DOM nodes from a component/fragment fiber's subtree */
 function collectChildDomNodes(fiber: Fiber): Node[] {
   const nodes: Node[] = [];
-  function walk(f: Fiber | null): void {
-    while (f) {
-      if (isPortalFiber(f)) {
-        f = f.sibling;
-        continue;
-      }
-      if (f.dom) {
-        nodes.push(f.dom);
-      } else {
-        walk(f.child);
-      }
-      f = f.sibling;
+  const stack: Fiber[] = [];
+  const rootChildren: Fiber[] = [];
+  let child = fiber.child;
+  while (child) {
+    rootChildren.push(child);
+    child = child.sibling;
+  }
+  for (let i = rootChildren.length - 1; i >= 0; i--) {
+    stack.push(rootChildren[i]);
+  }
+
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    if (isPortalFiber(current)) {
+      continue;
+    }
+    if (current.dom) {
+      nodes.push(current.dom);
+      continue;
+    }
+    const children: Fiber[] = [];
+    let next = current.child;
+    while (next) {
+      children.push(next);
+      next = next.sibling;
+    }
+    for (let i = children.length - 1; i >= 0; i--) {
+      stack.push(children[i]);
     }
   }
-  walk(fiber.child);
   return nodes;
 }
 
 /** Get the first committed DOM node in a fiber subtree */
 function getFirstCommittedDom(fiber: Fiber): Node | null {
-  if (isPortalFiber(fiber)) return null;
-  if (fiber.dom && !(fiber.flags & PLACEMENT)) return fiber.dom;
-  let child = fiber.child;
-  while (child) {
-    const dom = getFirstCommittedDom(child);
-    if (dom) return dom;
-    child = child.sibling;
+  const stack: Fiber[] = [fiber];
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    if (isPortalFiber(current)) continue;
+    if (current.dom && !(current.flags & PLACEMENT)) {
+      return current.dom;
+    }
+    const children: Fiber[] = [];
+    let child = current.child;
+    while (child) {
+      children.push(child);
+      child = child.sibling;
+    }
+    for (let i = children.length - 1; i >= 0; i--) {
+      stack.push(children[i]);
+    }
   }
   return null;
 }
@@ -296,69 +325,74 @@ function commitRoot(rootFiber: Fiber): void {
 }
 
 function commitWork(fiber: Fiber): void {
-  if (isPortalFiber(fiber)) {
-    fiber.flags = 0;
-    if (fiber.child) commitWork(fiber.child);
-    if (fiber.sibling) commitWork(fiber.sibling);
-    return;
-  }
+  const stack: Fiber[] = [fiber];
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    if (isPortalFiber(current)) {
+      current.flags = 0;
+      if (current.sibling) stack.push(current.sibling);
+      if (current.child) stack.push(current.child);
+      continue;
+    }
 
-  let parentFiber = fiber.parent;
-  while (parentFiber && !parentFiber.dom) {
-    parentFiber = parentFiber.parent;
-  }
-  const parentDom = parentFiber!.dom!;
-
-  if (fiber.flags & PLACEMENT) {
-    if (fiber.dom) {
-      const before = getNextDomSibling(fiber);
-      if (before) {
-        parentDom.insertBefore(fiber.dom, before);
-      } else {
-        parentDom.appendChild(fiber.dom);
-      }
-    } else {
-      // Component/fragment: move all child DOM nodes
-      const domNodes = collectChildDomNodes(fiber);
-      const before = getNextDomSibling(fiber);
-      for (const dom of domNodes) {
-        if (before) {
-          parentDom.insertBefore(dom, before);
+    let parentFiber = current.parent;
+    while (parentFiber && !parentFiber.dom) {
+      parentFiber = parentFiber.parent;
+    }
+    const parentDom = parentFiber?.dom;
+
+    if (parentDom) {
+      if (current.flags & PLACEMENT) {
+        if (current.dom) {
+          const before = getNextDomSibling(current);
+          if (before) {
+            parentDom.insertBefore(current.dom, before);
+          } else {
+            parentDom.appendChild(current.dom);
+          }
         } else {
-          parentDom.appendChild(dom);
+          // Component/fragment: move all child DOM nodes
+          const domNodes = collectChildDomNodes(current);
+          const before = getNextDomSibling(current);
+          for (const dom of domNodes) {
+            if (before) {
+              parentDom.insertBefore(dom, before);
+            } else {
+              parentDom.appendChild(dom);
+            }
+          }
+        }
+      } else if (current.flags & UPDATE && current.dom) {
+        if (current.type === "TEXT") {
+          const oldValue = current.alternate?.props.nodeValue;
+          if (oldValue !== current.props.nodeValue) {
+            current.dom.textContent = current.props.nodeValue as string;
+          }
+        } else {
+          applyProps(
+            current.dom as HTMLElement,
+            current.alternate?.props ?? {},
+            current.props,
+          );
         }
       }
     }
-  } else if (fiber.flags & UPDATE && fiber.dom) {
-    if (fiber.type === "TEXT") {
-      const oldValue = fiber.alternate?.props.nodeValue;
-      if (oldValue !== fiber.props.nodeValue) {
-        fiber.dom.textContent = fiber.props.nodeValue as string;
-      }
-    } else {
-      applyProps(
-        fiber.dom as HTMLElement,
-        fiber.alternate?.props ?? {},
-        fiber.props,
-      );
-    }
-  }
 
-  // Handle ref prop — only on mount or when ref changes (like React)
-  if (fiber.dom && fiber.props.ref) {
-    const oldRef = fiber.alternate?.props.ref;
-    if (fiber.flags & PLACEMENT || fiber.props.ref !== oldRef) {
-      if (oldRef && oldRef !== fiber.props.ref) {
-        setRef(oldRef, null);
+    // Handle ref prop — only on mount or when ref changes (like React)
+    if (current.dom && current.props.ref) {
+      const oldRef = current.alternate?.props.ref;
+      if (current.flags & PLACEMENT || current.props.ref !== oldRef) {
+        if (oldRef && oldRef !== current.props.ref) {
+          setRef(oldRef, null);
+        }
+        setRef(current.props.ref, current.dom);
       }
-      setRef(fiber.props.ref, fiber.dom);
     }
-  }
-
-  fiber.flags = 0;
 
-  if (fiber.child) commitWork(fiber.child);
-  if (fiber.sibling) commitWork(fiber.sibling);
+    current.flags = 0;
+    if (current.sibling) stack.push(current.sibling);
+    if (current.child) stack.push(current.child);
+  }
 }
 
 function setRef(ref: unknown, value: Node | null): void {
@@ -373,41 +407,51 @@ function setRef(ref: unknown, value: Node | null): void {
  *  Alternates are only needed during reconciliation; retaining them
  *  creates an ever-growing chain of old fiber trees. */
 function clearAlternates(fiber: Fiber | null): void {
-  while (fiber) {
-    fiber.alternate = null;
-    if (fiber.child) clearAlternates(fiber.child);
-    fiber = fiber.sibling;
+  if (!fiber) return;
+  const stack: Fiber[] = [fiber];
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    current.alternate = null;
+    if (current.sibling) stack.push(current.sibling);
+    if (current.child) stack.push(current.child);
   }
 }
 
 function commitDeletion(fiber: Fiber): void {
   runCleanups(fiber);
-  // Clear ref on unmount
-  if (fiber.dom && fiber.props.ref) {
-    setRef(fiber.props.ref, null);
-  }
-  if (isPortalFiber(fiber)) {
-    let child: Fiber | null = fiber.child;
-    while (child) {
-      commitDeletion(child);
-      child = child.sibling;
+  walkSubtree(fiber, (node) => {
+    if (node.dom && node.props.ref) {
+      setRef(node.props.ref, null);
     }
-  } else if (fiber.dom) {
-    fiber.dom.parentNode?.removeChild(fiber.dom);
-  } else if (fiber.child) {
-    // Fragment/component — delete children
-    let child: Fiber | null = fiber.child;
-    while (child) {
-      commitDeletion(child);
-      child = child.sibling;
+  });
+  walkSubtree(fiber, (node) => {
+    if (!isPortalFiber(node) && node.dom) {
+      node.dom.parentNode?.removeChild(node.dom);
     }
-  }
+  });
 }
 
 function runCleanups(fiber: Fiber): void {
-  runFiberCleanupHandlers(fiber);
-  if (fiber.child) runCleanups(fiber.child);
-  if (fiber.sibling) runCleanups(fiber.sibling);
+  walkSubtree(fiber, (node) => {
+    runFiberCleanupHandlers(node);
+  });
+}
+
+function walkSubtree(root: Fiber, visit: (fiber: Fiber) => void): void {
+  const stack: Fiber[] = [root];
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    visit(current);
+    const children: Fiber[] = [];
+    let child = current.child;
+    while (child) {
+      children.push(child);
+      child = child.sibling;
+    }
+    for (let i = children.length - 1; i >= 0; i--) {
+      stack.push(children[i]);
+    }
+  }
 }
 
 const pendingContainers = new Set<Node>();
@@ -473,8 +517,12 @@ function flushRenders(): void {
       };
       deletions = [];
       isRendering = true;
-      performWork(newRoot);
-      isRendering = false;
+      try {
+        performWork(newRoot);
+      } finally {
+        isRendering = false;
+        currentFiber = null;
+      }
       const committedDeletions = deletions.slice();
       commitRoot(newRoot);
       clearAlternates(newRoot);

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

@@ -36,9 +36,11 @@ export function useState<T>(initial: T | (() => T)): [T, (value: T | ((prev: T)
   // Create a stable setter that is reused across renders (like React)
   if (!hook._setter) {
     hook._setter = (value: T | ((prev: T) => T)) => {
+      if (!hook._fiber) return;
       const action = typeof value === "function"
         ? value as (prev: T) => T
         : () => value;
+      if (!hook.queue) hook.queue = [];
       (hook.queue as ((prev: T) => T)[]).push(action);
       scheduleRender(hook._fiber!);
     };
@@ -191,6 +193,8 @@ export function useReducer<S, A, I>(
   // Create stable dispatch (like React)
   if (!hook._dispatch) {
     hook._dispatch = (action: A) => {
+      if (!hook._fiber) return;
+      if (!hook.queue) hook.queue = [];
       (hook.queue as A[]).push(action);
       scheduleRender(hook._fiber!);
     };

package/src/refract/hooksRuntime.ts

@@ -33,6 +33,8 @@ function cleanupFiberEffects(fiber: Fiber): void {
   if (!fiber.hooks) return;
 
   for (const hook of fiber.hooks) {
+    hook.queue = undefined;
+    hook._fiber = undefined;
     const state = hook.state;
     if (!state || typeof state !== "object") continue;
     const effectState = state as { cleanup?: () => void; pending?: boolean };

package/tests/hooks.test.ts

@@ -71,6 +71,25 @@ describe("hooks", () => {
       expect(renderCount).toBe(2);
       expect(container.querySelector("span")!.textContent).toBe("3");
     });
+
+    it("ignores setState after unmount", async () => {
+      let setCount!: (v: number | ((p: number) => number)) => void;
+      let renders = 0;
+      function Counter() {
+        const [count, sc] = useState(0);
+        setCount = sc;
+        renders++;
+        return createElement("span", null, String(count));
+      }
+
+      render(createElement(Counter, null), container);
+      render(createElement("div", null, "gone"), container);
+
+      expect(() => setCount(1)).not.toThrow();
+      await new Promise((r) => setTimeout(r, 10));
+      expect(container.textContent).toBe("gone");
+      expect(renders).toBe(1);
+    });
   });
 
   describe("useEffect", () => {
@@ -269,5 +288,69 @@ describe("hooks", () => {
       await new Promise((r) => setTimeout(r, 10));
       expect(container.querySelector("span")!.textContent).toBe("2");
     });
+
+    it("ignores dispatch after unmount", async () => {
+      type Action = { type: "inc" };
+      let dispatch!: (action: Action) => void;
+      let renders = 0;
+      function Counter() {
+        const [count, d] = useReducer((state: number, action: Action) => {
+          if (action.type === "inc") return state + 1;
+          return state;
+        }, 0);
+        dispatch = d;
+        renders++;
+        return createElement("span", null, String(count));
+      }
+
+      render(createElement(Counter, null), container);
+      render(createElement("div", null, "gone"), container);
+
+      expect(() => dispatch({ type: "inc" })).not.toThrow();
+      await new Promise((r) => setTimeout(r, 10));
+      expect(container.textContent).toBe("gone");
+      expect(renders).toBe(1);
+    });
+  });
+
+  describe("cleanup scoping", () => {
+    it("only cleans up deleted subtree effects", async () => {
+      const leftCleanup = vi.fn();
+      const rightCleanup = vi.fn();
+      let setShowLeft!: (v: boolean) => void;
+
+      function Left() {
+        useEffect(() => leftCleanup, []);
+        return createElement("span", null, "left");
+      }
+
+      function Right() {
+        useEffect(() => rightCleanup, []);
+        return createElement("span", null, "right");
+      }
+
+      function App() {
+        const [showLeft, ss] = useState(true);
+        setShowLeft = ss;
+        return createElement(
+          "div",
+          null,
+          showLeft ? createElement(Left, { key: "left" }) : null,
+          createElement(Right, { key: "right" }),
+        );
+      }
+
+      render(createElement(App, null), container);
+      flushPassiveEffects();
+      expect(leftCleanup).toHaveBeenCalledTimes(0);
+      expect(rightCleanup).toHaveBeenCalledTimes(0);
+
+      setShowLeft(false);
+      await new Promise((r) => setTimeout(r, 10));
+      flushPassiveEffects();
+
+      expect(leftCleanup).toHaveBeenCalledTimes(1);
+      expect(rightCleanup).toHaveBeenCalledTimes(0);
+    });
   });
 });

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");
+  });
 });