Skip to content

Instantly share code, notes, and snippets.

View deebloo's full-sized avatar
👋
Hello!

Danny Blue deebloo

👋
Hello!
View GitHub Profile
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)
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: [`
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>
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>;
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)
import { component, JoistElement, get } from '@joist/component';
import { service, inject } from '@joist/di'
@service()
class FooService {
sayHello() {
return 'Hello World';
}
}
import { component, JoistElement } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component({
tagName: 'my-element',
state: {
title: 'Hello World'
},
render: template(({ state }) => {
return html`<h1>${state.title}</h1>`
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Element</title>
</head>
<body>
<script type="module">
import { html, render } from 'https://unpkg.com/lit-html?module';
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Element</title>
</head>
<body>
<script type="module">
import { html, render } from 'https://unpkg.com/lit-html?module';
@deebloo
deebloo / state-container.ts
Last active January 28, 2019 12:19
Wrapping a state manager to allow for async actions
export type StateChange<A> = A | Observable<A> | Promise<A>;
const stateChangeToObservable = <A>(result: StateChange<A>): Observable<A> => {
if (isObservable(result)) {
return result;
} else if (result instanceof Promise) {
return from(result);
}
return of(result);