@simonbackx/vue-app-navigation 2.18.0 → 2.19.0

package/dist/index.js

@@ -244,6 +244,9 @@ class HistoryManagerStatic {
     this.isQueueRunning = true;
     const action = this.historyQueue.shift();
     if (action) {
+      if (this.debug) {
+        console.log("Running history queue action");
+      }
       const p = action();
       if (p) {
         p.finally(() => this.runQueue()).catch(console.error);
@@ -251,6 +254,9 @@ class HistoryManagerStatic {
         this.runQueue();
       }
     } else {
+      if (this.debug) {
+        console.log("History queue done");
+      }
       this.isQueueRunning = false;
       this.callListeners();
     }
@@ -262,11 +268,17 @@ class HistoryManagerStatic {
         history.go(delta);
         let timer = void 0;
         let called = false;
+        const startTime = /* @__PURE__ */ new Date();
         const listener = () => {
           if (called) return;
           called = true;
           clearTimeout(timer);
           window.removeEventListener("popstate", listener);
+          const end = /* @__PURE__ */ new Date();
+          if (this.debug) {
+            const ms = end.getTime() - startTime.getTime();
+            console.log("Waiting for popstate event took " + ms + "ms");
+          }
           setTimeout(() => {
             this.manualStateAction = false;
             resolve();
@@ -276,7 +288,7 @@ class HistoryManagerStatic {
         timer = setTimeout(() => {
           console.warn("Timeout while waiting for history.go");
           listener();
-        }, 200);
+        }, 400);
       });
     });
   }
