alshdavid

import { Component } from '@angular/core';
import * as item from './store'

const store = item.createStore()

@Component({
  selector: 'my-app',
  template: `
    <main>
      <button (click)="add()">Add</button>

alshdavid

type Thing = {
  data: string
  printData: () => void
}

const printData = (t: Thing) => () => {
  console.log(t.data)
}

const createThing = (): Thing => {

alshdavid

<zip-button
  theme="primary"
  type="inverted"
  gradient="400"
  weight="bold">
  Click Me!
</zip-button>

<!-- You can also bind to the enum for type safety -->
<zip-button

alshdavid

const todoInstance = CreateTodoList()

const App = () => {
    const [todos, setTodos] = useState([])
  
    useEffect(() => {
      const subscription = todoInstance.onUpdate.subscribe(setTodos)
      return () => subscription.unsubscribe()
    }, [todoInstnace])
  

alshdavid

export const App = () => {
    const { todoInstance } = useContext(StateContext)
    const todos = useSubscribable(todoInstance.onUpdate, [])
  
    return <div>
      <LogButton />
      <div>
          { todos.map(todo => <div>{todo}</div>)}
      </div>
    </div>

alshdavid

const CreateTodoList = () => {
    const todos = []
  
    const add = (todo) => {
        todos.push(todo)
    }
  
    return {
        todos,
        add

alshdavid

import { useSubscribable } from 'use-subscribable'

const todoInstance = CreateTodoList()

const App = () => {
    const todos = useSubscribable(
        todoInstance.todos, // Observable
        todoInstance.todos.getValue() // Default value
    )
  

alshdavid

const CreateTodoList = () => {
    const todos = new BehaviorSubject([])
  
    const add = (todo) => {
        // this is kind of like "setState"
        todos.next([
          ...todos.getValue(),
          todo
        ])
    }

alshdavid

const todoInstance = CreateTodoList()

todoInstance
  .todos
  .subscribe(
    todosArray => console.log(todosArray)
  )

todoInstance.add('one')
todoInstance.add('two')

alshdavid

export const randomString = () => 
  Math.random().toString(36).substring(7)

export type callback<T = any> = (value: T) => void

export interface Subscription {
  unsubscribe: () => void 
}

export class ObserverWithState<T = any> {