Apr 13, 2023 · Apr 9, 2023 · Apr 9, 2023 · Apr 9, 2023 · Apr 9, 2023 · Apr 9, 2023
diff --git a/.gitignore b/.gitignore
 **/dist
 *.tgz

 yarn-error.log
 yarn-error.log
 node_modules
diff --git a/package.json b/package.json
  },
  "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
 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
 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
 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";

 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 {
 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();
  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;


  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
 import { Application, ShowModalOptions, View } from "@nativescript/core";
 import {
  App,
  Component,
  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 {
 exportinterface ComponentCustomProperties {
    /**
     * todo: update docblock
     */
    $showModal: <T = any>(
      component: Component,
      options?: ModalOptions
    ) => Promise<T | false | undefined>;
    $closeModal: (arg: any) => void;
    $modal: {
      close: (arg: any) => void
    };
  }
 }

    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
 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 {
 exportinterface ComponentCustomProperties {
    /**
     * todo: update docblock
     * Navigate to {target} component.
  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) {
    returnframe.nativeView;
  if (ob instanceof NSVElement) {
    returnob.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) {
    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
 }

 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
  }

  // 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
 import { VNodeProps, RendererOptions } from "@vue/runtime-dom";
 import { VNodeProps, RendererOptions } from "@vue/runtime-core";

 import { NSVComment, NSVElement, NSVNode, NSVText } from "../dom";

 }

 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,
  insertStaticContent,

  setScopeId,


  //   querySelector,
 };
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,5 @@
		**/dist
		*.tgz

		yarn-error.log
		yarn-error.log
		node_modules
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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 = () => {};
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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";
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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";

Expand All		@@ -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 {
Expand All		@@ -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();
Expand DownExpand Up		@@ -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;

Expand All		@@ -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>;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,4 @@
		import { Application, ShowModalOptions, View } from "@nativescript/core";
		import {
		App,
		Component,
Expand All		@@ -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 {
		exportinterface ComponentCustomProperties {
		/**
		* todo: update docblock
		*/
		$showModal: <T = any>(
		component: Component,
		options?: ModalOptions
		) => Promise<T \| false \| undefined>;
		$closeModal: (arg: any) => void;
		$modal: {
		close: (arg: any) => void
		};
		}
		}

Expand DownExpand Up		@@ -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,
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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 {
		exportinterface ComponentCustomProperties {
		/**
		* todo: update docblock
		* Navigate to {target} component.
Expand DownExpand Up		@@ -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) {
		returnframe.nativeView;
		if (ob instanceof NSVElement) {
		returnob.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) {
Expand DownExpand Up		@@ -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);

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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> = {};
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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);
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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";

Expand DownExpand Up		@@ -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,
Expand All		@@ -98,6 +98,6 @@ export const nodeOps: Omit<RendererOptions, 'patchProp'> = {
		insertStaticContent,

		setScopeId,


		// querySelector,
		};