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

const logs = ({ log, created_at }) => div([
  h2([ 'Log entries', ' ', button('.btn.btn-sm.btn-secondary.float-right', { attrs: { do: 'refresh-logs' } }, 'Refresh') ])
, pre('.logs.mt-3', code(log.map(i =>
    i.type === 'SKIPPED' ? `[SKIPPED] ${i.num_skipped}`
                         : `${i.time ? logTime(created_at, i.time) : ''} [${i.type}] ${i.source} ${i.log}`
  ).join('\n')))
])

DOM: state.map((state) => {
      return div([
        h1("Registration"),
        div(".form-element", [
          label({htmlFor: "username"}, "Username:"),
          br(),
          input("#username", {type: "text", autocomplete: "off"}),
        ]),
        div(".form-element", [
          label({htmlFor: "email"}, "Email:"),
          br(),
          input("#email", {type: "text", autocomplete: "off"}),
        ]),
        hr(),
        h2("State SPY"),
        pre(JSON.stringify(state, null, 2)),
      ])
    })
  }

.map(([ [ , sel, contents, selRev ], editorHeaderVtree, markdownPreview ]) => {
		const content = selRev == null ? last(contents) : contents[selRev]

		return main('.main', [
			editorHeaderVtree,
			div('.editor', content
				? (markdownPreview && mime.lookup(sel) === 'text/markdown'
					? div(markdown(content))
					: pre(code('.editor-code.hljs', hl(content)))
				)
				: div('.editor-no-content', '⇐ Select a file on the left'))
		])
	})

div(".form-element", [
          label({htmlFor: "username"}, "Username:"),
          br(),
          input("#username", {type: "text", value: state.form.input.username, autocomplete: "off"}),
          p(state.form.errors.username),
        ]),
        div(".form-element", [
          label({htmlFor: "email"}, "Email:"),
          br(),
          input("#email", {type: "text", value: state.form.input.email, autocomplete: "off"}),
          p(state.form.errors.email),
        ]),
        button("#register.form-element", {type: "submit", disabled: !state.form.output}, "Register"),
        hr(),
        h2("State SPY"),
        pre(JSON.stringify(state, null, 2)),
      ])
    }),
    state: stateSink,

return div([
          h1("Registration"),
          div(".form-element", [
            label({htmlFor: "username"}, "Username:"),
            br(),
            input("#username", {type: "text", value: form.username, autocomplete: "off"}),
          ]),
          div(".form-element", [
            label({htmlFor: "email"}, "Email:"),
            br(),
            input("#email", {type: "text", value: form.email, autocomplete: "off"}),
          ]),
          button("#submit.form-element", {type: "submit", disabled: !model}, "Register"),
          hr(),
          h2("State SPY"),
          pre(JSON.stringify(state, null, 2)),
        ])
      }
    ),

const logs = items => div([
  h2([ 'Log entries ', button('.btn.btn-sm.btn-secondary', { attrs: { do: 'refresh-logs' } }, 'Refresh') ])
, pre('.logs.mt-3', code(items.map(i =>
    i.type === 'SKIPPED' ? `[SKIPPED] ${i.num_skipped}`
                         : `${i.time} [${i.type}] ${i.source} ${i.log}`
  ).join('\n')))
])

div('.row.form-group', [
          div('.col-md-12', [
            p('.alert.alert-warning', [
              'Type ',
              kbd('+'),
              ' to jump to today\'s date. ',
              kbd('+100'),
              ' will return today + 100 days. ',
              kbd('-100'),
              ' does the opposite'
            ])
          ])
        ]),
        h2('Configuration: '),
        div('.row', div('.col-md-12', [
          pre(code(JSON.stringify(data, null, 2)))
        ]))
      )

      return div('.row', div('.col-md-12', childNodes))
    })

export const yaml = data => pre('.mt-3.text-left.text-muted', typeof data == 'string' ? data : YAML.safeDump(data))