How to use the @cycle/dom.div function in @cycle/dom

const vtree = (id, name) =>
    div(`#${id}`, [
      div('.name', name)
    ]);
  const mockBowlingLine = (id, name) => ({

, formGroup('Channel funding', div([
      !fundMaxChan
        ? amountField(amtData, 'channel_capacity_msat', true, availText)
        : div('.input-group', [
            input({ attrs: { type: 'hidden', name: 'channel_capacity_msat', value: 'all' } })
          , input('.form-control.form-control-lg.disabled', { attrs: { disabled: true, placeholder: availText } })
          , div('.input-group-append.toggle-unit', span('.input-group-text', unit))
          ])
    , fancyCheckbox('channel-fund-max', 'Fund maximum', fundMaxChan, '.btn-sm')
    ]))

  , expert ? formGroup('Fee rate', input('.form-control.form-control-lg'
             , { attrs: { type: 'text', name: 'feerate', placeholder: '(optional)'
                        , pattern: '[0-9]+(perk[bw])?|slow|normal|urgent' } })) : ''

  , div('.form-buttons', [
      button('.btn.btn-lg.btn-primary', { attrs: { type: 'submit' } }, 'Open channel')
    , ' '
    , a('.btn.btn-lg.btn-secondary', { attrs: { href: '#/channels' } }, 'Cancel')
    ])
  ])
}

function phoneOverlay(body) {
    return div({ className: 'marvel-device iphone6 silver' }, [
      div({ className: 'top-bar' }),
      div({ className: 'sleep' }),
      div({ className: 'volume' }),
      div({ className: 'camera' }),
      div({ className: 'sensor' }),
      div({ className: 'speaker' }),
      div({ className: 'screen' }, body),
      div({ className: 'home' }),
      div({ className: 'bottom-bar' })
    ]);
  }

_.map(color, (value, channel) => {
        return div('.channel-container', [
          makeInputElement(inputType, color, channel),
          span(channel)
        ]);
      })
    )

const render = (state, selection) => div('.app', [
  div('.app-head', [
    div('.action-panel', [
      div('.action-list', [
        div('.action-list-item', [
          button('.action-button', {
            attributes: {'data-panel': 'open'},
            title: 'Open Diagram...',
          }, openIcon(24)),
        ]),
        div('.action-list-item', [
          button('.action-button', {
            attributes: {'data-panel': 'save'},
            title: 'Export Diagram...',
          }, exportIcon(24)),
        ]),
        div('.action-list-item', [
          button('.action-button', {

function renderLog (time, offsetTime, log) {
  return (
    div('.log', {style: logStyle}, log.map(entry => renderEntry(time, offsetTime, entry)))
  );
}

const render = ({state, layout}, index) =>
  div('.app', [
    state.errorMessage ? div('.error-message', {
      key: `error-${index}`,
    }, [
      state.errorMessage.toString(),
    ]) : null,
    div('.app-head', [
      div('.action-panel', [
        div('.action-list', [
          div('.action-list-item', [
            button('.action-button', {
              attributes: {'data-panel': 'open'},
              title: 'Open Diagram...',
            }, openIcon(24)),
          ]),
          div('.action-list-item', [
            button('.action-button', {
              attributes: {'data-panel': 'save'},
              title: 'Export Diagram...',
            }, exportIcon(24)),
          ]),
          div('.action-list-item', [
            button('.action-button', {
              attributes: {'data-panel': 'settings'},
              title: 'Settings...',

function view(): Stream {
  const converter = new Converter();
  const html = converter.makeHtml(messageMd);
  return xs.of(
    div({ props: { innerHTML: html } })
  );
}

return xs.combine(time$, streams, playing$, offsetTime$).map(([time, logs, playing, offsetTime]) => {
    return (
      div('.time-travel', {style: timeTravelStyle}, [
        button('.pause', playing ? 'Pause' : 'Play'),
        div('.logs', {style: logsStyle}, [
          renderNowMarker(),
          ...(logs as Array).map(log => renderLog(time, offsetTime, log))
        ])
      ])
    );
  });
}

const render = (state, field1, field2) =>
  div([
    h1('Compare expressions'),
    div('.column', [
      h2('Expression 1'),
      field1,
    ]),
    div('.column', [
      h2('Expression 2'),
      field2,
    ]),
    state !== null ? div('.result', [
      state.error && div('.error', state.error),
      state.unifications.isEmpty() ? null :
      div('.warning', [
        'Identifier names do not match.',
        'The following non matching identifiers have been unified:',
        p('.warning-details',
          formatter.formatExpressions(
            state.unifications.map((unification) =>
              formatter.formatLabel(
                formatter.formatName(unification.identifierA.name),
                formatter.formatName(unification.identifierB.name)
              )
            )
          )
        ),
      ]),