hackpirodev
diff --git a/‎demo/app/components/Home.vue
Lines changed: 7 additions & 4 deletions b/‎demo/app/components/Home.vue
Lines changed: 7 additions & 4 deletions
diff --git a/‎src/plugins/navigation.ts
Lines changed: 60 additions & 13 deletions b/‎src/plugins/navigation.ts
Lines changed: 60 additions & 13 deletions
diff --git a/‎src/runtimeHelpers.ts
Lines changed: 5 additions & 3 deletions b/‎src/runtimeHelpers.ts
Lines changed: 5 additions & 3 deletions
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import Test from './Test.vue';
+import { ListItem, onMounted, onUnmounted } from 'nativescript-vue';
 import { goHome } from '~/composables/goHome';
-import { onUnmounted } from &
10000
#39;nativescript-vue';
-import { ListItem } from 'nativescript-vue';
+import Test from './Test.vue';
 
 defineProps({
   depth: {
@@ -11,7 +10,7 @@ defineProps({
   },
 });
 
-const message = 'Hello World!';
+const message = 'Hello World!!';
 
 interface Test {
   name: string;
@@ -31,6 +30,10 @@ function selector(item: ListItem<Test>) {
   return item.even ? 'default' : 'odd';
 }
 
+onMounted(() => {
+  console.log('MOUNTED HOME');
+});
+
 onUnmounted(() => {
   console.log('UNMOUNTED HOME');
 });
 
@@ -1,6 +1,6 @@
 import { Frame, NavigationEntry, Page } from '@nativescript/core';
 import { App, Component, Ref, nextTick, unref } from '@vue/runtime-core';
-import { NSVElement } from '../dom';
+import { NSVElement, NSVRoot } from '../dom';
 import { createNativeView } from '../runtimeHelpers';
 
 declare module '@vue/runtime-core' {
@@ -69,28 +69,75 @@ export function $navigateTo(
       throw new Error('Failed to resolve frame. Make sure your frame exists.');
     }
 
-    let view = createNativeView<Page>(target, options?.props);
+    const root = new NSVRoot();
+    let isReloading = false;
 
-    view.mount();
+    const attachDisposeCallback = (page: Page) => {
+      const dispose = page.disposeNativeView;
 
-    const page = view.nativeView;
-    const dispose = page.disposeNativeView;
+      page.disposeNativeView = () => {
+        dispose.call(page);
 
-    page.disposeNativeView = () => {
-      dispose.call(page);
-
-      nextTick(() => {
-        view.unmount();
-        view = null;
+        // if we are reloading, don't unmount the view, as the reload will unmount/remount it.
+        if (!isReloading) {
+          view.unmount();
+          view = null;
+        }
+      };
+    };
+    const reloadPage = () => {
+      if (isReloading) {
+        return;
+      }
+
+      // if the page we are reloading is not the current page, wait for it to be navigated to
+      if (frame.currentPage !== view.nativeView) {
+        view.nativeView.once('navigatedTo', () => {
+          nextTick(() => {
+            reloadPage();
+          });
+        });
+        return;
+      }
+
+      isReloading = true;
+      view.unmount();
+      view.mount(root);
+      attachDisposeCallback(view.nativeView);
+
+      const originalTransition = frame.currentEntry.transition;
+      // replace current page
+      frame.replacePage({
+        ...options,
+        transition: {
+          name: 'fade',
+          duration: 10,
+        },
+        create: () => view.nativeView,
+      });
+      // reset the transition to the original one
+      frame.once('navigatedTo', () => {
+        frame.currentEntry.transition = originalTransition;
+        isReloading = false;
       });
     };
 
+    let view = createNativeView<Page>(target, options?.props, {
+      /**
+       * Called by @vue/runtime-core when the component is reloaded during HMR.
+       */
+      reload: reloadPage,
+    });
+
+    view.mount(root);
+    attachDisposeCallback(view.nativeView);
+
     frame.navigate({
       ...options,
-      create: () => page,
+      create: () => view.nativeView,
     });
 
-    return page;
+    return view.nativeView;
   } catch (e) {
     console.error('[$navigateTo] Failed to navigate:\n\n');
     console.error(e, e.stack);
 
@@ -22,12 +22,13 @@ export const setRootContext = (context: AppContext) => {
 
 export const createNativeView = <T = View>(
   component: Component,
-  props?: Props
+  props?: Props,
+  contextOverrides?: any
 ) => {
   let vnode: VNode;
   let isMounted = false;
   let container: NSVNode;
-  const context = { ...rootContext };
+  const context = { ...rootContext, ...contextOverrides };
 
   type M = VNode<RendererNode, RendererElement, { nativeView: T }>;
 
@@ -54,8 +55,9 @@ export const createNativeView = <T = View>(
     },
     unmount() {
       if (!isMounted) return;
-      renderer.render(null, container);
       vnode = null;
+      renderer.render(null, container);
+      isMounted = false;
       container = null;
     },
   };