boxwood 2.12.0 → 2.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "2.12.0",
+  "version": "2.14.0",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "types": "index.d.ts",
@@ -12,7 +12,7 @@
   "scripts": {
     "test": "node --test --test-reporter=dot \"**/*.test.js\" \"**/*.spec.js\"",
     "test:debug": "node --test --test-reporter=spec \"**/*.test.js\" \"**/*.spec.js\"",
-    "coverage": "c8 npm test",
+    "coverage": "node --test --experimental-test-coverage \"**/*.test.js\" \"**/*.spec.js\"",
     "benchmark": "node --test benchmark/index.js",
     "watch": "npm test -- --watch",
     "prepush": "npm test"
@@ -47,7 +47,6 @@
   "homepage": "https://github.com/buxlabs/boxwood#readme",
   "devDependencies": {
     "benchmark": "2.1.4",
-    "c8": "^11.0.0",
     "express": "^5.2.1",
     "handlebars": "^4.7.9",
     "jsdom": "^29.1.1",

package/ui/grid/index.js

@@ -1,5 +1,6 @@
 const { component, css, Div } = require("../..")
 const { normalizeGap, normalizeBreakpoint } = require("../normalize")
+const { toNumber } = require("../normalize")
 
 const BREAKPOINTS = {
   xl: "1199px",
@@ -10,11 +11,14 @@ const BREAKPOINTS = {
 
 function Grid(
   { className, columns = 3, gap, id, breakpoint, style },
-  children
+  children,
 ) {
   gap = normalizeGap(gap)
   breakpoint = normalizeBreakpoint(breakpoint)
 
+  // Normalize columns: convert string numbers to numbers
+  columns = toNumber(columns)
+
   const styleObject = {
     "box-sizing": "border-box",
     display: "grid",
@@ -27,10 +31,8 @@ function Grid(
     }),
     ...(typeof columns === "object" &&
       Object.keys(columns).reduce((object, key) => {
-        const value =
-          typeof columns[key] === "number"
-            ? `repeat(${columns[key]}, 1fr)`
-            : columns[key]
+        let value = toNumber(columns[key])
+        value = typeof value === "number" ? `repeat(${value}, 1fr)` : value
         if (key === "default") {
           object["grid-template-columns"] = value
         } else if (typeof key === "string") {

package/ui/index.js

@@ -4,6 +4,7 @@ const Grid = require("./grid")
 const Group = require("./group")
 const Stack = require("./stack")
 const Markdown = require("./markdown")
+const Prose = require("./prose")
 
 module.exports = {
   Center,
@@ -12,4 +13,5 @@ module.exports = {
   Group,
   Stack,
   Markdown,
+  Prose,
 }

package/ui/markdown/README.md

@@ -0,0 +1,48 @@
+# Markdown Component
+
+The `Markdown` component provides pure markdown rendering without any templating features. It's a simple, focused component for rendering static markdown content.
+
+## Features
+
+- Headings (`#`, `##`, etc.)
+- Paragraphs
+- Lists (ordered and unordered)
+- Links and images
+- Code blocks with syntax highlighting support
+- Bold and italic text
+- Inline code
+- Blockquotes
+- Horizontal rules
+
+## Usage
+
+```javascript
+const { Markdown } = require("boxwood/ui")
+
+Markdown(`
+# Hello World
+
+This is **bold** and this is *italic*.
+
+- First item
+- Second item
+- Third item
+
+[Link text](https://example.com)
+
+\`\`\`javascript
+console.log('Hello')
+\`\`\`
+`)
+```
+
+## When to Use
+
+Use `Markdown` when you need:
+
+- Simple, static markdown rendering
+- No variables or templating
+- Fast, predictable output
+- Standard markdown behavior
+
+For dynamic content with variables and custom components, use the `Prose` component instead.

package/ui/markdown/index.js

@@ -1,332 +1,63 @@
-const {
-  component,
-  H1,
-  H2,
-  H3,
-  H4,
-  H5,
-  H6,
-  P,
-  Blockquote,
-  Ul,
-  Ol,
-  Li,
-  Strong,
-  Em,
-  Code,
-  A,
-  Hr,
-  Img,
-  Pre,
-} = require("../..")
+const nodes = require("../..")
+const { component } = nodes
 
-const { format } = require("./utilities/format")
-const {
-  parseCustomTag,
-  resolveAttributes,
-} = require("./utilities/parseCustomTag")
-const { replaceVariables } = require("./utilities/replaceVariables")
+const { extractHtmlParams } = require("./utilities/params")
+const { parseMarkdownLines } = require("./utilities/parseBlock")
+const { convertItemsToNodes } = require("./utilities/convertNodes")
 
-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" },
-  { prefix: "#### ", type: "h4" },
-  { prefix: "### ", type: "h3" },
-  { prefix: "## ", type: "h2" },
-  { prefix: "# ", type: "h1" },
-]
 const COMPONENTS = {
-  h1: H1,
-  h2: H2,
-  h3: H3,
-  h4: H4,
-  h5: H5,
-  h6: H6,
-  blockquote: Blockquote,
-  hr: Hr,
+  h1: nodes.H1,
+  h2: nodes.H2,
+  h3: nodes.H3,
+  h4: nodes.H4,
+  h5: nodes.H5,
+  h6: nodes.H6,
+  blockquote: nodes.Blockquote,
+  hr: nodes.Hr,
 }
 
-const INLINE_COMPONENTS = { A, Img, Code, Strong, Em }
+// Basic HTML components needed for markdown formatting (links, images, code, etc.)
+const BASIC_HTML_COMPONENTS = {
+  a: nodes.A,
+  img: nodes.Img,
+  code: nodes.Code,
+  strong: nodes.Strong,
+  em: nodes.Em,
+  p: nodes.P,
+  ul: nodes.Ul,
+  ol: nodes.Ol,
+  li: nodes.Li,
+  pre: nodes.Pre,
+  blockquote: nodes.Blockquote,
+  hr: nodes.Hr,
+}
 
 function Markdown(params, children) {
+  // Handle array of children recursively
   if (Array.isArray(children)) {
     return children.map((child) => Markdown(params, child))
   }
 
+  // Only process string content
   if (typeof children !== "string") {
     return null
   }
 
-  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 ```
-
-      // 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 (trimmed.startsWith(prefix)) {
-          items.push({
-            type,
-            content: trimmed.substring(prefix.length),
-            indent: leadingSpaces,
-          })
-          matched = true
-          break
-        }
-      }
-
-      if (!matched) {
-        if (trimmed.startsWith("> ")) {
-          items.push({
-            type: "blockquote",
-            content: trimmed.substring(2),
-            indent: leadingSpaces,
-          })
-        } else {
-          items.push({ type: "p", content: trimmed, indent: leadingSpaces })
-        }
-      }
-    }
-
-    i++
-  }
-
-  const nodes = []
-  i = 0
-
-  function parseList(startIndex, parentIndent) {
-    const list = []
-    let currentIndex = startIndex
-    const parentListType = items[startIndex].list
-
-    while (currentIndex < items.length) {
-      const item = items[currentIndex]
-
-      // Stop if not a list item or indent is less than expected
-      if (item.type !== "li" || item.indent < parentIndent) {
-        break
-      }
-
-      // Stop if indent matches but list type differs
-      if (item.indent === parentIndent && item.list !== parentListType) {
-        break
-      }
-
-      // Skip items with greater indent (they belong to nested lists)
-      if (item.indent > parentIndent) {
-        break
-      }
-
-      // Process current item at the correct indent level
-      const processedContent = replaceVariables(item.content, data)
-      const content = [format(processedContent, INLINE_COMPONENTS)]
-      currentIndex++
-
-      // Check if next item is a nested list
-      const nextItem = items[currentIndex]
-      if (nextItem?.type === "li" && nextItem.indent > item.indent) {
-        const nestedResult = parseList(currentIndex, nextItem.indent)
-        content.push(nestedResult.list)
-        currentIndex = nestedResult.nextIndex
-      }
-
-      list.push(Li(htmlParams, content))
-    }
-
-    const listElement =
-      parentListType === "ul" ? Ul(htmlParams, list) : Ol(htmlParams, list)
-
-    return { list: listElement, nextIndex: currentIndex }
-  }
-
-  while (i < items.length) {
-    const item = items[i]
-
-    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
-    } else if (item.type === "blockquote") {
-      const lines = []
-
-      while (i < items.length && items[i].type === "blockquote") {
-        lines.push(items[i].content)
-        i++
-      }
-
-      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
-      const processedContent = replaceVariables(content, data)
-      nodes.push(
-        Component(htmlParams, format(processedContent, INLINE_COMPONENTS)),
-      )
-      i++
-    }
-  }
-
-  return nodes
+  const htmlParams = extractHtmlParams(params)
+
+  // Parse all markdown lines into structured items (no custom components, no data)
+  const items = parseMarkdownLines(children, null, null)
+
+  // Convert parsed items into final node tree
+  return convertItemsToNodes(
+    items,
+    params,
+    htmlParams,
+    null, // no data
+    BASIC_HTML_COMPONENTS, // basic HTML components for formatting
+    COMPONENTS,
+    Markdown,
+  )
 }
 
 module.exports = component(Markdown)

package/ui/markdown/utilities/convertNodes.js

@@ -0,0 +1,194 @@
+const { resolveAttributes } = require("./parseCustomTag")
+const { replaceVariables } = require("./replaceVariables")
+const { format } = require("./format")
+
+/**
+ * Recursively parses nested lists with proper indentation handling
+ */
+function parseList(
+  items,
+  startIndex,
+  parentIndent,
+  htmlParams,
+  data,
+  allComponents,
+) {
+  const list = []
+  let currentIndex = startIndex
+  const parentListType = items[startIndex].list
+
+  while (currentIndex < items.length) {
+    const item = items[currentIndex]
+
+    // Stop conditions
+    if (item.type !== "li" || item.indent < parentIndent) {
+      break
+    }
+
+    if (item.indent === parentIndent && item.list !== parentListType) {
+      break
+    }
+
+    if (item.indent > parentIndent) {
+      break
+    }
+
+    // Process current list item
+    const processedContent = replaceVariables(item.content, data)
+    const content = [format(processedContent, allComponents)]
+    currentIndex++
+
+    // Check for nested lists
+    const nextItem = items[currentIndex]
+    if (nextItem?.type === "li" && nextItem.indent > item.indent) {
+      const nestedResult = parseList(
+        items,
+        currentIndex,
+        nextItem.indent,
+        htmlParams,
+        data,
+        allComponents,
+      )
+      content.push(nestedResult.list)
+      currentIndex = nestedResult.nextIndex
+    }
+
+    list.push(allComponents.li(htmlParams, content))
+  }
+
+  const listElement =
+    parentListType === "ul"
+      ? allComponents.ul(htmlParams, list)
+      : allComponents.ol(htmlParams, list)
+
+  return { list: listElement, nextIndex: currentIndex }
+}
+
+/**
+ * Processes a custom component item into a node
+ */
+function processCustomComponentItem(item, params, data, markdownRenderer) {
+  const resolvedAttrs = resolveAttributes(item.attributes, data)
+
+  if (item.selfClosing) {
+    return item.component(resolvedAttrs)
+  }
+
+  if (item.singleLine) {
+    return item.component(resolvedAttrs, item.content)
+  }
+
+  // Multi-line component with children - recursively process markdown
+  const childContent = item.content
+    ? markdownRenderer(params, item.content)
+    : []
+  return item.component(resolvedAttrs, childContent)
+}
+
+/**
+ * Processes blockquote items into a single blockquote node
+ */
+function processBlockquotes(
+  items,
+  startIndex,
+  htmlParams,
+  data,
+  allComponents,
+) {
+  const lines = []
+  let i = startIndex
+
+  while (i < items.length && items[i].type === "blockquote") {
+    lines.push(items[i].content)
+    i++
+  }
+
+  const content = replaceVariables(lines.join("\n"), data)
+  const blockquote = allComponents.blockquote(
+    htmlParams,
+    allComponents.p(htmlParams, format(content, allComponents)),
+  )
+
+  return { node: blockquote, nextIndex: i }
+}
+
+/**
+ * Converts parsed items into final node tree
+ */
+function convertItemsToNodes(
+  items,
+  params,
+  htmlParams,
+  data,
+  allComponents,
+  components,
+  markdownRenderer,
+) {
+  const result = []
+  let i = 0
+
+  while (i < items.length) {
+    const item = items[i]
+
+    if (item.type === "custom-component") {
+      result.push(
+        processCustomComponentItem(item, params, data, markdownRenderer),
+      )
+      i++
+    } else if (item.type === "li") {
+      const listResult = parseList(
+        items,
+        i,
+        item.indent,
+        htmlParams,
+        data,
+        allComponents,
+      )
+      result.push(listResult.list)
+      i = listResult.nextIndex
+    } else if (item.type === "blockquote") {
+      const { node, nextIndex } = processBlockquotes(
+        items,
+        i,
+        htmlParams,
+        data,
+        allComponents,
+      )
+      result.push(node)
+      i = nextIndex
+    } else if (item.type === "hr") {
+      result.push(allComponents.hr(htmlParams))
+      i++
+    } else if (item.type === "pre") {
+      // Code blocks - wrap in <pre><code>
+      const codeParams = item.language
+        ? { class: `language-${item.language}` }
+        : {}
+      result.push(
+        allComponents.pre(
+          htmlParams,
+          allComponents.code(codeParams, item.content),
+        ),
+      )
+      i++
+    } else {
+      // Regular block elements (h1-h6, p, etc.)
+      const { type, content } = item
+      const Component = components[type] || allComponents.p
+      const processedContent = replaceVariables(content, data)
+      result.push(
+        Component(htmlParams, format(processedContent, allComponents)),
+      )
+      i++
+    }
+  }
+
+  return result
+}
+
+module.exports = {
+  parseList,
+  processCustomComponentItem,
+  processBlockquotes,
+  convertItemsToNodes,
+}