treex

- Zero dependency
- No diff dom
- No proxy, No defineProperty
- No Component life
- Only use DOM

Example

``js
import { For, Show, Ele, toUpdate } from "treex";

const css = Ele("style", {
textContent:
.contains {
background: #f3f3f3;
font-size:40px;
}
,
});
document.head.append(css);

const state: Record = {
value0: "200",
};

const app = Ele("div", {
className: "contains",
style: {
cssText: "width:100%; height:100%;",
},
append: [
"Hello",
Ele("span", {
innerText: "world",
style: {
cssText: "color:red;",
},
onclick: () => {
alert("hello");
},
}),
Show(
() => Date.now() % 3 !== 0,
() => {
return Ele("span", { textContent: "show temp" });
}
),
For("div", {
each: () => {
const v = Number(state["value0"]);
return v > 15000 ? 15000 : v;
},
render: (i, len) => {
const area = () => i % (len() / 5);
return Ele("input", {
value: () => state["value" + area()],
oninput: (e) => {
state["value" + i] = e.currentTarget.value;
toUpdate();
},
});
},
}),
],
});

document.body.append(app);
``