From 71c77ba603ce2ad63a0b5a9d37a6aaecb7b991b6 Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Fri, 20 May 2016 15:27:17 -0700 Subject: [PATCH] Add m.redraw() support for multiple mount points To better match `0.2.x` behavior: https://jsfiddle.net/xbpyqL9k/ --- api/mount.js | 4 +-- api/redraw.js | 12 +++++++++ api/router.js | 4 +-- api/tests/index.html | 2 ++ api/tests/test-mount.js | 24 ++++++++---------- api/tests/test-redraw.js | 55 ++++++++++++++++++++++++++++++++++++++++ api/tests/test-router.js | 15 ++++++----- index.js | 11 ++++---- 8 files changed, 97 insertions(+), 30 deletions(-) create mode 100644 api/redraw.js create mode 100644 api/tests/test-redraw.js diff --git a/api/mount.js b/api/mount.js index b42e3d93..25f8e8eb 100644 --- a/api/mount.js +++ b/api/mount.js @@ -3,7 +3,7 @@ var createRenderer = require("../render/render") var throttle = require("../api/throttle") -module.exports = function($window, redraw) { +module.exports = function($window, renderers) { var renderer = createRenderer($window) return function(root, component) { var run = throttle(function() { @@ -12,7 +12,7 @@ module.exports = function($window, redraw) { renderer.setEventCallback(run) - redraw.run = run + renderers.push(run) run() } } diff --git a/api/redraw.js b/api/redraw.js new file mode 100644 index 00000000..3a87b3df --- /dev/null +++ b/api/redraw.js @@ -0,0 +1,12 @@ +"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]() + } + } +} diff --git a/api/router.js b/api/router.js index 95eef3c1..51da2d58 100644 --- a/api/router.js +++ b/api/router.js @@ -4,7 +4,7 @@ var createRenderer = require("../render/render") var createRouter = require("../router/router") var throttle = require("../api/throttle") -module.exports = function($window, redraw) { +module.exports = function($window, renderers) { var renderer = createRenderer($window) var router = createRouter($window) var route = function(root, defaultRoute, routes) { @@ -16,7 +16,7 @@ module.exports = function($window, redraw) { var run = throttle(replay) renderer.setEventCallback(run) - redraw.run = run + renderers.push(run) } route.link = router.link route.prefix = router.setPrefix diff --git a/api/tests/index.html b/api/tests/index.html index c9217adb..7d211be2 100644 --- a/api/tests/index.html +++ b/api/tests/index.html @@ -19,10 +19,12 @@ + + diff --git a/api/tests/test-mount.js b/api/tests/test-mount.js index 73023878..0308e726 100644 --- a/api/tests/test-mount.js +++ b/api/tests/test-mount.js @@ -8,28 +8,30 @@ var createMounter = require("../mount") o.spec("m.mount", function() { var FRAME_BUDGET = 1000 / 60 - var $window, root + var $window, root, mount, renderers o.beforeEach(function() { $window = domMock() + root = $window.document.body + + renderers = [] + mount = createMounter($window, renderers) }) - o("updates redraw object", function() { - var redraw = {} - var mount = createMounter($window, redraw) - + o("pushes a render function", function() { mount(root, { view : function() { return m("div") } }) - o(typeof redraw.run).equals("function") + o(renderers.length).equals(1) + o(typeof renderers[0]).equals("function") }) o("renders into `root`", function() { - var mount = createMounter($window, {}) + var mount = createMounter($window, []) mount(root, { view : function() { @@ -44,7 +46,6 @@ o.spec("m.mount", function() { var onupdate = o.spy() var oninit = o.spy() var onclick = o.spy() - var mount = createMounter($window, {}) var e = $window.document.createEvent("MouseEvents") e.initEvent("click", true, true) @@ -80,7 +81,6 @@ o.spec("m.mount", function() { o("event handlers can skip redraw", function(done) { var onupdate = o.spy() var oninit = o.spy() - var mount = createMounter($window, {}) var e = $window.document.createEvent("MouseEvents") e.initEvent("click", true, true) @@ -109,11 +109,9 @@ o.spec("m.mount", function() { }, 20) }) - o("redraws on redraw.run()", function(done) { + o("redraws when the render function is run", function(done) { var onupdate = o.spy() var oninit = o.spy() - var redraw = {} - var mount = createMounter($window, redraw) mount(root, { view : function() { @@ -127,7 +125,7 @@ o.spec("m.mount", function() { o(oninit.callCount).equals(1) o(onupdate.callCount).equals(0) - redraw.run() + renderers[0]() // Wrapped to give time for the rate-limited redraw to fire setTimeout(function() { diff --git a/api/tests/test-redraw.js b/api/tests/test-redraw.js new file mode 100644 index 00000000..f126117a --- /dev/null +++ b/api/tests/test-redraw.js @@ -0,0 +1,55 @@ +"use strict" + +var o = require("../../ospec/ospec") +var createRedraw = require("../../api/redraw") + +o.spec("m.redraw", function() { + var redraw, renderers + + o.beforeEach(function() { + renderers = [] + redraw = createRedraw(renderers) + }) + + o("it shouldn't error if there are no renderers", function() { + redraw() + }) + + o("it should run a single renderer entry", function() { + var spy = o.spy() + + renderers.push(spy) + + redraw() + + o(spy.callCount).equals(1) + + redraw() + redraw() + redraw() + + o(spy.callCount).equals(4) + }) + + o("it should run all renderer entries", function() { + var spy1 = o.spy() + var spy2 = o.spy() + var spy3 = o.spy() + + renderers.push(spy1, spy2, spy3) + + redraw() + + o(spy1.callCount).equals(1) + o(spy2.callCount).equals(1) + o(spy3.callCount).equals(1) + + redraw() + redraw() + redraw() + + o(spy1.callCount).equals(4) + o(spy2.callCount).equals(4) + o(spy3.callCount).equals(4) + }) +}) diff --git a/api/tests/test-router.js b/api/tests/test-router.js index 5f27b176..eff4d95e 100644 --- a/api/tests/test-router.js +++ b/api/tests/test-router.js @@ -9,7 +9,7 @@ var router = require("../../api/router") o.spec("m.route", function() { var FRAME_BUDGET = 1000 / 60 - var $window, root, route, redraw + var $window, root, route, renderers o.beforeEach(function() { $window = {} @@ -22,11 +22,11 @@ o.spec("m.route", function() { root = $window.document.body - redraw = {} - route = router($window, redraw) + renderers = [] + route = router($window, renderers) }) - o("updates redraw object", function() { + o("pushes a render function", function() { route(root, "/", { "/" : { view: function() { @@ -35,7 +35,8 @@ o.spec("m.route", function() { } }) - o(typeof redraw.run).equals("function") + o(renderers.length).equals(1) + o(typeof renderers[0]).equals("function") }) o("renders into `root`", function() { @@ -50,7 +51,7 @@ o.spec("m.route", function() { o(root.firstChild.nodeName).equals("DIV") }) - o("redraws on redraw.run()", function(done) { + o("redraws when render function is executed", function(done) { var onupdate = o.spy() var oninit = o.spy() @@ -67,7 +68,7 @@ o.spec("m.route", function() { o(oninit.callCount).equals(1) - redraw.run() + renderers[0]() // Wrapped to give time for the rate-limited redraw to fire setTimeout(function() { diff --git a/index.js b/index.js index 3fd438ac..40a5300a 100644 --- a/index.js +++ b/index.js @@ -3,18 +3,17 @@ var m = require("./render/hyperscript") var trust = require("./render/trust") var createRenderer = require("./render/render") +var createRedraw = require("./api/redraw") var createMounter = require("./api/mount") var createRouterInstance = require("./api/router") var createRequester = require("./request/request") -var redraw = {run: function() {}} +var renderers = [] -m.redraw = function() { - redraw.run() -} +m.redraw = createRedraw(renderers) m.trust = trust m.render = createRenderer(window).render -m.mount = createMounter(window, redraw) -m.route = createRouterInstance(window, redraw) +m.mount = createMounter(window, renderers) +m.route = createRouterInstance(window, renderers) m.request = createRequester(window, Promise).ajax module.exports = m