@stacksjs/stx 0.2.94 → 0.2.96

package/dist/component-processing.js

@@ -1,2 +1,613 @@
-// @bun
-import{es as c,fs as d,gs as e,hs as f,is as g,js as h,ks as i,ls as j,ms as k}from"./chunk-w01y57f5.js";import"./chunk-x1hjv24z.js";import"./chunk-0g4gece6.js";import"./chunk-nap11ntr.js";import"./chunk-03c26pjz.js";import"./chunk-13yz561y.js";import"./chunk-nanw7yhz.js";import"./chunk-ghrx0hn1.js";import"./chunk-82t27pvd.js";import"./chunk-fhawx87n.js";import"./chunk-gc84b1d2.js";import"./chunk-yr1gdceh.js";import"./chunk-baa7h4yz.js";import"./chunk-kdxa9epn.js";import"./chunk-g2hekckm.js";import"./chunk-x39sfpvm.js";import"./chunk-tr0z0e1g.js";import"./chunk-4j188175.js";import"./chunk-eds0f8f1.js";import"./chunk-dyjnn5k8.js";import"./chunk-8fgwhhb8.js";import"./chunk-tj6zfxeb.js";import"./chunk-7xcfy2fn.js";import"./chunk-9yz5d003.js";import"./chunk-fms20x0n.js";import"./chunk-fe7r1mq1.js";import{pv as a,qv as b}from"./chunk-rb1e4cnb.js";import"./chunk-j4s5qwd7.js";import"./chunk-b0cyc09a.js";import"./chunk-0tatqxj2.js";import"./chunk-bykjk6vj.js";import"./chunk-7b0xdy5h.js";import"./chunk-ywkrxp2h.js";import"./chunk-y25pr13j.js";import"./chunk-q6h6yvzb.js";import"./chunk-qdc3aav1.js";import"./chunk-6wn85hn6.js";import"./chunk-qd5461tt.js";import"./chunk-77tga15w.js";import"./chunk-rv002yn0.js";import"./chunk-hke99a0v.js";import"./chunk-mwbng54r.js";import"./chunk-wxvyj65q.js";import"./chunk-yw2fzq86.js";import"./chunk-mrehzhxv.js";import"./chunk-1zgsgk4b.js";import"./chunk-48cw2nde.js";import"./chunk-jjvp4t5w.js";import"./chunk-94g3cahw.js";import"./chunk-ht4j68cs.js";import"./chunk-fch9tk1k.js";import"./chunk-cz25azze.js";import"./chunk-q60knhjf.js";import"./chunk-hrampcrj.js";import"./chunk-t37dp99j.js";import"./chunk-5kt3ay7x.js";import"./chunk-95w08s8v.js";import"./chunk-ceg2c2q2.js";import"./chunk-04mvcmcr.js";import"./chunk-n46a5g1g.js";import"./chunk-vv9wfz1c.js";import"./chunk-dzw95th7.js";import"./chunk-46mkpbkk.js";import"./chunk-3rh7va1z.js";import"./chunk-2xen423s.js";import"./chunk-cp3kwv17.js";import"./chunk-hpqr9e3x.js";import"./chunk-adqh2m9z.js";import"./chunk-8qbax8xn.js";import"./chunk-x64kb787.js";import"./chunk-gcf5v18y.js";import"./chunk-pc31m5x5.js";import"./chunk-3jm3snz8.js";export{a as stashScriptElements,b as restoreStashedScripts,i as processImportDirectives,k as processCustomElements,j as processComponentDirectives,h as processBuiltInComponents,c as pascalToKebab,f as parseMultilineAttributes,g as parseAttributes,d as findComponentTags,e as decodeStxProp};
+import path from "node:path";
+import { createSafeFunction, isExpressionSafe, safeEvaluateObject } from "./safe-evaluator.js";
+import { renderComponentWithSlot } from "./utils.js";
+export function pascalToKebab(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").toLowerCase();
+}
+import { restoreStashedScripts, stashScriptElements } from "./html-masking.js";
+
+export { restoreStashedScripts, stashScriptElements };
+export function findComponentTags(html, tagPattern, skipTags) {
+  const matches = [];
+  let pos = 0;
+  while (pos < html.length) {
+    const tagStart = html.indexOf("<", pos);
+    if (tagStart === -1)
+      break;
+    const tagNameMatch = html.slice(tagStart + 1).match(new RegExp(`^(${tagPattern.source})`));
+    if (!tagNameMatch) {
+      pos = tagStart + 1;
+      continue;
+    }
+    const tagName = tagNameMatch[1];
+    if (skipTags && skipTags.has(tagName.toLowerCase())) {
+      let currentPos = tagStart + 1 + tagName.length;
+      while (currentPos < html.length && html[currentPos] !== ">")
+        currentPos++;
+      pos = currentPos + 1;
+      continue;
+    }
+    let currentPos = tagStart + 1 + tagName.length, inQuote = null, attributesStart = currentPos, tagEnd = -1, isSelfClosing = !1;
+    while (currentPos < html.length) {
+      const char = html[currentPos];
+      if (inQuote) {
+        if (char === "\\" && currentPos + 1 < html.length) {
+          currentPos += 2;
+          continue;
+        }
+        if (char === inQuote)
+          inQuote = null;
+        currentPos++;
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        inQuote = char;
+        currentPos++;
+        continue;
+      }
+      if (char === "/" && currentPos + 1 < html.length && html[currentPos + 1] === ">") {
+        tagEnd = currentPos + 2;
+        isSelfClosing = !0;
+        break;
+      }
+      if (char === ">") {
+        tagEnd = currentPos + 1;
+        break;
+      }
+      currentPos++;
+    }
+    if (tagEnd === -1) {
+      pos = tagStart + 1;
+      continue;
+    }
+    const attributes = html.slice(attributesStart, isSelfClosing ? tagEnd - 2 : tagEnd - 1).trim();
+    if (isSelfClosing) {
+      matches.push({
+        fullMatch: html.slice(tagStart, tagEnd),
+        tagName,
+        attributes,
+        content: "",
+        startIndex: tagStart,
+        endIndex: tagEnd,
+        isSelfClosing: !0
+      });
+      pos = tagEnd;
+    } else {
+      const openingTag = `<${tagName}`, closingTag = `</${tagName}>`;
+      let depth = 1, searchPos = tagEnd, contentEnd = -1;
+      while (depth > 0 && searchPos < html.length) {
+        const nextOpen = html.indexOf(openingTag, searchPos), nextClose = html.indexOf(closingTag, searchPos);
+        if (nextClose === -1)
+          break;
+        if (nextOpen !== -1 && nextOpen < nextClose) {
+          const charAfter = html[nextOpen + openingTag.length];
+          if (charAfter === " " || charAfter === ">" || charAfter === "/" || charAfter === `
+` || charAfter === "\t")
+            depth++;
+          searchPos = nextOpen + openingTag.length;
+        } else {
+          depth--;
+          if (depth === 0) {
+            contentEnd = nextClose;
+            break;
+          }
+          searchPos = nextClose + closingTag.length;
+        }
+      }
+      if (contentEnd === -1) {
+        pos = tagEnd;
+        continue;
+      }
+      const content = html.slice(tagEnd, contentEnd), fullEndIndex = contentEnd + closingTag.length;
+      matches.push({
+        fullMatch: html.slice(tagStart, fullEndIndex),
+        tagName,
+        attributes,
+        content,
+        startIndex: tagStart,
+        endIndex: fullEndIndex,
+        isSelfClosing: !1
+      });
+      pos = fullEndIndex;
+    }
+  }
+  return matches;
+}
+export function decodeStxProp(attrValue, options) {
+  try {
+    const json = Buffer.from(attrValue, "base64").toString("utf8");
+    return JSON.parse(json);
+  } catch {}
+  try {
+    const unescaped = attrValue.replace(/&quot;/g, '"').replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+    return JSON.parse(unescaped);
+  } catch (error) {
+    if (options?.debug)
+      console.error("Error decoding __stx_ prop:", error);
+    return attrValue;
+  }
+}
+export function parseMultilineAttributes(attributesStr) {
+  const props = {};
+  let pos = 0;
+  const len = attributesStr.length;
+  while (pos < len) {
+    while (pos < len && /\s/.test(attributesStr[pos]))
+      pos++;
+    if (pos >= len)
+      break;
+    let name = "";
+    while (pos < len && !/[\s=]/.test(attributesStr[pos])) {
+      name += attributesStr[pos];
+      pos++;
+    }
+    if (!name)
+      break;
+    if (name.startsWith("@") || name.startsWith(":")) {
+      while (pos < len && attributesStr[pos] !== '"' && attributesStr[pos] !== "'")
+        pos++;
+      if (pos < len) {
+        const quote = attributesStr[pos];
+        pos++;
+        while (pos < len && attributesStr[pos] !== quote) {
+          if (attributesStr[pos] === "\\")
+            pos++;
+          pos++;
+        }
+        pos++;
+      }
+      continue;
+    }
+    while (pos < len && /\s/.test(attributesStr[pos]))
+      pos++;
+    if (pos < len && attributesStr[pos] === "=") {
+      pos++;
+      while (pos < len && /\s/.test(attributesStr[pos]))
+        pos++;
+      let value = "";
+      if (pos < len && (attributesStr[pos] === '"' || attributesStr[pos] === "'")) {
+        const quote = attributesStr[pos];
+        pos++;
+        while (pos < len) {
+          const char = attributesStr[pos];
+          if (char === "\\" && pos + 1 < len) {
+            pos++;
+            value += attributesStr[pos];
+            pos++;
+            continue;
+          }
+          if (char === quote) {
+            pos++;
+            break;
+          }
+          value += char;
+          pos++;
+        }
+      } else
+        while (pos < len && !/\s/.test(attributesStr[pos])) {
+          value += attributesStr[pos];
+          pos++;
+        }
+      props[name] = value;
+    } else
+      props[name] = "true";
+  }
+  return props;
+}
+export function parseAttributes(attributesStr) {
+  const attributes = [];
+  let pos = 0;
+  const len = attributesStr.length;
+  while (pos < len) {
+    while (pos < len && /\s/.test(attributesStr[pos]))
+      pos++;
+    if (pos >= len)
+      break;
+    let name = "";
+    while (pos < len && !/[\s=]/.test(attributesStr[pos])) {
+      name += attributesStr[pos];
+      pos++;
+    }
+    if (!name)
+      break;
+    while (pos < len && /\s/.test(attributesStr[pos]))
+      pos++;
+    if (pos < len && attributesStr[pos] === "=") {
+      pos++;
+      while (pos < len && /\s/.test(attributesStr[pos]))
+        pos++;
+      let value = "";
+      if (pos < len && (attributesStr[pos] === '"' || attributesStr[pos] === "'")) {
+        const quote = attributesStr[pos];
+        pos++;
+        while (pos < len && attributesStr[pos] !== quote) {
+          if (attributesStr[pos] === "\\" && pos + 1 < len) {
+            pos++;
+            value += attributesStr[pos];
+          } else
+            value += attributesStr[pos];
+          pos++;
+        }
+        if (pos < len)
+          pos++;
+      } else
+        while (pos < len && !/\s/.test(attributesStr[pos])) {
+          value += attributesStr[pos];
+          pos++;
+        }
+      attributes.push({ name, value });
+    } else
+      attributes.push({ name, value: !0 });
+  }
+  return attributes;
+}
+export async function processBuiltInComponents(template, _context, _filePath, _options) {
+  let output = template;
+  output = output.replace(/<stx-loading-indicator([^>]*?)(?:\s*\/>|><\/stx-loading-indicator>)/gi, (_match, attrs) => {
+    const colorMatch = attrs.match(/color=["']([^"']+)["']/i), initialColorMatch = attrs.match(/initial-color=["']([^"']+)["']/i), heightMatch = attrs.match(/height=["']([^"']+)["']/i), durationMatch = attrs.match(/duration=["']([^"']+)["']/i), throttleMatch = attrs.match(/throttle=["']([^"']+)["']/i), zIndexMatch = attrs.match(/z-index=["']([^"']+)["']/i), sanitizeCss = (v) => v.replace(/[;{}()]/g, "").replace(/url/gi, ""), options = {
+      color: sanitizeCss(colorMatch?.[1] || "#6366f1"),
+      initialColor: sanitizeCss(initialColorMatch?.[1] || ""),
+      height: sanitizeCss(heightMatch?.[1] || "3px"),
+      duration: durationMatch ? Number.parseInt(durationMatch[1]) : 2000,
+      throttle: throttleMatch ? Number.parseInt(throttleMatch[1]) : 200,
+      zIndex: zIndexMatch ? Number.parseInt(zIndexMatch[1]) : 999999
+    }, gradient = options.initialColor ? `linear-gradient(to right, ${options.initialColor}, ${options.color})` : options.color;
+    return `
+<div id="stx-loading-indicator" style="position:fixed;top:0;left:0;right:0;height:${options.height};background:${gradient};z-index:${options.zIndex};transform:scaleX(0);transform-origin:left;transition:transform 0.1s ease-out,opacity 0.3s ease;opacity:0;pointer-events:none">
+  <div style="position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.4) 50%,transparent 100%);animation:stx-shimmer 1.5s infinite"></div>
+</div>
+<style>@keyframes stx-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}</style>
+<script>
+(function(){var el=document.getElementById('stx-loading-indicator'),p=0,l=!1,i=null;function u(v){p=Math.min(Math.max(v,0),100);if(el){el.style.opacity=p>0?'1':'0';el.style.transform='scaleX('+(p/100)+')'}}window.stxLoading={start:function(){l=!0;p=0;u(10);if(i)clearInterval(i);i=setInterval(function(){if(!l)return;var r=90-p,inc=Math.max(0.5,r*0.1);if(p<90)u(p+inc)},${options.throttle})},finish:function(){l=!1;if(i){clearInterval(i);i=null}u(100);setTimeout(function(){if(el)el.style.opacity='0';setTimeout(function(){p=0;if(el)el.style.transform='scaleX(0)'},300)},200)},set:function(v){u(v)},clear:function(){l=!1;p=0;if(i){clearInterval(i);i=null}if(el){el.style.opacity='0';el.style.transform='scaleX(0)'}}};document.addEventListener('click',function(e){var a=e.target.closest&&e.target.closest('a');if(!a)return;var h=a.getAttribute('href');if(!h||h.startsWith('http')||h.startsWith('#')||h.startsWith('mailto:')||h.startsWith('tel:')||a.target==='_blank')return;window.stxLoading.start()});window.addEventListener('popstate',function(){window.stxLoading.start()});window.addEventListener('load',function(){window.stxLoading.finish()})})();
+</script>`;
+  });
+  return output;
+}
+export async function processImportDirectives(template, context, filePath, options, dependencies) {
+  let output = template;
+  if (!context.__importedComponents)
+    context.__importedComponents = new Map;
+  const importedComponents = context.__importedComponents, importRegex = /@import\s*\(\s*([^)]+)\s*\)/g;
+  let match;
+  while ((match = importRegex.exec(output)) !== null) {
+    const [fullMatch, pathsString] = match, paths = pathsString.split(",").map((p) => p.trim().replace(/^['"]|['"]$/g, "")).filter((p) => p.length > 0);
+    for (const componentPath of paths) {
+      const segments = componentPath.split("/"), baseName = segments[segments.length - 1].replace(/\.stx$/, ""), componentName = baseName.includes("-") ? baseName.split("-").map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join("") : baseName.charAt(0).toUpperCase() + baseName.slice(1);
+      let resolvedPath = null;
+      const possiblePaths = [
+        path.resolve(path.dirname(filePath), `${componentPath}.stx`),
+        path.resolve(path.dirname(filePath), componentPath),
+        path.resolve(options.componentsDir || "components", `${componentPath}.stx`),
+        path.resolve(options.componentsDir || "components", componentPath),
+        componentPath.endsWith(".stx") ? componentPath : `${componentPath}.stx`
+      ];
+      for (const tryPath of possiblePaths)
+        try {
+          if (await Bun.file(tryPath).exists()) {
+            resolvedPath = tryPath;
+            break;
+          }
+        } catch {}
+      if (resolvedPath) {
+        importedComponents.set(componentName, resolvedPath);
+        importedComponents.set(baseName, resolvedPath);
+        importedComponents.set(baseName.toLowerCase(), resolvedPath);
+        const kebabCase = componentName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+        importedComponents.set(kebabCase, resolvedPath);
+        dependencies.add(resolvedPath);
+        if (options.debug)
+          console.log(`Imported component: ${componentName} -> ${resolvedPath}`);
+      } else if (options.debug)
+        console.warn(`Could not resolve imported component: ${componentPath}`);
+    }
+    output = output.replace(fullMatch, "");
+    importRegex.lastIndex = 0;
+  }
+  return output;
+}
+export async function processComponentDirectives(template, context, filePath, componentsDir, options, dependencies) {
+  let output = template;
+  if (!context.__processedComponents)
+    context.__processedComponents = new Set;
+  const processedComponents = context.__processedComponents, componentPat = /@component\s*\(/g;
+  let match;
+  while ((match = componentPat.exec(output)) !== null) {
+    const cStart = match.index, openP = cStart + match[0].length - 1;
+    let d = 1, p = openP + 1;
+    while (p < output.length && d > 0) {
+      if (output[p] === "(")
+        d++;
+      else if (output[p] === ")") {
+        d--;
+        if (d === 0)
+          break;
+      }
+      p++;
+    }
+    if (d !== 0)
+      break;
+    const innerArgs = output.substring(openP + 1, p), directiveEnd = p + 1, pathMatch = innerArgs.match(/^\s*['"]([^'"]+)['"]/);
+    if (!pathMatch) {
+      componentPat.lastIndex = 0;
+      continue;
+    }
+    const componentPath = pathMatch[1];
+    let propsString;
+    const afterPath = innerArgs.slice(pathMatch[0].length), propsMatch = afterPath.match(/^\s*,\s*/);
+    if (propsMatch)
+      propsString = afterPath.slice(propsMatch[0].length).trim();
+    let props = {};
+    if (propsString)
+      try {
+        props = safeEvaluateObject(propsString, context);
+      } catch (error) {
+        const msg = error instanceof Error ? error.message : String(error);
+        output = output.replace(output.substring(cStart, directiveEnd), `[Error parsing component props: ${msg}]`);
+        continue;
+      }
+    let slotContent = "", fullMatchEnd = directiveEnd;
+    const endComponentMatch = output.substring(directiveEnd).match(/^([\s\S]*?)@endcomponent/);
+    if (endComponentMatch) {
+      slotContent = endComponentMatch[1].trim();
+      fullMatchEnd = directiveEnd + endComponentMatch[0].length;
+    }
+    const fullMatch = output.substring(cStart, fullMatchEnd), processedContent = await renderComponentWithSlot(componentPath, props, slotContent, componentsDir, context, filePath, options, processedComponents, dependencies);
+    output = output.substring(0, cStart) + processedContent + output.substring(fullMatchEnd);
+    componentPat.lastIndex = 0;
+  }
+  return output;
+}
+export async function processCustomElements(template, context, filePath, componentsDir, options, dependencies) {
+  let output = template;
+  if (!context.__processedComponents)
+    context.__processedComponents = new Set;
+  const processedComponents = context.__processedComponents, htmlTags = new Set([
+    "a",
+    "abbr",
+    "address",
+    "area",
+    "article",
+    "aside",
+    "audio",
+    "b",
+    "base",
+    "bdi",
+    "bdo",
+    "blockquote",
+    "body",
+    "br",
+    "button",
+    "canvas",
+    "caption",
+    "cite",
+    "code",
+    "col",
+    "colgroup",
+    "data",
+    "datalist",
+    "dd",
+    "del",
+    "details",
+    "dfn",
+    "dialog",
+    "div",
+    "dl",
+    "dt",
+    "em",
+    "embed",
+    "fieldset",
+    "figcaption",
+    "figure",
+    "footer",
+    "form",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "head",
+    "header",
+    "hgroup",
+    "hr",
+    "html",
+    "i",
+    "iframe",
+    "img",
+    "input",
+    "ins",
+    "kbd",
+    "label",
+    "legend",
+    "li",
+    "link",
+    "main",
+    "map",
+    "mark",
+    "menu",
+    "meta",
+    "meter",
+    "nav",
+    "noscript",
+    "object",
+    "ol",
+    "optgroup",
+    "option",
+    "output",
+    "p",
+    "param",
+    "picture",
+    "pre",
+    "progress",
+    "q",
+    "rp",
+    "rt",
+    "ruby",
+    "s",
+    "samp",
+    "script",
+    "section",
+    "select",
+    "slot",
+    "small",
+    "source",
+    "span",
+    "strong",
+    "style",
+    "sub",
+    "summary",
+    "sup",
+    "svg",
+    "table",
+    "tbody",
+    "td",
+    "template",
+    "textarea",
+    "tfoot",
+    "th",
+    "thead",
+    "time",
+    "title",
+    "tr",
+    "track",
+    "u",
+    "ul",
+    "var",
+    "video",
+    "wbr",
+    "path",
+    "circle",
+    "rect",
+    "line",
+    "polygon",
+    "polyline",
+    "ellipse",
+    "text",
+    "tspan",
+    "textPath",
+    "g",
+    "defs",
+    "use",
+    "symbol",
+    "image",
+    "clipPath",
+    "mask",
+    "pattern",
+    "marker",
+    "linearGradient",
+    "radialGradient",
+    "stop",
+    "filter",
+    "feBlend",
+    "feColorMatrix",
+    "feComponentTransfer",
+    "feComposite",
+    "feConvolveMatrix",
+    "feDiffuseLighting",
+    "feDisplacementMap",
+    "feDropShadow",
+    "feFlood",
+    "feGaussianBlur",
+    "feImage",
+    "feMerge",
+    "feMergeNode",
+    "feMorphology",
+    "feOffset",
+    "feSpecularLighting",
+    "feTile",
+    "feTurbulence",
+    "foreignObject",
+    "animate",
+    "animateMotion",
+    "animateTransform",
+    "set",
+    "mpath",
+    "desc",
+    "metadata",
+    "switch",
+    "view"
+  ]), stashed = stashScriptElements(output);
+  output = stashed.output;
+  output = await processComponentsWithParser(output, /[a-z][a-z0-9]*-[a-z0-9-]*/, !1);
+  output = await processComponentsWithParser(output, /[A-Z][a-zA-Z0-9]*/, !0);
+  output = await processComponentsWithParser(output, /[a-z][a-z0-9]*/, !1, htmlTags);
+  output = restoreStashedScripts(output, stashed.scripts);
+  return output;
+  async function processComponentsWithParser(html, tagPattern, isPascalCase, skipTags) {
+    let result = html;
+    const tags = findComponentTags(result, tagPattern, skipTags);
+    for (let i = tags.length - 1;i >= 0; i--) {
+      const tag = tags[i], componentPath = isPascalCase ? pascalToKebab(tag.tagName) : tag.tagName, rawProps = parseMultilineAttributes(tag.attributes), props = {};
+      for (const [attrName, attrValue] of Object.entries(rawProps)) {
+        if (attrName.startsWith("@"))
+          continue;
+        if (attrName.startsWith("__stx_")) {
+          const propName = attrName.slice(6);
+          props[propName] = decodeStxProp(attrValue, options);
+          continue;
+        }
+        if (attrName.startsWith(":")) {
+          const propName = attrName.slice(1), expression = attrValue === "true" ? propName : attrValue;
+          try {
+            if (!isExpressionSafe(expression)) {
+              if (options.debug)
+                console.error(`Unsafe expression in :${propName} binding: ${expression}`);
+              props[propName] = attrValue;
+            } else {
+              const valueFn = createSafeFunction(expression, Object.keys(context));
+              props[propName] = valueFn(...Object.values(context));
+            }
+          } catch (error) {
+            if (options.debug)
+              console.error(`Error evaluating :${propName} binding:`, error);
+            props[propName] = attrValue;
+          }
+          continue;
+        }
+        if (typeof attrValue === "string" && attrValue.includes("{{") && attrValue.includes("}}")) {
+          const singleExprMatch = attrValue.match(/^\{\{\s*([\s\S]+?)\s*\}\}$/);
+          if (singleExprMatch)
+            try {
+              const expression = singleExprMatch[1];
+              if (!isExpressionSafe(expression)) {
+                if (options.debug)
+                  console.error(`Unsafe expression in ${attrName}: ${expression}`);
+                props[attrName] = attrValue;
+              } else {
+                const valueFn = createSafeFunction(expression, Object.keys(context));
+                props[attrName] = valueFn(...Object.values(context));
+              }
+            } catch (error) {
+              if (options.debug)
+                console.error(`Error evaluating expression for ${attrName}:`, error);
+              props[attrName] = attrValue;
+            }
+          else {
+            let result = attrValue;
+            const exprPattern = /\{\{\s*([\s\S]+?)\s*\}\}/g;
+            let match;
+            while ((match = exprPattern.exec(attrValue)) !== null)
+              try {
+                const expression = match[1];
+                if (!isExpressionSafe(expression)) {
+                  if (options.debug)
+                    console.error(`Unsafe expression in ${attrName}: ${expression}`);
+                  continue;
+                }
+                const evaluated = createSafeFunction(expression, Object.keys(context))(...Object.values(context));
+                result = result.replace(match[0], String(evaluated ?? ""));
+              } catch (error) {
+                if (options.debug)
+                  console.error(`Error evaluating expression in ${attrName}:`, error);
+              }
+            props[attrName] = result;
+          }
+        } else
+          props[attrName] = attrValue;
+      }
+      const processedContent = await renderComponentWithSlot(componentPath, props, tag.content, componentsDir, context, filePath, options, processedComponents, dependencies);
+      result = result.substring(0, tag.startIndex) + processedContent + result.substring(tag.endIndex);
+    }
+    return result;
+  }
+}