Merge pull request #33 from straker/optionalAttr

feat: optional attributes using ?=

README.md

@@ -19,14 +19,20 @@ or with Bower
 let min = 0, max = 99, disabled = true;
 
 // returns an <input> tag with all attributes set
-let el = html`<input type="number" min="${min}" max="${max}" name="number" id="number" class="number-input" ${ (disabled ? 'disabled' : '') }/>`;
+// the use of ?= denotes an optional attribute which will only be added if the
+// value is true
+let el = html`<input type="number" min="${min}" max="${max}" name="number" id="number" class="number-input" disabled?="${disabled}"/>`;
 document.body.appendChild(el);
 
 // returns a DocumentFragment with two <tr> elements as children
 let el = html`<tr></tr><tr></tr>`
 document.body.appendChild(el);
 ```
 
+### Optional Attributes
+
+To add an attribute only when it's value is true (such as `disabled`), use `attrName?="${value}"`. If the value is true, the attribute will be added in the output, otherwise it will be omitted from the output.
+
 ## Contributing
 
 The only way this proposal will continue forward is with help from the community. If you would like to see the `html` function in the web, please upvote the [proposal on the W3C DOM repo](https://github.com/whatwg/dom/issues/150).
@@ -143,7 +149,7 @@ We propose that a global tagged template string function called `html` provide t
 let min = 0, max = 99, disabled = true, text = 'Hello';
 
 // single element with attributes
-html`<input type="number" min="${min}" max="${max}" name="number" id="number" class="number-input" ${ (disabled ? 'disabled' : '') }/>`;
+html`<input type="number" min="${min}" max="${max}" name="number" id="number" class="number-input" disabled?="${disabled}"/>`;
 
 // single element with child elements
 html`<div class="container">

index.js

@@ -334,7 +334,20 @@ if (typeof window.html === 'undefined') {
           // all of that for us
           // @see https://www.mediawiki.org/wiki/DOM-based_XSS
           if (tag || hasSubstitution) {
-            (tag || node).setAttribute(name, value);
+            let el = (tag || node);
+
+            // optional attribute
+            if (name.substr(-1) === '?') {
+              el.removeAttribute(name);
+
+              if (value === 'true') {
+                name = name.slice(0, -1);
+                el.setAttribute(name, '');
+              }
+            }
+            else {
+              el.setAttribute(name, value);
+            }
           }
         }
       }

test/substitution.test.js

@@ -113,4 +113,16 @@ describe('Substitution expressions', function() {
     expect(el.parentElement).to.be.null;
     expect(el.textContent).to.equal('x = 99');
   });
+
+  it('should allow optional attributes', function() {
+    var el = html`<button disabled?=${disabled}>Click</button>`;
+
+    expect(el.hasAttribute('disabled')).to.be.true;
+    expect(el.getAttribute('disabled')).to.equal('');
+
+    var notDisabled = false;
+    el = html`<button disabled?=${notDisabled}>Click</button>`;
+
+    expect(el.hasAttribute('disabled')).to.be.false;
+  });
 });