Multiple choo components on a page about choo HOT 7 CLOSED

const app1 = choo({ name: 'app1' })
const app2 = choo({ name: 'app2' })

const choo = require('choo')

const app1 = choo({name: 'app1'})
const app2 = choo({name: 'app2'})

app1.model({
  state: {
    data: 'app1'
  },
  reducers: {
    update: (action, state) => ({data: action.value})
  }
})

app2.model({
  state: {
    data: 'app2'
  },
  reducers: {
    update: (action, state) => ({data: action.value})
  }
})

function app1main (params, state, send) {
  return choo.view`<button onclick=${(evt) => send('update', {value: 'app1main'})}>${state.data}</button>`
}

function app2main (params, state, send) {
  return choo.view`<button onclick=${(evt) => send('update', {value: 'app2main'})}>${state.data}</button>`
}

app1.router((route) => [
  route('/', app1main)
])

app2.router((route) => [
  route('/', app2main)
])

const tree1 = app1.start()
const tree2 = app2.start()

document.body.appendChild(tree1)
document.body.appendChild(tree2)

app1.model({
  namespace: 'app1',
  state: {
    data: 'app1'
  },
  reducers: {
    update: (action, state) => ({data: action.value})
  }
})

app2.model({
  namespace: 'app2',
  state: {
    data: 'app2'
  },
  reducers: {
    update: (action, state) => ({data: action.value})
  }
})

function app1main (params, state, send) {
  console.log(state)
  return choo.view`<button onclick=${(evt) => send('app1:update', {value: 'app1main'})}>${state.app1.data}</button>`
}

function app2main (params, state, send) {
  console.log(state)
  return choo.view`<button onclick=${(evt) => send('app2:update', {value: 'app2main'})}>${state.app2.data}</button>`
}

const app1 = choo()
const app2 = choo()
app1.start({name: 'app1'})
app2.start({name: 'app2'})