@stacksjs/stx 0.2.118 → 0.2.120

package/dist/builtins/attrs.d.ts

@@ -0,0 +1,16 @@
+import type { ResolvedProps } from '../component-registry';
+/**
+ * Render the static props a builtin did not consume as HTML attributes.
+ *
+ * Names come back spelled the way the author wrote them: prop resolution
+ * camelizes static attributes so a `.stx` component can destructure them, and
+ * `staticNames` carries the original for exactly this case. Values are escaped —
+ * a static attribute can still hold hostile text (`aria-label="<script>…"`).
+ *
+ * Boolean props render as bare attributes when true and are dropped when false,
+ * matching how HTML boolean attributes work.
+ *
+ * @param props - The component's resolved props.
+ * @param consumed - Prop names the builtin has already rendered itself.
+ */
+export declare function forwardStaticAttrs(props: ResolvedProps, consumed: Set<string>): string[];

package/dist/builtins/attrs.js

@@ -0,0 +1,16 @@
+import { escapeAttr } from "./escape.js";
+export function forwardStaticAttrs(props, consumed) {
+  const attrs = [];
+  for (const [key, value] of Object.entries(props.static)) {
+    if (consumed.has(key))
+      continue;
+    const name = props.staticNames?.[key] ?? key;
+    if (typeof value === "boolean") {
+      if (value)
+        attrs.push(escapeAttr(name));
+      continue;
+    }
+    attrs.push(`${escapeAttr(name)}="${escapeAttr(value)}"`);
+  }
+  return attrs;
+}

package/dist/builtins/safe-image.js

@@ -1,3 +1,4 @@
+import { forwardStaticAttrs } from "./attrs.js";
 const DEFAULT_FALLBACK = "/images/safe-image-default.svg";
 function escapeAttr(value) {
   return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -32,15 +33,7 @@ export const SafeImageBuiltin = {
       "className",
       "fallbackClassName"
     ]);
-    for (const [key, value] of Object.entries(props.static)) {
-      if (consumed.has(key))
-        continue;
-      if (typeof value === "boolean") {
-        if (value)
-          imgAttrs.push(escapeAttr(key));
-      } else
-        imgAttrs.push(`${escapeAttr(key)}="${escapeAttr(value)}"`);
-    }
+    imgAttrs.push(...forwardStaticAttrs(props, consumed));
     const imgTag = `<img ${imgAttrs.join(" ")} />`, renderCtx = ctx.context;
     if (!renderCtx.__safeImageHandlerEmitted) {
       renderCtx.__safeImageHandlerEmitted = !0;

package/dist/builtins/stx-image.js

@@ -1,3 +1,4 @@
+import { forwardStaticAttrs } from "./attrs.js";
 const DEFAULT_BREAKPOINTS = {
   sm: 640,
   md: 768,
@@ -163,15 +164,7 @@ export const StxImageBuiltin = {
       "preload",
       "picture"
     ]);
-    for (const [key, value] of Object.entries(props.static)) {
-      if (consumedStatic.has(key))
-        continue;
-      if (typeof value === "boolean") {
-        if (value)
-          imgAttrs.push(escapeAttr(key));
-      } else
-        imgAttrs.push(`${escapeAttr(key)}="${escapeAttr(value)}"`);
-    }
+    imgAttrs.push(...forwardStaticAttrs(props, consumedStatic));
     const imgTag = `<img ${imgAttrs.join(" ")} />`;
     let preloadTag = "";
     if (preload) {

package/dist/builtins/stx-link.js

@@ -1,3 +1,4 @@
+import { forwardStaticAttrs } from "./attrs.js";
 function escapeAttr(value) {
   return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -27,15 +28,7 @@ export const StxLinkBuiltin = {
     if (prefetch)
       attrs.push("data-stx-prefetch");
     const consumedStatic = new Set(["to", "class", "className", "activeClass", "exactActiveClass", "prefetch"]);
-    for (const [key, value] of Object.entries(props.static)) {
-      if (consumedStatic.has(key))
-        continue;
-      if (typeof value === "boolean") {
-        if (value)
-          attrs.push(escapeAttr(key));
-      } else
-        attrs.push(`${escapeAttr(key)}="${escapeAttr(value)}"`);
-    }
+    attrs.push(...forwardStaticAttrs(props, consumedStatic));
     return `<a ${attrs.join(" ")}>${slotContent}</a>`;
   }
 };