npm

tagel

0.10.2 • Public • Published

tagel template engine

Creates html pages using patrials (import) and applies a context (binding).

Elements and attributes

import

imports content of template at RELATIVE_PATH and rewrites paths

<link rel="import" href="RELATIVE_PATH">

lang

reads lang from html tag and removes all elements with a lang attribute that doesn't match

<html lang="en">
...
  <div lang="fr">...</div> <!-- will be removed -->

tg-env

removes elements having tg-env attribute that doesn's match process.env.NODE_ENV

<div tg-env="development"></div>

tg-if

if tg-if attribute value is falsy, it removes the element

<div tg-if="something_falsy">
  ...
</div>

tg-for

attribute value must be an array. It repeats the element (and subtree) and binds values based on array item

<div tg-for="this.items">
  <div tg-bind="this.property1"></div>
</div>

tg-text

set the element's content to the evaluated value (textContent)

<div tg-text="this.textProperty"></div>

tg-html

set the element's inner html tree to the evaluated value (innerHTML)

<div tg-html="this.htmlProperty"></div>

tg-bind

replaces element with the evaluated value

<div tg-bind="this.property"></div>

Attribute Binding

to bind a value to an attribute, prefix attribute name with tg:

<a tg:href="this.imageUrl">...</a>

Readme

Keywords

none

Package Sidebar

Install

npm i tagel

Weekly Downloads

2

Version

0.10.2

License

ISC

Unpacked Size

23 kB

Total Files

17

Last publish

Collaborators

  • synartisis