pkonieczniak

buxlabs-dev

emilos

@buxlabs/html-engine

  "description": "Compile HTML templates into JS",

    "test": "node test/basic.js && node test/examples.js && node src/string.spec.js && node src/array.spec.js && node test/conditions.js && node test/features/i18n.js && node test/features/image-size.js && node test/features/modifiers.js && node test/features/inline.js && node test/features/svg.js && node test/features/import.js && node test/features/globals.js && node test/features/loops.js && node test/features/ternary.js && node test/features/conditions.js",

    "benchmark": "node test/benchmark.js",

    "watch": "watch 'npm test --silent' ."

    "url": "git+https://github.com/buxlabs/html-engine.git"

      "email": "przemyslaw.konieczniak@gmail.com"

    "url": "https://github.com/buxlabs/html-engine/issues"

  "homepage": "https://github.com/buxlabs/html-engine#readme",

![npm (scoped)](https://img.shields.io/npm/v/@buxlabs/html-engine.svg)

[![Codeship Status for buxlabs/html-engine](https://img.shields.io/codeship/0f4ad4f0-3059-0136-f8b6-0ef1398f25bc/master.svg)](https://app.codeship.com/projects/288586)

[REPL](https://buxlabs.pl/en/tools/js/html-engine)

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.

Curly tags can contain expressions, e.g. `{1 + 2}` is a valid tag.

They can also contain additional modifiers like `{name | capitalize}`

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.

const { compile } = require('@buxlabs/html-engine')

const template = compile('<div>{foo}</div>')

assert(template({ foo: 'bar' }) === '<div>bar</div>')

* conditional tags: if, else, elseif, unless, elseunless

* 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)

  for (var a = 0, b = __o.months.length; a < b; a += 1) {

<foreach month in months>{month}</foreach>

html-engine x 3,263,396 ops/sec ±0.86% (89 runs sampled)

underscore x 193,124 ops/sec ±0.66% (89 runs sampled)

lodash x 200,964 ops/sec ±0.78% (87 runs sampled)

html-engine x 3,372,492 ops/sec ±1.66% (91 runs sampled)

underscore x 175,306 ops/sec ±0.68% (96 runs sampled)

lodash x 208,329 ops/sec ±0.44% (91 runs sampled)

mustache x 460,274 ops/sec ±1.07% (77 runs sampled)

const AbstractSyntaxTree = require('abstract-syntax-tree')

const { array } = require('pure-utilities')

const { SPECIAL_TAGS, SELF_CLOSING_TAGS, OPERATORS, OBJECT_VARIABLE } = require('./enum')

const { getAction } = require('./action')

const { readFileSync, existsSync } = require('fs')

const { join, dirname } = require('path')

    .filter(attr => attr.type === 'Action')

      if (attr.key === 'is_between') array.splice([index + 1], 1)

function findFile (path, options, callback) {

  if (!options.paths) { throw new Error('Compiler option is undefined: paths.') }

    for (let i = 0, ilen = options.paths.length; i < ilen; i += 1) {

      const location = join(options.paths[i], path)

      if (!existsSync(location)) continue

    if (!found) { throw new Error(`Asset not found: ${path}.`) }

function collectComponentsFromImport (fragment, statistics, components, component, options) {

    throw new Error('Compiler option is undefined: paths.')

    paths = paths.concat(dirname(component.path))

    paths = paths.concat(components.map(component => dirname(component.path)))

  findFile(path, { paths }, location => {

    const content = readFileSync(location, 'utf8')

    components.push({ name, content, path: location })

    statistics.components.push({ name, content, path: location })

function collectComponentsFromPartialOrRender (fragment, statistics, options) {

  const path = fragment.attributes[0].value

    statistics.partials.push({ path: location })

  const extension = parts[parts.length - 1]

  return extension === 'svg' ? 'svg+xml' : extension

function collect (tree, fragment, variables, modifiers, components, statistics, translations, store, depth, options) {

  const keys = attrs ? attrs.map(attr => attr.key) : []

  const component = components.find(component => component.name === tag)

    resolveComponent(component, fragment, variables, modifiers, components, statistics, options)

    const ast = new AbstractSyntaxTree('')

      collect(ast, current, variables, modifiers, components, statistics, translations, store, depth, options)

    body.forEach(node => tree.append(node))

    const attribute = fragment.attributes[0]

      fragment.children = [{ type: 'text', content: `{'${key}' | translate}` }]

      const ast = new AbstractSyntaxTree('')

        collect(ast, current, variables, modifiers, components, statistics, translations, store, depth, options)

      body.forEach(node => tree.append(node))

  } else if (tag === 'script' && (keys.includes('inline') || options.inline.includes('scripts'))) {

      const { value: path } = attrs.find(attr => attr.key === 'src')

      fragment.attributes.forEach(attribute => {

        if (key !== 'src' && key !== 'inline') {

          content += ` ${key}="${value}"`

      findFile(path, options, location => {

        content += readFileSync(location, 'utf8')

        statistics.scripts.push({ path: location })

      tree.append(getTemplateAssignmentExpression(getLiteral(content)))

      const ast = new AbstractSyntaxTree(leaf.content)

      ast.each('VariableDeclarator', node => variables.push(node.id.name))

  } else if (tag === 'link' && (keys.includes('inline') || options.inline.includes('stylesheets'))) {

    const { value: path } = attrs.find(attr => attr.key === 'href')

    findFile(path, options, location => {

      content += readFileSync(location, 'utf8')

      statistics.stylesheets.push({ path: location })

    tree.append(getTemplateAssignmentExpression(getLiteral(content)))

  } else if (tag === 'script' && keys.includes('i18n')) {

      const data = yaml.load(leaf.content)

      for (let key in data) { translations[key] = data[key] }

      const data = JSON.parse(leaf.content)

      const node = ast.first('ExportDefaultDeclaration')

      node.declaration.properties.forEach(property => {

        translations[property.key.name || property.key.value] = property.value.elements.map(element => element.value)

  } else if (tag === 'style' || tag === 'script' || tag === 'template') {

    fragment.attributes.forEach(attribute => {

      content += ` ${attribute.key}="${attribute.value}"`

    tree.append(getTemplateAssignmentExpression(getLiteral('<!doctype html>')))

            const extension = getExtension(attr.value)

            const extensions = ['png', 'jpg', 'jpeg', 'gif', 'svg']

            const extensions = ['png', 'jpg', 'jpeg', 'gif', 'svg+xml']

            if (extensions.includes(extension)) {

                findFile(path, options, location => {

                  const content = readFileSync(location, 'base64')

                  statistics.images.push({ path: location })

                  attr.value = `data:image/${extension};base64, ${content}`

        fragment.children = store[value].children

        fragment.children.forEach(child => {

        fragment.attributes = fragment.attributes.filter(attribute => attribute.key !== 'content')

    collectComponentsFromPartialAttribute(fragment, statistics, options)

    const nodes = convertTag(fragment, variables, modifiers)

      tree.append(getTemplateAssignmentExpression(node))

      collect(tree, node, variables, modifiers, components, statistics, translations, store, depth, options)

    if (!SELF_CLOSING_TAGS.includes(tag)) {

      const attr = fragment.attributes.find(attr => attr.key === 'tag' || attr.key === 'tag.bind')

        const property = attr.key === 'tag' ? attr.value.substring(1, attr.value.length - 1) : attr.value

        tree.append(getTemplateAssignmentExpression(getLiteral('</')))

        tree.append(getTemplateAssignmentExpression(getObjectMemberExpression(property)))

        tree.append(getTemplateAssignmentExpression(getLiteral('>')))

        tree.append(getTemplateAssignmentExpression(getLiteral(`</${tag}>`)))

    const nodes = convertText(fragment.content, variables, modifiers)

    return nodes.forEach(node => tree.append(getTemplateAssignmentExpression(node)))

    const condition = getCondition(attrs, variables)

    appendIfStatement(condition, tree, ast, depth)

    let leaf = tree.last(`IfStatement[depth="${depth}"]`)

      while (leaf.alternate && leaf.alternate.type === 'IfStatement') {

      const condition = getCondition(attrs, variables)

      const [left, operator, right] = attrs

      if (right && right.key === 'range' && right.value) {

        if (right.value.includes('...')) {

		{
		"name": "@buxlabs/html-engine",
		"version": "0.9.3",
		"version": "0.9.4",
		"description": "Compile HTML templates into JS",
		@@ -55,2 +55,3 @@ "main": "index.js",
		"lodash.template": "^4.4.0",
		"mustache": "^3.0.0",
		"standard": "^11.0.1",
		@@ -57,0 +58,0 @@ "underscore": "^1.9.1",

Improved metrics

Worsened metrics

		@@ -98,5 +98,6 @@ # html-engine
		```
		html-engine x 3,263,396 ops/sec ±0.86% (89 runs sampled)
		underscore x 193,124 ops/sec ±0.66% (89 runs sampled)
		lodash x 200,964 ops/sec ±0.78% (87 runs sampled)
		html-engine x 3,372,492 ops/sec ±1.66% (91 runs sampled)
		underscore x 175,306 ops/sec ±0.68% (96 runs sampled)
		lodash x 208,329 ops/sec ±0.44% (91 runs sampled)
		mustache x 460,274 ops/sec ±1.07% (77 runs sampled)
		Fastest is html-engine
		@@ -103,0 +104,0 @@ ```

		@@ -309,3 +309,4 @@ const AbstractSyntaxTree = require('abstract-syntax-tree')
		const parts = value.split('.')
		return parts[parts.length - 1]
		const extension = parts[parts.length - 1]
		return extension === 'svg' ? 'svg+xml' : extension
		}
		@@ -449,3 +450,3 @@
		const extension = getExtension(attr.value)
		const extensions = ['png', 'jpg', 'jpeg', 'gif', 'svg']
		const extensions = ['png', 'jpg', 'jpeg', 'gif', 'svg+xml']
		if (extensions.includes(extension)) {
		@@ -452,0 +453,0 @@ const path = attr.value