@constela/runtime 0.10.2 → 0.10.3

package/dist/index.d.ts

@@ -105,6 +105,7 @@ interface RenderContext {
     imports?: Record<string, unknown>;
     cleanups?: (() => void)[];
     refs?: Record<string, Element>;
+    inSvg?: boolean;
 }
 declare function render(node: CompiledNode, ctx: RenderContext): Node;
 

package/dist/index.js

@@ -2421,12 +2421,12 @@ function createDOMPurify() {
   let URI_SAFE_ATTRIBUTES = null;
   const DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, ["alt", "class", "for", "id", "label", "name", "pattern", "placeholder", "role", "summary", "title", "value", "style", "xmlns"]);
   const MATHML_NAMESPACE = "http://www.w3.org/1998/Math/MathML";
-  const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+  const SVG_NAMESPACE2 = "http://www.w3.org/2000/svg";
   const HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
   let NAMESPACE = HTML_NAMESPACE;
   let IS_EMPTY_INPUT = false;
   let ALLOWED_NAMESPACES = null;
-  const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE, HTML_NAMESPACE], stringToString);
+  const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE2, HTML_NAMESPACE], stringToString);
   let MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ["mi", "mo", "mn", "ms", "mtext"]);
   let HTML_INTEGRATION_POINTS = addToSet({}, ["annotation-xml"]);
   const COMMON_SVG_AND_HTML_ELEMENTS = addToSet({}, ["title", "style", "font", "a", "script"]);
@@ -2600,7 +2600,7 @@ function createDOMPurify() {
     if (!ALLOWED_NAMESPACES[element2.namespaceURI]) {
       return false;
     }
-    if (element2.namespaceURI === SVG_NAMESPACE) {
+    if (element2.namespaceURI === SVG_NAMESPACE2) {
       if (parent.namespaceURI === HTML_NAMESPACE) {
         return tagName === "svg";
       }
@@ -2613,13 +2613,13 @@ function createDOMPurify() {
       if (parent.namespaceURI === HTML_NAMESPACE) {
         return tagName === "math";
       }
-      if (parent.namespaceURI === SVG_NAMESPACE) {
+      if (parent.namespaceURI === SVG_NAMESPACE2) {
         return tagName === "math" && HTML_INTEGRATION_POINTS[parentTagName];
       }
       return Boolean(ALL_MATHML_TAGS[tagName]);
     }
     if (element2.namespaceURI === HTML_NAMESPACE) {
-      if (parent.namespaceURI === SVG_NAMESPACE && !HTML_INTEGRATION_POINTS[parentTagName]) {
+      if (parent.namespaceURI === SVG_NAMESPACE2 && !HTML_INTEGRATION_POINTS[parentTagName]) {
         return false;
       }
       if (parent.namespaceURI === MATHML_NAMESPACE && !MATHML_TEXT_INTEGRATION_POINTS[parentTagName]) {
@@ -12831,6 +12831,40 @@ async function highlightCode(code, language) {
 }
 
 // src/renderer/index.ts
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+var SVG_TAGS = /* @__PURE__ */ new Set([
+  "svg",
+  "path",
+  "line",
+  "circle",
+  "rect",
+  "ellipse",
+  "polyline",
+  "polygon",
+  "g",
+  "defs",
+  "use",
+  "text",
+  "tspan",
+  "clipPath",
+  "mask",
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "pattern",
+  "symbol",
+  "marker",
+  "image",
+  "filter",
+  "foreignObject",
+  "animate",
+  "animateTransform",
+  "desc",
+  "title"
+]);
+function isSvgTag(tag) {
+  return SVG_TAGS.has(tag);
+}
 function isEventHandler(value) {
   return typeof value === "object" && value !== null && "event" in value && "action" in value;
 }
@@ -12853,7 +12887,10 @@ function render(node, ctx) {
   }
 }
 function renderElement(node, ctx) {
-  const el = document.createElement(node.tag);
+  const tag = node.tag;
+  const inSvgContext = ctx.inSvg || tag === "svg";
+  const useSvgNamespace = inSvgContext && isSvgTag(tag);
+  const el = useSvgNamespace ? document.createElementNS(SVG_NAMESPACE, tag) : document.createElement(tag);
   if (node.ref && ctx.refs) {
     if (typeof process !== "undefined" && process.env?.["NODE_ENV"] !== "production" && ctx.refs[node.ref]) {
       console.warn(`Duplicate ref name "${node.ref}" detected. The later element will overwrite the earlier one.`);
@@ -12896,21 +12933,31 @@ function renderElement(node, ctx) {
       } else {
         const cleanup = createEffect(() => {
           const value = evaluate(propValue, { state: ctx.state, locals: ctx.locals, ...ctx.imports && { imports: ctx.imports } });
-          applyProp(el, propName, value);
+          applyProp(el, propName, value, useSvgNamespace);
         });
         ctx.cleanups?.push(cleanup);
       }
     }
   }
   if (node.children) {
+    const childInSvg = tag === "foreignObject" ? false : inSvgContext;
+    const childCtx = childInSvg !== ctx.inSvg ? { ...ctx, inSvg: childInSvg } : ctx;
     for (const child of node.children) {
-      const childNode = render(child, ctx);
+      const childNode = render(child, childCtx);
       el.appendChild(childNode);
     }
   }
   return el;
 }
-function applyProp(el, propName, value) {
+function applyProp(el, propName, value, isSvg = false) {
+  if (isSvg && propName === "className") {
+    if (value) {
+      el.setAttribute("class", String(value));
+    } else {
+      el.removeAttribute("class");
+    }
+    return;
+  }
   if (propName === "className") {
     el.className = String(value ?? "");
   } else if (propName === "style" && typeof value === "string") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/runtime",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "Runtime DOM renderer for Constela UI framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,8 +18,8 @@
     "dompurify": "^3.3.1",
     "marked": "^17.0.1",
     "shiki": "^3.20.0",
-    "@constela/core": "0.7.0",
-    "@constela/compiler": "0.7.1"
+    "@constela/compiler": "0.7.1",
+    "@constela/core": "0.7.0"
   },
   "devDependencies": {
     "@types/dompurify": "^3.2.0",