Untangling the mess - source code from talk

This article simply contains the transcript of the source code from the latest TypeScript and React talk given at Hoppinger.

type Updater<data> = (current:data) => dat
type StandardComposable<outputData> = {
  render:(props:{
    onData:(_:Updater<outputData>) => void
  }) => JSX.Element,
  map:<transformedOutputData,>(transformer:(updater:Updater<outputData>) => Updater<transformedOutputData>) 
    => StandardComposable<transformedOutputData>
}
type IdempotentStateful<state> = (currentState:state) => StandardComposable<state>
const createStandardComposable = <outputData,>(
    actualReactComponent:(onData:(_:Updater<outputData>) => void) => JSX.Element) : StandardComposable<outputData> => ({
      render: props => actualReactComponent(props.onData),
      map:function<transformedOutputData,>(this, transformer:(updater:Updater<outputData>) => Updater<transformedOutputData>) :
        StandardComposable<transformedOutputData> {
        return createStandardComposable(onTransformedData =>
          this.render({ onData:(updater:Updater<outputData>) => onTransformedData(transformer(updater)) })
        )
      }
    })
const any = <outputData, >(components:Array<StandardComposable<outputData>>) : StandardComposable<outputData> =>
  createStandardComposable(onData => <>{components.map(_ => _.render({ onData }))}</>)

const componentA : IdempotentStateful<Page1State> =
  currentState => createStandardComposable(onData => 
    <div>I am component A</div>
  )
const componentB : StandardComposable<Page1State> =
  createStandardComposable(onData => 
    <div>I am component B</div>
  )
const componentC : StandardComposable<Page1State> =
  createStandardComposable(onData => 
    <div>I am component C</div>
  )

const page1 : IdempotentStateful<Page1State> = currentState =>
  any([
    componentA(currentState),
    componentB,
    componentC
  ])
type Page1State = {}

const componentD : StandardComposable<Page2State> =
  createStandardComposable(onData => 
    <div>I am component D</div>
  )
const componentE : StandardComposable<Page2State> =
  createStandardComposable(onData => 
    <div>I am component E</div>
  )
const page2 : StandardComposable<Page2State> = 
  any([
    componentD,
    componentE
  ])

type Page2State = {}

type RootState = {
  page1:Page1State,
  page2:Page2State
}
  
const Root : IdempotentStateful<RootState> = rootState =>
  any([
    page1(rootState.page1).map((page1Updater:Updater<Page1State>) : Updater<RootState> => 
      (currentRootState => ({...currentRootState, page1:page1Updater(currentRootState.page1)}))),
    page2.map((page2Updater:Updater<Page2State>) : Updater<RootState> => 
      (currentRootState => ({...currentRootState, page2:page2Updater(currentRootState.page2)}))),
  ])        

It was a lot of fun to give, hope to continue with another round soon :)