boxwood 0.75.0 → 0.76.0

package/README.md

@@ -113,17 +113,17 @@ const test = require("node:test")
 const assert = require("node:assert")
 const { compile } = require("boxwood")
 
-test("banner renders a title", () => {
+test("banner renders a title", async () => {
   const { template } = await compile(__dirname)
-  const html = template({ title: 'foo' })
-  assert(html.includes('<h1>foo</h1>'))
+  const html = template({ title: "foo" })
+  assert(html.includes("<h1>foo</h1>"))
 })
 
-test('banner renders an optional description', () => {
+test("banner renders an optional description", async () => {
   const { template } = await compile(__dirname)
-  const html = template({ title: 'foo', description: 'bar' })
-  assert(html.includes('<h1>foo</h1>'))
-  assert(html.includes('<p>bar</p>'))
+  const html = template({ title: "foo", description: "bar" })
+  assert(html.includes("<h1>foo</h1>"))
+  assert(html.includes("<p>bar</p>"))
 })
 ```
 

package/benchmark/fixtures/friends/boxwood.js

@@ -1,5 +1,4 @@
 const {
-  fragment,
   doctype,
   html,
   head,
@@ -14,7 +13,7 @@ const {
 } = require("../../..")
 
 module.exports = function ({ friends }) {
-  return fragment([
+  return [
     doctype(),
     html({ lang: "en" }, [
       head([meta({ charset: "UTF-8" }), title("Friends")]),
@@ -52,5 +51,5 @@ module.exports = function ({ friends }) {
         ),
       ]),
     ]),
-  ])
+  ]
 }

package/benchmark/fixtures/if/boxwood.js

@@ -1,4 +1,4 @@
-const { fragment, div, span } = require("../../..")
+const { div, span } = require("../../..")
 
 function description(account) {
   if (account.status === "closed") {
@@ -17,5 +17,5 @@ function description(account) {
 }
 
 module.exports = function ({ accounts }) {
-  return fragment(accounts.map((account) => div(description(account))))
+  return accounts.map((account) => div(description(account)))
 }

package/benchmark/fixtures/search/boxwood.js

@@ -1,18 +1,16 @@
-const { fragment, div, ul, li, p } = require("../../..")
+const { div, ul, li, p } = require("../../..")
 
 module.exports = function ({ count, results }) {
   return div({ class: "search" }, [
     div({ class: "loader" }, "Loading..."),
     div({ class: "results" }, [
       p(`${count} results`),
-      ...results.map((result) =>
-        fragment([
-          div({ class: "title" }, result.title),
-          div({ class: "description" }, result.description),
-          result.featured && div({ class: "highlight" }, "Featured!"),
-          result.sizes.length && ul(result.sizes.map((size) => li(size))),
-        ])
-      ),
+      ...results.map((result) => [
+        div({ class: "title" }, result.title),
+        div({ class: "description" }, result.description),
+        result.featured && div({ class: "highlight" }, "Featured!"),
+        result.sizes.length && ul(result.sizes.map((size) => li(size))),
+      ]),
     ]),
   ])
 }

package/benchmark/fixtures/todos/boxwood.js

@@ -1,9 +1,9 @@
-const { h1, h2, ul, li, fragment } = require("../../..")
+const { h1, h2, ul, li } = require("../../..")
 
 module.exports = function ({ title, subtitle, todos }) {
-  return fragment([
+  return [
     h1(title),
     h2(subtitle),
     ul(todos.map((todo) => li(todo.description))),
-  ])
+  ]
 }

package/index.js

@@ -2,7 +2,6 @@ const { join } = require("path")
 const { readFileSync } = require("fs")
 const csstree = require("css-tree")
 const toHash = require("string-hash")
-const YAML = require("yaml")
 
 async function compile(path) {
   const fn = require(path)
@@ -175,7 +174,7 @@ const isUnescapedTag = (name) => {
 }
 
 const render = (input, escape = true) => {
-  if (input.ignore) {
+  if (!input || input.ignore) {
     return ""
   }
   if (Array.isArray(input)) {
@@ -188,10 +187,10 @@ const render = (input, escape = true) => {
     return input.toString()
   }
   if (typeof input === "string") {
-    return escape ? escapeHTML(input) : input
-  }
-  if (input.name === "fragment") {
-    return render(input.children)
+    if (escape) {
+      return escapeHTML(input)
+    }
+    return input
   }
   if (input.name === "raw") {
     return render(input.children, false)
@@ -202,32 +201,14 @@ const render = (input, escape = true) => {
     }
     return `<${input.name}>`
   }
-  if (input.attributes && input.children) {
-    return (
-      `<${input.name} ` +
-      attributes(input.attributes) +
-      ">" +
-      render(input.children, isUnescapedTag(input.name)) +
-      `</${input.name}>`
-    )
-  }
-  if (input.attributes) {
-    return (
-      `<${input.name} ` + attributes(input.attributes) + `></${input.name}>`
-    )
-  }
-  if (input.children) {
-    return (
-      `<${input.name}>` +
-      render(input.children, isUnescapedTag(input.name)) +
-      `</${input.name}>`
-    )
-  }
-  return `<${input.name}></${input.name}>`
-}
 
-const fragment = (children) => {
-  return { name: "fragment", children }
+  return (
+    `<${input.name}` +
+    (input.attributes ? " " + attributes(input.attributes) : "") +
+    ">" +
+    render(input.children, isUnescapedTag(input.name)) +
+    `</${input.name}>`
+  )
 }
 
 const raw = (children) => {
@@ -504,15 +485,6 @@ function classes() {
   return array.join(" ")
 }
 
-const yaml = {
-  load() {
-    const path = join(...arguments)
-    const file = path.endsWith(".yaml") ? path : join(path, "index.yaml")
-    const content = readFileSync(file, "utf8")
-    return YAML.parse(content)
-  },
-}
-
 const json = {
   load() {
     const path = join(...arguments)
@@ -530,23 +502,20 @@ function i18n(translations) {
 
 i18n.load = function () {
   const path = join(...arguments)
-  const data = path.endsWith(".yaml") ? yaml.load(path) : json.load(path)
+  const data = json.load(path)
   return function translate(language, key) {
-    if (!key) {
-      throw new Error(`TranslationError[${key}][${language}]: key is undefined`)
-    }
     if (!language) {
-      throw new Error(
-        `TranslationError[${key}][${language}]: language is undefined`
-      )
+      throw new Error(`TranslationError: language is undefined`)
+    }
+    if (!key) {
+      throw new Error(`TranslationError: key is undefined`)
     }
-    const translation = data[key][language]
-    if (!translation) {
+    if (!data[key] || !data[key][language]) {
       throw new Error(
-        `TranslationError[${key}][${language}]: translation is undefined`
+        `TranslationError: translation [${key}][${language}] is undefined`
       )
     }
-    return translation
+    return data[key][language]
   }
 }
 
@@ -556,24 +525,24 @@ function component(fn, { styles, i18n, scripts } = {}) {
       return fn({}, a)
     }
     if (i18n) {
+      if (!a || !a.language) {
+        throw new Error(
+          `TranslationError: language is undefined for component:\n${fn.toString()}`
+        )
+      }
       const { language } = a
       function translate(key) {
         if (!key) {
           throw new Error(
-            `TranslationError[${key}][${language}]: key is undefined for component:\n${fn.toString()}`
+            `TranslationError: key is undefined for component:\n${fn.toString()}`
           )
         }
-        if (!language) {
+        if (!i18n[key] || !i18n[key][language]) {
           throw new Error(
-            `TranslationError[${key}][${language}]: language is undefined for component:\n${fn.toString()}`
+            `TranslationError: translation [${key}][${language}] is undefined for component:\n${fn.toString()}`
           )
         }
         const translation = i18n[key][language]
-        if (!translation) {
-          throw new Error(
-            `TranslationError[${key}][${language}]: translation is undefined for component:\n${fn.toString()}`
-          )
-        }
         return translation
       }
       return fn({ ...a, translate }, b || [])
@@ -582,25 +551,19 @@ function component(fn, { styles, i18n, scripts } = {}) {
   }
   return function (a, b) {
     const tree = execute(a, b)
-    if (styles && scripts) {
-      if (Array.isArray(tree)) {
-        return tree.concat(styles.css, scripts.js)
-      }
-      return [tree, styles.css, scripts.js]
-    }
+    let nodes = Array.isArray(tree) ? tree : [tree]
+
     if (styles) {
-      if (Array.isArray(tree)) {
-        return tree.concat(styles.css)
-      }
-      return [tree, styles.css]
+      const data = Array.isArray(styles) ? styles : [styles]
+      nodes = nodes.concat(data.map((style) => style.css))
     }
+
     if (scripts) {
-      if (Array.isArray(tree)) {
-        return tree.concat(scripts.js)
-      }
-      return [tree, scripts.js]
+      const data = Array.isArray(scripts) ? scripts : [scripts]
+      nodes = nodes.concat(data.map((script) => script.js))
     }
-    return tree
+
+    return nodes
   }
 }
 
@@ -610,11 +573,9 @@ module.exports = {
   classes,
   doctype,
   escape: escapeHTML,
-  fragment,
   raw,
   css,
   js,
-  yaml,
   json,
   tag,
   i18n,

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "boxwood",
-  "version": "0.75.0",
+  "version": "0.76.0",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "scripts": {
-    "test": "node --test",
+    "test": "node --test --test-reporter=dot",
+    "test:debug": "node --test --test-reporter=spec",
     "coverage": "c8 npm test",
     "benchmark": "node --test benchmark/index.js",
     "watch": "npm test -- --watch",
@@ -62,7 +63,6 @@
   },
   "dependencies": {
     "css-tree": "^2.3.1",
-    "string-hash": "^1.1.3",
-    "yaml": "^2.4.2"
+    "string-hash": "^1.1.3"
   }
 }