@stacksjs/stx 0.2.121 → 0.2.123

package/dist/component-renderer.js

@@ -222,6 +222,10 @@ function parseComponentProps(rawProps, context, options) {
     }
     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;
+      }
       try {
         if (!isExpressionSafe(expression)) {
           if (options.debug)
@@ -642,11 +646,20 @@ async function processCustomElementTags(template, context, filePath, options, de
   }
 }
 function emitClientReactiveAttrs(html, clientReactive) {
-  const root = findRenderedComponentRoot(html);
-  if (!root)
-    return html;
-  const structuralBindings = new Set(["if", "for", "show"]), reactiveAttrs = Object.entries(clientReactive).map(([key, expr]) => `:${pascalToKebab(key)}="${expr.replace(/"/g, """)}"`).join(" "), parentBindings = Object.keys(clientReactive).filter((key) => !structuralBindings.has(key)).map((key) => pascalToKebab(key)).join(" "), parentBindingAttr = parentBindings ? ` data-stx-parent-bindings="${parentBindings}"` : "";
-  return html.substring(0, root.insertPos) + `${parentBindingAttr} ${reactiveAttrs}` + html.substring(root.insertPos);
+  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, """)}"`).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);