@simonbackx/vue-app-navigation 2.15.0 → 2.17.0

package/dist/index.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { inject, proxyRefs, markRaw, ref, reactive, getCurrentInstance, provide, computed, unref, onActivated, onMounted, queuePostFlushCb, onBeforeUnmount, onBeforeMount, onUpdated, warn, h, setTransitionHooks, callWithAsyncErrorHandling, ErrorCodes, shallowRef, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, defineComponent, Transition, withCtx, createBlock, createCommentVNode, customRef, onScopeDispose, TransitionGroup, Fragment, renderList, isRef, onDeactivated, normalizeClass, normalizeStyle } from "vue";
+import { inject, proxyRefs, markRaw, ref, reactive, defineComponent, getCurrentInstance, provide, computed, unref, onActivated, onMounted, queuePostFlushCb, onBeforeUnmount, onBeforeMount, onUpdated, warn, h, setTransitionHooks, callWithAsyncErrorHandling, ErrorCodes, shallowRef, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, mergeProps, Transition, withCtx, createBlock, createCommentVNode, customRef, onScopeDispose, TransitionGroup, Fragment, renderList, isRef, onDeactivated, normalizeClass, normalizeStyle } from "vue";
 const _UrlHelper = class _UrlHelper {
   constructor(url, localFixedPrefix) {
     __publicField(this, "url");
@@ -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);
@@ -945,7 +987,7 @@ function makeProvidesParentReactive(instance) {
   instance.provides = Object.create(proxyProvider);
   return reactiveInstance;
 }
-const ComponentWithPropertiesInstance = {
+const ComponentWithPropertiesInstance = defineComponent({
   name: "ComponentWithPropertiesInstance",
   props: {
     component: {
@@ -959,7 +1001,7 @@ const ComponentWithPropertiesInstance = {
     }
   },
   __isKeepAlive: true,
-  setup(props) {
+  setup(props, context) {
     const instance = getCurrentInstance();
     const sharedContext = instance.ctx;
     const reactiveInstance = makeProvidesParentReactive(instance);
@@ -1114,7 +1156,7 @@ const ComponentWithPropertiesInstance = {
         return null;
       }
       props.component.component.inheritAttrs = false;
-      const vnode = h(props.component.component, props.component.properties);
+      const vnode = h(props.component.component, { ...props.component.properties, ...context.attrs });
       const comp = vnode.type;
       const key = vnode.key == null ? comp : vnode.key;
       pendingCacheKey = key;
@@ -1138,7 +1180,7 @@ const ComponentWithPropertiesInstance = {
       return vnode;
     };
   }
-};
+});
 const _sfc_main$5 = {
   name: "FramedComponent",
   components: {
@@ -1172,7 +1214,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ComponentWithPropertiesInstance = resolveComponent("ComponentWithPropertiesInstance");
   return openBlock(), createElementBlock("div", null, [
     createElementVNode("div", null, [
-      createVNode(_component_ComponentWithPropertiesInstance, { component: $props.root }, null, 8, ["component"])
+      createVNode(_component_ComponentWithPropertiesInstance, mergeProps({ component: $props.root }, _ctx.$attrs), null, 16, ["component"])
     ])
   ]);
 }

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/dist/src/NavigationController.vue.d.ts

@@ -74,8 +74,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: null;
     };
 }>> & Readonly<{}>, {
-    root: ComponentWithProperties | null;
     customProvide: Record<string, any>;
+    root: ComponentWithProperties | null;
     initialComponents: ComponentWithProperties[] | null;
     animationType: string;
 }, {}, {

package/dist/src/SplitViewController.vue.d.ts

@@ -119,8 +119,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             default: null;
         };
     }>> & Readonly<{}>, {
-        root: ComponentWithProperties | null;
         customProvide: Record<string, any>;
+        root: ComponentWithProperties | null;
         initialComponents: ComponentWithProperties[] | null;
         animationType: string;
     }, {}, {
@@ -445,8 +445,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 default: null;
             };
         }>> & Readonly<{}>, {
-            root: ComponentWithProperties | null;
             customProvide: Record<string, any>;
+            root: ComponentWithProperties | null;
             initialComponents: ComponentWithProperties[] | null;
             animationType: string;
         }, {}, {

package/package.json

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