@simonbackx/vue-app-navigation 2.16.0 → 2.17.0

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);
     });
@@ -428,19 +441,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 +475,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 +502,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 +520,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;
@@ -499,6 +536,9 @@ class HistoryManagerStatic {
         if (newCounter > this.counter) {
           const amount = newCounter - this.counter;
           this.go(-amount);
+          if (this.debug) {
+            console.log("Not allowed to go forward, going back " + amount + " steps");
+          }
         } else {
           const animate = this.counter - newCounter == 1 && this.animateHistoryPop;
           this.counter = newCounter;
@@ -518,6 +558,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 +610,6 @@ class HistoryManagerStatic {
     });
   }
 }
-__publicField(HistoryManagerStatic, "debug", false);
 const HistoryManager = new HistoryManagerStatic();
 function useCurrentComponent() {
   return inject("navigation_currentComponent", null);

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.0",
     "exports": {
         ".": {
             "import": "./dist/index.js",