pauwell / elch

Tiny reactive templates with zero dependencies :horse:

elch

Features

🔥 Simple

🔥 Small (~15kb)

🔥 Independent

Setup

git clone https://github.com/pauwell/elch.git

• npm install
• npm run build

Example

const myTemplate = new Elch({
  name: 'counter-example',
  state: { count: 0 },
  logic: {
    incrementCount() {
      this.count += 1;
    }
  },
  view: () =>
    `<div class="counter-app">
        <h1>Counter</h1>
        <p>Current value: {{count}}</p>
        <button do-event="click:incrementCount">Click</button>
    </div>`
});

myTemplate.mountTo(document.getElementById('app'));

If-conditions

<do if="this.state.count > 10">
  <p>Visible if count is greater than ten.</p>
</do>

For-loops

<do for="let i=0; i<this.state.count; ++i">
  <p>{{ $i }}</p>
</do>

Event-attributes

<button do-event="click:incrementCount">Click</button>

Nested templates

<div class="other-template">
  <counter-app></counter-app>
</div>

elch's Issues

Should be "If" instead of "For"

elch/src/parser/parseDoNodes.ts

Line 73 in 412e5ca

? DoNodeType.For