1
1
//retrieve global hook and save in reactdevglobahook variable, used to interact w/react devtools
2
- console . log ( 'INJECT.TS - React Dev Tools: ' , window . __REACT_DEVTOOLS_GLOBAL_HOOK__ ) ;
2
+ // console.log(
3
+ // 'INJECT.TS - React Dev Tools: ',
4
+ // window.__REACT_DEVTOOLS_GLOBAL_HOOK__
5
+ // );
3
6
4
7
// Extend Window interface for TypeScript to recognize custom properties
5
8
// Requires dummy export so that typescript treats this as a module
@@ -27,18 +30,18 @@ const getReactTree = () => {
27
30
// console.log("REACT DEVTOOLS NOT DETECTED");
28
31
// window.postMessage({ type: "REACT_DEVTOOLS_NOT_DETECTED"});
29
32
} else {
30
- console . log ( 'React Dev Tools Detected' ) ;
33
+ // console.log('React Dev Tools Detected');
31
34
try {
32
35
const reactDevGlobalHook = window . __REACT_DEVTOOLS_GLOBAL_HOOK__ ;
33
36
// store the parsed fiber tree info
34
37
// each element will represent one re-render that has occurred
35
- let eventList :[ ] = [ ] ;
36
-
38
+ let eventList : [ ] = [ ] ;
39
+
37
40
//recursively parse fiber tree, creates a structured object
38
41
type ParseTreeType = ( reactFiberTree : any ) => any ;
39
- const parseTree :ParseTreeType = ( reactFiberTree : any ) => {
42
+ const parseTree : ParseTreeType = ( reactFiberTree : any ) => {
40
43
if ( reactFiberTree === null ) return null ;
41
- else if ( typeof reactFiberTree . elementType === " function" ) {
44
+ else if ( typeof reactFiberTree . elementType === ' function' ) {
42
45
// console.log("In the else if block", reactFiberTree.elementType.name);
43
46
const elemObj = {
44
47
name : reactFiberTree . elementType . name ,
@@ -51,30 +54,30 @@ const getReactTree = () => {
51
54
} else {
52
55
// console.log("In the else block", reactFiberTree.elementType);
53
56
return {
54
- name : " NFC" ,
57
+ name : ' NFC' ,
55
58
actualDuration : reactFiberTree . actualDuration ,
56
59
selfBaseDuration : reactFiberTree . selfBaseDuration ,
57
60
child : parseTree ( reactFiberTree . child ) ,
58
61
sibling : parseTree ( reactFiberTree . sibling ) ,
59
62
} ;
60
63
}
61
64
} ;
62
-
65
+
63
66
//retrieve children for given node
64
- type GetChildrenType = ( tree : TreeNode | null | undefined ) => TreeNode [ ] ;
65
- const getChildren :GetChildrenType = ( tree ) => {
66
- const children :any [ ] = [ ] ;
67
+ type GetChildrenType = ( tree : TreeNode | null | undefined ) => TreeNode [ ] ;
68
+ const getChildren : GetChildrenType = tree => {
69
+ const children : any [ ] = [ ] ;
67
70
if ( ! tree ) return children ;
68
71
while ( tree . sibling ) {
69
72
children . push ( tree . sibling ) ;
70
73
tree = tree . sibling ;
71
74
}
72
75
return children ;
73
76
} ;
74
-
77
+
75
78
//create tree structure from parsed fiber tree
76
79
type ParseTreeInTreeStructureType = ( tree : TreeNode | null ) => any ;
77
- const parseTreeInTreeStructure :ParseTreeInTreeStructureType = ( tree ) => {
80
+ const parseTreeInTreeStructure : ParseTreeInTreeStructureType = tree => {
78
81
if ( ! tree ) return ;
79
82
let obj ;
80
83
// console.log("parsetree", tree);
@@ -86,8 +89,8 @@ const getReactTree = () => {
86
89
name : tree . name ,
87
90
actualDuration : tree . actualDuration ,
88
91
selfBaseDuration : tree . selfBaseDuration ,
89
- children : [ tree . child , ...getChildren ( tree . child ) ] . map ( ( elem : TreeNode ) =>
90
- parseTreeInTreeStructure ( elem )
92
+ children : [ tree . child , ...getChildren ( tree . child ) ] . map (
93
+ ( elem : TreeNode ) => parseTreeInTreeStructure ( elem )
91
94
) ,
92
95
} ;
93
96
} else {
@@ -103,14 +106,14 @@ const getReactTree = () => {
103
106
return obj ;
104
107
}
105
108
} ;
106
-
109
+
107
110
//remove nodes w/NFC(non functional component) from child array
108
- const removeNFCsFromChildArray = ( tree :any ) => {
111
+ const removeNFCsFromChildArray = ( tree : any ) => {
109
112
if ( tree . children === null ) return null ;
110
- let parsedChildArray :any [ ] = [ ] ;
113
+ let parsedChildArray : any [ ] = [ ] ;
111
114
for ( let i = 0 ; i < tree . children . length ; i ++ ) {
112
115
const el = tree . children [ i ] ;
113
- if ( el . name === " NFC" ) {
116
+ if ( el . name === ' NFC' ) {
114
117
parsedChildArray = parsedChildArray . concat (
115
118
removeNFCsFromChildArray ( {
116
119
name : tree . name ,
@@ -124,12 +127,12 @@ const getReactTree = () => {
124
127
// console.log("Parsed Child Array", parsedChildArray);
125
128
return parsedChildArray ;
126
129
} ;
127
-
130
+
128
131
//removes all nodes w/NFC from tree
129
132
const removeAllNFCs = ( tree : TreeNode ) => {
130
133
//ASSUMING THAT THE ROOT NODE OF TREE IS NOT A NFC
131
134
const immediateChildren = removeNFCsFromChildArray ( tree ) || [ ] ;
132
- const actualChildren :any [ ] = immediateChildren . map ( ( child ) => {
135
+ const actualChildren : any [ ] = immediateChildren . map ( child => {
133
136
return {
134
137
name : child . name ,
135
138
actualDuration : child . actualDuration ,
@@ -139,57 +142,67 @@ const getReactTree = () => {
139
142
} ) ;
140
143
return actualChildren ;
141
144
} ;
142
-
145
+
143
146
//create final, transformed tree structure
144
- type FinalType = ( tree : TreeNode ) => { name : string , actualDuration : number , selfBaseDuration : number , children : any [ ] } ;
145
- const final : FinalType = ( tree ) => {
147
+ type FinalType = ( tree : TreeNode ) => {
148
+ name : string ;
149
+ actualDuration : number ;
150
+ selfBaseDuration : number ;
151
+ children : any [ ] ;
152
+ } ;
153
+ const final : FinalType = tree => {
146
154
return {
147
155
name : tree . name ,
148
156
actualDuration : tree . actualDuration ,
149
157
selfBaseDuration : tree . selfBaseDuration ,
150
158
children : removeAllNFCs ( tree ) ,
151
159
} ;
152
160
} ;
153
-
161
+
154
162
//event listener logs message from content script, resets eventList array
155
- document . addEventListener ( "CustomEventFromContentScript" , function ( event ) {
156
- // console.log("Message from content script:", event.detail.message);
157
- eventList = [ ] ;
158
- } ) ;
159
-
160
- //create customized oncommitfiber root function,
163
+ document . addEventListener (
164
+ 'CustomEventFromContentScript' ,
165
+ function ( event ) {
166
+ // console.log("Message from content script:", event.detail.message);
167
+ eventList = [ ] ;
168
+ }
169
+ ) ;
170
+
171
+ //create customized oncommitfiber root function,
161
172
type CustomOnCommitFiberRootType = ( onCommitFiberRoot : any ) => any ;
162
- const customOnCommitFiberRoot : CustomOnCommitFiberRootType = ( onCommitFiberRoot ) => {
163
- return ( ...args : any ) => {
164
- //extract fiberRoot from args
165
- const fiberRoot = args [ 1 ] ;
166
- //log info about fiberRoot
167
- // console.log(
168
- // "INJECT.JS: FIBER ROOT FROM THE CUSTOM ONCOMMITFIBERROOT",
169
- // fiberRoot
170
- // );
171
- // console.log("this is the unparsed tree", fiberRoot.current);
172
- //parse tree and add to eventList
173
- eventList . push (
174
- //@ts -ignore
175
- final ( parseTreeInTreeStructure ( parseTree ( fiberRoot . current ) ) )
176
- ) ;
177
- //convert eventList to string
178
- const eventListStr = JSON . stringify ( eventList ) ;
179
- //send message w/eventList string
180
- window . postMessage ( { type : "tree" , eventListStr } ) ;
181
- return onCommitFiberRoot ( ...args ) ;
173
+ const customOnCommitFiberRoot : CustomOnCommitFiberRootType =
174
+ onCommitFiberRoot => {
175
+ return ( ...args : any ) => {
176
+ //extract fiberRoot from args
177
+ const fiberRoot = args [ 1 ] ;
178
+ //log info about fiberRoot
179
+ // console.log(
180
+ // "INJECT.JS: FIBER ROOT FROM THE CUSTOM ONCOMMITFIBERROOT",
181
+ // fiberRoot
182
+ // );
183
+ // console.log("this is the unparsed tree", fiberRoot.current);
184
+ //parse tree and add to eventList
185
+ eventList . push (
186
+ //@ts -ignore
187
+ final ( parseTreeInTreeStructure ( parseTree ( fiberRoot . current ) ) )
188
+ ) ;
189
+ //convert eventList to string
190
+ const eventListStr = JSON . stringify ( eventList ) ;
191
+ //send message w/eventList string
192
+ window . postMessage ( { type : 'tree' , eventListStr } ) ;
193
+ return onCommitFiberRoot ( ...args ) ;
194
+ } ;
182
195
} ;
183
- } ;
184
-
196
+
185
197
// create custom function to listen to changes
186
- reactDevGlobalHook . onCommitFiberRoot = customOnCommitFiberRoot ( reactDevGlobalHook . onCommitFiberRoot ) ;
187
-
198
+ reactDevGlobalHook . onCommitFiberRoot = customOnCommitFiberRoot (
199
+ reactDevGlobalHook . onCommitFiberRoot
200
+ ) ;
188
201
} catch ( error ) {
189
202
// console.error("Error rendering component Tree: ", error);
190
203
}
191
204
}
192
- }
205
+ } ;
193
206
194
207
// execute function
195
- getReactTree ( ) ;
208
+ getReactTree ( ) ;
0 commit comments