boxwood 0.75.0 → 0.77.0

package/README.md

@@ -56,7 +56,7 @@ const layout = require("./layout")
 const banner = require("./banner")
 
 module.exports = () => {
-  return layout([
+  return layout({ language: "en" }, [
     banner({
       title: "Hello, world!",
       description: "Lorem ipsum dolor sit amet",
@@ -67,22 +67,24 @@ module.exports = () => {
 
 ```js
 // example/layout/index.js
-
-const { component, css, html, head, body } = require("boxwood")
+const { component, css, html, body } = require("boxwood")
 const head = require("./head")
 
 const styles = css.load(__dirname)
 
 module.exports = component(
-  (children) => {
-    return html([head(), body({ className: styles.layout }, children)])
+  ({ language }, children) => {
+    return html({ lang: language }, [
+      head(),
+      body({ className: styles.layout }, children),
+    ])
   },
   { styles }
 )
 ```
 
 ```js
-// example/head/index.js
+// example/layout/head/index.js
 const { head, title } = require("boxwood")
 
 module.exports = () => {
@@ -113,20 +115,22 @@ 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>"))
 })
 ```
 
+You can check the `test` dir for more examples.
+
 ## Maintainers
 
 [@emilos](https://github.com/emilos)

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)
@@ -47,7 +46,7 @@ async function compile(path) {
         if (Array.isArray(node)) {
           node.forEach(walk)
         } else if (Array.isArray(node.children)) {
-          node.children.filter(Boolean).forEach(walk)
+          node.children.forEach(walk)
         }
       }
       walk(tree)
@@ -175,24 +174,27 @@ const isUnescapedTag = (name) => {
 }
 
 const render = (input, escape = true) => {
-  if (input.ignore) {
+  if (
+    typeof input === "undefined" ||
+    typeof input === "boolean" ||
+    input === null ||
+    input.ignore
+  ) {
     return ""
   }
-  if (Array.isArray(input)) {
-    return input
-      .filter(Boolean)
-      .map((input) => render(input))
-      .join("")
-  }
   if (typeof input === "number") {
     return input.toString()
   }
   if (typeof input === "string") {
-    return escape ? escapeHTML(input) : input
+    if (escape) {
+      return escapeHTML(input)
+    }
+    return input
   }
-  if (input.name === "fragment") {
-    return render(input.children)
+  if (Array.isArray(input)) {
+    return input.map((input) => render(input)).join("")
   }
+
   if (input.name === "raw") {
     return render(input.children, false)
   }
@@ -202,32 +204,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 +488,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 +505,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`)
     }
-    const translation = data[key][language]
-    if (!translation) {
+    if (!key) {
+      throw new Error(`TranslationError: key is undefined`)
+    }
+    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 +528,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 +554,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 +576,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.77.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"
   }
 }

package/benchmark/fixtures/basic/boxwood.js

@@ -1,3 +0,0 @@
-module.exports = function () {
-  return 'foo'
-}

package/benchmark/fixtures/basic/data.json

@@ -1 +0,0 @@
-{}

package/benchmark/fixtures/basic/handlebars.hbs

@@ -1 +0,0 @@
-foo

package/benchmark/fixtures/basic/lodash.ejs

@@ -1 +0,0 @@
-foo

package/benchmark/fixtures/basic/mustache.mst

@@ -1 +0,0 @@
-foo

package/benchmark/fixtures/basic/underscore.ejs

@@ -1 +0,0 @@
-foo

package/benchmark/fixtures/basic/vanilla.js

@@ -1,3 +0,0 @@
-module.exports = function () {
-  return 'foo'
-}

package/benchmark/fixtures/div/boxwood.js

@@ -1,5 +0,0 @@
-const { div } = require("../../..")
-
-module.exports = function () {
-  return div("foo")
-}

package/benchmark/fixtures/div/data.json

@@ -1 +0,0 @@
-{}

package/benchmark/fixtures/div/handlebars.hbs

@@ -1 +0,0 @@
-<div>foo</div>

package/benchmark/fixtures/div/lodash.ejs

@@ -1 +0,0 @@
-<div>foo</div>

package/benchmark/fixtures/div/mustache.mst

@@ -1 +0,0 @@
-<div>foo</div>

package/benchmark/fixtures/div/underscore.ejs

@@ -1 +0,0 @@
-<div>foo</div>

package/benchmark/fixtures/div/vanilla.js

@@ -1,4 +0,0 @@
-
-module.exports = function () {
-  return '<div>foo</div>'
-}

package/benchmark/fixtures/escape/boxwood.js

@@ -1,3 +0,0 @@
-module.exports = function ({ foo }) {
-  return foo
-}

package/benchmark/fixtures/escape/data.json

@@ -1,3 +0,0 @@
-{
-  "foo": "<img>"
-}

package/benchmark/fixtures/escape/handlebars.hbs

@@ -1 +0,0 @@
-{{foo}}

package/benchmark/fixtures/escape/lodash.ejs

@@ -1 +0,0 @@
-<%- foo %>

package/benchmark/fixtures/escape/mustache.mst

@@ -1 +0,0 @@
-{{foo}}

package/benchmark/fixtures/escape/underscore.ejs

@@ -1 +0,0 @@
-<%- foo %>

package/benchmark/fixtures/escape/vanilla.js

@@ -1,5 +0,0 @@
-const { escape } = require("../../..")
-
-module.exports = function ({ foo }) {
-  return escape(foo)
-}

package/benchmark/fixtures/friends/boxwood.js

@@ -1,56 +0,0 @@
-const {
-  fragment,
-  doctype,
-  html,
-  head,
-  body,
-  meta,
-  img,
-  title,
-  div,
-  ul,
-  li,
-  a,
-} = require("../../..")
-
-module.exports = function ({ friends }) {
-  return fragment([
-    doctype(),
-    html({ lang: "en" }, [
-      head([meta({ charset: "UTF-8" }), title("Friends")]),
-      body([
-        div(
-          { class: "friends" },
-          friends.map((friend) => {
-            return div({ class: "friend" }, [
-              ul([
-                li(`Name: ${friend.name}`),
-                li(`Balance: ${friend.balance}`),
-                li(`Age: ${friend.age}`),
-                li(`Address: ${friend.address}`),
-                li(["Image: ", img({ src: friend.picture })]),
-                li(`Company: ${friend.company}`),
-                li([
-                  "Email: ",
-                  a({ href: `mailto:${friend.email}` }, friend.email),
-                ]),
-                li(`About: ${friend.about}`),
-                friend.tags.length &&
-                  li(["Tags: ", ul(friend.tags.map((tag) => li(tag)))]),
-                friend.friends.length &&
-                  li([
-                    "Friends: ",
-                    ul(
-                      friend.friends.map((friend) =>
-                        li(`${friend.name} (${friend.id})`)
-                      )
-                    ),
-                  ]),
-              ]),
-            ])
-          })
-        ),
-      ]),
-    ]),
-  ])
-}

package/benchmark/fixtures/friends/data.json

@@ -1,30 +0,0 @@
-{
-  "friends": [
-    {
-      "name": "Jan Kowalski",
-      "id": 1,
-      "balance": "100 PLN",
-      "age": 50,
-      "address": "Warszawa",
-      "picture": "jankowalski.png",
-      "email": "jan@kowalski.pl",
-      "about": "I like fishing",
-      "company": "PKO",
-      "tags": ["fisherman"],
-      "friends": [
-        {
-          "name": "Piotr Nowak",
-          "id": 2,
-          "balance": "80 PLN",
-          "age": 40,
-          "address": "Kraków",
-          "picture": "piotrnowak.png",
-          "email": "piotr@nowak.pl",
-          "about": "I like cooking",
-          "company": "ING",
-          "tags": ["chef"]
-        }
-      ]
-    }
-  ]
-}

package/benchmark/fixtures/friends/handlebars.hbs

@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Friends</title>
-</head>
-<body>
-  <div class="friends">
-    {{#each friends}}
-      <div class="friend">
-        <ul>
-          <li>Name: {{this.name}}</li>
-          <li>Balance: {{this.balance}}</li>
-          <li>Age: {{this.age}}</li>
-          <li>Address: {{this.address}}</li>
-          <li>Image: <img src="{{this.picture}}"></li>
-          <li>Company: {{this.company}}</li>
-          <li>Email: <a href="mailto:{{this.email}}">{{this.email}}</a></li>
-          <li>About: {{this.about}}</li>
-          {{#if tags.length}}
-            <li>
-              Tags:
-              <ul>
-                {{#each tags}}
-                  <li>{{this}}</li>
-                {{/each}}
-              </ul>
-            </li>
-          {{/if}}
-          {{#if friends.length}}
-            <li>
-              Friends:
-              <ul>
-                {{#each friends}}
-                  <li>{{this.name}} ({{this.id}})</li>
-                {{/each}}
-              </ul>
-            </li>
-          {{/if}}
-        </ul>
-      </div>
-    {{/each}}
-  </div>
-</body>
-</html>

package/benchmark/fixtures/friends/lodash.ejs

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Friends</title>
-</head>
-<body>
-  <div class="friends">
-    <% for (var i = 0, ilen = friends.length; i < ilen; i += 1) { %>
-      <% var friend = friends[i]; %>
-      <div class="friend">
-        <ul>
-          <li>Name: <%- friend.name %></li>
-          <li>Balance: <%- friend.balance %></li>
-          <li>Age: <%- friend.age %></li>
-          <li>Address: <%- friend.address %></li>
-          <li>Image: <img src="<%- friend.picture %>"></li>
-          <li>Company: <%- friend.company %></li>
-          <li>Email: <a href="mailto:<%- friend.email %>"><%- friend.email %></a></li>
-          <li>About: <%- friend.about %></li>
-          <% if (friend.tags.length) { %>
-            <li>
-              Tags:
-              <ul>
-                <% for (var j = 0, jlen = friend.tags.length; j < jlen; j += 1) { %>
-                  <% var tag = friend.tags[i]; %>
-                  <li><%- tag %></li>
-                <% } %>
-              </ul>
-            </li>
-          <% } %>
-          <% if (friend.friends.length) { %>
-            <li>
-              Friends:
-              <ul>
-                <% for (var k = 0, klen = friend.friends.length; k < klen; k += 1) { %>
-                  <% var fr = friend.friends[i] %>
-                  <li><%- fr.name %> (<%- fr.id %>)</li>
-                <% } %>
-              </ul>
-            </li>
-          <% } %>
-        </ul>
-      </div>
-    <% } %>
-  </div>
-</body>
-</html>

package/benchmark/fixtures/friends/mustache.mst

@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Friends</title>
-</head>
-<body>
-  <div class="friends">
-    {{#friends}}
-      <div class="friend">
-        <ul>
-          <li>Name: {{name}}</li>
-          <li>Balance: {{balance}}</li>
-          <li>Age: {{age}}</li>
-          <li>Address: {{address}}</li>
-          <li>Image: <img src="{{picture}}"></li>
-          <li>Company: {{company}}</li>
-          <li>Email: <a href="mailto:{{email}}">{{email}}</a></li>
-          <li>About: {{about}}</li>
-          {{#tags.length}}
-            <li>
-              Tags:
-              <ul>
-                {{#tags}}
-                  <li>{{.}}</li>
-                {{/tags}}
-              </ul>
-            </li>
-          {{/tags.length}}
-          {{#friends.length}}
-            <li>
-              Friends:
-              <ul>
-                {{#friends}}
-                  <li>{{name}} ({{id}})</li>
-                {{/friends}}
-              </ul>
-            </li>
-          {{/friends.length}}
-        </ul>
-      </div>
-    {{/friends}}
-  </div>
-</body>
-</html>

package/benchmark/fixtures/friends/underscore.ejs

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Friends</title>
-</head>
-<body>
-  <div class="friends">
-    <% for (var i = 0, ilen = friends.length; i < ilen; i += 1) { %>
-      <% var friend = friends[i]; %>
-      <div class="friend">
-        <ul>
-          <li>Name: <%- friend.name %></li>
-          <li>Balance: <%- friend.balance %></li>
-          <li>Age: <%- friend.age %></li>
-          <li>Address: <%- friend.address %></li>
-          <li>Image: <img src="<%- friend.picture %>"></li>
-          <li>Company: <%- friend.company %></li>
-          <li>Email: <a href="mailto:<%- friend.email %>"><%- friend.email %></a></li>
-          <li>About: <%- friend.about %></li>
-          <% if (friend.tags.length) { %>
-            <li>
-              Tags:
-              <ul>
-                <% for (var j = 0, jlen = friend.tags.length; j < jlen; j += 1) { %>
-                  <% var tag = friend.tags[i]; %>
-                  <li><%- tag %></li>
-                <% } %>
-              </ul>
-            </li>
-          <% } %>
-          <% if (friend.friends.length) { %>
-            <li>
-              Friends:
-              <ul>
-                <% for (var k = 0, klen = friend.friends.length; k < klen; k += 1) { %>
-                  <% var fr = friend.friends[i] %>
-                  <li><%- fr.name %> (<%- fr.id %>)</li>
-                <% } %>
-              </ul>
-            </li>
-          <% } %>
-        </ul>
-      </div>
-    <% } %>
-  </div>
-</body>
-</html>