Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
node_modules
.DS_Store
src/extension/build/bundles
package/react-time-travel-*.tgz
package/reactime-*.tgz
tictactoe
parents
coverage
Expand Down
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 4 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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",
Expand Down
Binary file added package/demo.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 11 additions & 9 deletions package/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
57 changes: 36 additions & 21 deletions package/readme.md
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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.

Expand All @@ -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

Expand Down
30 changes: 15 additions & 15 deletions readme.md
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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);
Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/app/containers/MainContainer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
12 changes: 6 additions & 6 deletions src/extension/background.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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',
Expand All @@ -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);
});
2 changes: 1 addition & 1 deletion src/extension/build/devtools.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Time Travel</title>
<title>Reactime</title>
</head>

<body>
Expand Down
2 changes: 1 addition & 1 deletion src/extension/build/devtools.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
chrome.devtools.panels.create('React Time Travel', null, 'panel.html', () => {});
chrome.devtools.panels.create('Reactime', null, 'panel.html', () => {});
4 changes: 2 additions & 2 deletions src/extension/build/manifest.json
Original file line number Diff line number Diff line change
@@ -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,
Expand Down