@@ -523,9 +535,9 @@ class HistoryManagerStatic {
   activate() {
     history.scrollRestoration = "manual";
     async function onPopState(event) {
-      var _a;
+      var _a, _b;
       if (this.debug) {
-        console.log("HistoryManager popstate");
+        console.log("HistoryManager popstate", (_a = event.state) == null ? void 0 : _a.counter);
       }
       if (this.isAdjustingState) {
         console.warn("Duplicate popstate");
@@ -534,8 +546,8 @@ class HistoryManagerStatic {
       if (this.manualStateAction) {
         return;
       }
+      const newCounter = (_b = event.state) == null ? void 0 : _b.counter;
       this.isAdjustingState = true;
-      const newCounter = (_a = event.state) == null ? void 0 : _a.counter;
       if (newCounter !== void 0) {
         if (newCounter > this.counter) {
           if (this.debug) {
@@ -761,6 +773,7 @@ const _ComponentWithProperties = class _ComponentWithProperties {
     }
     const state = HistoryManager.getCurrentState();
     this.historyIndex = state.index;
+    if (_ComponentWithProperties.debug) console.warn("Assigned index to component", this.component.name ?? this, state.index);
     _ComponentWithProperties.historyIndexOwners.set(state.index, this);
   }
   inheritHistoryIndex(index) {
@@ -820,6 +833,7 @@ const _ComponentWithProperties = class _ComponentWithProperties {
       if (_ComponentWithProperties.debug) 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;
     }
+    if (_ComponentWithProperties.debug) console.warn("Returned to component", this.component.name ?? this);
     HistoryManager.returnToHistoryIndex(this.historyIndex);
     return true;
   }
@@ -1151,7 +1165,7 @@ const ComponentWithPropertiesInstance = defineComponent({
     };
   }
 });
-const _sfc_main$5 = {
+const _sfc_main$4 = {
   name: "FramedComponent",
   components: {
     ComponentWithPropertiesInstance
@@ -1188,8 +1202,8 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const FramedComponent = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$2]]);
-const _sfc_main$4 = defineComponent({
+const FramedComponent = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$2]]);
+const NavigationController$1 = defineComponent({
   name: "NavigationController",
   components: {
     FramedComponent
@@ -1203,6 +1217,9 @@ const _sfc_main$4 = defineComponent({
     },
     reactive_navigation_can_dismiss: {
       default: false
+    },
+    reactive_navigationController: {
+      default: null
     }
   },
   provide() {
@@ -1261,6 +1278,11 @@ const _sfc_main$4 = defineComponent({
       cachedProvides: /* @__PURE__ */ new Map()
     };
   },
+  computed: {
+    navigationController() {
+      return unref(this.reactive_navigationController);
+    }
+  },
   watch: {
     // whenever question changes, this function will run
     mainComponent(newComponent) {
@@ -1756,7 +1778,14 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["onBeforeEnter", "onBeforeLeave", "onEnter", "onLeave", "onAfterLeave", "onAfterEnter", "onEnterCancelled"])
   ])) : createCommentVNode("", true);
 }
-const NavigationController = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$1]]);
+const NavigationController = /* @__PURE__ */ _export_sfc(NavigationController$1, [["render", _sfc_render$1]]);
+function typeRoute(route) {
+  return route;
+}
+const defineRoute = (route) => {
+  defineRoutes([route]);
+  return route;
+};
 function usePop() {
   const rawPop = inject("reactive_navigation_pop", null);
   return (options) => {
@@ -1774,12 +1803,18 @@ function useNavigate() {
   const show = useShow();
   const showDetail = useShowDetail();
   const toRoute = async function(route, options) {
-    let componentProperties = (options == null ? void 0 : options.properties) ?? (options == null ? void 0 : options.params) ?? {};
+    let componentProperties = (options == null ? void 0 : options.properties) ?? {};
     let params = (options == null ? void 0 : options.params) ?? {};
-    if (!(options == null ? void 0 : options.properties) && route.paramsToProps) {
-      componentProperties = route.paramsToProps(params, options == null ? void 0 : options.query);
+    if (!(options == null ? void 0 : options.properties)) {
+      if ("paramsToProps" in route) {
+        componentProperties = route.paramsToProps((options == null ? void 0 : options.params) ?? {}, options == null ? void 0 : options.query);
+      } else {
+        if (options == null ? void 0 : options.params) {
+          throw new Error("Using route to a route that only has properties, no parameters. Use properties instead of params in navigate() for this route: " + route.url);
+        }
+      }
     }
-    if (!(options == null ? void 0 : options.params) && route.propsToParams && componentProperties) {
+    if (!(options == null ? void 0 : options.params) && "propsToParams" in route) {
       const { params: p } = route.propsToParams(await componentProperties);
       params = p;
     }
@@ -1789,7 +1824,8 @@ function useNavigate() {
         url,
         adjustHistory: (options == null ? void 0 : options.adjustHistory) ?? true,
         animated: (options == null ? void 0 : options.animated) ?? true,
-        modalDisplayStyle: route.present && typeof route.present === "string" ? route.present : void 0,
+        modalDisplayStyle: void 0,
+        // modalDisplayStyle: route.present && typeof route.present === 'string' ? route.present : undefined,
         checkRoutes: (options == null ? void 0 : options.checkRoutes) ?? false,
         componentProperties: await componentProperties
       });
@@ -1798,7 +1834,7 @@ function useNavigate() {
     let component;
     const isComponentFunction = typeof route.component === "function" && !(!!route.component.prototype && route.component.prototype.constructor === route.component);
     if (isComponentFunction || componentProperties.then) {
-      const method = isComponentFunction ? route.component : () => route.component;
+      const method = isComponentFunction ? route.component : (_) => route.component;
       const originalProperties = componentProperties;
       if (!("PromiseComponent" in window)) {
         throw new Error("Required PromiseComponent window variable to make async components work in routes");
@@ -1806,8 +1842,12 @@ function useNavigate() {
       component = window.PromiseComponent;
       componentProperties = {
         promise: async () => {
-          const realComponent = await method();
-          return new ComponentWithProperties(realComponent === "self" ? instance == null ? void 0 : instance.type : realComponent, await originalProperties);
+          const properties = await originalProperties;
+          const realComponent = await method(properties);
+          if (realComponent instanceof ComponentWithProperties) {
+            return realComponent;
+          }
+          return new ComponentWithProperties(realComponent === "self" ? instance == null ? void 0 : instance.type : realComponent, properties);
         }
       };
     } else {
@@ -1850,7 +1890,7 @@ function useNavigate() {
           new ComponentWithProperties(component, componentProperties)
         ],
         checkRoutes: (options == null ? void 0 : options.checkRoutes) ?? false
-      });
+      }, typeof route.show === "object" && route.show !== null && "getCustomShow" in route.show ? route.show.getCustomShow() : void 0);
     }
   };
   const currentRoutes = getCurrentRoutes();
@@ -1938,13 +1978,18 @@ function defineRoutes(routes) {
   const navigate = useNavigate();
   const currentRoutes = getCurrentRoutes();
   const provideDefaultHandler = inject("reactive_provide_default_handler", null);
+  let hadRoutes = false;
   if (currentRoutes.value.length) {
-    console.error("Multiple calls to defineRoutes: routes will get overwritten");
+    hadRoutes = true;
+    routes = [...currentRoutes.value, ...Array.isArray(routes) ? routes : []];
   }
   currentRoutes.value = Array.isArray(routes) ? routes : [];
+  if (hadRoutes) {
+    return;
+  }
   async function handleRoutes(routes2) {
     for (const route of routes2) {
-      const result = urlhelpers.match(route.url, route.params);
+      const result = urlhelpers.match(route.url, "params" in route ? route.params : {});
       if (result) {
         try {
           await navigate(route, {
@@ -2001,24 +2046,12 @@ function defineRoutes(routes) {
     }
   };
   onCheckRoutes(async () => {
-    if (Array.isArray(routes)) {
-      if (await handleRoutes(routes)) {
+    const routes2 = currentRoutes.value;
+    if (Array.isArray(routes2)) {
+      if (await handleRoutes(routes2)) {
         setDefaultHandler();
         return;
       }
-    } else {
-      const extraRoutes = await routes();
-      if (Array.isArray(extraRoutes)) {
-        if (await handleRoutes(extraRoutes)) {
-          setDefaultHandler();
-          return;
-        }
-      } else {
-        if (extraRoutes) {
-          setDefaultHandler();
-          return;
-        }
-      }
     }
     setDefaultHandler();
   });
@@ -2027,10 +2060,6 @@ function defineRoutes(routes) {
     setDefaultHandler();
   });
 }
-const checkRouteCache = {
-  lastUrl: null,
-  results: /* @__PURE__ */ new Map()
-};
 function useCurrentHref() {
   const state = ref(window.location.href);
   const owner = {};
@@ -2047,6 +2076,10 @@ function useCheckRoute() {
   const currentRoutes = getCurrentRoutes();
   const instance = getCurrentInstance();
   const currentPath = useCurrentHref();
+  const checkRouteCache = {
+    lastUrl: null,
+    results: /* @__PURE__ */ new Map()
+  };
   const checkMatchResult = function(route, result, options) {
     if (!result) {
       return false;
@@ -2062,7 +2095,7 @@ function useCheckRoute() {
           return false;
         }
       }
-      if (!(options == null ? void 0 : options.params) && route.propsToParams && options.properties) {
+      if (!(options == null ? void 0 : options.params) && "propsToParams" in route && options.properties) {
         const { params } = route.propsToParams(options.properties);
         for (const key in params) {
           if (result.params[key] !== params[key]) {
@@ -2085,7 +2118,7 @@ function useCheckRoute() {
     }
   };
   const checkRoute = function(route, options) {
-    const result = urlhelpers.matchCurrent(route.url, route.params);
+    const result = urlhelpers.matchCurrent(route.url, "params" in route ? route.params : {});
     checkRouteCache.results.set(route.url, { result, route });
     if (route.name) {
       checkRouteCache.results.set(route.name, { result, route });
@@ -2150,8 +2183,8 @@ function useShow() {
   const currentComponent = useCurrentComponent();
   const rawShow = inject("reactive_navigation_show", null);
   const urlHelpers = useUrl();
-  return (options) => {
-    const show = unref(rawShow);
+  return (options, customShow) => {
+    const show = customShow ?? unref(rawShow);
     if (!show) {
       console.warn("Failed to perform show");
       return Promise.resolve();
@@ -2761,6 +2794,13 @@ const _sfc_main = defineComponent({
         }
       };
     },
+    detailProvide() {
+      return {
+        // Detail can not alter the navigation of the parent of split view controller.
+        reactive_navigation_can_pop: false,
+        reactive_navigation_can_dismiss: false
+      };
+    },
     lastIsDetail() {
       var _a, _b;
       return this.detailKey != null && ((_b = (_a = this.navigationController) == null ? void 0 : _a.mainComponent) == null ? void 0 : _b.key) == this.detailKey;
@@ -2799,6 +2839,7 @@ const _sfc_main = defineComponent({
       return this.navigationController.returnToHistoryIndex();
     },
     onResize() {
+      if (this.$el.isConnected === false) return false;
       if (this.shouldCollapse()) {
         if (this.detail) {
           this.collapse().catch(console.error);
@@ -3005,8 +3046,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _ctx.detail ? (openBlock(), createElementBlock("div", _hoisted_3, [
       (openBlock(), createBlock(_component_FramedComponent, {
         key: _ctx.detail.key,
-        root: _ctx.detail
-      }, null, 8, ["root"]))
+        root: _ctx.detail,
+        "custom-provide": _ctx.detailProvide
+      }, null, 8, ["root", "custom-provide"]))
     ])) : createCommentVNode("", true)
   ], 8, _hoisted_1);
 }
@@ -3024,6 +3066,7 @@ export {
   SplitViewController,
   _sfc_main$3 as StackComponent,
   UrlHelper,
+  defineRoute,
   defineRoutes,
   extendUrl,
   forAllRoots,
@@ -3038,6 +3081,7 @@ export {
   setTitleSuffix,
   setUrl,
   templateToUrl,
+  typeRoute,
   useCanDismiss,
   useCanPop,
   useCheckRoute,

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

@@ -3,7 +3,7 @@ import { ComponentWithProperties, ComponentWithPropertiesType } from './Componen
 import { PopOptions } from './PopOptions';
 import { PushOptions } from './PushOptions';
 
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare const NavigationController: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     root: {
         default: null;
         type: PropType<ComponentWithProperties | null>;
@@ -29,7 +29,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     asyncQueue: (() => Promise<void>)[];
     asyncQueueRunning: boolean;
     cachedProvides: Map<number, any>;
-}, {}, {
+}, {
+    navigationController(): InstanceType<typeof NavigationController> | null;
+}, {
     cacheComponentProvides(newComponent: ComponentWithPropertiesType): void;
     provideForComponent(key: number): any;
     runQueue<T>(run: () => Promise<T>): Promise<T>;
@@ -135,7 +137,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         asyncQueue: (() => Promise<void>)[];
         asyncQueueRunning: boolean;
         cachedProvides: Map<number, any>;
-    }, {}, {
+    }, {
+        navigationController(): InstanceType<typeof NavigationController> | null;
+    }, {
         cacheComponentProvides(newComponent: ComponentWithPropertiesType): void;
         provideForComponent(key: number): any;
         runQueue<T>(run: () => Promise<T>): Promise<T>;
@@ -172,6 +176,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         reactive_navigation_can_dismiss: {
             default: boolean;
         };
+        reactive_navigationController: {
+            default: null;
+        };
     }, {}, {
         FramedComponent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
             root: {
@@ -235,7 +242,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         asyncQueue: (() => Promise<void>)[];
         asyncQueueRunning: boolean;
         cachedProvides: Map<number, any>;
-    }, {}, {
+    }, {
+        navigationController(): InstanceType<typeof NavigationController> | null;
+    }, {
         cacheComponentProvides(newComponent: ComponentWithPropertiesType): void;
         provideForComponent(key: number): any;
         runQueue<T>(run: () => Promise<T>): Promise<T>;
@@ -266,4 +275,4 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     reactive_navigation_show: (options: PushOptions) => Promise<void>;
     reactive_navigation_pop: import('vue').ComputedRef<unknown>;
 }, true, {}, any>;
-export default _default;
+export default NavigationController;

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

@@ -23,12 +23,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         reactive_navigation_disable_url: import('vue').ComputedRef<boolean>;
         reactive_provide_default_handler: (defaultHandler: DefaultRouteHandler) => void;
     };
+    detailProvide(): {
+        reactive_navigation_can_pop: boolean;
+        reactive_navigation_can_dismiss: boolean;
+    };
     lastIsDetail(): boolean;
     navigationController(): InstanceType<typeof NavigationController>;
     masterElement(): HTMLElement;
 }, {
     returnToHistoryIndex(): boolean;
-    onResize(): void;
+    onResize(): false | undefined;
     getScrollElement(element?: HTMLElement | null): HTMLElement;
     shouldNavigateAway(): Promise<boolean>;
     showDetail(options: PushOptions): Promise<boolean>;
@@ -74,7 +78,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         asyncQueue: (() => Promise<void>)[];
         asyncQueueRunning: boolean;
         cachedProvides: Map<number, any>;
-    }, {}, {
+    }, {
+        navigationController(): InstanceType<typeof NavigationController> | null;
+    }, {
         cacheComponentProvides(newComponent: ComponentWithPropertiesType): void;
         provideForComponent(key: number): any;
         runQueue<T>(run: () => Promise<T>): Promise<T>;
@@ -180,7 +186,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             asyncQueue: (() => Promise<void>)[];
             asyncQueueRunning: boolean;
             cachedProvides: Map<number, any>;
-        }, {}, {
+        }, {
+            navigationController(): InstanceType<typeof NavigationController> | null;
+        }, {
             cacheComponentProvides(newComponent: ComponentWithPropertiesType): void;
             provideForComponent(key: number): any;
             runQueue<T>(run: () => Promise<T>): Promise<T>;
@@ -217,6 +225,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             reactive_navigation_can_dismiss: {
                 default: boolean;
             };
+            reactive_navigationController: {
+                default: null;
+            };
         }, {}, {
             FramedComponent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
                 root: {
@@ -280,7 +291,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             asyncQueue: (() => Promise<void>)[];
             asyncQueueRunning: boolean;
             cachedProvides: Map<number, any>;
-        }, {}, {
+        }, {
+            navigationController(): InstanceType<typeof NavigationController> | null;
+        }, {
             cacheComponentProvides(newComponent: ComponentWithPropertiesType): void;
             provideForComponent(key: number): any;
             runQueue<T>(run: () => Promise<T>): Promise<T>;
@@ -360,12 +373,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             reactive_navigation_disable_url: import('vue').ComputedRef<boolean>;
             reactive_provide_default_handler: (defaultHandler: DefaultRouteHandler) => void;
         };
+        detailProvide(): {
+            reactive_navigation_can_pop: boolean;
+            reactive_navigation_can_dismiss: boolean;
+        };
         lastIsDetail(): boolean;
         navigationController(): InstanceType<typeof NavigationController>;
         masterElement(): HTMLElement;
     }, {
         returnToHistoryIndex(): boolean;
-        onResize(): void;
+        onResize(): false | undefined;
         getScrollElement(element?: HTMLElement | null): HTMLElement;
         shouldNavigateAway(): Promise<boolean>;
         showDetail(options: PushOptions): Promise<boolean>;
@@ -400,7 +417,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             asyncQueue: (() => Promise<void>)[];
             asyncQueueRunning: boolean;
             cachedProvides: Map<number, any>;
-        }, {}, {
+        }, {
+            navigationController(): InstanceType<typeof NavigationController> | null;
+        }, {
             cacheComponentProvides(newComponent: ComponentWithPropertiesType): void;
             provideForComponent(key: number): any;
             runQueue<T>(run: () => Promise<T>): Promise<T>;
@@ -506,7 +525,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 asyncQueue: (() => Promise<void>)[];
                 asyncQueueRunning: boolean;
                 cachedProvides: Map<number, any>;
-            }, {}, {
+            }, {
+                navigationController(): InstanceType<typeof NavigationController> | null;
+            }, {
                 cacheComponentProvides(newComponent: ComponentWithPropertiesType): void;
                 provideForComponent(key: number): any;
                 runQueue<T>(run: () => Promise<T>): Promise<T>;
@@ -543,6 +564,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 reactive_navigation_can_dismiss: {
                     default: boolean;
                 };
+                reactive_navigationController: {
+                    default: null;
+                };
             }, {}, {
                 FramedComponent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
                     root: {
@@ -606,7 +630,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 asyncQueue: (() => Promise<void>)[];
                 asyncQueueRunning: boolean;
                 cachedProvides: Map<number, any>;
-            }, {}, {
+            }, {
+                navigationController(): InstanceType<typeof NavigationController> | null;
+            }, {
                 cacheComponentProvides(newComponent: ComponentWithPropertiesType): void;
                 provideForComponent(key: number): any;
                 runQueue<T>(run: () => Promise<T>): Promise<T>;
@@ -692,12 +718,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             reactive_navigation_disable_url: import('vue').ComputedRef<boolean>;
             reactive_provide_default_handler: (defaultHandler: DefaultRouteHandler) => void;
         };
+        detailProvide(): {
+            reactive_navigation_can_pop: boolean;
+            reactive_navigation_can_dismiss: boolean;
+        };
         lastIsDetail(): boolean;
         navigationController(): InstanceType<typeof NavigationController>;
         masterElement(): HTMLElement;
     }, {
         returnToHistoryIndex(): boolean;
-        onResize(): void;
+        onResize(): false | undefined;
         getScrollElement(element?: HTMLElement | null): HTMLElement;
         shouldNavigateAway(): Promise<boolean>;
         showDetail(options: PushOptions): Promise<boolean>;

package/dist/src/utils/UrlHelper.d.ts

@@ -66,6 +66,10 @@ export declare class UrlHelper {
     static trim(url: string): string;
     match<Params>(template: string, params?: UrlParamsConstructors<Params>): UrlMatchResult<Params> | undefined;
 }
+type ConstructorToType<C> = C extends NumberConstructor ? number : C extends StringConstructor ? string : C extends BooleanConstructor ? boolean : never;
+export type ParamsFromConstructors<C> = {
+    [K in keyof C]: ConstructorToType<C[K]>;
+};
 export type UrlParamsConstructors<Params> = {
     [Key in keyof Params]: Params[Key] extends number ? NumberConstructor : StringConstructor;
 };
@@ -80,3 +84,4 @@ export type UrlMatchResult<Params> = {
 export declare function matchPath<Params>(path: string | string[], query: URLSearchParams, template: string, params?: UrlParamsConstructors<Params>): UrlMatchResult<Params> | undefined;
 export declare function matchQuery(): void;
 export declare function templateToUrl<Params>(template: string, params: Params): string;
+export {};

package/dist/src/utils/navigationHooks.d.ts

@@ -3,70 +3,67 @@ import { ComponentWithProperties, ModalDisplayStyle } from '../ComponentWithProp
 import { HistoryUrl } from '../HistoryManager';
 import { PopOptions } from '../PopOptions';
 import { PushOptions } from '../PushOptions';
-import { UrlMatchResult, UrlParamsConstructors } from './UrlHelper';
+import { ParamsFromConstructors, UrlMatchResult, UrlParamsConstructors } from './UrlHelper';
 
-export type Route<Params> = {
-    name?: string;
-    url: string;
-    params?: UrlParamsConstructors<Params>;
-    query?: UrlParamsConstructors<unknown>;
-    component: Component | (() => Promise<Component>) | 'self';
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+export declare function typeRoute<const C extends Record<string, StringConstructor | NumberConstructor>, Props = unknown>(route: DistributiveOmit<RouteWithParams<Props, ParamsFromConstructors<C>>, 'params'> & {
+    params: C;
+}): RouteWithParams<Props, ParamsFromConstructors<C>>;
+export declare function typeRoute<Props = unknown>(route: RouteWithoutParams<Props>): RouteWithoutParams<Props>;
+export declare const defineRoute: typeof typeRoute;
+type NotFunction<T> = T extends Function ? never : T;
+type RouteComponent<Props> = {
     present?: ModalDisplayStyle | true;
-    show?: true | 'detail';
-    isDefault?: RouteNavigationOptions<Params>;
-    paramsToProps?: (params: Params, query?: URLSearchParams) => Promise<Record<string, unknown>> | Record<string, unknown>;
-    /**
-     * Used for building back the URL if only properties are provided
-     */
-    propsToParams?: (props: Record<string, unknown>) => {
-        params: Params;
-        query?: URLSearchParams;
+    show?: true | 'detail' | {
+        getCustomShow: () => (options: PushOptions) => Promise<void>;
     };
+    component: NotFunction<Component> | 'self' | ((props: Record<string, unknown>) => Promise<Component | ComponentWithProperties> | Component | ComponentWithProperties);
 } | {
-    name?: string;
-    url: string;
-    params?: UrlParamsConstructors<Params>;
-    query?: UrlParamsConstructors<unknown>;
-    present?: ModalDisplayStyle | true;
     handler: (options: {
         url: string;
         adjustHistory: boolean;
         animated: boolean;
         modalDisplayStyle: ModalDisplayStyle | undefined;
         checkRoutes: boolean;
-        componentProperties: Record<string, unknown>;
+        componentProperties: Props;
     }) => Promise<void>;
-    isDefault?: RouteNavigationOptions<Params>;
-    paramsToProps?: (params: Params, query?: URLSearchParams) => Promise<Record<string, unknown>> | Record<string, unknown>;
-    /**
-     * Used for building back the URL if only properties are provided
-     */
-    propsToParams?: (props: Record<string, unknown>) => {
+};
+export type RouteWithParams<Props, Params> = {
+    name?: string;
+    url: string;
+    params: UrlParamsConstructors<Params>;
+    isDefault?: RouteNavigationOptions<Props, Params> & ({
+        params: Params;
+    } | {
+        properties: Props;
+    });
+    paramsToProps: (params: Params, query?: URLSearchParams) => Promise<Props> | Props;
+    propsToParams: (props: Props) => {
         params: Params;
         query?: URLSearchParams;
     };
-};
-export type RouteNavigationOptions<Params> = {
+} & RouteComponent<Props>;
+export type RouteWithoutParams<Props> = {
+    name?: string;
+    url: string;
+    isDefault?: RouteNavigationOptions<Props>;
+    defaultProperties?: (query?: URLSearchParams) => Promise<Props> | Props;
+} & RouteComponent<Props>;
+export type Route<Props = Record<string, unknown>, Params = Record<string, unknown>> = RouteWithParams<Props, Params> | RouteWithoutParams<Props>;
+export type RouteNavigationOptions<Props = Record<string, unknown>, Params = Record<string, never>> = {
     params?: Params;
-    properties?: Record<string, unknown>;
+    properties?: Props;
     query?: URLSearchParams;
     animated?: boolean;
     adjustHistory?: boolean;
     checkRoutes?: boolean;
 };
-export type RouteIdentification<Params> = {
-    name: string;
-} | {
-    url: string;
-} | {
-    route: Route<Params>;
-};
 export type NavigationOptions<T> = {
     title: string | ((this: T) => string);
     routes?: Route<any>[];
 };
 export declare function usePop(): (options?: PopOptions) => Promise<void> | undefined;
-export declare function useNavigate(): <Params extends Record<string, unknown>>(prop1: string | Route<Params>, prop2?: RouteNavigationOptions<Params>) => Promise<void>;
+export declare function useNavigate(): <Props extends Record<string, unknown>, Params extends Record<string, unknown>>(prop1: string | Route<Props, Params>, prop2?: RouteNavigationOptions<Props, Params>) => Promise<void>;
 export type DefaultRouteHandler = () => Promise<boolean>;
 /**
  * Return true when the route has been handled and other route checks should not be executed.
@@ -74,12 +71,12 @@ export type DefaultRouteHandler = () => Promise<boolean>;
 export type OnCheckRoutesHandler = () => Promise<void | boolean> | void | boolean;
 export declare function onCheckRoutes(handler: OnCheckRoutesHandler): void;
 export declare function onNotCheckRoutes(handler: OnCheckRoutesHandler): void;
-export declare function defineRoutes(routes: (Route<any>[]) | (() => Promise<boolean | (Route<any>[])>)): void;
+export declare function defineRoutes(routes: Route<any, any>[]): void;
 export declare function useCurrentHref(): Ref<string, string>;
 export declare function useCheckRoute(): <Params extends Record<string, unknown>>(prop1: string | Route<Params>, prop2?: RouteNavigationOptions<Params>) => boolean;
 export declare function normalizePushOptions(o: PushOptions | ComponentWithProperties, currentComponent: ComponentWithProperties | null, urlHelpers: ReturnType<typeof useUrl>): PushOptions;
 export declare function useManualPresent(): (present: (options: PushOptions) => Promise<void> | void, options: PushOptions | ComponentWithProperties) => void | Promise<void>;
-export declare function useShow(): (options: PushOptions | ComponentWithProperties) => Promise<void>;
+export declare function useShow(): (options: PushOptions | ComponentWithProperties, customShow?: (options: PushOptions) => Promise<void>) => Promise<void>;
 export declare function useShowDetail(): (options: PushOptions | ComponentWithProperties) => Promise<void>;
 export declare function usePresent(): (options: PushOptions | ComponentWithProperties) => Promise<void>;
 export declare function useDismiss(): (options?: PopOptions) => Promise<void>;
@@ -106,3 +103,4 @@ export declare function useUrl(): {
     matchCurrent<Params>(template: string, params?: UrlParamsConstructors<Params>): UrlMatchResult<Params> | undefined;
     overrideUrl(url: HistoryUrl, title?: string): void;
 };
+export {};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@simonbackx/vue-app-navigation",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "version": "2.18.0",
+  "version": "2.19.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -31,15 +31,15 @@
     "eslint-plugin-stamhoofd": "^2.74.0",
     "sass": "^1.32.4",
     "tslib": "^2.8.1",
-    "typescript": "^5.6.2",
+    "typescript": "^6.0.3",
     "vite": "^5.2.10",
     "vite-plugin-dts": "^3.9.0",
     "vue": "^3.5.12",
     "vue-tsc": "^3.2.6"
   },
   "peerDependencies": {
-    "vue": "^3.5.12",
-    "tslib": "^2.8.1"
+    "tslib": "^2.8.1",
+    "vue": "^3.5.12"
   },
   "dependencies": {
     "@vue/shared": "^3.5.12"