@react-navigation/devtools 8.0.0-alpha.2 → 8.0.0-alpha.4
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 +17 -2
- 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 +63 -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 === 'link') {
|
|
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":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { NavigationAction, NavigationContainerRef, NavigationState } from '@react-navigation/core';
|
|
1
|
+
import type { NavigationAction, NavigationContainerRef, NavigationState, PartialState } from '@react-navigation/core';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
type InitData = {
|
|
4
4
|
type: 'init';
|
|
@@ -10,7 +10,22 @@ 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: 'link';
|
|
24
|
+
url: string;
|
|
25
|
+
state: PartialState<NavigationState> | undefined;
|
|
26
|
+
};
|
|
27
|
+
type ResultData = InitData | ActionData | EventData | DeepLinkData;
|
|
28
|
+
export declare function useDevToolsBase(ref: React.RefObject<NavigationContainerRef<any> | null>, callback: (result: ResultData) => void): {
|
|
14
29
|
resetRoot: (state: NavigationState) => void;
|
|
15
30
|
};
|
|
16
31
|
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,
|
|
1
|
+
{"version":3,"file":"useDevToolsBase.d.ts","sourceRoot":"","sources":["../../../src/useDevToolsBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,YAAY,EACb,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,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,YAAY,CAAC,eAAe,CAAC,GAAG,SAAS,CAAC;CAClD,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.4",
|
|
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": "7ea4baf12a35abe5a9de14f998d113c919f604a1"
|
|
80
80
|
}
|
package/src/useDevToolsBase.tsx
CHANGED
|
@@ -2,6 +2,7 @@ import type {
|
|
|
2
2
|
NavigationAction,
|
|
3
3
|
NavigationContainerRef,
|
|
4
4
|
NavigationState,
|
|
5
|
+
PartialState,
|
|
5
6
|
} from '@react-navigation/core';
|
|
6
7
|
import deepEqual from 'fast-deep-equal';
|
|
7
8
|
import * as React from 'react';
|
|
@@ -28,9 +29,27 @@ type ActionData = {
|
|
|
28
29
|
stack: string | undefined;
|
|
29
30
|
};
|
|
30
31
|
|
|
32
|
+
type EventData = {
|
|
33
|
+
type: 'event';
|
|
34
|
+
event: {
|
|
35
|
+
type: string;
|
|
36
|
+
defaultPrevented: boolean | undefined;
|
|
37
|
+
target: string | undefined;
|
|
38
|
+
data: unknown;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
type DeepLinkData = {
|
|
43
|
+
type: 'link';
|
|
44
|
+
url: string;
|
|
45
|
+
state: PartialState<NavigationState> | undefined;
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
type ResultData = InitData | ActionData | EventData | DeepLinkData;
|
|
49
|
+
|
|
31
50
|
export function useDevToolsBase(
|
|
32
51
|
ref: React.RefObject<NavigationContainerRef<any> | null>,
|
|
33
|
-
callback: (result:
|
|
52
|
+
callback: (result: ResultData) => void
|
|
34
53
|
) {
|
|
35
54
|
const lastStateRef = React.useRef<NavigationState | undefined>(undefined);
|
|
36
55
|
const lastActionRef = React.useRef<
|
|
@@ -99,7 +118,7 @@ export function useDevToolsBase(
|
|
|
99
118
|
|
|
100
119
|
const pendingPromiseRef = React.useRef<Promise<void>>(Promise.resolve());
|
|
101
120
|
|
|
102
|
-
const send = React.useCallback((data:
|
|
121
|
+
const send = React.useCallback((data: ResultData) => {
|
|
103
122
|
// We need to make sure that our callbacks executed in the same order
|
|
104
123
|
// So we add check if the last promise is settled before sending the next one
|
|
105
124
|
pendingPromiseRef.current = pendingPromiseRef.current
|
|
@@ -108,7 +127,7 @@ export function useDevToolsBase(
|
|
|
108
127
|
})
|
|
109
128
|
.then(async () => {
|
|
110
129
|
// eslint-disable-next-line promise/always-return
|
|
111
|
-
if (data.stack) {
|
|
130
|
+
if ('stack' in data && data.stack) {
|
|
112
131
|
let stack: string | undefined;
|
|
113
132
|
|
|
114
133
|
try {
|
|
@@ -125,9 +144,14 @@ export function useDevToolsBase(
|
|
|
125
144
|
}, []);
|
|
126
145
|
|
|
127
146
|
React.useEffect(() => {
|
|
128
|
-
let
|
|
147
|
+
let cleaned = false;
|
|
148
|
+
|
|
149
|
+
let timer: NodeJS.Timeout;
|
|
150
|
+
let navigation: NavigationContainerRef<any> | undefined;
|
|
129
151
|
let unsubscribeAction: (() => void) | undefined;
|
|
130
152
|
let unsubscribeState: (() => void) | undefined;
|
|
153
|
+
let unsubscribeEvent: (() => void) | undefined;
|
|
154
|
+
let unsubscribeDeepLink: (() => void) | undefined;
|
|
131
155
|
|
|
132
156
|
const initialize = async () => {
|
|
133
157
|
if (!ref.current) {
|
|
@@ -137,16 +161,25 @@ export function useDevToolsBase(
|
|
|
137
161
|
if (ref.current) {
|
|
138
162
|
resolve();
|
|
139
163
|
clearTimeout(timer);
|
|
164
|
+
|
|
140
165
|
const state = ref.current.getRootState();
|
|
141
166
|
|
|
142
167
|
lastStateRef.current = state;
|
|
143
|
-
|
|
168
|
+
send({ type: 'init', state });
|
|
144
169
|
}
|
|
145
170
|
}, 100);
|
|
146
171
|
});
|
|
147
172
|
}
|
|
148
173
|
|
|
149
|
-
|
|
174
|
+
if (cleaned) {
|
|
175
|
+
return;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
if (!ref.current) {
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
navigation = ref.current;
|
|
150
183
|
|
|
151
184
|
unsubscribeAction = navigation.addListener('__unsafe_action__', (e) => {
|
|
152
185
|
const action = e.data.action;
|
|
@@ -164,6 +197,13 @@ export function useDevToolsBase(
|
|
|
164
197
|
}
|
|
165
198
|
});
|
|
166
199
|
|
|
200
|
+
unsubscribeEvent = navigation.addListener('__unsafe_event__', (e) => {
|
|
201
|
+
send({
|
|
202
|
+
type: 'event',
|
|
203
|
+
event: e.data,
|
|
204
|
+
});
|
|
205
|
+
});
|
|
206
|
+
|
|
167
207
|
unsubscribeState = navigation.addListener('state', (e) => {
|
|
168
208
|
// Don't show the action in dev tools if the state is what we sent to reset earlier
|
|
169
209
|
if (
|
|
@@ -174,7 +214,7 @@ export function useDevToolsBase(
|
|
|
174
214
|
return;
|
|
175
215
|
}
|
|
176
216
|
|
|
177
|
-
const state = navigation
|
|
217
|
+
const state = navigation?.getRootState();
|
|
178
218
|
const lastState = lastStateRef.current;
|
|
179
219
|
const lastChange = lastActionRef.current;
|
|
180
220
|
|
|
@@ -193,13 +233,29 @@ export function useDevToolsBase(
|
|
|
193
233
|
stack: lastChange?.stack,
|
|
194
234
|
});
|
|
195
235
|
});
|
|
236
|
+
|
|
237
|
+
// This is set in NavigationContainer
|
|
238
|
+
// Using @ts-expect-error results in error in IDE, so using `any` for now
|
|
239
|
+
const listeners = (globalThis as any).REACT_NAVIGATION_DEVTOOLS?.get(
|
|
240
|
+
navigation
|
|
241
|
+
)?.listeners;
|
|
242
|
+
|
|
243
|
+
listeners?.add(send);
|
|
244
|
+
|
|
245
|
+
unsubscribeDeepLink = () => {
|
|
246
|
+
listeners?.delete(send);
|
|
247
|
+
};
|
|
196
248
|
};
|
|
197
249
|
|
|
198
250
|
initialize();
|
|
199
251
|
|
|
200
252
|
return () => {
|
|
253
|
+
cleaned = true;
|
|
254
|
+
|
|
201
255
|
unsubscribeAction?.();
|
|
256
|
+
unsubscribeEvent?.();
|
|
202
257
|
unsubscribeState?.();
|
|
258
|
+
unsubscribeDeepLink?.();
|
|
203
259
|
clearTimeout(timer);
|
|
204
260
|
};
|
|
205
261
|
}, [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 === 'link') {
|
|
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`,
|