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

refactor redraw into pubsub and autoredraw

Browse source 
- pubsub is a basic pubsub impl
- autoredraw is glue code to register callback to pubsub and onevent

moved e.redraw to autoredraw
This commit is contained in:
Leo Horie 2016-05-21 00:37:34 -04:00
parent db46bb4414
commit 0005cf26ee
13 changed files with 149 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

17
api/autoredraw.js Normal file
View file

@ -0,0 +1,17 @@
"use strict"
var throttle = require("../api/throttle")
module.exports = function(root, renderer, pubsub, callback) {
var run = throttle(callback)
renderer.setEventCallback(function(e) {
if (e.redraw !== false) run()
})
if (pubsub != null) {
if (root.redraw) pubsub.unsubscribe(root.redraw)
pubsub.subscribe(run)
}
return root.redraw = run
}

9
api/mount.js
View file

@ -1,18 +1,15 @@
"use strict"
var coreRenderer = require("../render/render")
var throttle = require("../api/throttle")
var autoredraw = require("../api/autoredraw")
module.exports = function($window, renderers) {
module.exports = function($window, pubsub) {
var renderer = coreRenderer($window)
return function(root, component) {
var run = throttle(function() {
var run = autoredraw(root, renderer, pubsub, function() {
renderer.render(root, {tag: component})
})
renderer.setEventCallback(run)
renderers.push(run)
run()
}
}

15
api/pubsub.js Normal file
View file

@ -0,0 +1,15 @@
"use strict"
module.exports = function() {
var callbacks = []
function unsubscribe(callback) {
var index = callbacks.indexOf(callback)
if (index > -1) callbacks.splice(index, 1)
}
function publish() {
for (var i = 0; i < callbacks.length; i++) {
callbacks[i].apply(this, arguments)
}
}
return {subscribe: callbacks.push.bind(callbacks), unsubscribe: unsubscribe, publish: publish}
}

12
api/redraw.js
View file

@ -1,12 +0,0 @@
"use strict"
module.exports = function(renderers) {
return function() {
if (renderers.length === 0) return
if (renderers.length === 1) return renderers[0]()
for (var i = 0; i < renderers.length; i++) {
renderers[i]()
}
}
}

9
api/router.js
View file

@ -2,9 +2,9 @@
var coreRenderer = require("../render/render")
var coreRouter = require("../router/router")
var throttle = require("../api/throttle")
var autoredraw = require("../api/autoredraw")
module.exports = function($window, renderers) {
module.exports = function($window, pubsub) {
var renderer = coreRenderer($window)
var router = coreRouter($window)
var route = function(root, defaultRoute, routes) {
@ -13,10 +13,7 @@ module.exports = function($window, renderers) {
}, function() {
router.setPath(defaultRoute)
})
var run = throttle(replay)
renderer.setEventCallback(run)
renderers.push(run)
autoredraw(root, renderer, pubsub, replay)
}
route.link = router.link
route.prefix = router.setPrefix

12
api/tests/index.html
View file

@ -19,13 +19,15 @@
<script src="../../querystring/parse.js"></script>
<script src="../../request/request.js"></script>
<script src="../../router/router.js"></script>
<script src="../redraw.js"></script>
<script src="../throttle.js"></script>
<script src="../mount.js"></script>
<script src="../router.js"></script>
<script src="../../api/throttle.js"></script>
<script src="../../api/pubsub.js"></script>
<script src="../../api/autoredraw.js"></script>
<script src="../../api/mount.js"></script>
<script src="../../api/router.js"></script>
<script src="./test-redraw.js"></script>
<script src="./test-throttle.js"></script>
<script src="./test-pubsub.js"></script>
<script src="./test-autoredraw.js"></script>
<script src="./test-mount.js"></script>
<script src="./test-router.js"></script>

63
api/tests/test-autoredraw.js Normal file
View file

@ -0,0 +1,63 @@
"use strict"
var o = require("../../ospec/ospec")
var domMock = require("../../test-utils/domMock")
var coreRenderer = require("../../render/render")
var apiPubSub = require("../../api/pubsub")
var autoredraw = require("../../api/autoredraw")
o.spec("autoredraw", function() {
var FRAME_BUDGET = Math.floor(1000 / 60)
var $window, root, renderer, pubsub, spy
o.beforeEach(function() {
$window = domMock()
root = $window.document.body
renderer = coreRenderer($window)
pubsub = apiPubSub()
spy = o.spy()
})
o("returns self-trigger", function() {
var run = autoredraw(root, renderer, pubsub, spy)
run()
o(spy.callCount).equals(1)
})
o("registers onevent", function() {
autoredraw(root, renderer, pubsub, spy)
renderer.render(root, {tag: "div", attrs: {onclick: function() {}}})
var e = $window.document.createEvent("MouseEvents")
e.initEvent("click", true, true)
root.firstChild.dispatchEvent(e)
o(spy.callCount).equals(1)
})
o("registers pubsub", function() {
autoredraw(root, renderer, pubsub, spy)
pubsub.publish()
o(spy.callCount).equals(1)
})
o("throttles", function(done) {
var run = autoredraw(root, renderer, pubsub, spy)
run()
run()
o(spy.callCount).equals(1)
setTimeout(function() {
o(spy.callCount).equals(2)
done()
}, FRAME_BUDGET)
})
})

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

@ -4,35 +4,23 @@ var o = require("../../ospec/ospec")
var domMock = require("../../test-utils/domMock")
var m = require("../../render/hyperscript")
var apiPubSub = require("../../api/pubsub")
var apiMounter = require("../../api/mount")
o.spec("m.mount", function() {
o.spec("mount", function() {
var FRAME_BUDGET = Math.floor(1000 / 60)
var $window, root, mount, renderers
var $window, root, redraw, mount
o.beforeEach(function() {
$window = domMock()
root = $window.document.body
renderers = []
mount = apiMounter($window, renderers)
})
o("pushes a render function", function() {
mount(root, {
view : function() {
return m("div")
}
})
o(renderers.length).equals(1)
o(typeof renderers[0]).equals("function")
redraw = apiPubSub()
mount = apiMounter($window, redraw)
})
o("renders into `root`", function() {
var mount = apiMounter($window, [])
mount(root, {
view : function() {
return m("div")
@ -106,7 +94,7 @@ o.spec("m.mount", function() {
o(onupdate.callCount).equals(0)
done()
}, 20)
}, FRAME_BUDGET)
})
o("redraws when the render function is run", function(done) {
@ -125,7 +113,7 @@ o.spec("m.mount", function() {
o(oninit.callCount).equals(1)
o(onupdate.callCount).equals(0)
renderers[0]()
redraw.publish()
// Wrapped to give time for the rate-limited redraw to fire
setTimeout(function() {

38
api/tests/test-redraw.js → api/tests/test-pubsub.js
View file

@ -1,32 +1,30 @@
"use strict"
var o = require("../../ospec/ospec")
var createRedraw = require("../../api/redraw")
var apiPubSub = require("../../api/pubsub")
o.spec("m.redraw", function() {
var redraw, renderers
o.spec("pubsub", function() {
var pubsub
o.beforeEach(function() {
renderers = []
redraw = createRedraw(renderers)
pubsub = apiPubSub()
})
o("it shouldn't error if there are no renderers", function() {
redraw()
pubsub.publish()
})
o("it should run a single renderer entry", function() {
var spy = o.spy()
renderers.push(spy)
pubsub.subscribe(spy)
redraw()
pubsub.publish()
o(spy.callCount).equals(1)
redraw()
redraw()
redraw()
pubsub.publish()
pubsub.publish()
pubsub.publish()
o(spy.callCount).equals(4)
})
@ -36,20 +34,20 @@ o.spec("m.redraw", function() {
var spy2 = o.spy()
var spy3 = o.spy()
renderers.push(spy1, spy2, spy3)
pubsub.subscribe(spy1)
pubsub.subscribe(spy2)
pubsub.subscribe(spy3)
redraw()
pubsub.publish()
o(spy1.callCount).equals(1)
o(spy2.callCount).equals(1)
o(spy3.callCount).equals(1)
redraw()
redraw()
redraw()
pubsub.publish()
o(spy1.callCount).equals(4)
o(spy2.callCount).equals(4)
o(spy3.callCount).equals(4)
o(spy1.callCount).equals(2)
o(spy2.callCount).equals(2)
o(spy3.callCount).equals(2)
})
})

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

@ -5,11 +5,12 @@ var pushStateMock = require("../../test-utils/pushStateMock")
var domMock = require("../../test-utils/domMock")
var m = require("../../render/hyperscript")
var apiPubSub = require("../../api/pubsub")
var apiRouter = require("../../api/router")
o.spec("m.route", function() {
o.spec("route", function() {
var FRAME_BUDGET = Math.floor(1000 / 60)
var $window, root, route, renderers
var $window, root, redraw, route
o.beforeEach(function() {
$window = {}
@ -22,21 +23,8 @@ o.spec("m.route", function() {
root = $window.document.body
renderers = []
route = apiRouter($window, renderers)
})
o("pushes a render function", function() {
route(root, "/", {
"/" : {
view: function() {
return m("div")
}
}
})
o(renderers.length).equals(1)
o(typeof renderers[0]).equals("function")
redraw = apiPubSub()
route = apiRouter($window, redraw)
})
o("renders into `root`", function() {
@ -68,7 +56,7 @@ o.spec("m.route", function() {
o(oninit.callCount).equals(1)
renderers[0]()
redraw.publish()
// Wrapped to give time for the rate-limited redraw to fire
setTimeout(function() {
@ -146,7 +134,7 @@ o.spec("m.route", function() {
o(onupdate.callCount).equals(0)
done()
}, 20)
}, FRAME_BUDGET)
})
o("changes location on route.link", function() {

8
api/tests/test-throttle.js
View file

@ -81,12 +81,4 @@ o.spec("throttle", function() {
o(spy.callCount).equals(2)
})
o("it supports aborting when redraw is falsey", function() {
throttled({ redraw : false })
throttled({ redraw : 0 })
throttled({ redraw : "" })
o(spy.callCount).equals(0)
})
})

1
api/throttle.js
View file

@ -7,7 +7,6 @@ module.exports = function(callback) {
var timeout = typeof requestAnimationFrame === "function" ? requestAnimationFrame : setTimeout
return function(synchronous) {
var now = new Date().getTime()
if (typeof synchronous === "object" && "redraw" in synchronous && !synchronous.redraw) return
if (synchronous === true || last === 0 || now - last >= time) {
last = now
callback()