Merge pull request #108 from lukebayes/lbj-rerender

Fixed bug were value='0' attributes disappear on re-render
lukebayes · Apr 15, 2020 · ff4944b · ff4944b
2 parents d7936ae + cc553a7
commit ff4944b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/examples/client/client.js b/examples/client/client.js
@@ -6,7 +6,7 @@ const DOM_CONTENT_LOADED = 'DOMContentLoaded';
 
 function client(doc) {
   // Render the application immediately. This can begin before the DOM is fully ready.
-  const app = renderElement(dom.h1('HELLO WORLD 34343'), doc);
+  const app = renderElement(dom.h1('HELLO WORLD'), doc);
 
   ready(doc, () => {
     // Get the element where we will attach the application.

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "Nomplate: Node template engine",
   "main": "index.js",
   "engines": {
-    "node": ">=12.4.0"
+    "node": ">=12.4.1"
   },
   "bugs": "https://github.com/lukebayes/nomplate/issues",
   "homepage": "https://github.com/lukebayes/nomplate",

diff --git a/src/render_element.js b/src/render_element.js
@@ -221,8 +221,8 @@ function elementAttributesToOperations(ops, nomElement, optDomElement) {
       }
     } else if (optDomElement) {
       const domValue = optDomElement.getAttribute(keyWithCase);
-      if (!value && domValue !== 'false' && domValue !== false && domValue !== 0) {
-        // Remove attributes that transition to falsy values:
+      if (value === '' || value === undefined || value === null || value === NaN) {
+        // Remove invalid/empty-ish attribute values
         ops.push(operations.removeAttribute(keyWithCase, value));
       } else if (value != domValue) {
         // Update attributes with new values:
@@ -284,7 +284,7 @@ function nomElementToOperations(ops, nomElement, doc, optDomElement) {
  */
 function renderElement(nomElement, doc, optDomElement) {
   if (!doc) {
-    throw new IllegalOperationError('renderElement requires a reference to an HTML document.');
+    throw new Error('renderElement requires a reference to an HTML document.');
   }
 
   const ops = [];

diff --git a/test/render_element_test.js b/test/render_element_test.js
@@ -14,7 +14,6 @@ describe('renderElement', () => {
     doc = win.document;
   });
 
-
   describe('creation', () => {
     it('creates simple element', () => {
       const domElement = renderElement(dom.div(), doc);
@@ -41,6 +40,11 @@ describe('renderElement', () => {
       assert.equal(domElement.outerHTML, '<input type="checkbox">');
     });
 
+    it('leaves attributes with a falsy zero', () => {
+      const domElement = renderElement(dom.option({value: 0}), doc);
+      assert.equal(domElement.outerHTML, '<option value="0"></option>');
+    });
+
     it('creates children', () => {
       const domElement = renderElement(dom.div(() => {
         dom.ul(() => {
@@ -106,6 +110,38 @@ describe('renderElement', () => {
       assert.equal(ul.childNodes[2].textContent, 'three');
     });
 
+    it('leaves zero value attributes after update', () => {
+      let updater = null;
+      let selectedIndex = 0;
+
+      const domElement = renderElement(dom.div(() => {
+        dom.div((update) => {
+          updater = update;
+          dom.select(() => {
+            dom.option({value: 0, selected: 0 === selectedIndex}, "aye");
+            dom.option({value: 1, selected: 1 === selectedIndex}, "bee");
+            dom.option({value: 2, selected: 2 === selectedIndex}, "cee");
+          });
+        });
+      }), doc);
+
+      assert.equal(domElement.outerHTML, '<div><div><select>' +
+                  '<option value="0" selected="true">aye</option>' +
+                  '<option value="1">bee</option>' +
+                  '<option value="2">cee</option>' +
+                  '</select></div></div>');
+      selectedIndex = 2;
+
+      updater();
+      builder.forceUpdate();
+
+      assert.equal(domElement.outerHTML, '<div><div><select>' +
+                  '<option value="0">aye</option>' +
+                  '<option value="1">bee</option>' +
+                  '<option value="2" selected="true">cee</option>' +
+                  '</select></div></div>');
+    });
+
     it('assigns click handler', () => {
       const handler = sinon.spy();
       const element = renderElement(dom.button({onClick: handler}), doc);