boxwood

0.78.0 • Public • Published

boxwood

npm build

Server side templating engine written in JavaScript

boxwood was created to achieve the following design goals:

  1. templates can be split into components
  2. css is hashed per component
  3. css is automatically minified
  4. critical css is inlined
  5. templates can import other dependencies
  6. inline images or svgs
  7. i18n support
  8. server side
  9. good for seo
  10. small (1 file, 700 LOC~)
  11. easy to start, familiar syntax
  12. easy to test

The template starts with a standard js file, which builds a tree of nodes, that get rendered to html.

Table of Contents

Install

npm install boxwood

Usage

const { compile } = require("boxwood")
const { join } = require("path")
// ...
const path = join(__dirname, "index.js")
const { template } = await compile(path)
// ...
const html = template({ foo: "bar" })
console.log(html)

You can use express-boxwood for express.

Syntax

// example/index.js
const layout = require("./layout")
const banner = require("./banner")

module.exports = () => {
  return layout({ language: "en" }, [
    banner({
      title: "Hello, world!",
      description: "Lorem ipsum dolor sit amet",
    }),
  ])
}
// example/layout/index.js
const { component, css, doctype, html, body } = require("boxwood")
const head = require("./head")

const styles = css.load(__dirname)

module.exports = component(
  ({ language }, children) => {
    return [
      doctype(),
      html({ lang: language }, [
        head(),
        body({ className: styles.layout }, children),
      ]),
    ]
  },
  { styles }
)
// example/layout/head/index.js
const { head, title } = require("boxwood")

module.exports = () => {
  return head([title("example")])
}
// example/banner/index.js
const { component, css, h1, p, section } = require("boxwood")

const styles = css.load(__dirname)

module.exports = component(
  ({ title, description }) => {
    return section({ className: styles.banner }, [
      h1(title),
      description && p(description),
    ])
  },
  { styles }
)
// example/banner/index.test.js
const test = require("node:test")
const assert = require("node:assert")
const { compile } = require("boxwood")

test("banner renders a title", async () => {
  const { template } = await compile(__dirname)
  const html = template({ title: "foo" })
  assert(html.includes("<h1>foo</h1>"))
})

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>"))
})

You can check the test dir for more examples.

Maintainers

@emilos

Contributing

All contributions are highly appreciated. Please feel free to open new issues and send PRs.

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i boxwood

Weekly Downloads

48

Version

0.78.0

License

MIT

Unpacked Size

18.2 kB

Total Files

4

Last publish

Collaborators

  • buxlabs-dev
  • emilos