fix(nav): insertPages method correctly inserts multiple pages with props (#21725)

fixes #21724

core/src/components/nav/nav-interface.ts

@@ -1,10 +1,14 @@
-import { Animation, AnimationBuilder, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
+import { Animation, AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
 
 import { ViewController } from './view-controller';
 
 export type NavDirection = 'back' | 'forward';
 
 export type NavComponent = ComponentRef | ViewController;
+export interface NavComponentWithProps<T = any> {
+  component: NavComponent;
+  componentProps?: ComponentProps<T> | null;
+}
 
 export interface NavResult {
   hasCompleted: boolean;

core/src/components/nav/nav.tsx

@@ -2,7 +2,7 @@ import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch, h
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { Animation, AnimationBuilder, ComponentProps, FrameworkDelegate, Gesture, NavComponent, NavOptions, NavOutlet, NavResult, RouteID, RouteWrite, RouterDirection, TransitionDoneFn, TransitionInstruction, ViewController } from '../../interface';
+import { Animation, AnimationBuilder, ComponentProps, FrameworkDelegate, Gesture, NavComponent, NavComponentWithProps, NavOptions, NavOutlet, NavResult, RouteID, RouteWrite, RouterDirection, TransitionDoneFn, TransitionInstruction, ViewController } from '../../interface';
 import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
 import { assert } from '../../utils/helpers';
 import { TransitionOptions, lifecycle, setPageHidden, transition } from '../../utils/transition';
@@ -156,7 +156,7 @@ export class Nav implements NavOutlet {
     return this.queueTrns(
       {
         insertStart: -1,
-        insertViews: [{ page: component, params: componentProps }],
+        insertViews: [{ component, componentProps }],
         opts
       },
       done
@@ -184,7 +184,7 @@ export class Nav implements NavOutlet {
     return this.queueTrns(
       {
         insertStart: insertIndex,
-        insertViews: [{ page: component, params: componentProps }],
+        insertViews: [{ component, componentProps }],
         opts
       },
       done
@@ -204,7 +204,7 @@ export class Nav implements NavOutlet {
   @Method()
   insertPages(
     insertIndex: number,
-    insertComponents: NavComponent[],
+    insertComponents: NavComponent[] | NavComponentWithProps[],
     opts?: NavOptions | null,
     done?: TransitionDoneFn
   ): Promise<boolean> {
@@ -326,7 +326,7 @@ export class Nav implements NavOutlet {
     done?: TransitionDoneFn
   ): Promise<boolean> {
     return this.setPages(
-      [{ page: component, params: componentProps }],
+      [{ component, componentProps }],
       opts,
       done
     );
@@ -344,7 +344,7 @@ export class Nav implements NavOutlet {
    */
   @Method()
   setPages(
-    views: any[],
+    views: NavComponent[] | NavComponentWithProps[],
     opts?: NavOptions | null,
     done?: TransitionDoneFn
   ): Promise<boolean> {
@@ -958,16 +958,27 @@ export class Nav implements NavOutlet {
 
     for (let i = views.length - 1; i >= 0; i--) {
       const view = views[i];
+
+      /**
+       * When inserting multiple views via insertPages
+       * the last page will be transitioned to, but the
+       * others will not be. As a result, a DOM element
+       * will only be created for the last page inserted.
+       * As a result, it is possible to have views in the
+       * stack that do not have `view.element` yet.
+       */
       const element = view.element;
-      if (i > activeViewIndex) {
-        // this view comes after the active view
-        // let's unload it
-        lifecycle(element, LIFECYCLE_WILL_UNLOAD);
-        this.destroyView(view);
-      } else if (i < activeViewIndex) {
-        // this view comes before the active view
-        // and it is not a portal then ensure it is hidden
-        setPageHidden(element!, true);
+      if (element) {
+        if (i > activeViewIndex) {
+          // this view comes after the active view
+          // let's unload it
+          lifecycle(element, LIFECYCLE_WILL_UNLOAD);
+          this.destroyView(view);
+        } else if (i < activeViewIndex) {
+          // this view comes before the active view
+          // and it is not a portal then ensure it is hidden
+          setPageHidden(element!, true);
+        }
       }
     }
   }

core/src/components/nav/readme.md

@@ -80,7 +80,7 @@ Type: `Promise<boolean>`
 
 
 
-### `insertPages(insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>`
+### `insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>`
 
 Inserts an array of components into the navigation stack at the specified index.
 The last component in the array will become instantiated as a view, and animate
@@ -145,7 +145,7 @@ Type: `Promise<boolean>`
 
 
 
-### `setPages(views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>`
+### `setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>`
 
 Set the views of the current navigation stack and navigate to the last view.
 By default animations are disabled, but they can be enabled by passing options

core/src/components/nav/test/nav-controller.spec.ts

@@ -119,9 +119,9 @@ describe('NavController', () => {
       mockViews(nav, [view1]);
 
       const view2 = mockView(MockView2);
-      
+
       await nav.push(view2, null, null, trnsDone);
-      
+
       const hasCompleted = true;
       const requiresTransition = true;
       expect(trnsDone).toHaveBeenCalledWith(
@@ -818,8 +818,8 @@ describe('NavController', () => {
       const view5 = mockView(MockView5);
 
       await nav.setPages([
-        { page: view4 },
-        { page: view5 }
+        { component: view4 },
+        { component: view5 }
       ], null, trnsDone);
       expect(instance1.ionViewWillUnload).toHaveBeenCalled();
       expect(instance2.ionViewWillUnload).toHaveBeenCalled();
@@ -924,10 +924,10 @@ describe('NavController', () => {
   const MockView3 = 'mock-view3';
   const MockView4 = 'mock-view4';
   const MockView5 = 'mock-view5';
-  
+
   const mockWebAnimation = (el: HTMLElement) => {
     Element.prototype.animate = () => {};
-    
+
     el.animate = () => {
       const animation = {
         stop: () => {},
@@ -935,13 +935,13 @@ describe('NavController', () => {
         cancel: () => {},
         onfinish: undefined
       }
-      
+
       animation.play = () => {
         if (animation.onfinish) {
           animation.onfinish();
         }
       }
-      
+
       return animation;
     }
   }
@@ -953,9 +953,9 @@ describe('NavController', () => {
 
     const view = new ViewController(component, params);
     view.element = document.createElement(component) as HTMLElement;
-    
+
     mockWebAnimation(view.element);
-    
+
     return view;
   }
 

core/src/components/nav/view-controller.ts

@@ -1,4 +1,4 @@
-import { AnimationBuilder, ComponentProps, FrameworkDelegate } from '../../interface';
+import { AnimationBuilder, ComponentProps, FrameworkDelegate, NavComponentWithProps } from '../../interface';
 import { attachComponent } from '../../utils/framework-delegate';
 import { assert } from '../../utils/helpers';
 
@@ -89,13 +89,20 @@ export const convertToView = (page: any, params: ComponentProps | undefined): Vi
   return new ViewController(page, params);
 };
 
-export const convertToViews = (pages: any[]): ViewController[] => {
+export const convertToViews = (pages: NavComponentWithProps[]): ViewController[] => {
   return pages.map(page => {
     if (page instanceof ViewController) {
       return page;
     }
-    if ('page' in page) {
-      return convertToView(page.page, page.params);
+    if ('component' in page) {
+      /**
+       * TODO Ionic 6:
+       * Consider switching to just using `undefined` here
+       * as well as on the public interfaces and on
+       * `NavComponentWithProps`. Previously `pages` was
+       * of type `any[]` so TypeScript did not catch this.
+       */
+      return convertToView(page.component, (page.componentProps === null) ? undefined : page.componentProps);
     }
     return convertToView(page, undefined);
   }).filter(v => v !== null) as ViewController[];