docs: added h and jsx examples

This commit is contained in:
Daniel Ledda
2022-05-28 13:27:48 +02:00
parent e0206af7e8
commit 5b8290ccdd

View File

@@ -1,21 +1,36 @@
import { h, frag, bootstrap, Rung, Capsule } from "./index"; 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() { constructor() {
super({}); 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() { build() {
return <div> return <>
My Cool Rung <h1>Ladder</h1>
</div>; <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 counter = Capsule.new<number>(0);
private rungs = Capsule.new<HTMLDivElement | null>(null); private rungs = Capsule.new<HTMLDivElement | null>(null);
private coolRung = new CoolRung();
constructor() { constructor() {
super({}); super({});
@@ -41,5 +56,6 @@ class App extends Rung {
} }
} }
const app = new App(); const appJsx = new AppJSX();
bootstrap(app, "app"); const appH = new AppHypertext();
bootstrap(appJsx, "app");