Remove attributes with undefined or null value

Author: thewebartisan7

changelog.md

@@ -1,3 +1,7 @@
+## 1.0.0-beta.13 (2022-11-03)
+
+* Remove attributes that have "undefined" or "null" value
+
 ## 1.0.0-beta.12 (2022-10-31)
 
 * Added more utilities

docs-src/md/changelog.md

@@ -1,3 +1,7 @@
+## 1.0.0-beta.13 (2022-11-03)
+
+* Remove attributes that have "undefined" or "null" value
+
 ## 1.0.0-beta.12 (2022-10-31)
 
 * Added more utilities

docs-src/pages/index.html

@@ -14,7 +14,7 @@ <h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
       </div>
 
       <p class="text-muted">
-        Currently <strong>v1.0.0-beta.12</strong>
+        Currently <strong>v1.0.0-beta.13</strong>
         <span class="px-1">·</span>
         <a href="#" class="link-secondary" data-bs-toggle="modal" data-bs-target="#modalWithComponents">Changelog</a>
       </p>

docs/demo.html

@@ -77,6 +77,13 @@ <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
           </div>
           <!-- /.modal-header -->
           <div class="modal-body">
+            <h2 id="1.0.0-beta.13-(2022-11-03)" tabindex="-1">
+              <a class="header-anchor" href="#1.0.0-beta.13-(2022-11-03)">#</a>
+              1.0.0-beta.13 (2022-11-03)
+            </h2>
+            <ul>
+              <li>Remove attributes that have &quot;undefined&quot; or &quot;null&quot; value</li>
+            </ul>
             <h2 id="1.0.0-beta.12-(2022-10-31)" tabindex="-1">
               <a class="header-anchor" href="#1.0.0-beta.12-(2022-10-31)">#</a>
               1.0.0-beta.12 (2022-10-31)

docs/docs.html

@@ -1488,6 +1488,13 @@ <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
           </div>
           <!-- /.modal-header -->
           <div class="modal-body">
+            <h2 id="1.0.0-beta.13-(2022-11-03)" tabindex="-1">
+              <a class="header-anchor" href="#1.0.0-beta.13-(2022-11-03)">#</a>
+              1.0.0-beta.13 (2022-11-03)
+            </h2>
+            <ul>
+              <li>Remove attributes that have &quot;undefined&quot; or &quot;null&quot; value</li>
+            </ul>
             <h2 id="1.0.0-beta.12-(2022-10-31)" tabindex="-1">
               <a class="header-anchor" href="#1.0.0-beta.12-(2022-10-31)">#</a>
               1.0.0-beta.12 (2022-10-31)

docs/index.html

@@ -59,7 +59,7 @@ <h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
             </div>
             <p class="text-muted">
               Currently
-              <strong>v1.0.0-beta.12</strong>
+              <strong>v1.0.0-beta.13</strong>
               <span class="px-1">·</span>
               <a href="#" class="link-secondary" data-bs-toggle="modal" data-bs-target="#modalWithComponents">Changelog</a>
             </p>
@@ -93,6 +93,13 @@ <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
           </div>
           <!-- /.modal-header -->
           <div class="modal-body">
+            <h2 id="1.0.0-beta.13-(2022-11-03)" tabindex="-1">
+              <a class="header-anchor" href="#1.0.0-beta.13-(2022-11-03)">#</a>
+              1.0.0-beta.13 (2022-11-03)
+            </h2>
+            <ul>
+              <li>Remove attributes that have &quot;undefined&quot; or &quot;null&quot; value</li>
+            </ul>
             <h2 id="1.0.0-beta.12-(2022-10-31)" tabindex="-1">
               <a class="header-anchor" href="#1.0.0-beta.12-(2022-10-31)">#</a>
               1.0.0-beta.12 (2022-10-31)

docs/test.html

@@ -221,6 +221,13 @@ <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
           </div>
           <!-- /.modal-header -->
           <div class="modal-body">
+            <h2 id="1.0.0-beta.13-(2022-11-03)" tabindex="-1">
+              <a class="header-anchor" href="#1.0.0-beta.13-(2022-11-03)">#</a>
+              1.0.0-beta.13 (2022-11-03)
+            </h2>
+            <ul>
+              <li>Remove attributes that have &quot;undefined&quot; or &quot;null&quot; value</li>
+            </ul>
             <h2 id="1.0.0-beta.12-(2022-10-31)" tabindex="-1">
               <a class="header-anchor" href="#1.0.0-beta.12-(2022-10-31)">#</a>
               1.0.0-beta.12 (2022-10-31)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "posthtml-component",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.13",
   "description": "PostHTML Components Blade-like with slots, attributes as props and custom tag",
   "license": "MIT",
   "repository": "thewebartisan7/posthtml-components",

src/process-attributes.js

@@ -60,5 +60,13 @@ module.exports = (currentNode, attributes, props, options) => {
     delete attributes[key];
   });
 
+  // Remove an attribute if value is 'null' or 'undefined'
+  //  so we can conditionally add an attribute
+  each(nodeAttrs, (value, key) => {
+    if (['undefined', 'null'].includes(value)) {
+      delete nodeAttrs[key];
+    }
+  });
+
   mainNode.attrs = nodeAttrs.compose();
 };

test/templates/components/remove-attributes.html

@@ -0,0 +1,7 @@
+<script props>
+  module.exports = {
+    toggle: null,
+    target: undefined
+  };
+</script>
+<button class="btn btn-primary" data-bs-dismiss="true" data-bs-backdrop="false" data-bs-target="{{ target }}" data-bs-toggle="{{ toggle }}"><yield></yield></button>

test/test-attributes.js

@@ -49,3 +49,12 @@ test('Must override class and style attributes', async t => {
 
   t.is(html, expected);
 });
+
+test('Must remove an attributes that has "undefined" or "null" value', async t => {
+  const actual = `<component src="components/remove-attributes.html">My button</component>`;
+  const expected = `<button class="btn btn-primary" data-bs-dismiss="true" data-bs-backdrop="false">My button</button>`;
+
+  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});