@ionic/react 7.4.4-dev.11696545130.1171e7a9 → 7.4.4-dev.11696895407.1bd7a380

package/dist/index.js

@@ -113,6 +113,18 @@ const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
     ionViewDidLeave: () => {
         return;
     },
+    cleanupIonViewWillEnter: () => {
+        return;
+    },
+    cleanupIonViewDidEnter: () => {
+        return;
+    },
+    cleanupIonViewWillLeave: () => {
+        return;
+    },
+    cleanupIonViewDidLeave: () => {
+        return;
+    },
 });
 const DefaultIonLifeCycleContext = class {
     constructor() {
@@ -120,6 +132,10 @@ const DefaultIonLifeCycleContext = class {
         this.ionViewDidEnterCallbacks = [];
         this.ionViewWillLeaveCallbacks = [];
         this.ionViewDidLeaveCallbacks = [];
+        this.ionViewWillEnterDestructorCallbacks = [];
+        this.ionViewDidEnterDestructorCallbacks = [];
+        this.ionViewWillLeaveDestructorCallbacks = [];
+        this.ionViewDidLeaveDestructorCallbacks = [];
     }
     onIonViewWillEnter(callback) {
         if (callback.id) {
@@ -135,8 +151,71 @@ const DefaultIonLifeCycleContext = class {
             this.ionViewWillEnterCallbacks.push(callback);
         }
     }
+    teardownCallback(callback, callbacks) {
+        // Find any destructors that have been registered for the callback
+        const matches = callbacks.filter((x) => x.id === callback.id);
+        if (matches.length !== 0) {
+            // Execute the destructor for each matching item
+            matches.forEach((match) => {
+                if (match && typeof match.destructor === 'function') {
+                    match.destructor();
+                }
+            });
+            // Remove all matching items from the array
+            callbacks = callbacks.filter((x) => x.id !== callback.id);
+        }
+        else {
+            /**
+             * If the destructor isn't registered in the array, then the
+             * user-provided callback was never invoked. This is usually
+             * the result of the useEffect hook in dev mode. So we manually
+             * invoke the callback to get the destructor to tear it down.
+             */
+            const destructor = callback();
+            if (typeof destructor === 'function') {
+                destructor();
+            }
+        }
+    }
+    /**
+     * Tears down the user-provided ionViewWillEnter lifecycle callback.
+     * This is the same behavior as React's useEffect hook. The callback
+     * is invoked when the component is unmounted.
+     */
+    cleanupIonViewWillEnter(callback) {
+        this.teardownCallback(callback, this.ionViewWillEnterDestructorCallbacks);
+    }
+    /**
+     * Tears down the user-provided ionViewDidEnter lifecycle callback.
+     * This is the same behavior as React's useEffect hook. The callback
+     * is invoked when the component is unmounted.
+     */
+    cleanupIonViewDidEnter(callback) {
+        this.teardownCallback(callback, this.ionViewDidEnterDestructorCallbacks);
+    }
+    /**
+     * Tears down the user-provided ionViewWillLeave lifecycle callback.
+     * This is the same behavior as React's useEffect hook. The callback
+     * is invoked when the component is unmounted.
+     */
+    cleanupIonViewWillLeave(callback) {
+        this.teardownCallback(callback, this.ionViewWillLeaveDestructorCallbacks);
+    }
+    /**
+     * Tears down the user-provided ionViewDidLeave lifecycle callback.
+     * This is the same behavior as React's useEffect hook. The callback
+     * is invoked when the component is unmounted.
+     */
+    cleanupIonViewDidLeave(callback) {
+        this.teardownCallback(callback, this.ionViewDidLeaveDestructorCallbacks);
+    }
     ionViewWillEnter() {
-        this.ionViewWillEnterCallbacks.forEach((cb) => cb());
+        this.ionViewWillEnterCallbacks.forEach((cb) => {
+            const destructor = cb();
+            if (cb.id) {
+                this.ionViewWillEnterDestructorCallbacks.push({ id: cb.id, destructor });
+            }
+        });
     }
     onIonViewDidEnter(callback) {
         if (callback.id) {
@@ -153,7 +232,12 @@ const DefaultIonLifeCycleContext = class {
         }
     }
     ionViewDidEnter() {
-        this.ionViewDidEnterCallbacks.forEach((cb) => cb());
+        this.ionViewDidEnterCallbacks.forEach((cb) => {
+            const destructor = cb();
+            if (cb.id) {
+                this.ionViewDidEnterDestructorCallbacks.push({ id: cb.id, destructor });
+            }
+        });
     }
     onIonViewWillLeave(callback) {
         if (callback.id) {
@@ -170,7 +254,12 @@ const DefaultIonLifeCycleContext = class {
         }
     }
     ionViewWillLeave() {
-        this.ionViewWillLeaveCallbacks.forEach((cb) => cb());
+        this.ionViewWillLeaveCallbacks.forEach((cb) => {
+            const destructor = cb();
+            if (cb.id) {
+                this.ionViewWillLeaveDestructorCallbacks.push({ id: cb.id, destructor });
+            }
+        });
     }
     onIonViewDidLeave(callback) {
         if (callback.id) {
@@ -187,7 +276,12 @@ const DefaultIonLifeCycleContext = class {
         }
     }
     ionViewDidLeave() {
-        this.ionViewDidLeaveCallbacks.forEach((cb) => cb());
+        this.ionViewDidLeaveCallbacks.forEach((cb) => {
+            const destructor = cb();
+            if (cb.id) {
+                this.ionViewDidLeaveDestructorCallbacks.push({ id: cb.id, destructor });
+            }
+        });
         this.componentCanBeDestroyed();
     }
     onComponentCanBeDestroyed(callback) {
@@ -246,6 +340,9 @@ const useIonViewWillEnter = (callback, deps = []) => {
     useEffect(() => {
         callback.id = id.current;
         context.onIonViewWillEnter(callback);
+        return () => {
+            context.cleanupIonViewWillEnter(callback);
+        };
     }, deps);
 };
 const useIonViewDidEnter = (callback, deps = []) => {
@@ -255,6 +352,9 @@ const useIonViewDidEnter = (callback, deps = []) => {
     useEffect(() => {
         callback.id = id.current;
         context.onIonViewDidEnter(callback);
+        return () => {
+            context.cleanupIonViewDidEnter(callback);
+        };
     }, deps);
 };
 const useIonViewWillLeave = (callback, deps = []) => {
@@ -264,6 +364,9 @@ const useIonViewWillLeave = (callback, deps = []) => {
     useEffect(() => {
         callback.id = id.current;
         context.onIonViewWillLeave(callback);
+        return () => {
+            context.cleanupIonViewWillLeave(callback);
+        };
     }, deps);
 };
 const useIonViewDidLeave = (callback, deps = []) => {
@@ -273,6 +376,9 @@ const useIonViewDidLeave = (callback, deps = []) => {
     useEffect(() => {
         callback.id = id.current;
         context.onIonViewDidLeave(callback);
+        return () => {
+            context.cleanupIonViewDidLeave(callback);
+        };
     }, deps);
 };
 
@@ -1020,6 +1126,16 @@ class PageManager extends React.PureComponent {
         this.ionPageElementRef = React.createRef();
         // React refs must be stable (not created inline).
         this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
+        /**
+         * This binds the scope of the following methods to the class scope.
+         * The `.bind` method returns a new function, so we need to assign it
+         * in the constructor to avoid creating a new function when removing the
+         * event listeners.
+         */
+        this.ionViewWillEnterHandler = this.ionViewWillEnterHandler.bind(this);
+        this.ionViewDidEnterHandler = this.ionViewDidEnterHandler.bind(this);
+        this.ionViewWillLeaveHandler = this.ionViewWillLeaveHandler.bind(this);
+        this.ionViewDidLeaveHandler = this.ionViewDidLeaveHandler.bind(this);
     }
     componentDidMount() {
         if (this.ionPageElementRef.current) {
@@ -1027,18 +1143,18 @@ class PageManager extends React.PureComponent {
                 this.ionPageElementRef.current.classList.add('ion-page-invisible');
             }
             this.context.registerIonPage(this.ionPageElementRef.current, this.props.routeInfo);
-            this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
-            this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
-            this.ionPageElementRef.current.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
-            this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
+            this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
+            this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);
+            this.ionPageElementRef.current.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler);
+            this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
         }
     }
     componentWillUnmount() {
         if (this.ionPageElementRef.current) {
-            this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
-            this.ionPageElementRef.current.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
-            this.ionPageElementRef.current.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
-            this.ionPageElementRef.current.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
+            this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
+            this.ionPageElementRef.current.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);
+            this.ionPageElementRef.current.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler);
+            this.ionPageElementRef.current.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
         }
     }
     ionViewWillEnterHandler() {
@@ -1147,6 +1263,16 @@ class OutletPageManager extends React.Component {
     constructor(props) {
         super(props);
         this.outletIsReady = false;
+        /**
+         * This binds the scope of the following methods to the class scope.
+         * The `.bind` method returns a new function, so we need to assign it
+         * in the constructor to avoid creating a new function when removing the
+         * event listeners.
+         */
+        this.ionViewWillEnterHandler = this.ionViewWillEnterHandler.bind(this);
+        this.ionViewDidEnterHandler = this.ionViewDidEnterHandler.bind(this);
+        this.ionViewWillLeaveHandler = this.ionViewWillLeaveHandler.bind(this);
+        this.ionViewDidLeaveHandler = this.ionViewDidLeaveHandler.bind(this);
     }
     componentDidMount() {
         if (this.ionRouterOutlet) {
@@ -1160,18 +1286,18 @@ class OutletPageManager extends React.Component {
                     this.context.registerIonPage(this.ionRouterOutlet, this.props.routeInfo);
                 });
             }
-            this.ionRouterOutlet.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
-            this.ionRouterOutlet.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
-            this.ionRouterOutlet.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
-            this.ionRouterOutlet.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
+            this.ionRouterOutlet.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
+            this.ionRouterOutlet.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);
+            this.ionRouterOutlet.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler);
+            this.ionRouterOutlet.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
         }
     }
     componentWillUnmount() {
         if (this.ionRouterOutlet) {
-            this.ionRouterOutlet.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
-            this.ionRouterOutlet.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
-            this.ionRouterOutlet.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
-            this.ionRouterOutlet.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
+            this.ionRouterOutlet.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
+            this.ionRouterOutlet.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);
+            this.ionRouterOutlet.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler);
+            this.ionRouterOutlet.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
         }
     }
     ionViewWillEnterHandler() {