what-react 0.11.0 → 0.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-react",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "React compatibility layer for What Framework — real React semantics (value hooks, re-renders, context) on a dedicated compat runtime",
   "type": "module",
   "sideEffects": false,
@@ -27,7 +27,7 @@
     "compatibility"
   ],
   "peerDependencies": {
-    "what-core": "^0.11.0"
+    "what-core": "^0.11.2"
   },
   "author": "ZVN DEV (https://zvndev.com)",
   "license": "MIT",

package/src/runtime.js

@@ -467,6 +467,38 @@ function mountRNode(v, kind, container, svg, owner) {
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
+// A portal target may live inside an <svg> (recharts 3.x z-index layers are
+// SVG <g> portal targets). Children portaled into an SVG container must be
+// created in the SVG namespace, not HTML.
+function targetSvg(target) {
+  return !!target && target.namespaceURI === SVG_NS && target.tagName !== 'foreignObject';
+}
+
+// camelCase React SVG prop → correct kebab/colon SVG attribute name.
+// Covers the presentation/text/clip attributes charting libs (recharts) emit.
+const SVG_ATTR_MAP = {
+  strokeWidth: 'stroke-width', strokeDasharray: 'stroke-dasharray',
+  strokeDashoffset: 'stroke-dashoffset', strokeLinecap: 'stroke-linecap',
+  strokeLinejoin: 'stroke-linejoin', strokeMiterlimit: 'stroke-miterlimit',
+  strokeOpacity: 'stroke-opacity', fillOpacity: 'fill-opacity',
+  fillRule: 'fill-rule', clipPath: 'clip-path', clipRule: 'clip-rule',
+  stopColor: 'stop-color', stopOpacity: 'stop-opacity',
+  textAnchor: 'text-anchor', dominantBaseline: 'dominant-baseline',
+  alignmentBaseline: 'alignment-baseline', baselineShift: 'baseline-shift',
+  colorInterpolation: 'color-interpolation',
+  colorInterpolationFilters: 'color-interpolation-filters',
+  floodColor: 'flood-color', floodOpacity: 'flood-opacity',
+  letterSpacing: 'letter-spacing', wordSpacing: 'word-spacing',
+  pointerEvents: 'pointer-events', shapeRendering: 'shape-rendering',
+  vectorEffect: 'vector-effect', paintOrder: 'paint-order',
+  markerStart: 'marker-start', markerMid: 'marker-mid', markerEnd: 'marker-end',
+  // Font + rendering attrs recharts emits on <text>/axis/tick/legend elements.
+  fontSize: 'font-size', fontFamily: 'font-family', fontWeight: 'font-weight',
+  fontStyle: 'font-style', fontVariant: 'font-variant', fontStretch: 'font-stretch',
+  textRendering: 'text-rendering', imageRendering: 'image-rendering',
+  writingMode: 'writing-mode', lightingColor: 'lighting-color',
+};
+
 function mountElement(v, container, svg, owner) {
   const tag = v.tag;
   const childSvg = (svg || tag === 'svg') && tag !== 'foreignObject';
@@ -551,7 +583,7 @@ function mountPortal(v, container, owner) {
     console.warn('[what-react] createPortal: target container not found');
     return rn;
   }
-  rn.children = patchChildren(target, [], normalizeChildren(v.children), null, false, owner);
+  rn.children = patchChildren(target, [], normalizeChildren(v.children), null, targetSvg(target), owner);
   return rn;
 }
 
@@ -705,13 +737,13 @@ function patchPortal(rn, v, owner) {
   const target = v.props && v.props.container;
   if (target === rn.container) {
     if (target) {
-      rn.children = patchChildren(target, rn.children, normalizeChildren(v.children), null, false, owner);
+      rn.children = patchChildren(target, rn.children, normalizeChildren(v.children), null, targetSvg(target), owner);
     }
   } else {
     for (const child of rn.children) unmountRNode(child, true);
     rn.container = target || null;
     rn.children = target
-      ? patchChildren(target, [], normalizeChildren(v.children), null, false, owner)
+      ? patchChildren(target, [], normalizeChildren(v.children), null, targetSvg(target), owner)
       : [];
   }
   rn.vnode = v;
@@ -1130,8 +1162,16 @@ export function setProperty(el, name, value, oldValue, svg) {
       el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', value);
       return;
     }
-    if (value == null || value === false) el.removeAttribute(name);
-    else el.setAttribute(name, value === true ? '' : value);
+    // React accepts camelCase SVG presentation props (strokeWidth, fontSize, …)
+    // and the spec expects kebab-case attribute names. Unlike HTML elements,
+    // SVG-namespaced elements preserve the exact case passed to setAttribute —
+    // so "strokeWidth" stays "strokeWidth", not "strokewidth". That camelCase
+    // name is not a valid SVG presentation attribute, so the renderer silently
+    // ignores it. Map the known ones to their correct kebab-case equivalents.
+    const mapped = SVG_ATTR_MAP[name];
+    const attr = mapped || name;
+    if (value == null || value === false) el.removeAttribute(attr);
+    else el.setAttribute(attr, value === true ? '' : value);
     return;
   }