More robust componentDidMount

tbranyen · Mar 31, 2022 · 344bbb1 · 344bbb1
1 parent 29b2e9d
commit 344bbb1
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 0 deletions.
diff --git a/packages/diffhtml-components/lib/render-component.js b/packages/diffhtml-components/lib/render-component.js
@@ -81,6 +81,14 @@ export default function renderComponent(vTree) {
 
     renderedTree = createTree(renderRetVal || '#text');
 
+    if (
+      typeof renderedTree.rawNodeName !== 'function' &&
+      renderedTree.nodeType === 11 &&
+      !renderedTree.childNodes.length
+    ) {
+      renderedTree = createTree('#text');
+    }
+
     // Set up the HoC parent/child relationship.
     if (typeof renderedTree.rawNodeName === 'function') {
       ComponentTreeCache.set(renderedTree, vTree);
@@ -134,6 +142,16 @@ export default function renderComponent(vTree) {
 
     renderedTree = createTree(renderRetVal || '#text');
 
+    // If the rendered return value is an empty fragment, default to an empty
+    // text value.
+    if (
+      typeof renderedTree.rawNodeName !== 'function' &&
+      renderedTree.nodeType === 11 &&
+      !renderedTree.childNodes.length
+    ) {
+      renderedTree = createTree('#text');
+    }
+
     // Set up the HoC parent/child relationship.
     if (typeof renderedTree.rawNodeName === 'function') {
       ComponentTreeCache.set(renderedTree, vTree);

diff --git a/packages/diffhtml-components/test/integration/component.js b/packages/diffhtml-components/test/integration/component.js
@@ -195,6 +195,60 @@ describe('Component implementation', function() {
   });
 
   describe('Lifecycle', () => {
+    it('will fire on undefined render return value', () => {
+      let wasCalled = false;
+
+      class CustomComponent extends Component {
+        render() {
+          return undefined;
+        }
+
+        componentDidMount() {
+          wasCalled = true;
+        }
+      }
+
+      innerHTML(this.fixture, html`<${CustomComponent} someProp="true" />`);
+
+      ok(wasCalled);
+    });
+
+    it('will fire on empty fragment render return value', () => {
+      let wasCalled = false;
+
+      class CustomComponent extends Component {
+        render() {
+          return undefined;
+        }
+
+        componentDidMount() {
+          wasCalled = true;
+        }
+      }
+
+      innerHTML(this.fixture, html`<${CustomComponent} someProp="true" />`);
+
+      ok(wasCalled);
+    });
+
+    it('will fire on empty fragment array render return value', () => {
+      let wasCalled = false;
+
+      class CustomComponent extends Component {
+        render() {
+          return html`${[]}`;
+        }
+
+        componentDidMount() {
+          wasCalled = true;
+        }
+      }
+
+      innerHTML(this.fixture, html`<${CustomComponent} someProp="true" />`);
+
+      ok(wasCalled);
+    });
+
     it('will map to componentDidMount', () => {
       let wasCalled = false;
 

diff --git a/packages/diffhtml-components/test/integration/hooks.js b/packages/diffhtml-components/test/integration/hooks.js
@@ -43,6 +43,22 @@ describe('Hooks', function() {
       }, /Missing function for side effect/);
     });
 
+    it('will support componentDidMount with empty render', async () => {
+      let firedOnMount = 0;
+
+      function Component() {
+        createSideEffect(() => {
+          firedOnMount++;
+        });
+      }
+
+      this.fixture = document.createElement('div');
+
+      await innerHTML(this.fixture, html`<${Component} />`);
+
+      strictEqual(firedOnMount, 1);
+    });
+
     it('will support componentDidMount', async () => {
       let firedOnMount = 0;