import { render } from "@gmartigny/whiskers.js";

const app = render("main", {
    class: "app",
}, [
    render("h1", "Whisker.js"),
    render("p", "Minimalist HTML-in-JS reactive framework."),
]);

document.body.appendChild(app);

import { renderStyle } from "@gmartigny/whiskers.js";

const style = renderStyle({
    body: {
        "background-color": "#654321",
        
        ".nested": {
            padding: "2em",
        },
    },
});

document.head.appendChild(style);

import { render, reactive } from "@gmartigny/whiskers.js";

const data = {
    count: 0,
};

const counter = render(undefined, [
    render("button", {
        "@click": () => data.count++,
    }, "Increase"),
    reactive(data, "count", (value, el) => render(el || "span", value)),
]);

document.body.appendChild(counter);

import { render, reactive } from "@gmartigny/whiskers.js";

const data = {
    list: ["Minimalist", "Ergonomic", "Fun"],
}

const parentRender = (node) => render(node ?? "ul");
const childRender = (value) => render("li", value);
const element = reactive(data, "list", parentRender, childRender)

document.body.appendChild(element);

import { reactive } from "@gmartigny/whiskers.js";

const data = {
    value: 42,
};

reactive(data, "value", (value) => {
    console.log(value); // => 42 the first time, 1234 the second time
});
data.value = 1234;

render("input", {
    // DOM property
    type: "checkbox",
    // Property set in RAM
    ".private": "",
    // CSS variable
    "--color": "goldenrod",
    // Event listener
    "@input": value => console.assert(typeof value === "boolean"),
})

const data = {
    value: 42,
    array: [1, 2, 3],
};
// For a single value
reactive(
    data,
    "value",
    // Called on each changes
    (value) => {},
);
// For an array
reactive(
    data,
    "array",
    // Called once on initialization
    (values) => {},
    // Called on each values and then for each update
    (value) => {},
);