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

rename limiter to throttle and refactor

Browse source 
- don't inject raf/setTimeout since we can't really mock them w/ a good degree of timing accuracy anyways

fix some unrelated tests
This commit is contained in:
Leo Horie 2016-05-19 23:24:04 -04:00
parent 2af3aa27c7
commit 977239d207
15 changed files with 813 additions and 353 deletions
Download patch file Download diff file Expand all files Collapse all files

37
api/limiter.js
View file

@ -1,37 +0,0 @@
"use strict"
var FRAME_BUDGET = 16 // 60 frames per second = 1 call per 16 ms
module.exports = function($window, render) {
var rAF = $window.requestAnimationFrame || $window.setTimeout
var last = 0
var pending = null
return function(force) {
var now = new Date()
// Immediately render if:
// Forced
// Haven't rendered yet
// Time since the last render is greater than the frame budget
if(force || !last || now - last > FRAME_BUDGET) {
last = now;
return render()
}
// Redraw already pending, abort
if(pending !== null) {
return
}
// Schedule a redraw for the next tick
pending = rAF(function() {
render()
last = new Date()
pending = null
}, FRAME_BUDGET - (now - last))
}
}

12
api/mount.js
View file

@ -1,18 +1,18 @@
"use strict"
var createRenderer = require("../render/render")
var limiter = require("./limiter");
var throttle = require("../api/throttle")
module.exports = function($window, redraw) {
var renderer = createRenderer($window)
return function(root, component) {
var renderer = createRenderer($window)
var draw = limiter($window, function draw() {
var run = throttle(function() {
renderer.render(root, {tag: component})
})
renderer.setEventCallback(draw)
renderer.setEventCallback(run)
redraw.run = draw
draw()
redraw.run = run
run()
}
}

11
api/router.js
View file

@ -2,20 +2,21 @@
var createRenderer = require("../render/render")
var createRouter = require("../router/router")
var limiter = require("./limiter")
var throttle = require("../api/throttle")
module.exports = function($window, redraw) {
var renderer = createRenderer($window)
var router = createRouter($window)
var route = function(root, defaultRoute, routes) {
var replay = limiter($window, router.defineRoutes(routes, function(component, args) {
var replay = router.defineRoutes(routes, function(component, args) {
renderer.render(root, {tag: component, attrs: args})
}, function() {
router.setPath(defaultRoute)
}))
})
var run = throttle(replay)
renderer.setEventCallback(replay)
redraw.run = replay
renderer.setEventCallback(run)
redraw.run = run
}
route.link = router.link
route.prefix = router.setPrefix

6
api/tests/index.html
View file

@ -19,13 +19,11 @@
<script src="../../querystring/parse.js"></script>
<script src="../../request/request.js"></script>
<script src="../../router/router.js"></script>
<script src="../limiter.js"></script>
<script src="../throttle.js"></script>
<script src="../mount.js"></script>
<script src="../router.js"></script>
<script src="./async.js"></script>
<script src="./test-limiter.js"></script>
<script src="./test-throttle.js"></script>
<script src="./test-mount.js"></script>
<script src="./test-router.js"></script>

73
api/tests/test-mount.js
View file

@ -2,29 +2,20 @@
var o = require("../../ospec/ospec")
var domMock = require("../../test-utils/domMock")
var async = require("./async")
var m = require("../../render/hyperscript")
var createMounter = require("../mount")
o.spec("m.mount", function() {
var FRAME_BUDGET = 1000 / 60
var $window, root
o.beforeEach(function() {
$window = domMock()
async.setTimeout($window)
root = $window.document.body
})
o("is a function", function() {
o(typeof createMounter).equals("function")
})
o("returns a function after invocation", function() {
o(typeof createMounter()).equals("function")
})
o("updates passed in redraw object", function() {
o("updates redraw object", function() {
var redraw = {}
var mount = createMounter($window, redraw)
@ -49,34 +40,7 @@ o.spec("m.mount", function() {
o(root.firstChild.nodeName).equals("DIV")
})
o("redraws on redraw.run()", function(done) {
var onupdate = o.spy()
var oninit = o.spy()
var redraw = {}
var mount = createMounter($window, redraw)
mount(root, {
view : function() {
return m("div", {
oninit : oninit,
onupdate : onupdate
})
}
})
o(oninit.callCount).equals(1)
redraw.run()
// Wrapped to give time for the rate-limited redraw to fire
setTimeout(function() {
o(onupdate.callCount).equals(1)
done()
}, 20)
})
o("redraws on events", function(done, timeout) {
o("redraws on events", function(done) {
var onupdate = o.spy()
var oninit = o.spy()
var onclick = o.spy()
@ -98,6 +62,7 @@ o.spec("m.mount", function() {
root.firstChild.dispatchEvent(e)
o(oninit.callCount).equals(1)
o(onupdate.callCount).equals(0)
o(onclick.callCount).equals(1)
o(onclick.this).equals(root.firstChild)
@ -109,6 +74,34 @@ o.spec("m.mount", function() {
o(onupdate.callCount).equals(1)
done()
}, 20)
}, FRAME_BUDGET)
})
o("redraws on redraw.run()", function(done) {
var onupdate = o.spy()
var oninit = o.spy()
var redraw = {}
var mount = createMounter($window, redraw)
mount(root, {
view : function() {
return m("div", {
oninit : oninit,
onupdate : onupdate
})
}
})
o(oninit.callCount).equals(1)
o(onupdate.callCount).equals(0)
redraw.run()
// Wrapped to give time for the rate-limited redraw to fire
setTimeout(function() {
o(onupdate.callCount).equals(1)
done()
}, FRAME_BUDGET)
})
})

311
api/tests/test-router.js
View file

@ -3,189 +3,144 @@
var o = require("../../ospec/ospec")
var pushStateMock = require("../../test-utils/pushStateMock")
var domMock = require("../../test-utils/domMock")
var async = require("./async")
var m = require("../../render/hyperscript")
// Convention would be `createRouter`, but that causes variable shadowing bugs
// in browsers when running tests, so `makeRouter` it is
var makeRouter = require("../router")
var router = require("../../api/router")
o.spec("m.route", function() {
var $window, root, router
var FRAME_BUDGET = 1000 / 60
var $window, root, route, redraw
void [
"setTimeout",
"requestAnimationFrame"
].forEach(function(timing) {
o.spec(timing, function() {
void [
"#",
"?",
"#!",
"?!",
""
].forEach(function(prefix) {
var spec = prefix ? "prefix " + prefix : "pushstate";
o.spec(spec, function() {
o.beforeEach(function() {
var dom = domMock()
var location = pushStateMock()
// Generate a DOM + Location mock
Object.keys(location).forEach(function(key) {
dom[key] = location[key]
})
$window = dom
async[timing]($window)
root = $window.document.body
})
o("is a function", function() {
o(typeof makeRouter).equals("function")
})
o("returns a function after invocation", function() {
o(typeof makeRouter($window)).equals("function")
})
o("updates passed in redraw object", function() {
var redraw = {}
var router = makeRouter($window, redraw)
router.prefix(prefix)
router(root, "/", {
"/" : {
view: function() {
return m("div")
}
}
})
o(typeof redraw.run).equals("function")
})
o("renders into `root`", function() {
var router = makeRouter($window, {})
router.prefix(prefix)
router(root, "/", {
"/" : {
view: function() {
return m("div")
}
}
})
o(root.firstChild.nodeName).equals("DIV")
})
o("redraws on redraw.run()", function(done) {
var onupdate = o.spy()
var oninit = o.spy()
var redraw = {}
var router = makeRouter($window, redraw)
router.prefix(prefix)
router(root, "/", {
"/" : {
view: function() {
return m("div", {
oninit: oninit,
onupdate: onupdate
})
}
}
})
o(oninit.callCount).equals(1)
redraw.run()
// Wrapped to give time for the rate-limited redraw to fire
setTimeout(function() {
o(onupdate.callCount).equals(1)
done()
}, 20)
})
o("redraws on events", function(done, timeout) {
var onupdate = o.spy()
var oninit = o.spy()
var onclick = o.spy()
var router = makeRouter($window, {})
var e = $window.document.createEvent("MouseEvents")
e.initEvent("click", true, true)
router.prefix(prefix)
router(root, "/", {
"/" : {
view: function() {
return m("div", {
oninit: oninit,
onupdate: onupdate,
onclick: onclick,
})
}
}
})
root.firstChild.dispatchEvent(e)
o(oninit.callCount).equals(1)
o(onclick.callCount).equals(1)
o(onclick.this).equals(root.firstChild)
o(onclick.args[0].type).equals("click")
o(onclick.args[0].target).equals(root.firstChild)
// Wrapped to give time for the rate-limited redraw to fire
setTimeout(function() {
o(onupdate.callCount).equals(1)
done()
}, 20)
})
o("changes location on route.link", function() {
var router = makeRouter($window, {})
var e = $window.document.createEvent("MouseEvents")
e.initEvent("click", true, true)
router.prefix(prefix)
router(root, "/", {
"/" : {
view: function() {
return m("a", {
href: "/test",
oncreate: router.link
})
}
},
"/test" : {
view : function() {
return m("div")
}
}
})
o($window.location.href).equals("http://localhost/" + (prefix ? prefix + "/" : ""))
root.firstChild.dispatchEvent(e)
o($window.location.href).equals("http://localhost/" + (prefix ? prefix + "/test" : "test"))
})
})
})
o.beforeEach(function() {
$window = {}
var dom = domMock()
for (var key in dom) $window[key] = dom[key]
var loc = pushStateMock()
for (var key in loc) $window[key] = loc[key]
root = $window.document.body
redraw = {}
route = router($window, redraw)
})
o("updates redraw object", function() {
route(root, "/", {
"/" : {
view: function() {
return m("div")
}
}
})
o(typeof redraw.run).equals("function")
})
o("renders into `root`", function() {
route(root, "/", {
"/" : {
view: function() {
return m("div")
}
}
})
o(root.firstChild.nodeName).equals("DIV")
})
o("redraws on redraw.run()", function(done) {
var onupdate = o.spy()
var oninit = o.spy()
route(root, "/", {
"/" : {
view: function() {
return m("div", {
oninit: oninit,
onupdate: onupdate
})
}
}
})
o(oninit.callCount).equals(1)
redraw.run()
// Wrapped to give time for the rate-limited redraw to fire
setTimeout(function() {
o(onupdate.callCount).equals(1)
done()
}, FRAME_BUDGET)
})
o("redraws on events", function(done, timeout) {
var onupdate = o.spy()
var oninit = o.spy()
var onclick = o.spy()
var e = $window.document.createEvent("MouseEvents")
e.initEvent("click", true, true)
route(root, "/", {
"/" : {
view: function() {
return m("div", {
oninit: oninit,
onupdate: onupdate,
onclick: onclick,
})
}
}
})
root.firstChild.dispatchEvent(e)
o(oninit.callCount).equals(1)
o(onclick.callCount).equals(1)
o(onclick.this).equals(root.firstChild)
o(onclick.args[0].type).equals("click")
o(onclick.args[0].target).equals(root.firstChild)
// Wrapped to give time for the rate-limited redraw to fire
setTimeout(function() {
o(onupdate.callCount).equals(1)
done()
}, FRAME_BUDGET)
})
o("changes location on route.link", function() {
var e = $window.document.createEvent("MouseEvents")
e.initEvent("click", true, true)
route.prefix("?")
route(root, "/", {
"/" : {
view: function() {
return m("a", {
href: "/test",
oncreate: route.link
})
}
},
"/test" : {
view : function() {
return m("div")
}
}
})
o($window.location.href).equals("http://localhost/?/")
root.firstChild.dispatchEvent(e)
o($window.location.href).equals("http://localhost/?/test")
})
})

84
api/tests/test-throttle.js Normal file
View file

@ -0,0 +1,84 @@
"use strict"
var o = require("../../ospec/ospec")
var callAsync = require("../../test-utils/callAsync")
var throttle = require("../../api/throttle")
o.spec("throttle", function() {
var FRAME_BUDGET = 1000 / 60
var spy, throttled
o.beforeEach(function() {
spy = o.spy()
throttled = throttle(spy)
})
o("runs first call synchronously", function() {
throttled()
o(spy.callCount).equals(1)
})
o("throttles subsequent synchronous calls", function(done) {
throttled()
throttled()
o(spy.callCount).equals(1)
setTimeout(function() {
o(spy.callCount).equals(2)
done()
}, FRAME_BUDGET) //this delay is much higher than 16.6ms due to setTimeout clamp and other runtime costs
})
o("calls after threshold", function(done) {
throttled()
o(spy.callCount).equals(1)
setTimeout(function(t) {
throttled()
o(spy.callCount).equals(2)
done()
}, FRAME_BUDGET)
})
o("throttles before threshold", function(done) {
throttled()
o(spy.callCount).equals(1)
callAsync(function(t) {
throttled()
o(spy.callCount).equals(1)
done()
})
})
o("it only runs once per tick", function(done) {
throttled()
throttled()
throttled()
o(spy.callCount).equals(1)
setTimeout(function() {
o(spy.callCount).equals(2)
done()
}, FRAME_BUDGET)
})
o("it supports forcing a synchronous redraw", function() {
throttled()
throttled()
throttled(true)
o(spy.callCount).equals(2)
})
})

23
api/throttle.js Normal file
View file

@ -0,0 +1,23 @@
"use strict"
module.exports = function(callback) {
//60fps translates to 16.6ms, round it down since setTimeout requires int
var time = 16
var last = 0, pending = null
var timeout = typeof requestAnimationFrame === "function" ? requestAnimationFrame : setTimeout
return function(synchronous) {
var now = new Date().getTime()
var diff = now - last
if (synchronous === true || last === 0 || now - last >= time) {
last = now
callback()
}
else if (pending === null) {
pending = timeout(function() {
pending = 0
callback()
last = new Date().getTime()
}, time - (now - last))
}
}
}

2
index.js
View file

@ -2,6 +2,7 @@
var m = require("./render/hyperscript")
var trust = require("./render/trust")
var createRenderer = require("./render/render")
var createMounter = require("./api/mount")
var createRouterInstance = require("./api/router")
var createRequester = require("./request/request")
@ -11,6 +12,7 @@ m.redraw = function() {
redraw.run()
}
m.trust = trust
m.render = createRenderer(window).render
m.mount = createMounter(window, redraw)
m.route = createRouterInstance(window, redraw)
m.request = createRequester(window, Promise).ajax

561
mithril.js
View file

@ -22,7 +22,7 @@ var selectorCache = {}
function hyperscript(selector) {
if (typeof selector === "string") {
if (selectorCache[selector] === undefined) {
var match, tag, id, classes = [], attributes = {}
var match, tag, classes = [], attributes = {}
while (match = selectorParser.exec(selector)) {
var type = match[1], value = match[2]
if (type === "" && value !== "") tag = value
@ -92,6 +92,7 @@ function changeNS(ns, vnode) {
var m = hyperscript
var trust = function(html) {
return Node("<", undefined, undefined, html, undefined, undefined)
}
@ -414,7 +415,7 @@ var createRenderer = function($window) {
}
}
if (vnode.dom.parentNode != null) parent.removeChild(vnode.dom)
if (context != null && vnode.domSize == null) { //TODO test custom elements
if (context != null && vnode.domSize == null && !hasIntegrationMethods(vnode)) { //TODO test custom elements
if (!context.pool) context.pool = [vnode]
else context.pool.push(vnode)
}
@ -440,16 +441,19 @@ var createRenderer = function($window) {
}
}
function setAttr(vnode, key, old, value) {
//TODO test input undo history
var element = vnode.dom
if (key === "key" || (!isFormAttribute(vnode, key) && old === value) || typeof value === "undefined" || isLifecycleMethod(key)) return
if (key === "key" || (old === value && !isFormAttribute(vnode, key)) || 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") 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 if (key in element && !isAttribute(key) && vnode.ns === undefined) {
//setting input[value] to same value by typing on focused element moves cursor to end in Chrome
if (vnode.tag === "input" && key === "value" && vnode.dom.value === value && vnode.dom === $doc.activeElement) return
element[key] = value
}
else {
if (typeof value === "boolean") {
if (value) element.setAttribute(key, "")
@ -488,6 +492,9 @@ var createRenderer = function($window) {
function isAttribute(attr) {
return attr === "href" || attr === "list" || attr === "form"// || attr === "type" || attr === "width" || attr === "height"
}
function hasIntegrationMethods(vnode) {
return vnode.attrs != null && (vnode.attrs.oncreate || vnode.attrs.onupdate || vnode.attrs.onbeforeremove || vnode.attrs.onremove)
}
//style
function updateStyle(element, old, style) {
@ -575,54 +582,526 @@ var createRenderer = function($window) {
return {render: render, setEventCallback: setEventCallback}
}
var FRAME_BUDGET = 16 // 60 frames per second = 1 call per 16 ms
var limiter = function($window, render) {
var rAF = $window.requestAnimationFrame || $window.setTimeout
var cAF = $window.cancelAnimationFrame || $window.clearTimeout
var createRenderer = function($window) {
var $doc = $window.document
var onevent
function setEventCallback(callback) {return onevent = callback}
var last = 0
var pending
return function() {
var now = new Date()
//create
function createNodes(parent, vnodes, start, end, hooks, nextSibling) {
for (var i = start; i < end; i++) {
var vnode = vnodes[i]
if (vnode != null) {
insertNode(parent, createNode(vnode, hooks), nextSibling)
}
}
}
function createNode(vnode, hooks) {
var tag = vnode.tag
if (vnode.attrs != null) initLifecycle(vnode.attrs, vnode, hooks)
if (typeof tag === "string") {
switch (tag) {
case "#": return createText(vnode)
case "<": return createHTML(vnode)
case "[": return createFragment(vnode, hooks)
default: return createElement(vnode, hooks)
}
}
else return createComponent(vnode, hooks)
}
function createText(vnode) {
return vnode.dom = $doc.createTextNode(vnode.children)
}
function createHTML(vnode) {
var match = vnode.children.match(/^\s*?<(\w+)/im) || []
var parent = {caption: "table", thead: "table", tbody: "table", tfoot: "table", tr: "tbody", th: "tr", td: "tr", colgroup: "table", col: "colgroup"}[match[1]] || "div"
var temp = $doc.createElement(parent)
// First render, OR if the time since the last render is greater
// than the frame budget
// just immediately render
if(!last || now - last > FRAME_BUDGET) {
last = now;
return render()
temp.innerHTML = vnode.children
vnode.dom = temp.firstChild
vnode.domSize = temp.childNodes.length
var fragment = $doc.createDocumentFragment()
var child
while (child = temp.firstChild) {
fragment.appendChild(child)
}
return fragment
}
function createFragment(vnode, hooks) {
var fragment = $doc.createDocumentFragment()
if (vnode.children != null) {
var children = vnode.children
createNodes(fragment, children, 0, children.length, hooks, null)
}
vnode.dom = fragment.firstChild
vnode.domSize = fragment.childNodes.length
return fragment
}
function createElement(vnode, hooks) {
var tag = vnode.tag
var ns = vnode.ns
var attrs = vnode.attrs
var is = attrs && attrs.is
var element = ns ?
is ? $doc.createElementNS(ns, tag, is) : $doc.createElementNS(ns, tag) :
is ? $doc.createElement(tag, is) : $doc.createElement(tag)
vnode.dom = element
if (attrs != null) {
setAttrs(vnode, attrs)
}
// Redraw already pending, abort
if(pending) {
return
if (vnode.text != null) {
if (vnode.text !== "") element.textContent = vnode.text
else vnode.children = [Node("#", undefined, undefined, vnode.text, undefined, undefined)]
}
// Schedule a redraw for the next tick
pending = rAF(function() {
render()
if (vnode.children != null) {
var children = vnode.children
createNodes(element, children, 0, children.length, hooks, null)
setLateAttrs(vnode)
}
return element
}
function createComponent(vnode, hooks) {
vnode.state = copy(vnode.tag)
initLifecycle(vnode.tag, vnode, hooks)
vnode.instance = Node.normalize(vnode.tag.view.call(vnode.state, vnode))
var element = createNode(vnode.instance, hooks)
vnode.dom = vnode.instance.dom
vnode.domSize = vnode.instance.domSize
return element
}
//update
function updateNodes(parent, old, vnodes, hooks, nextSibling) {
if (old == null && vnodes == null) return
else if (old == null) createNodes(parent, vnodes, 0, vnodes.length, hooks, nextSibling)
else if (vnodes == null) removeNodes(parent, old, 0, old.length, vnodes)
else {
var recycling = isRecyclable(old, vnodes)
if (recycling) old = old.concat(old.pool)
last = new Date()
pending = null
}, FRAME_BUDGET - (now - last))
var oldStart = 0, start = 0, oldEnd = old.length - 1, end = vnodes.length - 1, map
while (oldEnd >= oldStart && end >= start) {
var o = old[oldStart], v = vnodes[start]
if (o === v) oldStart++, start++
else if (o != null && v != null && o.key === v.key) {
oldStart++, start++
updateNode(parent, o, v, hooks, getNextSibling(old, oldStart, nextSibling), recycling)
if (recycling) insertNode(parent, toFragment(o), nextSibling)
}
else {
var o = old[oldEnd]
if (o === v) oldEnd--, start++
else if (o != null && v != null && o.key === v.key) {
updateNode(parent, o, v, hooks, getNextSibling(old, oldEnd + 1, nextSibling), recycling)
insertNode(parent, toFragment(o), getNextSibling(old, oldStart, nextSibling))
oldEnd--, start++
}
else break
}
}
while (oldEnd >= oldStart && end >= start) {
var o = old[oldEnd], v = vnodes[end]
if (o === v) oldEnd--, end--
else if (o != null && v != null && o.key === v.key) {
updateNode(parent, o, v, hooks, getNextSibling(old, oldEnd + 1, nextSibling), recycling)
if (recycling) insertNode(parent, toFragment(o), nextSibling)
nextSibling = o.dom
oldEnd--, end--
}
else {
if (!map) map = getKeyMap(old, oldEnd)
if (v != null) {
var oldIndex = map[v.key]
if (oldIndex != null) {
var movable = old[oldIndex]
updateNode(parent, movable, v, hooks, getNextSibling(old, oldEnd + 1, nextSibling), recycling)
insertNode(parent, toFragment(movable), nextSibling)
old[oldIndex].skip = true
nextSibling = movable.dom
}
else {
var dom = createNode(v, hooks)
insertNode(parent, dom, nextSibling)
nextSibling = dom
}
}
end--
}
if (end < start) break
}
createNodes(parent, vnodes, start, end + 1, hooks, nextSibling)
removeNodes(parent, old, oldStart, oldEnd + 1, vnodes)
}
}
function updateNode(parent, old, vnode, hooks, nextSibling, recycling) {
var oldTag = old.tag, tag = vnode.tag
if (oldTag === tag) {
vnode.state = old.state
vnode.events = old.events
if (shouldUpdate(vnode, old)) return
if (vnode.attrs != null) {
updateLifecycle(vnode.attrs, vnode, hooks, recycling)
}
if (typeof oldTag === "string") {
switch (oldTag) {
case "#": updateText(old, vnode); break
case "<": updateHTML(parent, old, vnode, nextSibling); break
case "[": updateFragment(parent, old, vnode, hooks, nextSibling); break
default: updateElement(old, vnode, hooks)
}
}
else updateComponent(parent, old, vnode, hooks, nextSibling, recycling)
}
else {
removeNode(parent, old, null, false)
insertNode(parent, createNode(vnode, hooks), nextSibling)
}
}
function updateText(old, vnode) {
if (old.children.toString() !== vnode.children.toString()) {
old.dom.nodeValue = vnode.children
}
vnode.dom = old.dom
}
function updateHTML(parent, old, vnode, nextSibling) {
if (old.children !== vnode.children) {
toFragment(old)
insertNode(parent, createHTML(vnode), nextSibling)
}
else vnode.dom = old.dom
}
function updateFragment(parent, old, vnode, hooks, nextSibling) {
updateNodes(parent, old.children, vnode.children, hooks, nextSibling)
var domSize = 0, children = vnode.children
vnode.dom = null
if (children != null) {
for (var i = 0; i < children.length; i++) {
var child = children[i]
if (child != null) {
if (vnode.dom == null) vnode.dom = child.dom
domSize += child.domSize || 1
}
}
if (domSize !== 1) vnode.domSize = domSize
}
}
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
}
else {
if (old.text != null) old.children = [Node("#", undefined, undefined, old.text, undefined, old.dom.firstChild)]
if (vnode.text != null) vnode.children = [Node("#", undefined, undefined, vnode.text, undefined, undefined)]
updateNodes(element, old.children, vnode.children, hooks, null)
}
}
function updateComponent(parent, old, vnode, hooks, nextSibling, recycling) {
vnode.instance = Node.normalize(vnode.tag.view.call(vnode.state, vnode))
updateLifecycle(vnode.tag, vnode, hooks, recycling)
updateNode(parent, old.instance, vnode.instance, hooks, nextSibling, recycling)
vnode.dom = vnode.instance.dom
vnode.domSize = vnode.instance.domSize
}
function isRecyclable(old, vnodes) {
if (old.pool != null && Math.abs(old.pool.length - vnodes.length) <= Math.abs(old.length - vnodes.length)) {
var oldChildrenLength = old[0] && old[0].children && old[0].children.length || 0
var poolChildrenLength = old.pool[0] && old.pool[0].children && old.pool[0].children.length || 0
var vnodesChildrenLength = vnodes[0] && vnodes[0].children && vnodes[0].children.length || 0
if (Math.abs(poolChildrenLength - vnodesChildrenLength) <= Math.abs(oldChildrenLength - vnodesChildrenLength)) {
return true
}
}
return false
}
function getKeyMap(vnodes, end) {
var map = {}, i = 0
for (var i = 0; i < end; i++) {
var vnode = vnodes[i]
if (vnode != null) {
var key = vnode.key
if (key != null) map[key] = i
}
}
return map
}
function toFragment(vnode) {
var count = vnode.domSize
if (count != null) {
var fragment = $doc.createDocumentFragment()
if (count > 0) {
var dom = vnode.dom
while (--count) fragment.appendChild(dom.nextSibling)
fragment.insertBefore(dom, fragment.firstChild)
}
return fragment
}
else return vnode.dom
}
function getNextSibling(vnodes, i, nextSibling) {
for (; i < vnodes.length; i++) {
if (vnodes[i] != null) return vnodes[i].dom
}
return nextSibling
}
function insertNode(parent, dom, nextSibling) {
if (nextSibling && nextSibling.parentNode) parent.insertBefore(dom, nextSibling)
else parent.appendChild(dom)
}
//remove
function removeNodes(parent, vnodes, start, end, context) {
for (var i = start; i < end; i++) {
var vnode = vnodes[i]
if (vnode != null) {
if (vnode.skip) vnode.skip = undefined
else removeNode(parent, vnode, context, false)
}
}
}
function removeNode(parent, vnode, context, deferred) {
if (deferred === false) {
var expected = 0, called = 0
var callback = function() {
if (++called === expected) removeNode(parent, vnode, context, true)
}
if (vnode.attrs && vnode.attrs.onbeforeremove) {
expected++
vnode.attrs.onbeforeremove.call(vnode, vnode, callback)
}
if (typeof vnode.tag !== "string" && vnode.tag.onbeforeremove) {
expected++
vnode.tag.onbeforeremove.call(vnode, vnode, callback)
}
if (expected > 0) return
}
onremove(vnode)
if (vnode.dom) {
var count = vnode.domSize || 1
if (count > 1) {
var dom = vnode.dom
while (--count) {
parent.removeChild(dom.nextSibling)
}
}
if (vnode.dom.parentNode != null) parent.removeChild(vnode.dom)
if (context != null && vnode.domSize == null && !hasIntegrationMethods(vnode)) { //TODO test custom elements
if (!context.pool) context.pool = [vnode]
else context.pool.push(vnode)
}
}
}
function onremove(vnode) {
if (vnode.attrs && vnode.attrs.onremove) vnode.attrs.onremove.call(vnode.state, vnode)
if (typeof vnode.tag !== "string" && vnode.tag.onremove) vnode.tag.onremove.call(vnode.state, vnode)
var children = vnode.children
if (children instanceof Array) {
for (var i = 0; i < children.length; i++) {
var child = children[i]
if (child != null) onremove(child)
}
}
}
//attrs
function setAttrs(vnode, attrs) {
for (var key in attrs) {
setAttr(vnode, key, null, attrs[key])
}
}
function setAttr(vnode, key, old, value) {
var element = vnode.dom
if (key === "key" || (old === value && !isFormAttribute(vnode, key)) || 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") updateEvent(vnode, key, value)
else if (key === "style") updateStyle(element, old, value)
else if (key in element && !isAttribute(key) && vnode.ns === undefined) {
//setting input[value] to same value by typing on focused element moves cursor to end in Chrome
if (vnode.tag === "input" && key === "value" && vnode.dom.value === value && vnode.dom === $doc.activeElement) return
element[key] = value
}
else {
if (typeof value === "boolean") {
if (value) element.setAttribute(key, "")
else element.removeAttribute(key)
}
else element.setAttribute(key === "className" ? "class" : 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 && old[key], attrs[key])
}
}
if (old != null) {
for (var key in old) {
if (attrs == null || !(key in attrs)) {
if (key !== "key") vnode.dom.removeAttribute(key)
}
}
}
}
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"
}
function isAttribute(attr) {
return attr === "href" || attr === "list" || attr === "form"// || attr === "type" || attr === "width" || attr === "height"
}
function hasIntegrationMethods(vnode) {
return vnode.attrs != null && (vnode.attrs.oncreate || vnode.attrs.onupdate || vnode.attrs.onbeforeremove || vnode.attrs.onremove)
}
//style
function updateStyle(element, old, style) {
if (style == null) element.style = ""
else if (typeof style === "string") element.style = style
else {
if (typeof old === "string") element.style = ""
for (var key in style) {
element.style[key] = style[key]
}
if (old != null && typeof old !== "string") {
for (var key in old) {
if (!(key in style)) element.style[key] = ""
}
}
}
}
//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) {
if (source.oninit != null) source.oninit.call(vnode.state, vnode)
if (source.oncreate != null) hooks.push(source.oncreate.bind(vnode.state, vnode))
}
function updateLifecycle(source, vnode, hooks, recycling) {
if (recycling) initLifecycle(source, vnode, hooks)
else if (source.onupdate != null) hooks.push(source.onupdate.bind(vnode.state, vnode))
}
function shouldUpdate(vnode, old) {
var forceVnodeUpdate, forceComponentUpdate
if (vnode.attrs != null && typeof vnode.attrs.shouldUpdate === "function") forceVnodeUpdate = vnode.attrs.shouldUpdate.call(vnode.state, vnode, old)
if (typeof vnode.tag !== "string" && typeof vnode.tag.shouldUpdate === "function") forceComponentUpdate = vnode.tag.shouldUpdate.call(vnode.state, vnode, old)
if (!(forceVnodeUpdate === undefined && forceComponentUpdate === undefined) && !forceVnodeUpdate && !forceComponentUpdate) {
vnode.dom = old.dom
vnode.domSize = old.domSize
vnode.instance = old.instance
return true
}
return false
}
function copy(data) {
if (data instanceof Array) {
var output = []
for (var i = 0; i < data.length; i++) output[i] = copy(data[i])
return output
}
else if (typeof data === "object") {
var output = {}
for (var i in data) output[i] = copy(data[i])
return output
}
return data
}
function render(dom, vnodes) {
var hooks = []
var active = $doc.activeElement
if (dom.vnodes == null) dom.vnodes = []
if (!(vnodes instanceof Array)) vnodes = [vnodes]
updateNodes(dom, dom.vnodes, Node.normalizeChildren(vnodes), hooks, null)
for (var i = 0; i < hooks.length; i++) hooks[i]()
dom.vnodes = vnodes
if ($doc.activeElement !== active) active.focus()
}
return {render: render, setEventCallback: setEventCallback}
}
var throttle = function(callback) {
//60fps translates to 16.6ms, round it down since setTimeout requires int
var time = 16
var last = 0, pending = null
var timeout = typeof requestAnimationFrame === "function" ? requestAnimationFrame : setTimeout
return function(synchronous) {
var now = new Date().getTime()
var diff = now - last
if (synchronous === true || last === 0 || now - last >= time) {
last = now
callback()
}
else if (pending === null) {
pending = timeout(function() {
pending = 0
callback()
last = new Date().getTime()
}, time - (now - last))
}
}
}
;
var createMounter = function($window, redraw) {
var renderer = createRenderer($window)
return function(root, component) {
var renderer = createRenderer($window)
var draw = limiter($window, function draw() {
var run = throttle(function() {
renderer.render(root, {tag: component})
})
renderer.setEventCallback(draw)
renderer.setEventCallback(run)
redraw.run = draw
draw()
redraw.run = run
run()
}
}
@ -800,14 +1279,15 @@ var createRouterInstance = function($window, redraw) {
var renderer = createRenderer($window)
var router = createRouter($window)
var route = function(root, defaultRoute, routes) {
var replay = limiter($window, router.defineRoutes(routes, function(component, args) {
var replay = router.defineRoutes(routes, function(component, args) {
renderer.render(root, {tag: component, attrs: args})
}, function() {
router.setPath(defaultRoute)
}))
})
var run = throttle(replay)
renderer.setEventCallback(replay)
redraw.run = replay
renderer.setEventCallback(run)
redraw.run = run
}
route.link = router.link
route.prefix = router.setPrefix
@ -933,6 +1413,7 @@ m.redraw = function() {
redraw.run()
}
m.trust = trust
m.render = createRenderer(window).render
m.mount = createMounter(window, redraw)
m.route = createRouterInstance(window, redraw)
m.request = createRequester(window, Promise).ajax

2
render/render.js
View file

@ -345,7 +345,6 @@ module.exports = function($window) {
}
}
function setAttr(vnode, key, old, value) {
//TODO test input undo history
var element = vnode.dom
if (key === "key" || (old === value && !isFormAttribute(vnode, key)) || typeof value === "undefined" || isLifecycleMethod(key)) return
var nsLastIndex = key.indexOf(":")
@ -355,6 +354,7 @@ module.exports = function($window) {
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) {
//setting input[value] to same value by typing on focused element moves cursor to end in Chrome
if (vnode.tag === "input" && key === "value" && vnode.dom.value === value && vnode.dom === $doc.activeElement) return
element[key] = value
}

2
render/tests/test-event.js
View file

@ -60,7 +60,7 @@ o.spec("event", function() {
o("handles ontransitionend", function() {
var spy = o.spy()
var div = {tag: "div", attrs: {ontransitionend: spy}}
var e = $window.document.createEvent("AnimationEvent")
var e = $window.document.createEvent("HTMLEvents")
e.initEvent("transitionend", true, true)
render(root, [div])

0
render/tests/test-style.js
View file

40
test-input.html
View file

@ -1,40 +0,0 @@
<!doctype html>
<html>
<head></head>
<body>
<textarea id="t">aaa</textarea>
<select multiple id="aaa">
<option value="a">aaa</option>
<option value="b">bbb</option>
<option value="c">ccc</option>
</select>
<div id="root"></div>
<pre id="a"></pre>
<script src="./module/module.js"></script>
<script src="./render/node.js"></script>
<script src="./render/hyperscript.js"></script>
<script src="./render/render.js"></script>
<script type="text/javascript">
var m = require("./render/hyperscript")
var render = require("./render/render")(window, run).render
var value = "asd"
function run() {
console.log("rendering...")
render(root, [
m("textarea", {oninput: (e) => e}, value)
])
}
run()
//setInterval(()=> console.log(document.activeElement), 1000)
var el = document.createElement("br")
var txt = document.createTextNode("ccc")
t.appendChild(el)
t.appendChild(txt)
</script>
</body>
</html>

2
test-utils/tests/test-domMock.js
View file

@ -533,7 +533,7 @@ o.spec("domMock", function() {
o.beforeEach(function() {
spy = o.spy()
div = $document.createElement("div")
e = $document.createEvent("AnimationEvent")
e = $document.createEvent("HTMLEvents")
e.initEvent("transitionend", true, true)
$document.body.appendChild(div)