Skip to content

Instantly share code, notes, and snippets.

Avatar
👋
Hello!

Danny Blue deebloo

👋
Hello!
View GitHub Profile
View joist-handlers-on-complete.ts
import { component, State, handle, JoistElement, get, HandlerCtx } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component({
tagName: 'my-counter',
state: 0,
render: template(({ state, run }) => {
return html`
<button @click=${run('dec_btn_clicked', -1)}>-</button>
<span>${state}</span>
View joist-handlers-3.ts
import { component, State, handle, JoistElement, get } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component({
tagName: 'my-counter',
state: 0,
render: template(({ state, run }) => {
return html`
<button @click=${run('dec_btn_clicked', -1)}>-</button>
<span>${state}</span>
View joist-handlers-2.ts
import { component, State, handle, JoistElement, get } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component({
tagName: 'my-counter',
state: 0,
render: template(({ state, run }) => {
return html`
<button @click=${run('dec_btn_clicked', -1)}>-</button>
<span>${state}</span>
View joist-handlers-1.ts
import { component, State, handle, JoistElement, get } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component({
tagName: 'my-counter',
state: 0,
render: template(({ state, run }) => {
return html`
<button @click=${run('decrement')}>-</button>
<span>${state}</span>
View property-validators.ts
import { component, property, JoistElement } from '@joist/component';
function isString(val: unknown) {
if (typeof val === 'string') {
return null;
}
return { message: 'error' };
}
View component-state-async.ts
import { component, State, JoistElement, get } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component<number>({
tagName: 'my-counter',
state: 'Hello',
render: template(({ state }) => html`${state}`)
})
class MyCounterElement extends JoistElement {
@get(State)
View element-styles.ts
import { component, JoistElement } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component({
tagName: 'app-root',
shadowDom: 'open',
state: {
title: 'Hello World'
},
styles: [`
View joist-handler-example.ts
import { component, State, handle, JoistElement, get } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component<number>({
tagName: 'app-root',
state: 0,
render: template(({ state, run }) => {
return html`
<button @click=${run('dec')}>-</button>
<span>${state}</span>
View joist-property-example.ts
import { component, State, JoistElement, property, get, PropChange } from '@joist/component';
@component({
tagName: 'app-root',
state: ''
})
class AppElement extends JoistElement {
@get(State)
private state!: State<string>;
View joist-state-example.ts
import { component, State, JoistElement, get } from '@joist/component';
import { template, html } from '@joist/component/lit-html'
@component<number>({
tagName: 'my-counter',
state: 0,
render: template(({ state }) => html`${state}`)
})
class MyCounterElement extends JoistElement {
@get(State)
You can’t perform that action at this time.