docs: added h and jsx examples
This commit is contained in:
@@ -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");
|
||||||
Reference in New Issue
Block a user