# bars

> Bars is a lightweight high performance HTML aware templating engine.

Latest version **1.9.6** (published 2017-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install bars
pnpm add bars
yarn add bars
bun add bars
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.9.6 |
| Published | 2017-09-09 |
| First published | 2015-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Michaelangelo Jong |
| Maintainers | dallasread, mike96angelo |
| Keywords | bars, render, renderer, rendering, template, templating, html |

## Links

- npm: https://www.npmjs.com/package/bars
- Repository: https://github.com/Mike96Angelo/Bars
- Homepage: https://github.com/Mike96Angelo/Bars#readme
- Issues: https://github.com/Mike96Angelo/Bars/issues
- npm.io page: https://npm.io/package/bars

## Dependencies (5)

- [jquery](https://npm.io/package/jquery.md) ^3.1.1
- [compileit](https://npm.io/package/compileit.md) ^1.0.1
- [source-map](https://npm.io/package/source-map.md) ^0.5.6
- [generate-js](https://npm.io/package/generate-js.md) ^3.1.2
- [virtual-dom](https://npm.io/package/virtual-dom.md) ^2.1.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.9.6 (latest) — 2017-09-09
- 1.9.5 — 2017-04-24
- 1.9.4 — 2017-04-21
- 1.9.3 — 2017-04-21
- 1.9.2 — 2017-04-21
- 1.9.1 — 2017-04-21
- 1.9.0 — 2017-04-05
- 1.8.2 — 2017-03-14
- 1.8.1 — 2017-03-13
- 1.8.0 — 2017-03-06
- 1.7.3 — 2017-03-02
- 1.7.2 — 2017-03-01
- 1.7.1 — 2017-03-01
- 1.7.0 — 2017-03-01
- 1.6.0 — 2017-02-13
- … 62 more at https://npm.io/package/bars/versions

## README

# Bars

[![GitHub release](https://img.shields.io/github/release/Mike96angelo/Bars.svg?maxAge=21600)](https://github.com/Mike96Angelo/Bars/releases)
[![npm version](https://img.shields.io/npm/v/bars.svg?maxAge=21600)](https://www.npmjs.com/package/bars)
[![npm downloads](https://img.shields.io/npm/dm/bars.svg?maxAge=604800)](https://npm-stat.com/charts.html?package=bars&from=2015-08-13)
[![npm downloads](https://img.shields.io/npm/dt/bars.svg?maxAge=604800)](https://npm-stat.com/charts.html?package=bars&from=2015-08-13)

Bars is a lightweight high performance HTML aware templating engine.  Bars emits DOM rather than DOM-strings, this means the DOM state is preserved even if data updates happen.  Bars can also emit DOM-strings for backend templating if desired.  This way one can use Bars for both static content generation and dynamic web application views.

# Make Bars Better

Bars is still in early development, please share any suggestions and report any bugs to the [GitHub issues](https://github.com/Mike96Angelo/Bars/issues) page, so we can continue to improve Bars.  If you want to contribute to Bars, [fork Bars on GitHub](https://github.com/Mike96Angelo/Bars) and send in a pull request.  For ways to contribute check out the [issues](https://github.com/Mike96Angelo/Bars/issues) page on GitHub.

### Install:
```
$ npm install bars
```

# What Bars Looks Like

[Bars Language and Docs](docs/js-interface.md).
* [Demo App](https://mike96angelo.github.io/Bars/demo/)
* [JSFiddle](https://jsfiddle.net/ufcdxm4q/7/)

### index.bars:
```handlebars
<h2>To Do App</h2>
<input id="new-list" todos:{{todos}} placeholder="Add something to your list..." />
<ul>
{{#each todos as |todo index todos|}}
  <li class="{{todo.del ? 'del' : ''}}">
    <div>
      <span class="list-complete {{todo.complete ? 'done' : ''}}" todo:{{todo}}></span>
      <span class="list">{{todo.text}}</span>
      <span class="list-del" todo:{{todo}} todos:{{todos}}>x</span>
    </div>
  </li>
{{else}}
  <li>
    <span>You have nothing left to do.</span>
  </li>
{{/each}}
</ul>
```
### app.js:
```javascript
var App = require('bars/app');

var app = new App(
    // options
    {
        index: require('./index.bars'),
        // partials: {},
        // transforms: {}
    },

    // State
    {
        todos: [
            {
                text: 'Buy eggs'
            }
        ]
    }
);

app.view.on('click', '.list-complete', function (evt, target){
    var todo = target.data('todo');
    todo.complete = !todo.complete;
    app.render();
});

app.view.on('click', '.list-del', function (evt, target){
    var todo = target.data('todo');
    var todos = target.data('todos');

    todo.del = true;
    app.render();

    setTimeout(function () {
        todos.splice(todos.indexOf(todo), 1);

        app.render();
    }, 200);
});

app.view.on('change', '#new-list', function (evt, target){
    var todos = target.data('todos');

    var todo = {
        del: true,
        text: target.value
    };

    todos.unshift(todo);
    app.render();
    target.value = '';

    setTimeout(function () {
        delete todo.del;
        app.render();
    }, 0);
});

app.appendTo(document.body);
```

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