NUTS

View compiler for web apps. Work in progress

Install

npm i --save nuts

Quick start

Describe your view (myview.nuts.html):

<template>
  <span id="{ myid }">Count: {{: count }}</span>
  <button @click="increment">+1</button>
  <span (if)="odd">Odd</span>
  <span (else)>Even</span>
</template>

Compile it (will create myview.nuts.js):

$ npx nuts myview.nuts.html

Create your component controller mycomponent.js:

// import view
import { createNut } from './myview.nuts.js'
 
export const render = createNut(function (box) {
  box.myid = 'awesome'
  box.count = 0
  box.odd = false
  box.increment = () => {
    ++box.count
    box.odd = !box.odd
  }
})

Render the component in your app:

import { render } from './mycomponent.js'
 
const { elem } = render({})
document.getElementById('target').appendChild(elem)

Now your app should look like this:

<div id="target">
  <span id="awesome">Count: 0</span>
  <button>+1</button>
  <span>Odd</span>
</div>

and count will increment 1 every click on button