Skip to content

Commit 6b3a8e9

Browse files
fcamblorfcamblor
committed
#74 introduced trackTabbedPageNavigationEvent dev utility to help track routing navigations
1 parent 798b5f3 commit 6b3a8e9

File tree

2 files changed

+69
-2
lines changed

2 files changed

+69
-2
lines changed

‎mobile/src/state/useDevUtilities.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {Ref} from "vue";
1414
import {updateLogConfigTo} from "@/services/Logger";
1515
import router from "@/router";
1616
import {useIonRouter} from "@ionic/vue";
17+
import {RouteAction, RouteDirection} from "@ionic/vue-router/dist/types/types";
1718

1819

1920
// if(import.meta.env.DEV) {
@@ -28,6 +29,15 @@ let overridenEventDescriptorPropertiesRef: Ref<OverridableEventDescriptorPropert
2829
export function useOverridenListableEventProperties(){ return overridenListableEventPropertiesRef; }
2930
export function useOverridenEventDescriptorProperties() { return overridenEventDescriptorPropertiesRef; }
3031

32+
export type TabbedPageNavigationEvent =
33+
| { type: 'tabbed-page-custom-dispatch-event:navigation', params: { url: string, routerDirection: RouteDirection, routerAction: RouteAction } }
34+
| { type: 'tabbed-page-custom-dispatch-event:tabExitOrNavigate', params: { url: string, routerDirection: RouteDirection|undefined } }
35+
| { type: 'tabbed-page-nag-listeners:registration', params: { currentComponentInstancePath: string, startingHistoryPosition: number } }
36+
| { type: 'nav-callback:no-op', params: { reason: string } }
37+
| { type: 'tab-exit-or-navigate-callback:no-op', params: { reason: string } }
38+
| { type: 'ionRouter:navigate', params: { url: string, routerDirection: RouteDirection, routerAction: RouteAction } }
39+
| { type: 'goBackOrNavigateTo', params: { url: string, routerDirection: RouteDirection|undefined, routerGoBacks: number, startingHistoryPosition: number, historyPosition: number } }
40+
| { type: 'otherNavCallbackDelegation', params: { perComponentPathCallbacksSize: number } }
3141

