alshdavid

export const ListView = (store) => ({
  data: () => ({
    items: []
  }),
  methods: {
    complete(id) {
      store.complete(id)
    },
    add() {
      const value = prompt('Name of todo')

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

<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

import { Injectable } from '@angular/core'
import { Http } from '@angular/http'
import { environment } from '../../environments/environment'

const sleep = (d: number) => new Promise(res => setTimeout(res, d))

@Injectable()
export class NewVersionService {
    pollRate = 1000 * 60 * 10 // 10 minutes
    currentBuild = environment.build

alshdavid

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

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

const todoInstance = CreateTodoList()

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

alshdavid

import { useSubscribable } from 'use-subscribable'

const todoInstance = CreateTodoList()

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

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>