Alpine-Router icon indicating copy to clipboard operation
Alpine-Router copied to clipboard

Replace templates only for different URL tokens

Open lcmen opened this issue 3 years ago • 1 comments

Hey! Thank you for writing this nice library. I'm not sure you still manages this project but it's actually one of the top links when you search for Alpine.js router (try "alpine js router" query in Google and see it yourself 🥇 ). I'm absolutely aware, it's not related to Alpine.js framework and it predates it, as it was mentioned here #4. Despite that, Alpine-Router can works pretty seamlessly with Alpine.js. It's also one of the few routers that supports nested routes which can be used to build nested layouts 💪 !

While playing around with the router in Alpine.js project, I noticed that navigate updates innerHTML of all <router-outlet> elements. It can cause issues with libraries / frameworks relying on mutation observer (Alpine.js, Stimulus, etc.) as it will resets parent controller's state even when the relevant part of DOM structure hasn't change (only child route changes).

This PR slightly modify the behaviour by tracking current route, and comparing it with a new one to update only relevant <router-outlet> elements.

I haven't updated tests yet as I'm not sure what's the best way to verify new logic so I would appreciate any pointers.

lcmen avatar Jul 14 '21 19:07 lcmen