nativescript-vue 3.0.0-beta.5 → 3.0.0-beta.7

package/dist/nativescript/elements.js

@@ -1,33 +1,33 @@
-import { Page as NSCPage } from "@nativescript/core";
-import { warn } from "@vue/runtime-core";
-import { registerElement } from "../registry";
+import { Page as NSCPage } from '@nativescript/core';
+import { warn } from '@vue/runtime-core';
+import { registerElement } from '../registry';
 export function registerCoreElements() {
     // layouts
-    registerElement("AbsoluteLayout", () => require("@nativescript/core").AbsoluteLayout, { viewFlags: 4 /* NSVViewFlags.LAYOUT_VIEW */ });
-    registerElement("DockLayout", () => require("@nativescript/core").DockLayout, {
+    registerElement('AbsoluteLayout', () => require('@nativescript/core').AbsoluteLayout, { viewFlags: 4 /* NSVViewFlags.LAYOUT_VIEW */ });
+    registerElement('DockLayout', () => require('@nativescript/core').DockLayout, {
         viewFlags: 4 /* NSVViewFlags.LAYOUT_VIEW */,
     });
-    registerElement("FlexboxLayout", () => require("@nativescript/core").FlexboxLayout, { viewFlags: 4 /* NSVViewFlags.LAYOUT_VIEW */ });
-    registerElement("GridLayout", () => require("@nativescript/core").GridLayout, {
+    registerElement('FlexboxLayout', () => require('@nativescript/core').FlexboxLayout, { viewFlags: 4 /* NSVViewFlags.LAYOUT_VIEW */ });
+    registerElement('GridLayout', () => require('@nativescript/core').GridLayout, {
         viewFlags: 4 /* NSVViewFlags.LAYOUT_VIEW */,
     });
-    registerElement("RootLayout", () => require("@nativescript/core").RootLayout, {
+    registerElement('RootLayout', () => require('@nativescript/core').RootLayout, {
         viewFlags: 4 /* NSVViewFlags.LAYOUT_VIEW */,
     });
-    registerElement("StackLayout", () => require("@nativescript/core").StackLayout, { viewFlags: 4 /* NSVViewFlags.LAYOUT_VIEW */ });
-    registerElement("WrapLayout", () => require("@nativescript/core").WrapLayout, {
+    registerElement('StackLayout', () => require('@nativescript/core').StackLayout, { viewFlags: 4 /* NSVViewFlags.LAYOUT_VIEW */ });
+    registerElement('WrapLayout', () => require('@nativescript/core').WrapLayout, {
         viewFlags: 4 /* NSVViewFlags.LAYOUT_VIEW */,
     });
     // ContentViews
-    registerElement("ContentView", () => require("@nativescript/core").ContentView, { viewFlags: 2 /* NSVViewFlags.CONTENT_VIEW */ });
-    registerElement("ScrollView", () => require("@nativescript/core").ScrollView, {
+    registerElement('ContentView', () => require('@nativescript/core').ContentView, { viewFlags: 2 /* NSVViewFlags.CONTENT_VIEW */ });
+    registerElement('ScrollView', () => require('@nativescript/core').ScrollView, {
         viewFlags: 2 /* NSVViewFlags.CONTENT_VIEW */,
     });
     // ActionBar
-    registerElement("ActionItem", () => require("@nativescript/core").ActionItem);
-    registerElement("NavigationButton", () => require("@nativescript/core").NavigationButton);
+    registerElement('ActionItem', () => require('@nativescript/core').ActionItem);
+    registerElement('NavigationButton', () => require('@nativescript/core').NavigationButton);
     // navigation
-    registerElement("Frame", () => require("@nativescript/core").Frame, {
+    registerElement('Frame', () => require('@nativescript/core').Frame, {
         // todo: move into Frame.ts when we end up creating a component for Frame
         nodeOps: {
             insert(child, parent, atIndex) {
@@ -52,22 +52,22 @@ export function registerCoreElements() {
             },
         },
     });
-    registerElement("Page", () => require("@nativescript/core").Page, {
+    registerElement('Page', () => require('@nativescript/core').Page, {
         viewFlags: 2 /* NSVViewFlags.CONTENT_VIEW */,
     });
     // html
-    registerElement("HtmlView", () => require("@nativescript/core").HtmlView);
-    registerElement("WebView", () => require("@nativescript/core").WebView);
+    registerElement('HtmlView', () => require('@nativescript/core').HtmlView);
+    registerElement('WebView', () => require('@nativescript/core').WebView);
     // components
-    registerElement("ActivityIndicator", () => require("@nativescript/core").ActivityIndicator);
-    registerElement("Button", () => require("@nativescript/core").Button);
-    registerElement("DatePicker", () => require("@nativescript/core").DatePicker, {
+    registerElement('ActivityIndicator', () => require('@nativescript/core').ActivityIndicator);
+    registerElement('Button', () => require('@nativescript/core').Button);
+    registerElement('DatePicker', () => require('@nativescript/core').DatePicker, {
         model: {
-            prop: "date",
-            event: "dateChange",
+            prop: 'date',
+            event: 'dateChange',
         },
     });
-    registerElement("FormattedString", () => require("@nativescript/core").FormattedString, {
+    registerElement('FormattedString', () => require('@nativescript/core').FormattedString, {
         nodeOps: {
             insert(child, parent, atIndex) {
                 if (atIndex) {
@@ -84,58 +84,58 @@ export function registerCoreElements() {
             },
         },
     });
-    registerElement("Image", () => require("@nativescript/core").Image);
-    registerElement("Label", () => require("@nativescript/core").Label);
-    registerElement("ListPicker", () => require("@nativescript/core").ListPicker, {
+    registerElement('Image', () => require('@nativescript/core').Image);
+    registerElement('Label', () => require('@nativescript/core').Label);
+    registerElement('ListPicker', () => require('@nativescript/core').ListPicker, {
         model: {
-            prop: "selectedIndex",
-            event: "selectedIndexChange",
+            prop: 'selectedIndex',
+            event: 'selectedIndexChange',
         },
     });
-    registerElement("Placeholder", () => require("@nativescript/core").Placeholder);
-    registerElement("Progress", () => require("@nativescript/core").Progress);
-    registerElement("SearchBar", () => require("@nativescript/core").SearchBar, {
+    registerElement('Placeholder', () => require('@nativescript/core').Placeholder);
+    registerElement('Progress', () => require('@nativescript/core').Progress);
+    registerElement('SearchBar', () => require('@nativescript/core').SearchBar, {
         model: {
-            prop: "text",
-            event: "textChange",
+            prop: 'text',
+            event: 'textChange',
         },
     });
-    registerElement("SegmentedBar", () => require("@nativescript/core").SegmentedBar, {
+    registerElement('SegmentedBar', () => require('@nativescript/core').SegmentedBar, {
         model: {
-            prop: "selectedIndex",
-            event: "selectedIndexChange",
+            prop: 'selectedIndex',
+            event: 'selectedIndexChange',
         },
     });
-    registerElement("SegmentedBarItem", () => require("@nativescript/core").SegmentedBarItem);
-    registerElement("Slider", () => require("@nativescript/core").Slider, {
+    registerElement('SegmentedBarItem', () => require('@nativescript/core').SegmentedBarItem);
+    registerElement('Slider', () => require('@nativescript/core').Slider, {
         model: {
-            prop: "value",
-            event: "valueChange",
+            prop: 'value',
+            event: 'valueChange',
         },
     });
-    registerElement("Span", () => require("@nativescript/core").Span);
-    registerElement("Switch", () => require("@nativescript/core").Switch, {
+    registerElement('Span', () => require('@nativescript/core').Span);
+    registerElement('Switch', () => require('@nativescript/core').Switch, {
         model: {
-            prop: "checked",
-            event: "checkedChange",
+            prop: 'checked',
+            event: 'checkedChange',
         },
     });
-    registerElement("TextField", () => require("@nativescript/core").TextField, {
+    registerElement('TextField', () => require('@nativescript/core').TextField, {
         model: {
-            prop: "text",
-            event: "textChange",
+            prop: 'text',
+            event: 'textChange',
         },
     });
-    registerElement("TextView", () => require("@nativescript/core").TextView, {
+    registerElement('TextView', () => require('@nativescript/core').TextView, {
         model: {
-            prop: "text",
-            event: "textChange",
+            prop: 'text',
+            event: 'textChange',
         },
     });
-    registerElement("TimePicker", () => require("@nativescript/core").TimePicker, {
+    registerElement('TimePicker', () => require('@nativescript/core').TimePicker, {
         model: {
-            prop: "time",
-            event: "timeChange",
+            prop: 'time',
+            event: 'timeChange',
         },
     });
 }

package/dist/nativescript/index.d.ts

@@ -1,6 +1,6 @@
-import { View } from "@nativescript/core";
-import { ComponentPublicInstance } from "@vue/runtime-core";
+import { View } from '@nativescript/core';
+import { ComponentPublicInstance } from '@vue/runtime-core';
 export declare function init(): void;
 export declare function startApp(rootComponent: ComponentPublicInstance): void;
 export declare function resetRoot(view: View): void;
-export { isAndroid, isIOS } from "@nativescript/core";
+export { isAndroid, isIOS } from '@nativescript/core';

package/dist/nativescript/index.js

@@ -1,5 +1,5 @@
-import { Application } from "@nativescript/core";
-import { registerCoreElements } from "./elements";
+import { Application } from '@nativescript/core';
+import { registerCoreElements } from './elements';
 // export all ns stuff in a single file to allow easy mocking for testing...
 export function init() {
     registerCoreElements();
@@ -21,7 +21,7 @@ export function resetRoot(view) {
         },
     });
 }
-export { isAndroid, isIOS } from "@nativescript/core";
+export { isAndroid, isIOS } from '@nativescript/core';
 // export const isAndroid = false;
 // export const isIOS = false;
 //# sourceMappingURL=index.js.map

package/dist/plugins/modals.d.ts

@@ -1,15 +1,19 @@
-import { App, Component, ComponentInternalInstance, ComponentPublicInstance, Ref } from "@vue/runtime-core";
-import { ShowModalOptions, View } from "@nativescript/core";
-import { NSVElement } from "..";
-declare module "@vue/runtime-core" {
+import { ShowModalOptions, View } from '@nativescript/core';
+import { App, Component, ComponentPublicInstance } from '@vue/runtime-core';
+import { NSVElement } from '../dom';
+declare module '@vue/runtime-core' {
     interface ComponentCustomProperties {
         /**
          * todo: update docblock
          */
         $showModal: <T = any>(component: Component, options?: ModalOptions) => Promise<T | false | undefined>;
+        $closeModal: (arg: any) => void;
+        $modal: {
+            close: (arg: any) => void;
+        };
     }
 }
-declare type ResolvableModalTarget = Ref | ComponentInternalInstance | ComponentPublicInstance | NSVElement | View | any;
+type ResolvableModalTarget = ComponentPublicInstance | NSVElement | View;
 export interface ModalOptions extends Partial<ShowModalOptions> {
     props?: Record<string, any>;
     target?: ResolvableModalTarget;

package/dist/plugins/modals.js

@@ -1,7 +1,8 @@
-import { warn, } from "@vue/runtime-core";
-import { Application, View } from "@nativescript/core";
-import { createApp, NSVElement } from "..";
-import { isObject } from "@vue/shared";
+import { Application, View } from '@nativescript/core';
+import { unref, warn, } from '@vue/runtime-core';
+import { NSVElement, NSVRoot } from '../dom';
+import { createNativeView } from '../runtimeHelpers';
+import { isObject } from '@vue/shared';
 /**
  * @internal
  */
@@ -9,53 +10,70 @@ export function install(app) {
     app.config.globalProperties.$showModal = $showModal;
 }
 function resolveModalTarget(target) {
-    if (isObject(target) && isObject(target.$el)) {
-        return target.$el.nativeView;
+    const ob = unref(target);
+    if (ob instanceof NSVElement) {
+        return ob.nativeView;
     }
-    else if (target instanceof NSVElement) {
-        return target.nativeView;
+    else if (ob instanceof View) {
+        return ob;
     }
-    else if (target instanceof View) {
-        return target;
+    else if (isObject(ob) && isObject(ob.$el)) {
+        return ob.$el.nativeView;
     }
     return false;
 }
-export async function $showModal(component, options) {
-    options = Object.assign({
-        target: Application.getRootView(),
-    }, options);
-    const modalTarget = resolveModalTarget(options.target);
+export async function $showModal(component, options = {}) {
+    const modalTarget = resolveModalTarget(options.target ?? Application.getRootView());
     if (!modalTarget) {
         if (__DEV__) {
             warn(`could not open modal because the target does not exist`);
         }
-        return false;
+        return;
     }
     return new Promise((resolve) => {
-        const modalApp = createApp(component, options ? options.props : null);
         let isResolved = false;
+        let isReloading = false;
+        let root = new NSVRoot();
+        const reloadModal = () => {
+            isReloading = true;
+            closeModal();
+            // reopening is done in `closeCallback`
+        };
+        let view = createNativeView(component, options.props, {
+            reload: reloadModal,
+        });
         const closeCallback = (data) => {
             if (isResolved)
                 return;
-            isResolved = true;
-            try {
-                modalContent.closeModal();
-            }
-            catch (e) {
-                // ignore?
+            if (isReloading) {
+                view.unmount();
+                view.mount(root);
+                openModal({
+                // todo: for this to work nicely, we'd need to add `animated: false` to `closeModal` as well
+                // but not currently possible without a core change.
+                // animated: false,
+                });
+                isReloading = false;
+                return;
             }
-            modalApp.unmount();
+            isResolved = true;
+            view.unmount();
+            view = null;
             resolve(data);
         };
-        modalApp.config.globalProperties.$modal = {
-            close: closeCallback,
+        const openModal = (additionalOptions) => {
+            modalTarget.showModal(view.nativeView, {
+                ...options,
+                context: null,
+                closeCallback,
+                ...additionalOptions,
+            });
         };
-        const modalContent = modalApp.mount().$el.nativeView;
-        modalTarget.showModal(modalContent, {
-            ...options,
-            context: null,
-            closeCallback,
-        });
+        const closeModal = (...args) => view.nativeView?.closeModal(...args);
+        view.context.config.globalProperties.$closeModal = closeModal;
+        view.context.config.globalProperties.$modal = { close: closeModal };
+        view.mount(root);
+        openModal();
     });
 }
 //# sourceMappingURL=modals.js.map

package/dist/plugins/modals.js.map

@@ -1 +1 @@
-{"version":3,"file":"modals.js","sourceRoot":"","sources":["../../src/plugins/modals.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,IAAI,GACL,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAoB,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA2BvC;;GAEG;AACH,MAAM,UAAU,OAAO,CAAC,GAAQ;IAC9B,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,UAAU,GAAG,UAAU,CAAC;AACtD,CAAC;AAED,SAAS,kBAAkB,CAAC,MAA6B;IACvD,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;QAC5C,OAAO,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC;KAC9B;SAAM,IAAI,MAAM,YAAY,UAAU,EAAE;QACvC,OAAO,MAAM,CAAC,UAAU,CAAC;KAC1B;SAAM,IAAI,MAAM,YAAY,IAAI,EAAE;QACjC,OAAO,MAAM,CAAC;KACf;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,UAAU,CAC9B,SAAoB,EACpB,OAAsB;IAEtB,OAAO,GAAG,MAAM,CAAC,MAAM,CACrB;QACE,MAAM,EAAE,WAAW,CAAC,WAAW,EAAE;KAClC,EACD,OAAO,CACR,CAAC;IAEF,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAEvD,IAAI,CAAC,WAAW,EAAE;QAChB,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,wDAAwD,CAAC,CAAC;SAChE;QACD,OAAO,KAAK,CAAC;KACd;IAED,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,MAAM,QAAQ,GAAG,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACtE,IAAI,UAAU,GAAG,KAAK,CAAC;QACvB,MAAM,aAAa,GAAG,CAAC,IAAQ,EAAE,EAAE;YACjC,IAAI,UAAU;gBAAE,OAAO;YACvB,UAAU,GAAG,IAAI,CAAC;YAElB,IAAI;gBACF,YAAY,CAAC,UAAU,EAAE,CAAC;aAC3B;YAAC,OAAO,CAAC,EAAE;gBACV,UAAU;aACX;YAED,QAAQ,CAAC,OAAO,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC,CAAC;QAEF,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAM,GAAG;YACxC,KAAK,EAAE,aAAa;SACrB,CAAC;QAEF,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC;QAErD,WAAW,CAAC,SAAS,CAAC,YAAY,EAAE;YAClC,GAAG,OAAO;YACV,OAAO,EAAE,IAAI;YACb,aAAa;SACd,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"modals.js","sourceRoot":"","sources":["../../src/plugins/modals.ts"],"names":[],"mappings":"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"}

package/dist/plugins/navigation.d.ts

@@ -1,7 +1,7 @@
-import { App, Component, Ref } from "@vue/runtime-core";
-import { Frame, NavigationEntry, Page } from "@nativescript/core";
-import { NSVElement } from "..";
-declare module "@vue/runtime-core" {
+import { Frame, NavigationEntry, Page } from '@nativescript/core';
+import { App, Component, Ref } from '@vue/runtime-core';
+import { NSVElement } from '../dom';
+declare module '@vue/runtime-core' {
     interface ComponentCustomProperties {
         /**
          * todo: update docblock
@@ -11,11 +11,11 @@ declare module "@vue/runtime-core" {
          * @param target
          * @param options
          */
-        $navigateTo: (target: Component, options?: NavigationOptions) => Promise<any>;
+        $navigateTo: (target: Component, options?: NavigationOptions) => Page;
         $navigateBack: (options?: NavigationOptions) => void;
     }
 }
-declare type ResolvableFrame = string | Ref | NSVElement | Frame | undefined;
+type ResolvableFrame = string | Ref | NSVElement | Frame | undefined;
 export interface NavigationOptions extends NavigationEntry {
     props?: Record<string, any>;
     frame?: ResolvableFrame;
@@ -27,6 +27,6 @@ export interface BackNavigationOptions {
  * @internal
  */
 export declare function install(app: App): void;
-export declare function $navigateTo(target: Component, options?: NavigationOptions): Promise<Page>;
+export declare function $navigateTo(target: Component, options?: NavigationOptions): Page;
 export declare function $navigateBack(options?: BackNavigationOptions): Promise<void>;
 export {};

package/dist/plugins/navigation.js

@@ -1,6 +1,7 @@
-import { isRef } from "@vue/runtime-core";
-import { Frame } from "@nativescript/core";
-import { createApp, NSVElement, NSVRoot } from "..";
+import { Frame } from '@nativescript/core';
+import { nextTick, unref } from '@vue/runtime-core';
+import { NSVElement, NSVRoot } from '../dom';
+import { createNativeView } from '../runtimeHelpers';
 /**
  * @internal
  */
@@ -12,114 +13,94 @@ function resolveFrame(frame) {
     if (!frame) {
         return Frame.topmost();
     }
-    if (frame instanceof Frame) {
-        return frame;
+    const ob = unref(frame);
+    if (ob instanceof Frame) {
+        return ob;
     }
-    // todo: check if refs work this way or not
-    if (isRef(frame)) {
-        return frame.value;
-    }
-    if (frame instanceof NSVElement) {
-        return frame.nativeView;
+    if (ob instanceof NSVElement) {
+        return ob.nativeView;
     }
     // todo: either change core Frame to add frames to the stack when they are created
     // or do as we did in 2.x - handle a Map of frames.
     // right now, empty frames can't be navigated as they are not recognized by `getFrameById`
-    return Frame.getFrameById(frame);
-}
-function createNavigationRoot(cb) {
-    const defaultRoot = new NSVRoot();
-    // flag to indicate when we need to call resetRoot
-    // usually happens when the root component is re-mounted (HMR)
-    let shouldResetRoot = false;
-    const appendChild = defaultRoot.appendChild.bind(defaultRoot);
-    const removeChild = defaultRoot.removeChild.bind(defaultRoot);
-    defaultRoot.removeChild = (el) => {
-        removeChild(el);
-        shouldResetRoot = true;
-        // console.log("remove child", (el as NSVElement).tagName);
-    };
-    defaultRoot.appendChild = (el) => {
-        appendChild(el);
-        if (shouldResetRoot) {
-            shouldResetRoot = false;
-            // console.log("append child", (el as NSVElement).tagName);
-            cb(el.nativeView);
-        }
-    };
-    return defaultRoot;
-}
-function attachDisposeCallbacks(targetPage, disposeCallback) {
-    // const handler = (args: NavigatedData) => {
-    //   if (args.isBackNavigation) {
-    //     console.log("navigatedFrom called.");
-    //     targetPage.off("navigatedFrom", handler as any);
-    //     disposeCallback();
-    //   }
-    // };
-    // targetPage.on("navigatedFrom", handler);
-    const dispose = targetPage.disposeNativeView;
-    targetPage.disposeNativeView = () => {
-        // console.log("dispose native view called.");
-        disposeCallback(targetPage);
-        dispose.call(targetPage);
-    };
+    return Frame.getFrameById(ob);
 }
-export async function $navigateTo(target, options) {
-    options = Object.assign({}, options);
-    // console.log("$navigateTo");
+export function $navigateTo(target, options) {
     try {
-        const frame = resolveFrame(options.frame);
+        const frame = resolveFrame(options?.frame);
         if (!frame) {
-            throw new Error("Failed to resolve frame. Make sure your frame exists.");
+            throw new Error('Failed to resolve frame. Make sure your frame exists.');
         }
-        const cleanup = (page) => {
-            if (page === latestPage) {
-                // console.log("DISPOSE NAVIGATION APP");
-                navigationApp.unmount();
+        const root = new NSVRoot();
+        let isReloading = false;
+        const attachDisposeCallback = (page) => {
+            const dispose = page.disposeNativeView;
+            page.disposeNativeView = () => {
+                dispose.call(page);
+                // 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;
             }
-            else {
-                // console.log("no dispose we have replaced page");
+            // 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;
             }
-        };
-        const navigationApp = createApp(target, options.props);
-        const targetPage = navigationApp.mount(createNavigationRoot((newPage) => {
-            latestPage = newPage;
-            attachDisposeCallbacks(newPage, cleanup);
-            // cache the original transition of the current page
+            isReloading = true;
+            view.unmount();
+            view.mount(root);
+            attachDisposeCallback(view.nativeView);
             const originalTransition = frame.currentEntry.transition;
             // replace current page
             frame.replacePage({
                 ...options,
                 transition: {
-                    name: "fade",
+                    name: 'fade',
                     duration: 10,
                 },
-                create: () => newPage,
+                create: () => view.nativeView,
             });
             // reset the transition to the original one
-            frame.once("navigatedTo", () => {
+            frame.once('navigatedTo', () => {
                 frame.currentEntry.transition = originalTransition;
+                isReloading = false;
             });
-        })).$el.nativeView;
-        let latestPage = targetPage;
-        attachDisposeCallbacks(targetPage, cleanup);
+        };
+        let view = createNativeView(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: () => targetPage,
+            create: () => view.nativeView,
         });
-        return targetPage;
+        return view.nativeView;
     }
     catch (e) {
-        console.error("[$navigateTo] Failed to navigate:\n\n");
+        console.error('[$navigateTo] Failed to navigate:\n\n');
         console.error(e, e.stack);
         throw e;
     }
 }
 export async function $navigateBack(options) {
-    const frame = resolveFrame(options ? options.frame : undefined);
+    const frame = resolveFrame(options?.frame);
     if (!frame) {
-        throw new Error("Failed to resolve frame. Make sure your frame exists.");
+        throw new Error('Failed to resolve frame. Make sure your frame exists.');
     }
     if (!frame.canGoBack()) {
         return;

package/dist/plugins/navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../src/plugins/navigation.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../src/plugins/navigation.ts"],"names":[],"mappings":"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"}

package/dist/plugins/templates.d.ts

@@ -0,0 +1,10 @@
+import { App } from '@vue/runtime-core';
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $templates: any;
+    }
+}
+/**
+ * @internal
+ */
+export declare function install(app: App): void;

package/dist/plugins/templates.js

@@ -0,0 +1,12 @@
+/**
+ * @internal
+ */
+export function install(app) {
+    app.config.globalProperties.$templates = {
+        getKeyedTemplates() { },
+        selectorFn() { },
+        patchTemplate(name, context, oldVnode) { },
+        registerTemplate() { }
+    };
+}
+//# sourceMappingURL=templates.js.map

package/dist/plugins/templates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../src/plugins/templates.ts"],"names":[],"mappings":"AAQA;;GAEG;AACH,MAAM,UAAU,OAAO,CAAC,GAAQ;IAC9B,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,UAAU,GAAG;QACvC,iBAAiB,KAAI,CAAC;QACtB,UAAU,KAAI,CAAC;QACf,aAAa,CAAC,IAAY,EAAE,OAAY,EAAE,QAAe,IAAG,CAAC;QAC7D,gBAAgB,KAAI,CAAC;KACtB,CAAC;AACJ,CAAC"}