A transpiler for @9elt/miniframe
npm i --save-dev @9elt/mini-transpiler
then add in your tsconfig.json:
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@9elt/mini-transpiler"
}
}A simple counter that stops at 10
import { createNode, State } from "@9elt/miniframe";
const counter = new State(0);
function Root() {
return (
<div id="root" style={{ textAlign: "center" }}>
<p>current count: {counter}</p>
<p
style={{
color: counter.as((c) => (c < 10 ? "green" : "red")),
}}
>
{counter.as((c) => (c < 10 ? "keep going" : "stop!"))}
</p>
<button
onclick={() => counter.value++}
disabled={counter.as((c) => c === 10)}
>
increment
</button>
</div>
);
}
document.body.appendChild(createNode(Root()));