Skip to content

Commit 1054fc4

Browse files
dev-plamdev-plam
authored
Merge pull request #6 from oslabs-beta/backend
Backend - Link Fiber
2 parents 41e15be + da3c6d0 commit 1054fc4

File tree

3 files changed

+132
-104
lines changed

3 files changed

+132
-104
lines changed

‎src/app/components/StateRoute/ComponentMap/ComponentMap.tsx‎

Lines changed: 85 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -20,70 +20,70 @@ import getLinkComponent from './getLinkComponent';
2020
import { toggleExpanded, setCurrentTabInApp } from '../../../actions/actions';
2121
import { useStoreContext } from '../../../store';
2222

23-
const exclude = [
24-
'childExpirationTime',
25-
'staticContext',
26-
'_debugSource',
27-
'actualDuration',
28-
'actualStartTime',
29-
'treeBaseDuration',
30-
'_debugID',
31-
'_debugIsCurrentlyTiming',
32-
'selfBaseDuration',
33-
'expirationTime',
34-
'effectTag',
35-
'alternate',
36-
'_owner',
37-
'_store',
38-
'get key',
39-
'ref',
40-
'_self',
41-
'_source',
42-
'firstBaseUpdate',
43-
'updateQueue',
44-
'lastBaseUpdate',
45-
'shared',
46-
'responders',
47-
'pending',
48-
'lanes',
49-
'childLanes',
50-
'effects',
51-
'memoizedState',
52-
'pendingProps',
53-
'lastEffect',
54-
'firstEffect',
55-
'tag',
56-
'baseState',
57-
'baseQueue',
58-
'dependencies',
59-
'Consumer',
60-
'context',
61-
'_currentRenderer',
62-
'_currentRenderer2',
63-
'mode',
64-
'flags',
65-
'nextEffect',
66-
'sibling',
67-
'create',
68-
'deps',
69-
'next',
70-
'destroy',
71-
'parentSub',
72-
'child',
73-
'key',
74-
'return',
75-
'children',
76-
'$$typeof',
77-
'_threadCount',
78-
'_calculateChangedBits',
79-
'_currentValue',
80-
'_currentValue2',
81-
'Provider',
82-
'_context',
83-
'stateNode',
84-
'elementType',
85-
'type',
86-
];
23+
// const exclude = [
24+
// 'childExpirationTime',
25+
// 'staticContext',
26+
// '_debugSource',
27+
// 'actualDuration',
28+
// 'actualStartTime',
29+
// 'treeBaseDuration',
30+
// '_debugID',
31+
// '_debugIsCurrentlyTiming',
32+
// 'selfBaseDuration',
33+
// 'expirationTime',
34+
// 'effectTag',
35+
// 'alternate',
36+
// '_owner',
37+
// '_store',
38+
// 'get key',
39+
// 'ref',
40+
// '_self',
41+
// '_source',
42+
// 'firstBaseUpdate',
43+
// 'updateQueue',
44+
// 'lastBaseUpdate',
45+
// 'shared',
46+
// 'responders',
47+
// 'pending',
48+
// 'lanes',
49+
// 'childLanes',
50+
// 'effects',
51+
// 'memoizedState',
52+
// 'pendingProps',
53+
// 'lastEffect',
54+
// 'firstEffect',
55+
// 'tag',
56+
// 'baseState',
57+
// 'baseQueue',
58+
// 'dependencies',
59+
// 'Consumer',
60+
// 'context',
61+
// '_currentRenderer',
62+
// '_currentRenderer2',
63+
// 'mode',
64+
// 'flags',
65+
// 'nextEffect',
66+
// 'sibling',
67+
// 'create',
68+
// 'deps',
69+
// 'next',
70+
// 'destroy',
71+
// 'parentSub',
72+
// 'child',
73+
// 'key',
74+
// 'return',
75+
// 'children',
76+
// '$$typeof',
77+
// '_threadCount',
78+
// '_calculateChangedBits',
79+
// '_currentValue',
80+
// '_currentValue2',
81+
// 'Provider',
82+
// '_context',
83+
// 'stateNode',
84+
// 'elementType',
85+
// 'type',
86+
// ];
8787

