@react-navigation/devtools 8.0.0-alpha.1 → 8.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/module/useDevToolsBase.js +31 -4
- package/lib/module/useDevToolsBase.js.map +1 -1
- package/lib/module/useLogger.js +31 -1
- package/lib/module/useLogger.js.map +1 -1
- package/lib/typescript/src/useDevToolsBase.d.ts +15 -1
- package/lib/typescript/src/useDevToolsBase.d.ts.map +1 -1
- package/lib/typescript/src/useLogger.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/useDevToolsBase.tsx +61 -7
- package/src/useLogger.tsx +59 -2
|
@@ -59,7 +59,7 @@ export function useDevToolsBase(ref, callback) {
|
|
|
59
59
|
// Ignore any errors from the last promise
|
|
60
60
|
}).then(async () => {
|
|
61
61
|
// eslint-disable-next-line promise/always-return
|
|
62
|
-
if (data.stack) {
|
|
62
|
+
if ('stack' in data && data.stack) {
|
|
63
63
|
let stack;
|
|
64
64
|
try {
|
|
65
65
|
stack = await symbolicate(data.stack);
|
|
@@ -76,9 +76,13 @@ export function useDevToolsBase(ref, callback) {
|
|
|
76
76
|
});
|
|
77
77
|
}, []);
|
|
78
78
|
React.useEffect(() => {
|
|
79
|
+
let cleaned = false;
|
|
79
80
|
let timer;
|
|
81
|
+
let navigation;
|
|
80
82
|
let unsubscribeAction;
|
|
81
83
|
let unsubscribeState;
|
|
84
|
+
let unsubscribeEvent;
|
|
85
|
+
let unsubscribeDeepLink;
|
|
82
86
|
const initialize = async () => {
|
|
83
87
|
if (!ref.current) {
|
|
84
88
|
// If the navigation object isn't ready yet, wait for it
|
|
@@ -89,7 +93,7 @@ export function useDevToolsBase(ref, callback) {
|
|
|
89
93
|
clearTimeout(timer);
|
|
90
94
|
const state = ref.current.getRootState();
|
|
91
95
|
lastStateRef.current = state;
|
|
92
|
-
|
|
96
|
+
send({
|
|
93
97
|
type: 'init',
|
|
94
98
|
state
|
|
95
99
|
});
|
|
@@ -97,7 +101,13 @@ export function useDevToolsBase(ref, callback) {
|
|
|
97
101
|
}, 100);
|
|
98
102
|
});
|
|
99
103
|
}
|
|
100
|
-
|
|
104
|
+
if (cleaned) {
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
if (!ref.current) {
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
navigation = ref.current;
|
|
101
111
|
unsubscribeAction = navigation.addListener('__unsafe_action__', e => {
|
|
102
112
|
const action = e.data.action;
|
|
103
113
|
if (e.data.noop) {
|
|
@@ -112,13 +122,19 @@ export function useDevToolsBase(ref, callback) {
|
|
|
112
122
|
lastActionRef.current = e.data;
|
|
113
123
|
}
|
|
114
124
|
});
|
|
125
|
+
unsubscribeEvent = navigation.addListener('__unsafe_event__', e => {
|
|
126
|
+
send({
|
|
127
|
+
type: 'event',
|
|
128
|
+
event: e.data
|
|
129
|
+
});
|
|
130
|
+
});
|
|
115
131
|
unsubscribeState = navigation.addListener('state', e => {
|
|
116
132
|
// Don't show the action in dev tools if the state is what we sent to reset earlier
|
|
117
133
|
if (lastResetRef.current && deepEqual(lastResetRef.current, e.data.state)) {
|
|
118
134
|
lastStateRef.current = undefined;
|
|
119
135
|
return;
|
|
120
136
|
}
|
|
121
|
-
const state = navigation
|
|
137
|
+
const state = navigation?.getRootState();
|
|
122
138
|
const lastState = lastStateRef.current;
|
|
123
139
|
const lastChange = lastActionRef.current;
|
|
124
140
|
lastActionRef.current = undefined;
|
|
@@ -137,11 +153,22 @@ export function useDevToolsBase(ref, callback) {
|
|
|
137
153
|
stack: lastChange?.stack
|
|
138
154
|
});
|
|
139
155
|
});
|
|
156
|
+
|
|
157
|
+
// This is set in NavigationContainer
|
|
158
|
+
// Using @ts-expect-error results in error in IDE, so using `any` for now
|
|
159
|
+
const listeners = globalThis.REACT_NAVIGATION_DEVTOOLS?.get(navigation)?.listeners;
|
|
160
|
+
listeners?.add(send);
|
|
161
|
+
unsubscribeDeepLink = () => {
|
|
162
|
+
listeners?.delete(send);
|
|
163
|
+
};
|
|
140
164
|
};
|
|
141
165
|
initialize();
|
|
142
166
|
return () => {
|
|
167
|
+
cleaned = true;
|
|
143
168
|
unsubscribeAction?.();
|
|
169
|
+
unsubscribeEvent?.();
|
|
144
170
|
unsubscribeState?.();
|
|
171
|
+
unsubscribeDeepLink?.();
|
|
145
172
|
clearTimeout(timer);
|
|
146
173
|
};
|
|
147
174
|
}, [ref, send]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["deepEqual","React","parseErrorStack","useDevToolsBase","ref","callback","lastStateRef","useRef","undefined","lastActionRef","callbackRef","lastResetRef","useEffect","current","symbolicate","stack","frames","slice","filter","frame","file","urlMatch","match","url","URL","result","fetch","protocol","host","method","body","JSON","stringify","then","res","json","it","collapse","map","methodName","lineNumber","column","join","err","lines","split","line","trim","startsWith","includes","push","pendingPromiseRef","Promise","resolve","send","useCallback","data","catch","timer","unsubscribeAction","unsubscribeState","initialize","setInterval","clearTimeout","state","getRootState","type","
|
|
1
|
+
{"version":3,"names":["deepEqual","React","parseErrorStack","useDevToolsBase","ref","callback","lastStateRef","useRef","undefined","lastActionRef","callbackRef","lastResetRef","useEffect","current","symbolicate","stack","frames","slice","filter","frame","file","urlMatch","match","url","URL","result","fetch","protocol","host","method","body","JSON","stringify","then","res","json","it","collapse","map","methodName","lineNumber","column","join","err","lines","split","line","trim","startsWith","includes","push","pendingPromiseRef","Promise","resolve","send","useCallback","data","catch","cleaned","timer","navigation","unsubscribeAction","unsubscribeState","unsubscribeEvent","unsubscribeDeepLink","initialize","setInterval","clearTimeout","state","getRootState","type","addListener","e","action","noop","event","lastState","lastChange","listeners","globalThis","REACT_NAVIGATION_DEVTOOLS","get","add","delete","resetRoot"],"sourceRoot":"../../src","sources":["useDevToolsBase.tsx"],"mappings":"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","ignoreList":[]}
|
package/lib/module/useLogger.js
CHANGED
|
@@ -1,13 +1,43 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { useDevToolsBase } from "./useDevToolsBase.js";
|
|
4
|
+
function findRouteNameByKey(state, key) {
|
|
5
|
+
for (const route of state.routes) {
|
|
6
|
+
if (route.key === key) {
|
|
7
|
+
return route.name;
|
|
8
|
+
}
|
|
9
|
+
if (route.state) {
|
|
10
|
+
const name = findRouteNameByKey(route.state, key);
|
|
11
|
+
if (name) {
|
|
12
|
+
return name;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
return undefined;
|
|
17
|
+
}
|
|
4
18
|
export function useLogger(ref) {
|
|
5
19
|
const actionColor = '#C2185B';
|
|
6
20
|
const keyColor = '#43A047';
|
|
7
21
|
const valueColor = '#1E88E5';
|
|
8
22
|
useDevToolsBase(ref, result => {
|
|
9
23
|
const log = [[`${result.type} `, 'color: gray; font-weight: lighter']];
|
|
10
|
-
if (result.type === '
|
|
24
|
+
if (result.type === 'deeplink') {
|
|
25
|
+
log.push([`${result.url} `, `color: ${valueColor}; font-weight: bold`]);
|
|
26
|
+
} else if (result.type === 'event') {
|
|
27
|
+
// Ignore high-frequency events to reduce noise in the logs
|
|
28
|
+
const IGNORED_EVENTS = ['focus', 'blur', 'state', 'beforeRemove', 'transitionStart', 'transitionEnd'];
|
|
29
|
+
if (IGNORED_EVENTS.includes(result.event.type)) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
log.push([`${result.event.type} `, `color: ${actionColor}; font-weight: bold`]);
|
|
33
|
+
if (result.event.target) {
|
|
34
|
+
const state = ref.current?.getRootState();
|
|
35
|
+
const name = state ? findRouteNameByKey(state, result.event.target) : undefined;
|
|
36
|
+
if (name) {
|
|
37
|
+
log.push([`(${name}) `, `color: ${valueColor}; font-weight: normal`]);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
} else if (result.type === 'action') {
|
|
11
41
|
log.push([`${result.action.type} `, `color: ${actionColor}; font-weight: bold`]);
|
|
12
42
|
const payload = result.action.payload;
|
|
13
43
|
if (payload && Object.keys(payload).length > 0) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useDevToolsBase","useLogger","ref","actionColor","keyColor","valueColor","result","log","type","push","action","payload","Object","keys","length","entries","map","
|
|
1
|
+
{"version":3,"names":["useDevToolsBase","findRouteNameByKey","state","key","route","routes","name","undefined","useLogger","ref","actionColor","keyColor","valueColor","result","log","type","push","url","IGNORED_EVENTS","includes","event","target","current","getRootState","action","payload","Object","keys","length","entries","map","value","i","self","pair","JSON","stringify","flat","params","reduce","acc","text","style","console","groupCollapsed","forEach","split","line","trim","join","groupEnd"],"sourceRoot":"../../src","sources":["useLogger.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -10,7 +10,21 @@ type ActionData = {
|
|
|
10
10
|
state: NavigationState | undefined;
|
|
11
11
|
stack: string | undefined;
|
|
12
12
|
};
|
|
13
|
-
|
|
13
|
+
type EventData = {
|
|
14
|
+
type: 'event';
|
|
15
|
+
event: {
|
|
16
|
+
type: string;
|
|
17
|
+
defaultPrevented: boolean | undefined;
|
|
18
|
+
target: string | undefined;
|
|
19
|
+
data: unknown;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
type DeepLinkData = {
|
|
23
|
+
type: 'deeplink';
|
|
24
|
+
url: string;
|
|
25
|
+
};
|
|
26
|
+
type ResultData = InitData | ActionData | EventData | DeepLinkData;
|
|
27
|
+
export declare function useDevToolsBase(ref: React.RefObject<NavigationContainerRef<any> | null>, callback: (result: ResultData) => void): {
|
|
14
28
|
resetRoot: (state: NavigationState) => void;
|
|
15
29
|
};
|
|
16
30
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDevToolsBase.d.ts","sourceRoot":"","sources":["../../../src/useDevToolsBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EAChB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;CACpC,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;IACnC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,eAAe,CAC7B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,sBAAsB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EACxD,QAAQ,EAAE,CAAC,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"useDevToolsBase.d.ts","sourceRoot":"","sources":["../../../src/useDevToolsBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EAChB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;CACpC,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;IACnC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;QACtC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;QAC3B,IAAI,EAAE,OAAO,CAAC;KACf,CAAC;CACH,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,YAAY,CAAC;AAEnE,wBAAgB,eAAe,CAC7B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,sBAAsB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EACxD,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI;uBAoN5B,eAAe;EAU1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLogger.d.ts","sourceRoot":"","sources":["../../../src/useLogger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"useLogger.d.ts","sourceRoot":"","sources":["../../../src/useLogger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EAGvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyB/B,wBAAgB,SAAS,CACvB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,sBAAsB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,QA8GzD"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-navigation/devtools",
|
|
3
3
|
"description": "Developer tools for React Navigation",
|
|
4
|
-
"version": "8.0.0-alpha.
|
|
4
|
+
"version": "8.0.0-alpha.3",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
7
7
|
"react-native",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"stacktrace-parser": "^0.1.11"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@react-navigation/core": "^8.0.0-alpha.
|
|
51
|
+
"@react-navigation/core": "^8.0.0-alpha.3",
|
|
52
52
|
"@types/react": "~19.1.10",
|
|
53
53
|
"del-cli": "^6.0.0",
|
|
54
54
|
"react": "19.1.0",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
]
|
|
77
77
|
]
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "a338af06f8efcbe95e8a0b1aa62cc6bf3797e2ab"
|
|
80
80
|
}
|
package/src/useDevToolsBase.tsx
CHANGED
|
@@ -28,9 +28,26 @@ type ActionData = {
|
|
|
28
28
|
stack: string | undefined;
|
|
29
29
|
};
|
|
30
30
|
|
|
31
|
+
type EventData = {
|
|
32
|
+
type: 'event';
|
|
33
|
+
event: {
|
|
34
|
+
type: string;
|
|
35
|
+
defaultPrevented: boolean | undefined;
|
|
36
|
+
target: string | undefined;
|
|
37
|
+
data: unknown;
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
type DeepLinkData = {
|
|
42
|
+
type: 'deeplink';
|
|
43
|
+
url: string;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
type ResultData = InitData | ActionData | EventData | DeepLinkData;
|
|
47
|
+
|
|
31
48
|
export function useDevToolsBase(
|
|
32
49
|
ref: React.RefObject<NavigationContainerRef<any> | null>,
|
|
33
|
-
callback: (result:
|
|
50
|
+
callback: (result: ResultData) => void
|
|
34
51
|
) {
|
|
35
52
|
const lastStateRef = React.useRef<NavigationState | undefined>(undefined);
|
|
36
53
|
const lastActionRef = React.useRef<
|
|
@@ -99,7 +116,7 @@ export function useDevToolsBase(
|
|
|
99
116
|
|
|
100
117
|
const pendingPromiseRef = React.useRef<Promise<void>>(Promise.resolve());
|
|
101
118
|
|
|
102
|
-
const send = React.useCallback((data:
|
|
119
|
+
const send = React.useCallback((data: ResultData) => {
|
|
103
120
|
// We need to make sure that our callbacks executed in the same order
|
|
104
121
|
// So we add check if the last promise is settled before sending the next one
|
|
105
122
|
pendingPromiseRef.current = pendingPromiseRef.current
|
|
@@ -108,7 +125,7 @@ export function useDevToolsBase(
|
|
|
108
125
|
})
|
|
109
126
|
.then(async () => {
|
|
110
127
|
// eslint-disable-next-line promise/always-return
|
|
111
|
-
if (data.stack) {
|
|
128
|
+
if ('stack' in data && data.stack) {
|
|
112
129
|
let stack: string | undefined;
|
|
113
130
|
|
|
114
131
|
try {
|
|
@@ -125,9 +142,14 @@ export function useDevToolsBase(
|
|
|
125
142
|
}, []);
|
|
126
143
|
|
|
127
144
|
React.useEffect(() => {
|
|
128
|
-
let
|
|
145
|
+
let cleaned = false;
|
|
146
|
+
|
|
147
|
+
let timer: NodeJS.Timeout;
|
|
148
|
+
let navigation: NavigationContainerRef<any> | undefined;
|
|
129
149
|
let unsubscribeAction: (() => void) | undefined;
|
|
130
150
|
let unsubscribeState: (() => void) | undefined;
|
|
151
|
+
let unsubscribeEvent: (() => void) | undefined;
|
|
152
|
+
let unsubscribeDeepLink: (() => void) | undefined;
|
|
131
153
|
|
|
132
154
|
const initialize = async () => {
|
|
133
155
|
if (!ref.current) {
|
|
@@ -137,16 +159,25 @@ export function useDevToolsBase(
|
|
|
137
159
|
if (ref.current) {
|
|
138
160
|
resolve();
|
|
139
161
|
clearTimeout(timer);
|
|
162
|
+
|
|
140
163
|
const state = ref.current.getRootState();
|
|
141
164
|
|
|
142
165
|
lastStateRef.current = state;
|
|
143
|
-
|
|
166
|
+
send({ type: 'init', state });
|
|
144
167
|
}
|
|
145
168
|
}, 100);
|
|
146
169
|
});
|
|
147
170
|
}
|
|
148
171
|
|
|
149
|
-
|
|
172
|
+
if (cleaned) {
|
|
173
|
+
return;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
if (!ref.current) {
|
|
177
|
+
return;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
navigation = ref.current;
|
|
150
181
|
|
|
151
182
|
unsubscribeAction = navigation.addListener('__unsafe_action__', (e) => {
|
|
152
183
|
const action = e.data.action;
|
|
@@ -164,6 +195,13 @@ export function useDevToolsBase(
|
|
|
164
195
|
}
|
|
165
196
|
});
|
|
166
197
|
|
|
198
|
+
unsubscribeEvent = navigation.addListener('__unsafe_event__', (e) => {
|
|
199
|
+
send({
|
|
200
|
+
type: 'event',
|
|
201
|
+
event: e.data,
|
|
202
|
+
});
|
|
203
|
+
});
|
|
204
|
+
|
|
167
205
|
unsubscribeState = navigation.addListener('state', (e) => {
|
|
168
206
|
// Don't show the action in dev tools if the state is what we sent to reset earlier
|
|
169
207
|
if (
|
|
@@ -174,7 +212,7 @@ export function useDevToolsBase(
|
|
|
174
212
|
return;
|
|
175
213
|
}
|
|
176
214
|
|
|
177
|
-
const state = navigation
|
|
215
|
+
const state = navigation?.getRootState();
|
|
178
216
|
const lastState = lastStateRef.current;
|
|
179
217
|
const lastChange = lastActionRef.current;
|
|
180
218
|
|
|
@@ -193,13 +231,29 @@ export function useDevToolsBase(
|
|
|
193
231
|
stack: lastChange?.stack,
|
|
194
232
|
});
|
|
195
233
|
});
|
|
234
|
+
|
|
235
|
+
// This is set in NavigationContainer
|
|
236
|
+
// Using @ts-expect-error results in error in IDE, so using `any` for now
|
|
237
|
+
const listeners = (globalThis as any).REACT_NAVIGATION_DEVTOOLS?.get(
|
|
238
|
+
navigation
|
|
239
|
+
)?.listeners;
|
|
240
|
+
|
|
241
|
+
listeners?.add(send);
|
|
242
|
+
|
|
243
|
+
unsubscribeDeepLink = () => {
|
|
244
|
+
listeners?.delete(send);
|
|
245
|
+
};
|
|
196
246
|
};
|
|
197
247
|
|
|
198
248
|
initialize();
|
|
199
249
|
|
|
200
250
|
return () => {
|
|
251
|
+
cleaned = true;
|
|
252
|
+
|
|
201
253
|
unsubscribeAction?.();
|
|
254
|
+
unsubscribeEvent?.();
|
|
202
255
|
unsubscribeState?.();
|
|
256
|
+
unsubscribeDeepLink?.();
|
|
203
257
|
clearTimeout(timer);
|
|
204
258
|
};
|
|
205
259
|
}, [ref, send]);
|
package/src/useLogger.tsx
CHANGED
|
@@ -1,8 +1,33 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type {
|
|
2
|
+
NavigationContainerRef,
|
|
3
|
+
NavigationState,
|
|
4
|
+
PartialState,
|
|
5
|
+
} from '@react-navigation/core';
|
|
2
6
|
import * as React from 'react';
|
|
3
7
|
|
|
4
8
|
import { useDevToolsBase } from './useDevToolsBase';
|
|
5
9
|
|
|
10
|
+
function findRouteNameByKey(
|
|
11
|
+
state: NavigationState | PartialState<NavigationState>,
|
|
12
|
+
key: string
|
|
13
|
+
): string | undefined {
|
|
14
|
+
for (const route of state.routes) {
|
|
15
|
+
if (route.key === key) {
|
|
16
|
+
return route.name;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
if (route.state) {
|
|
20
|
+
const name = findRouteNameByKey(route.state, key);
|
|
21
|
+
|
|
22
|
+
if (name) {
|
|
23
|
+
return name;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return undefined;
|
|
29
|
+
}
|
|
30
|
+
|
|
6
31
|
export function useLogger(
|
|
7
32
|
ref: React.RefObject<NavigationContainerRef<any> | null>
|
|
8
33
|
) {
|
|
@@ -13,7 +38,39 @@ export function useLogger(
|
|
|
13
38
|
useDevToolsBase(ref, (result) => {
|
|
14
39
|
const log = [[`${result.type} `, 'color: gray; font-weight: lighter']];
|
|
15
40
|
|
|
16
|
-
if (result.type === '
|
|
41
|
+
if (result.type === 'deeplink') {
|
|
42
|
+
log.push([`${result.url} `, `color: ${valueColor}; font-weight: bold`]);
|
|
43
|
+
} else if (result.type === 'event') {
|
|
44
|
+
// Ignore high-frequency events to reduce noise in the logs
|
|
45
|
+
const IGNORED_EVENTS = [
|
|
46
|
+
'focus',
|
|
47
|
+
'blur',
|
|
48
|
+
'state',
|
|
49
|
+
'beforeRemove',
|
|
50
|
+
'transitionStart',
|
|
51
|
+
'transitionEnd',
|
|
52
|
+
];
|
|
53
|
+
|
|
54
|
+
if (IGNORED_EVENTS.includes(result.event.type)) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
log.push([
|
|
59
|
+
`${result.event.type} `,
|
|
60
|
+
`color: ${actionColor}; font-weight: bold`,
|
|
61
|
+
]);
|
|
62
|
+
|
|
63
|
+
if (result.event.target) {
|
|
64
|
+
const state = ref.current?.getRootState();
|
|
65
|
+
const name = state
|
|
66
|
+
? findRouteNameByKey(state, result.event.target)
|
|
67
|
+
: undefined;
|
|
68
|
+
|
|
69
|
+
if (name) {
|
|
70
|
+
log.push([`(${name}) `, `color: ${valueColor}; font-weight: normal`]);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
} else if (result.type === 'action') {
|
|
17
74
|
log.push([
|
|
18
75
|
`${result.action.type} `,
|
|
19
76
|
`color: ${actionColor}; font-weight: bold`,
|