# αtαt
Fast and simple asynchronous JavaScript template engine without dependencies and for any environment (:
[](https://github.com/sgolub/atat/actions)
## But why?
I wanted to create something simple for what you don't need to spend hours to read the documentation, something that you can start to use in a few minutes. The main idea is using pure JavaScript with pure HTML. You don't need to learn new syntax, just do everything like in JavaScript.
## Features
- Embedded JavaScript code
- Browser support
- Complies with Express
- Layouts, partials and sections
- No dependencies and very small size
- TypeScript support
- Easy to use
## Installation
Using yarn or npm:
```bash
$ yarn add atat
$ npm install --save atat
```
## Tests
Using yarn or npm:
```bash
$ yarn test
$ npm test
```
## Usage
```js
import { config, parse, loadAndRender, render, loadAndParse } from 'atat';
var atat = require('atat');
```
`atat` object has the following methods
- `config` to setup global configuration for all templates
- `parse` to parse a template, returns a render function
- `loadAndParse` the same with `parse` but allows a path to a template as the first argument
- `render` to parse and render a template, returns the result string
- `loadAndRender` the same with `render` but allows a path to a template as the first argument
```js
import { parse, loadAndRender, render, loadAndParse } from 'atat';
const render = await parse(templateString, options);
container.innerHTML = render(model);
container.innerHTML = await render(templateString, model, options);
const render = await loadAndParse(pathToTemplate, options);
container.innerHTML = render(model);
container.innerHTML = await loadAndRender(pathToTemplate, model, options);
```
If your environment doesn't support `async/await` sytax, use `Promise`
```js
render(templateString, options).then((err, result) => {
container.innerHTML = result;
});
```
### Options
- `it` models variable name, default `"it"`
- `$` helpers variable name, default `"$"`
- `helpers` extra helpers
- `loader` templates provider
```js
import { parse, render, config, DEFAULT_LOADER } from 'atat';
const options = {
it: "it",
$: "$",
helpers: { },
loader: DEFAULT_LOADER
};
// global config will be applied to all templates
config(options);
// also you can pass options to the parse and render methods
const tmpl = await parse(templateString, options);
const html = await render(templateString, { /* model */ }, options);
```
### Loaders
Loaders allow you to load templates asynchronously. There are two default loaders available right from the library:
- `DEFAULT_LOADER` - for Node.js, default loader, uses `fs` module
- `FETCH_LOADER` - for a browser, loads templates through `fetch` method
```js
import { loadAndRender, loadAndParse, config, FETCH_LOADER, DEFAULT_LOADER } from 'atat';
const html = await loadAndRender(
path.resolve(__dirname, './views/main.html'),
{ /* model */ },
{ loader: DEFAULT_LOADER },
);
// in a browser you must specify loader, at least FETCH_LOADER
const html = await loadAndRender(
'http://localhost:3000/views/main.html',
{ /* model */ },
{ loader: FETCH_LOADER },
);
// custom loader
config({
loader: async (path) => {
const template = await loadTemplate(path);
return template;
}
});
```
### Syntax
Encoded output
```html
@(it.user.firstName)@
```
Raw html output
```html
@!(it.rawHTML)@
```
Embedded JavaScript code
```html
@{
// Any JavaScript code is acceptable in this block
var firstName = it.user.firstName;
var secondName = it.user.secondName;
}@
