# twill-engine

> The [Twill.js](https://raw.githubusercontent.com/rostber/twill/master/dist/twill.js) is an ultra small (2k gzip) JS templating engine. Uses a part of dom to compile a dynamic html.

Latest version **0.2.3** (published 2020-04-16) · 0 weekly downloads

## Install

```sh
npm install twill-engine
pnpm add twill-engine
yarn add twill-engine
bun add twill-engine
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2020-04-16 |
| First published | 2020-03-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 34.6 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Vladimir Savelyev |
| Maintainers | rostber |

## Links

- npm: https://www.npmjs.com/package/twill-engine
- Repository: https://github.com/rostber/twill
- Homepage: https://github.com/rostber/twill#readme
- Issues: https://github.com/rostber/twill/issues
- npm.io page: https://npm.io/package/twill-engine

## Dependencies (9)

- [jest](https://npm.io/package/jest.md) ^25.1.0
- [webpack](https://npm.io/package/webpack.md) ^4.41.5
- [babel-jest](https://npm.io/package/babel-jest.md) ^25.1.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.8.7
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.1.1
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.4
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.8.7
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^3.10.1
- [webpack-auto-inject-version](https://npm.io/package/webpack-auto-inject-version.md) ^1.2.2

## Recent versions

- 0.2.3 (latest) — 2020-04-16
- 0.2.2 — 2020-03-15
- 0.2.1 — 2020-03-15
- 0.2.0 — 2020-03-11
- 0.1.1 — 2020-03-07
- 0.1.0 — 2020-03-07

## README

# Twill

The [Twill.js](https://raw.githubusercontent.com/rostber/twill/master/dist/twill.js) is an ultra small (2k gzip) JS templating engine.
Uses a part of dom to compile a dynamic html.

That is similar to Vue templates.

## Syntax

Input:

```html
<div
  t-each="field, k in fields"
  t-class="'fielt-' + field.required"
>

  <label
    t-for="field.name"
    t-text="k + '. ' + field.label"
  ></label>

  <input
    type="text"
    t-name="field.name"
    t-id="field.name"
    t-placeholder="field.placeholder"
    t-disabled="field.disabled"
  />

</div>

<div t-if="false">
  if false
</div>
<div t-if-else="false">
  if else false
</div>
<div t-if-else="true">
  if else true
</div>
<div else>
  else
</div>

<p>
  HTML: <span t-html="myHtml"></span>
</p>
<p>
  Text: <span t-text="myHtml"></span>
</p>

<p t-attr="data-id, data">Custom data-id attribute</p>
```

Output:

```html
<div class="fielt-true">

  <label for="first_name">1. First Name</label>

  <input type="text" placeholder="Your First Name" name="first_name" id="first_name">

</div><div class="fielt-false">

  <label for="email">2. E-mail</label>

  <input type="text" placeholder="Your E-mail" disabled="true" name="email" id="email">

</div>

<div>
  if else true
</div>

<p>
  HTML: <span><b>Hello</b></span>
</p>
<p>
  Text: <span>&lt;b&gt;Hello&lt;/b&gt;</span>
</p>

<p data-id="123">Custom data-id attribute</p>
```


## Usage

### With webpack

Add package:

```bash
npm install twill-engine
```

Example:

```javascript
import Twill from 'twill-engine'
// const Twill = require('twill-engine').default

const twill = new Twill()

const template = `<div t-if="false">some text</div>`
const vars = {}

const html = twill.parseHtml(template, vars)
console.log('html:', html)

```

### Without webpack

Include to html:

```html
<script src="https://cdn.jsdelivr.net/gh/rostber/twill@latest/dist/index.js" type="text/javascript">//</script>
```

Example:

```javascript
const twill = new window.Twill()

const template = `<div t-if="false">some text</div>`
const vars = {}

const html = twill.parseHtml(template, vars)
console.log('html:', html)

```

## Options

- prefix // The prefix of attributes
- directives // Custom default extension directives
- onError // The error callback

```javascript
const twill = new Twill({
  prefix: 't-',
  directives: {
    json: (el, attr, name, data) => {
      el.innerText = JSON.stringify(this.variable(attr, data))
    },
    ....
  },
  onError: (e) => {
    console.log(e)
  }
})
```

## Directives

Basic:

- t-each="item, k in items"
- t-if="myVar > true" / t-else-if="false" / t-else
- t-text="myVar"
- t-html="myFunct()"
- t-class="myVar ? 'enabled' : 'disabled'"

Attributes:

- t-id="'some string'"
- t-for="'some string'"
- t-value="'some string'"
- t-placeholder="'some string'"
- t-disabled="true"
- t-checked="true"
- t-readonly="true"
- t-href="url"
- t-name="field"
- t-style="'width: ' + w + 'px;'"

Custom attributes:

- t-attr="data-value, jsonVariable"

## Expressions

Js standard expressions available:

```html
<div t-text="true"></div>
<div t-text="false"></div>
<div t-text="'some string'"></div>
<div t-text="myVar >= 123"></div>
<div t-text="myVar.field.key"></div>
<div t-text="myVar + ' hello'"></div>
<div t-text="myVar ? 'show' : 'hide'"></div>
<div t-text="myVar.trim()"></div>
...

<div t-if="true"></div>
<div t-if="false"></div>
....
```

## Methods

### parseHtml

```javascript
import Twill from 'twill-engine'

const twill = new Twill()
const template = `
<ul>
  <li t-each="item, k in items" t-text="item"></li>
</ul>
`
const html = twill.parseHtml(template, {items: [1, 2, 3]})
console.log('html:', html)
```

Output:

```html
<ul>
  <li>1</li><li>2</li><li>3</li>
</ul>
```

### parseNode

```javascript
import Twill from 'twill-engine'

const twill = new Twill()
twill.parseNode(document.getElementById('example'), {items: [1, 2, 3]})
```

Input:

```html
<div id="example">
  <ul>
    <li t-each="item, k in items" t-text="item"></li>
  </ul>
</div>
```

Output:

```html
<div id="example">
  <ul>
    <li>1</li><li>2</li><li>3</li>
  </ul>
</div>
```

## Console

Webpack commands

```
npm start
npm run tests
npm build
```

---
_Source: https://npm.io/package/twill-engine · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._