From 5b8290ccdd139eba2c772bdb3dc06af0eabbdbce Mon Sep 17 00:00:00 2001
From: Daniel Ledda <ledda@cip.ifi.lmu.de>
Date: Sat, 28 May 2022 13:27:48 +0200
Subject: [PATCH] docs: added h and jsx examples

---
 test.tsx => example.tsx | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)
 rename test.tsx => example.tsx (52%)

diff --git a/test.tsx b/example.tsx
similarity index 52%
rename from test.tsx
rename to example.tsx
index 9ff5ff0..bd86e31 100644
--- a/test.tsx
+++ b/example.tsx
@@ -1,21 +1,36 @@
 import { h, frag, bootstrap, Rung, Capsule } from "./index";
 
-class CoolRung extends Rung {
+class AppHypertext extends Rung {
+    private counter = Capsule.new<number>(0);
+    private rungs = Capsule.new<HTMLDivElement | null>(null);
+
     constructor() {
         super({});
+        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 <div>
-            My Cool Rung
-        </div>;
+        return <>
+            <h1>Ladder</h1>
+            <button onclick={() => this.counter.val--}>-</button>
+            <span>{this.counter}</span>
+            <button onclick={() => this.counter.val++}>+</button>
+            <div saveTo={this.rungs}/>
+        </>;
     }
 }
 
-class App extends Rung {
+class AppJSX extends Rung {
     private counter = Capsule.new<number>(0);
     private rungs = Capsule.new<HTMLDivElement | null>(null);
-    private coolRung = new CoolRung();
 
     constructor() {
         super({});
@@ -41,5 +56,6 @@ class App extends Rung {
     }
 }
 
-const app = new App();
-bootstrap(app, "app");
+const appJsx = new AppJSX();
+const appH = new AppHypertext();
+bootstrap(appJsx, "app");