Skip to content

Commit 44092dd

Browse files
zacharydfreemanzacharydfreeman
committed
cleaned up state prop extractors
1 parent 9774144 commit 44092dd

File tree

1 file changed

+3
-138
lines changed

1 file changed

+3
-138
lines changed

‎src/backend/controllers/statePropExtractors.ts

Lines changed: 3 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
11
const acorn = require('acorn');
22
const jsx = require('acorn-jsx');
33
const JSXParser = acorn.Parser.extend(jsx());
4-
import {
5-
// array of state and component
6-
HookStates,
7-
// object with tree structure
8-
Fiber,
9-
} from '../types/backendTypes';
4+
import { HookStates, Fiber } from '../types/backendTypes';
105
import { exclude } from '../models/filterConditions';
11-
// TODO: Determine what Component Data Type we are sending back for state, context, & props
6+
127
type ReactimeData = {
138
[key: string]: any;
149
};
15-
1610
// ------------FILTER DATA FROM REACT DEV TOOL && CONVERT TO STRING-------------
1711
/**
1812
* This function receives raw Data from REACT DEV TOOL and filter the Data based on the exclude list. The filterd data is then converted to string (if applicable) before being sent to reacTime front end.
@@ -27,8 +21,7 @@ export function filterAndFormatData(
2721
): ReactimeData {
2822
for (const key in reactDevData) {
2923
try {
30-
// Skip keys that are in exclude set OR if there is no value at key
31-
// Falsy values such as 0, false, null are still valid value
24+
// If key is in exclude set or if there is no value at key, skip
3225
if (exclude.has(key) || reactDevData[key] === undefined) {
3326
continue;
3427
}
@@ -59,62 +52,6 @@ export function filterAndFormatData(
5952
}
6053
return reactimeData;
6154
}
62-
// COMMENT OUT SINCE EXTRACTING CONTEXT IS STILL IN EXPERIMENT
63-
// // ------------------------FILTER STATE & CONTEXT DATA--------------------------
64-
// /**
65-
// * This function is used to filter the state data of a component.
66-
// * All propperty name that are in the central `exclude` list would be filtered out.
67-
// * If passed in memoizedState is a not an object (a.k.a a primitive type), a default name would be provided.
68-
// * @param memoizedState - The current state of the component associated with the current Fiber node.
69-
// * @param _debugHookTypes - An array of hooks used for debugging purposes.
70-
// * @param componentName - Name of the evaluated component
71-
// * @returns - The updated state data object to send to front end of ReactTime
72-
// */
73-
// export function getStateAndContextData(
74-
// memoizedState: Fiber['memoizedState'],
75-
// componentName: string,
76-
// _debugHookTypes: Fiber['_debugHookTypes'],
77-
// ) {
78-
// // Initialize a list of componentName that would not be evaluated for State Data:
79-
// const ignoreComponent = new Set(['BrowserRouter', 'Router']);
80-
// if (ignoreComponent.has(componentName)) return;
81-
82-
// // Initialize object to store state and context data of the component
83-
// const reactimeData: ReactimeData = {};
84-
// // Initialize counter for the default naming. If user use reactHook, such as useState, react will only pass in the value, and not the variable name of the state.
85-
// let stateCounter = 1;
86-
// let refCounter = 1;
87-
88-
// // Loop through each hook inside the _debugHookTypes array.
89-
// // NOTE: _debugHookTypes.length === height of memoizedState tree.
90-
// for (const hook of _debugHookTypes) {
91-
// // useContext does not create any state => skip
92-
// if (hook === 'useContext') {
93-
// continue;
94-
// }
95-
// // If user use useState reactHook => React will only pass in the value of state & not the name of the state => create a default name:
96-
// else if (hook === 'useState') {
97-
// const defaultName = `State ${stateCounter}`;
98-
// reactimeData[defaultName] = memoizedState.memoizedState;
99-
// stateCounter++;
100-
// }
101-
// // If user use useRef reactHook => React will store memoizedState in current object:
102-
// else if (hook === 'useRef') {
103-
// const defaultName = `Ref ${refCounter}`;
104-
// reactimeData[defaultName] = memoizedState.memoizedState.current;
105-
// refCounter++;
106-
// }
107-
// // If user use Redux to contain their context => the context object will be stored using useMemo Hook, as of for Rect Dev Tool v4.27.2
108-
// // Note: Provider is not a reserved component name for redux. User may name their component as Provider, which will break this logic. However, it is a good assumption that if user have a custom provider component, it would have a more specific naming such as ThemeProvider.
109-
// else if (hook === 'useMemo' && componentName === 'Provider') {
110-
// filterAndFormatData(memoizedState.memoizedState[0], reactimeData);
111-
// }
112-
// //Move on to the next level of memoizedState tree.
113-
// memoizedState = memoizedState?.next;
114-
// }
115-
// // Return the updated state data object to send to front end of ReactTime
116-
// return reactimeData;
117-
// }
11855

