ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: organize examples

Browse source
This commit is contained in:
Ayo 2023-12-02 17:00:41 +01:00
parent 91356bde9f
commit d3dc78e75c
3 changed files with 30 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
attach-effect/Counter.mjs → examples/attach-effect/Counter.mjs
View file

@ -1,6 +1,6 @@
// @ts-check // @ts-check
import WebComponent from "../src/WebComponent.js"; import WebComponent from "../../src/WebComponent.js";
import { attachEffect } from "../src/attach-effect.js"; import { attachEffect } from "../../src/attach-effect.js";
export class Counter extends WebComponent { export class Counter extends WebComponent {
static properties = ["count"]; static properties = ["count"];

25
examples/attach-effect/Decrease.mjs Normal file
View file

@ -0,0 +1,25 @@
// @ts-check
import WebComponent from "../../src/WebComponent.js";
import { attachEffect } from "../../src/attach-effect.js";
export class Decrease extends WebComponent {
static properties = ["count"];
onInit() {
this.props.count = 999;
this.onclick = () => --this.props.count;
attachEffect(
this.props.count,
(count) => console.log(count)
);
}
afterViewInit(){
attachEffect(this.props.count, (count) => console.log(count + 100));
}
get template() {
return `<button id="btn">${this.props.count}</button>`;
}
}
customElements.define("my-decrement", Decrease);

4
attach-effect/index.html → examples/attach-effect/index.html
View file

@ -4,10 +4,12 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WC demo</title> <title>WC demo</title>
<script type="module" src="Counter.mjs"></script> <script type="module" src="./Counter.mjs"></script>
<script type="module" src="./Decrease.mjs"></script>
</head> </head>
<body> <body>
<h1>Attach Effect Test</h1> <h1>Attach Effect Test</h1>
<my-counter></my-counter> <my-counter></my-counter>
<my-decrement></my-decrement>
</body> </body>
</html> </html>