Merge pull request #129 from open-source-labs/d3-implementation

D3 implementation

Author: nusanam

.eslintrc

@@ -1,16 +1,29 @@
 {
   "extends": ["airbnb", "plugin:jest/recommended"],
   "root": true,
-  "plugins": ["jest"],
+  "plugins": ["jest", "react"],
+  "rules": {
+    "arrow-parens": [2, "as-needed"]
+  },
   "env": {
+    "es6": true,
     "jest/globals": true,
     "browser": true,
     "webextensions": true
   },
   "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly",
     "fetch": false
   },
-  "rules": {
-    "arrow-parens": [2, "as-needed"]
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "settings": {
+    "import/no-unresolved": "off"
   }
-}
+}

package-lock.json

@@ -41,14 +41,16 @@
     "css-loader": "^3.2.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.1",
+    "eslint": "^6.5.1",
+    "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^22.15.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.14.3",
-    "jest": "^24.8.0",
+    "eslint-plugin-react": "^7.15.1",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "jest": "^24.9.0",
     "jest-cli": "^24.8.0",
+    "jest-runner-eslint": "^0.7.4",
     "node-sass": "^4.12.0",
     "sass": "^1.22.9",
     "sass-loader": "^7.2.0",
@@ -64,6 +66,7 @@
     "d3-tip": "^0.9.1",
     "d3-zoom": "^1.8.3",
     "immer": "^3.2.0",
+    "jest-runner": "^24.9.0",
     "jsondiffpatch": "^0.3.11",
     "prop-types": "^15.7.2",
     "rc-slider": "^8.6.13",

package.json

@@ -1,4 +1,7 @@
-// Test 1: Should take in a function definition with 1 hook and return an object with the getter/setter
+// import { configure, shallow } from 'enzyme';
+
+// Test 1: Should take in a function definition with 1 hook
+// and return an object with the getter / setter
 // EXAMPLE INPUT FOR TEST
 /**
  * function UseStateHookTest() {
@@ -22,7 +25,14 @@
  * }
  */
 
- // TEST 2: Should take in multiple function definitions with hooks and return an object with all 4 properties
- // TEST 3: Should ignore any non-hook definitions
- // Test 4: Should return an empty object if no hooks found
- // Test 5: Should throw an error if input is invalid javascript
+// TEST 2: Should take in multiple function definitions
+// with hooks and return an object with all 4 properties
+// TEST 3: Should ignore any non-hook definitions
+// Test 4: Should return an empty object if no hooks found
+// Test 5: Should throw an error if input is invalid javascript
+
+describe('placeholder', () => {
+  it.skip('placeholder for tests', () => {
+    expect(1 + 1).toEqual(2);
+  });
+});

package/__tests__/astParser.test.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-filename-extension */
-import React, { Component, useState } from 'react';
+import React, { Component } from 'react';
 import { render } from 'react-dom';
 
 const linkFiberRequire = require('../linkFiber');
@@ -20,12 +20,12 @@ class App extends Component {
   }
 }
 
-// Need to create a functioanl component instance to test 
+// Need to create a functioanl component instance to test
 // Would need to be revised but here's the gist
 // const funcComponent = () => {
-//     const [ number, setNumber ] = useState(0); 
-//     const newNumber = setNumber(1); 
-    
+//     const [ number, setNumber ] = useState(0);
+//     const newNumber = setNumber(1);
+
 //     return (
 //       <div>{newNumber}</div>
 //     )

package/__tests__/linkFiber.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 const timeJumpRequire = require('../timeJump');
 
 class Component {
@@ -19,8 +20,8 @@ class FiberNode {
   }
 }
 
-// MVP FEATURE: Additional Testing 
-// Testing for useState and useContext 
+// MVP FEATURE: Additional Testing
+// Testing for useState and useContext
 
 
 describe('unit testing for timeJump.js', () => {

package/__tests__/timeJump.test.js

@@ -1,11 +1,12 @@
 const acorn = require('acorn');
 const jsx = require('acorn-jsx');
+
 const JSXParser = acorn.Parser.extend(jsx());
 
 // Helper function to grab the getters/setters from `elementType`
 module.exports = elementType => {
   // Initialize empty object to store the setters and getter
-  let ast = JSXParser.parse(elementType); 
+  let ast = JSXParser.parse(elementType);
   const hookState = {};
   // All module exports will always start off as a single 'FunctionDeclaration' type
   while (Object.hasOwnProperty.call(ast, 'body')) {
@@ -34,4 +35,4 @@ module.exports = elementType => {
     });
   }
   return hookState;
-}
+};

package/astParser.js

