Skip to content

Commit e1d76f7

Browse files
ngoczwolinskingoczwolinski
committed
Working on refactor linkFiber
1 parent 9f6dc93 commit e1d76f7

File tree

2 files changed

+73
-91
lines changed

2 files changed

+73
-91
lines changed

‎src/backend/helpers.ts

Lines changed: 69 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -96,78 +96,78 @@ export const throttle = (
9696
};
9797
};
9898

99-
// Helper function to grab the getters/setters from `elementType`
100-
/**
101-
* @method getHooksNames
102-
* @param elementType The fiber `type`, A stringified function of the component, the Fiber whose hooks we want corresponds to
103-
* @returns An array of strings
104-
*/
105-
// TODO: this function has return at the end of loop? Is this intentional?
106-
export const getHooksNames = (elementType: string): Array<string> | undefined => {
107-
// Initialize empty object to store the setters and getter
108-
let ast: any;
109-
try {
110-
ast = JSXParser.parse(elementType);
111-
} catch (e) {
112-
return ['unknown'];
113-
}
114-
// hookNames will contain an object with methods (functions)
115-
const hooksNames: any = {};
99+
// // Helper function to grab the getters/setters from `elementType`
100+
// /**
101+
// * @method getHooksNames
102+
// * @param elementType The fiber `type`, A stringified function of the component, the Fiber whose hooks we want corresponds to
103+
// * @returns An array of strings
104+
// */
105+
// // TODO: this function has return at the end of loop? Is this intentional?
106+
// export const getHooksNames = (elementType: string): Array<string> | undefined => {
107+
// // Initialize empty object to store the setters and getter
108+
// let ast: any;
109+
// try {
110+
// ast = JSXParser.parse(elementType);
111+
// } catch (e) {
112+
// return ['unknown'];
113+
// }
114+
// // hookNames will contain an object with methods (functions)
115+
// const hooksNames: any = {};
116116

117-
// Begin search for hook names, only if ast has a body property.
118-
while (Object.hasOwnProperty.call(ast, 'body')) {
119-
let tsCount = 0; // Counter for the number of TypeScript hooks seen (to distinguish in masterState)
120-
ast = ast.body;
117+
// // Begin search for hook names, only if ast has a body property.
118+
// while (Object.hasOwnProperty.call(ast, 'body')) {
119+
// let tsCount = 0; // Counter for the number of TypeScript hooks seen (to distinguish in masterState)
120+
// ast = ast.body;
121121

122-
// Statements get all the names of the hooks. For example: useCount, useWildcard, ...
123-
const statements: Array<string> = [];
124-
/** All module exports always start off as a single 'FunctionDeclaration' type
125-
* Other types: "BlockStatement" / "ExpressionStatement" / "ReturnStatement"
126-
* Iterate through AST of every function declaration
127-
* Check within each function declaration if there are hook declarations */
128-
ast.forEach((functionDec: any) => {
129-
let declarationBody: any;
130-
if (functionDec.expression?.body) declarationBody = functionDec.expression.body.body;
131-
// check if functionDec.expression.body exists, then set declarationBody to functionDec's body
132-
else declarationBody = functionDec.body?.body ?? [];
133-
// Traverse through the function's funcDecs and Expression Statements
134-
declarationBody.forEach((elem: any) => {
135-
// Hooks will always be contained in a variable declaration
136-
if (elem.type === 'VariableDeclaration') {
137-
elem.declarations.forEach((hook: any) => {
138-
// Parse destructured statements pair
139-
if (hook.id.type === 'ArrayPattern') {
140-
hook.id.elements.forEach((hook: any) => {
141-
statements.push(`_useWildcard${tsCount}`);
142-
statements.push(hook.name);
143-
tsCount += 1;
144-
});
145-
// Process hook function invocation ?
146-
} else {
147-
// hook.init.object is '_useState2', '_useState4', etc.
148-
// eslint-disable-next-line no-lonely-if
149-
if (hook?.init?.object?.name) {
150-
const varName: any = hook.init.object.name;
151-
if (!hooksNames[varName] && varName.match(/_use/)) {
152-
hooksNames[varName] = hook.id.name;
153-
}
154-
}
155-
if (hook.id.name !== undefined) {
156-
statements.push(hook.id.name);
157-
}
158-
}
159-
});
160-
}
161-
});
162-
statements.forEach((el, i) => {
163-
if (el.match(/_use/)) hooksNames[el] = statements[i + 1];
164-
});
165-
});
166-
return Object.values(hooksNames);
167-
}
168-
};
122+
// // Statements get all the names of the hooks. For example: useCount, useWildcard, ...
123+
// const statements: Array<string> = [];
124+
// /** All module exports always start off as a single 'FunctionDeclaration' type
125+
// * Other types: "BlockStatement" / "ExpressionStatement" / "ReturnStatement"
126+
// * Iterate through AST of every function declaration
127+
// * Check within each function declaration if there are hook declarations */
128+
// ast.forEach((functionDec: any) => {
129+
// let declarationBody: any;
130+
// if (functionDec.expression?.body) declarationBody = functionDec.expression.body.body;
131+
// // check if functionDec.expression.body exists, then set declarationBody to functionDec's body
132+
// else declarationBody = functionDec.body?.body ?? [];
133+
// // Traverse through the function's funcDecs and Expression Statements
134+
// declarationBody.forEach((elem: any) => {
135+
// // Hooks will always be contained in a variable declaration
136+
// if (elem.type === 'VariableDeclaration') {
137+
// elem.declarations.forEach((hook: any) => {
138+
// // Parse destructured statements pair
139+
// if (hook.id.type === 'ArrayPattern') {
140+
// hook.id.elements.forEach((hook: any) => {
141+
// statements.push(`_useWildcard${tsCount}`);
142+
// statements.push(hook.name);
143+
// tsCount += 1;
144+
// });
145+
// // Process hook function invocation ?
146+
// } else {
147+
// // hook.init.object is '_useState2', '_useState4', etc.
148+
// // eslint-disable-next-line no-lonely-if
149+
// if (hook?.init?.object?.name) {
150+
// const varName: any = hook.init.object.name;
151+
// if (!hooksNames[varName] && varName.match(/_use/)) {
152+
// hooksNames[varName] = hook.id.name;
153+
// }
154+
// }
155+
// if (hook.id.name !== undefined) {
156+
// statements.push(hook.id.name);
157+
// }
158+
// }
159+
// });
160+
// }
161+
// });
162+
// statements.forEach((el, i) => {
163+
// if (el.match(/_use/)) hooksNames[el] = statements[i + 1];
164+
// });
165+
// });
166+
// return Object.values(hooksNames);
167+
// }
168+
// };
169169

