Filter undefined, null, and false results from dataset object

WebReflection · Jul 27, 2021 · ad7034e · ad7034e
1 parent f3e3599
commit ad7034e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 4 deletions.
diff --git a/cjs/utils.js b/cjs/utils.js
@@ -77,7 +77,13 @@ const parse = (template, expectedLength, svg) => {
         case name[0] === '.':
           const lower = name.slice(1).toLowerCase();
           updates.push(lower === 'dataset' ?
-            (value => (pre + keys(value).map(data, value).join(''))) :
+            (value => (
+              pre 
+              + keys(value)
+                .filter(key => value[key] != null)
+                .map(data, value)
+                .join('')
+            )) :
             (value => {
               let result = pre;
               // null, undefined, and false are not shown at all

diff --git a/es.js b/es.js
diff --git a/esm/utils.js b/esm/utils.js
@@ -75,7 +75,13 @@ export const parse = (template, expectedLength, svg) => {
         case name[0] === '.':
           const lower = name.slice(1).toLowerCase();
           updates.push(lower === 'dataset' ?
-            (value => (pre + keys(value).map(data, value).join(''))) :
+            (value => (
+              pre 
+              + keys(value)
+                .filter(key => value[key] != null)
+                .map(data, value)
+                .join('')
+            )) :
             (value => {
               let result = pre;
               // null, undefined, and false are not shown at all

diff --git a/index.js b/index.js
@@ -178,7 +178,13 @@ self.uhtml = (function (exports) {
           case name[0] === '.':
             const lower = name.slice(1).toLowerCase();
             updates.push(lower === 'dataset' ?
-              (value => (pre + keys(value).map(data, value).join(''))) :
+              (value => (
+                pre 
+                + keys(value)
+                  .filter(key => value[key] != null)
+                  .map(data, value)
+                  .join('')
+              )) :
               (value => {
                 let result = pre;
                 // null, undefined, and false are not shown at all

diff --git a/test/index.js b/test/index.js
@@ -94,6 +94,11 @@ assert(
   `<this data-any="value">is a html test</this>`
 );
 
+assert(
+  render(String, html`<this .dataset=${{any: 'value', other: undefined}}>is a html test</this>`),
+  `<this data-any="value">is a html test</this>`
+);
+
 assert(
   render(String, html`<this ?hidden=${1}>is a html test</this>`),
   `<this hidden>is a html test</this>`