merged tree ts

Author: nmwenz90

package-lock.json

@@ -74,7 +74,7 @@ function Diff(props: DiffProps) {
 
   if (previous === undefined || delta === undefined) {
     // console.log('reacthtml parser -->', ReactHtmlParser(html), typeof ReactHtmlParser(html));
-    return <div className="noState"> No state change detected. Trigger an event to change state </div>;
+    return <div className="no-data-message"> No state change detected. Trigger an event to change state </div>;
   }
   return <div>{ReactHtmlParser(html)}</div>;
 }

src/app/components/Diff.tsx

@@ -25,8 +25,10 @@ export default (state, action) => produce(state, draft => {
 
     const objChildArray = [];
     // eslint-disable-next-line no-restricted-syntax
-    for (const objChild of obj.children) {
-      objChildArray.push(findName(index, objChild));
+    if (obj) {
+      for (const objChild of obj.children) {
+        objChildArray.push(findName(index, objChild));
+      }
     }
     // eslint-disable-next-line no-restricted-syntax
     for (const objChildName of objChildArray) {

src/app/reducers/mainReducer.js

@@ -1,6 +1,7 @@
 .json-tree {
   margin: 10px;
   padding: 0;
+  width: 900px;
   background-color: $brand-color;
   list-style: none;
 }

src/app/styles/components/_jsonTree.scss

@@ -43,9 +43,8 @@
 
 .no-data-message {
   font: 1.2em sans-serif;
+  color: white;
   padding: 10px;
-  // margin: 10px;
-  color: hsl(0%, 50%, 50%);
 }
 
 .state-container {

src/app/styles/layout/_stateContainer.scss

@@ -51,7 +51,12 @@ export const throttle = (f, t) => {
 // Helper function to grab the getters/setters from `elementType`
 export const getHooksNames = elementType => {
   // Initialize empty object to store the setters and getter
-  let ast = JSXParser.parse(elementType);
+  let ast;
+  try {
+    ast = JSXParser.parse(elementType);
+  } catch(e) {
+    return ['unknown'];
+  }
   const hookState = {};
   const hooksNames = {};
 

src/backend/helpers.js

@@ -18,9 +18,17 @@ function scrubUnserializableMembers(tree: Tree): Tree {
   return tree;
 }
 
+function serializeState(state) {
+  try {
+    return JSON.parse(JSON.stringify(state));
+  } catch (e) {
+    return 'circularState';
+  };
+}
+
 /**
  *
- * 
+ * This is the current snapshot that is being sent to the snapshots array.
  *
  */
 class Tree {
@@ -43,7 +51,7 @@ class Tree {
   parent: Tree
 
   constructor(state : string | {}, name = 'nameless', componentData: {} = {}) {
-    this.state = state === 'root' ? 'root' : JSON.parse(JSON.stringify(state));
+    this.state = state === 'root' ? 'root' : serializeState(state); // JSON.parse(JSON.stringify(state));
     this.name = name;
     this.componentData = componentData ? JSON.parse(JSON.stringify(componentData)) : {};
     this.children = [];
@@ -69,10 +77,10 @@ class Tree {
    */
   cleanTreeCopy(): Tree {
     /**
-     * @object circularComponentTable : Clears circular component
-     * table only on first call, not recursive ones
+     * @object circularComponentTable : Clears circular component table only on first call, not recursive ones
      *
      */
+    //
     if (copyInstances === 0) {
       copyInstances++;
       circularComponentTable.clear();

src/backend/tree.ts

@@ -0,0 +1,3 @@
+/node_modules/*
+!/node_modules/reactime
+.DS_Store