boxwood 2.4.5 → 2.6.0

package/index.js

@@ -377,7 +377,7 @@ const render = (input, escape = true) => {
   // Second most common: arrays (~20% of nodes)
   if (Array.isArray(input)) {
     let result = ""
-    for (let i = 0; i < input.length; i++) {
+    for (let i = 0, ilen = input.length; i < ilen; i++) {
       result += render(input[i])
     }
     return result
@@ -393,11 +393,6 @@ const render = (input, escape = true) => {
     return ""
   }
 
-  // Numbers (~5% of nodes)
-  if (typeof input === "number") {
-    return input.toString()
-  }
-
   // Objects (elements) - check ignore flag first
   if (input.ignore) {
     return ""
@@ -412,12 +407,24 @@ const render = (input, escape = true) => {
     return attrs ? `<${input.name} ${attrs}>` : `<${input.name}>`
   }
 
-  const attrs = input.attributes ? attributes(input.attributes) : ""
-  const children = render(input.children, !UNESCAPED_TAGS.has(input.name))
+  if (input.name) {
+    const attrs = input.attributes ? attributes(input.attributes) : ""
+    const children = render(input.children, !UNESCAPED_TAGS.has(input.name))
+
+    return attrs
+      ? `<${input.name} ${attrs}>${children}</${input.name}>`
+      : `<${input.name}>${children}</${input.name}>`
+  }
+
+  if (typeof input === "number") {
+    return input.toString()
+  }
+
+  if (typeof input === "object" && input instanceof Date) {
+    return input.toString()
+  }
 
-  return attrs
-    ? `<${input.name} ${attrs}>${children}</${input.name}>`
-    : `<${input.name}>${children}</${input.name}>`
+  return ""
 }
 
 const raw = (children) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "2.4.5",
+  "version": "2.6.0",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "types": "index.d.ts",
@@ -50,7 +50,7 @@
     "c8": "^10.1.3",
     "express": "^5.2.1",
     "handlebars": "^4.7.8",
-    "jsdom": "^27.2.0",
+    "jsdom": "^27.3.0",
     "mustache": "^4.2.0",
     "underscore": "^1.13.7"
   },

package/ui/center/index.js

@@ -1,6 +1,6 @@
 const { css, component, Div } = require("../..")
 
-function Center({ className, style, height, width } = {}, children) {
+function Center({ className, id, style, height, width } = {}, children) {
   const styleObject = {
     display: "flex",
     "justify-content": "center",
@@ -17,7 +17,7 @@ function Center({ className, style, height, width } = {}, children) {
   `
 
   return [
-    Div({ className: [className, styles.center], style }, children),
+    Div({ className: [className, styles.center], id, style }, children),
     styles.css,
   ]
 }

package/ui/container/index.js

@@ -16,7 +16,7 @@ const normalizeValue = (value) => {
 }
 
 function Container(
-  { className, style, width = 1200, padding = 16 } = {},
+  { className, style, id, width = 1200, padding = 16 } = {},
   children
 ) {
   width = normalizeValue(width)
@@ -39,7 +39,7 @@ function Container(
     }
   `
   return [
-    Div({ className: [styles.container, className], style }, children),
+    Div({ className: [styles.container, className], id, style }, children),
     styles.css,
   ]
 }

package/ui/grid/index.js

@@ -8,7 +8,10 @@ const BREAKPOINTS = {
   sm: "575px",
 }
 
-function Grid({ className, columns = 3, gap, breakpoint, style }, children) {
+function Grid(
+  { className, columns = 3, gap, id, breakpoint, style },
+  children
+) {
   gap = normalizeGap(gap)
   breakpoint = normalizeBreakpoint(breakpoint)
 
@@ -55,7 +58,7 @@ function Grid({ className, columns = 3, gap, breakpoint, style }, children) {
   `
 
   return [
-    Div({ className: [styles.grid, className], style }, children),
+    Div({ className: [styles.grid, className], id, style }, children),
     styles.css,
   ]
 }

package/ui/group/index.js

@@ -8,7 +8,18 @@ const {
 } = require("../normalize")
 
 function Group(
-  { align, className, breakpoint, justify, gap, width, margin, padding, style },
+  {
+    align,
+    className,
+    breakpoint,
+    id,
+    justify,
+    gap,
+    width,
+    margin,
+    padding,
+    style,
+  },
   children
 ) {
   gap = normalizeGap(gap)
@@ -43,7 +54,7 @@ function Group(
   `
 
   return [
-    Div({ className: [styles.group, className], style }, children),
+    Div({ className: [styles.group, className], id, style }, children),
     styles.css,
   ]
 }

package/ui/index.js

@@ -3,6 +3,7 @@ const Container = require("./container")
 const Grid = require("./grid")
 const Group = require("./group")
 const Stack = require("./stack")
+const Markdown = require("./markdown")
 
 module.exports = {
   Center,
@@ -10,4 +11,5 @@ module.exports = {
   Grid,
   Group,
   Stack,
+  Markdown,
 }

package/ui/markdown/index.js

@@ -0,0 +1,42 @@
+const { component, H1, H2, H3, H4, H5, H6, P, Blockquote } = require("../..")
+
+function Markdown(params, children) {
+  if (typeof children === "string") {
+    const lines = children
+      .trim()
+      .split("\n")
+      .map((line) => line.trim())
+      .filter(Boolean)
+
+    return lines.map((line) => {
+      if (line.startsWith("# ")) {
+        const text = line.substring(2)
+        return H1(params, text)
+      } else if (line.startsWith("## ")) {
+        const text = line.substring(3)
+        return H2(params, text)
+      } else if (line.startsWith("### ")) {
+        const text = line.substring(4)
+        return H3(params, text)
+      } else if (line.startsWith("#### ")) {
+        const text = line.substring(5)
+        return H4(params, text)
+      } else if (line.startsWith("##### ")) {
+        const text = line.substring(6)
+        return H5(params, text)
+      } else if (line.startsWith("###### ")) {
+        const text = line.substring(7)
+        return H6(params, text)
+      } else if (line.startsWith("> ")) {
+        const text = line.substring(2)
+        return Blockquote(params, text)
+      }
+
+      return P(params, line)
+    })
+  } else {
+    return null
+  }
+}
+
+module.exports = component(Markdown)

package/ui/stack/index.js

@@ -7,7 +7,7 @@ const {
 } = require("../normalize")
 
 function Stack(
-  { align, className, justify, gap, width, margin, padding, style },
+  { align, className, id, justify, gap, width, margin, padding, style },
   children
 ) {
   gap = normalizeGap(gap)
@@ -36,7 +36,7 @@ function Stack(
   `
 
   return [
-    Div({ className: [styles.stack, className], style }, children),
+    Div({ className: [styles.stack, className], id, style }, children),
     styles.css,
   ]
 }