From fe2489df58031885ed9bf701b2cc0a424d4fe25b Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Wed, 7 Dec 2016 10:07:01 -0800 Subject: [PATCH 1/4] Data -> state --- docs/withAttr.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/withAttr.md b/docs/withAttr.md index ac000a22..4a9fd44b 100644 --- a/docs/withAttr.md +++ b/docs/withAttr.md @@ -63,18 +63,18 @@ document.body.onclick = m.withAttr("title", function(value) { Typically, `m.withAttr()` can be used in Mithril component views to avoid polluting the data layer with DOM event model concerns: ```javascript -var Data = { +var state = { email: "", setEmail: function(email) { - Data.email = email.toLowerCase() + state.email = email.toLowerCase() } } var MyComponent = { view: function() { return m("input", { - oninput: m.withAttr("value", Data.setEmail), - value: Data.email + oninput: m.withAttr("value", state.setEmail), + value: state.email }) } } @@ -89,15 +89,15 @@ m.mount(document.body, MyComponent) The `m.withAttr()` helper reads the value of the element to which the event handler is bound, which is not necessarily the same as the element where the event originated. ```javascript -var Data = { +var state = { url: "", - setURL: function(url) {Data.url = url} + setURL: function(url) {state.url = url} } var MyComponent = { view: function() { - return m("a[href='/foo']", {onclick: m.withAttr("href", Data.setURL)}, [ - m("span", Data.url) + return m("a[href='/foo']", {onclick: m.withAttr("href", state.setURL)}, [ + m("span", state.url) ]) } } @@ -117,21 +117,21 @@ The first argument of `m.withAttr()` can be either an attribute or a property. ```javascript // reads from `select.selectedIndex` property -var Data = { +var state = { index: 0, - setIndex: function(index) {Data.index = index} + setIndex: function(index) {state.index = index} } -m("select", {onclick: m.withAttr("selectedIndex", Data.setIndex)}) +m("select", {onclick: m.withAttr("selectedIndex", state.setIndex)}) ``` If a value can be both an attribute *and* a property, the property value is used. ```javascript // value is a boolean, because the `input.checked` property is boolean -var Data = { +var state = { selected: false, - setSelected: function(selected) {Data.selected = selected} + setSelected: function(selected) {state.selected = selected} } -m("input[type=checkbox]", {onclick: m.withAttr("checked", Data.setSelected)}) +m("input[type=checkbox]", {onclick: m.withAttr("checked", state.setSelected)}) ``` From f8bb81f539e8f83b856e1f28353f8e80d4e39650 Mon Sep 17 00:00:00 2001 From: Pierre-Yves Gerardy Date: Wed, 7 Dec 2016 23:03:39 +0100 Subject: [PATCH 2/4] [api/router] simplify the route finalization logic --- api/router.js | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/api/router.js b/api/router.js index ade067ec..1e1650d5 100644 --- a/api/router.js +++ b/api/router.js @@ -8,11 +8,11 @@ module.exports = function($window, redrawService) { var routeService = coreRouter($window) var identity = function(v) {return v} - var routing = false, render, component, attrs, currentPath, resolve + var render, component, attrs, currentPath, updatePending = false var route = function(root, defaultRoute, routes) { if (root == null) throw new Error("Ensure the DOM element that was passed to `m.route` is not undefined") var update = function(routeResolver, comp, params, path) { - component = comp != null && typeof comp.view === "function" ? comp : "div", attrs = params, currentPath = path, resolve = null + component = comp != null && typeof comp.view === "function" ? comp : "div", attrs = params, currentPath = path, updatePending = false render = (routeResolver.render || identity).bind(routeResolver) run() } @@ -26,15 +26,10 @@ module.exports = function($window, redrawService) { if (payload.view) update({}, payload, params, path) else { if (payload.onmatch) { - if (resolve != null) update(payload, component, params, path) - else { - resolve = function(resolved) { - update(payload, resolved, params, path) - } - Promise.resolve(payload.onmatch(params, path)).then(function(resolved) { - if (resolve != null) resolve(resolved) - }, bail) - } + updatePending = true + Promise.resolve(payload.onmatch(params, path)).then(function(resolved) { + if (updatePending) update(payload, resolved, params, path) + }, bail) } else update(payload, "div", params, path) } @@ -42,8 +37,8 @@ module.exports = function($window, redrawService) { redrawService.subscribe(root, run) } route.set = function(path, data, options) { - if (resolve != null) options = {replace: true} - resolve = null + if (updatePending) options = {replace: true} + updatePending = false routeService.setPath(path, data, options) } route.get = function() {return currentPath} From 48d786b08553d5463d8ed14e6fb6c95610801520 Mon Sep 17 00:00:00 2001 From: Gandalf-the-Bot Date: Wed, 7 Dec 2016 22:10:29 +0000 Subject: [PATCH 3/4] Bundled output for commit df7d2c51ccb42de8b061e5f032ffe138c14e257f [skip ci] --- README.md | 2 +- mithril.js | 21 +++++-------- mithril.min.js | 82 +++++++++++++++++++++++++------------------------- 3 files changed, 50 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index 3b577d13..11a87ed7 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,6 @@ There are over 4000 assertions in the test suite, and tests cover even difficult ## Modularity -Despite the huge improvements in performance and modularity, the new codebase is smaller than v0.2.x, currently clocking at 7.50 KB min+gzip +Despite the huge improvements in performance and modularity, the new codebase is smaller than v0.2.x, currently clocking at 7.47 KB min+gzip In addition, Mithril is now completely modular: you can import only the modules that you need and easily integrate 3rd party modules if you wish to use a different library for routing, ajax, and even rendering diff --git a/mithril.js b/mithril.js index 02b87bb3..e5558df4 100644 --- a/mithril.js +++ b/mithril.js @@ -1081,11 +1081,11 @@ var coreRouter = function($window) { var _20 = function($window, redrawService0) { var routeService = coreRouter($window) var identity = function(v) {return v} - var routing = false, render1, component, attrs3, currentPath, resolve + var render1, component, attrs3, currentPath, updatePending = false var route = function(root, defaultRoute, routes) { if (root == null) throw new Error("Ensure the DOM element that was passed to `m.route` is not undefined") var update = function(routeResolver, comp, params, path) { - component = comp != null && typeof comp.view === "function" ? comp : "div", attrs3 = params, currentPath = path, resolve = null + component = comp != null && typeof comp.view === "function" ? comp : "div", attrs3 = params, currentPath = path, updatePending = false render1 = (routeResolver.render || identity).bind(routeResolver) run1() } @@ -1099,15 +1099,10 @@ var _20 = function($window, redrawService0) { if (payload.view) update({}, payload, params, path) else { if (payload.onmatch) { - if (resolve != null) update(payload, component, params, path) - else { - resolve = function(resolved) { - update(payload, resolved, params, path) - } - Promise.resolve(payload.onmatch(params, path)).then(function(resolved) { - if (resolve != null) resolve(resolved) - }, bail) - } + updatePending = true + Promise.resolve(payload.onmatch(params, path)).then(function(resolved) { + if (updatePending) update(payload, resolved, params, path) + }, bail) } else update(payload, "div", params, path) } @@ -1115,8 +1110,8 @@ var _20 = function($window, redrawService0) { redrawService0.subscribe(root, run1) } route.set = function(path, data, options) { - if (resolve != null) options = {replace: true} - resolve = null + if (updatePending) options = {replace: true} + updatePending = false routeService.setPath(path, data, options) } route.get = function() {return currentPath} diff --git a/mithril.min.js b/mithril.min.js index 801c1241..69e76332 100644 --- a/mithril.min.js +++ b/mithril.min.js @@ -1,41 +1,41 @@ -new function(){function y(a,c,h,d,g,l){return{tag:a,key:c,attrs:h,children:d,text:g,dom:l,domSize:void 0,state:{},events:void 0,instance:void 0,skip:!1}}function B(a){if(null==a||"string"!==typeof a&&null==a.view)throw Error("The selector must be either a string or a component.");if("string"===typeof a&&void 0===K[a]){for(var c,h,d=[],g={};c=P.exec(a);){var l=c[1],k=c[2];""===l&&""!==k?h=k:"#"===l?g.id=k:"."===l?d.push(k):"["===c[3][0]&&((l=c[6])&&(l=l.replace(/\\(["'])/g,"$1").replace(/\\\\/g,"\\")), -"class"===c[4]?d.push(l):g[c[4]]=l||!0)}0a.indexOf("?")?"?":"&";a+=d+b}return a}function k(a){try{return""!==a?JSON.parse(a):null}catch(r){throw Error(a);}}function n(a){return a.responseText}function m(a, -c){if("function"===typeof a)if(c instanceof Array)for(var b=0;bz.status||304===z.status)c(m(b.type,a));else{var g=Error(z.responseText),h;for(h in a)g[h]=a[h];d(g)}}catch(F){d(F)}};h&&null!=b.data?z.send(b.data):z.send()});return!0===b.background?w:t(w)},jsonp:function(b,k){var n=h();b=d(b,k);var w=new c(function(c, -d){var h=b.callbackName||"_mithril_"+Math.round(1E16*Math.random())+"_"+p++,k=a.document.createElement("script");a[h]=function(d){k.parentNode.removeChild(k);c(m(b.type,d));delete a[h]};k.onerror=function(){k.parentNode.removeChild(k);d(Error("JSONP request failed"));delete a[h]};null==b.data&&(b.data={});b.url=g(b.url,b.data);b.data[b.callbackKey||"callback"]=h;k.src=l(b.url,b.data);a.document.documentElement.appendChild(k)});return!0===b.background?w:n(w)},setCompletionCallback:function(a){t=a}}}(window, -H),O=function(a){function c(e,f,a,b,c,d,g){for(;a=u&&w>=A;){var r=f[u],v=a[A];if(r!==v||q)if(null==r)u++;else if(null==v)A++;else if(r.key===v.key)u++,A++,l(e,r,v,b,n(f,u,d),q,g),q&&r.tag===v.tag&&m(e,k(r),d);else if(r=f[p],r!==v||q)if(null==r)p--;else if(null==v)A++;else if(r.key===v.key)l(e,r,v,b,n(f,p+1,d),q,g),(q||A=u&&w>=A;){r=f[p];v=a[w];if(r!==v||q)if(null==r)p--;else{if(null!= -v)if(r.key===v.key)l(e,r,v,b,n(f,p+1,d),q,g),q&&r.tag===v.tag&&m(e,k(r),d),null!=r.dom&&(d=r.dom),p--;else{if(!z){z=f;var r=p,D={},y;for(y=0;ya.indexOf("?")?"?":"&";a+=d+b}return a}function l(a){try{return""!==a?JSON.parse(a):null}catch(D){throw Error(a);}}function n(a){return a.responseText}function p(a, +c){if("function"===typeof a)if(c instanceof Array)for(var b=0;bk.status||304===k.status)c(p(b.type,a));else{var g=Error(k.responseText),h;for(h in a)g[h]=a[h];d(g)}}catch(F){d(F)}};h&&null!=b.data?k.send(b.data):k.send()});return!0===b.background?t:r(t)},jsonp:function(b,l){var n=h();b=d(b,l);var t=new c(function(c, +d){var h=b.callbackName||"_mithril_"+Math.round(1E16*Math.random())+"_"+k++,l=a.document.createElement("script");a[h]=function(d){l.parentNode.removeChild(l);c(p(b.type,d));delete a[h]};l.onerror=function(){l.parentNode.removeChild(l);d(Error("JSONP request failed"));delete a[h]};null==b.data&&(b.data={});b.url=g(b.url,b.data);b.data[b.callbackKey||"callback"]=h;l.src=m(b.url,b.data);a.document.documentElement.appendChild(l)});return!0===b.background?t:n(t)},setCompletionCallback:function(a){r=a}}}(window, +H),O=function(a){function c(e,f,a,b,c,d,g){for(;a=k&&t>=A;){var x=f[k],u=a[A];if(x!==u||q)if(null==x)k++;else if(null==u)A++;else if(x.key===u.key)k++,A++,m(e,x,u,b,n(f,k,d),q,g),q&&x.tag===u.tag&&p(e,l(x),d);else if(x=f[y],x!==u||q)if(null==x)y--;else if(null==u)A++;else if(x.key===u.key)m(e,x,u,b,n(f,y+1,d),q,g),(q||A=k&&t>=A;){x=f[y];u=a[t];if(x!==u||q)if(null==x)y--;else{if(null!= +u)if(x.key===u.key)m(e,x,u,b,n(f,y+1,d),q,g),q&&x.tag===u.tag&&p(e,l(x),d),null!=x.dom&&(d=x.dom),y--;else{if(!D){D=f;var x=y,C={},w;for(w=0;w Date: Thu, 15 Dec 2016 07:04:33 +0000 Subject: [PATCH 4/4] Fix anchor --- docs/mount.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/mount.md b/docs/mount.md index a188668b..f8a28e95 100644 --- a/docs/mount.md +++ b/docs/mount.md @@ -4,7 +4,7 @@ - [Signature](#signature) - [How it works](#how-it-works) - [Performance considerations](#performance-considerations) -- [Differences from m.render](#differences-from-m-render) +- [Differences from m.render](#differences-from-mrender) --- @@ -73,4 +73,4 @@ A component rendered via `m.mount` automatically auto-redraws in response to vie `m.mount()` is suitable for application developers integrating Mithril widgets into existing codebases where routing is handled by another library or framework, while still enjoying Mithril's auto-redrawing facilities. -`m.render()` is suitable for library authors who wish to manually control rendering (e.g. when hooking to a third party router, or using third party data-layer libraries like Redux). \ No newline at end of file +`m.render()` is suitable for library authors who wish to manually control rendering (e.g. when hooking to a third party router, or using third party data-layer libraries like Redux).