@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/component-renderer.js

@@ -0,0 +1,790 @@
+import { registry } from "./component-registry.js";
+import { processConditionals } from "./conditionals.js";
+import { registerBuiltins } from "./builtins/index.js";
+import { decodeAttributeEntities, decodeStxProp, findComponentTags, parseMultilineAttributes, pascalToKebab, readBracedValue, restoreStashedScripts, stashScriptElements, unwrapBracedExpression, uppercaseHtmlTagSkip } from "./component-processing.js";
+import { maskAtElementPosition, matchHtmlComment } from "./html-masking.js";
+import { renderComponentWithSlot, userComponentFileExists } from "./utils.js";
+import { createSafeFunction, isExpressionSafe, safeEvaluateObject, freeIdentifiers } from "./safe-evaluator.js";
+import { BOOLEAN_ATTRIBUTE_SENTINEL } from "./prop-sentinels.js";
+import { COMPONENT_PASSTHROUGH_X_ATTRS } from "./runtime-globals.js";
+import { reactiveLoopRanges } from "./server-bindings.js";
+import { stripCommentsAndLiterals } from "./strip-literals.js";
+import fs from "node:fs";
+import path from "node:path";
+let builtinsRegistered = !1;
+const htmlTags = new Set([
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "component",
+  "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"
+]);
+function parseComponentProps(rawProps, context, options, deferDynamicToClient = !1) {
+  const resolved = {
+    static: {},
+    staticNames: {},
+    serverDynamic: {},
+    serverDynamicNames: {},
+    clientReactive: {},
+    events: {}
+  }, clientSignalNames = new Set(Array.isArray(context.__stx_client_signal_names) ? context.__stx_client_signal_names : []), referencesClientSignal = (expression) => {
+    if (clientSignalNames.size === 0)
+      return !1;
+    const code = stripCommentsAndLiterals(expression), leadingIdentifier = code.match(/^\s*[!+~(-]*\s*([a-zA-Z_$][\w$]*)/)?.[1];
+    if (leadingIdentifier && clientSignalNames.has(leadingIdentifier))
+      return !0;
+    for (const signalName of clientSignalNames) {
+      const escapedName = signalName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      if (new RegExp(`(?:^|[^\\w$.])${escapedName}\\s*\\(`).test(code))
+        return !0;
+    }
+    return !1;
+  }, ALPINE_PASSTHROUGH = new Set(COMPONENT_PASSTHROUGH_X_ATTRS), kebabToCamel = (key) => {
+    if (!key.includes("-") || key.startsWith("@") || key.startsWith(":") || key.startsWith("x-") || key.startsWith("__"))
+      return key;
+    if (key.startsWith("aria-") || key.startsWith("data-"))
+      return key;
+    return key.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+  }, setStatic = (attrName, value) => {
+    const propName = kebabToCamel(attrName);
+    resolved.static[propName] = value;
+    if (propName !== attrName)
+      resolved.staticNames[propName] = attrName;
+  };
+  for (const [rawAttrName, attrValue] of Object.entries(rawProps)) {
+    const attrName = rawAttrName.startsWith("x-") && !ALPINE_PASSTHROUGH.has(rawAttrName) && !rawAttrName.startsWith("x-bind:") && !rawAttrName.startsWith("x-on:") ? `:${rawAttrName.slice(2)}` : rawAttrName;
+    if (attrName.startsWith("@")) {
+      resolved.events[attrName] = attrValue;
+      continue;
+    }
+    if (attrName.startsWith("__stx_")) {
+      const propName = kebabToCamel(attrName.slice(6));
+      resolved.serverDynamic[propName] = decodeStxProp(attrValue, options);
+      continue;
+    }
+    if (attrName.startsWith(":")) {
+      const propName = kebabToCamel(attrName.slice(1)), expression = attrValue === BOOLEAN_ATTRIBUTE_SENTINEL ? propName : attrValue;
+      if (propName === "if" || propName === "for" || propName === "show") {
+        resolved.clientReactive[propName] = expression;
+        continue;
+      }
+      if (deferDynamicToClient) {
+        resolved.clientReactive[propName] = expression;
+        continue;
+      }
+      if (referencesClientSignal(expression)) {
+        resolved.clientReactive[propName] = expression;
+        continue;
+      }
+      try {
+        if (!isExpressionSafe(expression)) {
+          if (options.debug)
+            console.error(`Unsafe expression in :${propName} binding: ${expression}`);
+          resolved.clientReactive[propName] = expression;
+          continue;
+        }
+        const contextKeys = Object.keys(context), evaluated = createSafeFunction(expression, contextKeys)(...Object.values(context));
+        if (evaluated === void 0) {
+          const jsKeywords = new Set(["true", "false", "null", "undefined", "typeof", "instanceof", "in", "of", "new", "this", "return", "void", "delete", "throw", "if", "else"]);
+          if (freeIdentifiers(expression).some((v) => !jsKeywords.has(v) && !contextKeys.includes(v))) {
+            resolved.clientReactive[propName] = expression;
+            continue;
+          }
+        }
+        resolved.serverDynamic[propName] = evaluated;
+        if (propName !== attrName.slice(1) && resolved.serverDynamicNames)
+          resolved.serverDynamicNames[propName] = attrName.slice(1);
+      } catch {
+        resolved.clientReactive[propName] = expression;
+      }
+      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)) {
+            const evaluated = createSafeFunction(expression, Object.keys(context))(...Object.values(context));
+            setStatic(attrName, evaluated != null ? String(evaluated) : "");
+          } else {
+            if (options.debug)
+              console.error(`Unsafe expression in ${attrName}: ${expression}`);
+            setStatic(attrName, attrValue);
+          }
+        } catch (error) {
+          if (options.debug)
+            console.error(`Error evaluating expression for ${attrName}:`, error);
+          setStatic(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);
+          }
+        setStatic(attrName, result);
+      }
+      continue;
+    }
+    setStatic(attrName, attrValue === BOOLEAN_ATTRIBUTE_SENTINEL ? "true" : decodeAttributeEntities(attrValue));
+  }
+  return resolved;
+}
+const TAG_CONDITIONAL_PAIRS = [
+  [/@if\s*\(/, "@endif"],
+  [/@unless\s*\(/, "@endunless"]
+];
+function resolveTagConditionals(attributesStr, context, filePath) {
+  if (!attributesStr.includes("@"))
+    return attributesStr;
+  if (!TAG_CONDITIONAL_PAIRS.some(([open, close]) => open.test(attributesStr) && attributesStr.includes(close)))
+    return attributesStr;
+  try {
+    return processConditionals(attributesStr, context, filePath);
+  } catch {
+    return attributesStr;
+  }
+}
+function parseAllAttributes(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;
+    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 if (attributesStr[pos] === "{") {
+        value = readBracedValue(attributesStr, pos);
+        pos += value.length;
+        const expression = unwrapBracedExpression(value);
+        if (expression !== null) {
+          props[`:${name}`] = expression;
+          continue;
+        }
+      } else
+        while (pos < len && !/\s/.test(attributesStr[pos])) {
+          value += attributesStr[pos];
+          pos++;
+        }
+      props[name] = value;
+    } else
+      props[name] = BOOLEAN_ATTRIBUTE_SENTINEL;
+  }
+  return props;
+}
+function serialiseForwardedEvents(events) {
+  return Object.entries(events).map(([event, handler]) => handler === BOOLEAN_ATTRIBUTE_SENTINEL ? event : `${event}="${escapeAttribute(handler)}"`).join(" ");
+}
+function escapeAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function findUnresolvedBuiltinTags(template) {
+  const unresolved = new Set, tagRegex = /<([A-Z][A-Za-z0-9]*|stx-[a-z0-9-]+)\b[^>]*>/g;
+  let match;
+  while ((match = tagRegex.exec(template)) !== null) {
+    const name = match[1];
+    if (registry.isBuiltin(name))
+      unresolved.add(name);
+  }
+  return [...unresolved].sort();
+}
+const pkgStxIndexCache = new Map;
+function buildStxIndex(pkgDir) {
+  const cached = pkgStxIndexCache.get(pkgDir);
+  if (cached)
+    return cached;
+  const index = new Map, roots = [path.join(pkgDir, "src"), path.join(pkgDir, "dist"), pkgDir];
+  function walk(dir, depth) {
+    if (depth > 6)
+      return;
+    let entries;
+    try {
+      entries = fs.readdirSync(dir, { withFileTypes: !0 });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (entry.name === "node_modules" || entry.name.startsWith("."))
+          continue;
+        walk(full, depth + 1);
+      } else if (entry.isFile() && entry.name.endsWith(".stx")) {
+        const base = entry.name.slice(0, -4);
+        if (!index.has(base))
+          index.set(base, full);
+        const lower = base.toLowerCase();
+        if (!index.has(lower))
+          index.set(lower, full);
+        const kebab = base.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+        if (!index.has(kebab))
+          index.set(kebab, full);
+      }
+    }
+  }
+  for (const root of roots) {
+    walk(root, 0);
+    if (index.size > 0)
+      break;
+  }
+  pkgStxIndexCache.set(pkgDir, index);
+  return index;
+}
+function resolvePackageDir(spec, fromDir) {
+  if (spec.startsWith(".") || spec.startsWith("/"))
+    return null;
+  let dir = fromDir;
+  while (!0) {
+    const candidate = path.join(dir, "node_modules", spec);
+    try {
+      if (fs.statSync(candidate).isDirectory())
+        return candidate;
+    } catch {}
+    const parent = path.dirname(dir);
+    if (parent === dir)
+      return null;
+    dir = parent;
+  }
+}
+
+export { freeIdentifiers };
+export async function processESImports(template, context, filePath, options, dependencies) {
+  if (!/import\s/.test(template))
+    return template;
+  if (!context.__importedComponents)
+    context.__importedComponents = new Map;
+  const registered = context.__importedComponents, fromDir = path.dirname(filePath), replacements = [], scriptRe = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
+  for (const scriptMatch of template.matchAll(scriptRe)) {
+    const [full, attrs, body] = scriptMatch, importRe = /import\s+(?:(\{[^}]*\})|([A-Za-z_$][\w$]*))\s+from\s+['"]([^'"]+)['"]\s*;?\s*\n?/g;
+    let newBody = body, m;
+    const removals = [];
+    while ((m = importRe.exec(body)) !== null) {
+      const [matchStr, namedBlock, defaultName, spec] = m;
+      let pkgDir = null, singleFile = null;
+      if (spec.startsWith(".") || spec.startsWith("/")) {
+        const abs = path.resolve(fromDir, spec);
+        if (abs.endsWith(".stx"))
+          singleFile = abs;
+        else {
+          const withExt = `${abs}.stx`;
+          try {
+            if (fs.statSync(withExt).isFile())
+              singleFile = withExt;
+          } catch {
+            try {
+              if (fs.statSync(abs).isDirectory())
+                pkgDir = abs;
+            } catch {}
+          }
+        }
+      } else
+        pkgDir = resolvePackageDir(spec, fromDir);
+      if (!pkgDir && !singleFile)
+        continue;
+      let consumedAny = !1;
+      const register = (name, file) => {
+        registered.set(name, file);
+        registered.set(name.toLowerCase(), file);
+        const kebab = name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+        registered.set(kebab, file);
+        dependencies.add(file);
+      };
+      if (defaultName && singleFile) {
+        register(defaultName, singleFile);
+        consumedAny = !0;
+      } else if (namedBlock) {
+        const names = namedBlock.slice(1, -1).split(",").map((n) => n.trim()).filter(Boolean).map((n) => {
+          const asMatch = n.match(/^([A-Za-z_$][\w$]*)\s+as\s+([A-Za-z_$][\w$]*)$/);
+          if (asMatch)
+            return { source: asMatch[1], local: asMatch[2] };
+          return { source: n, local: n };
+        }), index = pkgDir ? buildStxIndex(pkgDir) : null;
+        for (const { source, local } of names) {
+          let file = null;
+          if (singleFile)
+            file = singleFile;
+          else if (index)
+            file = index.get(source) ?? index.get(source.toLowerCase()) ?? index.get(source.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()) ?? null;
+          if (file) {
+            register(local, file);
+            consumedAny = !0;
+          }
+        }
+      }
+      if (consumedAny)
+        removals.push({ start: m.index, end: m.index + matchStr.length });
+    }
+    if (removals.length === 0)
+      continue;
+    for (let i = removals.length - 1;i >= 0; i--)
+      newBody = newBody.slice(0, removals[i].start) + newBody.slice(removals[i].end);
+    replacements.push({
+      start: scriptMatch.index,
+      end: scriptMatch.index + full.length,
+      value: `<script${attrs}>${newBody}</script>`
+    });
+  }
+  if (replacements.length === 0)
+    return template;
+  const chunks = [];
+  let cursor = 0;
+  for (const replacement of replacements) {
+    chunks.push(template.slice(cursor, replacement.start), replacement.value);
+    cursor = replacement.end;
+  }
+  chunks.push(template.slice(cursor));
+  return chunks.join("");
+}
+async function processImports(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;
+}
+async function processComponentDirectives(template, context, filePath, options, dependencies) {
+  let output = template;
+  const componentsDir = options.componentsDir || "components";
+  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 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;
+}
+async function processCustomElementTags(template, context, filePath, options, dependencies) {
+  if (!template)
+    return template;
+  let output = template;
+  const componentsDir = options.componentsDir || "components";
+  if (!context.__processedComponents)
+    context.__processedComponents = new Set;
+  const processedComponents = context.__processedComponents, stashed = stashScriptElements(output);
+  output = stashed.output;
+  const clientLoopRanges = reactiveLoopRanges(output);
+  output = await processTagsWithParser(output, /[a-z][a-z0-9]*-[a-z0-9-]*/, !1);
+  output = await processTagsWithParser(output, /[A-Z][a-zA-Z0-9]*/, !0, uppercaseHtmlTagSkip(htmlTags));
+  output = await processTagsWithParser(output, /[a-z][a-z0-9]*/, !1, htmlTags);
+  output = stashed.restore(output);
+  return output;
+  async function processTagsWithParser(html, tagPattern, isPascalCase, skipTags) {
+    if (!html)
+      return html;
+    let result = html;
+    const tags = findComponentTags(result, tagPattern, skipTags), replacements = new Map;
+    for (let i = tags.length - 1;i >= 0; i--) {
+      const tag = tags[i], componentPath = isPascalCase ? pascalToKebab(tag.tagName) : tag.tagName, rawProps = parseAllAttributes(resolveTagConditionals(tag.attributes, context, filePath)), inClientLoop = clientLoopRanges.some(([start, end]) => tag.startIndex >= start && tag.startIndex < end), resolvedProps = parseComponentProps(rawProps, context, options, inClientLoop), builtinDef = registry.getBuiltin(tag.tagName), overriddenByUser = builtinDef ? await userComponentFileExists(componentPath, componentsDir, context, filePath, options) : !1;
+      if (builtinDef && !overriddenByUser) {
+        const renderCtx = {
+          context,
+          filePath,
+          options,
+          dependencies
+        };
+        let rendered = builtinDef.render(resolvedProps, tag.content, renderCtx);
+        if (Object.keys(resolvedProps.events).length > 0) {
+          const eventAttrs = serialiseForwardedEvents(resolvedProps.events);
+          rendered = rendered.replace(/^(\s*<[a-zA-Z][a-zA-Z0-9-]*)/, `$1 ${eventAttrs}`);
+        }
+        if (Object.keys(resolvedProps.clientReactive).length > 0)
+          rendered = emitClientReactiveAttrs(rendered, resolvedProps.clientReactive);
+        replacements.set(i, rendered);
+        continue;
+      }
+      if (!isPascalCase && tag.tagName.includes("-") && !await userComponentFileExists(componentPath, componentsDir, context, filePath, options))
+        continue;
+      const mergedProps = {};
+      for (const [key, value] of Object.entries(resolvedProps.static))
+        mergedProps[key] = value;
+      for (const [key, value] of Object.entries(resolvedProps.serverDynamic))
+        mergedProps[key] = value;
+      let finalContent = await renderComponentWithSlot(componentPath, mergedProps, stashed.restore(tag.content), componentsDir, context, filePath, options, processedComponents, dependencies);
+      if (Object.keys(resolvedProps.events).length > 0) {
+        const root = findRenderedComponentRoot(finalContent);
+        if (root) {
+          const eventAttrs = serialiseForwardedEvents(resolvedProps.events), parentEvents = Object.keys(resolvedProps.events).map((event) => event.replace(/^@/, "").split(".")[0]).join(" ");
+          finalContent = finalContent.substring(0, root.insertPos) + ` data-stx-parent-events="${parentEvents}" ${eventAttrs}` + finalContent.substring(root.insertPos);
+        }
+      }
+      if (Object.keys(resolvedProps.clientReactive).length > 0)
+        finalContent = emitClientReactiveAttrs(finalContent, resolvedProps.clientReactive);
+      replacements.set(i, finalContent);
+    }
+    if (replacements.size === 0)
+      return result;
+    let assembled = "", cursor = 0;
+    for (let i = 0;i < tags.length; i++) {
+      const replacement = replacements.get(i);
+      if (replacement === void 0)
+        continue;
+      assembled += result.slice(cursor, tags[i].startIndex);
+      assembled += replacement;
+      cursor = tags[i].endIndex;
+    }
+    assembled += result.slice(cursor);
+    return assembled;
+  }
+}
+function emitClientReactiveAttrs(html, clientReactive) {
+  const componentControlBindings = new Set(["if", "for"]), rootStructuralBindings = new Set(["show"]), rootBindings = Object.entries(clientReactive).filter(([key]) => !componentControlBindings.has(key)), parentBindings = rootBindings.filter(([key]) => !rootStructuralBindings.has(key)).map(([key]) => pascalToKebab(key)).join(" ");
+  let output = html;
+  const root = rootBindings.length > 0 ? findRenderedComponentRoot(output) : null;
+  if (root) {
+    const reactiveAttrs = rootBindings.map(([key, expr]) => `:${pascalToKebab(key)}="${expr.replace(/"/g, "&quot;")}"`).join(" "), parentBindingAttr = parentBindings ? ` data-stx-parent-bindings="${parentBindings}"` : "";
+    output = output.substring(0, root.insertPos) + `${parentBindingAttr} ${reactiveAttrs}` + output.substring(root.insertPos);
+  }
+  const ifExpression = clientReactive.if;
+  if (ifExpression)
+    output = `<template :if="${ifExpression.replace(/"/g, "&quot;")}">${output}</template>`;
+  const forExpression = clientReactive.for;
+  if (forExpression)
+    output = `<template :for="${forExpression.replace(/"/g, "&quot;")}">${output}</template>`;
+  return output;
+}
+function findRenderedComponentRoot(html) {
+  const scopedRoot = /<([a-zA-Z][a-zA-Z0-9-]*)\b[^>]*\bdata-stx-scope(?:\s|=|>)/i.exec(html);
+  if (scopedRoot)
+    return {
+      insertPos: scopedRoot.index + 1 + scopedRoot[1].length
+    };
+  let cursor = 0;
+  while (cursor < html.length) {
+    const rest = html.slice(cursor), whitespace = rest.match(/^\s+/);
+    if (whitespace) {
+      cursor += whitespace[0].length;
+      continue;
+    }
+    if (rest.startsWith("<!--")) {
+      const end = html.indexOf("-->", cursor + 4);
+      if (end === -1)
+        return null;
+      cursor = end + 3;
+      continue;
+    }
+    const nonRootTag = rest.match(/^<(script|style)\b[^>]*>/i);
+    if (nonRootTag) {
+      const closeTag = `</${nonRootTag[1].toLowerCase()}>`, end = html.toLowerCase().indexOf(closeTag, cursor + nonRootTag[0].length);
+      if (end === -1)
+        return null;
+      cursor = end + closeTag.length;
+      continue;
+    }
+    const root = rest.match(/^<([a-zA-Z][a-zA-Z0-9-]*)(?:\s|>|\/)/);
+    if (!root)
+      return null;
+    return {
+      insertPos: cursor + 1 + root[1].length
+    };
+  }
+  return null;
+}
+export async function processComponents(template, context, filePath, options, dependencies) {
+  if (!builtinsRegistered) {
+    registerBuiltins(registry);
+    builtinsRegistered = !0;
+  }
+  let output = await processESImports(template, context, filePath, options, dependencies);
+  output = await processImports(output, context, filePath, options, dependencies);
+  output = await processComponentDirectives(output, context, filePath, options, dependencies);
+  const nestedComments = [];
+  for (let pass = 0;pass < 3; pass++) {
+    const commentOffset = nestedComments.length, masked = maskAtElementPosition(output, matchHtmlComment, (_token, index) => `\x00STX_COMPONENT_COMMENT_${commentOffset + index}\x00`, `STX_COMPONENT_COMMENT:${commentOffset}`);
+    nestedComments.push(...masked.tokens);
+    const before = output;
+    output = await processCustomElementTags(masked.output, context, filePath, options, dependencies);
+    if (output === before)
+      break;
+  }
+  if (nestedComments.length > 0)
+    output = output.replace(/\x00STX_COMPONENT_COMMENT_(\d+)\x00/g, (_match, index) => nestedComments[Number(index)] ?? "");
+  if (options.debug) {
+    const unresolved = findUnresolvedBuiltinTags(output);
+    if (unresolved.length > 0)
+      console.warn(`[stx] ${filePath}: unresolved component tag(s) after render passes: ${unresolved.join(", ")}. Check nested component output for malformed root tags or recursive component markup.`);
+  }
+  return output;
+}