lilkit

Lilkit

Lilkit is kit for creating portable Javascript components that can be used anywhere.

Philosophy

Goal is to render only once and all additional updates are carried on existing HTML structure with observables. Every element is updating it own content or children and no virtual dom is required.

Getting started

Simple example what's possible:

import {div, ul, li, button} from 'https://cdn.skypack.dev/lilkit/elements';

const MyLilDiv = (...children) => div({ className: "lil" }, children);
const array = [1,2,3];

const view = div({},
    div({ textContent: "Hello from nested div!" }),
    MyLilDiv(
        ul({},
            ...array.map(i => li({ textContent: i }))
        )
    ),
    button({ textContent: "click me!", onclick: () => alert("Hello!") })
);

// view is valid HTMLElement
document.getElementById("deployHere").appendChild(view);

More complicated example with reactivity:

import { div, ul, li, input, button } from 'https://cdn.skypack.dev/lilkit/elements';
import { ObservableVariable, LilPlainComponent } from 'https://cdn.skypack.dev/lilkit/core';

class MyLilComponent extends LilPlainComponent {
    constructor(props) {
        super();
        this.title = new ObservableVariable("");
        this.readingList = new ObservableVariable([ { text: 'HN' } ]);
    }

    myNextRead(readItem) {
        this.readingList.val = [...this.readingList.val, { text: readItem }];
    }

    render() {
        const view = div({},
            input({ onchange: (e) => { this.title.val = e.target.value; } }),
            button({ 
                textContent: "Add",
                onclick: () => { this.myNextRead(this.title.val) } 
            }),
            ul({}, this.readingList.map(e => li({ textContent: e.text })))
        );
        return view;
    }
}

// Class component can be used in others LilElements.
const app = div({},
    new MyLilComponent({ somePropHere: "value" }) 
    // will automatically trigger `render()` method
);

document.getElementById("deployHere").appendChild(app);

Installation

npm i lilkit