A little bit of insight why a navigation occurs:

vue-hot-reload-api is responsible for handling hot module "chunks". In case a template changes, it replaces the render function with a new one, and calls $forceUpdate on the affected component to trigger a re-render.

In case the script part of the component changes, it $destroys the component, and re-creates it, in case lifecycle hooks have been changed.

In NativeScript-Vue, when a <Page> element is created, it finds the closest <Frame> parent, and notifies it, and then the Frame navigates to the <Page>. With HMR the navigation occurs when the <script> changes (as in case 2 above), which in turn re-creates the <Page> component, which then notifies the parent again.

For me only script is getting updated, style changes are not instant and require a change in script to be pushed. Any idea what's wrong?

@saibbyweb's issue has been introduced and addressed in the nativescript-dev-webpack@next, logged here: NativeScript/nativescript-dev-webpack#762

@rigor789 the issue is solved here #444 but this is a dirty hack. Ideally, the NS code would have methods for replacing the last item of the navigation stack, but it seems there is no API for that.

Maybe the NS core team have something to say about it.

@msaelices Thanks for reaching out! Currently we are in the middle of 5.3 iteration and our backlog is pretty much set. I'm adding your feature request for extending the API of the navigation stack to our vNext backlog and we will discuss its feasibility on the next planning meetings.

@msaelices I believe there was a miscommunication regarding this issue and the NativeScript Core framework. The way NativeScript Core currently works is that on Livesync/HMR of a script file there is a navigation in the same Frame with the clearHistory option set to true. Is there a problem using this approach in NativeScript Vue?

@MartoYankov The issue I can think of with using clearHistory is that in case the HMR happens on a page that was navigated to (Details page for example), you loose your backstack and can't navigate back anymore without restarting the application.

@MartoYankov totally agree with @rigor789. In that case, I guess there would be the same losing backstack issue with Angular, right?

Please review this part of the PR https://github.com/nativescript-vue/nativescript-vue/pull/444/files#diff-c7066f3e92bcad6c8156ffe597acaa48R106

A simple method which does internally the same thing we did would be perfect, as some calls that we did likeviewController['_transition'] = { name: 'non-animated' } should be in the Frame class

@rigor789 @msaelices We are aware if this as a usability issue and we are aiming to improve this as a whole in NativeScript for all frameworks. We just don't have a good foolproof solution yet and as @manoldonev mentioned, we are kind of overbooked at the moment. Do you think this should be a blocker for the Vue framework implementation?

Actually, Angular currently has it even worse and doesn't even have the clearHistory navigation for other reasons. We are actually discussing that using navigation for HMR might not be the correct way at all.

The replace navigation approach sounds like a good candidate for an implementation and I think we might add it as a solution to HMR since it's only a development workflow. However, providing it as a public API for navigation would require more work and testing against a lot of scenarios. The problem lies in transitions. We currently have lots of outstanding issues with navigation transitions with nesting navigations and as far as our research went a while back, native frameworks don't have "replace" as a natural pattern.

@MartoYankov What about having a method for only replacing the last element in the backstack, but intended only for using in HMR scenarios? So, it would be without any transitions and effects because of we, as developers, only need to replace the currently rendered page.

I think this would help both to Angular and Vue bindings to bring a better experience to the developers.

👍

I think an internal method for doing it without any transitions would solve quite a few issues for both Angular and Vue

As I mentioned, this is definitely a viable solution and we will explore it as an improvement for all three frameworks. We are not considering this as critical. @vchimev is working on HMR for Core and Angular at the moment and I think he will have a chance to look at this soon.

That being said, this solution doesn't handle all scenarios in NativeScript. There are scenarios where you have RadSideDrawer, TabView or a Layout as root and you won't be able to refresh these and keep their state with navigation.