input handling with virtual or morphing doms

morph.js

var morphdom = require('morphdom')

var el1 = document.createElement('div')
el1.innerHTML = 'foo'
 
var el2 = document.createElement('div')
el2.innerHTML = 'bar'

var input1 = document.createElement('input')
var input2 = document.createElement('input')

el1.appendChild(input1)
el2.appendChild(input2)

input1.oninput = function () {
  morphdom(el1, el2)  
}

document.body.appendChild(el1)

virtual.js

var vdom = require('virtual-dom')
var hyperx = require('hyperx')
var main = require('main-loop')
var hx = hyperx(vdom.h)

function oninput () {
  loop.update({value: 'bar'})
}

var el = function (state) {
  return hx`<div>${state.value}<input oninput=${oninput}></div>`
}

var loop = main({value: 'foo'}, render, vdom)

document.body.appendChild(loop.target)

function render (state) {
  return el(state)
}

if the following is added to morph then the input is preserved after typing

morphdom(el1, el2, {
  onBeforeMorphEl: function (input1, input2) {
    input2.value = input1.value
  }
})  

if the following is added to morph then the input is preserved after typing

morphdom(el1, el2, {
  onBeforeMorphEl: function (input1, input2) {
    input2.value = input1.value
  }
})