tbranyen / diffhtml

diffHTML is a web framework that helps you build applications and other interactive content
https://diffhtml.org
MIT License
868 stars 47 forks source link

Allow previously diffed elements to be updated #315

Open tbranyen opened 1 year ago

tbranyen commented 1 year ago

Removes a mount's transaction state when it is attached to another mount, via Transaction.create. This allows it to be re-used as a mount in future transactions.

Fixes GH-314

tbranyen commented 1 year ago

Holding off on merging this since I feel there is probably a better way of solving this. Clearly something is being disconnected when appendChild comes into play. When I do some investigating I find that the previously rendered tree for a DOM node that is appended into a different mount resolves to an isolated DOM Node that isn't attached to anything. This is why the unit test in this PR was failing. When I delete the StateCache in this PR, I'm effectively forcing diffHTML to recalculate and restore the VTree->DOM node relationship to the correct node in the DOM.

tbranyen commented 1 year ago

I noticed the test only fails once the inner span is set to 'Test 2' this means it's not actually a problem that the P tag was previously rendered. It looks to be an issue with rendering the span and it gets detached from the paragraph somehow.

       it('will support diffing an element with a StateCache', function () {          
         const p = document.createElement("p");                                       

         // Create the StateCache on <p/>                                             
         diff.innerHTML(p, "<span>Test</span>");                                      

         diff.innerHTML(this.fixture, p); // append p into the fixture div            

        // commenting this out makes the test pass
       // diff.innerHTML(this.fixture.querySelector("span"), "Test 2");                

         diff.innerHTML(this.fixture.querySelector("p"), "<span>Test 3</span>");   

         assert.equal(this.fixture.querySelector("span").innerHTML, "Test 3");        
       });                                                                            
     });