Skip to content

Commit cd46d27

Browse files
kevinfeykevinfey
committed
todo items display properly
1 parent 7240e07 commit cd46d27

File tree

3 files changed

+160
-54
lines changed

3 files changed

+160
-54
lines changed

‎src/app/components/Map.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ const Map = (props) => {
1818
// this state allows the canvas to stay at the zoom level on multiple re-renders
1919
const [{ x, y, k }, setZoomState]: any = useState({ x: 0, y: 0, k: 0 });
2020

21-
// useEffect(() => {
22-
// setZoomState(d3.zoomTransform(d3.select('#canvas').node()));
23-
// }, [snapshot]);
21+
useEffect(() => {
22+
setZoomState(d3.zoomTransform(d3.select('#canvas').node()));
23+
}, [snapshot]);
2424

2525
// this only clears the canvas if Visualizer is already rendered on the extension
2626
useEffect(() => {
@@ -37,7 +37,7 @@ const Map = (props) => {
3737
.append('g')
3838
.attr('transform', `translate(${x}, ${y}), scale(${k})`); // sets the canvas to the saved zoomState
3939

40-
//RE-WRITE ALGORITHIM
40+
//RE-WRITE ALGORITHIM For All Possible Snapshot Formats
4141

4242
// appState is the object that is passed into d3.hierarchy
4343
// const childrenArr = [];
@@ -46,6 +46,7 @@ const Map = (props) => {
4646
// childrenArr.push(el)
4747
// );
4848
// }
49+
4950
// console.log('CHILDREN', childrenArr);
5051

5152
const appState: any = {
@@ -126,7 +127,6 @@ const Map = (props) => {
126127
.attr('stroke', '#646464')
127128
.attr('stroke-width', 2);
128129

129-
console.log('142');
130130
// adding a mouseOver event handler to each node
131131
// only add popup text on nodes with no children
132132
// display the data in the node on hover

‎src/backend/linkFiber.ts

Lines changed: 134 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,12 @@ import 'core-js';
3838
// const componentActionsRecord = require('./masterState');
3939

4040
import {
41-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
42-
Snapshot, Mode, ComponentData, HookStates, Fiber
41+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
42+
Snapshot,
43+
Mode,
44+
ComponentData,
45+
HookStates,
46+
Fiber,
4347
} from './types/backendTypes';
4448
import Tree from './tree';
4549
import componentActionsRecord from './masterState';
@@ -55,7 +59,7 @@ let doWork = true;
5559
const circularComponentTable = new Set();
5660

5761
// module.exports = (snap, mode) => {
58-
export default (snap: Snapshot, mode: Mode): ()=>void => {
62+
export default (snap: Snapshot, mode: Mode): (() => void) => {
5963
let fiberRoot = null;
6064

6165
function sendSnapshot(): void {
@@ -65,33 +69,44 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
6569
if (!snap.tree) {
6670
snap.tree = new Tree('root', 'root');
6771
}
68-
const payload = snap.tree.cleanTreeCopy();// snap.tree.getCopy();
72+
const payload = snap.tree.cleanTreeCopy(); // snap.tree.getCopy();
6973

70-
window.postMessage({
71-
action: 'recordSnap',
72-
payload,
73-
}, '*');
74+
window.postMessage(
75+
{
76+
action: 'recordSnap',
77+
payload,
78+
},
79+
'*'
80+
);
7481
}
7582

7683
// Injects instrumentation to update our state tree every time
7784
// a hooks component changes state
7885
function traverseHooks(memoizedState: any): HookStates {
7986
const hooksStates: HookStates = [];
8087
while (memoizedState && memoizedState.queue) {
81-
if (memoizedState.memoizedState && memoizedState.queue.lastRenderedReducer && memoizedState.queue.lastRenderedReducer.name === 'basicStateReducer') {
88+
if (
89+
memoizedState.memoizedState &&
90+
memoizedState.queue.lastRenderedReducer &&
91+
memoizedState.queue.lastRenderedReducer.name === 'basicStateReducer'
92+
) {
8293
hooksStates.push({
8394
component: memoizedState.queue,
8495
state: memoizedState.memoizedState,
8596
});
8697
}
87-
memoizedState = memoizedState.next !== memoizedState
88-
? memoizedState.next : null;
98+
memoizedState =
99+
memoizedState.next !== memoizedState ? memoizedState.next : null;
89100
}
90101
return hooksStates;
91102
}
92103

93104
// This runs after every Fiber commit. It creates a new snapshot
94-
function createTree(currentFiber: Fiber, tree: Tree = new Tree('root', 'root'), fromSibling = false) {
105+
function createTree(
106+
currentFiber: Fiber,
107+
tree: Tree = new Tree('root', 'root'),
108+
fromSibling = false
109+
) {
95110
// Base case: child or sibling pointed to null
96111
if (!currentFiber) return null;
97112
if (!tree) return tree;
@@ -103,6 +118,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
103118
stateNode,
104119
child,
105120
memoizedState,
121+
memoizedProps,
106122
elementType,
107123
tag,
108124
actualDuration,
@@ -111,38 +127,116 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
111127
treeBaseDuration,
112128
} = currentFiber;
113129

114-
let newState: any | {hooksState?: any[]} = {};
130+
let newState: any | { hooksState?: any[] } = {};
115131
let componentData: {
116-
hooksState?: any[],
117-
hooksIndex?: number,
118-
index?: number,
119-
actualDuration?: number,
120-
actualStartTime?: number,
121-
selfBaseDuration?: number,
122-
treeBaseDuration?: number} = {};
132+
hooksState?: any[];
133+
hooksIndex?: number;
134+
index?: number;
135+
actualDuration?: number;
136+
actualStartTime?: number;
137+
selfBaseDuration?: number;
138+
treeBaseDuration?: number;
139+
} = {};
123140
let componentFound = false;
124141

125142
// Check if node is a stateful setState component
126143
if (stateNode && stateNode.state && (tag === 0 || tag === 1 || tag === 2)) {
127144
// Save component's state and setState() function to our record for future
128145
// time-travel state changing. Add record index to snapshot so we can retrieve.
129-
componentData.index = componentActionsRecord.saveNew(stateNode.state, stateNode);
146+
componentData.index = componentActionsRecord.saveNew(
147+
stateNode.state,
148+
stateNode
149+
);
130150
newState = stateNode.state;
131151
componentFound = true;
132152
}
133153

134-
// Check if node is a hooks useState function
135154
let hooksIndex;
155+
// RECOIL
156+
let isRecoil = false;
157+
158+
if (window[`$recoilDebugStates`]) {
159+
isRecoil = true;
160+
}
161+
const atomArray = [];
162+
// fiberRoot.current.child.child.memoizedProps.value.current
163+
// .getState()
164+
// .currentTree.atomValues.forEach((values, keys) => {
165+
// console.log('keys,', keys, 'values', values.contents);
166+
// atomArray.push(values.contents);
167+
// });
168+
atomArray.push(memoizedProps)
169+
170+
console.log('1st ATOM ARRAY', atomArray);
171+
172+
function traverseRecoilHooks(memoizedState: any): HookStates {
173+
const hooksStates: HookStates = [];
174+
while (memoizedState && memoizedState.queue) {
175+
if (
176+
memoizedState.memoizedState &&
177+
memoizedState.queue.lastRenderedReducer &&
178+
memoizedState.queue.lastRenderedReducer.name === 'basicStateReducer'
179+
) {
180+
// console.log('MEM STATE', memoizedState);
181+
hooksStates.push({
182+
component: memoizedState.queue,
183+
state: memoizedProps,
184+
});
185+
}
186+
memoizedState =
187+
memoizedState.next !== memoizedState ? memoizedState.next : null;
188+
}
189+
return hooksStates;
190+
}
191+
192+
if (
193+
memoizedState &&
194+
(tag === 0 || tag === 1 || tag === 2 || tag === 10) &&
195+
isRecoil === true
196+
) {
197+
if (memoizedState.queue) {
198+
// Hooks states are stored as a linked list using memoizedState.next,
199+
// so we must traverse through the list and get the states.
200+
// We then store them along with the corresponding memoizedState.queue,
201+
// which includes the dispatch() function we use to change their state.
202+
203+
const hooksStates = traverseRecoilHooks(memoizedState);
204+
const hooksNames = getHooksNames(elementType.toString());
205+
hooksStates.forEach((state, i) => {
206+
hooksIndex = componentActionsRecord.saveNew(
207+
state.state,
208+
state.component
209+
);
210+
componentData.hooksIndex = hooksIndex;
211+
if (newState && newState.hooksState) {
212+
newState.hooksState.push({ [hooksNames[i]]: state.state });
213+
} else if (newState) {
214+
newState.hooksState = [{ [hooksNames[i]]: state.state }];
215+
} else {
216+
newState = { hooksState: [] };
217+
newState.hooksState.push({ [hooksNames[i]]: state.state });
218+
}
219+
componentFound = true;
220+
});
221+
}
222+
}
223+
224+
// Check if node is a hooks useState function
225+
//REGULAR REACT HOOKS
136226
if (memoizedState && (tag === 0 || tag === 1 || tag === 2 || tag === 10)) {
137227
if (memoizedState.queue) {
228+
console.log('Regular Hooks');
138229
// Hooks states are stored as a linked list using memoizedState.next,
139230
// so we must traverse through the list and get the states.
140231
// We then store them along with the corresponding memoizedState.queue,
141232
// which includes the dispatch() function we use to change their state.
142233
const hooksStates = traverseHooks(memoizedState);
143234
const hooksNames = getHooksNames(elementType.toString());
144235
hooksStates.forEach((state, i) => {
145-
hooksIndex = componentActionsRecord.saveNew(state.state, state.component);
236+
hooksIndex = componentActionsRecord.saveNew(
237+
state.state,
238+
state.component
239+
);
146240
componentData.hooksIndex = hooksIndex;
147241
if (newState && newState.hooksState) {
148242
newState.hooksState.push({ [hooksNames[i]]: state.state });
@@ -176,13 +270,17 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
176270
// We want to add this fiber node to the snapshot
177271
if (componentFound || newState === 'stateless') {
178272
if (fromSibling) {
179-
newNode = tree.addSibling(newState,
273+
newNode = tree.addSibling(
274+
newState,
180275
elementType ? elementType.name : 'nameless',
181-
componentData);
276+
componentData
277+
);
182278
} else {
183-
newNode = tree.addChild(newState,
279+
newNode = tree.addChild(
280+
newState,
184281
elementType ? elementType.name : 'nameless',
185-
componentData);
282+
componentData
283+
);
186284
}
187285
} else {
188286
newNode = tree;
@@ -211,6 +309,11 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
211309
circularComponentTable.clear();
212310
snap.tree = createTree(current);
213311
}
312+
313+
console.log('Fiber', fiberRoot.current);
314+
315+
console.log('SNAP.TREE->', snap.tree);
316+
214317
sendSnapshot();
215318
}
216319

@@ -219,7 +322,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
219322
}
220323

221324
return () => {
222-
/* const container = document.getElementById('root');
325+
/* const container = document.getElementById('root');
223326
if (container._internalRoot) {
224327
fiberRoot = container._internalRoot;
225328
} else {
@@ -235,6 +338,8 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
235338
const reactInstance = devTools ? devTools.renderers.get(1) : null;
236339
fiberRoot = devTools.getFiberRoots(1).values().next().value;
237340

341+
console.log('FIBER ROOT', fiberRoot.current);
342+
238343
const throttledUpdateSnapshot = throttle(updateSnapShotTree, 70);
239344
document.addEventListener('visibilitychange', onVisibilityChange);
240345

@@ -248,7 +353,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
248353
}
249354
return original(...args);
250355
};
251-
}(devTools.onCommitFiberRoot));
356+
})(devTools.onCommitFiberRoot);
252357
}
253358

254359
throttledUpdateSnapshot();

0 commit comments

Comments
 (0)