Closed msaspence closed 8 years ago
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:
But it works!
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.
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.
@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.
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:
Click on the first link, and then the second which loads:
What will end up in the browser is:
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?