boxwood 2.18.0 → 2.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "2.18.0",
+  "version": "2.18.1",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "types": "index.d.ts",

package/ui/prose/README.md

@@ -175,6 +175,17 @@ literals:
 <Hero sources="{[cover ?? 'default.jpg', banner]}" />
 ```
 
+## Attribute Interpolation
+
+An attribute whose entire value is a single `{expression}` resolves to the
+raw value (array, object, number) - that is what makes
+`images="{images.slice(0, 2)}"` work. Expressions can also be embedded in a
+longer attribute string, which always produces a string:
+
+```markdown
+<Card href="/products/{id}" alt="Photo of {name ?? 'someone'}" />
+```
+
 ## Conditional Rendering
 
 Use `{#if}` blocks to conditionally render content based on data:

package/ui/prose/utilities/validate.js

@@ -17,7 +17,6 @@ const CONDITION_REGEXP = /^(.+?)\s*(>=|<=|>|<|==|!=)\s*(.+)$/
 const INLINE_CODE_REGEXP = /(`+)([^`]+)\1/g
 const BRACE_REGEXP = /\{([^{}]*)\}/g
 const COMPONENT_TAG_REGEXP = /^<\/?([A-Z][A-Za-z0-9-]*)/
-const ATTRIBUTE_EXPRESSION_REGEXP = /=\s*(?:"\{([^}"]*)\}"|'\{([^}']*)\}'|\{([^}]*)\})/g
 
 /**
  * Validate a Prose template and report problems that the renderer
@@ -253,19 +252,8 @@ function validate(text, options = {}) {
         )
       }
     }
-    if (componentMatch) {
-      // Validate attribute expressions: attr="{expr}" or attr={expr}
-      let attrMatch
-      while ((attrMatch = ATTRIBUTE_EXPRESSION_REGEXP.exec(trimmed)) !== null) {
-        const expression = attrMatch[1] ?? attrMatch[2] ?? attrMatch[3]
-        if (expression && expression.trim()) {
-          validateExpression(expression, lineNumber)
-        }
-      }
-      continue
-    }
-
-    // Braced tags and expressions
+    // Braced tags and expressions - on component lines this also covers
+    // attribute expressions, both whole-value ({expr}) and partial (/p/{id})
     let braceMatch
     while ((braceMatch = BRACE_REGEXP.exec(line)) !== null) {
       // Escaped braces are literal

package/ui/utilities/parseCustomTag.js

@@ -1,4 +1,7 @@
-const { resolveExpression } = require("./replaceVariables")
+const {
+  resolveExpression,
+  replaceVariables,
+} = require("./replaceVariables")
 
 /**
  * Parse a custom component tag from markdown
@@ -160,18 +163,24 @@ function parseAttributes(attributesStr) {
         }
       }
       
-      // Check if the entire quoted value is a variable reference: "{variable}"
-      if (value.startsWith("{") && value.endsWith("}")) {
-        const variableName = value.substring(1, value.length - 1).trim()
-        if (variableName) {
-          attributes[name] = { __variable: variableName }
-        } else {
-          attributes[name] = value
-        }
+      // Whole-value variable reference: "{variable}" - resolves to the raw
+      // value (array, object, number), not a string
+      const inner = value.substring(1, value.length - 1)
+      if (
+        value.startsWith("{") &&
+        value.endsWith("}") &&
+        inner.trim() &&
+        !inner.includes("{") &&
+        !inner.includes("}")
+      ) {
+        attributes[name] = { __variable: inner.trim() }
+      } else if (/\{[^{}]+\}/.test(value)) {
+        // Partial interpolation: "/products/{id}" or "Photo of {name}"
+        attributes[name] = { __interpolate: value }
       } else {
         attributes[name] = value
       }
-      
+
       if (i < str.length) i++ // Skip closing quote
     } else if (str[i] === "{") {
       // Variable reference
@@ -216,6 +225,9 @@ function resolveAttributes(attributes, data) {
       const variablePath = value.__variable
       const resolvedValue = resolveExpression(data, variablePath)
       resolved[key] = resolvedValue
+    } else if (value && typeof value === "object" && value.__interpolate) {
+      // Partial interpolation always produces a string
+      resolved[key] = replaceVariables(value.__interpolate, data)
     } else {
       resolved[key] = value
     }