11956
// ----------------------GET HOOK STATE AND DISPATCH METHOD---------------------
12057
/**
@@ -202,75 +139,3 @@ export function getHooksNames(elementType: string): { hookName: string; varName:
202139
throw new Error('getHooksNameError' + err.message);
203140
}
204141
}
205-
206-
// DEPERACATED: After React DEV Tool Update. This function no longer works. Keep for history record
207-
// // Helper function to grab the getters/setters from `elementType`
208-
// /**
209-
// * @method getHooksNames
210-
// * @param elementType The fiber `type`, A stringified function of the component, the Fiber whose hooks we want corresponds to
211-
// * @returns An array of strings
212-
// */
213-
// // TODO: this function has return at the end of loop? Is this intentional?
214-
// export const getHooksNames = (elementType: string): Array<string> | undefined => {
215-
// // Initialize empty object to store the setters and getter
216-
// let ast: any;
217-
// try {
218-
// ast = JSXParser.parse(elementType);
219-
// } catch (e) {
220-
// return ['unknown'];
221-
// }
222-
// // hookNames will contain an object with methods (functions)
223-
// const hooksNames: any = {};
224-
225-
// // Begin search for hook names, only if ast has a body property.
226-
// while (Object.hasOwnProperty.call(ast, 'body')) {
227-
// let tsCount = 0; // Counter for the number of TypeScript hooks seen (to distinguish in masterState)
228-
// ast = ast.body;
229-
230-
// // Statements get all the names of the hooks. For example: useCount, useWildcard, ...
231-
// const statements: Array<string> = [];
232-
// /** All module exports always start off as a single 'FunctionDeclaration' type
233-
// * Other types: "BlockStatement" / "ExpressionStatement" / "ReturnStatement"
234-
// * Iterate through AST of every function declaration
235-
// * Check within each function declaration if there are hook declarations */
236-
// ast.forEach((functionDec: any) => {
237-
// let declarationBody: any;
238-
// if (functionDec.expression?.body) declarationBody = functionDec.expression.body.body;
239-
// // check if functionDec.expression.body exists, then set declarationBody to functionDec's body
240-
// else declarationBody = functionDec.body?.body ?? [];
241-
// // Traverse through the function's funcDecs and Expression Statements
242-
// declarationBody.forEach((elem: any) => {
243-
// // Hooks will always be contained in a variable declaration
244-
// if (elem.type === 'VariableDeclaration') {
245-
// elem.declarations.forEach((hook: any) => {
246-
// // Parse destructured statements pair
247-
// if (hook.id.type === 'ArrayPattern') {
248-
// hook.id.elements.forEach((hook: any) => {
249-
// statements.push(`_useWildcard${tsCount}`);
250-
// statements.push(hook.name);
251-
// tsCount += 1;
252-
// });
253-
// // Process hook function invocation ?
254-
// } else {
255-
// // hook.init.object is '_useState2', '_useState4', etc.
256-
// // eslint-disable-next-line no-lonely-if
257-
// if (hook?.init?.object?.name) {
258-
// const varName: any = hook.init.object.name;
259-
// if (!hooksNames[varName] && varName.match(/_use/)) {
260-
// hooksNames[varName] = hook.id.name;
261-
// }
262-
// }
263-
// if (hook.id.name !== undefined) {
264-
// statements.push(hook.id.name);
265-
// }
266-
// }
267-
// });
268-
// }
269-
// });
270-
// statements.forEach((el, i) => {
271-
// if (el.match(/_use/)) hooksNames[el] = statements[i + 1];
272-
// });
273-
// });
274-
// return Object.values(hooksNames);
275-
// }
276-
// };

0 commit comments

Comments
 (0)