Skip to content

Commit

Permalink
Merge pull request #6 from oslabs-beta/backend
Browse files Browse the repository at this point in the history 
Backend - Link Fiber
  • Loading branch information
@dev-plam
dev-plam authored Mar 8, 2023
2 parents 41e15be + da3c6d0 commit 1054fc4
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 104 deletions.
169 changes: 85 additions & 84 deletions src/app/components/StateRoute/ComponentMap/ComponentMap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,70 +20,70 @@ import getLinkComponent from './getLinkComponent';
import { toggleExpanded, setCurrentTabInApp } from '../../../actions/actions';
import { useStoreContext } from '../../../store';

const exclude = [
'childExpirationTime',
'staticContext',
'_debugSource',
'actualDuration',
'actualStartTime',
'treeBaseDuration',
'_debugID',
'_debugIsCurrentlyTiming',
'selfBaseDuration',
'expirationTime',
'effectTag',
'alternate',
'_owner',
'_store',
'get key',
'ref',
'_self',
'_source',
'firstBaseUpdate',
'updateQueue',
'lastBaseUpdate',
'shared',
'responders',
'pending',
'lanes',
'childLanes',
'effects',
'memoizedState',
'pendingProps',
'lastEffect',
'firstEffect',
'tag',
'baseState',
'baseQueue',
'dependencies',
'Consumer',
'context',
'_currentRenderer',
'_currentRenderer2',
'mode',
'flags',
'nextEffect',
'sibling',
'create',
'deps',
'next',
'destroy',
'parentSub',
'child',
'key',
'return',
'children',
'$$typeof',
'_threadCount',
'_calculateChangedBits',
'_currentValue',
'_currentValue2',
'Provider',
'_context',
'stateNode',
'elementType',
'type',
];
// const exclude = [
// 'childExpirationTime',
// 'staticContext',
// '_debugSource',
// 'actualDuration',
// 'actualStartTime',
// 'treeBaseDuration',
// '_debugID',
// '_debugIsCurrentlyTiming',
// 'selfBaseDuration',
// 'expirationTime',
// 'effectTag',
// 'alternate',
// '_owner',
// '_store',
// 'get key',
// 'ref',
// '_self',
// '_source',
// 'firstBaseUpdate',
// 'updateQueue',
// 'lastBaseUpdate',
// 'shared',
// 'responders',
// 'pending',
// 'lanes',
// 'childLanes',
// 'effects',
// 'memoizedState',
// 'pendingProps',
// 'lastEffect',
// 'firstEffect',
// 'tag',
// 'baseState',
// 'baseQueue',
// 'dependencies',
// 'Consumer',
// 'context',
// '_currentRenderer',
// '_currentRenderer2',
// 'mode',
// 'flags',
// 'nextEffect',
// 'sibling',
// 'create',
// 'deps',
// 'next',
// 'destroy',
// 'parentSub',
// 'child',
// 'key',
// 'return',
// 'children',
// '$$typeof',
// '_threadCount',
// '_calculateChangedBits',
// '_currentValue',
// '_currentValue2',
// 'Provider',
// '_context',
// 'stateNode',
// 'elementType',
// 'type',
// ];

const defaultMargin = {
top: 30,
Expand Down Expand Up @@ -188,38 +188,39 @@ export default function ComponentMap({
};

const formatProps = (data) => {
console.log('ComponentMap', { data });
const propsFormat = [];
const nestedObj = [];
// const nestedObj = [];
for (const key in data) {
if (
data[key] !== 'reactFiber' &&
typeof data[key] !== 'object' &&
exclude.includes(key) !== true
// data[key] !== 'reactFiber' &&
typeof data[key] !== 'object'
// exclude.includes(key) !== true
) {
propsFormat.push(<p className='stateprops'>{`${key}: ${data[key]}`}</p>);
} else if (
data[key] !== 'reactFiber' &&
typeof data[key] === 'object' &&
exclude.includes(key) !== true
) {
const result = formatProps(data[key]);
nestedObj.push(result);
}
// else if (
// data[key] !== 'reactFiber' &&
// typeof data[key] === 'object'
// exclude.includes(key) !== true
// ) {
// const result = formatProps(data[key]);
// nestedObj.push(result);
// }
}
if (nestedObj) {
propsFormat.push(nestedObj);
}

return propsFormat;
// if (nestedObj) {
// propsFormat.push(nestedObj);
// }
if (propsFormat.length) return propsFormat;
};

const formatContext = (data) => {
const propsFormat = [];
const nestedObj = [];
const contextFormat = [];
// const nestedObj = [];
for (const key in data) {
propsFormat.push(<p className='stateprops'>{`${key}: ${data[key]}`}</p>);
contextFormat.push(<p className='statecontext'>{`${key}: ${data[key]}`}</p>);
}
return propsFormat;
return contextFormat;
};

const formatState = (state) => {
Expand Down
63 changes: 43 additions & 20 deletions src/backend/linkFiber.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
},
'*',
);
console.log('LinkFiber', { payload });
}

