merging

Author: llam722

package.json

@@ -166,10 +166,10 @@
     "acorn-jsx": "^5.2.0",
     "apexcharts": "^3.23.1",
     "chai": "^4.2.0",
-    "d3": "^5.16.0",
-    "d3-scale-chromatic": "^2.0.0",
+    "d3": "^7.6.1",
+    "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^2.0.0",
-    "d3-zoom": "^1.8.3",
+    "d3-zoom": "^3.0.0",
     "immer": "^9.0.12",
     "intro.js": "^5.0.0",
     "intro.js-react": "^0.6.0",

src/app/components/Diff.tsx

@@ -13,7 +13,8 @@ interface DiffProps {
  * @param props props from maincontainer
  * @returns a diff tree or a string stating no state changes have happened
  */
-function Diff(props: DiffProps) {
+// LL added Record<string, unknown> for return statement on function
+function Diff(props: DiffProps): Record<string, unknown> {
   const { snapshot, show } = props;
   const [mainState] = useStoreContext();
   const { currentTab, tabs } = mainState; // k/v pairs of mainstate store object being created
@@ -28,7 +29,7 @@ function Diff(props: DiffProps) {
   }
 
   // cleaning preview from stateless data
-  const statelessCleanning = (obj:{name?:string; componentData?:object; state?:string|any;stateSnaphot?:object; children?:any[]}) => {
+  const statelessCleanning = (obj:{name?:string; componentData?:object; state?:string|any; stateSnaphot?:object; children?:any[]}) => {
     const newObj = { ...obj };
     if (newObj.name === 'nameless') {
       delete newObj.name;

src/app/containers/MainContainer.tsx

@@ -28,6 +28,7 @@ function MainContainer(): any {
   // this function handles Time Jump sidebar view
   const toggleActionContainer = () => {
     setActionView(!actionView);
+    // aside is like an added text that appears "on the side" aside some text.
     const toggleElem = document.querySelector('aside');
     toggleElem.classList.toggle('no-aside');
     // hides the record toggle button from Actions Container in Time Jump sidebar view
@@ -47,6 +48,7 @@ function MainContainer(): any {
     const currentPort = chrome.runtime.connect();
     // listen for a message containing snapshots from the background script
     currentPort.onMessage.addListener(
+    // parameter message is an object with following type script properties
       (message: {
         action: string;
         payload: Record<string, unknown>;

src/app/containers/StateContainer.tsx

@@ -1,5 +1,8 @@
 // @ts-nocheck
 import React, { useState } from 'react';
+/* <Router> that keeps the history of your “URL” in memory (does not read/write to the address bar)
+ Useful in tests and non-browser environments like React Native.
+*/
 import {
   MemoryRouter as Router,
   Route,
@@ -8,6 +11,7 @@ import {
 } from 'react-router-dom';
 import StateRoute from '../components/StateRoute';
 import DiffRoute from '../components/DiffRoute';
+
 interface StateContainerProps {
   snapshot: Record<
     number,

src/backend/helpers.ts

@@ -80,6 +80,7 @@ export const getHooksNames = (elementType: string): Array<string> => {
     return ['unknown'];
   }
 
+  // hookNames will contain an object with methods (functions)
   const hooksNames: any = {};
 
   // Begin search for hook names, only if ast has a body property.

src/backend/linkFiber.ts

@@ -547,7 +547,9 @@ function createTree(
  * linkFiber contains core module functionality, exported as an anonymous function.
  */
 export default (snap: Snapshot, mode: Mode): (() => void) => {
+  // checks for visiblity of document
   function onVisibilityChange(): void {
+    // hidden property = background tab/minimized window
     doWork = !document.hidden;
   }
   return () => {
@@ -559,7 +561,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
       action: 'devToolsInstalled',
       payload: 'devToolsInstalled'
     }, '*');
-    // reactInstance returns an object of the react
+    // reactInstance returns an object of the react, 1st element in map
     const reactInstance = devTools.renderers.get(1);
     // if no React Instance found then target is not a compatible app
     if (!reactInstance) { return; }

src/backend/tree.ts

@@ -127,7 +127,8 @@ class Tree {
       circularComponentTable.clear();
     }
     // creates copy of present node
-    let copy: Tree = new Tree(this.state, this.name, this.componentData, this.rtid, this.recoilDomNode);
+    let copy: Tree = new Tree(this.state, this.name, this.componentData, this.
+    \, this.recoilDomNode);
     delete copy.parent;
     circularComponentTable.add(this);
     copy = scrubUnserializableMembers(copy);