3242
declare global {
3343
interface Window {
@@ -40,6 +50,8 @@ declare global {
4050
getCurrentComponentInstancePath: typeof getCurrentComponentInstancePath;
4151
_router: typeof router;
4252
_ionRouter: ReturnType<typeof useIonRouter>;
53+
_tabbedPageNavigationEvents: Array<{ type: TabbedPageNavigationEvent['type'], date: string, location: string, historyPosition: number, params: object }>;
54+
trackTabbedPageNavigationEvent(event: TabbedPageNavigationEvent): void;
4355
}
4456
}
4557

@@ -91,6 +103,17 @@ export function useDevUtilities() {
91103

92104
const ionRouter = useIonRouter();
93105
window._ionRouter = ionRouter;
106+
107+
window._tabbedPageNavigationEvents = [];
108+
window.trackTabbedPageNavigationEvent = (event) => {
109+
window._tabbedPageNavigationEvents.push({
110+
type: event.type,
111+
date: new Date().toISOString(),
112+
historyPosition: history.state.position,
113+
params: event.params,
114+
location: window.location.href,
115+
})
116+
}
94117
}
95118

96119
// }

‎mobile/src/state/useTabbedPageNav.ts‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,10 @@ const PER_COMPONENT_PATH_CALLBACKS = new Map<string, TabbedPageNavigationCallbac
7979
export function useTabbedPageNav() {
8080
return {
8181
triggerTabbedPageNavigate: function(url: string, routerDirection: RouteDirection, routerAction: RouteAction, onEventCaught?: TypedCustomEventData<typeof NavigationEvent>['onEventCaught']|undefined) {
82+
window.trackTabbedPageNavigationEvent({
83+
type: 'tabbed-page-custom-dispatch-event:navigation',
84+
params: { url, routerDirection, routerAction }
85+
})
8286
// Using standard event dispatching through ionic's $emit is pointless here, as I didn't find
8387
// how to bubble these event from <ion-router-outlet> placed into _BaseEventPages
8488
// => I'm using a crappy global event (type unsafe) hack here
@@ -88,6 +92,10 @@ export function useTabbedPageNav() {
8892
}))
8993
},
9094
triggerTabbedPageExitOrNavigate: function(url: string, routerDirection?: RouteDirection, onEventCaught?: TypedCustomEventData<typeof NavigationEvent>['onEventCaught']|undefined) {
95+
window.trackTabbedPageNavigationEvent({
96+
type: 'tabbed-page-custom-dispatch-event:tabExitOrNavigate',
97+
params: { url, routerDirection }
98+
})
9199
// Using standard event dispatching through ionic's $emit is pointless here, as I didn't find
92100
// how to bubble these event from <ion-router-outlet> placed into _BaseEventPages
93101
// => I'm using a crappy global event (type unsafe) hack here
@@ -104,12 +112,22 @@ export function useTabbedPageNav() {
104112
const ionRouter = useIonRouter();
105113
const startingHistoryPosition = history.state.position;
106114

115+
window.trackTabbedPageNavigationEvent({
116+
type: 'tabbed-page-nag-listeners:registration', params: { currentComponentInstancePath, startingHistoryPosition }
117+
});
118+
107119
const navCallback = async (event: Event) => {
108120
const perComponentPathCallbacks = PER_COMPONENT_PATH_CALLBACKS.get(currentComponentInstancePath);
109121
if(!perComponentPathCallbacks) {
122+
window.trackTabbedPageNavigationEvent({
123+
type: 'nav-callback:no-op', params: { reason: `no PER_COMPONENT_PATH_CALLBACKS found for path: ${currentComponentInstancePath}` }
124+
})
110125
return;
111126
}
112127
if(perComponentPathCallbacks[perComponentPathCallbacks.length-1].navCallback !== navCallback) {
128+
window.trackTabbedPageNavigationEvent({
129+
type: 'nav-callback:no-op', params: { reason: `last registered navCallback not matching current navCallback for path: ${currentComponentInstancePath}` }
130+
})
113131
return;
114132
}
115133

@@ -118,14 +136,21 @@ export function useTabbedPageNav() {
118136
await event.detail.onEventCaught();
119137
}
120138

139+
window.trackTabbedPageNavigationEvent({
140+
type: 'ionRouter:navigate', params: event.detail
141+
})
121142
// This navigate() call will happen inside tabbed page context
122143
ionRouter.navigate(event.detail.url, event.detail.routerDirection, event.detail.routerAction);
123144

124145
perComponentPathCallbacks.pop();
125146
if(perComponentPathCallbacks.length) {
147+
window.trackTabbedPageNavigationEvent({
148+
type: 'otherNavCallbackDelegation', params: { perComponentPathCallbacksSize: perComponentPathCallbacks.length }
149+
})
150+
const nextCallback = perComponentPathCallbacks[perComponentPathCallbacks.length-1];
126151
await new Promise((resolve) => {
127152
setTimeout(async () => {
128-
await perComponentPathCallbacks[perComponentPathCallbacks.length-1].navCallback(event);
153+
await nextCallback.navCallback(event);
129154
resolve(null);
130155
}, 0);
131156
});
@@ -139,20 +164,39 @@ export function useTabbedPageNav() {
139164
const tabExitOrNavigateCallback = async (event: Event) => {
140165
const perComponentPathCallbacks = PER_COMPONENT_PATH_CALLBACKS.get(currentComponentInstancePath);
141166
if(!perComponentPathCallbacks) {
167+
window.trackTabbedPageNavigationEvent({
168+
type: "tab-exit-or-navigate-callback:no-op", params: { reason: `no PER_COMPONENT_PATH_CALLBACKS found for path: ${currentComponentInstancePath}` }
169+
})
142170
return;
143171
}
144172
if(perComponentPathCallbacks[perComponentPathCallbacks.length-1].tabExitOrNavigateCallback !== tabExitOrNavigateCallback) {
173+
window.trackTabbedPageNavigationEvent({
174+
type: 'tab-exit-or-navigate-callback:no-op', params: { reason: `last registered tabExitOrNavigateCallback not matching current tabExitOrNavigateCallback for path: ${currentComponentInstancePath}` }
175+
})
145176
return;
146177
}
147178

148179
if(isTabExitOrNavigateEvent(event)) {
149180
const routerGoBacks = startingHistoryPosition - history.state.position;
181+
182+
window.trackTabbedPageNavigationEvent({
183+
type: 'goBackOrNavigateTo', params: {
184+
url: event.detail.url, routerGoBacks, startingHistoryPosition,
185+
historyPosition: history.state.position, routerDirection: event.detail.routerDirection
186+
}
187+
})
188+
150189
await goBackOrNavigateTo(ionRouter, event.detail.url, routerGoBacks, event.detail.routerDirection, event.detail.onEventCaught);
151190

152191
perComponentPathCallbacks.pop();
153192
if(perComponentPathCallbacks.length) {
193+
window.trackTabbedPageNavigationEvent({
194+
type: 'otherNavCallbackDelegation', params: { perComponentPathCallbacksSize: perComponentPathCallbacks.length }
195+
})
196+
197+
const nextCallback = perComponentPathCallbacks[perComponentPathCallbacks.length-1];
154198
await new Promise(async (resolve) => {
155-
await perComponentPathCallbacks[perComponentPathCallbacks.length-1].tabExitOrNavigateCallback(event);
199+
await nextCallback.tabExitOrNavigateCallback(event);
156200
setTimeout(() => resolve(null), 0);
157201
});
158202
} else {

0 commit comments

Comments
 (0)