From c92f5811d16d504faf1e49a4963330f78442199d Mon Sep 17 00:00:00 2001 From: Kabir Shah Date: Sun, 9 Apr 2017 19:27:27 -0700 Subject: [PATCH] allow conditionally set attributes (fixes #25) --- dist/moon.js | 7 ++-- dist/moon.min.js | 2 +- src/util/vdom.js | 11 ++--- test/js/test.js | 103 +++++++++++++---------------------------------- 4 files changed, 39 insertions(+), 84 deletions(-) diff --git a/dist/moon.js b/dist/moon.js index 22beec7b..c1800f0f 100644 --- a/dist/moon.js +++ b/dist/moon.js @@ -541,14 +541,15 @@ var vnodePropValue = vnodeProps[vnodePropName]; var nodePropValue = nodeProps[vnodePropName]; - if (nodePropValue == null || vnodePropValue !== nodePropValue) { - node.setAttribute(vnodePropName, vnodePropValue); + if (vnodePropValue !== false && (nodePropValue == null || vnodePropValue !== nodePropValue)) { + node.setAttribute(vnodePropName, vnodePropValue === true ? '' : vnodePropValue); } } // Diff Node Props with VNode Props for (var nodePropName in nodeProps) { - if (vnodeProps[nodePropName] == null) { + var _vnodePropValue = vnodeProps[nodePropName]; + if (_vnodePropValue === undefined || _vnodePropValue === false) { node.removeAttribute(nodePropName); } } diff --git a/dist/moon.min.js b/dist/moon.min.js index 44331777..c158d96a 100644 --- a/dist/moon.min.js +++ b/dist/moon.min.js @@ -4,4 +4,4 @@ * Released under the MIT License * http://moonjs.ga */ -!function(e,t){"object"==typeof module&&module.exports?module.exports=t():e.Moon=t()}(this,function(){"use strict";function e(e){this.instance=e,this.cache={},this.signals={},this.dep={target:null,map:{}}}function t(t){this.$opts=t||{},this.$id=s++,this.$name=this.$opts.name||"root",this.$data=this.$opts.data||{},this.$render=this.$opts.render||y,this.$hooks=this.$opts.hooks||{},this.$methods=this.$opts.methods||{},this.$events={},this.$dom={},this.$observer=new e(this),this.$destroyed=!0,this.$queued=!1,this.$opts.computed&&a(this,this.$opts.computed),this.init()}var r={},n={},i={},o={stop:"event.stopPropagation();",prevent:"event.preventDefault();",ctrl:"if(!event.ctrlKey) {return;};",shift:"if(!event.shiftKey) {return;};",alt:"if(!event.altKey) {return;};",enter:"if(event.keyCode !== 13) {return;};"},s=0,a=function(e,t){for(var r in t)!function(r){e.$observer.observe(r);var n={get:function(){var n=null;return e.$observer.cache[r]?n=e.$observer.cache[r]:(e.$observer.dep.target=r,n=t[r].get.call(e),e.$observer.dep.target=null,e.$observer.cache[r]=n),n}};t[r].set&&(n.set=function(n){return t[r].set.call(e,n)}),Object.defineProperty(e.$data,r,n)}(r)};e.prototype.observe=function(e){var t=this;this.signals[e]=function(){t.cache[e]=null}},e.prototype.notify=function(e){if(this.dep.map[e])for(var t=0;ta?s:a,c=0;c"===o||" "===o)break;i+=o,n++}var s={type:"tag",value:i};return e.tokens.push(s),e.current=n,s},J=function(e,t){for(var r=t.input,n=r.length,i=t.current,o=r.charAt(i),s=r.charAt(i+1),a=function(){i++,o=r.charAt(i),s=r.charAt(i+1)},u={};i"!==o&&("/"!==o||">"!==s);)if(" "!==o){for(var l="",c=!1;i"===o||"/"===o||">"===s){c=!0;break}l+=o,a()}var p={name:l,value:"",meta:{}};if(c)u[l]=p;else{a();var f=" ";for("'"!==o&&'"'!==o||(f=o,a());i1&&(a=u.shift(),s=u.join("(").slice(0,-1));var l="";n.shift();for(var c=0;ca?s:a,c=0;c"===o||" "===o)break;i+=o,n++}var s={type:"tag",value:i};return e.tokens.push(s),e.current=n,s},J=function(e,t){for(var r=t.input,n=r.length,i=t.current,o=r.charAt(i),s=r.charAt(i+1),a=function(){i++,o=r.charAt(i),s=r.charAt(i+1)},u={};i"!==o&&("/"!==o||">"!==s);)if(" "!==o){for(var l="",c=!1;i"===o||"/"===o||">"===s){c=!0;break}l+=o,a()}var p={name:l,value:"",meta:{}};if(c)u[l]=p;else{a();var f=" ";for("'"!==o&&'"'!==o||(f=o,a());i1&&(a=u.shift(),s=u.join("(").slice(0,-1));var l="";n.shift();for(var c=0;c= 0.5) { -// return num.toFixed(2) + 'ms' -// } else { -// return num.toFixed(2)*1000 + "µs"; -// } -// } -// -// var name = function(instance) { -// return instance.$parent ? instance.$name : "root"; -// } -// -// Moon.prototype.init = function() { -// var id = name(this) + "@init"; -// performance.mark("start " + id); -// MoonInit.apply(this, arguments); -// performance.mark("end " + id); -// performance.measure(id, "start " + id, "end " + id); -// var entries = performance.getEntriesByName(id); -// } -// -// Moon.prototype.build = function() { -// var id = name(this) + "@build"; -// performance.mark("start " + id); -// MoonBuild.apply(this, arguments); -// performance.mark("end " + id); -// performance.measure(id, "start " + id, "end " + id); -// var entries = performance.getEntriesByName(id); -// } -// -// Moon.prototype.render = function() { -// var id = name(this) + "@render"; -// performance.mark("start " + id); -// var r = MoonRender.apply(this, arguments); -// performance.mark("end " + id); -// performance.measure(id, "start " + id, "end " + id); -// var entries = performance.getEntriesByName(id); -// return r; -// } -// -// Moon.prototype.mount = function() { -// var id = name(this) + "@mount"; -// performance.mark("start " + id); -// MoonMount.apply(this, arguments); -// performance.mark("end " + id); -// performance.measure(id, "start " + id, "end " + id); -// var entries = performance.getEntriesByName(id); -// } -// -// Moon.prototype.patch = function() { -// var id = name(this) + "@patch"; -// performance.mark("start " + id); -// MoonPatch.apply(this, arguments); -// performance.mark("end " + id); -// performance.measure(id, "start " + id, "end " + id); -// var entries = performance.getEntriesByName(id); -// } -// } -// } -// -// Moon.use(MoonPerformance); +// Begin Tests describe('Instance', function() { describe('Initializing', function() { createTestElement("initialize", ""); @@ -261,12 +198,12 @@ describe('Data', function() { // expect(document.getElementById("data2").innerHTML).to.equal("Nested Object"); // }); // }); - // it('when setting new data property', function() { - // dataApp3.set("msg.obj.nested", "New Nested"); - // Moon.nextTick(function() { - // expect(document.getElementById("data3").innerHTML).to.equal("New Nested"); - // }); - // }); + it('when setting new data property', function() { + dataApp3.set("msg.obj.nested", "New Nested"); + Moon.nextTick(function() { + expect(document.getElementById("data3").innerHTML).to.equal("New Nested"); + }); + }); it('when getting', function() { expect(dataApp.get('msg')).to.equal("New Value"); }); @@ -481,6 +418,7 @@ describe("Directive", function() { createTestElement("literal", ''); createTestElement("literalClass", ''); createTestElement("literalConditionalClass", ''); + createTestElement("literalBooleanValue", ''); var literalApp = new Moon({ el: "#literal", data: { @@ -497,6 +435,12 @@ describe("Directive", function() { falseVal: false } }); + var literalBooleanValueApp = new Moon({ + el: "#literalBooleanValue", + data: { + condition: true + } + }); it('should treat the value as a literal expression', function() { expect(document.getElementById("literal-directive-span").getAttribute("class")).to.equal("2"); }); @@ -506,6 +450,15 @@ describe("Directive", function() { it('should be able to handle an object of conditional classes', function() { expect(document.getElementById("literal-conditional-class-directive-span").getAttribute("class")).to.equal("trueVal"); }); + it('should be able to handle a true boolean value', function() { + expect(document.getElementById("literal-boolean-value-directive-span").getAttribute("disabled")).to.equal(""); + }); + it('should be able to handle a false boolean value', function() { + literalBooleanValueApp.set('condition', false); + Moon.nextTick(function() { + expect(document.getElementById("literal-boolean-value-directive-span").getAttribute("disabled")).to.equal(null); + }) + }); it('should not be present at runtime', function() { expect(document.getElementById('literal-directive-span').getAttribute("m-literal")).to.be['null']; });