@simonbackx/vue-app-navigation 2.16.0 → 2.17.1

package/dist/index.js

@@ -203,6 +203,7 @@ function templateToUrl(template, params) {
 }
 class HistoryManagerStatic {
   constructor() {
+    __publicField(this, "debug", false);
     // undoActions: Map<number, (animate: boolean) => void> = new Map();
     __publicField(this, "states", []);
     __publicField(this, "counter", 0);
@@ -303,6 +304,9 @@ class HistoryManagerStatic {
     if (!this.active) {
       return;
     }
+    if (this.debug) {
+      console.log("Set url: " + url + ", for index " + index + " with current counter: " + this.counter, title);
+    }
     if (index === void 0 || index === this.counter) {
       const state = this.states[this.states.length - 1];
       const count = state.index;
@@ -319,6 +323,9 @@ class HistoryManagerStatic {
           if (this.counter !== count || state.url !== url) {
             return;
           }
+          if (this.debug) {
+            console.log("history.replaceState", count, url);
+          }
           const formattedUrl = this.resolveUrl(count);
           history.replaceState({ counter: count }, "", formattedUrl);
           if (state.title) {
@@ -340,8 +347,11 @@ class HistoryManagerStatic {
         console.error("Search state with index ", index, "but received state with index", state.index);
         return;
       }
-      if (state.url !== url)
-        ;
+      if (state.url !== url) {
+        if (this.debug) {
+          console.info("Changed url for old state: " + state.index + " to " + url);
+        }
+      }
       state.url = url;
       if (title) {
         state.title = title;
@@ -363,6 +373,9 @@ class HistoryManagerStatic {
       if (this.counter !== count) {
         return;
       }
+      if (this.debug) {
+        console.log("history.replaceState - updateUrl");
+      }
       const formattedUrl = this.resolveUrl(count);
       history.replaceState({ counter: count }, "", formattedUrl);
     });
@@ -378,6 +391,9 @@ class HistoryManagerStatic {
     if (!this.active) {
       return;
     }
+    if (this.debug) {
+      console.log("Set title: " + title + ", for index " + (index ?? this.counter) + " with current counter: " + this.counter);
+    }
     if (index === void 0 || index === this.counter) {
       const state = this.states[this.states.length - 1];
       window.document.title = this.formatTitle(title);
@@ -428,19 +444,31 @@ class HistoryManagerStatic {
     const c = this.counter;
     if (state.adjustHistory) {
       this.addToQueue(() => {
+        if (this.debug) {
+          console.log("history.pushState", c, url);
+        }
         const formattedUrl = url === void 0 ? void 0 : "/" + UrlHelper.trim(UrlHelper.transformUrl(url));
         history.pushState({ counter: c }, "", formattedUrl);
       });
     } else {
       this.addToQueue(() => {
+        if (this.debug) {
+          console.log("history.replaceState", c);
+        }
         history.replaceState({ counter: c }, "", void 0);
       });
     }
+    if (this.debug) {
+      console.log("Push new state ", this.states[this.states.length - 1]);
+    }
   }
   /**
    * Call when an action is performed that breaks back/forward navigation
    */
   invalidateHistory() {
+    if (this.debug) {
+      console.log("HistoryManger.invalidateHistory");
+    }
     for (const state of this.states) {
       state.undoAction = null;
       state.invalid = state.index !== this.counter;
@@ -450,6 +478,9 @@ class HistoryManagerStatic {
    * Return to a given history point in time, if needed
    */
   returnToHistoryIndex(counter) {
+    if (this.debug) {
+      console.log("Did return to history index " + counter + ", coming from " + this.counter);
+    }
     if (counter > this.counter) {
       console.warn("Performed non-compatible navigation. Probably because side-by-side views navigating");
       this.invalidateHistory();
@@ -474,10 +505,16 @@ class HistoryManagerStatic {
       console.log("Deleted states", deletedStates.length);
       const adjustHistoryCount = deletedStates.filter((state) => state.adjustHistory).length;
       if (adjustHistoryCount > 0) {
+        if (this.debug) {
+          console.log("Adjusting browser history state: popping " + adjustHistoryCount + " items");
+        }
         this.go(-adjustHistoryCount);
       }
     }
     if (this.states[this.counter].url) {
+      if (this.debug) {
+        console.log("Setting manual url without history api: " + this.states[this.counter].url);
+      }
       this.setUrl(this.states[this.counter].url, this.states[this.counter].title);
     }
     return this.counter;
@@ -486,6 +523,9 @@ class HistoryManagerStatic {
     history.scrollRestoration = "manual";
     async function onPopState(event) {
       var _a;
+      if (this.debug) {
+        console.log("HistoryManager popstate");
+      }
       if (this.isAdjustingState) {
         console.warn("Duplicate popstate");
         return;
@@ -497,8 +537,11 @@ class HistoryManagerStatic {
       const newCounter = (_a = event.state) == null ? void 0 : _a.counter;
       if (newCounter !== void 0) {
         if (newCounter > this.counter) {
-          const amount = newCounter - this.counter;
-          this.go(-amount);
+          if (this.debug) {
+            console.log("Reloading page because going forward is not supported");
+          }
+          window.location.reload();
+          return;
         } else {
           const animate = this.counter - newCounter == 1 && this.animateHistoryPop;
           this.counter = newCounter;
@@ -518,6 +561,9 @@ class HistoryManagerStatic {
           }
           for (const state of deletedStates) {
             if (state.undoAction) {
+              if (this.debug) {
+                console.log("Executing undoAction...");
+              }
               await state.undoAction(animate);
             } else {
               if (state.adjustHistory) {
@@ -567,7 +613,6 @@ class HistoryManagerStatic {
     });
   }
 }
-__publicField(HistoryManagerStatic, "debug", false);
 const HistoryManager = new HistoryManagerStatic();
 function useCurrentComponent() {
   return inject("navigation_currentComponent", null);
@@ -781,9 +826,6 @@ const _ComponentWithProperties = class _ComponentWithProperties {
         console.warn("Returning to a component that has no history index assigned. Has this component been pushed to a navigation controller properly before returning to it?", this.component.name);
       return false;
     }
-    _ComponentWithProperties.historyIndexOwners.set(this.historyIndex, this);
-    if (_ComponentWithProperties.debug)
-      console.log("New owner of history index ", this.historyIndex, this.component.name);
     HistoryManager.returnToHistoryIndex(this.historyIndex);
     return true;
   }
@@ -846,6 +888,7 @@ const _ComponentWithProperties = class _ComponentWithProperties {
       } else {
         console.error("No unmount function for component " + this.vnode);
       }
+      this.deleteHistoryIndex();
       this.vnode = null;
     }
   }
@@ -1412,47 +1455,84 @@ const _sfc_main$4 = defineComponent({
         if (animated) {
           this.freezeSize();
         }
+        let popped = [];
+        const adjustHistory = (options == null ? void 0 : options.adjustHistory) ?? true;
         if (replace > 0) {
-          const popped = this.components.splice(this.components.length - replace, replace, ...components);
+          popped = this.components.splice(this.components.length - replace, replace, ...components);
           if (!destroy) {
             for (const comp of popped) {
               comp.keepAlive = true;
             }
           }
-          if (this.components.length !== components.length) {
-            HistoryManager.invalidateHistory();
+          if (this.components.length <= components.length) {
+            const lastComponent = popped[0];
+            if (HistoryManager.active) {
+              if (lastComponent && lastComponent.hasHistoryIndex()) {
+                HistoryManager.returnToHistoryIndex(lastComponent.historyIndex - 1);
+              } else {
+                console.log("Last removed component has no history index", popped);
+                HistoryManager.invalidateHistory();
+              }
+            }
+          } else {
+            const lastComponent = this.components[this.components.length - components.length - 1];
+            if (lastComponent && lastComponent.hasHistoryIndex()) {
+              lastComponent.returnToHistoryIndex();
+            } else {
+              console.log("Last visible component has no history index", lastComponent);
+              HistoryManager.invalidateHistory();
+            }
           }
         } else {
           this.components.push(...components);
         }
         if (this.mainComponent) {
-          this.mainComponent.keepAlive = !replace;
+          this.mainComponent.keepAlive = !replace || !destroy;
         }
-        const adjustHistory = (options == null ? void 0 : options.adjustHistory) ?? true;
         if (adjustHistory) {
-          for (const component2 of components) {
-            HistoryManager.pushState(void 0, async (canAnimate) => {
-              if (!this.mainComponent) {
-                console.error("Tried to pop NavigationController, but it was already unmounted");
-                return;
-              }
-              await this.pop({ animated: animated && canAnimate });
-            }, {
-              adjustHistory,
-              invalid: options.invalidHistory ?? !!replace
-            });
-            component2.assignHistoryIndex();
-          }
-        } else {
-          for (const component2 of components) {
-            if (!replace || this.components.length !== components.length) {
-              HistoryManager.pushState(void 0, null, {
+          for (const [index, component2] of components.entries()) {
+            if (index === 0 && popped.length) {
+              HistoryManager.pushState(void 0, async (canAnimate) => {
+                if (!this.mainComponent) {
+                  console.error("Tried to pop NavigationController, but it was already unmounted");
+                  return;
+                }
+                await this.push({
+                  animated: animated && canAnimate,
+                  replace: 1,
+                  components: popped,
+                  reverse: !(options.reverse ?? false),
+                  adjustHistory: false
+                });
+              }, {
+                adjustHistory,
+                invalid: options.invalidHistory ?? false
+              });
+            } else {
+              HistoryManager.pushState(void 0, async (canAnimate) => {
+                if (!this.mainComponent) {
+                  console.error("Tried to pop NavigationController, but it was already unmounted");
+                  return;
+                }
+                await this.pop({ animated: animated && canAnimate });
+              }, {
                 adjustHistory,
-                invalid: options.invalidHistory ?? !!replace
+                invalid: options.invalidHistory ?? false
               });
             }
             component2.assignHistoryIndex();
           }
+        } else {
+          for (const [index, component2] of components.entries()) {
+            HistoryManager.pushState(void 0, !!replace && index === 0 ? async (animated2) => {
+              await this.pop({ animated: animated2, count: components.length });
+            } : null, {
+              adjustHistory: !!replace && index === 0,
+              // for the first one we need to adjust the history because we returned earlier
+              invalid: options.invalidHistory ?? false
+            });
+            component2.assignHistoryIndex();
+          }
         }
         this.mainComponent = component;
         this.$emit("didPush");
@@ -2815,10 +2895,10 @@ const _sfc_main = defineComponent({
           this.getScrollElement().scrollTop = 0;
           HistoryManager.pushState(void 0, null, {
             adjustHistory: options.adjustHistory ?? true,
-            invalid: options.invalidHistory ?? !!this.detail
+            invalid: !!options.invalidHistory || !!this.detail
           });
+          component.assignHistoryIndex();
           this.detail = component;
-          this.detail.assignHistoryIndex();
         }
       } finally {
         this.isChangingComponents = false;
@@ -2845,13 +2925,13 @@ const _sfc_main = defineComponent({
         console.error("Cannot collapse while already isChangingComponents");
         return;
       }
+      console.log("Collapse SplitViewController");
       this.isChangingComponents = true;
       try {
         this.detail.keepAlive = true;
         const detail = this.detail;
         this.detail = null;
         await this.navigationController.push({ components: [detail], animated: false });
-        HistoryManager.invalidateHistory();
       } finally {
         this.isChangingComponents = false;
       }
@@ -2887,12 +2967,12 @@ const _sfc_main = defineComponent({
         console.error("Cannot expand while already isChangingComponents");
         return false;
       }
+      console.log("Expand SplitViewController");
       if (!this.lastIsDetail) {
         if (!this.defaultHandler) {
           console.error("Cannot expand when there is no defaultHandler");
           return;
         }
-        HistoryManager.invalidateHistory();
         this.isChangingComponents = false;
         try {
           const succeeded = await this.defaultHandler();

package/dist/src/HistoryManager.d.ts

@@ -11,7 +11,7 @@ type HistoryState = {
     undoAction: ((animate: boolean) => void | Promise<void>) | null;
 };
 declare class HistoryManagerStatic {
-    static debug: boolean;
+    debug: boolean;
     states: HistoryState[];
     counter: number;
     active: boolean;

package/package.json

@@ -2,7 +2,7 @@
     "name": "@simonbackx/vue-app-navigation",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
-    "version": "2.16.0",
+    "version": "2.17.1",
     "exports": {
         ".": {
             "import": "./dist/index.js",