How to use the snabbdom/h.default function in snabbdom

Object.keys(value).forEach(function (prop) {
            var targetprops = target.data.attrs = target.data.attrs || {}
            var valprop = value[prop]
            if ( '_html' === prop ) {
              target.children = [vNode('span', valprop)]
            }
            else if ( '_append' === prop ) {
              target.children.push(vNode('div', valprop))
            }
            else if ( '_prepend' === prop ) {
              target.children.unshift(vNode('div', valprop))
            }
            else if ( /^_map/.test(prop) && 'object' === typeof valprop && null !== valprop ) {
              Object.keys(valprop).forEach(function (mapkey) {
                var subtmpl = hToVDOM(vToHTML(vTSel(mapkey, target)[0])) // how else to clone?
                if ( '_map' === prop ) { target.children = [] }
                valprop[mapkey].forEach(function (cvars) {
                  var mapd
                  if ( 'string' === typeof cvars ) {
                    subtmpl.children = [vNode('span', cvars)]
                    mapd = hToVDOM(vToHTML(subtmpl)) // how to clone?
                  }
                  else if ( 'object' === typeof cvars ) {
                    mapd = vDT(subtmpl, cvars)

module.exports = function vDT (templates, contentvars) {
  var vt
  // if arguments are contained in a single object, pull them out
  if ( 'object' === typeof templates && !Array.isArray(templates)
    && undefined === contentvars
  ) {
    contentvars = templates[Object.keys(templates)[1]]
    templates = templates[Object.keys(templates)[0]]
  }
  contentvars = contentvars || {}
  if ( Array.isArray(templates) ) {
    if ( 1 < templates.length ) {
      var start = hToVDOM(templates.reverse().shift())
      start = Array.isArray(start)? vNode('div', {}, start): start // wrap div around array of elems
      vt = templates.reduce(function(prev, next) {
        var ret = hToVDOM(next)
        ret = Array.isArray(ret)? vNode('div', {}, ret): ret // wrap div around array of elems
        var tar = vTSel('.template', ret)
        if ( tar.length ) {
          tar[0].children = prev && prev.children || undefined
        }
        else { console.log('Template selector not found.') }
        return ret
      }, start)
      vt = hToVDOM(vToHTML(vt)) // how to clone?
    }
    else {
      vt = hToVDOM(templates[0])
      vt = Array.isArray(vt)? vNode('div', {}, vt): vt // wrap div around array of elems
    }

function noPropsHyper() {
  return h('div', {}, [
    h('span', {}, 'Hello'),
    h('span', {}, 'World')
  ])
}

function createElementsFromNode(node, indent = 0) {
    if (node === undefined) return h('span.value.undefined', 'undefined ∅');
    if (typeof node == 'function') return h('em.value.function', 'function');
    if (node === null) return h('span.value.null', 'null ∅');
    if (typeof node == 'boolean') {
        //return h(`input.${getType(node)}`, {attrs: {type: 'checkbox', checked: node || '', disabled: true}}, 'ss');
        return h(`span.value.${getType(node)}`, node? 'true ✓' : 'false 𐄂');

    }

    let repr = '???';
    const hidden = indent > 0 && (node && node.props && node.props.length);
    if (node && node.props) {
        const id = createId();
        return h(
            'span',
            [
                '{ ',

function simplePropsHyper() {
  return h('div', { props: { href: 'xxxxx', target: 'route' } }, [
    h('span', { props: { name: 'x', value: 1 } }, 'Hello'),
    h('span', { props: { name: 'y', value: 2 } }, 'World')
  ])
}

if (typeof node == 'boolean') {
        //return h(`input.${getType(node)}`, {attrs: {type: 'checkbox', checked: node || '', disabled: true}}, 'ss');
        return h(`span.value.${getType(node)}`, node? 'true ✓' : 'false 𐄂');

    }

    let repr = '???';
    const hidden = indent > 0 && (node && node.props && node.props.length);
    if (node && node.props) {
        const id = createId();
        return h(
            'span',
            [
                '{ ',
                `<button data-el="${id}" class="toggle${!hidden?' hide':''}">${hidden? '...' : 'x'}</button>`,
                h(`ul#${id}` + (hidden? '.hidden' : ''), node.props.map(p =&gt; {
                    return h(
                            'li',
                            [
                                h(`b.name.${getType(p.value)}.prop-${p.name.replace(/ /g, '-')}`, escapeHtml(p.name)),
                                ': ',
                                createElementsFromNode(p.value, indent + 1)
                            ]
                    );
                })),
                ' }'
            ]
        );
    }

    if (isPrimitive(node)) {
        repr = JSON.stringify(node);

const teardown = () => {
    patch(root, h('div'))
    removeEventListener('popstate', onpopstate)
    unsub()
    up = false
  }

style = value;
    } else if (index === 'key') {
      key = value;
    } else if (index === 'hooks') {
      hook = { ...hook, ...value };
    } else if (index === 'class') {
      if (typeof value === 'string') {
        attrs[index] = value;
      } else {
        sclass = value;
      }
    } else {
      attrs[index] = value;
    }
  });
  return snabbdomh.default(
    name,
    {
      on, style, attrs, hook, class: sclass, key,
    },
    children,
  );
}

for (i = 0; i < len; i++) {
      const chunk = chunks[i]
      const light = highlights.filter(light => union({ start: start + i, end: start + i + 1 }, light))
      let selector = 'span'
      if (light.length) {
        const className = this.getHighlightClassName(light[0].active)
        selector += `.${className}`
      }
      if (isEven(i)) {
        result.push(
          h(`${selector}.${outerClass}`, chunk)
        )
      } else {
        result.push(
          h(`${selector}.${CLASS_OR_ID['AG_BACKLASH']}`, chunk)
        )
      }
    }

    return result
  }

function objectPropsHyper() {
  return h('div', { style: { color: 'red', fontWeight: 'bold' }, dataset: { color: 'red', hidden: true } }, [
    h('span', { attrs: { href: '/foo' } }, 'Hello'),
    h('span', { dataset: { action: 'reset' } }, 'World')
  ])
}