Socket
Socket
Sign inDemoInstall

@buxlabs/html-engine

Package Overview
Dependencies
19
Maintainers
3
Versions
35
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@buxlabs/html-engine

Compile HTML templates into JS


Version published
Maintainers
3
Weekly downloads
4
decreased by-55.56%

Weekly downloads

Readme

Source

html-engine

Compile HTML templates into JS

npm (scoped) Codeship Status for buxlabs/html-engine

REPL

Description

HTML Engine is a library designed to compile HTML templates into JS. It analyses the template and generates an optimal rendering function that can be used on the client and the server. The compilation process should ideally happen in a build step (for the client) or the output could be memoized after first usage (for the server).

The syntax of the template should be easy to read and write. There are two types of tags: curly and html tags.

Status: Alpha

Curly Tags

{name} is a curly tag

Curly tags can contain expressions, e.g. {1 + 2} is a valid tag. They can also contain additional modifiers like {name | capitalize}

HTML Tags

<if> is an html tag

HTML tags can contain additional attributes, e.g. <if limit is a number> is a valid tag. The attribute syntax follows the natural language principles.

Usage

npm install @buxlabs/html-engine

const { compile } = require('@buxlabs/html-engine')
const template = compile('<div>{foo}</div>')
assert(template({ foo: 'bar' }) === '<div>bar</div>')

Features

  • conditional tags: if, else, elseif, unless, elseunless
  • loops: for, each, foreach
  • import and require tags
  • modifiers for strings, numbers, arrays, objects and more
  • special attributes, e.g. inline for asset inline, width="auto" for auto sizing and more
  • built-in i18n support (translate tag and modifier)
  • compiler tag for scripts (allows custom compilers)

Input / Output Examples

<if foo is present>{bar}</if>
function render(__o, __e) {
  var __t = "";
  if (__o.foo !== void 0) {
    __t += __e(__o.bar);
  }
  return __t;
}
<for month in months>{month}</for>
function render(__o, __e) {
  var __t = "";
  for (var a = 0, b = __o.months.length; a < b; a += 1) {
    var month = __o.months[a];
    __t += __e(month);
  }
  return __t;
}
<foreach month in months>{month}</foreach>
function render(__o, __e) {
  var __t = "";
  __o.months.forEach(function (month) {
    __t += __e(month);
  });
  return __t;
}

Benchmarks

npm run benchmark

html-engine x 3,504,768 ops/sec ±1.80% (85 runs sampled)
underscore x 210,428 ops/sec ±1.60% (90 runs sampled)
lodash x 249,232 ops/sec ±1.10% (91 runs sampled)
handlebars x 1,883,683 ops/sec ±1.70% (84 runs sampled)
mustache x 450,925 ops/sec ±2.56% (87 runs sampled)
Fastest is html-engine

License

MIT

Keywords

FAQs

Last updated on 15 Nov 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc