sarimarton

// Currently you can't have all 3 of these, you can only have 2 of them at the same time:
// 1. VDOM composition
// 2. Functional purity
// 3. Rich components (have states, effects etc. - compound output)

//////////////////////////////////
// Choose 1 and 2 (possible in both React and CycleJS):
// +vdom composition
// +purity
// -rich component

sarimarton

TMDb UI
  HomePage
    selectMovie -> DetailsPage
    queryEntry -> SearchResults
    queryClean -> Discovery
      
    Discovery*
    SearchResults

  DetailsPage

sarimarton

Auto-save SM
  Idle*
    change -> Save
  Save
    save -> s1d1
  s1d1
    response -> s0d1
    change -> dirty-s1d1
    debounceover -> s1d0
  s1d0

sarimarton

Auto-save Basic
  Saved
    change -> Saving
  Saving
    response -> Saved
    change -> Saving & Dirty
  Saving & Dirty
    response -> Saving

sarimarton

Auto-save
  Idle*
    change -> Saving
  Saving
    response -> Idle
    change -> Debounce Pending
  Debounce Pending
    change -> Debounce Pending
    timeout -> Pending
    response -> Debouncing

sarimarton

Auto-save SC
  Idle*
    change -> Saving
    imagepaste -> Uploading
  Uploading
    goodresponse -> Saving
    badresponse -> Idle
  Saving&
    Request
      Request Start*

sarimarton

import * as RR from 'react-redux'

// Exact matcher. This was made by a genius guy...
// https://github.com/microsoft/TypeScript/issues/12936#issuecomment-524631270
type ExactInner<T> = <D>() => D extends T ? D : D
type Exact<T> = ExactInner<T> & T

export function exact<T>(obj: Exact<T> | T): Exact<T> {
  return obj as Exact<T>
}

sarimarton

// types.ts
import { AutoSaveEvent } from 'src/store/slices/autoSave'
import { EntityUpdateEvent } from 'src/store/slices/review'
import { StateMachine } from 'xstate'

export type Machine = StateMachine<MachineContext, MachineStateSchema, MachineEvent>

export type MachineEvent =
  | EntityUpdateEvent
  | { type: 'UPDATED' }

sarimarton

FilterInput
  Init
    click -> DropdownActiveWithAllOptions
  DropdownActiveWithAllOptions
    type -> DropdownFilteredToOne
  DropdownFilteredToOne
    typeEnter -> InverseMode
  InverseMode
  

sarimarton

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions