[](https://www.npmjs.com/package/keet) [](https://cdn.rawgit.com/syarul/keet/master/keet-min.js) [](https://www.npmjs.com/package/keet) [](https://travis-ci.org/syarul/keet) [](https://coveralls.io/github/syarul/keet?branch=master) [](https://standardjs.com)
Minimalist view layer for the web.
## What is Keet
> *Keet* specific goal is to offer freedom of [cumbersome frameworks](https://medium.com/dailyjs/the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445), familiar/vanilla code structures and a possible remedy to [*choice paralysis*](https://the-pastry-box-project.net/addy-osmani/2014-January-19). Generally *Keet* is more flexible, decent [render performance](https://raw.githubusercontent.com/syarul/preact-perf/master/img/2018-18-08.png), loosely coupled and has shallow learning curve. It's also only 6kb gzip in size.
## Getting Started
To try out Keet is to include it from a CDN or npm.
Create a HTML file:-
```html
```
Or from npm:-
```npm install keet```
## Resources
- Usage/API Examples - https://github.com/syarul/keet/tree/esm-5/examples
- TodoMVC Implementation - https://github.com/syarul/keetjs-todomvc
- Performance (opinionated) - https://github.com/syarul/preact-perf
## Sample Usage
### Hello World
Start by constructing a class expression as child of ```Keet```. Supply a string argument
to the component method ```mount```. Within the string, you can assign a state within handlebars i.e: ```{{}}```.
> NOTE: You also may use ternary expression as your state i.e: ```{{?show:hide}}``` where
`````` is a ```boolean``` value
```js
import Keet from 'keet'
import { getId } from 'keet/utils'
class App extends Keet {
el = 'app'
state = 'World'
componentDidMount () {
console.assert(getId('app').innerHTML === 'Hello World', 'hello test')
}
render () {
return 'Hello {{state}}'
}
}
export default new App()
```
### Counter
Basic idea how we can create a simple counter
```js
/* global Event */
import Keet, { html } from 'keet'
import { getId } from 'keet/utils'
let counter
class App extends Keet {
el = 'app'
count = 0
add (evt) {
this.count++
}
componentDidMount () {
const click = new Event('click', { bubbles: true, cancelable: true })
counter = getId('counter')
counter.dispatchEvent(click)
}
componentDidUpdate () {
console.assert(counter.innerHTML === '1', 'counter test')
}
render () {
return html`
`
}
}
export default new App()
```
## Dynamic Nodes
The traditional way, is you assign ```display:none``` to style attributes or use css, which still use resources. To use it wrap your html string with ```{{?}}{{/}}``` and assign boolean value to the state.
> NOTE: With dynamic nodes it complete remove your node from the DOM and free up your resources which is good on mobile devices.
```js
import Keet, { html } from 'keet'
class App extends Keet {
el = 'app'
show = true
toggle () {
this.show = !this.show
}
render () {
return html`
one
two
three
four
five
`
}
}
export default new App()
```
## List Rendering
To map an array to elements use the ```{{model:}}{{/model:}}```. It has basic methods add/update/remove. To go beyond that requirement you could ```extend``` the ```class``` method of ```createModel```
> NOTE: Only mutation methods has attached listener, so usage of ```map``` ```filter``` ```reduce``` ```concat``` or directly reassigned new value to the ```list``` is encouraged and does not affect the ```dom-diffing``` efficiency.
```js
import Keet, { html, CreateModel } from 'keet'
import { getId } from 'keet/utils'
class App extends Keet {
el = 'app'
color = 'red'
bold = 'bold'
task = new CreateModel()
componentWillMount () {
this.task.subscribe(model =>
this.callBatchPoolUpdate()
)
}
componentDidMount () {
let taskList = JSON.parse(JSON.stringify(this.task.list))
// update a task
this.task.update({ ...taskList[0], taskName: 'sleep', complete: true })
this.task.destroy(taskList[taskList.length - 1])
}
componentDidUpdate () {
console.assert(getId('list').childNodes.length === 4)
}
changeColor(color) {
this.color = color
}
render () {
let name = 'myModel'
let taskName = ['run', 'jog', 'walk', 'swim', 'roll']
taskName.map((task, i) => {
this.task.add({
taskName: task,
complete: i % 2 !== 0
})
})
return html`
${name}
{{taskName}}
`
}
}
const app = new App()
setTimeout(() => {
app.changeColor('blue')
}, 1000)
export default app
```
## Sub Component
Writing everything in a single file is not advisable, where you should split multiple components. To have multiple components together, use the sub-component feature with ```{{component:}}```.
> NOTE: Always has a root-element with id on sub-components html template literal, so the main component able to lookup for insertion.
```js
import Keet from 'keet'
import { html } from 'keet/utils'
class Sub extends Keet {
// provide the node id where this sub will rendered
el = 'sub'
}
const sub = new Sub()
sub.mount(html`
this is a sub-component
`)
class App extends Keet {
subc = sub
}
const app = new App()
app.mount(html`
parent
`).link('app')
```
## Roadmap
- Adding documentation ( sorry for the time being )
- Arbiter custom option ( support for node diffing algorithm by checking boolean attributes added as option rather than hard coded )
- do [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) test
## License
The MIT License (MIT)
Copyright (c) 2018 Shahrul Nizam Selamat