@@ -13,7 +13,8 @@ module.exports = (snap, mode) => {
 
   function sendSnapshot() {
     // don't send messages while jumping or while paused
-    // DEV: So that when we are jumping to an old snapshot it wouldn't think we want to create new snapshots
+    // DEV: So that when we are jumping to an old snapshot it
+    // wouldn't think we want to create new snapshots
     if (mode.jumping || mode.paused) return;
     const payload = snap.tree.getCopy();
     // console.log('payload', payload);
@@ -83,7 +84,7 @@ module.exports = (snap, mode) => {
 
   function createTree(currentFiber, tree = new Tree('root')) {
     if (!currentFiber) return tree;
-   
+
     const {
       sibling,
       stateNode,
@@ -103,9 +104,9 @@ module.exports = (snap, mode) => {
     // Check if the component uses hooks
     if (memoizedState && Object.hasOwnProperty.call(memoizedState, 'baseState')) {
       // Traverse through the currentFiber and extract the getters/setters
-      astHooks = astParser(elementType); 
-      saveState(astHooks); 
-      // Create a traversed property and assign to the evaluated result of 
+      astHooks = astParser(elementType);
+      saveState(astHooks);
+      // Create a traversed property and assign to the evaluated result of
       // invoking traverseHooks with memoizedState
       memoizedState.traversed = traverseHooks(memoizedState);
       nextTree = tree.appendChild(memoizedState);
@@ -131,7 +132,7 @@ module.exports = (snap, mode) => {
     } = container;
     // only assign internal rootp if it actually exists
     fiberRoot = _internalRoot || _reactRootContainer;
-  
+
     updateSnapShotTree();
     // send the initial snapshot once the content script has started up
     window.addEventListener('message', ({ data: { action } }) => {
@@ -145,5 +146,5 @@ module.exports = (snap, mode) => {
     // return getNextImport('./UseStateHook');
     // return 'Testing outside';
     // const OtherComponent = loadable(() => import('./OtherComponent'))
-  }
-};
+  };
+};

package/linkFiber.js

@@ -30,7 +30,8 @@ class Tree {
   getCopy(copy = new Tree('root', true)) {
     // copy state of children
     copy.children = this.children.map(
-      child => new Tree(child.component.state || child.component.traversed, true, child.component.constructor.name),
+      child => new Tree(child.component.state
+        || child.component.traversed, true, child.component.constructor.name),
     );
 
     // copy children's children recursively
@@ -40,8 +41,8 @@ class Tree {
 
   // print out the tree in the console
   // DEV: Process may be different for useState components
-  // BUG FIX: Don't print the Router as a component 
-  // Change how the children are printed 
+  // BUG FIX: Don't print the Router as a component
+  // Change how the children are printed
   print() {
     const children = ['children: '];
     // DEV: What should we push instead for components using hooks (it wouldn't be state)

package/tree.js

@@ -1,26 +1,27 @@
-const TestRunner = require("jest-runner")
+// import TestRunner from 'jest-runner';
 
 // Unit Test Cases for Charts
-  // description: lifecycle methods
-    // Component should call make3dTree upon mounting
-    // object 'root' should be a deep clone of the snapshot
-      // i.e.: this.props.snapshot !== root
+// description: lifecycle methods
+// Component should call make3dTree upon mounting
+// object 'root' should be a deep clone of the snapshot
+// i.e.: this.props.snapshot !== root
 
-  // description: maked3Tree
-    // Should call function 'removed3tree' only once
-    // Should call appropriate function upon triggering a certain event on the tooltip div
-      // i.e.:
-      // 'mouseover' event -> 'tipMouseover' function
-      // 'mouseout' event -> 'tipMouseout' function
-    // Should call appropriate function upon triggering a certain event on a node (nested under the 'update' function)
-      // i.e.:
-      // 'mouseover' event -> 'mouseover' function
-      // 'mouseout' event -> 'mouseout' function
-      // 'click' event -> 'click' function
-    // Should call function 'update' at least once
+// description: maked3Tree
+// Should call function 'removed3tree' only once
+// Should call appropriate function upon triggering a certain event on the tooltip div
+// i.e.:
+// 'mouseover' event -> 'tipMouseover' function
+// 'mouseout' event -> 'tipMouseout' function
+// Should call appropriate function upon triggering a certain event on a node
+// (nested under the 'update' function)
+// i.e.:
+// 'mouseover' event -> 'mouseover' function
+// 'mouseout' event -> 'mouseout' function
+// 'click' event -> 'click' function
+// Should call function 'update' at least once
 
-    describe('placeholder', () => {
-      xit('placeholder for tests', () => {
-        expect(1+1).toEqual(2);
-      })
-    })
+describe('placeholder', () => {
+  it.skip('placeholder for tests', () => {
+    expect(1 + 1).toEqual(2);
+  });
+});