A library for Web Components. Borf new elements into existence just like that.
NOTE: This library is in early development and doesn't function yet.
<!DOCTYPE html>
<html>
<head>
<title>Borf</title>
</head>
<body>
<borf-counter></borf-counter>
<script>
import borf from "https://whatever.cdn/borf";
// Define <borf-counter> element:
borf("borf-counter", (ctx) => {
const $$count = ctx.state(0);
function increment() {
$$count.update((x) => x + 1);
}
function decrement() {
$$count.update((x) => x - 1);
}
function reset() {
$$count.set(0);
}
const $isZero = $$count.as((x) => x === 0);
return html`
<div>
<p>${$$count}</p>
${ctx.when(
$isZero,
html`
<p>
<color-text color="red">Click something, man!</color-text>
</p>
`
)}
<button onclick=${reset}>Reset</button>
<button onclick=${increment}>+1</button>
<button onclick=${decrement}>-1</button>
</div>
`;
});
// Define <color-text> element used in <borf-counter>:
borf("color-text", (ctx) => {
return html`<span style="color: ${ctx.attrs.color}"
>${ctx.children}</span
>`;
});
</script>
</body>
</html>