How to use snabbdom - 10 common examples

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
    }

debugView({
                        data,
                        el
                    });
                });
                //const events = require('../../enter-ghost-debug/gui/events.json').events;

            }
            if (doc.type == 'appTopBar') {

            }
        }
    },
};

const patch = snabbdom.init([
     require('snabbdom/modules/style'),
     require('snabbdom/modules/eventlisteners'),
     polymorphicModule
]);


module.exports = (el) => {
    let last;


    // let items = [{name: 'kotek'}, {name:'piesek'}];
    // setInterval( () => {
    //     const vnodes = items.map((item, i)=> {
    //         return h('div', {
    //             key: item.name,
    //             hook: {

const flyd = require('flyd')
const h = require('snabbdom/h')

// Common snabbdom patch function (convention over configuration)
const patch = require('snabbdom').init([
  require('snabbdom/modules/class'),
  require('snabbdom/modules/attributes'),
  require('snabbdom/modules/props'),
  require('snabbdom/modules/eventlisteners'),
  require('snabbdom/modules/style'),
])


export default function view(selector, patchfn = patch) {
  let lastContainer, renderer$

  function wraperPatch(o, n) {
    let newContainer = patchfn(o, n)
    lastContainer = newContainer
    return newContainer
  }

import * as snabbdom from 'snabbdom'
import * as snabbdom_class from 'snabbdom/modules/class'
import * as snabbdom_props from 'snabbdom/modules/props'
import * as snabbdom_style from 'snabbdom/modules/style'
import * as snabbdom_directive from './directives/directive'
import * as snabbdom_create_component from './directives/create-component'
import * as snabbdom_eventlisteners from 'snabbdom/modules/eventlisteners'
import * as snabbdom_h from 'snabbdom/h'

const patch = snabbdom.init([ // Init patch function with chosen modules
  snabbdom_class.default, // makes it easy to toggle classes
  snabbdom_props.default, // for setting properties on DOM elements
  snabbdom_style.default, // handles styling on elements with support for animations
  snabbdom_eventlisteners.default, // attaches event listeners
  snabbdom_directive.default, // xiaowenjie add 处理指令
  snabbdom_create_component.default, // xiaowenjie 创建插件
])

const h = snabbdom_h.default // helper function for creating vnodes

export { h, patch }

import virtualize from 'snabbdom-virtualize/strings'
import { CLASS_OR_ID, IMAGE_EXT_REG } from '../config'
import { conflict, isLengthEven, union, isEven, getUniqueId, loadImage, getImageSrc } from '../utils'
import { insertAfter, operateClassName } from '../utils/domManipulate'
import { tokenizer } from './parse'
import { validEmoji } from '../emojis'

const snabbdom = require('snabbdom')
const patch = snabbdom.init([ // Init patch function with chosen modules
  require('snabbdom/modules/class').default, // makes it easy to toggle classes
  require('snabbdom/modules/attributes').default,
  require('snabbdom/modules/props').default, // for setting properties on DOM elements
  require('snabbdom/modules/dataset').default
])
const h = require('snabbdom/h').default // helper function for creating vnodes
const toHTML = require('snabbdom-to-html')
const toVNode = require('snabbdom/tovnode').default

const PRE_BLOCK_HASH = {
  'code': `.${CLASS_OR_ID['AG_CODE_BLOCK']}`,
  'html': `.${CLASS_OR_ID['AG_HTML_BLOCK']}`,
  'frontmatter': `.${CLASS_OR_ID['AG_FRONT_MATTER']}`
}

class StateRender {
  constructor (eventCenter) {

// import virtualize from 'snabbdom-virtualize/strings'
const snabbdom = require('snabbdom')

export const patch = snabbdom.init([ // Init patch function with chosen modules
  require('snabbdom/modules/class').default, // makes it easy to toggle classes
  require('snabbdom/modules/attributes').default,
  require('snabbdom/modules/style').default, // handles styling on elements with support for animations
  require('snabbdom/modules/props').default, // for setting properties on DOM elements
  require('snabbdom/modules/dataset').default,
  require('snabbdom/modules/eventlisteners').default // attaches event listeners
])
export const h = require('snabbdom/h').default // helper function for creating vnodes
export const toHTML = require('snabbdom-to-html') // helper function for convert vnode to HTML string
export const toVNode = require('snabbdom/tovnode').default // helper function for convert DOM to vnode
export const htmlToVNode = html => { // helper function for convert html to vnode
  const wrapper = document.createElement('div')
  wrapper.innerHTML = html
  return toVNode(wrapper).children
}

// import virtualize from 'snabbdom-virtualize/strings'
const snabbdom = require('snabbdom')

export const patch = snabbdom.init([ // Init patch function with chosen modules
  require('snabbdom/modules/class').default, // makes it easy to toggle classes
  require('snabbdom/modules/attributes').default,
  require('snabbdom/modules/style').default, // handles styling on elements with support for animations
  require('snabbdom/modules/props').default, // for setting properties on DOM elements
  require('snabbdom/modules/dataset').default,
  require('snabbdom/modules/eventlisteners').default // attaches event listeners
])
export const h = require('snabbdom/h').default // helper function for creating vnodes
export const toHTML = require('snabbdom-to-html') // helper function for convert vnode to HTML string
export const toVNode = require('snabbdom/tovnode').default // helper function for convert DOM to vnode
export const htmlToVNode = html => { // helper function for convert html to vnode
  const wrapper = document.createElement('div')
  wrapper.innerHTML = html
  return toVNode(wrapper).children
}

// import virtualize from 'snabbdom-virtualize/strings'
const snabbdom = require('snabbdom')

export const patch = snabbdom.init([ // Init patch function with chosen modules
  require('snabbdom/modules/class').default, // makes it easy to toggle classes
  require('snabbdom/modules/attributes').default,
  require('snabbdom/modules/style').default, // handles styling on elements with support for animations
  require('snabbdom/modules/props').default, // for setting properties on DOM elements
  require('snabbdom/modules/dataset').default,
  require('snabbdom/modules/eventlisteners').default // attaches event listeners
])
export const h = require('snabbdom/h').default // helper function for creating vnodes
export const toHTML = require('snabbdom-to-html') // helper function for convert vnode to HTML string
export const toVNode = require('snabbdom/tovnode').default // helper function for convert DOM to vnode
export const htmlToVNode = html => { // helper function for convert html to vnode
  const wrapper = document.createElement('div')
  wrapper.innerHTML = html
  return toVNode(wrapper).children
}

import * as snabbdom from 'snabbdom'
import * as snabbdom_class from 'snabbdom/modules/class'
import * as snabbdom_props from 'snabbdom/modules/props'
import * as snabbdom_style from 'snabbdom/modules/style'
import * as snabbdom_directive from './directives/directive'
import * as snabbdom_create_component from './directives/create-component'
import * as snabbdom_eventlisteners from 'snabbdom/modules/eventlisteners'
import * as snabbdom_h from 'snabbdom/h'

const patch = snabbdom.init([ // Init patch function with chosen modules
  snabbdom_class.default, // makes it easy to toggle classes
  snabbdom_props.default, // for setting properties on DOM elements
  snabbdom_style.default, // handles styling on elements with support for animations
  snabbdom_eventlisteners.default, // attaches event listeners
  snabbdom_directive.default, // xiaowenjie add 处理指令
  snabbdom_create_component.default, // xiaowenjie 创建插件
])

const h = snabbdom_h.default // helper function for creating vnodes

export { h, patch }