Skip to content

Commit 0b6e823

Browse files
davidchai717davidchai717
committed
Hook implementation improvements and fixes
1 parent 2555ecf commit 0b6e823

File tree

3 files changed

+76
-86
lines changed

3 files changed

+76
-86
lines changed

‎package/linkFiber.js

Lines changed: 58 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,34 @@ module.exports = (snap, mode) => {
4343
component.setState.linkFiberChanged = true;
4444
}
4545

46+
function changeUseState (component) {
47+
if (component.queue.dispatch.linkFiberChanged) return;
48+
// running the original useState and storing its result (state and dispatch function)
49+
const oldDispatch = component.queue.dispatch.bind(component.queue);
50+
// storing the original dispatch function definition somewhere
51+
console.log('inside changeusestate', oldDispatch);
52+
53+
// redefining the dispatch function so we can inject our code
54+
component.queue.dispatch = function (fiber, queue, action) {
55+
if (mode.locked && !mode.jumping) return;
56+
oldDispatch(fiber, queue, action);
57+
setTimeout(() => {
58+
console.log('Updating the snapshot tree after an action has been dispatched');
59+
updateSnapShotTree();
60+
sendSnapshot();
61+
}, 100);
62+
};
63+
component.queue.dispatch.linkFiberChanged = true;
64+
};
65+
4666
// Helper function to traverse through the memoized state
4767
function traverseHooks(memoizedState) {
4868
// Declare variables and assigned to 0th index and an empty object, respectively
4969
let index = 0;
5070
const memoizedObj = {};
5171
// while memoizedState is truthy, save the value to the object
5272
while (memoizedState) {
73+
changeUseState(memoizedState);
5374
// Increment the index by 1
5475
memoizedObj[`state${index += 1}`] = memoizedState.memoizedState;
5576
// Reassign memoizedState to its next value
@@ -80,10 +101,8 @@ module.exports = (snap, mode) => {
80101
// TODO: Refactor the conditionals - think about the edge case where a stateful
81102
// component might have a key called 'baseState' in the state
82103
if (memoizedState && memoizedState.hasOwnProperty('baseState')) {
83-
// console.log('The memoizedState is: ', memoizedState)
84-
85-
const traversed = traverseHooks(memoizedState);
86-
nextTree = tree.appendChild(traversed);
104+
memoizedState.traversed = traverseHooks(memoizedState);
105+
nextTree = tree.appendChild(memoizedState);
87106
}
88107

89108
// iterate through siblings
@@ -113,81 +132,41 @@ module.exports = (snap, mode) => {
113132
if (action === 'contentScriptStarted') sendSnapshot();
114133
});
115134
},
116-
// testUseState(useState) {
117-
// return initial => {
118-
// // running the original useState and storing its result (state and dispatch function)
119-
// const toReturn = useState(initial);
120-
// // storing the original dispatch function definition somewhere
121-
// const oldDispatch = toReturn[1];
122-
// // redefining the dispatch function so we can inject our code
123-
// toReturn[1] = function (newVal) {
124-
// console.log('dispatch:', oldDispatch(newVal));
125-
// setTimeout(() => {
126-
// updateSnapShotTree();
127-
// sendSnapshot();
128-
// }, 100);
129-
// };
130-
// return toReturn;
135+
// testHooks(react) {
136+
// return {
137+
// useState: initialState => {
138+
// // running the original useState and storing its result (state and dispatch function)
139+
// const toReturn = react.useState(initialState);
140+
// // storing the original dispatch function definition somewhere
141+
// const oldDispatch = toReturn[1];
142+
// console.log('old dispatch', oldDispatch)
143+
// // redefining the dispatch function so we can inject our code
144+
// toReturn[1] = function (newVal) {
145+
// oldDispatch(newVal);
146+
// setTimeout(() => {
147+
// updateSnapShotTree();
148+
// sendSnapshot();
149+
// }, 100);
150+
// };
151+
// return toReturn;
152+
// },
153+
// useReducer: (reducer, initialState, init) => {
154+
// // Declare a constant and initialize to the built-in useReducer method
155+
// // Which returns an array with the state and dispatch
156+
// const reduced = react.useReducer(reducer, initialState, init);
157+
// // Save the dispatch method
158+
// const oldDispatch = reduced[1];
159+
// // reassign the dispatch method with the additional methods
160+
// reduced[1] = function (type) {
161+
// oldDispatch(type);
162+
// setTimeout(() => {
163+
// updateSnapShotTree();
164+
// sendSnapshot();
165+
// }, 100);
166+
// };
167+
// return reduced;
168+
// },
131169
// };
132170
// },
133-
testHooks(react) {
134-
const reducerInjection = reducer => {
135-
return (state, action) => {
136-
reducer(state, action);
137-
updateSnapShotTree();
138-
sendSnapshot();
139-
};
140-
};
141-
return {
142-
useState: initial => {
143-
const basicStateReducerClone = (state, action) => {
144-
return typeof action === 'function' ? action(state) : action;
145-
};
146-
// running the original useState and storing its result (state and dispatch function)
147-
const toReturn = react.useReducer(initial, reducerInjection(basicStateReducerClone));
148-
// // storing the original dispatch function definition somewhere
149-
// const oldDispatch = toReturn[1];
150-
// // redefining the dispatch function so we can inject our code
151-
// toReturn[1] = function (newVal) {
152-
// console.log('dispatch:', oldDispatch(newVal));
153-
// setTimeout(() => {
154-
// updateSnapShotTree();
155-
// sendSnapshot();
156-
// }, 100);
157-
// };
158-
return toReturn;
159-
},
160-
useReducer: (reducer, initialState, init) => {
161-
// Declare a constant and initialize to the built-in useReducer method
162-
// Which returns an array with the state and dispatch
163-
const reduced = react.useReducer(reducer, initialState, init);
164-
// Save the dispatch method
165-
const oldDispatch = reduced[1];
166-
// reassign the dispatch method with the additional methods
167-
reduced[1] = function (type) {
168-
oldDispatch(type);
169-
updateSnapShotTree();
170-
sendSnapshot();
171-
};
172-
return reduced;
173-
},
174-
};
175-
},
176-
testUseReducer(useReducer) {
177-
return (reducer, initialState, init) => {
178-
// Declare a constant and initialize to the built-in useReducer method
179-
// Which returns an array with the state and dispatch
180-
const reduced = useReducer(reducer, initialState, init);
181-
// Save the dispatch method
182-
const oldDispatch = reduced[1];
183-
// reassign the dispatch method with the additional methods
184-
reduced[1] = function (type) {
185-
oldDispatch(type);
186-
updateSnapShotTree();
187-
sendSnapshot();
188-
}
189-
return reduced;
190-
}
191-
},
192171
};
193-
};
172+
};

