Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

pure-engine

Package Overview
Dependencies
Maintainers
1
Versions
68
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

pure-engine

Compile HTML templates into JS

  • 0.11.18
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4
increased by100%
Maintainers
1
Weekly downloads
 
Created
Source

pure-engine

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

Compile HTML templates into JS

Table of Contents

Background

Pure 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 three types of tags: curly, square and html tags.

Status: Alpha / Proof of concept

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 filters like {name | capitalize}.

<div>{name}</div>

Square Tags

[color] is a square tag

Square tags are array expressions and can be used as values of html attributes.

<button class="[color, size, shape]"><slot/></button>

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.

<if name is present>
  <div>hello {name}</div>
</if>

Install

npm install pure-engine escape-html

Usage

const { compile } = import 'pure-engine'
const escape = import 'escape-html'

async function example () {
  const { template } = await compile('<div>{foo}</div>')
  console.log(template({ foo: 'bar' }, escape))
}

example()

If you're using webpack you should use pure-engine-loader.

API

  • import and require tags
<import layout from="./layouts/default.html">
<import { form, input, button } from="./components">

<layout>
  <h1>Hello, world!</h1>
  <form>
    <input name="foo" />
    <button>Submit</button>
  </form>
</layout>

It's possible to import multiple components from a given directory. Curly brackets within the import tag are optional.

  • render, partial and include tags
<partial from="./foo.html" />
<include partial="./foo.html" />
<render partial="./foo.html" />
  • conditional tags: if, else, elseif, unless, elseunless
<if foo>bar</if>
  • loops: for, each, foreach
<for car in cars>
  {car.brand}
</for>

<for key and value in car>
  {key}{value}
</for>
  • filters
{title | capitalize}
  • special attributes
<img src="./foo.png" inline>
<div class="foo">bar</div>
<style scoped>
.foo {
  color: red;
}
</style>
  • built-in i18n support (translate tag and filter)
<h1><translate hello></h1>
<i18n yaml>
hello:
- 'Hej!'
- 'Hello!'
</i18n>
  • compiler tag for scripts
<div id="app"></div>
<script compiler="preact">
import { render } from "preact"
const Foo = ({ bar }) => {
  return (<span>{bar}</span>)
}
render(
  <Foo bar="baz" />,
  document.getElementById("app")
)
</script>

Examples

<if foo.length equals 0>{bar}</if>
function render(__o, __e) {
  var __t = "";
  if (__o.foo.length === 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

Maintainers

@emilos, @pkonieczniak.

Contributing

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

License

MIT

Keywords

FAQs

Package last updated on 07 Aug 2019

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc