Skip to content

Commit 03ceaff

Browse files
joshua0308joshua0308
authored
Merge pull request #96 from oslabs-beta/rydang/rename
renaming everything to reactime
2 parents c867130 + 230cd4a commit 03ceaff

File tree

13 files changed

+80
-67
lines changed

13 files changed

+80
-67
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
node_modules
22
.DS_Store
33
src/extension/build/bundles
4-
package/react-time-travel-*.tgz
4+
package/reactime-*.tgz
55
tictactoe
66
parents
77
coverage

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2019 react-time-travel
3+
Copyright (c) 2019 reactime
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{
2-
"name": "react-time-travel-extension",
3-
"version": "1.0.0",
2+
"name": "reacttime-extension",
43
"description": "build web extension bundle.js",
54
"scripts": {
65
"build": "webpack --mode production",
@@ -14,15 +13,12 @@
1413
"keywords": [
1514
"react",
1615
"time",
17-
"travel",
18-
"time-travel",
19-
"timetravel",
20-
"react-time-travel",
21-
"react-timetravel"
16+
"time travel",
17+
"reactime"
2218
],
2319
"repository": {
2420
"type": "git",
25-
"url": "https://github.com/oslabs-beta/react-time-travel"
21+
"url": "https://github.com/oslabs-beta/reactime"
2622
},
2723
"author": "Bryan Lee, Josh Kim, Ryan Dang, Sierra Swaby",
2824
"license": "ISC",

‎package/demo.gif‎

3.65 MB
Loading

‎package/package.json‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
{
2-
"name": "react-time-travel",
3-
"version": "1.1.1",
2+
"name": "reactime",
3+
"version": "2.0.0",
44
"description": "A library that helps debug React by memorizing the state of components with every render.",
55
"main": "index.js",
66
"repository": {
77
"type": "git",
8-
"url": "https://github.com/oslabs-beta/react-time-travel"
8+
"url": "https://github.com/oslabs-beta/reactime"
99
},
1010
"scripts": {
1111
"test": "echo \"Error: no test specified\""
1212
},
13+
"peerDependencies": {
14+
"react": "~16.0.0",
15+
"react-dom": "~16.0.0"
16+
},
1317
"keywords": [
1418
"react",
1519
"time",
16-
"travel",
17-
"time-travel",
18-
"timetravel",
19-
"react-time-travel",
20-
"react-timetravel"
20+
"time travel",
21+
"reactime",
22+
"react devtool"
2123
],
2224
"author": "Bryan Lee, Josh Kim, Ryan Dang, Sierra Swaby",
23-
"license": "ISC"
25+
"license": "MIT"
2426
}

‎package/readme.md‎

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,35 @@
1-
# React-Time-Travel
1+
# Reactime
2+
3+
![GitHub](https://img.shields.io/github/license/oslabs-beta/reactime)
4+
![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/reactime/dev?label=dev%20build)
5+
![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/reactime/master?label=master%20build)
6+
![npm](https://img.shields.io/npm/v/reactime?color=green)
7+
![David](https://img.shields.io/david/oslabs-beta/reactime)
8+
![DevDependencies](https://img.shields.io/david/dev/oslabs-beta/reactime.svg)
9+
![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/oslabs-beta/reactime)
10+
11+
<p align="center">
12+
<img src="demo.gif" alt="Demo of Reactime">
13+
</p>
214

315
A debugging tool for React. Records state whenever state is changed and allows user to jump to any previous recorded state.
416

517
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.
618

719
## Installing
820

9-
1. Download the Chrome extension from Chrome Web Store.
21+
1. Download the [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store.
22+
23+
2. Install the [npm package](https://www.npmjs.com/package/reactime) in your code.
1024

11-
2. Install the [npm package](https://www.npmjs.com/package/react-time-travel) in your code.
1225
```
13-
npm i react-time-travel
26+
npm i reactime
1427
```
28+
1529
3. Call the library method on your root container after rendering your App.
1630

1731
```
18-
const reactTimeTravel = require('react-time-travel');
32+
const reactTimeTravel = require('reactime');
1933
2034
const rootContainer = document.getElementById('root');
2135
ReactDom.render(<App />, rootContainer);
@@ -27,19 +41,19 @@ reactTimeTravel(rootContainer);
2741

2842
## How to Use
2943

30-
After installing both the Chrome extension and the npm package, just open up your project in the browser.
44+
After installing both the Chrome extension and the npm package, just open up your project in the browser.
3145

32-
Then open up your Chrome DevTools. There'll be a new tab called React-Time-Travel.
46+
Then open up your Chrome DevTools. There'll be a new tab called reactime.
3347

3448
## Features
3549

3650
### Recording
3751

38-
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.
52+
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.
3953

4054
### Viewing
4155

42-
You can click on a snapshot to view your app's state. State can be visualized in a JSON or a tree.
56+
You can click on a snapshot to view your app's state. State can be visualized in a JSON or a tree.
4357

4458
The selected snapshot can also be diffed/compared with the current dom.
4559

@@ -49,21 +63,22 @@ The most important feature of all. Jumping to any previous recorded snapshot. Hi
4963

5064
### Others
5165

52-
Other handy features include:
53-
* multiple tabs support
54-
* a slider to move through snapshots quickly
55-
* a play button to move through snapshots automatically
56-
* a pause which button stops recording each snapshot
57-
* a lock button to freeze the DOM in place. setState will lose all functionality while the extension is locked
58-
* a persist button to keep snapshots upon refresh. handy when changing code and debugging
59-
* export/import the current snapshots in memory
66+
Other handy features include:
67+
68+
- multiple tabs support
69+
- a slider to move through snapshots quickly
70+
- a play button to move through snapshots automatically
71+
- a pause which button stops recording each snapshot
72+
- a lock button to freeze the DOM in place. setState will lose all functionality while the extension is locked
73+
- a persist button to keep snapshots upon refresh. handy when changing code and debugging
74+
- export/import the current snapshots in memory
6075

6176
## Authors
6277

63-
* **Ryan Dang** - [@rydang](https://github.com/rydang)
64-
* **Bryan Lee** - [@mylee1995](https://github.com/mylee1995)
65-
* **Josh Kim** - [@joshua0308](https://github.com/joshua0308)
66-
* **Sierra Swaby** - [@starkspark](https://github.com/starkspark)
78+
- **Ryan Dang** - [@rydang](https://github.com/rydang)
79+
- **Bryan Lee** - [@mylee1995](https://github.com/mylee1995)
80+
- **Josh Kim** - [@joshua0308](https://github.com/joshua0308)
81+
- **Sierra Swaby** - [@starkspark](https://github.com/starkspark)
6782

6883
## License
6984

‎readme.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
# React-Time-Travel
1+
# Reactime
22

3-
![GitHub](https://img.shields.io/github/license/oslabs-beta/react-time-travel)
4-
![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/react-time-travel/dev?label=dev%20build)
5-
![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/react-time-travel/master?label=master%20build)
6-
![npm](https://img.shields.io/npm/v/react-time-travel?color=green)
7-
![David](https://img.shields.io/david/oslabs-beta/react-time-travel)
8-
![DevDependencies](https://img.shields.io/david/dev/oslabs-beta/react-time-travel.svg)
9-
![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/oslabs-beta/react-time-travel)
3+
![GitHub](https://img.shields.io/github/license/oslabs-beta/reactime)
4+
![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/reactime/dev?label=dev%20build)
5+
![Travis (.com) branch](https://img.shields.io/travis/com/oslabs-beta/reactime/master?label=master%20build)
6+
![npm](https://img.shields.io/npm/v/reactime?color=green)
7+
![David](https://img.shields.io/david/oslabs-beta/reactime)
8+
![DevDependencies](https://img.shields.io/david/dev/oslabs-beta/reactime.svg)
9+
![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/oslabs-beta/reactime)
1010

1111
<p align="center">
12-
<img src="demo.gif" alt="Demo of React-Time-Travel">
12+
<img src="demo.gif" alt="Demo of Reactime">
1313
</p>
1414

1515
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
1818

1919
## Installing
2020

21-
1. Download the [extension](https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store.
21+
1. Download the [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store.
2222

23-
2. Install the [npm package](https://www.npmjs.com/package/react-time-travel) in your code.
23+
2. Install the [npm package](https://www.npmjs.com/package/reactime) in your code.
2424

2525
```
26-
npm i react-time-travel
26+
npm i reactime
2727
```
2828

2929
3. Call the library method on your root container after rendering your App.
3030

3131
```
32-
const reactTimeTravel = require('react-time-travel');
32+
const reactTimeTravel = require('reactime');
3333
3434
const rootContainer = document.getElementById('root');
3535
ReactDom.render(<App />, rootContainer);
@@ -43,13 +43,13 @@ reactTimeTravel(rootContainer);
4343

4444
After installing both the Chrome extension and the npm package, just open up your project in the browser.
4545

46-
Then open up your Chrome DevTools. There'll be a new tab called React-Time-Travel.
46+
Then open up your Chrome DevTools. There'll be a new tab called reactime.
4747

4848
## Features
4949

5050
### Recording
5151

52-
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.
52+
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.
5353

5454
### Viewing
5555

‎src/app/containers/MainContainer.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ function MainContainer() {
5656
return (
5757
<div className="error-container">
5858
<a
59-
href="https://www.npmjs.com/package/react-time-travel"
59+
href="https://www.npmjs.com/package/reactime"
6060
target="_blank"
6161
rel="noopener noreferrer"
6262
>

‎src/extension/background.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
8282
const { action } = request;
8383
let isReactTimeTravel = false;
8484

85-
// Filter out tabs that don't have react-time-travel
85+
// Filter out tabs that don't have reactime
8686
if (action === 'tabReload' || action === 'recordSnap') {
8787
isReactTimeTravel = true;
8888
} else return;
@@ -167,18 +167,18 @@ chrome.tabs.onRemoved.addListener(tabId => {
167167
delete firstSnapshotReceived[tabId];
168168
});
169169

170-
// when react time travel is installed
170+
// when reactime is installed
171171
// create a context menu that will open our devtools in a new window
172172
chrome.runtime.onInstalled.addListener(() => {
173173
chrome.contextMenus.create({
174-
id: 'react-time-travel',
175-
title: 'React Time Travel',
174+
id: 'reactime',
175+
title: 'Reactime',
176176
contexts: ['page', 'selection', 'image', 'link'],
177177
});
178178
});
179179

180180
// when context menu is clicked, listen for the menuItemId,
181-
// if user clicked on react-time-travel, open the devtools window
181+
// if user clicked on reactime, open the devtools window
182182
chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
183183
const options = {
184184
type: 'panel',
@@ -188,5 +188,5 @@ chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
188188
height: window.screen.availHeight,
189189
url: chrome.runtime.getURL('panel.html'),
190190
};
191-
if (menuItemId === 'react-time-travel') chrome.windows.create(options);
191+
if (menuItemId === 'reactime') chrome.windows.create(options);
192192
});

0 commit comments

Comments
 (0)