boxwood 2.5.0 → 2.7.0

package/index.js

@@ -3,6 +3,70 @@ const { readFileSync, realpathSync, lstatSync } = require("fs")
 const csstree = require("css-tree")
 const { createHash } = require("./utilities/hash")
 
+class TranslationError extends Error {
+  constructor(message) {
+    super(message)
+    this.name = "TranslationError"
+    Error.captureStackTrace(this, this.constructor)
+  }
+}
+
+class FileError extends Error {
+  constructor(message) {
+    super(message)
+    this.name = "FileError"
+    Error.captureStackTrace(this, this.constructor)
+  }
+}
+
+class RawError extends Error {
+  constructor(message) {
+    super(message)
+    this.name = "RawError"
+    Error.captureStackTrace(this, this.constructor)
+  }
+}
+
+class CSSError extends Error {
+  constructor(message) {
+    super(message)
+    this.name = "CSSError"
+    Error.captureStackTrace(this, this.constructor)
+  }
+}
+
+class ImageError extends Error {
+  constructor(message) {
+    super(message)
+    this.name = "ImageError"
+    Error.captureStackTrace(this, this.constructor)
+  }
+}
+
+class SVGError extends Error {
+  constructor(message) {
+    super(message)
+    this.name = "SVGError"
+    Error.captureStackTrace(this, this.constructor)
+  }
+}
+
+class JSONError extends Error {
+  constructor(message) {
+    super(message)
+    this.name = "JSONError"
+    Error.captureStackTrace(this, this.constructor)
+  }
+}
+
+class ComponentError extends Error {
+  constructor(message) {
+    super(message)
+    this.name = "ComponentError"
+    Error.captureStackTrace(this, this.constructor)
+  }
+}
+
 function compile(path) {
   const fn = require(path)
   return {
@@ -37,7 +101,7 @@ function compile(path) {
           if (
             attributes.src ||
             ["application/json", "application/ld+json"].includes(
-              attributes.type
+              attributes.type,
             )
           ) {
             node.ignore = false
@@ -179,7 +243,7 @@ function validateSymlinks(path, base) {
     if (!part) continue
     current = resolve(current, part)
     if (lstatSync(current).isSymbolicLink()) {
-      throw new Error(`FileError: symlinks are not allowed ("${current}")`)
+      throw new FileError(`symlinks are not allowed ("${current}")`)
     }
   }
 }
@@ -191,33 +255,31 @@ function validateFile(path, base) {
   const type = extension(normalizedPath)
 
   if (!type) {
-    throw new Error(`FileError: path "${path}" has no extension`)
+    throw new FileError(`path "${path}" has no extension`)
   }
 
   if (!ALLOWED_READ_EXTENSIONS.includes(type)) {
-    throw new Error(
-      `FileError: unsupported file type "${type}" for path "${path}"`
-    )
+    throw new FileError(`unsupported file type "${type}" for path "${path}"`)
   }
 
   const stats = lstatSync(normalizedPath)
   if (!stats.isFile()) {
-    throw new Error(`FileError: path "${path}" is not a file`)
+    throw new FileError(`path "${path}" is not a file`)
   }
 
   if (stats.isSymbolicLink()) {
-    throw new Error(`FileError: path "${path}" is a symbolic link`)
+    throw new FileError(`path "${path}" is a symbolic link`)
   }
 
   if (normalizedPath === normalizedBase) {
-    throw new Error(
-      `FileError: path "${path}" is the same as the current working directory "${base}"`
+    throw new FileError(
+      `path "${path}" is the same as the current working directory "${base}"`,
     )
   }
 
   if (!normalizedPath.startsWith(normalizedBase + "/")) {
-    throw new Error(
-      `FileError: real path "${realPath}" is not within the current working directory "${realBase}"`
+    throw new FileError(
+      `real path "${normalizedPath}" is not within the current working directory "${normalizedBase}"`,
     )
   }
 }
@@ -235,9 +297,7 @@ function readFile(path, encoding) {
 
     return readFileSync(path, encoding)
   } catch (exception) {
-    throw new Error(
-      `FileError: cannot read file "${path}": ${exception.message}`
-    )
+    throw new FileError(`cannot read file "${path}": ${exception.message}`)
   }
 }
 
@@ -286,7 +346,7 @@ const ALIASES = {
 }
 
 // Pre-compiled regex for better performance
-const KEY_VALIDATION_REGEX = /^[a-zA-Z0-9\-_]+$/
+const KEY_VALIDATION_REGEX = /^[a-zA-Z0-9\-_:]+$/
 const isKeyValid = (key) => KEY_VALIDATION_REGEX.test(key)
 
 const attributes = (options) => {
@@ -309,7 +369,6 @@ const attributes = (options) => {
         result.push(key)
       } else {
         const name = ALIASES[key] || key
-        const value = options[key]
         const content = Array.isArray(value) ? classes(...value) : value
         result.push(`${name}="${escapeHTML(content)}"`)
       }
@@ -330,8 +389,8 @@ const attributes = (options) => {
           const left = result.left || "0"
           styles.push(
             `${decamelize(param)}:${escapeHTML(
-              `${top} ${right} ${bottom} ${left}`
-            )}`
+              `${top} ${right} ${bottom} ${left}`,
+            )}`,
           )
         } else if (typeof result === "string" || typeof result === "number") {
           styles.push(`${decamelize(param)}:${escapeHTML(result)}`)
@@ -377,8 +436,8 @@ 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++) {
-      result += render(input[i])
+    for (let i = 0, ilen = input.length; i < ilen; i++) {
+      result += render(input[i], escape)
     }
     return result
   }
@@ -393,11 +452,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 +466,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}>`
+    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 ""
 }
 
 const raw = (children) => {
@@ -473,9 +539,7 @@ const sanitizeHTML = (content) => {
 raw.load = function (path, options = {}) {
   const type = extension(path)
   if (!ALLOWED_RAW_EXTENSIONS.includes(type)) {
-    throw new Error(
-      `RawError: unsupported raw type "${type}" for path "${path}"`
-    )
+    throw new RawError(`unsupported raw type "${type}" for path "${path}"`)
   }
 
   let content = readFile(path, "utf8")
@@ -488,22 +552,48 @@ raw.load = function (path, options = {}) {
   return raw(content)
 }
 
-const tag = (a, b, c) => {
-  if (typeof b === "string" || typeof b === "number" || Array.isArray(b)) {
-    const name = a
-    const children = b
+const tag = (tagName, attrsOrChildren, ...restChildren) => {
+  // Check if second argument is children (not attributes)
+  const isChildrenNotAttributes =
+    typeof attrsOrChildren === "string" ||
+    typeof attrsOrChildren === "number" ||
+    Array.isArray(attrsOrChildren) ||
+    (attrsOrChildren &&
+      typeof attrsOrChildren === "object" &&
+      "name" in attrsOrChildren &&
+      "children" in attrsOrChildren)
+
+  // If we have rest arguments, they must be additional children
+  if (restChildren.length > 0) {
+    if (isChildrenNotAttributes) {
+      // tagName is name, attrsOrChildren is first child, restChildren are more children
+      return {
+        name: tagName,
+        children: [attrsOrChildren, ...restChildren],
+      }
+    } else {
+      // tagName is name, attrsOrChildren is attributes, restChildren are children
+      return {
+        name: tagName,
+        attributes: attrsOrChildren,
+        children: restChildren,
+      }
+    }
+  }
+
+  // Original two-argument logic
+  if (isChildrenNotAttributes) {
     return {
-      name,
-      children: children,
+      name: tagName,
+      children: attrsOrChildren,
     }
   }
-  const name = a
-  const attributes = b
-  const children = typeof c === "number" ? c : c || []
+
+  // attrsOrChildren is attributes, no children provided
   return {
-    name,
-    children,
-    attributes,
+    name: tagName,
+    children: [],
+    attributes: attrsOrChildren,
   }
 }
 
@@ -578,7 +668,7 @@ function css(inputs) {
   }
 }
 
-function occurences(input, string) {
+function occurrences(input, string) {
   if (string.length <= 0) {
     return input.length + 1
   }
@@ -599,8 +689,8 @@ function occurences(input, string) {
 }
 
 const validateCSS = (content, character1, character2) => {
-  const count1 = occurences(content, character1)
-  const count2 = occurences(content, character2)
+  const count1 = occurrences(content, character1)
+  const count2 = occurrences(content, character2)
   if (count1 !== count2) {
     return {
       valid: false,
@@ -632,7 +722,7 @@ css.load = function (path) {
   const content = readFile(file, "utf8")
   const { valid, message } = isCSSValid(content)
   if (!valid) {
-    throw new Error(`CSSError: invalid CSS for path "${file}": ${message}`)
+    throw new CSSError(`invalid CSS for path "${file}": ${message}`)
   }
   return css`
     ${content}
@@ -689,7 +779,10 @@ js.load = function (path, options = {}) {
   return { js: tag("script", attributes, content) }
 }
 
-const node = (name) => (options, children) => tag(name, options, children)
+const node =
+  (name) =>
+  (options, ...children) =>
+    tag(name, options, ...children)
 const Doctype = node("!DOCTYPE html")
 
 const nodes = [
@@ -864,9 +957,7 @@ function base64({ content, path }) {
 nodes.Img.load = function (path) {
   const type = extension(path)
   if (!ALLOWED_IMAGE_EXTENSIONS.includes(type)) {
-    throw new Error(
-      `ImageError: unsupported image type "${type}" for path "${path}"`
-    )
+    throw new ImageError(`unsupported image type "${type}" for path "${path}"`)
   }
   const content = readFile(path, "base64")
   return (options) => {
@@ -919,9 +1010,7 @@ const sanitizeSVG = (content) => {
 nodes.Svg.load = function (path, options = {}) {
   const type = extension(path)
   if (type !== "svg") {
-    throw new Error(
-      `SVGError: unsupported SVG type "${type}" for path "${path}"`
-    )
+    throw new SVGError(`unsupported SVG type "${type}" for path "${path}"`)
   }
   let content = readFile(path, "utf8")
   if (options.sanitize !== false) {
@@ -961,15 +1050,29 @@ const json = {
     try {
       return JSON.parse(content)
     } catch (exception) {
-      throw new Error(
-        `JSONError: cannot parse file "${file}": ${exception.message}`
-      )
+      throw new JSONError(`cannot parse file "${file}": ${exception.message}`)
     }
   },
 }
 
 function i18n(translations) {
   return function translate(language, key) {
+    if (key === undefined) {
+      throw new TranslationError("key is undefined")
+    }
+    if (language === undefined) {
+      throw new TranslationError("language is undefined")
+    }
+    if (translations[key] === undefined) {
+      throw new TranslationError(
+        `translation [${key}][${language}] is undefined`,
+      )
+    }
+    if (translations[key][language] === undefined) {
+      throw new TranslationError(
+        `translation [${key}][${language}] is undefined`,
+      )
+    }
     return translations[key][language]
   }
 }
@@ -988,14 +1091,14 @@ i18n.load = function (path, options = {}) {
 
   return function translate(language, key) {
     if (!language) {
-      throw new Error(`TranslationError: language is undefined`)
+      throw new TranslationError(`language is undefined`)
     }
     if (!key) {
-      throw new Error(`TranslationError: key is undefined`)
+      throw new TranslationError(`key is undefined`)
     }
     if (!data[key] || !data[key][language]) {
-      throw new Error(
-        `TranslationError: translation [${key}][${language}] is undefined`
+      throw new TranslationError(
+        `translation [${key}][${language}] is undefined`,
       )
     }
     return data[key][language]
@@ -1009,20 +1112,20 @@ function component(fn, { styles, i18n, scripts } = {}) {
     }
     if (i18n) {
       if (!a || !a.language) {
-        throw new Error(
-          `TranslationError: language is undefined for component:\n${fn.toString()}`
+        throw new TranslationError(
+          `language is undefined for component:\n${fn.toString()}`,
         )
       }
       const { language } = a
       function translate(key) {
         if (!key) {
-          throw new Error(
-            `TranslationError: key is undefined for component:\n${fn.toString()}`
+          throw new TranslationError(
+            `key is undefined for component:\n${fn.toString()}`,
           )
         }
         if (!i18n[key] || !i18n[key][language]) {
-          throw new Error(
-            `TranslationError: translation [${key}][${language}] is undefined for component:\n${fn.toString()}`
+          throw new TranslationError(
+            `translation [${key}][${language}] is undefined for component:\n${fn.toString()}`,
           )
         }
         const translation = i18n[key][language]
@@ -1038,11 +1141,27 @@ function component(fn, { styles, i18n, scripts } = {}) {
 
     if (styles) {
       const data = Array.isArray(styles) ? styles : [styles]
+      data.forEach((style, index) => {
+        if (!style || typeof style !== "object" || !style.css) {
+          throw new ComponentError(
+            `Invalid style object at index ${index}: missing .css property. ` +
+              `Styles must be created using the css\`...\` template tag or css.load() function.`,
+          )
+        }
+      })
       nodes = nodes.concat(data.map((style) => style.css))
     }
 
     if (scripts) {
       const data = Array.isArray(scripts) ? scripts : [scripts]
+      data.forEach((script, index) => {
+        if (!script || typeof script !== "object" || !script.js) {
+          throw new ComponentError(
+            `Invalid script object at index ${index}: missing .js property. ` +
+              `Scripts must be created using the js\`...\` template tag or js.load() function.`,
+          )
+        }
+      })
       nodes = nodes.concat(data.map((script) => script.js))
     }
 
@@ -1062,5 +1181,13 @@ module.exports = {
   json,
   tag,
   i18n,
+  TranslationError,
+  ComponentError,
+  FileError,
+  RawError,
+  CSSError,
+  ImageError,
+  SVGError,
+  JSONError,
   ...nodes,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "types": "index.d.ts",
@@ -47,12 +47,12 @@
   "homepage": "https://github.com/buxlabs/boxwood#readme",
   "devDependencies": {
     "benchmark": "2.1.4",
-    "c8": "^10.1.3",
+    "c8": "^11.0.0",
     "express": "^5.2.1",
     "handlebars": "^4.7.8",
-    "jsdom": "^27.2.0",
+    "jsdom": "^28.1.0",
     "mustache": "^4.2.0",
-    "underscore": "^1.13.7"
+    "underscore": "^1.13.8"
   },
   "standard": {
     "ignore": [
@@ -62,7 +62,7 @@
     ]
   },
   "dependencies": {
-    "css-tree": "^3.1.0"
+    "css-tree": "^3.2.1"
   },
   "prettier": {
     "semi": false

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/markdown/index.js

@@ -11,29 +11,31 @@ function Markdown(params, children) {
     return lines.map((line) => {
       if (line.startsWith("# ")) {
         const text = line.substring(2)
-        return H1(text)
+        return H1(params, text)
       } else if (line.startsWith("## ")) {
         const text = line.substring(3)
-        return H2(text)
+        return H2(params, text)
       } else if (line.startsWith("### ")) {
         const text = line.substring(4)
-        return H3(text)
+        return H3(params, text)
       } else if (line.startsWith("#### ")) {
         const text = line.substring(5)
-        return H4(text)
+        return H4(params, text)
       } else if (line.startsWith("##### ")) {
         const text = line.substring(6)
-        return H5(text)
+        return H5(params, text)
       } else if (line.startsWith("###### ")) {
         const text = line.substring(7)
-        return H6(text)
+        return H6(params, text)
       } else if (line.startsWith("> ")) {
         const text = line.substring(2)
-        return Blockquote(text)
+        return Blockquote(params, text)
       }
 
-      return P(line)
+      return P(params, line)
     })
+  } else {
+    return null
   }
 }
 

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,
   ]
 }