Model LitElement web components with Vaadin.
The following example is credited to my 4 y/o son, who has much to learn.
bear-poker.ts:
@customElement('x-bear-poker')
export class BearPokerElement extends LitElement {
@property()
private text: String = 'You see a huge grizzly bear...';
@property()
private pokeCount: number = 0;
protected render(): TemplateResult {
return html`
${this.text}
`;
}
public pokeIt(): void {
this.pokeCount++;
if(this.pokeCount === 1) {
this.text = 'Why would you poke a bear?';
} else if(this.pokeCount === 2) {
this.text = 'You really are dumb, aren\'t you?';
} else if(this.pokeCount === 3) {
this.text = 'You\'re dead now. Happy?';
} else {
this.text = 'You can\'t poke the bear from the grave!';
}
}
}BearPoker.java:
@Tag("x-bear-poker")
@JsModule("src/bear-poker.js") // Compiled into JS (obviously).
public class BearPoker extends LitComponent<BearPoker.BearPokerModel> {
// Getters and setters call methods in the model.
public String getText() { return getModel().getText(); }
public void setText(String text) { getModel().setText(text); }
public int getPokeCount() { return getModel().getPokeCount(); }
// So do other methods.
public void pokeIt() { getModel().pokeIt(); }
// Here's the fancy-schmancy model declaration.
// It is implemented through a proxy (a.k.a., magic).
interface BearPokerModel extends LitModel {
@LitProperty(name = "text", defaultValue = "", nullDefaultValue = true)
String getText();
@LitProperty(name = "text", defaultValue = "", nullDefaultValue = true)
void setText(String text);
@LitProperty(name = "pokeCount", defaultValue = "0")
int getPokeCount();
@LitFunction(name = "pokeIt")
void pokeIt();
}
}One teensy scoop of LOVE a lot of MAGIC! topped with DREAMS.
This code is under the BSD 3-Clause.
If you like my work and want to support it, please consider sponsoring me. It's how I make the time to code great things!