/**
Expand Down Expand Up @@ -149,6 +150,7 @@ const exclude = new Set([
'dependencies',
'destroy',
'effects',
'element',
'elementType',
'firstBaseUpdate',
'firstEffect',
Expand All @@ -158,18 +160,22 @@ const exclude = new Set([
'lanes',
'lastBaseUpdate',
'lastEffect',
'navigator',
'memoizedState',
'mode',
'next',
'nextEffect',
'pending',
'parentSub',
'pathnameBase',
'pendingProps',
'Provider',
'updateQueue',
'ref',
'responders',
'return',
'route',
'routeContext',
'shared',
'sibling',
'stateNode',
Expand All @@ -192,20 +198,26 @@ const exclude = new Set([
// This recursive function is used to grab the state of children components
// and push them into the parent componenent
// react elements throw errors on client side of application - convert react/functions into string
function convertDataToString(newObj, oldObj, depth = 0) {
const newPropData = oldObj || {};
function convertDataToString(newObj, newPropData = {}, depth = 0) {
// const newPropData = oldObj;
for (const key in newObj) {
if (typeof newObj[key] === 'function') {
// Skip keys that are in exclude list OR if there is no value at key
if (exclude.has(key) || !newObj[key]) {
continue;
// newPropData[key] = 'reactFiber';
// return newPropData;
}
// If value at key is a function, assign key with value 'function' to newPropData object
else if (typeof newObj[key] === 'function') {
newPropData[key] = 'function';
} else if (exclude.has(key)) {
newPropData[key] = 'reactFiber';
return newPropData;
} else if (typeof newObj[key] === 'object' && !exclude.has(key)) {
newPropData[key] =
depth > 10
? 'convertDataToString reached max depth'
: convertDataToString(newObj[key], null, depth + 1);
} else if (!exclude.has(key)) {
}
// If value at key is an object, recusive call convertDataToString to traverse through all keys and append to newPropData object accodingly
else if (typeof newObj[key] === 'object') {
// newPropData[key] =
depth > 10
? 'convertDataToString reached max depth'
: convertDataToString(newObj[key], newPropData, depth + 1);
} else {
newPropData[key] = newObj[key];
}
}
Expand Down Expand Up @@ -241,15 +253,25 @@ function createTree(
dependencies,
_debugHookTypes,
} = currentFiber;
console.log('LinkFiber', {
tag,
elementType:
elementType?._context?.displayName ||
elementType?.render?.name ||
elementType?.name ||
elementType,
memoizedProps,
memoizedState,
});

// Tag === 5 signify this is a React Fragment. Each JSX component return a React fragment
// 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
if (tag === 5) {
try {
// Ensure parent component has memoizedProps property
if (
memoizedProps.children &&
memoizedProps.children[0]?._owner?.memoizedProps !== undefined
) {
) {
// Access the memoizedProps of the parent component
const propsData = memoizedProps.children[0]._owner.memoizedProps;
const newPropData = convertDataToString(
Expand Down Expand Up @@ -281,13 +303,13 @@ function createTree(
let componentFound = false;

// check to see if the parent component has any state/props
if (memoizedProps) {
componentData.props = convertDataToString(memoizedProps, null);
if (memoizedProps && Object.keys(memoizedProps).length) {
componentData.props = convertDataToString(memoizedProps, {});
}

// 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
if (tag === 0 && _debugHookTypes) {
componentData.context = convertDataToString(dependencies?.firstContext?.memoizedValue, null);
// if the component uses the useContext hook, we want to grab the context object and add it to the componentData object for that fiber
if (tag === 0 && _debugHookTypes && dependencies?.firstContext?.memoizedValue) {
componentData.context = convertDataToString(dependencies.firstContext.memoizedValue, null);
}
// Check if node is a stateful class component
if (stateNode && stateNode.state && (tag === 0 || tag === 1 || tag === 2)) {
Expand Down Expand Up @@ -337,7 +359,7 @@ function createTree(
selfBaseDuration,
treeBaseDuration,
};

console.log('props', componentData.props);
let newNode = null;

// We want to add this fiber node to the snapshot
Expand Down Expand Up @@ -392,6 +414,7 @@ function createTree(
circularComponentTable.add(sibling);
createTree(sibling, newNode, true);
}

return tree;
}
/**
Expand Down
4 changes: 4 additions & 0 deletions src/backend/types/backendTypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,9 @@ export const ClassComponent = 1;
export const IndeterminateComponent = 2; // Before we know whether it is function or class
export const HostRoot = 3; // Root of a host tree. Could be nested inside another node.
export const HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
/**
* Host Component: a type of component that represents a native DOM element in the browser environment, such as div, span, input, h1 etc.
*/
export const HostComponent = 5; // has stateNode of html elements
export const HostText = 6;
export const Fragment = 7;
Expand All @@ -144,6 +147,7 @@ export const LegacyHiddenComponent = 24;

/**
* @type Fiber - The Fiber data structure that React uses to represent a component tree.
* https://indepth.dev/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react
* @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.
* @member actualStartTime - The time at which the rendering of the current Fiber node started during the previous render cycle.
* @member child - Pointer to the first child.
Expand Down

0 comments on commit 1054fc4

Please sign in to comment.