fix: agnostic resolveComponentElement and typings to fit all cases

Author: farfromrefug

src/dom/navigation.ts

@@ -1,4 +1,4 @@
-import { ViewBase, View, NavigatedData, NavigationTransition, Frame, BackstackEntry, Application } from "@nativescript/core";
+import { ViewBase, View, NavigatedData, NavigationTransition, Frame, BackstackEntry, Application, Page } from "@nativescript/core";
 import FrameElement from "./native/FrameElement";
 import { createElement, DocumentNode, logger as log } from "./basicdom";
 import PageElement from "./native/PageElement";
@@ -39,18 +39,28 @@ export function resolveTarget(viewSpec: ViewSpec): View {
  }
  return viewSpec?.nativeView;
 }
+// interface ComponentInstanceInfo<T = any> { element: NativeViewElementNode<View>, pageInstance: SvelteComponent<T> }
 
-export interface ComponentInstanceInfo<T = any> { element: NativeViewElementNode<View>, pageInstance: SvelteComponent<T> }
+export interface ComponentInstanceInfo<T extends ViewBase = View, U = SvelteComponent> {
+ element: NativeViewElementNode<T>;
+ viewInstance: U;
+}
 
-export function resolveComponentElement<T>(pageSpec: PageSpec<T>, props?: T): ComponentInstanceInfo<T> {
- let dummy = createElement('fragment', window.document as unknown as DocumentNode);
- let pageInstance = new pageSpec({ target: dummy, props: props });
- let element = dummy.firstElement() as NativeViewElementNode<View>;
- return { element, pageInstance }
+export function resolveComponentElement<T, U extends ViewBase = View>(viewSpec: typeof SvelteComponent<T>, props?: T): ComponentInstanceInfo<U, SvelteComponent<T>> {
+ const dummy = createElement('fragment', window.document as any);
+ const viewInstance = new viewSpec({ target: dummy, props });
+ const element = dummy.firstElement() as NativeViewElementNode<U>;
+ return { element, viewInstance };
 }
+// export function resolveComponentElement<T>(pageSpec: PageSpec<T>, props?: T): ComponentInstanceInfo<T> {
+// let dummy = createElement('fragment', window.document as unknown as DocumentNode);
+// let pageInstance = new pageSpec({ target: dummy, props });
+// let element = dummy.firstElement() as NativeViewElementNode<View>;
+// return { element, pageInstance }
+// }
 
 export function navigate<T>(options: NavigationOptions<T>): SvelteComponent<T> {
- let { frame, page, props = {}, ...navOptions } = options;
+ let { frame, page, props, ...navOptions } = options;
 
  let targetFrame = resolveFrame(frame);
 
@@ -61,7 +71,7 @@ export function navigate<T>(options: NavigationOptions<T>): SvelteComponent<T> {
  throw new Error("navigate requires page to be set to the svelte component class that implements the page or reference to a page element");
  }
 
- let { element, pageInstance } = resolveComponentElement(page, props);
+ let { element, viewInstance } = resolveComponentElement<T, Page>(page, props);
 
  if (!(element instanceof PageElement))
  throw new Error("navigate requires a svelte component with a page element at the root");
@@ -74,7 +84,7 @@ export function navigate<T>(options: NavigationOptions<T>): SvelteComponent<T> {
  // will remove all set `navigatedFrom` while we are enumerating to actually send them
  setTimeout(() => {
  nativePage.off('navigatedFrom', handler);
- pageInstance?.$destroy();
+ viewInstance?.$destroy();
  }, 0);
  }
  };
@@ -89,7 +99,7 @@ export function navigate<T>(options: NavigationOptions<T>): SvelteComponent<T> {
  create: () => nativePage
  });
 
- return pageInstance;
+ return viewInstance;
 }
 
 export interface BackNavigationOptions {
@@ -151,7 +161,7 @@ export function showModal<T, U>(modalOptions: ShowModalOptions<U>): Promise<T> {
  if (resolved) return;
  resolved = true;
  try {
- componentInstanceInfo.pageInstance.$destroy(); //don't let an exception in destroy kill the promise callback
+ componentInstanceInfo.viewInstance.$destroy(); //don't let an exception in destroy kill the promise callback
  } finally {
  resolve(result);
  }