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";
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");