boxwood 2.10.0 → 2.12.0

package/package.json

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

package/ui/markdown/index.js

@@ -14,10 +14,22 @@ const {
   Strong,
   Em,
   Code,
+  A,
+  Hr,
+  Img,
+  Pre,
 } = require("../..")
 
+const { format } = require("./utilities/format")
+const {
+  parseCustomTag,
+  resolveAttributes,
+} = require("./utilities/parseCustomTag")
+const { replaceVariables } = require("./utilities/replaceVariables")
+
 const ORDERED_LIST_REGEXP = /^\d+\.\s/
 const UNORDERED_MARKERS = ["- ", "— ", "– ", "• "]
+const HORIZONTAL_RULE_REGEXP = /^(?:\*\s*\*\s*\*+|-\s*-\s*-+|_\s*_\s*_+)\s*$/
 const HEADINGS = [
   { prefix: "###### ", type: "h6" },
   { prefix: "##### ", type: "h5" },
@@ -34,62 +46,10 @@ const COMPONENTS = {
   h5: H5,
   h6: H6,
   blockquote: Blockquote,
+  hr: Hr,
 }
 
-function format(text) {
-  if (!text.includes("*") && !text.includes("`")) {
-    return text
-  }
-
-  const result = []
-  let i = 0
-  while (i < text.length) {
-    if (text[i] === "`") {
-      const start = i + 1
-      const end = text.indexOf("`", start)
-      if (end === -1) {
-        result.push(text[i])
-        i++
-      } else {
-        result.push(Code({}, text.substring(start, end)))
-        i = end + 1
-      }
-    } else if (text[i] === "*" && text[i + 1] === "*") {
-      const start = i + 2
-      const end = text.indexOf("**", start)
-      if (end === -1) {
-        result.push(text[i])
-        i++
-      } else {
-        result.push(Strong(text.substring(start, end)))
-        i = end + 2
-      }
-    } else if (text[i] === "*") {
-      const start = i + 1
-      const end = text.indexOf("*", start)
-      if (end === -1) {
-        result.push(text[i])
-        i++
-      } else {
-        result.push(Em(text.substring(start, end)))
-        i = end + 1
-      }
-    } else {
-      let next = text.length
-      const nextCode = text.indexOf("`", i)
-      const nextStar = text.indexOf("*", i)
-      if (nextCode !== -1 && nextCode < next) next = nextCode
-      if (nextStar !== -1 && nextStar < next) next = nextStar
-      if (next === text.length) {
-        result.push(text.substring(i))
-        break
-      }
-      result.push(text.substring(i, next))
-      i = next
-    }
-  }
-  return result.length > 0 ? result : text
-}
+const INLINE_COMPONENTS = { A, Img, Code, Strong, Em }
 
 function Markdown(params, children) {
   if (Array.isArray(children)) {
@@ -100,47 +60,170 @@ function Markdown(params, children) {
     return null
   }
 
-  const lines = children
-    .trim()
-    .split("\n")
-    .filter((line) => line.trim().length > 0)
-    .map((line) => {
-      // Preserve leading spaces for indentation tracking
-      const trimmed = line.trim()
-      const leadingSpaces = line.length - line.trimStart().length
-      return { text: trimmed, indent: leadingSpaces }
-    })
-
-  const items = lines
-    .map(({ text, indent }) => {
-      if (UNORDERED_MARKERS.some((marker) => text.startsWith(marker))) {
-        const content = text.substring(2)
-        if (!content) return null
-        return { type: "li", list: "ul", content, indent }
+  const customComponents = params && params.components
+  const data = params && params.data
+
+  // Filter out special params that shouldn't be passed to HTML elements
+  const htmlParams = params
+    ? Object.keys(params).reduce((acc, key) => {
+        if (key !== "components" && key !== "data") {
+          acc[key] = params[key]
+        }
+        return acc
+      }, {})
+    : {}
+
+  // First pass: detect code blocks before processing lines
+  const allLines = children.trim().split("\n")
+  const items = []
+  let i = 0
+
+  while (i < allLines.length) {
+    const line = allLines[i]
+    const trimmed = line.trim()
+
+    // Check for custom component tags first
+    const customTag = parseCustomTag(line, customComponents)
+    if (customTag) {
+      if (customTag.type === "custom-component" && customTag.selfClosing) {
+        // Self-closing custom component
+        items.push({
+          type: "custom-component",
+          tagName: customTag.tagName,
+          component: customTag.component,
+          attributes: customTag.attributes,
+          selfClosing: true,
+          indent: line.length - line.trimStart().length,
+        })
+        i++
+        continue
+      } else if (customTag.type === "custom-component-open") {
+        // Opening tag of a custom component
+        const openIndent = line.length - line.trimStart().length
+        const tagName = customTag.tagName
+        const componentFn = customTag.component
+        const attributes = customTag.attributes
+        const contentLines = []
+        i++ // Move past opening tag
+
+        // Collect content until closing tag
+        let depth = 1
+        while (i < allLines.length && depth > 0) {
+          const contentLine = allLines[i]
+          const contentTag = parseCustomTag(contentLine, customComponents)
+
+          if (contentTag && contentTag.tagName === tagName) {
+            if (contentTag.type === "custom-component-open") {
+              depth++
+              contentLines.push(contentLine)
+            } else if (contentTag.type === "custom-component-close") {
+              depth--
+              if (depth === 0) {
+                // Found matching closing tag
+                i++
+                break
+              }
+              contentLines.push(contentLine)
+            }
+          } else {
+            contentLines.push(contentLine)
+          }
+          i++
+        }
+
+        items.push({
+          type: "custom-component",
+          tagName,
+          component: componentFn,
+          attributes,
+          content: contentLines.join("\n"),
+          selfClosing: false,
+          indent: openIndent,
+        })
+        continue
       }
+    }
+
+    // Check for code block start
+    if (trimmed.startsWith("```")) {
+      const language = trimmed.substring(3).trim()
+      const codeLines = []
+      i++ // Move past the opening ```
 
-      if (ORDERED_LIST_REGEXP.test(text)) {
-        const content = text.replace(ORDERED_LIST_REGEXP, "")
-        if (!content) return null
-        return { type: "li", list: "ol", content, indent }
+      // Collect code block lines until closing ```
+      while (i < allLines.length) {
+        const codeLine = allLines[i]
+        if (codeLine.trim().startsWith("```")) {
+          // Found closing ```, don't include it
+          i++
+          break
+        }
+        codeLines.push(codeLine)
+        i++
       }
 
+      items.push({
+        type: "pre",
+        content: codeLines.join("\n"),
+        language: language || undefined,
+        indent: 0,
+      })
+      continue
+    }
+
+    // Skip empty lines
+    if (trimmed.length === 0) {
+      i++
+      continue
+    }
+
+    const leadingSpaces = line.length - line.trimStart().length
+
+    // Check for other block types
+    if (HORIZONTAL_RULE_REGEXP.test(trimmed)) {
+      items.push({ type: "hr", indent: leadingSpaces })
+    } else if (UNORDERED_MARKERS.some((marker) => trimmed.startsWith(marker))) {
+      const content = trimmed.substring(2)
+      if (content) {
+        items.push({ type: "li", list: "ul", content, indent: leadingSpaces })
+      }
+    } else if (ORDERED_LIST_REGEXP.test(trimmed)) {
+      const content = trimmed.replace(ORDERED_LIST_REGEXP, "")
+      if (content) {
+        items.push({ type: "li", list: "ol", content, indent: leadingSpaces })
+      }
+    } else {
+      let matched = false
       for (const { prefix, type } of HEADINGS) {
-        if (text.startsWith(prefix)) {
-          return { type, content: text.substring(prefix.length), indent }
+        if (trimmed.startsWith(prefix)) {
+          items.push({
+            type,
+            content: trimmed.substring(prefix.length),
+            indent: leadingSpaces,
+          })
+          matched = true
+          break
         }
       }
 
-      if (text.startsWith("> ")) {
-        return { type: "blockquote", content: text.substring(2), indent }
+      if (!matched) {
+        if (trimmed.startsWith("> ")) {
+          items.push({
+            type: "blockquote",
+            content: trimmed.substring(2),
+            indent: leadingSpaces,
+          })
+        } else {
+          items.push({ type: "p", content: trimmed, indent: leadingSpaces })
+        }
       }
+    }
 
-      return { type: "p", content: text, indent }
-    })
-    .filter(Boolean)
+    i++
+  }
 
   const nodes = []
-  let i = 0
+  i = 0
 
   function parseList(startIndex, parentIndent) {
     const list = []
@@ -166,7 +249,8 @@ function Markdown(params, children) {
       }
 
       // Process current item at the correct indent level
-      const content = [format(item.content)]
+      const processedContent = replaceVariables(item.content, data)
+      const content = [format(processedContent, INLINE_COMPONENTS)]
       currentIndex++
 
       // Check if next item is a nested list
@@ -177,11 +261,11 @@ function Markdown(params, children) {
         currentIndex = nestedResult.nextIndex
       }
 
-      list.push(Li(params, content))
+      list.push(Li(htmlParams, content))
     }
 
     const listElement =
-      parentListType === "ul" ? Ul(params, list) : Ol(params, list)
+      parentListType === "ul" ? Ul(htmlParams, list) : Ol(htmlParams, list)
 
     return { list: listElement, nextIndex: currentIndex }
   }
@@ -189,7 +273,20 @@ function Markdown(params, children) {
   while (i < items.length) {
     const item = items[i]
 
-    if (item.type === "li") {
+    if (item.type === "custom-component") {
+      // Handle custom component
+      const resolvedAttrs = resolveAttributes(item.attributes, data)
+
+      if (item.selfClosing) {
+        // Self-closing component
+        nodes.push(item.component(resolvedAttrs))
+      } else {
+        // Component with children - recursively process markdown content
+        const childContent = item.content ? Markdown(params, item.content) : []
+        nodes.push(item.component(resolvedAttrs, childContent))
+      }
+      i++
+    } else if (item.type === "li") {
       const result = parseList(i, item.indent)
       nodes.push(result.list)
       i = result.nextIndex
@@ -201,11 +298,30 @@ function Markdown(params, children) {
         i++
       }
 
-      nodes.push(Blockquote(params, P(params, format(lines.join("\n")))))
+      const content = replaceVariables(lines.join("\n"), data)
+      nodes.push(
+        Blockquote(
+          htmlParams,
+          P(htmlParams, format(content, INLINE_COMPONENTS)),
+        ),
+      )
+    } else if (item.type === "hr") {
+      nodes.push(Hr(htmlParams))
+      i++
+    } else if (item.type === "pre") {
+      // Code blocks - wrap in <pre><code>
+      const codeParams = item.language
+        ? { class: `language-${item.language}` }
+        : {}
+      nodes.push(Pre(htmlParams, Code(codeParams, item.content)))
+      i++
     } else {
       const { type, content } = item
       const Component = COMPONENTS[type] || P
-      nodes.push(Component(params, format(content)))
+      const processedContent = replaceVariables(content, data)
+      nodes.push(
+        Component(htmlParams, format(processedContent, INLINE_COMPONENTS)),
+      )
       i++
     }
   }

package/ui/markdown/utilities/brackets.js

@@ -0,0 +1,21 @@
+// Find the matching closing bracket, accounting for nested brackets
+function findMatchingBracket(text, startPos) {
+  let depth = 1
+  let i = startPos + 1
+
+  while (i < text.length && depth > 0) {
+    if (text[i] === "[" && text[i - 1] !== "\\") {
+      depth++
+    } else if (text[i] === "]" && text[i - 1] !== "\\") {
+      depth--
+      if (depth === 0) {
+        return i
+      }
+    }
+    i++
+  }
+
+  return -1
+}
+
+module.exports = { findMatchingBracket }

package/ui/markdown/utilities/format.js

@@ -0,0 +1,181 @@
+const { findMatchingBracket } = require("./brackets")
+
+/**
+ * Format inline markdown elements within text
+ * Handles: images, links, code, bold, italic
+ * @param {string} text - The text to format
+ * @param {Object} components - HTML component functions (A, Img, Code, Strong, Em)
+ * @returns {Array|string} - Formatted content as array of components and strings
+ */
+function format(text, components) {
+  const { A, Img, Code, Strong, Em } = components
+
+  if (
+    !text.includes("*") &&
+    !text.includes("`") &&
+    !text.includes("[") &&
+    !text.includes("!") &&
+    !text.includes("<") &&
+    !text.includes("\\")
+  ) {
+    return text
+  }
+
+  const result = []
+  let i = 0
+
+  while (i < text.length) {
+    // Handle escape characters
+    if (text[i] === "\\") {
+      if (i + 1 < text.length) {
+        const nextChar = text[i + 1]
+        // Check if next char is a special markdown character
+        if (
+          nextChar === "*" ||
+          nextChar === "`" ||
+          nextChar === "[" ||
+          nextChar === "]" ||
+          nextChar === "(" ||
+          nextChar === ")" ||
+          nextChar === "!" ||
+          nextChar === "<" ||
+          nextChar === ">" ||
+          nextChar === "\\"
+        ) {
+          // Escape the next character - just add it as literal text
+          result.push(nextChar)
+          i += 2 // Skip both \ and the escaped character
+          continue
+        }
+        // If not a special char, keep both the backslash and the next character
+        result.push(text[i])
+        result.push(nextChar)
+        i += 2
+        continue
+      } else {
+        // Backslash at end of string
+        result.push(text[i])
+        i++
+        continue
+      }
+    }
+    
+    if (text[i] === "!" && text[i + 1] === "[") {
+      // Try to parse markdown image ![alt](url)
+      const altEnd = text.indexOf("]", i + 2)
+
+      if (altEnd !== -1 && text[altEnd + 1] === "(") {
+        const urlEnd = text.indexOf(")", altEnd + 2)
+
+        if (urlEnd !== -1) {
+          const alt = text.substring(i + 2, altEnd)
+          const src = text.substring(altEnd + 2, urlEnd)
+          result.push(Img({ src, alt }))
+          i = urlEnd + 1
+          continue
+        }
+      }
+
+      // Not a valid image, treat as regular text (skip both ! and [)
+      result.push(text[i])
+      i++
+    } else if (text[i] === "[") {
+      // Try to parse markdown link [text](url)
+      const textEnd = findMatchingBracket(text, i)
+
+      if (textEnd !== -1 && text[textEnd + 1] === "(") {
+        const urlEnd = text.indexOf(")", textEnd + 2)
+
+        if (urlEnd !== -1) {
+          const linkText = text.substring(i + 1, textEnd)
+          const url = text.substring(textEnd + 2, urlEnd)
+          // Recursively format the link text to support images, bold, italic inside links
+          result.push(A({ href: url }, format(linkText, components)))
+          i = urlEnd + 1
+          continue
+        }
+      }
+
+      // Not a valid link, treat as regular text
+      result.push(text[i])
+      i++
+    } else if (text[i] === "<") {
+      // Try to parse autolink <url> or <email>
+      const end = text.indexOf(">", i + 1)
+      
+      if (end !== -1) {
+        const content = text.substring(i + 1, end)
+        
+        // Check if it's a URL (starts with http:// or https://)
+        if (content.startsWith("http://") || content.startsWith("https://")) {
+          result.push(A({ href: content }, content))
+          i = end + 1
+          continue
+        }
+        
+        // Check if it's an email (contains @ and looks like email)
+        if (content.includes("@") && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(content)) {
+          result.push(A({ href: `mailto:${content}` }, content))
+          i = end + 1
+          continue
+        }
+      }
+      
+      // Not a valid autolink, treat as regular text
+      result.push(text[i])
+      i++
+    } else if (text[i] === "`") {
+      const end = text.indexOf("`", i + 1)
+      if (end === -1) {
+        result.push(text[i])
+        i++
+      } else {
+        result.push(Code({}, text.substring(i + 1, end)))
+        i = end + 1
+      }
+    } else if (text[i] === "*" && text[i + 1] === "*") {
+      const end = text.indexOf("**", i + 2)
+      if (end === -1) {
+        result.push(text[i])
+        i++
+      } else {
+        result.push(Strong(format(text.substring(i + 2, end), components)))
+        i = end + 2
+      }
+    } else if (text[i] === "*") {
+      const end = text.indexOf("*", i + 1)
+      if (end === -1) {
+        result.push(text[i])
+        i++
+      } else {
+        result.push(Em(format(text.substring(i + 1, end), components)))
+        i = end + 1
+      }
+    } else {
+      // Find next special character
+      const positions = [
+        text.indexOf("`", i),
+        text.indexOf("*", i),
+        text.indexOf("[", i),
+        text.indexOf("<", i),
+        text.indexOf("\\", i),
+      ].filter((pos) => pos !== -1)
+
+      // Look for image pattern ![
+      const exclamPos = text.indexOf("!", i)
+      if (exclamPos !== -1 && text[exclamPos + 1] === "[") {
+        positions.push(exclamPos)
+      }
+
+      const next = positions.length > 0 ? Math.min(...positions) : text.length
+
+      result.push(text.substring(i, next))
+      if (next === text.length) break
+      i = next
+    }
+  }
+
+  return result.length > 0 ? result : text
+}
+
+module.exports = { format }

package/ui/markdown/utilities/parseCustomTag.js

@@ -0,0 +1,198 @@
+/**
+ * Parse a custom component tag from markdown
+ * Supports both <Component attr="value"> and <Component attr={variable}>
+ * @param {string} line - The line to parse
+ * @param {Object} customComponents - Map of component names to functions
+ * @returns {Object|null} - Parsed tag info or null if not a custom tag
+ */
+function parseCustomTag(line, customComponents) {
+  if (!customComponents || typeof customComponents !== "object") {
+    return null
+  }
+
+  const trimmed = line.trim()
+
+  // Check for self-closing tag: <ComponentName ... /> (space before / is optional)
+  const selfClosingMatch = trimmed.match(
+    /^<([A-Za-z][A-Za-z0-9-]*)(\s+[^>]*)?\s*\/>\s*$/,
+  )
+  if (selfClosingMatch) {
+    const [, tagName, attributesStr] = selfClosingMatch
+    const component = customComponents[tagName]
+    if (component) {
+      const attributes = parseAttributes(attributesStr || "")
+      return {
+        type: "custom-component",
+        tagName,
+        component,
+        attributes,
+        selfClosing: true,
+      }
+    }
+  }
+
+  // Check for opening tag: <ComponentName ...>
+  const openTagMatch = trimmed.match(
+    /^<([A-Za-z][A-Za-z0-9-]*)(\s+[^>]*)?>\s*$/,
+  )
+  if (openTagMatch) {
+    const [, tagName, attributesStr] = openTagMatch
+    const component = customComponents[tagName]
+    if (component) {
+      const attributes = parseAttributes(attributesStr || "")
+      return {
+        type: "custom-component-open",
+        tagName,
+        component,
+        attributes,
+        selfClosing: false,
+      }
+    }
+  }
+
+  // Check for closing tag: </ComponentName>
+  const closeTagMatch = trimmed.match(/^<\/([A-Za-z][A-Za-z0-9-]*)>\s*$/)
+  if (closeTagMatch) {
+    const [, tagName] = closeTagMatch
+    const component = customComponents[tagName]
+    if (component) {
+      return {
+        type: "custom-component-close",
+        tagName,
+        component,
+      }
+    }
+  }
+
+  return null
+}
+
+/**
+ * Parse attributes from a tag string
+ * Supports: attr="value", attr='value', attr={variable}, attr
+ * @param {string} attributesStr - The attributes string
+ * @returns {Object} - Parsed attributes
+ */
+function parseAttributes(attributesStr) {
+  const attributes = {}
+  if (!attributesStr || !attributesStr.trim()) {
+    return attributes
+  }
+
+  const str = attributesStr.trim()
+  let i = 0
+
+  while (i < str.length) {
+    // Skip whitespace
+    while (i < str.length && /\s/.test(str[i])) {
+      i++
+    }
+
+    if (i >= str.length) break
+
+    // Parse attribute name
+    let nameStart = i
+    while (i < str.length && /[a-zA-Z0-9-_:]/.test(str[i])) {
+      i++
+    }
+
+    const name = str.substring(nameStart, i)
+    if (!name) break
+
+    // Skip whitespace after name
+    while (i < str.length && /\s/.test(str[i])) {
+      i++
+    }
+
+    // Check for =
+    if (i >= str.length || str[i] !== "=") {
+      // Boolean attribute
+      attributes[name] = true
+      continue
+    }
+
+    i++ // Skip =
+
+    // Skip whitespace after =
+    while (i < str.length && /\s/.test(str[i])) {
+      i++
+    }
+
+    if (i >= str.length) break
+
+    // Parse value
+    const quote = str[i]
+
+    if (quote === '"' || quote === "'") {
+      // Quoted string
+      i++ // Skip opening quote
+      let value = ""
+      while (i < str.length && str[i] !== quote) {
+        if (str[i] === "\\" && i + 1 < str.length) {
+          // Escaped character - add the next character literally
+          value += str[i + 1]
+          i += 2
+        } else {
+          value += str[i]
+          i++
+        }
+      }
+      attributes[name] = value
+      if (i < str.length) i++ // Skip closing quote
+    } else if (str[i] === "{") {
+      // Variable reference
+      i++ // Skip {
+      const valueStart = i
+      while (i < str.length && str[i] !== "}") {
+        i++
+      }
+      const variableName = str.substring(valueStart, i).trim()
+      attributes[name] = { __variable: variableName }
+      if (i < str.length) i++ // Skip }
+    } else {
+      // Unquoted value (until space or end)
+      const valueStart = i
+      while (i < str.length && !/\s/.test(str[i])) {
+        i++
+      }
+      const value = str.substring(valueStart, i)
+      attributes[name] = value
+    }
+  }
+
+  return attributes
+}
+
+/**
+ * Resolve attributes by replacing variable references with actual values
+ * @param {Object} attributes - Attributes with possible variable references
+ * @param {Object} data - Data object containing variable values
+ * @returns {Object} - Resolved attributes
+ */
+function resolveAttributes(attributes, data) {
+  if (!attributes || typeof attributes !== "object") {
+    return {}
+  }
+
+  const resolved = {}
+  for (const [key, value] of Object.entries(attributes)) {
+    if (value && typeof value === "object" && value.__variable) {
+      // Resolve variable
+      const variableName = value.__variable
+      resolved[key] =
+        data && data[variableName] !== undefined
+          ? data[variableName]
+          : undefined
+    } else {
+      resolved[key] = value
+    }
+  }
+
+  return resolved
+}
+
+module.exports = {
+  parseCustomTag,
+  parseAttributes,
+  resolveAttributes,
+}

package/ui/markdown/utilities/replaceVariables.js

@@ -0,0 +1,80 @@
+/**
+ * Replace {variableName} placeholders in text with actual values from data
+ * @param {string} text - Text containing variable placeholders
+ * @param {Object} data - Data object with variable values
+ * @returns {string|Array} - Text with variables replaced, or array if mixed content
+ */
+function replaceVariables(text, data) {
+  if (!text || typeof text !== "string") {
+    return text
+  }
+
+  if (!data || typeof data !== "object") {
+    return text
+  }
+
+  // Check if text contains any variables
+  if (!text.includes("{") || !text.includes("}")) {
+    return text
+  }
+
+  const result = []
+  let i = 0
+  let lastIndex = 0
+
+  while (i < text.length) {
+    if (text[i] === "\\" && text[i + 1] === "{") {
+      // Escaped opening brace
+      result.push(text.substring(lastIndex, i))
+      result.push("{")
+      i += 2
+      lastIndex = i
+      continue
+    }
+
+    if (text[i] === "{") {
+      const closeIndex = text.indexOf("}", i + 1)
+
+      if (closeIndex !== -1) {
+        // Found a variable placeholder
+        const variableName = text.substring(i + 1, closeIndex).trim()
+
+        if (variableName) {
+          // Add text before the variable
+          if (i > lastIndex) {
+            result.push(text.substring(lastIndex, i))
+          }
+
+          // Add the variable value
+          const value = data[variableName]
+          if (value !== undefined && value !== null) {
+            result.push(String(value))
+          } else {
+            // Variable not found, keep the placeholder
+            result.push(text.substring(i, closeIndex + 1))
+          }
+
+          i = closeIndex + 1
+          lastIndex = i
+          continue
+        }
+      }
+    }
+
+    i++
+  }
+
+  // Add remaining text
+  if (lastIndex < text.length) {
+    result.push(text.substring(lastIndex))
+  }
+
+  // If no substitutions were made, return original text
+  if (result.length === 0) {
+    return text
+  }
+
+  return result.join("")
+}
+
+module.exports = { replaceVariables }