working on createTree state display

Author: ngoczwolinski

src/backend/__tests__/masterTree.test.tsx

@@ -23,6 +23,7 @@ import {
   allowedComponentTypes,
   nextJSDefaultComponent,
   remixDefaultComponents,
+  exclude,
 } from '../models/filterConditions';
 import deepCopy from './ignore/deepCopy';
 
@@ -135,12 +136,20 @@ describe('master tree tests', () => {
       });
     });
     describe('Display component props information', () => {
-      const memoizedProps = {
+      const memoizedProps: {
+        propVal: number;
+        propFunc: Function;
+        propObj: { [key: string]: any };
+      } = {
         propVal: 0,
         propFunc: jest.fn,
         propObj: { dummy: 'dummy' },
       };
-      const props = {
+      const props: {
+        propVal: number;
+        propFunc: 'function';
+        propObj: string;
+      } = {
         propVal: 0,
         propFunc: 'function',
         propObj: JSON.stringify({ dummy: 'dummy' }),
@@ -190,24 +199,67 @@ describe('master tree tests', () => {
           expect(routerTree).toEqual(treeRoot);
         }
       });
-
-      it('should display props information of multiple components', () => {
-        mockChildNode.memoizedProps = memoizedProps;
+      it('should exclude reserved props name', () => {
         (mockChildTree.componentData as ComponentData).props = props;
         treeRoot.children.push(mockChildTree);
+
+        for (let propName of exclude) {
+          componentActionsRecord.clear(); // reset index counts for component actions
+          mockChildNode.memoizedProps = { ...memoizedProps, [propName]: 'anything' };
+          const tree = createTree(mockChildNode);
+          expect(tree).toEqual(treeRoot);
+        }
+      });
+      it('should skip circular props', () => {
+        mockChildNode.memoizedProps = {
+          ...memoizedProps,
+          cir: mockChildNode,
+          noCir: 'Not a circular props',
+        };
+        (mockChildTree.componentData as ComponentData).props = {
+          ...props,
+          noCir: 'Not a circular props',
+        };
+        treeRoot.children.push(mockChildTree);
+
+        const tree = createTree(mockChildNode);
+        expect(tree).toEqual(treeRoot);
+      });
+
+      xit('should display props information of multiple components', () => {
+        // Trim the root to get position of mockFiber for append child and sibiling
+        const mockFiberTreeTrimRoot = mockFiberTree.children[0];
+
+        // Add child(class) component with props:
+        mockChildNode.memoizedProps = { ...memoizedProps, name: 'child' };
+        (mockChildTree.componentData as ComponentData).props = { ...props, name: 'child' };
+        (mockChildTree.componentData as ComponentData).index = 0;
+        mockFiberTreeTrimRoot.children.push(mockChildTree);
+
+        // Add sibiling(functional) component with props:
         mockSiblingNode.memoizedProps = { ...memoizedProps, name: 'sibling' };
         (mockSiblingTree.componentData as ComponentData).props = { ...props, name: 'sibling' };
-        treeRoot.children.push(mockSiblingTree);
+        (mockSiblingTree.componentData as ComponentData).hooksIndex = [1];
+        mockFiberTreeTrimRoot.children.push(mockSiblingTree);
 
+        // Modify mockFiberNode to have 2 children: mockChildNode & mockSibilngNode
         mockFiberNode.child = mockChildNode;
-        mockFiberNode.sibling = mockSiblingNode;
+        mockFiberNode.child.sibling = mockSiblingNode;
+
         const tree = createTree(mockFiberNode);
-        const children = tree.children;
-        expect(children.length).toEqual(2);
-        expect(children[0]).toEqual(mockChildTree);
-        expect(children[1]).toEqual(mockSiblingTree);
-        expect(tree).toEqual(treeRoot);
+        expect(tree).toEqual(mockFiberTree);
+      });
+    });
+    describe('Display component states information', () => {
+      it('should display functional state information', () => {
+        mockChildNode.stateNode = {
+          
+        }
       });
+      xit('should display class state information', () => {});
+    });
+    xdescribe('Replace fromLinkFiber class value', () => {
+      it('NEED UNDERSTANDING OF WHY FROMLINKFIBER IS NEEDED TO MAKE TESTING', () => {});
     });
   });
 

src/backend/controllers/createTree/createTree.ts

@@ -234,8 +234,10 @@ export default function createTree(currentFiberNode: Fiber): Tree {
           // TODO: Refactor this, this is currently being used for Tree & Diff tabs
           newState = componentData.hooksState;
         } catch (err) {
-          console.log('ERROR: Failed Element during JSX parsing', {
+          console.log({
+            Message: 'Error in createTree during obtaining state from functionalComponent',
             componentName,
+            err,
           });
         }
       }

src/backend/controllers/createTree/statePropExtractors.ts

@@ -7,85 +7,12 @@ import {
   // object with tree structure
   Fiber,
 } from '../../types/backendTypes';
+import { exclude } from '../../models/filterConditions';
 // TODO: Determine what Component Data Type we are sending back for state, context, & props
 type ReactimeData = {
   [key: string]: any;
 };
-/**
- * A set of excluded props and variable name
- */
-const exclude = new Set([
-  'alternate',
-  'basename',
-  'baseQueue',
-  'baseState',
-  'child',
-  'childLanes',
-  'children',
-  'Consumer',
-  'context',
-  'create',
-  'deps',
-  'dependencies',
-  'destroy',
-  'dispatch',
-  'location',
-  'effects',
-  'element',
-  'elementType',
-  'firstBaseUpdate',
-  'firstEffect',
-  'flags',
-  'get key',
-  'getState',
-  'hash',
-  'key',
-  'lanes',
-  'lastBaseUpdate',
-  'lastEffect',
-  'liftedStore',
-  'navigator',
-  'memoizedState',
-  'mode',
-  'navigationType',
-  'next',
-  'nextEffect',
-  'pending',
-  'parentSub',
-  'pathnameBase',
-  'pendingProps',
-  'Provider',
-  'updateQueue',
-  'ref',
-  'replaceReducer',
-  'responders',
-  'return',
-  'route',
-  'routeContext',
-  'search',
-  'shared',
-  'sibling',
-  'state',
-  'store',
-  'subscribe',
-  'subscription',
-  'stateNode',
-  'tag',
-  'type',
-  '_calculateChangedBits',
-  '_context',
-  '_currentRenderer',
-  '_currentRenderer2',
-  '_currentValue',
-  '_currentValue2',
-  '_owner',
-  '_self',
-  '_source',
-  '_store',
-  '_threadCount',
-  '$$typeof',
-  '@@observable',
-]);
+
 // ------------FILTER DATA FROM REACT DEV TOOL && CONVERT TO STRING-------------
 /**
  * This function receives raw Data from REACT DEV TOOL and filter the Data based on the exclude list. The filterd data is then converted to string (if applicable) before being sent to reacTime front end.
@@ -218,11 +145,7 @@ export function getHooksNames(elementType: string): { hookName: string; varName:
   let AST: any;
   try {
     AST = JSXParser.parse(elementType).body;
-  } catch (e) {
-    throw Error('Error occurs at helpers getHooksName.ts Cannot parse functional component.');
-  }
-  // Begin search for hook names, only if ast has a body property.
-  try {
+    // Begin search for hook names, only if ast has a body property.
     // Statements get all the names of the hooks. For example: useCount, useWildcard, ...
     const statements: { hookName: string; varName: string }[] = [];
     /** All module exports always start off as a single 'FunctionDeclaration' type
@@ -261,7 +184,7 @@ export function getHooksNames(elementType: string): { hookName: string; varName:
     });
     return statements;
   } catch (err) {
-    throw new Error();
+    throw new Error('getHooksNameError' + err.message);
   }
 }
 

src/backend/models/filterConditions.ts

@@ -72,3 +72,79 @@ export const remixDefaultComponents = new Set([
   'Scripts',
   'LiveReload2',
 ]);
+
+export /**
+ * A set of excluded props and variable name
+ */
+const exclude = new Set([
+  'alternate',
+  'basename',
+  'baseQueue',
+  'baseState',
+  'child',
+  'childLanes',
+  'children',
+  'Consumer',
+  'context',
+  'create',
+  'deps',
+  'dependencies',
+  'destroy',
+  'dispatch',
+  'location',
+  'effects',
+  'element',
+  'elementType',
+  'firstBaseUpdate',
+  'firstEffect',
+  'flags',
+  'get key',
+  'getState',
+  'hash',
+  'key',
+  'lanes',
+  'lastBaseUpdate',
+  'lastEffect',
+  'liftedStore',
+  'navigator',
+  'memoizedState',
+  'mode',
+  'navigationType',
+  'next',
+  'nextEffect',
+  'pending',
+  'parentSub',
+  'pathnameBase',
+  'pendingProps',
+  'Provider',
+  'updateQueue',
+  'ref',
+  'replaceReducer',
+  'responders',
+  'return',
+  'route',
+  'routeContext',
+  'search',
+  'shared',
+  'sibling',
+  'state',
+  'store',
+  'subscribe',
+  'subscription',
+  'stateNode',
+  'tag',
+  'type',
+  '_calculateChangedBits',
+  '_context',
+  '_currentRenderer',
+  '_currentRenderer2',
+  '_currentValue',
+  '_currentValue2',
+  '_owner',
+  '_self',
+  '_source',
+  '_store',
+  '_threadCount',
+  '$$typeof',
+  '@@observable',
+]);

src/backend/types/backendTypes.ts

@@ -62,7 +62,7 @@ export interface ComponentData {
   actualStartTime?: number;
   selfBaseDuration?: number;
   treeBaseDuration?: number;
-  props: {};
+  props: { [key: string]: any };
   context: {};
   state: {} | null;
   hooksState: {} | null;