(
+ component: Component,
+ options?: ShowModalOptions
,
) => Promise;
- $closeModal: (arg: any) => void;
+ $closeModal: (data: T, ...args: any[]) => void;
$modal: {
- close: (arg: any) => void;
+ close: (data: T, ...args: any[]) => void;
};
}
}
type ResolvableModalTarget = ComponentPublicInstance | NSVElement | View;
-export interface ModalOptions extends Partial {
- props?: Record;
+export type ShowModalOptions = Partial<
+ Omit
+> & {
+ closeCallback?: (data?: T, ...args: any[]) => void;
+ props?: CreateNativeViewProps;
target?: ResolvableModalTarget;
-}
+};
/**
* @internal
@@ -57,9 +61,9 @@ function resolveModalTarget(
return false;
}
-export async function $showModal(
- component: Component,
- options: ModalOptions = {},
+export async function $showModal(
+ component: Component,
+ options: ShowModalOptions
= {},
): Promise {
const modalTarget = resolveModalTarget(
options.target ?? Application.getRootView(),
@@ -87,7 +91,7 @@ export async function $showModal(
reload: reloadModal,
});
- const closeCallback = (data?: T) => {
+ const closeCallback = (data?: T, ...args: any) => {
if (isResolved) return;
if (isReloading) {
@@ -107,6 +111,10 @@ export async function $showModal(
view.unmount();
view = null;
+ // call the closeCallback if it exists with all arguments
+ options.closeCallback?.(data, ...args);
+
+ // resolve the promise with the first argument, since Promise.resolve() expects only one argument
resolve(data);
};
@@ -118,7 +126,9 @@ export async function $showModal(
...additionalOptions,
});
};
- const closeModal = (...args: any[]) => view.nativeView?.closeModal(...args);
+ const closeModal = (...args: any[]) => {
+ view.nativeView?.closeModal(...args);
+ };
view.context.config.globalProperties.$closeModal = closeModal;
view.context.config.globalProperties.$modal = { close: closeModal };
diff --git a/src/plugins/navigation.ts b/src/plugins/navigation.ts
index d5ac44e0..5bea2885 100644
--- a/src/plugins/navigation.ts
+++ b/src/plugins/navigation.ts
@@ -1,7 +1,7 @@
import { Frame, NavigationEntry, Page } from '@nativescript/core';
import { App, Component, Ref, nextTick, unref } from '@vue/runtime-core';
import { NSVElement, NSVRoot } from '../dom';
-import { createNativeView } from '../runtimeHelpers';
+import { CreateNativeViewProps, createNativeView } from '../runtimeHelpers';
declare module '@vue/runtime-core' {
export interface ComponentCustomProperties {
@@ -13,21 +13,24 @@ declare module '@vue/runtime-core' {
* @param target
* @param options
*/
- $navigateTo: (target: Component, options?: NavigationOptions) => Page;
- $navigateBack: (options?: NavigationOptions) => void;
+ $navigateTo: (
+ target: Component
,
+ options?: NavigateToOptions
,
+ ) => Page;
+ $navigateBack: (options?: NavigateBackOptions) => void;
}
}
type ResolvableFrame = string | Ref | NSVElement | Frame | undefined;
-export interface NavigationOptions extends NavigationEntry {
- props?: Record;
+export type NavigateToOptions = NavigationEntry & {
+ props?: CreateNativeViewProps
;
frame?: ResolvableFrame;
-}
+};
-export interface BackNavigationOptions {
+export type NavigateBackOptions = {
frame?: ResolvableFrame;
-}
+};
/**
* @internal
@@ -58,9 +61,9 @@ function resolveFrame(frame?: ResolvableFrame): Frame {
return Frame.getFrameById(ob);
}
-export function $navigateTo(
- target: Component,
- options?: NavigationOptions,
+export function $navigateTo
(
+ target: Component
,
+ options?: NavigateToOptions
,
): Page {
try {
const frame = resolveFrame(options?.frame);
@@ -145,7 +148,7 @@ export function $navigateTo(
}
}
-export async function $navigateBack(options?: BackNavigationOptions) {
+export async function $navigateBack(options?: NavigateBackOptions) {
const frame = resolveFrame(options?.frame);
if (!frame) {
diff --git a/src/runtimeHelpers.ts b/src/runtimeHelpers.ts
index 12411f41..08199a4d 100644
--- a/src/runtimeHelpers.ts
+++ b/src/runtimeHelpers.ts
@@ -6,25 +6,26 @@ import {
RendererElement,
RendererNode,
VNode,
+ VNodeProps,
} from '@vue/runtime-core';
import { NSVNode, NSVRoot } from './dom';
import { renderer } from './renderer';
-type Props = Record;
-
-const __DEV__ = true;
-
let rootApp: App = null;
-
export const setRootApp = (app: App) => {
rootApp = app;
};
-export const createNativeView = (
- component: Component,
- props?: Props,
- contextOverrides?: { reload?(): void },
-) => {
+export type ContextOverrides = { reload?(): void };
+export type CreateNativeViewProps = Partial<
+ P & VNodeProps & Record
+>;
+
+export function createNativeView(
+ component: Component,
+ props?: CreateNativeViewProps
,
+ contextOverrides?: ContextOverrides,
+) {
let isMounted = false;
let vm: ComponentPublicInstance | null;
const newApp = renderer.createApp(component, props);
@@ -33,7 +34,6 @@ export const createNativeView = (
const context = { ...rootContext, ...contextOverrides };
type M = VNode;
-
return {
context,
get vnode() {
@@ -66,7 +66,7 @@ export const createNativeView = (
isMounted = false;
},
};
-};
+}
export const ELEMENT_REF = Symbol(__DEV__ ? `elementRef` : ``);
From bb5a629efdcd03f27df9160bcd9cbc0f5042f922 Mon Sep 17 00:00:00 2001
From: Igor Randjelovic
Date: Fri, 19 Apr 2024 13:04:48 +0200
Subject: [PATCH 5/6] fix: clone modal context.config and globalProperties to
not mutate root context
---
src/plugins/modals.ts | 13 +++++++++++--
1 file changed, 11 insertions(+), 2 deletions(-)
diff --git a/src/plugins/modals.ts b/src/plugins/modals.ts
index 33560d51..9a82d862 100644
--- a/src/plugins/modals.ts
+++ b/src/plugins/modals.ts
@@ -130,8 +130,17 @@ export async function $showModal(
view.nativeView?.closeModal(...args);
};
- view.context.config.globalProperties.$closeModal = closeModal;
- view.context.config.globalProperties.$modal = { close: closeModal };
+ // clone the config and globalProperties to avoid mutating the root app's config/globalProperties
+ const context = view.context;
+ context.config = Object.assign({}, context.config);
+ context.config.globalProperties = Object.assign(
+ {},
+ context.config.globalProperties,
+ {
+ $closeModal: closeModal,
+ $modal: { close: closeModal },
+ },
+ );
view.mount(root);
openModal();
From 83a82cf32e092a883f2b24c5b6162bc00f1f9d49 Mon Sep 17 00:00:00 2001
From: Igor Randjelovic
Date: Fri, 19 Apr 2024 13:10:23 +0200
Subject: [PATCH 6/6] release: 3.0.0-rc.2
---
package.json | 2 +-
packages/stackblitz-template/package.json | 2 +-
packages/template-blank/package.json | 4 ++--
3 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/package.json b/package.json
index e58dd35b..0872b97d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "nativescript-vue",
- "version": "3.0.0-rc.1",
+ "version": "3.0.0-rc.2",
"main": "dist/index.js",
"files": [
"dist/",
diff --git a/packages/stackblitz-template/package.json b/packages/stackblitz-template/package.json
index dc835c39..75d13178 100644
--- a/packages/stackblitz-template/package.json
+++ b/packages/stackblitz-template/package.json
@@ -4,7 +4,7 @@
"version": "1.0.0",
"dependencies": {
"@nativescript/core": "~8.7.0",
- "nativescript-vue": "3.0.0-rc.1"
+ "nativescript-vue": "3.0.0-rc.2"
},
"devDependencies": {
"@nativescript/preview-cli": "1.0.13",
diff --git a/packages/template-blank/package.json b/packages/template-blank/package.json
index 96507315..7628ca6e 100644
--- a/packages/template-blank/package.json
+++ b/packages/template-blank/package.json
@@ -1,10 +1,10 @@
{
"name": "@nativescript-vue/template-blank",
"main": "src/app.ts",
- "version": "3.0.0-rc.1",
+ "version": "3.0.0-rc.2",
"dependencies": {
"@nativescript/core": "~8.7.0",
- "nativescript-vue": "3.0.0-rc.1"
+ "nativescript-vue": "3.0.0-rc.2"
},
"devDependencies": {
"@nativescript/tailwind": "~2.1.0",