diff --git a/.gitignore b/.gitignore
index 4fdc313ec..8c46d56b8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,7 @@
node_modules
.DS_Store
src/extension/build/bundles
-package/react-time-travel-*.tgz
+package/reactime-*.tgz
tictactoe
parents
coverage
diff --git a/LICENSE b/LICENSE
index 86c2cdbf0..d19ddaf80 100644
--- a/LICENSE
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index 78b9d4bab..38006ea6d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
{
- "name": "react-time-travel-extension",
+ "name": "reactime-extension",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
diff --git a/package.json b/package.json
index 98da919cd..ac1aa8ea6 100644
--- a/package.json
+++ b/package.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",
diff --git a/package/demo.gif b/package/demo.gif
new file mode 100644
index 000000000..55117d10d
Binary files /dev/null and b/package/demo.gif differ
diff --git a/package/package.json b/package/package.json
index 841048b4d..3fef5719b 100644
--- a/package/package.json
+++ b/package/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"
}
diff --git a/package/readme.md b/package/readme.md
index ea96f4989..a618b04fb 100644
--- a/package/readme.md
+++ b/package/readme.md
@@ -1,4 +1,16 @@
-# React-Time-Travel
+# Reactime
+
+
+
+
+
+
+
+
+
+
+ 
+
A debugging tool for React. Records state whenever state is changed and allows user to jump to any previous recorded state.
@@ -6,16 +18,18 @@ Two parts are needed for this tool to function. The chrome extension must be ins
## 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(, 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
diff --git a/readme.md b/readme.md
index fd2087b67..a618b04fb 100644
--- a/readme.md
+++ b/readme.md
@@ -1,15 +1,15 @@
-# React-Time-Travel
+# Reactime
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
+
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(, 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
diff --git a/src/app/containers/MainContainer.jsx b/src/app/containers/MainContainer.jsx
index 8f875c475..d5681bfd6 100644
--- a/src/app/containers/MainContainer.jsx
+++ b/src/app/containers/MainContainer.jsx
@@ -56,7 +56,7 @@ function MainContainer() {
return (
diff --git a/src/extension/background.js b/src/extension/background.js
index a76a22336..4d12d55cb 100644
--- a/src/extension/background.js
+++ b/src/extension/background.js
@@ -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);
});
diff --git a/src/extension/build/devtools.html b/src/extension/build/devtools.html
index 4c43e8746..2fd128795 100644
--- a/src/extension/build/devtools.html
+++ b/src/extension/build/devtools.html
@@ -5,7 +5,7 @@
- React Time Travel
+ Reactime
diff --git a/src/extension/build/devtools.js b/src/extension/build/devtools.js
index 0b96ab1e4..25605ed25 100644
--- a/src/extension/build/devtools.js
+++ b/src/extension/build/devtools.js
@@ -1 +1 @@
-chrome.devtools.panels.create('React Time Travel', null, 'panel.html', () => {});
+chrome.devtools.panels.create('Reactime', null, 'panel.html', () => {});
diff --git a/src/extension/build/manifest.json b/src/extension/build/manifest.json
index d2d5c7193..35194b82a 100644
--- a/src/extension/build/manifest.json
+++ b/src/extension/build/manifest.json
@@ -1,6 +1,6 @@
{
- "name": "React Time Travel",
- "version": "1.0",
+ "name": "Reactime",
+ "version": "2.0",
"devtools_page": "devtools.html",
"description": "A Chrome extension that helps debug React by memorizing the state of components with every render.",
"manifest_version": 2,