@kithinji/orca 1.0.20 → 1.0.21

package/dist/browser/index.iife.js

@@ -2142,7 +2142,7 @@ var kithinjiorca = (() => {
   ], HttpClientModule);
 
   // src/shared/dom/osc.ts
-  var OSC = class {
+  var OSC = class _OSC {
     constructor(root) {
       this.root = root;
       this.pendingRefs = /* @__PURE__ */ new Map();
@@ -2150,6 +2150,69 @@ var kithinjiorca = (() => {
         old.replaceWith(nw);
       });
     }
+    static {
+      this.SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+    }
+    static {
+      this.SVG_TAGS = /* @__PURE__ */ new Set([
+        "svg",
+        "circle",
+        "rect",
+        "line",
+        "path",
+        "polygon",
+        "polyline",
+        "ellipse",
+        "text",
+        "tspan",
+        "g",
+        "defs",
+        "use",
+        "symbol",
+        "marker",
+        "clipPath",
+        "mask",
+        "pattern",
+        "linearGradient",
+        "radialGradient",
+        "stop",
+        "animate",
+        "animateTransform",
+        "foreignObject",
+        "image",
+        "textPath",
+        "feBlend",
+        "feColorMatrix",
+        "feComponentTransfer",
+        "feComposite",
+        "feConvolveMatrix",
+        "feDiffuseLighting",
+        "feDisplacementMap",
+        "feDistantLight",
+        "feFlood",
+        "feFuncA",
+        "feFuncB",
+        "feFuncG",
+        "feFuncR",
+        "feGaussianBlur",
+        "feImage",
+        "feMerge",
+        "feMergeNode",
+        "feMorphology",
+        "feOffset",
+        "fePointLight",
+        "feSpecularLighting",
+        "feSpotLight",
+        "feTile",
+        "feTurbulence",
+        "filter",
+        "metadata",
+        "title",
+        "desc",
+        "switch",
+        "view"
+      ]);
+    }
     handleInsert(jsx2) {
       const { domNode, vnode } = this.buildDOM(jsx2, this.tree);
       if (jsx2.id && vnode) {
@@ -2283,9 +2346,13 @@ var kithinjiorca = (() => {
       });
       return { domNode: fragment };
     }
+    isSVGTag(tag) {
+      return _OSC.SVG_TAGS.has(tag);
+    }
     buildIntrinsicElement(jsx2, parent) {
       const tag = jsx2.type;
-      const dom = document.createElement(tag);
+      const isSVG = this.isSVGTag(tag);
+      const dom = isSVG ? document.createElementNS(_OSC.SVG_NAMESPACE, tag) : document.createElement(tag);
       const vnode = new VNode(dom, (old, nw) => {
         if (old.parentNode) {
           old.parentNode.replaceChild(nw, old);
@@ -2296,7 +2363,7 @@ var kithinjiorca = (() => {
         vnode.setId(jsx2.id);
       }
       if (jsx2.props) {
-        this.buildAttributes(jsx2.props, dom, vnode);
+        this.buildAttributes(jsx2.props, dom, vnode, isSVG);
       }
       if (jsx2.props?.children != null) {
         const { domNode: childDom } = this.buildDOM(jsx2.props.children, vnode);
@@ -2304,7 +2371,7 @@ var kithinjiorca = (() => {
       }
       return { domNode: dom, vnode };
     }
-    buildAttributes(props, dom, vnode) {
+    buildAttributes(props, dom, vnode, isSVG = false) {
       for (const [key, value] of Object.entries(props)) {
         if (key === "children" || value == null) {
           continue;
@@ -2315,10 +2382,21 @@ var kithinjiorca = (() => {
           continue;
         }
         if (typeof value === "boolean") {
-          this.setBooleanAttribute(attrKey, value, dom);
+          this.setBooleanAttribute(attrKey, value, dom, isSVG);
           continue;
         }
-        dom.setAttribute(attrKey, String(value));
+        if (isSVG) {
+          this.setSVGAttribute(attrKey, String(value), dom);
+        } else {
+          dom.setAttribute(attrKey, String(value));
+        }
+      }
+    }
+    setSVGAttribute(key, value, dom) {
+      if (key === "href" || key === "xlink:href") {
+        dom.setAttributeNS("http://www.w3.org/1999/xlink", "href", value);
+      } else {
+        dom.setAttribute(key, value);
       }
     }
     normalizeAttributeKey(key) {
@@ -2333,7 +2411,7 @@ var kithinjiorca = (() => {
       }).join(";");
       dom.setAttribute("style", styleString);
     }
-    setBooleanAttribute(key, value, dom) {
+    setBooleanAttribute(key, value, dom, isSVG = false) {
       if (value) {
         dom.setAttribute(key, "");
       } else {