Skip to content

Commit

Permalink
allow conditionally set attributes (fixes #25)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kbrsh
kbrsh committed Apr 10, 2017
1 parent a135ab2 commit c92f581
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 84 deletions.
7 changes: 4 additions & 3 deletions dist/moon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Expand Down
2 changes: 1 addition & 1 deletion dist/moon.min.js
View file

Large diffs are not rendered by default.

11 changes: 6 additions & 5 deletions src/util/vdom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,17 +139,18 @@ const diffProps = function(node, nodeProps, vnode) {

// Diff VNode Props with Node Props
for(let vnodePropName in vnodeProps) {
var vnodePropValue = vnodeProps[vnodePropName];
var nodePropValue = nodeProps[vnodePropName];
const vnodePropValue = vnodeProps[vnodePropName];
const 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(let nodePropName in nodeProps) {
if(vnodeProps[nodePropName] == null) {
const vnodePropValue = vnodeProps[nodePropName];
if(vnodePropValue === undefined || vnodePropValue === false) {
node.removeAttribute(nodePropName);
}
}
Expand Down
103 changes: 28 additions & 75 deletions test/js/test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,96 +2,33 @@
if(!chai) {
var chai = require("chai");
}

if(!Moon) {
var Moon = require("../../dist/moon.js");
}

if(document.getElementById("moon-els")) {
var moon_els = document.getElementById("moon-els");
} else {
var moon_els = document.createElement("div");
moon_els.id = "moon-els";
document.body.appendChild(moon_els);
}

var expect = chai.expect;

Moon.config.silent = true;

var createTestElement = function(id, html) {
var el = document.createElement("div");
el.innerHTML = html;
el.id = id;
moon_els.appendChild(el);
return el;
}
// var MoonPerformance = {
// init: function() {
// var MoonBuild = Moon.prototype.build;
// var MoonInit = Moon.prototype.init;
// var MoonRender = Moon.prototype.render;
// var MoonMount = Moon.prototype.mount;
// var MoonPatch = Moon.prototype.patch;
//
// var formatNum = function(num) {
// if(num >= 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", "");
Expand Down Expand Up @@ -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");
});
Expand Down Expand Up @@ -481,6 +418,7 @@ describe("Directive", function() {
createTestElement("literal", '<span m-literal:class="({{num}}+1).toString()" id="literal-directive-span"></span>');
createTestElement("literalClass", '<span m-literal:class="[\'1\', \'2\', \'3\']" id="literal-class-directive-span"></span>');
createTestElement("literalConditionalClass", '<span m-literal:class="{trueVal: {{trueVal}}, falseVal: {{falseVal}}}" id="literal-conditional-class-directive-span"></span>');
createTestElement("literalBooleanValue", '<span m-literal:disabled="{{condition}}" id="literal-boolean-value-directive-span"></span>');
var literalApp = new Moon({
el: "#literal",
data: {
Expand All @@ -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");
});
Expand All @@ -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'];
});
Expand Down

0 comments on commit c92f581

Please sign in to comment.