Danny Blue deebloo

## state-def.ts
import { BehaviorSubject, of } from 'rxjs';
import { distinctUntilChanged, concatMap, map, take } from 'rxjs/operators';

export class StateDef<T> extends BehaviorSubject<T> {
  setState(setter: (state: T) => T) {
    this.pipe(take(1)).subscribe(state => {
      super.next(setter(state));
    });
  }

## if-animation.directive.ts
import { Directive, TemplateRef, ViewContainerRef, Input, Renderer2 } from '@angular/core';
import { timer } from 'rxjs';

@Directive({
  selector: '[ifAnimation]'
})
export class IfAnimationDirective {
  @Input() lsIfAnimationDelay: number;

  @Input() set lsIfAnimation(display: boolean) {

## 0.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                deebloo
                / 0.md
            
            
              Last active
              April 3, 2020 13:41
            
              
                message-parts
              
          
    Text Chats as Data

Most of the time when we are thinking about sending a chat message as text we just think of sending a string. This work fine in most cases but causes issues when we think about formatting or when needing to define special actions like links. This is a proposal for a potential way of treating messages differently.
Let’s say that you wanted to send this block of text as a message.
“Hello World, this is the BEST! Follow me here.”
How would you interpret the bold text? We could break up the string into distinct tokens that represent a small part of the message.

  
## state-container.ts
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);

## custom-element-arguments-0.html
<!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';


## custom-element-arguments-1.html
<!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';


## my.element.ts
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>`

## joist-di-example.ts
import { component, JoistElement, get } from '@joist/component';
import { service, inject } from '@joist/di'

@service()
class FooService {
  sayHello() {
    return 'Hello World';
  }
}

## 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)

## 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>;
	import { BehaviorSubject, of } from 'rxjs';
	import { distinctUntilChanged, concatMap, map, take } from 'rxjs/operators';

	export class StateDef<T> extends BehaviorSubject<T> {
	setState(setter: (state: T) => T) {
	this.pipe(take(1)).subscribe(state => {
	super.next(setter(state));
	});
	}
	import { Directive, TemplateRef, ViewContainerRef, Input, Renderer2 } from '@angular/core';
	import { timer } from 'rxjs';

	@Directive({
	selector: '[ifAnimation]'
	})
	export class IfAnimationDirective {
	@Input() lsIfAnimationDelay: number;

	@Input() set lsIfAnimation(display: boolean) {
	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);
	<!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';
	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>`
	import { component, JoistElement, get } from '@joist/component';
	import { service, inject } from '@joist/di'

	@service()
	class FooService {
	sayHello() {
	return 'Hello World';
	}
	}
	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, State, JoistElement, property, get, PropChange } from '@joist/component';

	@component({
	tagName: 'app-root',
	state: ''
	})
	class AppElement extends JoistElement {
	@get(State)
	private state!: State<string>;