Merge pull request #6 from oslabs-beta/backend

Backend - Link Fiber

Author: dev-plam

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

@@ -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,
@@ -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) => {

src/backend/linkFiber.ts

@@ -77,6 +77,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
     },
     '*',
   );
+  console.log('LinkFiber', { payload });
 }
 
 /**
@@ -149,6 +150,7 @@ const exclude = new Set([
   'dependencies',
   'destroy',
   'effects',
+  'element',
   'elementType',
   'firstBaseUpdate',
   'firstEffect',
@@ -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',
@@ -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];
     }
   }
@@ -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(
@@ -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)) {
@@ -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
@@ -392,6 +414,7 @@ function createTree(
     circularComponentTable.add(sibling);
     createTree(sibling, newNode, true);
   }
+
   return tree;
 }
 /**

src/backend/types/backendTypes.ts

@@ -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;
@@ -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.