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

refactor: use static props in all examples (#19)

Browse source
This commit is contained in:
Ayo Ayco 2023-12-12 21:17:57 +01:00 committed by GitHub
parent 8aabf89208
commit d290fc90a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 29 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
examples/attach-effect/Counter.mjs
View file

@ -1,9 +1,10 @@
// @ts-check // @ts-check
import { WebComponent, attachEffect } from "../../src/index.js"; import { WebComponent, attachEffect } from "../../src/index.js";
export class Counter extends WebComponent { export class Counter extends WebComponent {
static properties = ["count"]; static props = {
count: 0,
};
onInit() { onInit() {
this.props.count = 0;
this.onclick = () => ++this.props.count; this.onclick = () => ++this.props.count;
attachEffect(this.props.count, (count) => console.log(count)); attachEffect(this.props.count, (count) => console.log(count));
} }

6
examples/attach-effect/Decrease.mjs
View file

@ -2,9 +2,11 @@
import { WebComponent, attachEffect } from "../../src/index.js"; import { WebComponent, attachEffect } from "../../src/index.js";
export class Decrease extends WebComponent { export class Decrease extends WebComponent {
static properties = ["count"]; static props = {
count: 999,
};
onInit() { onInit() {
this.props.count = 999;
this.onclick = () => --this.props.count; this.onclick = () => --this.props.count;
attachEffect(this.props.count, (count) => console.log(count)); attachEffect(this.props.count, (count) => console.log(count));
} }

5
examples/demo/BooleanPropTest.mjs
View file

@ -1,7 +1,10 @@
import { WebComponent } from "../../src/index.js"; import { WebComponent } from "../../src/index.js";
export class BooleanPropTest extends WebComponent { export class BooleanPropTest extends WebComponent {
static properties = ["is-inline", "anotherone"]; static props = {
isInline: false,
anotherone: false,
};
get template() { get template() {
return `<p>is-inline: ${this.props.isInline}</p><p>another-one: ${this.props.anotherone}</p>`; return `<p>is-inline: ${this.props.isInline}</p><p>another-one: ${this.props.anotherone}</p>`;

5
examples/demo/HelloWorld.mjs
View file

@ -2,7 +2,10 @@
import { WebComponent } from "../../src/index.js"; import { WebComponent } from "../../src/index.js";
export class HelloWorld extends WebComponent { export class HelloWorld extends WebComponent {
static properties = ["count", "emotion"]; static props = {
count: 0,
emotion: "sad",
};
onInit() { onInit() {
this.props.count = 0; this.props.count = 0;

2
examples/demo/index.html
View file

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

5
examples/pens/counter-toggle.html
View file

@ -27,9 +27,10 @@
} }
class Toggle extends WebComponent { class Toggle extends WebComponent {
static properties = ["toggle"]; static props = {
toggle: false,
};
onInit() { onInit() {
this.props.toggle = false;
this.onclick = () => (this.props.toggle = !this.props.toggle); this.onclick = () => (this.props.toggle = !this.props.toggle);
} }
get template() { get template() {

7
examples/type-restore/Counter.mjs
View file

@ -1,10 +1,11 @@
// @ts-check // @ts-check
import { WebComponent, html } from "../../src/index.js"; import { WebComponent } from "../../src/index.js";
export class Counter extends WebComponent { export class Counter extends WebComponent {
static properties = ["count"]; static props = {
count: 1,
};
onInit() { onInit() {
this.props.count = 1;
let i = 1; let i = 1;
this.onclick = () => ++this.props.count; this.onclick = () => ++this.props.count;
let double = () => i * 2; let double = () => i * 2;

5
examples/type-restore/HelloWorld.mjs
View file

@ -1,9 +1,10 @@
import { WebComponent } from "../../src/index.js"; import { WebComponent } from "../../src/index.js";
export class HelloWorld extends WebComponent { export class HelloWorld extends WebComponent {
static properties = ["name"]; static props = {
name: "a",
};
onInit() { onInit() {
this.props.name = "a";
this.onclick = () => (this.props.name += "a"); this.onclick = () => (this.props.name += "a");
} }
get template() { get template() {

1
examples/type-restore/Object.mjs
View file

@ -1,7 +1,6 @@
import { WebComponent } from "../../src/index.js"; import { WebComponent } from "../../src/index.js";
export class ObjectText extends WebComponent { export class ObjectText extends WebComponent {
// static properties = ["object"];
static props = { static props = {
object: { object: {
hello: "worldzz", hello: "worldzz",

5
examples/type-restore/Toggle.mjs
View file

@ -2,9 +2,10 @@
import { WebComponent } from "../../src/index.js"; import { WebComponent } from "../../src/index.js";
export class Toggle extends WebComponent { export class Toggle extends WebComponent {
static properties = ["toggle"]; static props = {
toggle: false,
};
onInit() { onInit() {
this.props.toggle = false;
this.onclick = () => this.handleToggle(); this.onclick = () => this.handleToggle();
} }
handleToggle() { handleToggle() {