Merge branch 'dev' into bryan/main-reducer-testing

Author: mylee1995

.gitignore

@@ -1,7 +1,7 @@
 node_modules
 .DS_Store
 src/extension/build/bundles
-package/react-time-travel-*.tgz
+package/reactime-*.tgz
 tictactoe
 parents
 coverage

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 react-time-travel
+Copyright (c) 2019 reactime
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package-lock.json

@@ -1,6 +1,5 @@
 {
-  "name": "react-time-travel-extension",
-  "version": "1.0.0",
+  "name": "reacttime-extension",
   "description": "build web extension bundle.js",
   "scripts": {
     "build": "webpack --mode production",
@@ -14,15 +13,12 @@
   "keywords": [
     "react",
     "time",
-    "travel",
-    "time-travel",
-    "timetravel",
-    "react-time-travel",
-    "react-timetravel"
+    "time travel",
+    "reactime"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/oslabs-beta/react-time-travel"
+    "url": "https://github.com/oslabs-beta/reactime"
   },
   "author": "Bryan Lee, Josh Kim, Ryan Dang, Sierra Swaby",
   "license": "ISC",

package.json

@@ -1,24 +1,26 @@
 {
-  "name": "react-time-travel",
-  "version": "1.1.1",
+  "name": "reactime",
+  "version": "2.0.0",
   "description": "A library that helps debug React by memorizing the state of components with every render.",
   "main": "index.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/oslabs-beta/react-time-travel"
+    "url": "https://github.com/oslabs-beta/reactime"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\""
   },
+  "peerDependencies": {
+    "react": "~16.0.0",
+    "react-dom": "~16.0.0"
+  },
   "keywords": [
     "react",
     "time",
-    "travel",
-    "time-travel",
-    "timetravel",
-    "react-time-travel",
-    "react-timetravel"
+    "time travel",
+    "reactime",
+    "react devtool"
   ],
   "author": "Bryan Lee, Josh Kim, Ryan Dang, Sierra Swaby",
-  "license": "ISC"
+  "license": "MIT"
 }

package/demo.gif

@@ -1,21 +1,35 @@
-# React-Time-Travel
+# Reactime
+
+![GitHub](https://img.shields.io/github/license/oslabs-beta/reactime) 
+![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/reactime/dev?label=dev%20build)
+![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/reactime/master?label=master%20build)
+![npm](https://img.shields.io/npm/v/reactime?color=green)
+![David](https://img.shields.io/david/oslabs-beta/reactime)
+![DevDependencies](https://img.shields.io/david/dev/oslabs-beta/reactime.svg)
+![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/oslabs-beta/reactime)
+
+<p align="center">
+  <img src="demo.gif" alt="Demo of Reactime">
+</p>
 
 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.
+1. Download the [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store.
+
+2. Install the [npm package](https://www.npmjs.com/package/reactime) in your code.
 
-2. Install the [npm package](https://www.npmjs.com/package/react-time-travel) in your code.
 ```
-npm i react-time-travel
+npm i reactime
 ```
+
 3. Call the library method on your root container after rendering your App.
 
 ```
-const reactTimeTravel = require('react-time-travel');
+const reactTimeTravel = require('reactime');
 
 const rootContainer = document.getElementById('root');
 ReactDom.render(<App />, rootContainer);
@@ -27,19 +41,19 @@ reactTimeTravel(rootContainer);
 
 ## How to Use
 
-After installing both the Chrome extension and the npm package, just open up your project in the browser. 
+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.
+Then open up your Chrome DevTools. There'll be a new tab called reactime.
 
 ## 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. 
+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 Reactime panel.
 
 ### Viewing
 
-You can click on a snapshot to view your app's state. State can be visualized in a JSON or a tree. 
+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.
 
@@ -49,21 +63,22 @@ The most important feature of all. Jumping to any previous recorded snapshot. Hi
 
 ### 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
+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)
+- **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
 

package/package.json

@@ -1,15 +1,15 @@
-# React-Time-Travel
+# Reactime
 
-![GitHub](https://img.shields.io/github/license/oslabs-beta/react-time-travel) 
-![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/react-time-travel/dev?label=dev%20build)
-![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/react-time-travel/master?label=master%20build)
-![npm](https://img.shields.io/npm/v/react-time-travel?color=green)
-![David](https://img.shields.io/david/oslabs-beta/react-time-travel)
-![DevDependencies](https://img.shields.io/david/dev/oslabs-beta/react-time-travel.svg)
-![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/oslabs-beta/react-time-travel)
+![GitHub](https://img.shields.io/github/license/oslabs-beta/reactime) 
+![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/reactime/dev?label=dev%20build)
+![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/reactime/master?label=master%20build)
+![npm](https://img.shields.io/npm/v/reactime?color=green)
+![David](https://img.shields.io/david/oslabs-beta/reactime)
+![DevDependencies](https://img.shields.io/david/dev/oslabs-beta/reactime.svg)
+![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/oslabs-beta/reactime)
 
 <p align="center">
-  <img src="demo.gif" alt="Demo of React-Time-Travel">
+  <img src="demo.gif" alt="Demo of Reactime">
 </p>
 
 A debugging tool for React. Records state whenever state is changed and allows user to jump to any previous recorded state.
@@ -18,18 +18,18 @@ Two parts are needed for this tool to function. The chrome extension must be ins
 
 ## Installing
 
-1. Download the [extension](https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store.
+1. Download the [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store.
 
-2. Install the [npm package](https://www.npmjs.com/package/react-time-travel) in your code.
+2. Install the [npm package](https://www.npmjs.com/package/reactime) in your code.
 
 ```
-npm i react-time-travel
+npm i reactime
 ```
 
 3. Call the library method on your root container after rendering your App.
 
 ```
-const reactTimeTravel = require('react-time-travel');
+const reactTimeTravel = require('reactime');
 
 const rootContainer = document.getElementById('root');
 ReactDom.render(<App />, rootContainer);
@@ -43,13 +43,13 @@ reactTimeTravel(rootContainer);
 
 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.
+Then open up your Chrome DevTools. There'll be a new tab called reactime.
 
 ## 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.
+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 Reactime panel.
 
 ### Viewing
 

package/readme.md

@@ -56,7 +56,7 @@ function MainContainer() {
     return (
       <div className="error-container">
         <a
-          href="https://www.npmjs.com/package/react-time-travel"
+          href="https://www.npmjs.com/package/reactime"
           target="_blank"
           rel="noopener noreferrer"
         >

readme.md

@@ -82,7 +82,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
   const { action } = request;
   let isReactTimeTravel = false;
 
-  // Filter out tabs that don't have react-time-travel
+  // Filter out tabs that don't have reactime
   if (action === 'tabReload' || action === 'recordSnap') {
     isReactTimeTravel = true;
   } else return;
@@ -167,18 +167,18 @@ chrome.tabs.onRemoved.addListener(tabId => {
   delete firstSnapshotReceived[tabId];
 });
 
-// when react time travel is installed
+// when reactime is installed
 // create a context menu that will open our devtools in a new window
 chrome.runtime.onInstalled.addListener(() => {
   chrome.contextMenus.create({
-    id: 'react-time-travel',
-    title: 'React Time Travel',
+    id: 'reactime',
+    title: 'Reactime',
     contexts: ['page', 'selection', 'image', 'link'],
   });
 });
 
 // when context menu is clicked, listen for the menuItemId,
-// if user clicked on react-time-travel, open the devtools window
+// if user clicked on reactime, open the devtools window
 chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
   const options = {
     type: 'panel',
@@ -188,5 +188,5 @@ chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
     height: window.screen.availHeight,
     url: chrome.runtime.getURL('panel.html'),
   };
-  if (menuItemId === 'react-time-travel') chrome.windows.create(options);
+  if (menuItemId === 'reactime') chrome.windows.create(options);
 });