A really small set of utilities to write HTML and CSS using only pure javascript.
It uses browser native APIs under the hood and get type checking and suggestions thanks to typescript.
In a browser:
<script src="https://unpkg.com/iuai/iuai.js"></script>
<script>
const { elem, style } = iuai;
</script><script type="module">
import "https://unpkg.com/iuai/iuai.js";
const { elem, style } = iuai;
</script>In Node.js:
$ npm install iuairequire("iuai");
const { elem, style } = iuai;import "iuai";
const { elem, style } = iuai;The code below...
<html>
<head>
<style>
#app {
text-align: center;
width: fit-content;
border: 1px solid;
padding: 1em;
}
h1 {
color: red;
}
* {
font-family: monospace;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello World!</h1>
<button onclick="count()">click me</button>
<p>you clicked <span id="counter">0</span> times.</p>
<button id="clr" onclick="reset()">reset</button>
</div>
<script>
let counter = +document.getElementById("counter").innerText;
function count() {
document.getElementById("counter").innerText = `${++counter}`;
document.getElementById("clr").disabled = false;
}
function reset() {
document.getElementById("counter").innerText = `${(counter = 0)}`;
document.getElementById("clr").disabled = true;
}
</script>
</body>
</html>... can be rewritten like this:
<body>
<script src="https://unpkg.com/iuai/iuai.js"></script>
<script>
const { elem, style, getElem } = iuai;
style("#app", {
textAlign: "center",
width: "fit-content",
border: "1px solid",
padding: "1em",
});
style("h1", {
color: "red",
});
style("*", {
fontFamily: "monospace",
});
document.body.append(
elem("div", { id: "app" }, [
elem("h1", {}, ["Hello World!"]),
elem("button", { onclick: () => count() }, ["click me"]),
elem("p", {}, [
" you clicked ",
elem("span", { id: "counter" }, ["0"]),
" times. ",
]),
elem("button", { id: "clr", onclick: () => reset(), disabled: true }, [
"reset",
]),
])
);
let counter = +getElem("counter").innerText;
function count() {
getElem("counter").innerText = `${++counter}`;
getElem("clr").disabled = false;
}
function reset() {
getElem("counter").innerText = `${(counter = 0)}`;
getElem("clr").disabled = true;
}
</script>
</body>It abstracts the Document.createElement, Element.setAttribute and Element.append methods. It returns the element created.
Signature:
function elem<T extends keyof HTMLElementTagNameMap>(
tag: T,
attributes: Partial<HTMLElementTagNameMap[T]>,
children: Array<HTMLElement | string>
): HTMLElementTagNameMap[T];It creates and returns a global CSSRule and abstracts the CSSStyleDeclaration.setProperty.
Signature:
function style(
selector: string,
properties: Partial<CSSStyleDeclaration>
): CSSStyleRule;