170-
export const getComponentName = (
170+
export const getHooksNames = (
171171
elementType: string,
172172
): { hookName: string; varName: string }[] | undefined => {
173173
// Initialize empty object to store the setters and getter

‎src/backend/linkFiber.ts

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ import updateSnapShotTree from './snapShot';
6363

6464
// throttle returns a function that can be called any number of times (possibly in quick succession) but will only invoke the callback at most once every x ms
6565
// getHooksNames - helper function to grab the getters/setters from `elementType`
66-
import { throttle, getHooksNames, getComponentName } from './helpers';
66+
import { throttle, getHooksNames } from './helpers';
6767

6868
// Set global variables to use in exported module and helper functions
6969
declare global {
@@ -413,7 +413,7 @@ export function createTree(
413413
// componentData.context = convertDataToString(dependencies.firstContext.memoizedValue);
414414
// }
415415

416-
// -----------OBTAIN STATE & SET STATE METHODS FOR CLASS COMPONENT------------
416+
// ----------OBTAIN STATE & SET STATE METHODS FROM CLASS COMPONENT------------
417417
// Check if node is a stateful class component when user use setState.
418418
// If user use setState to define/manage state, the state object will be stored in stateNode.state => grab the state object stored in the stateNode.state
419419
// Example: for tic-tac-toe demo-app: Board is a stateful component that use setState to store state data.
@@ -428,7 +428,7 @@ export function createTree(
428428
isStatefulComponent = true;
429429
}
430430

431-
// ---------OBTAIN STATE & DISPATCH METHODS FOR FUNCTIONAL COMPONENT---------
431+
// ---------OBTAIN STATE & DISPATCH METHODS FROM FUNCTIONAL COMPONENT---------
432432
// REGULAR REACT HOOKS
433433
let hooksIndex;
434434
// Check if node is a hooks useState function
@@ -445,12 +445,7 @@ export function createTree(
445445
// We then store them along with the corresponding memoizedState.queue,
446446
// which includes the dispatch() function we use to change their state.
447447
const hooksStates = traverseHooks(memoizedState);
448-
// console.log(elementType.toString());
449-
// const hooksNames = getHooksNames(elementType.toString());
450-
const hooksNames = getComponentName(elementType.toString());
451-
// console.log({ hooksNames }); // ['useState', 'useState']
452-
console.log({ hooksStates });
453-
// console.log({ memoizedState });
448+
const hooksNames = getHooksNames(elementType.toString());
454449
console.log({ hooksNames });
455450
newState.hooksState = [];
456451
hooksStates.forEach((state, i) => {
@@ -460,7 +455,6 @@ export function createTree(
460455
componentData.state[hooksNames[i].varName] = state.state;
461456
});
462457
isStatefulComponent = true;
463-
// console.log({ newState: newState.hooksState });
464458
}
465459
}
466460

@@ -472,18 +466,6 @@ export function createTree(
472466
newState = 'stateless';
473467
}
474468

475-
// Adds performance metrics to the component data
476-
// componentData = {
477-
// ...componentData,
478-
// actualDuration,
479-
// actualStartTime,
480-
// selfBaseDuration,
481-
// treeBaseDuration,
482-
// };
483-
// console.log('props', componentData.props);
484-
// console.log('context', componentData.context);
485-
// console.log('state', componentData.state);
486-
487469
// ------------------ADD COMPONENT DATA TO THE OUTPUT TREE--------------------
488470
/**
489471
* The updated tree after adding the `componentData` obtained from `currentFiberNode`

0 commit comments

Comments
 (0)