html-tagged-template - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

index.js

@@ -26,4 +26,4 @@ (function(window) {
 
-  const SUBSTITUION_INDEX = 'substitutionindex:';  // tag names are always all lowercase
-  const SUBSTITUTION_REGEX = new RegExp(SUBSTITUION_INDEX + '([0-9]+):', 'g');
+  const SUBSTITUTION_INDEX = 'substitutionindex:';  // tag names are always all lowercase
+  const SUBSTITUTION_REGEX = new RegExp(SUBSTITUTION_INDEX + '([0-9]+):', 'g');
 
@@ -148,3 +148,3 @@ // rejection string is used to replace xss attacks that cannot be escaped either
     for (let i = 0; i < values.length; i++) {
-      str += SUBSTITUION_INDEX + i + ':' + strings[i+1];
+      str += SUBSTITUTION_INDEX + i + ':' + strings[i+1];
     }
@@ -174,3 +174,3 @@
       let nodeName = node.nodeName.toLowerCase();
-      if (nodeName.indexOf(SUBSTITUION_INDEX) !== -1) {
+      if (nodeName.indexOf(SUBSTITUTION_INDEX) !== -1) {
         nodeName = nodeName.replace(SUBSTITUTION_REGEX, replaceSubstitution);
@@ -197,3 +197,3 @@
       // tag to not be executed when added to the DOM. We'll need to create a script
-      // tag and append it's contents which will make it execute correctly.
+      // tag and append its contents which will make it execute correctly.
       // @see http://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml
@@ -257,3 +257,3 @@ else if (node.nodeName === 'SCRIPT') {
           // name has substitution
-          if (name.indexOf(SUBSTITUION_INDEX) !== -1) {
+          if (name.indexOf(SUBSTITUTION_INDEX) !== -1) {
             name = name.replace(SUBSTITUTION_REGEX, replaceSubstitution);
@@ -272,3 +272,3 @@
           // when name is a substitution with an empty value)
-          if (name && value.indexOf(SUBSTITUION_INDEX) !== -1) {
+          if (name && value.indexOf(SUBSTITUTION_INDEX) !== -1) {
             hasSubstitution = true;
@@ -343,3 +343,16 @@
           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);
+            }
           }
@@ -377,3 +390,3 @@ }
 
-      if (node.nodeType === 3 && node.nodeValue.indexOf(SUBSTITUION_INDEX) !== -1) {
+      if (node.nodeType === 3 && node.nodeValue.indexOf(SUBSTITUTION_INDEX) !== -1) {
         let nodeValue = node.nodeValue.replace(SUBSTITUTION_REGEX, replaceSubstitution);
@@ -399,2 +412,2 @@
 
-})(window);
+})(window);

package.json

 {
   "name": "html-tagged-template",
   "description": "Proposal to improve the DOM creation API so developers have a cleaner, simpler interface to DOM creation and manipulation.",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "main": "index.js",
@@ -6,0 +6,0 @@ "scripts": {

README.md

@@ -22,3 +22,5 @@ [![Build Status](https://travis-ci.org/straker/html-tagged-template.svg?branch=master)](https://travis-ci.org/straker/html-tagged-template)
 // 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);
@@ -31,2 +33,6 @@
 
+### 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
@@ -148,3 +154,3 @@
 // 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}"/>`;
 
@@ -151,0 +157,0 @@ // single element with child elements

test/substitution.test.js

@@ -116,2 +116,14 @@ describe('Substitution expressions', function() {
   });
+
+  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;
+  });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61237

increased by1.71%

Lines of code

833

increased by2.46%

Number of lines in readme file

218

increased by2.83%

No dependency changes