boxwood 1.1.0 → 2.0.0

package/index.js

@@ -5,7 +5,8 @@ const csstree = require("css-tree")
 function compile(path) {
   const fn = require(path)
   return {
-    template() {
+    template(options) {
+      const nonce = options && options.nonce
       const tree = fn(...arguments)
       const nodes = {}
       const styles = []
@@ -65,24 +66,36 @@ function compile(path) {
       walk(tree)
       if (nodes.head) {
         if (styles.length > 0) {
-          nodes.head.children.push({
+          const styleNode = {
             name: "style",
             children: styles.join(""),
-          })
+          }
+          if (nonce) {
+            styleNode.attributes = { nonce }
+          }
+          nodes.head.children.push(styleNode)
         }
         if (scripts.head.length > 0) {
-          nodes.head.children.push({
+          const scriptNode = {
             name: "script",
             children: scripts.head.join(""),
-          })
+          }
+          if (nonce) {
+            scriptNode.attributes = { nonce }
+          }
+          nodes.head.children.push(scriptNode)
         }
       }
       if (nodes.body) {
         if (scripts.body.length > 0) {
-          nodes.body.children.push({
+          const scriptNode = {
             name: "script",
             children: scripts.body.join(""),
-          })
+          }
+          if (nonce) {
+            scriptNode.attributes = { nonce }
+          }
+          nodes.body.children.push(scriptNode)
         }
       }
       return render(tree)
@@ -90,20 +103,61 @@ function compile(path) {
   }
 }
 
-const ENTITIES = {
-  "&": "&",
-  "<": "&lt;",
-  ">": "&gt;",
-  "'": "&#39;",
-  '"': "&quot;",
-}
+const escapeHTML = (string) => {
+  // Convert to string to handle non-string inputs safely
+  string = String(string)
 
-const REGEXP = /[&<>'"]/g
+  // Fast path: if no special characters, return as-is
+  if (
+    !string.includes("&") &&
+    !string.includes("<") &&
+    !string.includes(">") &&
+    !string.includes("'") &&
+    !string.includes('"')
+  ) {
+    return string
+  }
 
-const escapeHTML = (string) => {
-  return String.prototype.replace.call(string, REGEXP, function (character) {
-    return ENTITIES[character]
-  })
+  const len = string.length
+  let result = ""
+  let lastIndex = 0
+
+  for (let i = 0; i < len; i++) {
+    const char = string[i]
+    let replacement
+
+    switch (char) {
+      case "&":
+        replacement = "&amp;"
+        break
+      case "<":
+        replacement = "&lt;"
+        break
+      case ">":
+        replacement = "&gt;"
+        break
+      case "'":
+        replacement = "&#39;"
+        break
+      case '"':
+        replacement = "&quot;"
+        break
+      default:
+        continue
+    }
+
+    if (lastIndex !== i) {
+      result += string.slice(lastIndex, i)
+    }
+    result += replacement
+    lastIndex = i + 1
+  }
+
+  if (lastIndex !== len) {
+    result += string.slice(lastIndex)
+  }
+
+  return result
 }
 
 const normalizePath = (path) => path.replace(/\\/g, "/").replace(/\/+$/, "")
@@ -186,7 +240,7 @@ function readFile(path, encoding) {
   }
 }
 
-const BOOLEAN_ATTRIBUTES = [
+const BOOLEAN_ATTRIBUTES = new Set([
   "async",
   "autofocus",
   "autoplay",
@@ -223,14 +277,16 @@ const BOOLEAN_ATTRIBUTES = [
   "sortable",
   "spellcheck",
   "translate",
-]
+])
 
 const ALIASES = {
   className: "class",
   htmlFor: "for",
 }
 
-const isKeyValid = (key) => /^[a-zA-Z0-9\-_]+$/.test(key)
+// Pre-compiled regex for better performance
+const KEY_VALIDATION_REGEX = /^[a-zA-Z0-9\-_]+$/
+const isKeyValid = (key) => KEY_VALIDATION_REGEX.test(key)
 
 const attributes = (options) => {
   if (!options) {
@@ -248,13 +304,13 @@ const attributes = (options) => {
       value === true ||
       Array.isArray(value)
     ) {
-      if (BOOLEAN_ATTRIBUTES.includes(key)) {
+      if (BOOLEAN_ATTRIBUTES.has(key)) {
         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) + '"')
+        result.push(`${name}="${escapeHTML(content)}"`)
       }
     } else if (key === "style" && typeof value === "object") {
       const styles = []
@@ -276,7 +332,7 @@ const attributes = (options) => {
   return result.join(" ")
 }
 
-const SELF_CLOSING_TAGS = [
+const SELF_CLOSING_TAGS = new Set([
   "area",
   "base",
   "br",
@@ -294,54 +350,60 @@ const SELF_CLOSING_TAGS = [
   "track",
   "wbr",
   "!DOCTYPE html",
-]
+])
 
-const isUnescapedTag = (name) => {
-  return !["script", "style", "template"].includes(name)
-}
+const UNESCAPED_TAGS = new Set(["script", "style", "template"])
 
 const render = (input, escape = true) => {
+  // Most common case: string (~50% of nodes)
+  if (typeof input === "string") {
+    return escape ? escapeHTML(input) : input
+  }
+
+  // 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])
+    }
+    return result
+  }
+
+  // Early exit for null/undefined/false/true
   if (
-    typeof input === "undefined" ||
-    typeof input === "boolean" ||
     input === null ||
-    input.ignore
+    input === undefined ||
+    input === false ||
+    input === true
   ) {
     return ""
   }
+
+  // Numbers (~5% of nodes)
   if (typeof input === "number") {
     return input.toString()
   }
-  if (typeof input === "string") {
-    if (escape) {
-      return escapeHTML(input)
-    }
-    return input
-  }
-  if (Array.isArray(input)) {
-    return input.map((input) => render(input)).join("")
+
+  // Objects (elements) - check ignore flag first
+  if (input.ignore) {
+    return ""
   }
 
   if (input.name === "raw") {
     return render(input.children, false)
   }
-  if (SELF_CLOSING_TAGS.includes(input.name)) {
-    if (input.attributes) {
-      return `<${input.name} ` + attributes(input.attributes) + ">"
-    }
-    return `<${input.name}>`
+
+  if (SELF_CLOSING_TAGS.has(input.name)) {
+    const attrs = input.attributes ? attributes(input.attributes) : ""
+    return attrs ? `<${input.name} ${attrs}>` : `<${input.name}>`
   }
 
-  const string = input.attributes ? attributes(input.attributes) : ""
-  const attrs = string ? " " + string : ""
+  const attrs = input.attributes ? attributes(input.attributes) : ""
+  const children = render(input.children, !UNESCAPED_TAGS.has(input.name))
 
-  return (
-    `<${input.name}` +
-    attrs +
-    ">" +
-    render(input.children, isUnescapedTag(input.name)) +
-    `</${input.name}>`
-  )
+  return attrs
+    ? `<${input.name} ${attrs}>${children}</${input.name}>`
+    : `<${input.name}>${children}</${input.name}>`
 }
 
 const raw = (children) => {
@@ -431,9 +493,14 @@ const tag = (a, b, c) => {
   }
 }
 
-let number = 1
-function sequence() {
-  return number++
+// DJB2 hash algorithm for CSS class names
+function hashDJB2(str) {
+  let hash = 5381
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash * 33) ^ str.charCodeAt(i)
+  }
+  // Convert to positive number and base36 for shorter string
+  return (hash >>> 0).toString(36)
 }
 
 function decamelize(string) {
@@ -475,12 +542,13 @@ function css(inputs) {
       result += input
     }
   }
-  const hash = sequence()
   const tree = csstree.parse(result)
   const classes = {}
 
   csstree.walk(tree, (node) => {
     if (node.type === "ClassSelector") {
+      // Generate hash based on the CSS content and class name
+      const hash = hashDJB2(result + node.name).slice(0, 6)
       const name = `${node.name}_${hash}`
       classes[node.name] = name
       node.name = name
@@ -493,9 +561,62 @@ function css(inputs) {
   }
 }
 
+function occurences(input, string) {
+  if (string.length <= 0) {
+    return input.length + 1
+  }
+
+  let count = 0
+  let position = 0
+  const step = string.length
+  while (true) {
+    position = input.indexOf(string, position)
+    if (position >= 0) {
+      count += 1
+      position += step
+    } else {
+      break
+    }
+  }
+  return count
+}
+
+const validateCSS = (content, character1, character2) => {
+  const count1 = occurences(content, character1)
+  const count2 = occurences(content, character2)
+  if (count1 !== count2) {
+    return {
+      valid: false,
+      message: `Mismatched count of ${character1} and ${character2}`,
+    }
+  }
+  return { valid: true }
+}
+
+const CSS_PAIRS = [
+  ["{", "}"],
+  ["(", ")"],
+  ["[", "]"],
+]
+
+function isCSSValid(content) {
+  for (const [left, right] of CSS_PAIRS) {
+    const { valid, message } = validateCSS(content, left, right)
+    if (!valid) {
+      return { valid, message: message }
+    }
+  }
+
+  return { valid: true }
+}
+
 css.load = function (path) {
   const file = path.endsWith(".css") ? path : join(path, "index.css")
   const content = readFile(file, "utf8")
+  const { valid, message } = isCSSValid(content)
+  if (!valid) {
+    throw new Error(`CSSError: invalid CSS for path "${file}": ${message}`)
+  }
   return css`
     ${content}
   `
@@ -552,12 +673,15 @@ js.load = function (path, options = {}) {
 }
 
 const node = (name) => (options, children) => tag(name, options, children)
-const doctype = node("!DOCTYPE html")
+const Doctype = node("!DOCTYPE html")
 
 const nodes = [
   "a",
   "abbr",
   "address",
+  "animate",
+  "animateMotion",
+  "animateTransform",
   "area",
   "article",
   "aside",
@@ -572,14 +696,18 @@ const nodes = [
   "button",
   "canvas",
   "caption",
+  "circle",
   "cite",
+  "clipPath",
   "code",
   "col",
   "colgroup",
   "data",
   "datalist",
   "dd",
+  "defs",
   "del",
+  "desc",
   "details",
   "dfn",
   "dialog",
@@ -587,12 +715,16 @@ const nodes = [
   "dl",
   "dt",
   "em",
+  "ellipse",
   "embed",
   "fieldset",
   "figcaption",
   "figure",
+  "filter",
   "footer",
+  "foreignObject",
   "form",
+  "g",
   "h1",
   "h2",
   "h3",
@@ -601,10 +733,12 @@ const nodes = [
   "h6",
   "head",
   "header",
+  "hgroup",
   "hr",
   "html",
   "i",
   "iframe",
+  "image",
   "img",
   "input",
   "ins",
@@ -612,11 +746,17 @@ const nodes = [
   "label",
   "legend",
   "li",
+  "line",
+  "linearGradient",
   "link",
   "main",
   "map",
   "mark",
+  "marker",
+  "mask",
+  "menu",
   "meta",
+  "metadata",
   "meter",
   "nav",
   "noscript",
@@ -627,10 +767,16 @@ const nodes = [
   "output",
   "p",
   "param",
+  "path",
+  "pattern",
   "picture",
+  "polygon",
+  "polyline",
   "pre",
   "progress",
   "q",
+  "radialGradient",
+  "rect",
   "rp",
   "rt",
   "ruby",
@@ -639,20 +785,27 @@ const nodes = [
   "script",
   "section",
   "select",
+  "set",
+  "slot",
   "small",
   "source",
   "span",
+  "stop",
   "strong",
   "style",
   "sub",
   "summary",
   "sup",
   "svg",
+  "switch",
+  "symbol",
   "table",
   "tbody",
   "td",
   "template",
+  "text",
   "textarea",
+  "textPath",
   "tfoot",
   "th",
   "thead",
@@ -660,13 +813,17 @@ const nodes = [
   "title",
   "tr",
   "track",
+  "tspan",
   "u",
   "ul",
+  "use",
   "var",
   "video",
+  "view",
   "wbr",
 ].reduce((result, name) => {
-  result[name] = node(name)
+  const pascalName = name.charAt(0).toUpperCase() + name.slice(1)
+  result[pascalName] = node(name)
   return result
 }, {})
 
@@ -687,7 +844,7 @@ function base64({ content, path }) {
   return `data:${media(path)};base64,${content}`
 }
 
-nodes.img.load = function (path) {
+nodes.Img.load = function (path) {
   const type = extension(path)
   if (!ALLOWED_IMAGE_EXTENSIONS.includes(type)) {
     throw new Error(
@@ -696,7 +853,7 @@ nodes.img.load = function (path) {
   }
   const content = readFile(path, "base64")
   return (options) => {
-    return nodes.img({ src: base64({ content, path }), ...options })
+    return nodes.Img({ src: base64({ content, path }), ...options })
   }
 }
 
@@ -742,7 +899,7 @@ const sanitizeSVG = (content) => {
  * Should not be used for user-generated content.
  */
 
-nodes.svg.load = function (path, options = {}) {
+nodes.Svg.load = function (path, options = {}) {
   const type = extension(path)
   if (type !== "svg") {
     throw new Error(
@@ -880,7 +1037,7 @@ module.exports = {
   compile,
   component,
   classes,
-  doctype,
+  Doctype,
   escape: escapeHTML,
   raw,
   css,

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "boxwood",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
+  "types": "index.d.ts",
   "scripts": {
     "test": "node --test --test-reporter=dot \"test/**/*.test.js\" \"test/**/*.spec.js\"",
     "test:debug": "node --test --test-reporter=spec \"test/**/*.test.js\" \"test/**/*.spec.js\"",