Merge pull request #325 from oslabs-beta/master

Merging V23 of Reactime

Author: jrosengrant

.babelrc

@@ -1,6 +1,5 @@
 {
   "extends": [
-    "airbnb",
     "plugin:jest/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",

.eslintrc

@@ -13,6 +13,7 @@ src/extension/build.pem
 bower_components
 sandboxes/manual-tests/NextJS/.next
 .vscode
-src/app/components/Map.tsx
 package-lock.json
-yarn.lock
+yarn.lock
+docs/**/*
+docs/*

.gitignore

@@ -1,6 +1,3 @@
-[submodule "tests/manual-tests/recoilTest"]
-	path = tests/manual-tests/recoilTest
-	url = https://github.com/kevinfey/recoilTest
 [submodule "reactime-website"]
 	path = reactime-website
 	url = https://github.com/reactimetravel/reactime-website

.gitmodules

@@ -0,0 +1,10 @@
+{"depcheck": 
+  {
+    "ignoreMatches": [
+      "css-loader",
+      "sass-loader", 
+      "style-loader",
+      "typedoc-webpack-plugin"
+    ]
+  }
+}

.npmcheckrc

@@ -1,6 +1,6 @@
 # Welcome to the Reactime contributing guide!
 
-Thank you for investing your time in contributing to our project! :sparkles:. 
+Thank you for investing your time in contributing to our project! :sparkles:.
 
 In this guide you will get an overview of the contribution workflow from opening an issue, creating a PR, reviewing, and merging the PR.
 
@@ -13,16 +13,15 @@ To get an overview of the project, read the [README](README.md). Here are some r
 - [GitHub flow](https://docs.github.com/en/get-started/quickstart/github-flow)
 - [Collaborating with pull requests](https://docs.github.com/en/github/collaborating-with-pull-requests)
 
-
 ## Getting started
 
-To navigate our codebase with confidence, see the [Developer Guidelines](/src/README.md) :confetti_ball:.
+To navigate our codebase with confidence, see the [Developer Guidelines](src/DEVELOPER_README.md) :confetti_ball:.
 
 ### Issues
 
 #### Create a new issue
 
-If you spot a problem with the docs, [search if an issue already exists](https://github.com/open-source-labs/reactime/issues). If a related issue doesn't exist, you can open a new issue using a relevant [issue form](https://github.com/open-source-labs/reactime/issues/new). 
+If you spot a problem with the docs, [search if an issue already exists](https://github.com/open-source-labs/reactime/issues). If a related issue doesn't exist, you can open a new issue using a relevant [issue form](https://github.com/open-source-labs/reactime/issues/new).
 
 #### Solve an issue
 
@@ -32,14 +31,16 @@ Scan through our [existing issues](https://github.com/open-source-labs/reactime/
 
 #### Make changes in the UI
 
-Click **Make a contribution** at the bottom of any docs page to make small changes such as a typo, sentence fix, or a broken link. This takes you to the `.md` file where you can make your changes and [create a pull request](#pull-request) for a review. 
+Click **Make a contribution** at the bottom of any docs page to make small changes such as a typo, sentence fix, or a broken link. This takes you to the `.md` file where you can make your changes and [create a pull request](#pull-request) for a review.
 
 #### Make changes locally
 
 1. [Install Git LFS](https://docs.github.com/en/github/managing-large-files/versioning-large-files/installing-git-large-file-storage).
 
 2. Fork the repository.
+
 - Using GitHub Desktop:
+
   - [Getting started with GitHub Desktop](https://docs.github.com/en/desktop/installing-and-configuring-github-desktop/getting-started-with-github-desktop) will guide you through setting up Desktop.
   - Once Desktop is set up, you can use it to [fork the repo](https://github.com/open-source-labs/reactime.git)!
 
@@ -55,16 +56,17 @@ Commit the changes once you are happy with them.
 ### Pull Request
 
 When you're finished with the changes, create a pull request, also known as a PR.
-- Fill the "Ready for review" template so that we can review your PR. This template helps reviewers understand your changes as well as the purpose of your pull request. 
+
+- Fill the "Ready for review" template so that we can review your PR. This template helps reviewers understand your changes as well as the purpose of your pull request.
 - Don't forget to [link PR to issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue) if you are solving one.
 - Enable the checkbox to [allow maintainer edits](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/allowing-changes-to-a-pull-request-branch-created-from-a-fork) so the branch can be updated for a merge.
-Once you submit your PR, a Docs team member will review your proposal. We may ask questions or request additional information.
+  Once you submit your PR, a Docs team member will review your proposal. We may ask questions or request additional information.
 - We may ask for changes to be made before a PR can be merged, either using [suggested changes](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/incorporating-feedback-in-your-pull-request) or pull request comments. You can apply suggested changes directly through the UI. You can make any other changes in your fork, then commit them to your branch.
 - As you update your PR and apply changes, mark each conversation as [resolved](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/commenting-on-a-pull-request#resolving-conversations).
 - If you run into any merge issues, checkout this [git tutorial](https://github.com/skills/resolve-merge-conflicts) to help you resolve merge conflicts and other issues.
 
 ### Your PR is merged!
 
-Congratulations :tada::tada: The Reactime team thanks you! :sparkles:. 
+Congratulations :tada::tada: The Reactime team thanks you! :sparkles:.
 
 Once your PR is merged, your contributions will be publicly visible on [Reactime](https://github.com/open-source-labs/reactime)!

CONTRIBUTING.md

@@ -36,7 +36,7 @@
 <br>
 
 <p align="center">
-<img src="./assets/gifs/GeneralDemoGif.gif" />
+<img src="./assets/gifs/GeneralDemoGif_v23.gif" />
 </p>
 
 <p align="center">

README.fr.md

@@ -1,5 +1,4 @@
-    <h1 align="center">
-
+<h1 align="center">
   <br>
     <img src ="./assets/logos/chromeExtensionIcons/marqueePromoTitle.png"/>
     <br>
@@ -17,7 +16,6 @@
   <a href="https://github.com/oslabs-beta/reactime">
     <img src="https://img.shields.io/github/license/oslabs-beta/reactime" alt="GitHub">
   </a>
-    <img src="https://img.shields.io/badge/babel%20preset-airbnb-ff69b4" alt="BabelPresetPrefs">
     <img src="https://img.shields.io/badge/linted%20with-eslint-blueviolet" alt="LintPrefs">
 </p>
 
@@ -29,7 +27,7 @@
 <br>
 
 <p align="center">
-<img src="./assets/gifs/GeneralDemoGif.gif" />
+<img src="./assets/gifs/GeneralDemoGif_V23.gif" />
 </p>
 
 <p align="center">
@@ -42,13 +40,14 @@
 
 You can view your application's file structure and click on a snapshot to view
 your app's state. State can be visualized in a Component Graph, JSON Tree, or
-Performance Graph. Snapshots can be compared with the previous snapshot, which can
-be viewed in Diff mode.
+Performance Graph. Snapshot history can be visualized in the History tab.
+The Web Metrics tab provides some useful metrics for site performance.
+Snapshots can be compared with the previous snapshot, which can be viewed in Diff mode.
 <br>
 <br>
 
 <p align="center">
-<img src="./assets/gifs/TimeTravelGif.gif" />
+<img src="./assets/gifs/TimeTravelGif_V23.gif" />
 </p>
 <br>
 
@@ -85,7 +84,7 @@ Download the recorded snapshots as a JSON file and upload them to access state t
 <br>
 
 <p align="center">
-<img src="./assets/gifs/importExport_v22.gif" />
+<img src="./assets/gifs/ImportExportGif_v23.gif" />
 </p>
 <br>
 
@@ -95,11 +94,6 @@ If Reactime loses its connection to the tab you're monitoring, simply click the
 <br>
 <br>
 
-<p align="center">
-<img src="./assets/gifs/ReconnectGif22.gif" />
-</p>
-<br>
-
 ### 🔹 Re-render Optimization
 
 One of the most common issues that affects performance in React is unnecessary
@@ -168,16 +162,22 @@ of the structure and interfaces of the codebase.
 
 <h1>What's New!</h1>
 
-Reactime 22.0 heralds significant enhancements, addressing core performance issues and fortifying the overall application's stability and reliability. In our pursuit of consistent evolution, we've updated outdated packages and transitioned state management to Redux Toolkit. This strategic shift not only modernizes our tech stack but also ensures our application is positioned for easier maintenance and scalability in the future. Complementing these upgrades, this release also mends various bugs. The debut of features like the reconnection button, a status icon, and the integration of key web metrics – Cumulative Layout Shift (CLS) and Interaction To Next Paint (INP) – amplifies its functionality and offers users a more refined experience.
+Reactime 23.0 brings a new look to the UI, completely updates all outdated packages, and significantly improves stability by solving loading bugs.
+
+UI
 
-<i>Taking a deeper look</i>
+V23 showcases a sharp new theme to our extension’s UI. We also opted to completely overhaul the styling architecture to make it easier for future developers to change it to their liking.
 
-Addressing the persistent disconnection/black screen issues that occasionally affected users during regular application use, we made decisive improvements by removing the "keepAlive" function and implementing robust logic to fix the core issue. This enabled us to refine the communication protocol between our application and the Chrome extension API, delivering a more consistent and stable connection. To further enhance the user experience and foster resilience, we introduced a user-friendly reconnection feature. This not only offers users a swift recovery route but also acts as an added layer of protection against any unexpected disconnections in the future.
+Dependencies
 
-In an effort to improve maintainability, scalability, and longevity, we updated and phased out certain dependencies. To name a few, we moved away from the Immer library and transitioned our state management to use Redux Toolkit, while upgrading the Web Vitals API from version 1.1.2 to 3.5.0, allowing us to harness a broader range of web metrics. As part of this transition, we also converted all of the existing tests to work with the updated state management system, while further expanding testing suites to increase overall testing coverage. Lastly, we achieved a notable increase in TypeScript coverage, strengthening code quality and early detection of potential development issues.
+As of Reactime v22, installing node modules required the use of npm --force due to numerous lingering peer dependency issues. We have tackled this issue head-on in v23 of Reactime. We trimmed bulky packages that already served their purpose. We completely updated those that played a vital role in our extension’s current operation, and we fully resolved their conflicts with other dependencies. By downsizing from 124 to 70 packages, we have made Reactime much lighter and more future-proof.
 
-For an improved user experience, we set our sights on several impactful enhancements. First on our list is the reconnection feature, designed as a protective measure for those unexpected moments when a user gets disconnected. In such events, an intuitive pop-up dialog will instantly emerge, offering users a seamless way to dive right back into their session, while also offering the option to download recorded snapshots of state as a JSON file. Complementing this, we've integrated a dynamic status indicator that transparently displays a user's current app status, highlighting whether they're online or offline. But that's not all. We've enriched the application with two vital web performance metrics: Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP). These metrics are pivotal, providing developers with insights into layout stability and responsiveness, empowering them to optimize user interactions with precision.
+This effort serves to bolster Reactime in two ways: First, updating packages like react router and webpack gives Reactime’s users access to the performance upgrades that come with modern versions. Additionally, we have future-proofed Reactime by leaving our dependencies at their latest versions. This effort gives future developers of the extension a head start in adding new features and expanding the power of existing ones.
 
+Loading stability
+
+Reactime has experienced persistent issues with stably loading up. Our first step in tackling these loading inconsistencies was to thoroughly unpack Reactime’s inner workings. Tracking the flow of messages from our content script, our background service workers, the Redux state management and our extension’s backend allowed us to diagnose potential roadblocks as Reactime was spinning up. An exhaustive period of trial and error further deepened our understanding of the problem and ultimately led us towards our new and robustly stable launch experience.
+Beyond this, we have built out a road map of documentation with the goal of setting future Reactime developers on the fast track to further enhance the stability of Reactime’s launch and overall user experience.
 
 If you would like to read more about previous releases, click <a href="https://github.com/open-source-labs/reactime/releases">here!</a>
 
@@ -213,14 +213,16 @@ locally.
 
 <i>Please refer to Developer Install for a detailed guide:</i>
 
-Refer [DEVELOPER README](src/README.md) for more info on the project, and
+Refer to the [DEVELOPER README](src/DEVELOPER_README.md) for more info on the project, and
 instructions on building from source.
 
 ### <b>How to Use</b>
 
 After installing the Chrome extension, just open up your project in the browser.
 
-Then open up your Chrome DevTools and navigate to the Reactime panel.
+Then right click on your application and choose the 'Reactime' context menu item to open up a Reactime panel.
+
+Alternatively, you can open up your Chrome DevTools and navigate to the Reactime panel.
 
 ## <b>Troubleshooting</b>
 
@@ -242,7 +244,7 @@ clicking the right mouse button “Reload frame”.
 ### ❓ <b>I found a bug in Reactime</b>
 
 Reactime is an open-source project, and we'd love to hear from you about
-improving the user experience. Please read [DEVELOPER README](src/README.md),
+improving the user experience. Please read [DEVELOPER README](src/DEVELOPER_README.md),
 and create a pull request (or issue) to propose and collaborate on changes to Reactime.
 
 ### ❓ <b>Node version compatibility</b>
@@ -253,7 +255,7 @@ Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
 
 ## <b>Read More</b>
 
-- [Reactime: Real-time Debugging, Timeless Results](https://medium.com/@kelvinmirhan/reactime-real-time-debugging-timeless-results-3f163b721d01)
+- [Reactime renovation: Updates Coming in Version 23.0!](https://medium.com/@liam.donaher/reactime-renovation-updates-coming-in-version-23-0-37b2ef2a2771)
 
 ## <b>Authors</b>
 
@@ -353,6 +355,10 @@ Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
 - **Jimmy Phy** - [@jimmally](https://github.com/jimmally)
 - **Andrew Byun** - [@AndrewByun](https://github.com/AndrewByun)
 - **Kelvin Mirhan** - [@kelvinmirhan](https://github.com/kelvinmirhan)
+- **Jesse Rosengrant** - [@jrosengrant](https://github.com/jrosengrant)
+- **Liam Donaher** - [@leebology](https://github.com/leebology)
+- **David Moore** - [@Solodt55](https://github.com/Solodt55)
+- **John Banks** - [@Jbanks123](https://github.com/Jbanks123)
 
 ## <b>License </b>