‎package/timeJump.js

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,27 @@ module.exports = (origin, mode) => {
1212
// recursively change state of tree
1313
function jump(target, coords = []) {
1414
const originNode = traverseTree(origin.tree, coords);
15-
// set the state of the origin tree
16-
originNode.component.setState(target.state, () => {
17-
// iterate through new children once state has been set
18-
target.children.forEach((child, i) => {
19-
jump(child, coords.concat(i));
15+
console.log('coords', coords);
16+
console.log('originNode', originNode);
17+
// set the state of the origin tree if the component is stateful
18+
if (originNode.component.setState) {
19+
originNode.component.setState(target.state, () => {
20+
// iterate through new children once state has been set
21+
target.children.forEach((child, i) => {
22+
jump(child, coords.concat(i));
23+
});
2024
});
21-
});
25+
}
26+
// else {
27+
// // if component uses hooks
28+
// // traverse down the memoize tree again
29+
// console.log('component', originNode.component);
30+
// originNode.component.queue.dispatch(target.state);
31+
// }
2232
}
2333

2434
return target => {
35+
console.log('im a target', target);
2536
// setting mode disables setState from posting messages to window
2637
mode.jumping = true;
2738
jump(target);

‎package/tree.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ class Tree {
2828
getCopy(copy = new Tree('root', true)) {
2929
// copy state of children
3030
copy.children = this.children.map(
31-
child => new Tree(child.component.state || child.component, true, child.component.constructor.name),
31+
child => new Tree(child.component.state || child.component.traversed, true, child.component.constructor.name),
3232
);
3333

3434
// copy children's children recursively

0 commit comments

Comments
 (0)