nativescript-vue · rigor789 · Apr 13, 2023 · Apr 9, 2023 · Apr 9, 2023 · Apr 9, 2023
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 **/dist
 *.tgz
 
-yarn-error.log
+yarn-error.log
+node_modules
diff --git a/package.json b/package.json
@@ -13,7 +13,6 @@
   },
   "dependencies": {
     "@vue/compiler-dom": "^3.2.41",
-    "@vue/runtime-dom": "^3.2.41",
     "@vue/compiler-sfc": "^3.2.41",
     "set-value": "^4.1.0",
     "vue-loader": "^17.0.0"

diff --git a/src/compiler.ts b/src/compiler.ts
@@ -1,5 +1,5 @@
 import { compile, CompilerError, CompilerOptions } from "@vue/compiler-dom";
-import { RenderFunction, warn } from "@vue/runtime-dom";
+import { RenderFunction, warn } from "@vue/runtime-core";
 import * as runtime from "./index";
 
 const NOOP = () => {};

diff --git a/src/components/ListView.ts b/src/components/ListView.ts
@@ -1,12 +1,19 @@
-import { defineComponent, h, warn } from "@vue/runtime-core";
+import {
+  defineComponent,
+  getCurrentInstance,
+  h,
+  VNode,
+  warn,
+  watch,
+  ref
+} from "@vue/runtime-core";
 
 import {
   ItemEventData,
   ListView as NSCListView,
   ObservableArray,
 } from "@nativescript/core";
 
-import { getCurrentInstance, ref, VNode, watch, PropType } from "..";
 import { NSVElement, NSVViewFlags } from "../dom";
 import { registerElement } from "../registry";
 import { ELEMENT_REF } from "../runtimeHelpers";

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
 import { resolveComponent as resolveComponentCore } from "@vue/runtime-core";
-import type { CreateAppFunction, Plugin } from "@vue/runtime-core";
+import type { CreateAppFunction } from "@vue/runtime-core";
 
 import { BUILT_IN_COMPONENTS } from "./components";
 
@@ -10,6 +10,7 @@ import { renderer } from "./renderer";
 import { install as modalsPlugin } from "./plugins/modals";
 import { install as navigationPlugin } from "./plugins/navigation";
 import { isKnownView, registerElement } from "./registry";
+import { setRootContext } from "./runtimeHelpers";
 
 declare module "@vue/runtime-core" {
   interface App {
@@ -28,14 +29,13 @@ init();
 export * from "./dom";
 export * from "./registry";
 export * from "./renderer";
+export { createNativeView } from "./runtimeHelpers";
 
-export * from "@vue/runtime-dom";
+export * from "@vue/runtime-core";
 export { vShow } from "./directives/vShow";
 export { $showModal } from "./plugins/modals";
 export { $navigateTo, $navigateBack } from "./plugins/navigation";
 
-export const APP_USES = Symbol("app_uses");
-
 // creates a special root container that calls resetRoot whenever it's children change
 function createAppRoot() {
   const defaultRoot = new NSVRoot();
@@ -64,13 +64,10 @@ function createAppRoot() {
   return defaultRoot;
 }
 
-// plugins applied to the root app
-let rootAppUses: Array<[Plugin, ...any[]]> = [];
-
 export const render = renderer.render;
 export const createApp = ((...args) => {
   const app = renderer.createApp(...args);
-  const { mount, use } = app;
+  const { mount } = app;
 
   app.registerElement = registerElement;
 
@@ -83,25 +80,15 @@ export const createApp = ((...args) => {
 
   app.start = () => {
     const componentInstance = app.mount(createAppRoot(), false, false);
+
     startApp(componentInstance);
-    rootAppUses = app[APP_USES];
+    setRootContext(componentInstance.$.appContext);
 
     return componentInstance;
   };
 
-  app[APP_USES] = [];
-  app.use = (...args) => {
-    app[APP_USES].push([...args]);
-    return use(...args);
-  };
-
-  // always added core plugins, no need to track them through app.use...
-  use(modalsPlugin);
-  use(navigationPlugin);
-
-  rootAppUses.forEach((args) => {
-    use(...args);
-  });
+  app.use(modalsPlugin);
+  app.use(navigationPlugin);
 
   return app;
 }) as CreateAppFunction<NSVElement>;

diff --git a/src/plugins/modals.ts b/src/plugins/modals.ts
@@ -1,3 +1,4 @@
+import { Application, ShowModalOptions, View } from "@nativescript/core";
 import {
   App,
   Component,
@@ -6,19 +7,23 @@ import {
   Ref,
   warn,
 } from "@vue/runtime-core";
-import { Application, ShowModalOptions, View } from "@nativescript/core";
-import { createApp, NSVElement } from "..";
 import { isObject } from "@vue/shared";
+import { NSVElement } from "../dom";
+import { createNativeView } from "../runtimeHelpers";
 
 declare module "@vue/runtime-core" {
-  interface ComponentCustomProperties {
+  export 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
+    };
   }
 }
 
@@ -71,31 +76,27 @@ export async function $showModal<T = any>(
     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 view = createNativeView(component, options.props);
+
+    const closeModal = (...args: any[]) => modalContent.closeModal(...args);
     const closeCallback = (data?: T) => {
-      if (isResolved) return;
+      if(isResolved) return;
       isResolved = true;
+      view.unmount();
+      view = null;
 
-      try {
-        modalContent.closeModal();
-      } catch (e) {
-        // ignore?
-      }
-
-      modalApp.unmount();
       resolve(data);
     };
 
-    modalApp.config.globalProperties.$modal = {
-      close: closeCallback,
-    };
+    view.context.config.globalProperties.$closeModal = closeModal;
+    view.context.config.globalProperties.$modal = { close: closeModal };
 
-    const modalContent = modalApp.mount().$el.nativeView;
+    const modalContent = view.mount();
 
     modalTarget.showModal(modalContent, {
       ...options,

diff --git a/src/plugins/navigation.ts b/src/plugins/navigation.ts
@@ -1,10 +1,10 @@
-import { App, Component, isRef, Ref } from "@vue/runtime-core";
 import { Frame, NavigationEntry, Page } from "@nativescript/core";
-import { createApp, NSVElement, NSVRoot } from "..";
-import { NavigatedData } from "@nativescript/core";
+import { App, Component, Ref, unref } from "@vue/runtime-core";
+import { NSVElement, NSVRoot } from "../dom";
+import { createNativeView } from "../runtimeHelpers";
 
 declare module "@vue/runtime-core" {
-  interface ComponentCustomProperties {
+  export interface ComponentCustomProperties {
     /**
      * todo: update docblock
      * Navigate to {target} component.
@@ -40,28 +40,25 @@ export function install(app: App) {
   app.config.globalProperties.$navigateBack = $navigateBack;
 }
 
-function resolveFrame(frame: ResolvableFrame): Frame {
+function resolveFrame(frame?: ResolvableFrame): Frame {
   if (!frame) {
     return Frame.topmost();
   }
 
-  if (frame instanceof Frame) {
-    return frame;
-  }
+  const ob = unref(frame);
 
-  // todo: check if refs work this way or not
-  if (isRef(frame)) {
-    return frame.value as any;
+  if (ob instanceof Frame) {
+    return ob;
   }
 
-  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);
+  return Frame.getFrameById(ob);
 }
 
 function createNavigationRoot(cb: (view: any) => void) {
@@ -132,37 +129,38 @@ export async function $navigateTo(
     const cleanup = (page) => {
       if (page === latestPage) {
         // console.log("DISPOSE NAVIGATION APP");
-        navigationApp.unmount();
+        view.unmount()
+        view = null
+        navRoot = null
       } else {
         // console.log("no dispose we have replaced page");
       }
     };
 
-    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
-        const originalTransition = frame.currentEntry.transition;
-
-        // replace current page
-        frame.replacePage({
-          ...options,
-          transition: {
-            name: "fade",
-            duration: 10,
-          },
-          create: () => newPage,
-        });
-
-        // reset the transition to the original one
-        frame.once("navigatedTo", () => {
-          frame.currentEntry.transition = originalTransition;
-        });
-      })
-    ).$el.nativeView as unknown as Page;
+    let navRoot = createNavigationRoot((newPage) => {
+      latestPage = newPage;
+      attachDisposeCallbacks(newPage, cleanup);
+      // cache the original transition of the current page
+      const originalTransition = frame.currentEntry.transition;
+      // replace current page
+      frame.replacePage({
+        ...options,
+        transition: {
+          name: "fade",
+          duration: 10,
+        },
+        create: () => newPage,
+      });
+      // reset the transition to the original one
+      frame.once("navigatedTo", () => {
+        frame.currentEntry.transition = originalTransition;
+      });
+    });
+
+    let view = createNativeView<Page>(target, options.props)
+
+    const targetPage = view.mount(navRoot)
+
     let latestPage = targetPage;
     attachDisposeCallbacks(targetPage, cleanup);
 

diff --git a/src/registry/index.ts b/src/registry/index.ts
@@ -23,7 +23,7 @@ export interface NSVElementDescriptor {
 }
 
 export let defaultViewMeta: NSVViewMeta = {
-  viewFlags: 0 // NSVViewFlags.NONE, // tsx can't resolve NSVViewFlags here?
+  viewFlags: 0, // NSVViewFlags.NONE, // tsx can't resolve NSVViewFlags here?
 };
 
 let elementMap: Record<string, NSVElementDescriptor> = {};

diff --git a/src/renderer/modules/events.ts b/src/renderer/modules/events.ts
@@ -71,7 +71,7 @@ function parseName(name: string): [string, EventListenerOptions | undefined] {
   }
 
   // todo: optimise if necessary
-  // this isn't technically perfect, 
+  // this isn't technically perfect,
   // since if the event name was UPPER then we'll convert it to uPPER
   // but for the majority of cases, this should be the right thing to do.
   name = name.slice(name.startsWith("on:") ? 3 : 2);

diff --git a/src/renderer/nodeOps.ts b/src/renderer/nodeOps.ts
@@ -1,4 +1,4 @@
-import { VNodeProps, RendererOptions } from "@vue/runtime-dom";
+import { VNodeProps, RendererOptions } from "@vue/runtime-core";
 
 import { NSVComment, NSVElement, NSVNode, NSVText } from "../dom";
 
@@ -80,10 +80,10 @@ export function insertStaticContent(
 }
 
 export function setScopeId(el: NSVElement, scopeId: string) {
-  el.setAttribute(scopeId, '')
+  el.setAttribute(scopeId, "");
 }
 
-export const nodeOps: Omit<RendererOptions, 'patchProp'> = {
+export const nodeOps: Omit<RendererOptions, "patchProp"> = {
   insert,
   remove,
   createElement,
@@ -98,6 +98,6 @@ export const nodeOps: Omit<RendererOptions, 'patchProp'> = {
   insertStaticContent,
 
   setScopeId,
-  
+
   //   querySelector,
 };