vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix attribute syncing for input, select, textarea

Browse source 
optimize events
This commit is contained in:
Leo Horie 2016-05-10 01:55:48 -04:00
parent 4a215a2815
commit d5371533a7
7 changed files with 503 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

54
render/render.js
View file

@ -82,9 +82,7 @@ module.exports = function($window, onevent) {
if (vnode.children != null) {
var children = vnode.children
createNodes(element, children, 0, children.length, hooks, null)
if (tag === "select" && "value" in attrs) {
setAttrs(vnode, { value: attrs.value })
}
setLateAttrs(vnode)
}
return element
}
@ -214,6 +212,10 @@ module.exports = function($window, onevent) {
}
function updateElement(old, vnode, hooks) {
var element = vnode.dom = old.dom
if (vnode.tag === "textarea") {
if (vnode.attrs == null) vnode.attrs = {}
if (vnode.text != null) vnode.attrs.value = vnode.text //FIXME handle multiple children
}
updateAttrs(vnode, old.attrs, vnode.attrs)
if (old.text != null && vnode.text != null && vnode.text !== "") {
if (old.text.toString() !== vnode.text.toString()) old.dom.firstChild.nodeValue = vnode.text
@ -343,24 +345,12 @@ module.exports = function($window, onevent) {
function setAttr(vnode, key, old, value) {
//TODO test input undo history
var element = vnode.dom
if (key === "key" || old === value || typeof value === "undefined" || isLifecycleMethod(key)) return
if (key === "key" || (!isFormAttribute(vnode, key) && old === value) || typeof value === "undefined" || isLifecycleMethod(key)) return
var nsLastIndex = key.indexOf(":")
if (nsLastIndex > -1 && key.substr(0, nsLastIndex) === "xlink") {
element.setAttributeNS("http://www.w3.org/1999/xlink", key.slice(nsLastIndex + 1), value)
}
else if (key[0] === "o" && key[1] === "n" && typeof value === "function") {
var eventName = key.slice(2)
if (vnode.events === undefined) vnode.events = {}
if (vnode.events[key] != null) {
element.removeEventListener(eventName, vnode.events[key], false)
}
vnode.events[key] = function(e) {
var result = value.call(element, e)
if (typeof onevent === "function") onevent.call(element, e)
return result
}
element.addEventListener(eventName, vnode.events[key], false)
}
else if (key[0] === "o" && key[1] === "n" && typeof value === "function") updateEvent(vnode, key, value)
else if (key === "style") updateStyle(element, old, value)
else if (key in element && !isAttribute(key) && vnode.ns === undefined) element[key] = value
else {
@ -371,10 +361,17 @@ module.exports = function($window, onevent) {
else element.setAttribute(key, value)
}
}
function setLateAttrs(vnode) {
var attrs = vnode.attrs
if (vnode.tag === "select" && attrs != null) {
if ("value" in attrs) setAttr(vnode, "value", null, attrs.value)
if ("selectedIndex" in attrs) setAttr(vnode, "selectedIndex", null, attrs.selectedIndex)
}
}
function updateAttrs(vnode, old, attrs) {
if (attrs != null) {
for (var key in attrs) {
setAttr(vnode, key, old[key], attrs[key])
setAttr(vnode, key, old && old[key], attrs[key])
}
}
if (old != null) {
@ -385,6 +382,9 @@ module.exports = function($window, onevent) {
}
}
}
function isFormAttribute(vnode, attr) {
return attr === "value" || attr === "checked" || attr === "selectedIndex" || attr === "selected" && vnode.dom === $doc.activeElement
}
function isLifecycleMethod(attr) {
return attr === "oninit" || attr === "oncreate" || attr === "onupdate" || attr === "onremove" || attr === "onbeforeremove" || attr === "shouldUpdate"
}
@ -408,6 +408,24 @@ module.exports = function($window, onevent) {
}
}
}
//event
function updateEvent(vnode, key, value) {
var element = vnode.dom
var callback = function(e) {
var result = value.call(element, e)
if (typeof onevent === "function") onevent.call(element, e)
return result
}
if (key in element) element[key] = callback
else {
var eventName = key.slice(2)
if (vnode.events === undefined) vnode.events = {}
if (vnode.events[key] != null) element.removeEventListener(eventName, vnode.events[key], false)
vnode.events[key] = callback
element.addEventListener(eventName, vnode.events[key], false)
}
}
//lifecycle
function initLifecycle(source, vnode, hooks) {

135
render/tests/test-input.js
View file

@ -4,23 +4,138 @@ var o = require("../../ospec/ospec")
var domMock = require("../../test-utils/domMock")
var vdom = require("../../render/render")
o.spec("input", function() {
o.spec("form inputs", function() {
var $window, root, render
o.beforeEach(function() {
$window = domMock()
root = $window.document.body
render = vdom($window).render
root = $window.document.createElement("div")
$window.document.body.appendChild(root)
})
o.afterEach(function() {
while (root.firstChild) root.removeChild(root.firstChild)
})
o("maintains focus after move", function() {
var input = {tag: "input", key: 1}
var a = {tag: "a", key: 2}
var b = {tag: "b", key: 3}
o.spec("input", function() {
o("maintains focus after move", function() {
var input = {tag: "input", key: 1}
var a = {tag: "a", key: 2}
var b = {tag: "b", key: 3}
render(root, [input, a, b])
input.dom.focus()
render(root, [a, input, b])
o($window.document.activeElement).equals(input.dom)
})
render(root, [input, a, b])
input.dom.focus()
render(root, [a, input, b])
o("syncs input value if DOM value differs from vdom value", function() {
var input = {tag: "input", attrs: {value: "aaa", oninput: function() {}}}
var updated = {tag: "input", attrs: {value: "aaa", oninput: function() {}}}
render(root, [input])
//simulate user typing
var e = $window.document.createEvent("KeyboardEvent")
e.initEvent("input", true, true)
input.dom.focus()
input.dom.value += "a"
input.dom.dispatchEvent(e)
//re-render may use same vdom value as previous render call
render(root, [updated])
o(updated.dom.value).equals("aaa")
})
o($window.document.activeElement).equals(input.dom)
o("syncs input checked attribute if DOM value differs from vdom value", function() {
var input = {tag: "input", attrs: {type: "checkbox", checked: true, onclick: function() {}}}
var updated = {tag: "input", attrs: {type: "checkbox", checked: true, onclick: function() {}}}
render(root, [input])
//simulate user clicking checkbox
var e = $window.document.createEvent("MouseEvents")
e.initEvent("click", true, true)
input.dom.focus()
input.dom.dispatchEvent(e)
//re-render may use same vdom value as previous render call
render(root, [updated])
o(updated.dom.checked).equals(true)
})
})
o.spec("select", function() {
o("select works without attributes", function() {
var select = {tag: "select", children: [
{tag: "option", attrs: {value: "a"}, text: "aaa"},
]}
render(root, [select])
o(select.dom.value).equals("a")
o(select.dom.selectedIndex).equals(0)
})
o("select yields invalid value without children", function() {
var select = {tag: "select", attrs: {value: "a"}}
render(root, [select])
o(select.dom.value).equals("")
o(select.dom.selectedIndex).equals(-1)
})
o("select value is set correctly on first render", function() {
var select = {tag: "select", attrs: {value: "b"}, children: [
{tag: "option", attrs: {value: "a"}, text: "aaa"},
{tag: "option", attrs: {value: "b"}, text: "bbb"},
{tag: "option", attrs: {value: "c"}, text: "ccc"},
]}
render(root, [select])
o(select.dom.value).equals("b")
o(select.dom.selectedIndex).equals(1)
})
o("syncs select value if DOM value differs from vdom value", function() {
function makeSelect() {
return {tag: "select", attrs: {value: "b"}, children: [
{tag: "option", attrs: {value: "a"}, text: "aaa"},
{tag: "option", attrs: {value: "b"}, text: "bbb"},
{tag: "option", attrs: {value: "c"}, text: "ccc"},
]}
}
render(root, [makeSelect()])
//simulate user selecting option
root.firstChild.value = "c"
root.firstChild.focus()
//re-render may use same vdom value as previous render call
render(root, [makeSelect()])
o(root.firstChild.value).equals("b")
o(root.firstChild.selectedIndex).equals(1)
})
})
o.spec("textarea", function() {
o("updates after user input", function() {
render(root, [{tag: "textarea", text: "aaa"}])
//simulate typing
root.firstChild.value = "bbb"
//re-render may occur after value attribute is touched
render(root, [{tag: "textarea", text: "ccc"}])
o(root.firstChild.value).equals("ccc")
//FIXME should fail if fix is commented out
})
})
})

11
render/tests/test-updateElement.js
View file

@ -34,6 +34,17 @@ o.spec("updateElement", function() {
o(updated.dom).equals(root.firstChild)
o(updated.dom.attributes["title"].nodeValue).equals("d")
})
o("adds attr from empty attrs", function() {
var vnode = {tag: "a"}
var updated = {tag: "a", attrs: {title: "d"}}
render(root, [vnode])
render(root, [updated])
o(updated.dom).equals(vnode.dom)
o(updated.dom).equals(root.firstChild)
o(updated.dom.attributes["title"].nodeValue).equals("d")
})
o("removes attr", function() {
var vnode = {tag: "a", attrs: {id: "b", title: "d"}}
var updated = {tag: "a", attrs: {id: "c"}}