Merge branch 'dev' into brian/feature

Author: yangbrian310

src/backend/__tests__/timeJump.test.ts

@@ -62,7 +62,7 @@ describe('unit testing for timeJump.ts', () => {
     ];
 
     snapShot = { tree };
-    timeJump = timeJumpRequire(snapShot, mode);
+    timeJump = timeJumpRequire(mode);
   });
   test('calling the initial require should return a function', () => {
     expect(typeof timeJumpRequire).toBe('function');

src/backend/index.ts

@@ -29,13 +29,13 @@ const mode: Mode = {
 // linkFiber is now assigned the default function exported from the file linkFiber.ts
 const linkFiber = linkFiberStart(snapShot, mode);
 // timeJump is now assigned the default function exported from the file timeJump.ts
-const timeJump = timeJumpStart(snapShot, mode);
+const timeJump = timeJumpStart(mode);
 
 // * Event listener for time-travel actions
 window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
   switch (action) {
     case 'jumpToSnap':
-      timeJump(payload, true); // * This sets state with given payloa
+      timeJump(payload, true); // * This sets state with given payload
       break;
 
     case 'setPause':

src/backend/linkFiber.ts

@@ -2,30 +2,29 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable max-len */
-// import 'core-js';
 /* eslint-disable indent */
 /* eslint-disable brace-style */
 /* eslint-disable comma-dangle */
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable func-names */
 /* eslint-disable no-use-before-define */
 /* eslint-disable no-param-reassign */
+/* eslint-disable-next-line no-mixed-operators */
 
 // import typescript types
 import {
   // tree
   Snapshot,
   // jump, pause
   Mode,
-  ComponentData,
   // array of state and component
   HookStates,
   // object with tree structure
   Fiber,
 } from './types/backendTypes';
 // import function that creates a tree
 import Tree from './tree';
-// passes the data down to its components ?
+// passes the data down to its components
 import componentActionsRecord from './masterState';
 import routes from './routes';
 
@@ -43,7 +42,6 @@ declare global {
 let fiberRoot = null;
 let doWork = true;
 const circularComponentTable = new Set();
-let initialstart = false;
 let rtidCounter = 0;
 let rtid = null;
 
@@ -102,20 +100,9 @@ function updateSnapShotTree(snap: Snapshot, mode: Mode): void {
   sendSnapshot(snap, mode);
 }
 
-// updating tree depending on current mode on the panel (pause, etc)
-// function sendDevToolsInfo(snap: Snapshot, mode: Mode): void {
-//   window.postMessage(
-//     {
-//       action: 'recordSnap',
-//       payload,
-//     },
-//     '*'
-//   );
-// }
-
 /**
  * @method traverseHooks
- * @param memoizedState memoizedState property on a stateful fctnl component's FiberNode object
+ * @param memoizedState memoizedState property on a stateful functional component's FiberNode object
  * @return An array of array of HookStateItem objects
  *
  * Helper function to traverse through memoizedState and inject instrumentation to update our state tree
@@ -155,7 +142,6 @@ const exclude = ['alternate', '_owner', '_store', 'get key', 'ref', '_self', '_s
 // react elements throw errors on client side of application - convert react/functions into string
 function convertDataToString(newObj, oldObj) {
   const newPropData = oldObj || {};
-  // const newPropData = Array.isArray(obj) === true ? {} : [];
   for (const key in newObj) {
     if (typeof newObj[key] === 'function') {
       newPropData[key] = 'function';
@@ -292,7 +278,6 @@ function createTree(
   let newNode = null;
 
   // We want to add this fiber node to the snapshot
-  // eslint-disable-next-line no-mixed-operators
   if (componentFound || newState === 'stateless' && !newState.hooksState) {
       if (
         currentFiber.child
@@ -359,7 +344,7 @@ function createTree(
  * @return a function to be invoked by index.js that initiates snapshot monitoring
  * linkFiber contains core module functionality, exported as an anonymous function.
  */
-export default (snap: Snapshot, mode: Mode): (() => void) => {
+ export default (snap: Snapshot, mode: Mode): (() => void) => {
   // checks for visiblity of document
   function onVisibilityChange(): void {
     // hidden property = background tab/minimized window

src/backend/masterState.ts

@@ -4,7 +4,6 @@
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
 
-// import {Hook}
 import {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   HookStateItem, // obj with state and component
@@ -18,7 +17,8 @@ import {
 // For functional components that utilize Hooks, there will be one "component"
 // for each setter/getter every time we have a new snapshot
 let componentActionsRecord: HookStates = [];
-let index = 0;
+let index: number;
+index = 0;
 
 export default {
   clear: () => {
@@ -40,7 +40,7 @@ export default {
       ? componentActionsRecord[inputIndex].component
       : undefined),
   // this is used for react hooks - hooks will be passed in as an array from timeJump.ts
-  getComponentByIndexHooks: (inputIndex: Array<number> = []): any => {
+  getComponentByIndexHooks: (inputIndex: Array<number> = []): Array<any> => {
     const multiDispatch = [];
     for (let i = 0; i < inputIndex.length; i++) {
       if (componentActionsRecord[inputIndex[i]]) {

src/backend/module.d.ts

@@ -1,4 +1,18 @@
+// core-js is a  library that includes polyfill for many types of native js
+// features such as promise, symbols, collections, typed arrays, etc.
+// Used in reactime to make sure our newest code
+// can run on outdated platforms and with outdated applications
 declare module 'core-js';
+// Regenerator runtime provides runtime support for compiled/transpiled async functions.
+// Like babel that compiles modern js into older js,
+// async functions are also compiled to run on engines that don't support async.
+// After babel does the syntax transformation or transpiles the async functions,
+// the resulting code uses regen runtime to run
+// https://stackoverflow.com/questions/65378542/what-is-regenerator-runtime-npm-package-used-for
 declare module 'regenerator-runtime/runtime';
+// Acorn is a jsx parser that was experimental to be faster than than the react.js jsx parser,
+// however is not maintained at this time, last update was more than one year ago 10-5-21
 declare module 'acorn-jsx';
+// Traspiler to traspile code to JSX AST but to use with regular es5 compliant js,
+// still needs babel and buble trasnpilers which use acorn-jsx under the hood
 declare module 'acorn';

src/backend/timeJump.ts

@@ -1,4 +1,3 @@
-import { Console } from 'console';
 import routes from './routes';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -22,10 +21,10 @@ import routes from './routes';
 import componentActionsRecord from './masterState';
 
 const circularComponentTable = new Set();
-export default (origin, mode) => {
+export default mode => {
   // Recursively change state of tree
   // Set the state of the origin tree if the component is stateful
-  function jump(target, firstCall = false) {
+  function jump(target) {
     if (!target) return;
     if (target.state === 'stateless') {
       target.children.forEach(child => jump(child));
@@ -44,8 +43,8 @@ export default (origin, mode) => {
         // prevState contains the states of the snapshots we are jumping FROM, not jumping TO
         prevState => {
           Object.keys(prevState).forEach(key => {
-            // if conditional below does not appear to ever be reached if all states are defined - leaving code in just in case codebases do have undefined states
-            if (!target.state[key] === undefined) {
+            // the if conditional below does not appear to ever be reached if all states are defined - leaving code in just in case codebases do have undefined states
+            if (target.state[key] !== undefined) {
               target.state[key] = undefined;
             }
           });
@@ -82,6 +81,7 @@ export default (origin, mode) => {
     }
   }
 
+  // payload from index.ts is assigned to target
   return (target, firstCall = false) => {
     // * Setting mode disables setState from posting messages to window
     mode.jumping = true;

src/backend/tree.ts

@@ -1,7 +1,6 @@
 /* eslint-disable no-plusplus */
 /* eslint-disable max-len */
 /* eslint-disable @typescript-eslint/ban-types */
-// import 'core-js';
 /* eslint-disable no-multiple-empty-lines */
 /* eslint-disable max-classes-per-file */
 /* eslint-disable no-console */