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

fix #1404

Browse source
This commit is contained in:
Leo Horie 2016-12-01 01:45:07 -05:00
parent f7c187eec9
commit 713c25c9c0
24 changed files with 437 additions and 629 deletions
Download patch file Download diff file Expand all files Collapse all files

19
api/autoredraw.js
View file

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

37
api/mount.js
View file

@ -1,23 +1,42 @@
"use strict"
var Vnode = require("../render/vnode")
var autoredraw = require("../api/autoredraw")
module.exports = function(renderer, pubsub) {
module.exports = function(redrawService) {
function throttle(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() {
var now = Date.now()
if (last === 0 || now - last >= time) {
last = now
callback()
}
else if (pending === null) {
pending = timeout(function() {
pending = null
callback()
last = Date.now()
}, time - (now - last))
}
}
}
return function(root, component) {
if (component === null) {
renderer.render(root, [])
pubsub.unsubscribe(root.redraw)
delete root.redraw
redrawService.render(root, [])
redrawService.unsubscribe(root)
return
}
if (component.view == null) throw new Error("m.mount(element, component) expects a component, not a vnode")
var run = autoredraw(root, renderer, pubsub, function() {
renderer.render(root, Vnode(component, undefined, undefined, undefined, undefined, undefined))
var run = throttle(function() {
redrawService.render(root, Vnode(component))
})
redrawService.subscribe(root, run)
run()
}
}

15
api/pubsub.js
View file

@ -1,15 +0,0 @@
"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}
}

26
api/redraw.js Normal file
View file

@ -0,0 +1,26 @@
"use strict"
var coreRenderer = require("../render/render")
module.exports = function($window) {
var renderService = coreRenderer($window)
renderService.setEventCallback(function(e) {
if (e.redraw !== false) redraw()
})
var callbacks = []
function subscribe(key, callback) {
unsubscribe(key)
callbacks.push(key, callback)
}
function unsubscribe(key) {
var index = callbacks.indexOf(key)
if (index > -1) callbacks.splice(index, 2)
}
function redraw() {
for (var i = 1; i < callbacks.length; i += 2) {
callbacks[i]()
}
}
return {subscribe: subscribe, unsubscribe: unsubscribe, redraw: redraw, render: renderService.render}
}

79
api/router.js
View file

@ -3,55 +3,44 @@
var Vnode = require("../render/vnode")
var coreRouter = require("../router/router")
module.exports = function($window, mount) {
var router = coreRouter($window)
var currentResolve, currentComponent, currentRender, currentArgs, currentPath
var RouteComponent = {view: function() {
return [currentRender(Vnode(currentComponent, null, currentArgs, undefined, undefined, undefined))]
}}
function defaultRender(vnode) {
return vnode
}
module.exports = function($window, redrawService) {
var routeService = coreRouter($window)
var identity = function(v) {return v}
var current = {render: identity, component: null, path: null, resolve: null}
var route = function(root, defaultRoute, routes) {
currentComponent = "div"
currentRender = defaultRender
currentArgs = null
mount(root, RouteComponent)
router.defineRoutes(routes, function(payload, args, path) {
var isResolver = typeof payload.view !== "function"
var render = defaultRender
var resolve = currentResolve = function (component) {
if (resolve !== currentResolve) return
currentResolve = null
currentComponent = component != null ? component : isResolver ? "div" : payload
currentRender = render
currentArgs = args
currentPath = path
root.redraw(true)
if (root == null) throw new Error("Ensure the DOM element that was passed to `m.route` is not undefined")
var render = function(resolver, component, params, path) {
current.render = resolver.render || identity
current.component = component
current.path = path
current.resolve = null
redrawService.render(root, current.render(Vnode(component, undefined, params)))
}
var run = routeService.defineRoutes(routes, function(component, params, path, route, isRouteChange) {
if (component.view) render({}, component, params, path)
else {
if (component.onmatch) {
if (isRouteChange === false && current.path === path || current.resolve != null) render(current, current.component, params)
else {
current.resolve = function(resolved) {
render(component, resolved, params, path)
}
component.onmatch(function(resolved) {
if (current.path !== path && current.resolve != null) current.resolve(resolved)
}, params, path)
}
}
else render(component, "div", params, path)
}
var onmatch = function() {
resolve()
}
if (isResolver) {
if (typeof payload.render === "function") render = payload.render.bind(payload)
if (typeof payload.onmatch === "function") onmatch = payload.onmatch
}
onmatch.call(payload, resolve, args, path)
}, function() {
router.setPath(defaultRoute, null, {replace: true})
routeService.setPath(defaultRoute)
})
redrawService.subscribe(root, run)
}
route.link = router.link
route.prefix = router.setPrefix
route.set = router.setPath
route.get = function() {return currentPath}
route.set = routeService.setPath
route.get = function() {return current.path}
route.prefix = routeService.setPrefix
route.link = routeService.link
return route
}

10
api/tests/index.html
View file

@ -14,7 +14,7 @@
<script src="../../test-utils/xhrMock.js"></script>
<script src="../../test-utils/browserMock.js"></script>
<script src="../../util/stream.js"></script>
<script src="../../promise/promise.js"></script>
<script src="../../render/vnode.js"></script>
<script src="../../render/trust.js"></script>
<script src="../../render/fragment.js"></script>
@ -24,15 +24,11 @@
<script src="../../querystring/parse.js"></script>
<script src="../../request/request.js"></script>
<script src="../../router/router.js"></script>
<script src="../../api/throttle.js"></script>
<script src="../../api/pubsub.js"></script>
<script src="../../api/autoredraw.js"></script>
<script src="../../api/redraw.js"></script>
<script src="../../api/mount.js"></script>
<script src="../../api/router.js"></script>
<script src="./test-throttle.js"></script>
<script src="./test-pubsub.js"></script>
<script src="./test-autoredraw.js"></script>
<script src="./test-redraw.js"></script>
<script src="./test-mount.js"></script>
<script src="./test-router.js"></script>

95
api/tests/test-autoredraw.js
View file

@ -1,95 +0,0 @@
"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("null renderer doesn't throw", function(done) {
autoredraw(root, null, pubsub, spy)
done()
})
o("null pubsub doesn't throw", function(done) {
autoredraw(root, renderer, null, spy)
done()
})
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("re-registering pubsub works", function() {
autoredraw(root, renderer, pubsub, spy)
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)
})
o("does not redraw if e.redraw is false", function() {
autoredraw(root, renderer, pubsub, spy)
renderer.render(root, {tag: "div", attrs: {onclick: function(e) {e.redraw = false}}})
var e = $window.document.createEvent("MouseEvents")
e.initEvent("click", true, true)
root.firstChild.dispatchEvent(e)
o(spy.callCount).equals(0)
})
})

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

@ -5,20 +5,20 @@ var domMock = require("../../test-utils/domMock")
var m = require("../../render/hyperscript")
var coreRenderer = require("../../render/render")
var apiPubSub = require("../../api/pubsub")
var apiRedraw = require("../../api/redraw")
var apiMounter = require("../../api/mount")
o.spec("mount", function() {
var FRAME_BUDGET = Math.floor(1000 / 60)
var $window, root, redraw, mount, render
var $window, root, redrawService, mount, render
o.beforeEach(function() {
$window = domMock()
root = $window.document.body
redraw = apiPubSub()
mount = apiMounter(coreRenderer($window), redraw)
redrawService = apiRedraw($window)
mount = apiMounter(redrawService)
render = coreRenderer($window).render
})
@ -42,18 +42,16 @@ o.spec("mount", function() {
o(root.firstChild.nodeName).equals("DIV")
})
o("mounting null deletes `redraw` from `root`", function() {
o("mounting null unmounts", function() {
mount(root, {
view : function() {
return m("div")
}
})
o(typeof root.redraw).equals('function')
mount(root, null)
o(typeof root.redraw).equals('undefined')
o(root.childNodes.length).equals(0)
})
o("redraws on events", function(done) {
@ -206,7 +204,7 @@ o.spec("mount", function() {
o(oninit.callCount).equals(1)
o(onupdate.callCount).equals(0)
redraw.publish()
redrawService.redraw()
// Wrapped to give time for the rate-limited redraw to fire
setTimeout(function() {

75
api/tests/test-pubsub.js
View file

@ -1,75 +0,0 @@
"use strict"
var o = require("../../ospec/ospec")
var apiPubSub = require("../../api/pubsub")
o.spec("pubsub", function() {
var pubsub
o.beforeEach(function() {
pubsub = apiPubSub()
})
o("shouldn't error if there are no renderers", function() {
pubsub.publish()
})
o("should run a single renderer entry", function() {
var spy = o.spy()
pubsub.subscribe(spy)
pubsub.publish()
o(spy.callCount).equals(1)
pubsub.publish()
pubsub.publish()
pubsub.publish()
o(spy.callCount).equals(4)
})
o("should run all renderer entries", function() {
var spy1 = o.spy()
var spy2 = o.spy()
var spy3 = o.spy()
pubsub.subscribe(spy1)
pubsub.subscribe(spy2)
pubsub.subscribe(spy3)
pubsub.publish()
o(spy1.callCount).equals(1)
o(spy2.callCount).equals(1)
o(spy3.callCount).equals(1)
pubsub.publish()
o(spy1.callCount).equals(2)
o(spy2.callCount).equals(2)
o(spy3.callCount).equals(2)
})
o("should stop running after unsubscribe", function() {
var spy = o.spy()
pubsub.subscribe(spy)
pubsub.unsubscribe(spy)
pubsub.publish()
o(spy.callCount).equals(0)
})
o("does nothing on invalid unsubscribe", function() {
var spy = o.spy()
pubsub.subscribe(spy)
pubsub.unsubscribe(null)
pubsub.publish()
o(spy.callCount).equals(1)
})
})

82
api/tests/test-redraw.js Normal file
View file

@ -0,0 +1,82 @@
"use strict"
var o = require("../../ospec/ospec")
var domMock = require("../../test-utils/domMock")
var apiRedraw = require("../../api/redraw")
o.spec("redrawService", function() {
var root, redrawService, $document
o.beforeEach(function() {
var $window = domMock()
root = $window.document.body
redrawService = apiRedraw($window)
$document = $window.document
})
o("shouldn't error if there are no renderers", function() {
redrawService.redraw()
})
o("should run a single renderer entry", function() {
var spy = o.spy()
redrawService.subscribe(root, spy)
redrawService.redraw()
o(spy.callCount).equals(1)
redrawService.redraw()
redrawService.redraw()
redrawService.redraw()
o(spy.callCount).equals(4)
})
o("should run all renderer entries", function() {
var el1 = $document.createElement("div")
var el2 = $document.createElement("div")
var el3 = $document.createElement("div")
var spy1 = o.spy()
var spy2 = o.spy()
var spy3 = o.spy()
redrawService.subscribe(el1, spy1)
redrawService.subscribe(el2, spy2)
redrawService.subscribe(el3, spy3)
redrawService.redraw()
o(spy1.callCount).equals(1)
o(spy2.callCount).equals(1)
o(spy3.callCount).equals(1)
redrawService.redraw()
o(spy1.callCount).equals(2)
o(spy2.callCount).equals(2)
o(spy3.callCount).equals(2)
})
o("should stop running after unsubscribe", function() {
var spy = o.spy()
redrawService.subscribe(root, spy)
redrawService.unsubscribe(root, spy)
redrawService.redraw()
o(spy.callCount).equals(0)
})
o("does nothing on invalid unsubscribe", function() {
var spy = o.spy()
redrawService.subscribe(root, spy)
redrawService.unsubscribe(null)
redrawService.redraw()
o(spy.callCount).equals(1)
})
})

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

@ -6,25 +6,23 @@ var browserMock = require("../../test-utils/browserMock")
var m = require("../../render/hyperscript")
var coreRenderer = require("../../render/render")
var apiPubSub = require("../../api/pubsub")
var apiRedraw = require("../../api/redraw")
var apiRouter = require("../../api/router")
var apiMounter = require("../../api/mount")
o.spec("route", function() {
void [{protocol: "http:", hostname: "localhost"}, {protocol: "file:", hostname: "/"}].forEach(function(env) {
void ["#", "?", "", "#!", "?!", "/foo"].forEach(function(prefix) {
o.spec("using prefix `" + prefix + "` starting on " + env.protocol + "//" + env.hostname, function() {
var FRAME_BUDGET = Math.floor(1000 / 60)
var $window, root, redraw, mount, route
var $window, root, redrawService, route
o.beforeEach(function() {
$window = browserMock(env)
root = $window.document.body
redraw = apiPubSub()
mount = apiMounter(coreRenderer($window), redraw)
route = apiRouter($window, mount)
redrawService = apiRedraw($window)
route = apiRouter($window, redrawService)
route.prefix(prefix)
})
@ -59,7 +57,7 @@ o.spec("route", function() {
o(view.callCount).equals(1)
redraw.publish(true)
redrawService.redraw()
o(view.callCount).equals(2)
@ -122,15 +120,15 @@ o.spec("route", function() {
o(oninit.callCount).equals(1)
redraw.publish(true)
redrawService.redraw()
o(onupdate.callCount).equals(1)
})
o("redraws on events", function(done) {
var onupdate = o.spy()
var oninit = o.spy()
var onclick = o.spy()
var oninit = o.spy()
var onclick = o.spy()
var e = $window.document.createEvent("MouseEvents")
e.initEvent("click", true, true)
@ -403,7 +401,7 @@ o.spec("route", function() {
o(matchCount).equals(1)
o(renderCount).equals(1)
redraw.publish(true)
redrawService.redraw()
o(matchCount).equals(1)
o(renderCount).equals(2)
@ -505,7 +503,7 @@ o.spec("route", function() {
o(view.callCount).equals(1)
o(onmatch.callCount).equals(1)
redraw.publish(true)
redrawService.redraw()
o(view.callCount).equals(2)
o(onmatch.callCount).equals(1)
@ -515,7 +513,7 @@ o.spec("route", function() {
})
o("m.route.set(m.route.get()) re-runs the resolution logic (#1180)", function(done){
var onmatch = o.spy(function(resolve){resolve()})
var onmatch = o.spy(function(resolve) {resolve()})
$window.location.href = prefix + "/"
route(root, '/', {

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

@ -1,90 +0,0 @@
"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 = Math.floor(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(done) {
throttled()
throttled()
throttled(true)
o(spy.callCount).equals(2)
setTimeout(function() {
o(spy.callCount).equals(3)
done()
}, FRAME_BUDGET)
})
})

22
api/throttle.js
View file

@ -1,22 +0,0 @@
"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 = Date.now()
if (synchronous === true || last === 0 || now - last >= time) {
last = now
callback()
}
else if (pending === null) {
pending = timeout(function() {
pending = null
callback()
last = Date.now()
}, time - (now - last))
}
}
}