feat: moved css to html file, updated readme

test.tsx

@@ -1,47 +1,43 @@
-import { h, q, frag, bootstrap, Rung, Capsule } from "./index";
-import {SubNode} from "./lib/helpers";
+import { h, frag, bootstrap, Rung, Capsule } from "./index";
 
-const MyCoolDiv = (props: { isRed: boolean }, subNodes?: SubNode[]) => h("div", { classes: props.isRed ? ["red"] : [] }, ...subNodes ?? []);
+class CoolRung extends Rung {
+    constructor() {
+        super({});
+    }
+
+    build() {
+        return <div>
+            My Cool Rung
+        </div>;
+    }
+}
 
 class App extends Rung {
     private counter = Capsule.new<number>(0);
     private rungs = Capsule.new<HTMLDivElement | null>(null);
+    private coolRung = new CoolRung();
 
     constructor() {
         super({});
-        this.counter.watch((count) => {
-            if (this.rungs.val) {
-                this.rungs.val.replaceChildren(
-                    ...new Array(count).fill(null).map((_, i) => {
-                        return <div className={'rung'}/>;
-                    })
-                );
-            }
-        });
+        this.counter.watch((count) => this.onCounterUpdate(count));
+    }
+
+    private onCounterUpdate(count: number) {
+        const rungs = Array<Node>(count);
+        for (let i = 0; i < rungs.length; i++) {
+            rungs[i] = <div className={'rung'}/>;
+        }
+        this.rungs.val?.replaceChildren(...rungs);
     }
 
     build() {
-        return <>
-            <style>{`
-.rung {
-    width: 30px;
-    height: 30px;
-    border: solid black;
-    border-width: 0 2px 2px 2px;
-}
-.rung:last-of-type {
-    border-width: 0 2px 0 2px;
-}
-.rung:first-of-type {
-    border-width: 0 2px 2px 2px;
-}
-`}</style>
-            <h1>Ladder</h1>
-            <button onclick={() => this.counter.val--}>-</button>
-            <span>{this.counter}</span>
-            <button onclick={() => this.counter.val++}>+</button>
-            <div saveTo={this.rungs}/>
-        </>;
+        return frag(null,
+            h("h1", {}, "Ladder"),
+            h("button", {onclick: () => this.counter.val--}, "-"),
+            h("span", {}, this.counter),
+            h("button", {onclick: () => this.counter.val++}, "+"),
+            h("div", {saveTo: this.rungs}),
+        );
     }
 }