8888
const defaultMargin = {
8989
top: 30,
@@ -188,38 +188,39 @@ export default function ComponentMap({
188188
};
189189

190190
const formatProps = (data) => {
191+
console.log('ComponentMap', { data });
191192
const propsFormat = [];
192-
const nestedObj = [];
193+
// const nestedObj = [];
193194
for (const key in data) {
194195
if (
195-
data[key] !== 'reactFiber' &&
196-
typeof data[key] !== 'object' &&
197-
exclude.includes(key) !== true
196+
// data[key] !== 'reactFiber' &&
197+
typeof data[key] !== 'object'
198+
// exclude.includes(key) !== true
198199
) {
199200
propsFormat.push(<p className='stateprops'>{`${key}: ${data[key]}`}</p>);
200-
} else if (
201-
data[key] !== 'reactFiber' &&
202-
typeof data[key] === 'object' &&
203-
exclude.includes(key) !== true
204-
) {
205-
const result = formatProps(data[key]);
206-
nestedObj.push(result);
207201
}
202+
// else if (
203+
// data[key] !== 'reactFiber' &&
204+
// typeof data[key] === 'object'
205+
// exclude.includes(key) !== true
206+
// ) {
207+
// const result = formatProps(data[key]);
208+
// nestedObj.push(result);
209+
// }
208210
}
209-
if (nestedObj) {
210-
propsFormat.push(nestedObj);
211-
}
212-
213-
return propsFormat;
211+
// if (nestedObj) {
212+
// propsFormat.push(nestedObj);
213+
// }
214+
if (propsFormat.length) return propsFormat;
214215
};
215216

216217
const formatContext = (data) => {
217-
const propsFormat = [];
218-
const nestedObj = [];
218+
const contextFormat = [];
219+
// const nestedObj = [];
219220
for (const key in data) {
220-
propsFormat.push(<p className='stateprops'>{`${key}: ${data[key]}`}</p>);
221+
contextFormat.push(<p className='statecontext'>{`${key}: ${data[key]}`}</p>);
221222
}
222-
return propsFormat;
223+
return contextFormat;
223224
};
224225

225226
const formatState = (state) => {

‎src/backend/linkFiber.ts‎

Lines changed: 43 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
7777
},
7878
'*',
7979
);
80+
console.log('LinkFiber', { payload });
8081
}
8182

