From fd28bee4795b5bb395ef8baf8c6050391c30dc66 Mon Sep 17 00:00:00 2001
From: Tim Branyen <tim@tabdeveloper.com>
Date: Fri, 14 Jul 2023 09:25:04 -0700
Subject: [PATCH] Allow previously diffed elements to be updated

---
 packages/diffhtml/lib/transaction.js        |  6 ++++++
 packages/diffhtml/test/integration/inner.js | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/packages/diffhtml/lib/transaction.js b/packages/diffhtml/lib/transaction.js
index abdf7e5b..91f02a22 100644
--- a/packages/diffhtml/lib/transaction.js
+++ b/packages/diffhtml/lib/transaction.js
@@ -149,6 +149,12 @@ export default class Transaction {
     this.endedCallbacks = new Set();
 
     StateCache.set(mount, this.state);
+
+    // When a previous mount is injected into a new location, remove the
+    // state held for it, this allows previously diffed elements to be updated.
+    if (StateCache.has(input)) {
+      StateCache.delete(input);
+    }
   }
 
   /**
diff --git a/packages/diffhtml/test/integration/inner.js b/packages/diffhtml/test/integration/inner.js
index d250abee..559a8a88 100644
--- a/packages/diffhtml/test/integration/inner.js
+++ b/packages/diffhtml/test/integration/inner.js
@@ -354,6 +354,24 @@ describe('Integration: innerHTML', function() {
       diff.innerHTML(this.fixture, diff.html`<div>${domNode}<p>after</p></div>`);
       assert.equal(this.fixture.innerHTML, '<div><div>test</div><p>after</p></div>');
     });
+
+    it("will diff an element when element's children have been diffed before", function (cb) {
+      const p = document.createElement("p");
+      diff.innerHTML(p, "<span>Test</span>");
+      // this.fixture is <div></div>
+      diff.innerHTML(this.fixture, p); // <div><p><span>Test</span></p></div>
+
+      // diff element p child span
+      diff.innerHTML(this.fixture.querySelector("span"), "Test 2"); // this works: <div><p><span>Test 2</span></p></div>
+
+      // our test case: diff element p when child span has been diffed previously
+      diff.innerHTML(this.fixture.querySelector("p"), "<span>Test 3</span>"); // this doesn't work - still <div><p><span>Test 2</span></p></div>
+
+      setTimeout(() => {
+        assert.equal(this.fixture.querySelector("span").innerHTML, "Test 3"); // fails because it's still Test 2
+        cb();
+      });
+    });
   });
 
   describe('Comments', function() {