innerHTML fails to diff element when its children have been diffed previously
h5gq3 opened this issue · 5 comments
h5gq3 commented
illustrated by this test:
it("will diff an element when element's children have been diffed before", function (cb) {
var 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();
});
});
CetinSert commented
Is this a regression in v1.0.0-beta.30 released on 2023-07-12 (3 days ago)?
h5gq3 commented
no, it's been this way since i encountered this few months ago
tbranyen commented
I dropped this test into the dom node section of the unit tests and was able to reproduce the failure:
Definitely looks like a bug, thanks for reporting!
tbranyen commented
This is the offending line: https://github.com/tbranyen/diffhtml/blob/master/packages/diffhtml/lib/transaction.js#L135
Looks like we're reusing the state from a previous render, instead of creating a new transaction state for the updates. When I remove: StateCache.get(mount) || the test passes:
