merged dev

Author: mylee1995

.eslintrc

@@ -1,13 +1,16 @@
 {
   "extends": ["airbnb", "plugin:jest/recommended"],
   "root": true,
-	"plugins": ["jest"],
+  "plugins": ["jest"],
   "env": {
     "jest/globals": true,
     "browser": true,
-    "webextensions": true, 
+    "webextensions": true
   },
-	"globals": { 
-    "fetch": false,
+  "globals": {
+    "fetch": false
+  },
+  "rules": {
+    "arrow-parens": [2, "as-needed"]
   }
 }

.travis.yml

@@ -0,0 +1,12 @@
+services:
+  - docker
+script:
+  - docker-compose up --abort-on-container-exit
+deploy:
+  provider: script
+  skip_cleanup: true
+  on:
+    branches:
+      only:
+        - dev
+        - master

docker-compose.yml

@@ -1,11 +1,9 @@
-version: '3'
+version: '2'
 services:
   test:
     image: reacttt/test-lint
     container_name: reacttt-test-lint
     volumes:
       - .:/usr/src/app
-      - node_modules:/usr/src/app/node_modules
-    command: bash -c "npm run lint && npm test"
-volumes:
-  node_modules:
+      - /usr/src/app/node_modules
+    command: npm run docker-test-lint

package.json

@@ -8,7 +8,8 @@
     "test": "jest --verbose --coverage --watchAll",
     "lint": "eslint --ext .js --ext .jsx src",
     "docker-build": "docker build -t reacttt/test-lint .",
-    "docker-check": "docker-compose up --abort-on-container-exit"
+    "docker-check": "docker-compose up --abort-on-container-exit",
+    "docker-test-lint": "eslint --ext .js --ext .jsx src && jest --verbose"
   },
   "keywords": [
     "react",

package/readme.md

@@ -0,0 +1,70 @@
+# React-Time-Travel
+
+A debugging tool for React. Records state whenever state is changed and allows user to jump to any previous recorded state.
+
+Two parts are needed for this tool to function. The chrome extension must be installed, and the NPM package must be installed and used in the React code.
+
+## Installing
+
+1. Download the Chrome extension from Chrome Web Store.
+
+2. Install the [npm package](https://www.npmjs.com/package/react-time-travel) in your code.
+```
+npm i react-time-travel
+```
+3. Call the library method on your root container after rendering your App.
+
+```
+const reactTimeTravel = require('react-time-travel');
+
+const rootContainer = document.getElementById('root');
+ReactDom.render(<App />, rootContainer);
+
+reactTimeTravel(rootContainer);
+```
+
+4. Done! That's all you have to do to link your React project to our library.
+
+## How to Use
+
+After installing both the Chrome extension and the npm package, just open up your project in the browser. 
+
+Then open up your Chrome DevTools. There'll be a new tab called React-Time-Travel.
+
+## Features
+
+### Recording
+
+Whenever state is changed (whenever setState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the React-Time-Travel panel. 
+
+### Viewing
+
+You can click on a snapshot to view your app's state. State can be visualized in a JSON or a tree. 
+
+The selected snapshot can also be diffed/compared with the current dom.
+
+### Jumping
+
+The most important feature of all. Jumping to any previous recorded snapshot. Hitting the jump button on any snapshot will change the dom by setting their state. One important thing to note. This library does not work well when mixing React with direct DOM manipulation. Since DOM manipulation doesn't change any React state, this library cannot record or even detect that change. Of course, you should be avoiding mixing the two in the first place.
+
+### Others
+
+Other handy features include: 
+* multiple tabs support
+* a slider to move through snapshots quickly
+* a play button to move through snapshots automatically
+* a pause which button stops recording each snapshot
+* a lock button to freeze the DOM in place. setState will lose all functionality while the extension is locked
+* a persist button to keep snapshots upon refresh. handy when changing code and debugging
+* export/import the current snapshots in memory
+
+## Authors
+
+* **Ryan Dang** - [@rydang](https://github.com/rydang)
+* **Bryan Lee** - [@mylee1995](https://github.com/mylee1995)
+* **Josh Kim** - [@joshua0308](https://github.com/joshua0308)
+* **Sierra Swaby** - [@starkspark](https://github.com/starkspark)
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

package/tree.js

@@ -4,7 +4,9 @@ class Tree {
     // give it a special state = 'root'
     // a setState function that just calls the callback instantly
     if (!useStateInstead) {
-      this.component = (component === 'root') ? { state: 'root',  setState: (partial, callback) => callback() } : component;
+      this.component = component === 'root'
+        ? { state: 'root', setState: (partial, callback) => callback() }
+        : component;
     } else {
       this.state = component;
       this.name = name;
@@ -21,7 +23,9 @@ class Tree {
   // deep copies only the state of each component and creates a new tree
   getCopy(copy = new Tree('root', true)) {
     // copy state of children
-    copy.children = this.children.map(child => new Tree(child.component.state, true, child.component.constructor.name));
+    copy.children = this.children.map(
+      child => new Tree(child.component.state, true, child.component.constructor.name),
+    );
 
     // copy children's children recursively
     this.children.forEach((child, i) => child.getCopy(copy.children[i]));
@@ -31,15 +35,14 @@ class Tree {
   // print out the tree in the console
   print() {
     const children = ['children: '];
-    this.children.forEach((child) => {
+    this.children.forEach(child => {
       children.push(child.state || child.component.state);
     });
     if (this.name) console.log(this.name);
     if (children.length === 1) {
       console.log(this.state || this.component.state);
-    }
-    else console.log(this.state || this.component.state, ...children);
-    this.children.forEach((child) => {
+    } else console.log(this.state || this.component.state, ...children);
+    this.children.forEach(child => {
       child.print();
     });
   }

readme.md

@@ -8,7 +8,7 @@ Two parts are needed for this tool to function. The chrome extension must be ins
 
 1. Download the Chrome extension from Chrome Web Store.
 
-2. Install the npm package in your code.
+2. Install the [npm package](https://www.npmjs.com/package/react-time-travel) in your code.
 ```
 npm i react-time-travel
 ```
@@ -31,6 +31,33 @@ After installing both the Chrome extension and the npm package, just open up you
 
 Then open up your Chrome DevTools. There'll be a new tab called React-Time-Travel.
 
+## Features
+
+### Recording
+
+Whenever state is changed (whenever setState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the React-Time-Travel panel. 
+
+### Viewing
+
+You can click on a snapshot to view your app's state. State can be visualized in a JSON or a tree. 
+
+The selected snapshot can also be diffed/compared with the current dom.
+
+### Jumping
+
+The most important feature of all. Jumping to any previous recorded snapshot. Hitting the jump button on any snapshot will change the dom by setting their state. One important thing to note. This library does not work well when mixing React with direct DOM manipulation. Since DOM manipulation doesn't change any React state, this library cannot record or even detect that change. Of course, you should be avoiding mixing the two in the first place.
+
+### Others
+
+Other handy features include: 
+* multiple tabs support
+* a slider to move through snapshots quickly
+* a play button to move through snapshots automatically
+* a pause which button stops recording each snapshot
+* a lock button to freeze the DOM in place. setState will lose all functionality while the extension is locked
+* a persist button to keep snapshots upon refresh. handy when changing code and debugging
+* export/import the current snapshots in memory
+
 ## Authors
 
 * **Ryan Dang** - [@rydang](https://github.com/rydang)

src/app/__tests__/MainContainer.test.js

@@ -38,12 +38,12 @@ global.chrome = chrome;
 let eventListener;
 const port = {
   onMessage: {
-    addListener: ((fn) => {
+    addListener: fn => {
       eventListener = fn;
-    }),
+    },
   },
   onDisconnect: {
-    addListener: () => { },
+    addListener: () => {},
   },
 };
 chrome.runtime.connect.returns(port);

src/app/__tests__/action.test.jsx

@@ -56,12 +56,12 @@ describe('unit testing for Action.jsx', () => {
     });
 
     test('should invoke dispatch method when clicked', () => {
-      wrapper.find('.jump-button').simulate('click', { stopPropagation() { } });
+      wrapper.find('.jump-button').simulate('click', { stopPropagation() {} });
       expect(props.dispatch).toHaveBeenCalled();
     });
 
     test('dispatch should send a changeSlider action', () => {
-      wrapper.find('.jump-button').simulate('click', { stopPropagation() { } });
+      wrapper.find('.jump-button').simulate('click', { stopPropagation() {} });
       expect(props.dispatch.mock.calls[0][0]).toEqual(changeSlider(props.index));
     });
   });

src/app/components/Action.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { changeView, changeSlider } from '../actions/actions';
 
-const Action = (props) => {
+const Action = props => {
   const {
     selected, index, sliderIndex, dispatch,
   } = props;
@@ -18,7 +18,7 @@ const Action = (props) => {
       <div className="action-component-text">{index}</div>
       <button
         className="jump-button"
-        onClick={(e) => {
+        onClick={e => {
           e.stopPropagation();
           dispatch(changeSlider(index));
         }}