0.0.59 • Published 7 months ago

libh v0.0.59

Weekly downloads
-
License
WTFPL
Repository
github
Last release
7 months ago

🐛 libh

Open in StackBlitz NPM Version npm package minimized gzipped size

// get ingredients

import { $, h as html, on } from "libh"


// cook yours

function Component() {

    const count = $(0);

    return html`
        <h1>Count is ${count}</h1>
        <button ${{ [on.click]: () => count.$++ }}>
            Add more!
        </button>
    `;
}


// throw into the DOM

document.body.append(...Component());

Visit live demo.



Install

npm i libh

Download

import { $, h as html } from "https://libh.dev";

Examples

Class-model | Bidirecetional binding | Post-processing

Class-model

import { $, h as html, on, css } from "libh"

const ButtonClass = {
    [css]: {
        color: "white",
        backgroundColor: "blue",
    },
    [on.click]: () => alert("hi")
}

function Main() {

    const count = $(0);

    return html`
        <button ${{ [on.click]: () => count.$++, ...ButtonClass }}>
            I'm styled ${count}!
        </button>
    `
}

Bidirecetional binding

function Linked() {

    const valueHolder = $(0)

    return html`
        <h1>these are linked!</h1>
        <input ${{ value: valueHolder, type: "range" }}>
        <input ${{ value: valueHolder, type: "range" }}>
        <label>value is ${valueHolder}</label>
    `
}

Post-processing

function Canvas() {

    const colorSwitch = $(true);

    return html`
        <canvas ${{ id: "color", [on.click]: () => colorSwitch.switch() }}></canvas>

    `.then(({ color }) => {

        const ctx = color.getContext("2d");
        colorSwitch.into($ => $ ? "red" : "blue").watch($ => {
            ctx.fillStyle = $;
            ctx.fillRect(0, 0, 100, 100);
        });
    })
}

Draggable List

function Canvas() {

    const customers = $([]);

    const name = $(""), email = $("");

    return html`
        <ul>${customers.into(({ name, email }, ref) => html`
            <li>name: ${name}, email: ${email}</li>
            <button ${{
                [on.click]() {
                    ref.removeOf(this[html])
                }
            }}>x</button>
        `, { sync: true, draggable: true })}</ul>
        <input ${{ value: name, type: "string" }}>
        <input ${{ value: email, type: "email" }}>

        <button ${{ [on.click]: () => {
            customers.push({ name: name.$, email: email.$ });
            name.$ = "";
            email.$ = "";
        } }}>submit</button>
    `
}

License

libh is WTFPL licensed.

0.0.40

10 months ago

0.0.41

10 months ago

0.0.42

10 months ago

0.0.43

10 months ago

0.0.44

9 months ago

0.0.45

9 months ago

0.0.46

9 months ago

0.0.47

9 months ago

0.0.37

10 months ago

0.0.38

10 months ago

0.0.39

10 months ago

0.0.32

11 months ago

0.0.33

11 months ago

0.0.34

11 months ago

0.0.35

10 months ago

0.0.36

10 months ago

0.0.59

7 months ago

0.0.51

9 months ago

0.0.52

9 months ago

0.0.53

9 months ago

0.0.55

8 months ago

0.0.56

7 months ago

0.0.57

7 months ago

0.0.58

7 months ago

0.0.50

9 months ago

0.0.48

9 months ago

0.0.49

9 months ago

0.0.31

2 years ago

0.0.30

2 years ago

0.0.29

2 years ago

0.0.28

2 years ago

0.0.27

2 years ago

0.0.26

2 years ago

0.0.25

2 years ago

0.0.24

2 years ago

0.0.23

2 years ago

0.0.22

2 years ago

0.0.21

2 years ago

0.0.20

2 years ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.17

2 years ago

0.0.16

2 years ago

0.0.15

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago