diff --git a/README.md b/README.md index 015fd6513..0a51b5c5d 100644 --- a/README.md +++ b/README.md @@ -43,11 +43,11 @@ How To Use • Features • Website • Read More

-Reactime 15.0 adds a new visualization, allowing users to zone in on individual components of a specific snapshot. Additionally, a number of bug fixes have been implemented. +Reactime 16.0 presents the codebase with substancial, much-needed clean-up. From the backend and frontend to testing, the Reactime XVI team has: removed vestigial code, added comments to clarify code, implemented 100% testing coverage for the codebase, compartmentalized and modularized files, and implemented typescript. -Currently, Reactime supports React apps (now including React Router apps) using stateful components and Hooks, with beta support for Recoil and Context API and frameworks like Gatsby and Next.js. +The primary purpose of this update is to allow easier understanding of Reactime's codebase by individuals or groups wishing to further update Reactime, keeping this great developer tool alive. -Previously, Reactime 14.0 added the exciting features below: +Previously, Reactime 14.0 and 15.0 added the exciting features below: I. React Router Compatibility
Reactime is now compatible with React Router applications! Prior to Reactime 14.0, recording state snapshots as the user navigated across various routes was possible, but time travel debugging was only possible for the current route (i.e. jumping back to a prior state at a different route was not possible). In order to streamline debugging of applications with multiple routes, Reactime 14.0 added functionality that allows the user to time-travel back to different routes, including live updating in the browser to reflect the state of their application at that previously visited route. @@ -55,9 +55,15 @@ Reactime is now compatible with React Router applications! Prior to Reactime 14. II. Classifying State Snapshots by Route
The list of state snapshots in the Reactime dashboard is now classified by route to give the developer visual cues of the snapshot-route relationship and make time travel debugging of various routes easier. -III. Filtering Performance Metrics by Route
+III. Filtering Performance Metrics By Route
The Reactime dashboard includes a stacked bar graph showing render times for each component, with a separate bar stack for each snapshot. With Reactime 14.0, this composite bar graph can now be filtered by route to allow the developer to review detailed performance data by route. +IV. Visualize And Compare Components Within a Snapshot
+Users not only have access to multiple snapshots, but can now zone into a specified snapshot more granularly through a new visualization consisting of its individual components. These new graphs are rendered directly in the same Performance tab in Reactime and provide details for each component when the user hovers over, providing a new visual comparison of components across a single chosen state. + +

+ + After installing Reactime, you can test its functionalities with your React application in development mode. Please note, the time jumping feature will ONLY work when your application is running in development mode. In production mode, you are able to view your application’s component map but no additional features. @@ -179,6 +185,10 @@ After cloning this repository, developers can simply run `npm run docs` at the r - Declarative titles in the actions sidebar - Interative Tutorial Walkthrough - Toggle feature allowing temporary pause of state monitoring +- Updated frontend diagram: + +

+ ### Bug Fixes diff --git a/assets/frontend-diagram.png b/assets/frontend-diagram.png new file mode 100644 index 000000000..9a46d39cb Binary files /dev/null and b/assets/frontend-diagram.png differ diff --git a/assets/snapshot-comparison.gif b/assets/snapshot-comparison.gif new file mode 100644 index 000000000..d6a3860b4 Binary files /dev/null and b/assets/snapshot-comparison.gif differ diff --git a/src/README.md b/src/README.md index 8e5753d02..95cfa63d7 100644 --- a/src/README.md +++ b/src/README.md @@ -49,7 +49,7 @@ src/ 1. The *app* folder is responsible for the Single Page Application that you see when you open the chrome dev tools under the Reactime tab. -![FRONTEND DATA FLOW](../assets/frontend.png) +![FRONTEND DATA FLOW](../assets/frontend-diagram.png) 2. The *backend* folder contains the set of all scripts that we inject into our "target" application via `background.js` - In Reactime, its main role is to generate data and handle time-jump requests from the background script in our *extension* folder.