cache-element-loop.js

const choo = require('choo')
const html = require('choo/html')
const widget = require('cache-element/widget')

const app = choo()

app.model({
  state: {
    rows: [ {a: 'a'}, {b: 'b'} ]
  },
  reducers: {
    addRow: (state, data) => {
      const newRows = [...state.rows, {c: 'c'}]
      return { rows: newRows }
    }
  }
})

app.router(['/', View])

const tree = app.start()
document.body.appendChild(tree)

function View (state, prev, send) {
  return html`
    <main>
      ${state.rows.map(Row)}
      <button onclick=${onClick}>Add row</button>
    </main>
  `
  function onClick () {
    send('addRow')
  }
}

function Row (config) {
  const vizInstance = Viz()

  return html`
    <div>
      ${vizInstance(config)}
    </div>
  `
}

function Viz () {
  console.log('init viz')
  return widget({
    render: (config) => {
      console.log('render', config)
      return html`
        <div>
          <div onload=${() => console.log('onload')}>
            <pre>${JSON.stringify(config)}</pre>
          </div>
        </div>
      `
    },
    onupdate: (el, config) => {
      console.log('onupdate')
    }
  })
}