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 + +![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) + +

+ Demo of 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 -![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)

- Demo of React-Time-Travel + Demo of 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,