TypeScript dompteuse Component Examples

Example #1

File: green.ts Project: pgn-vole/dompteuse

export default function() {
  return Component({
    key: 'green',
    initState,
    connect,
    render
  })
}

Example #2

File: blue.ts Project: pgn-vole/dompteuse

export default function() {
  return Component({
    key: 'blue',
    initState: readGlobalState,
    connect,
    render
  })
}

Example #3

File: red.ts Project: pgn-vole/dompteuse

export default function(props?: Props) {
  return Component({
    key: 'red',
    props,
    initState,
    defaultProps,
    connect,
    render
  })
}

Example #4

File: app.ts Project: pgn-vole/dompteuse

import { api as router } from 'abyssa'
import { Component, h, StreamSub } from 'dompteuse'
import { Stream } from 'most'

import appState, { incrementBlue } from './appState'
import { contentAnimation } from './animation'
import index from './index'
import blue from './blue'


export default Component({
  key: 'app',
  initState: readGlobalState,
  connect,
  render
})

interface State {
  count: number
  route: string
}

function readGlobalState() {
  return {
    count: appState.value.blue.count,
    route: appState.value.route.fullName
  }
}

function connect(on: StreamSub<State>) {
  on(appState, readGlobalState)