@ipxjs/refract 0.10.1 → 0.11.0

package/README.md

@@ -158,9 +158,10 @@ subsequent renders to the same container.
 
 ### DevTools hook integration
 
-Refract emits commit and unmount events when a hook is present at
+Call `setDevtoolsHook(...)` to enable commit and unmount events. Refract uses
+the explicit hook you provide, or falls back to
 `window.__REFRACT_DEVTOOLS_GLOBAL_HOOK__` (or `globalThis` in non-browser
-environments). You can also set the hook directly with `setDevtoolsHook`.
+environments) when called with no argument.
 
 ```ts
 import { setDevtoolsHook } from "refract";
@@ -229,7 +230,7 @@ The values below are from a local run on February 17, 2026.
 | 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          |
+| Refract (`refract`)       | 14.45 kB        | 5.28 kB          |
 | React                     | 189.74 kB       | 59.52 kB         |
 | Preact                    | 14.46 kB        | 5.95 kB          |
 
@@ -239,7 +240,7 @@ 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 15.9x smaller than React,
-and the full `refract` entrypoint is about 9.6x smaller.
+and the full `refract` entrypoint is about 11.3x smaller.
 
 ### Component Combination Benchmarks (Vitest)
 
@@ -344,7 +345,7 @@ How Refract compares to React and Preact:
 | **Ecosystem**                  |         |       |        |
 | DevTools                       | Basic (hook API) | Yes   | Yes    |
 | React compatibility layer      | Partial⁶ | N/A  | Yes⁷   |
-| **Bundle Size (gzip, JS)**     | ~3.7-6.3 kB⁴ | ~59.5 kB | ~6.0 kB |
+| **Bundle Size (gzip, JS)**     | ~3.7-5.3 kB⁴ | ~59.5 kB | ~6.0 kB |
 
 ¹ Preact supports both `class` and `className`.
 ² Preact has partial Suspense support via `preact/compat`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipxjs/refract",
-  "version": "0.10.1",
+  "version": "0.11.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/devtools.ts

@@ -32,6 +32,7 @@ export interface RefractDevtoolsHook {
 let explicitHook: RefractDevtoolsHook | null | undefined = undefined;
 let activeHook: RefractDevtoolsHook | null = null;
 let activeRendererId = 1;
+let commitReporterRegistered = false;
 
 const containerIds = new WeakMap<Node, number>();
 let nextContainerId = 1;
@@ -40,6 +41,7 @@ const fiberIds = new WeakMap<Fiber, number>();
 let nextFiberId = 1;
 
 export function setDevtoolsHook(hook?: RefractDevtoolsHook | null): void {
+  ensureDevtoolsCommitReporting();
   explicitHook = hook;
   activeHook = null;
   activeRendererId = 1;
@@ -68,7 +70,11 @@ export function reportDevtoolsCommit(rootFiber: Fiber, deletions: Fiber[]): void
   }
 }
 
-registerCommitHandler(reportDevtoolsCommit);
+function ensureDevtoolsCommitReporting(): void {
+  if (commitReporterRegistered) return;
+  commitReporterRegistered = true;
+  registerCommitHandler(reportDevtoolsCommit);
+}
 
 function resolveHook(): RefractDevtoolsHook | null {
   if (explicitHook !== undefined) return explicitHook;

package/src/refract/dom.ts

@@ -1,6 +1,9 @@
 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",
@@ -103,7 +106,12 @@ export function applyProps(
       if (key.startsWith("on")) {
         el.removeEventListener(key.slice(2).toLowerCase(), getEventListener(oldProps[key]));
       } else {
-        el.removeAttribute(normalizeAttributeName(key, isSvgElement));
+        const attr = normalizeAttributeName(key, isSvgElement);
+        if (attr.namespaceURI) {
+          el.removeAttributeNS(attr.namespaceURI, attr.localName);
+        } else {
+          el.removeAttribute(attr.name);
+        }
       }
     }
   }
@@ -167,17 +175,34 @@ 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(attrName);
+          const attr = normalizeAttributeName(key, isSvgElement);
+          const securityKey = isSvgElement ? attr.name : key;
+          if (unsafeUrlPropChecker(securityKey, value)) {
+            if (attr.namespaceURI) {
+              el.removeAttributeNS(attr.namespaceURI, attr.localName);
+            } else {
+              el.removeAttribute(attr.name);
+            }
             continue;
           }
           if (value == null || value === false) {
-            el.removeAttribute(attrName);
+            if (attr.namespaceURI) {
+              el.removeAttributeNS(attr.namespaceURI, attr.localName);
+            } else {
+              el.removeAttribute(attr.name);
+            }
           } else if (value === true) {
-            el.setAttribute(attrName, "true");
+            if (attr.namespaceURI) {
+              el.setAttributeNS(attr.namespaceURI, attr.name, "true");
+            } else {
+              el.setAttribute(attr.name, "true");
+            }
           } else {
-            el.setAttribute(attrName, String(value));
+            if (attr.namespaceURI) {
+              el.setAttributeNS(attr.namespaceURI, attr.name, String(value));
+            } else {
+              el.setAttribute(attr.name, String(value));
+            }
           }
         }
         break;
@@ -185,19 +210,114 @@ export function applyProps(
   }
 }
 
-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()}`);
+type NormalizedAttribute = {
+  name: string;
+  localName: string;
+  namespaceURI: string | null;
+};
+
+function normalizeAttributeName(key: string, isSvgElement: boolean): NormalizedAttribute {
+  if (!isSvgElement) {
+    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 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/tests/render.test.ts

@@ -80,6 +80,20 @@ describe("render", () => {
     expect(link.getAttribute("href")).toBe("https://example.com");
   });
 
+  it("blocks javascript: URLs on SVG xlinkHref", () => {
+    render(
+      createElement(
+        "svg",
+        null,
+        createElement("use", { xlinkHref: "javascript:alert('xss')" }),
+      ),
+      container,
+    );
+
+    const use = container.querySelector("use")!;
+    expect(use.getAttribute("xlink:href")).toBeNull();
+  });
+
   it("normalizes camelCase SVG attributes used by chart paths", () => {
     const vnode = createElement(
       "svg",
@@ -120,4 +134,22 @@ describe("render", () => {
     const use = container.querySelector("use")!;
     expect(use.getAttribute("xlink:href")).toBe("#slice");
   });
+
+  it("preserves camelCase SVG attributes that are not hyphenated in SVG", () => {
+    const vnode = createElement(
+      "svg",
+      null,
+      createElement(
+        "linearGradient",
+        { id: "g", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(25)" },
+      ),
+    );
+    render(vnode, container);
+
+    const gradient = container.querySelector("linearGradient")!;
+    expect(gradient.getAttribute("gradientUnits")).toBe("userSpaceOnUse");
+    expect(gradient.getAttribute("gradientTransform")).toBe("rotate(25)");
+    expect(gradient.getAttribute("gradient-units")).toBeNull();
+    expect(gradient.getAttribute("gradient-transform")).toBeNull();
+  });
 });