Ledda/ladder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

docs: updated example, moved to new folder

Browse Source
This commit is contained in:
Daniel Ledda
2022-05-28 13:48:49 +02:00
parent 51e94c6497
commit 875fa7e5da
2 changed files with 43 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html → example/index.html
View File

@@ -4,6 +4,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Ladder Test Playground</title> <title>Ladder Test Playground</title>
<style> <style>
.counter-widget {
margin-bottom: 10px;
}
.counter {
padding: 5px;
}
.rung { .rung {
width: 30px; width: 30px;
height: 30px; height: 30px;
@@ -20,6 +26,6 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="./test.tsx"></script> <script type="module" src="./main.tsx"></script>
</body> </body>
</html> </html>

68
example.tsx → example/main.tsx
View File

@@ -1,32 +1,4 @@
import { h, frag, bootstrap, Rung, Capsule } from "./index"; import { h, frag, bootstrap, Rung, Capsule } from "../index";
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 <>
<h1>Ladder</h1>
<button onclick={() => this.counter.val--}>-</button>
<span>{this.counter}</span>
<button onclick={() => this.counter.val++}>+</button>
<div saveTo={this.rungs}/>
</>;
}
}
class AppJSX extends Rung { class AppJSX extends Rung {
private counter = Capsule.new<number>(0); private counter = Capsule.new<number>(0);
@@ -45,12 +17,44 @@ class AppJSX extends Rung {
this.rungs.val?.replaceChildren(...rungs); this.rungs.val?.replaceChildren(...rungs);
} }
build() {
return <>
<h1>Ladder</h1>
<div className={"counter-widget"}>
<button onclick={() => this.counter.val--}>-</button>
<span className={"counter"}>{this.counter}</span>
<button onclick={() => this.counter.val++}>+</button>
</div>
<div saveTo={this.rungs}/>
</>;
}
}
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() { build() {
return frag(null, return frag(null,
h("h1", {}, "Ladder"), h("h1", {}, "Ladder"),
h("button", {onclick: () => this.counter.val--}, "-"), h("div", {className: "counter-widget"},
h("span", {}, this.counter), h("button", {onclick: () => this.counter.val--}, "-"),
h("button", {onclick: () => this.counter.val++}, "+"), h("span", {className: "counter"}, this.counter),
h("button", {onclick: () => this.counter.val++}, "+"),
),
h("div", {saveTo: this.rungs}), h("div", {saveTo: this.rungs}),
); );
} }