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 { 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