Mutations in page not reflected in the virtual DOM

[msaspence]

Once your page has been "reactized" any mutations to the page will not be synced to the virtual dom. And when a new page is loaded in react will apply changes to the page as it was when first loaded not as it is currently.

This means given an initial page load of:

<div class="hello world">
    <a href="#" onclick="$(this).parent().removeClass('hello)">Click me</a>
    <a href="/secondpage">And then me</a>
</div>

Click on the first link, and then the second which loads:

<div class="hello world">
    Second page
</div>

What will end up in the browser is:

<div class="world">
    Second page
</div>

Because react is unaware that the hello class has been removed and thinks the elements class in consistent with the new page.

I'm not sure what the solution is? Is it as simple as reactizing the page again before a new page load?

[msaspence]

I had a play with this today and came up with this:

https://gist.github.com/msaspence/6d8da471e8ec87f1ec40

It's pretty ugly in a couple of places:

• setTimeout 0, ensures the the dom changes don't happen so quickly that the browser disregards them

• turbo-react div wrapper ensures there is only ever one root node, if you switch between one root and more than one element at the root level it just subs out the whole element rather than the diff.

But it works!

[ssorallen]

Mutating the DOM outside turbo-react goes beyond the scope I originally considered was useful for this project. If you need to 2-way sync between React and the DOM, you might have an easier and more predictable time managing everything yourself.

That said, you might consider a MutationObserver on the document that begins observing after each each update by turbo-react and disconnects before new changes are begun.

[msaspence]

Yeah I ended writing a new implementation based on turbolinks 5 and morphdom. Morphdom diffs your two states and applies the differences piece by piece but it doesn't use a virtual DOM, it uses the actually DOM as its version of the truth so don't have to track changes to it. It is also a TONNE smaller, and doesn't pollute your elements with react ids.

https://github.com/msaspence/turbomorph

[ssorallen]

@msaspence Cool, turbo-morph looks great.

Thanks for bringing up this issue. Because I see this as beyond the scope of turbo-react, I am going to close it. Let me know if you think otherwise.