8283
/**
@@ -149,6 +150,7 @@ const exclude = new Set([
149150
'dependencies',
150151
'destroy',
151152
'effects',
153+
'element',
152154
'elementType',
153155
'firstBaseUpdate',
154156
'firstEffect',
@@ -158,18 +160,22 @@ const exclude = new Set([
158160
'lanes',
159161
'lastBaseUpdate',
160162
'lastEffect',
163+
'navigator',
161164
'memoizedState',
162165
'mode',
163166
'next',
164167
'nextEffect',
165168
'pending',
166169
'parentSub',
170+
'pathnameBase',
167171
'pendingProps',
168172
'Provider',
169173
'updateQueue',
170174
'ref',
171175
'responders',
172176
'return',
177+
'route',
178+
'routeContext',
173179
'shared',
174180
'sibling',
175181
'stateNode',
@@ -192,20 +198,26 @@ const exclude = new Set([
192198
// This recursive function is used to grab the state of children components
193199
// and push them into the parent componenent
194200
// react elements throw errors on client side of application - convert react/functions into string
195-
function convertDataToString(newObj, oldObj, depth = 0) {
196-
const newPropData = oldObj || {};
201+
function convertDataToString(newObj, newPropData = {}, depth = 0) {
202+
// const newPropData = oldObj;
197203
for (const key in newObj) {
198-
if (typeof newObj[key] === 'function') {
204+
// Skip keys that are in exclude list OR if there is no value at key
205+
if (exclude.has(key) || !newObj[key]) {
206+
continue;
207+
// newPropData[key] = 'reactFiber';
208+
// return newPropData;
209+
}
210+
// If value at key is a function, assign key with value 'function' to newPropData object
211+
else if (typeof newObj[key] === 'function') {
199212
newPropData[key] = 'function';
200-
} else if (exclude.has(key)) {
201-
newPropData[key] = 'reactFiber';
202-
return newPropData;
203-
} else if (typeof newObj[key] === 'object' && !exclude.has(key)) {
204-
newPropData[key] =
205-
depth > 10
206-
? 'convertDataToString reached max depth'
207-
: convertDataToString(newObj[key], null, depth + 1);
208-
} else if (!exclude.has(key)) {
213+
}
214+
// If value at key is an object, recusive call convertDataToString to traverse through all keys and append to newPropData object accodingly
215+
else if (typeof newObj[key] === 'object') {
216+
// newPropData[key] =
217+
depth > 10
218+
? 'convertDataToString reached max depth'
219+
: convertDataToString(newObj[key], newPropData, depth + 1);
220+
} else {
209221
newPropData[key] = newObj[key];
210222
}
211223
}
@@ -241,15 +253,25 @@ function createTree(
241253
dependencies,
242254
_debugHookTypes,
243255
} = currentFiber;
256+
console.log('LinkFiber', {
257+
tag,
258+
elementType:
259+
elementType?._context?.displayName ||
260+
elementType?.render?.name ||
261+
elementType?.name ||
262+
elementType,
263+
memoizedProps,
264+
memoizedState,
265+
});
244266

245-
// Tag === 5 signify this is a React Fragment. Each JSX component return a React fragment
267+
// Tag === 5 signify this is a React Fragment. Each JSX component return a React fragment => The parent of a React Fragment could be a JSX component
246268
if (tag === 5) {
247269
try {
248270
// Ensure parent component has memoizedProps property
249271
if (
250272
memoizedProps.children &&
251273
memoizedProps.children[0]?._owner?.memoizedProps !== undefined
252-
) {
274+
) {
253275
// Access the memoizedProps of the parent component
254276
const propsData = memoizedProps.children[0]._owner.memoizedProps;
255277
const newPropData = convertDataToString(
@@ -281,13 +303,13 @@ function createTree(
281303
let componentFound = false;
282304

283305
// check to see if the parent component has any state/props
284-
if (memoizedProps) {
285-
componentData.props = convertDataToString(memoizedProps, null);
306+
if (memoizedProps && Object.keys(memoizedProps).length) {
307+
componentData.props = convertDataToString(memoizedProps, {});
286308
}
287309

288-
// if the component uses the useContext hook, we want to grab the co text object and add it to the componentData object for that fiber
289-
if (tag === 0 && _debugHookTypes) {
290-
componentData.context = convertDataToString(dependencies?.firstContext?.memoizedValue, null);
310+
// if the component uses the useContext hook, we want to grab the context object and add it to the componentData object for that fiber
311+
if (tag === 0 && _debugHookTypes && dependencies?.firstContext?.memoizedValue) {
312+
componentData.context = convertDataToString(dependencies.firstContext.memoizedValue, null);
291313
}
292314
// Check if node is a stateful class component
293315
if (stateNode && stateNode.state && (tag === 0 || tag === 1 || tag === 2)) {
@@ -337,7 +359,7 @@ function createTree(
337359
selfBaseDuration,
338360
treeBaseDuration,
339361
};
340-
362+
console.log('props', componentData.props);
341363
let newNode = null;
342364

343365
// We want to add this fiber node to the snapshot
@@ -392,6 +414,7 @@ function createTree(
392414
circularComponentTable.add(sibling);
393415
createTree(sibling, newNode, true);
394416
}
417+
395418
return tree;
396419
}
397420
/**

‎src/backend/types/backendTypes.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,9 @@ export const ClassComponent = 1;
121121
export const IndeterminateComponent = 2; // Before we know whether it is function or class
122122
export const HostRoot = 3; // Root of a host tree. Could be nested inside another node.
123123
export const HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
124+
/**
125+
* Host Component: a type of component that represents a native DOM element in the browser environment, such as div, span, input, h1 etc.
126+
*/
124127
export const HostComponent = 5; // has stateNode of html elements
125128
export const HostText = 6;
126129
export const Fragment = 7;
@@ -144,6 +147,7 @@ export const LegacyHiddenComponent = 24;
144147

145148
/**
146149
* @type Fiber - The Fiber data structure that React uses to represent a component tree.
150+
* https://indepth.dev/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react
147151
* @member actualDuration - The time taken to render the current Fiber node and its descendants during the previous render cycle. This value is used to optimize the rendering of components and to provide performance metrics to developers.
148152
* @member actualStartTime - The time at which the rendering of the current Fiber node started during the previous render cycle.
149153
* @member child - Pointer to the first child.

0 commit comments

Comments
 (0)