1+ /* eslint-disable func-names */
12/* eslint-disable no-use-before-define */
23/* eslint-disable no-param-reassign */
34// links component state tree to library
@@ -9,14 +10,19 @@ module.exports = (snap, mode) => {
910
1011 function sendSnapshot ( ) {
1112 // don't send messages while jumping or while paused
13+ // DEV: So that when we are jumping to an old snapshot it wouldn't think we want to create new snapshots
1214 if ( mode . jumping || mode . paused ) return ;
1315 const payload = snap . tree . getCopy ( ) ;
16+ // console.log('payload', payload);
1417 window . postMessage ( {
1518 action : 'recordSnap' ,
1619 payload,
1720 } ) ;
1821 }
1922
23+ // DEV: This is how we know when a change has happened
24+ // (by injecting an event listener to every component's setState functionality).
25+ // Will need to create a separate one for useState components
2026 function changeSetState ( component ) {
2127 // check that setState hasn't been changed yet
2228 if ( component . setState . linkFiberChanged ) return ;
@@ -40,11 +46,32 @@ module.exports = (snap, mode) => {
4046 component . setState . linkFiberChanged = true ;
4147 }
4248
49+ // Helper function to
50+
51+ // Helper function to traverse through the memoized state
52+ function traverseHooks ( memoizedState ) {
53+ // Declare variables and assigned to 0th index and an empty object, respectively
54+ let index = 0 ;
55+ const memoizedObj = { } ;
56+ // while memoizedState is truthy, save the value to the object
57+ while ( memoizedState ) {
58+ // Increment the index by 1
59+ memoizedObj [ `state${ index += 1 } ] = memoizedState . memoizedState ;
60+ // Reassign memoizedState to its next value
61+ memoizedState = memoizedState . next ;
62+ }
63+ return memoizedObj ;
64+ }
65+
4366 function createTree ( currentFiber , tree = new Tree ( 'root' ) ) {
4467 if ( ! currentFiber ) return tree ;
45- // We have to figure out which properties to destructure from currentFiber
46- // To support hooks and Context API
47- const { sibling, stateNode, child } = currentFiber ;
68+
69+ const {
70+ sibling,
71+ stateNode,
72+ child,
73+ memoizedState,
74+ } = currentFiber ;
4875
4976 let nextTree = tree ;
5077 // check if stateful component
@@ -54,8 +81,16 @@ module.exports = (snap, mode) => {
5481 // change setState functionality
5582 changeSetState ( stateNode ) ;
5683 }
57- // Need to check if functional component AND uses hooks
58-
84+ // Check if the component uses hooks
85+ // TODO: Refactor the conditionals - think about the edge case where a stateful
86+ // component might have a key called 'baseState' in the state
87+ if ( memoizedState && memoizedState . hasOwnProperty ( 'baseState' ) ) {
88+ // console.log('The memoizedState is: ', memoizedState)
89+
90+ const traversed = traverseHooks ( memoizedState ) ;
91+ nextTree = tree . appendChild ( traversed ) ;
92+ }
93+
5994 // iterate through siblings
6095 createTree ( sibling , tree ) ;
6196 // iterate through children
@@ -68,19 +103,67 @@ module.exports = (snap, mode) => {
68103 const { current } = fiberRoot ;
69104 snap . tree = createTree ( current ) ;
70105 }
106+ // return container => {
107+ // console.log('this is the container', container)
108+ // const {
109+ // _reactRootContainer: { _internalRoot },
110+ // _reactRootContainer,
111+ // } = container;
112+ // // only assign internal root if it actually exists
113+ // fiberRoot = _internalRoot || _reactRootContainer;
114+ // console.log('fiberRoot', fiberRoot);
115+ // updateSnapShotTree();
71116
72- return container => {
73- const {
74- _reactRootContainer : { _internalRoot } ,
75- _reactRootContainer,
76- } = container ;
77- // only assign internal root if it actually exists
78- fiberRoot = _internalRoot || _reactRootContainer ;
79- updateSnapShotTree ( ) ;
117+ // // send the initial snapshot once the content script has started up
118+ // window.addEventListener('message', ({ data: { action } }) => {
119+ // if (action === 'contentScriptStarted') sendSnapshot();
120+ // });
121+ // };
80122
81- // send the initial snapshot once the content script has started up
82- window . addEventListener ( 'message' , ( { data : { action } } ) => {
83- if ( action === 'contentScriptStarted' ) sendSnapshot ( ) ;
84- } ) ;
123+ return {
124+ _ ( container ) {
125+ const {
126+ _reactRootContainer : { _internalRoot } ,
127+ _reactRootContainer,
128+ } = container ;
129+ // only assign internal root if it actually exists
130+ fiberRoot = _internalRoot || _reactRootContainer ;
131+ updateSnapShotTree ( ) ;
132+ // send the initial snapshot once the content script has started up
133+ window . addEventListener ( 'message' , ( { data : { action } } ) => {
134+ if ( action === 'contentScriptStarted' ) sendSnapshot ( ) ;
135+ } ) ;
136+ } ,
137+ testUseState ( useState ) {
138+ return function ( initial ) {
139+ // running the original useState and storing its result (state and dispatch function)
140+ const toReturn = useState ( initial ) ;
141+ // storing the original dispatch function definition somewhere
142+ const oldDispatch = toReturn [ 1 ] ;
143+ // redefining the dispatch function so we can inject our code
144+ toReturn [ 1 ] = function ( newVal ) {
145+ oldDispatch ( newVal ) ;
146+ updateSnapShotTree ( ) ;
147+ sendSnapshot ( ) ;
148+ } ;
149+ return toReturn ;
150+ } ;
151+ } ,
152+ testUseReducer ( useReducer ) {
153+ return function ( 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 = 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+ updateSnapShotTree ( ) ;
163+ sendSnapshot ( ) ;
164+ }
165+ return reduced ;
166+ }
167+ } ,
85168 } ;
86- } ;
169+ } ;
0 commit comments