Skip to content

Instantly share code, notes, and snippets.

Created September 1, 2020 00:59
What would you like to do?
import { component, State, handle, JoistElement, get, HandlerCtx } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
tagName: 'my-counter',
state: 0,
render: template(({ state, run }) => {
return html`
<button @click=${run('dec_btn_clicked', -1)}>-</button>
<button @click=${run('inc_btn_clicked', 1)}>+</button>
class AppElement extends JoistElement {
private state!: State<number>;
updateCount(_: Event, n: number) {
// State.setValue returns a promise so this will work even if state is set async
return this.state.setValue(this.state.value + n);
// This will be called on all handlers for a given action have completed
// The second argument will be the return value of all completed handlers
onComplete({ action }: HandlerCtx, res: any[]) {
console.log({ action, payload, state: this.state.value });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment