Merge pull request #309 from oslabs-beta/main

Merging Main from v18 into Master of OSLabs branch

CONTRIBUTING.md

@@ -16,7 +16,7 @@ To get an overview of the project, read the [README](README.md). Here are some r
 
 ## Getting started
 
-To navigate our codebase with confidence, see the Developer READMEs [Developer Installation](/DeveloperREADME.md) and [Developer Guidelines](/src/README.md) :confetti_ball:.
+To navigate our codebase with confidence, see the [Developer Guidelines](/src/README.md) :confetti_ball:.
 
 ### Issues
 

README.fr.md

@@ -45,6 +45,8 @@
 
 Actuellement, Reactime est compatible avec les applications React qui utilisent des composants à état (stateful) et Hooks, avec un support en version bêta de Recoil et de pour le Context API.
 
+<b>Reactime 18.0</b> introduit une gamme de fonctionnalités nouvelles et améliorées visant à optimiser les performances et à améliorer la compatibilité. Avec le support de Next.js et de Remix, une couverture de test accrue (93% backend, le frontend a encore besoin de plus de tests), ainsi que des améliorations structurelles de la base de code. De plus, nous sommes fiers d'annoncer le lancement de notre site web récemment redessiné, qui sert de centre pour les dernières mises à jour et informations sur Reactime. Pour aider à la débogage, nous avons inclus des applications de démonstration pour Next.js et Remix, permettant aux futurs itérateurs de tester et dépanner avec plus de facilité et d'efficacité.
+
 <b>Reactime version 7.0</b> beta peut vous aider à éviter les ré-rendus inutiles. Identifier les rendus inutiles dans vos applications React est le point de départ idéal pour identifier la plupart des problèmes de performances.
 La version beta 7.0 de Reactime corrige les bugs des anciennes versions et intègre des visualisations améliorées pour les relations entre les composants.
 Reactime 7.0 inclut également une documentation [typedoc](https://typedoc.org/api/) plus approfondie pour les développeurs souhaitant contribuer au code source.
@@ -196,6 +198,10 @@ Après avoir cloné ce référentiel, les développeurs peuvent simplement exéc
 - **Kristina Wallen** - [@kristinawallen](https://github.com/kristinawallen)
 - **Quan Le** - [@blachfog](https://github.com/Blachfog)
 - **Robert Maeda** - [@robmaeda](https://github.com/robmaeda)
+- **Lance Ziegler** - [@lanceziegler](https://github.com/lanceziegler)
+- **Ngoc Zwolinski** - [@ngoczwolinski](https://github.com/ngoczwolinski)
+- **Peter Lam** - [@dev-plam](https://github.com/dev-plam)
+- **Zachary Freeman** - [@zacharydfreeman](https://github.com/zacharydfreeman/)
 
 ## <b>License </b>
 

README.md

@@ -30,7 +30,7 @@
 
 <h5 align="center">
 <br>
- <a href="./README.rus.md">🇷🇺 &nbsp; РУССКАЯ ВЕРСИЯ</a> &nbsp; • &nbsp; <a href="./README.fr.md">🇫🇷 &nbsp; VERSION FRANÇAISE</a> &nbsp; • &nbsp; <a href='/DeveloperREADME.md'>DEVELOPER INSTALL</a> &nbsp; • &nbsp; <a href='./src/README.md'>DEVELOPER README</a>
+ <a href="./README.rus.md">🇷🇺 &nbsp; РУССКАЯ ВЕРСИЯ</a> &nbsp; • &nbsp; <a href="./README.fr.md">🇫🇷 &nbsp; VERSION FRANÇAISE</a> &nbsp; • &nbsp; <a href='./src/README.md'>DEVELOPER README</a>
  <br>
 </h5>
 <br>
@@ -40,9 +40,15 @@
 </p>
 
 <p align="center">
- <a href="#how-to-use">How To Use</a> • <a href="#features">Features</a> • <a href="https://reactime.dev">Website</a> • <a href="#read-more">Read More</a>
+ <a href="#how-to-use">How To Use</a> • <a href="#features">Features</a> • <a href="https://www.reacti.me/">Website</a> • <a href="#read-more">Read More</a>
 </p>
 
+<b>Reactime 18.0</b> introduces a range of new and improved features aimed at optimizing performance and enhancing compatibility. 
+With support for Next.js and Remix, increased testing coverage(93% backend, frontend needs more), and structural improvements to the codebase. 
+Additionally, we are proud to announce the launch of our newly redesigned website, which serves as a hub for the latest updates and information about Reactime. 
+To aid with debugging, we have included demo applications for Next.js and Remix, enabling future iterators to test and troubleshoot with greater ease and efficiency.
+
+
 <b>Reactime 17.0</b>
 We are pleased to announce the release of Reactime 17.0,
 which includes several new and improved features. Context API support has now been added.
@@ -128,10 +134,8 @@ locally.
 ### Looking to contribute to Reactime?
 
 <i>Please refer to Developer Install for a detailed guide:</i>
-<a href='/DeveloperREADME.md'>Developer Install</a>
 
-After you finish the Develpoer Install, checkout
-[the developer README](src/README.md) for more info on the project, and
+Refer [DEVELOPER README](src/README.md) for more info on the project, and
 instructions on building from source.
 
 ## <b>How to Use</b>
@@ -156,7 +160,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 really appreciate your help with
-improving user experience. Please read [the developer README](src/README.md),
+improving user experience. Please read [DEVELOPER README](src/README.md),
 and create a pull request (or issue) to propose and collaborate on changes to a
 repository.
 
@@ -247,6 +251,12 @@ Reactime offers debugging and performance tools for Next.js apps: time-traveling
 debugging, preventing unnecessary components re-renders and making your
 application faster.
 
+### 🔹 Remix
+
+Reactime offers debugging and performance tools for Remix apps (in beta). Support still
+needs to be added for multi-route time traveling. Every other feature works.
+
+
 ### 🔹 TypeScript Support
 
 Reactime offers support for TypeScript applications using stateful class
@@ -278,24 +288,19 @@ of the structure and interfaces of the codebase.
 - Declarative titles in the actions sidebar
 - Interative Tutorial Walkthrough
 - Toggle feature allowing temporary pause of state monitoring
-- Updated frontend diagram:
 
-<p align="center">
-<img src="./assets/frontend-diagram.png" />
 
 ### <b>Bug Fixes</b>
-
 - Search bar now searches for specific nodes successfully
 - Tab titles of chrome browser tabs not running an application in development
  mode are no longer affected by Reactime
-- Multiple black screens fixed
+- Overhauled Asynchronous calls to eliminate memory leaks due to unused async activities in the background.
 - Improved UI and performance
-- No longer inject scripts to non-target applications
 
 ## <b>Read More</b>
+- [Reactime 18.0. Better than ever](https://medium.com/@zdf2424/reactime-18-0-better-than-ever-148b81606257)
 - [Reactime v17.0.0: Now with support for the Context API, and a modern UI](https://medium.com/@reactime/reactime-v17-0-0-now-with-support-for-the-context-api-and-a-modern-ui-f0edf9e54dae)
 - [Reactime XVI: Clean-up Time](https://medium.com/@emintahirov1996/reactime-xvi-cleanup-time-a14ba3dcc8a6)
-- [Reactime XVI: Clean-up Time](https://medium.com/@emintahirov1996/reactime-xvi-cleanup-time-a14ba3dcc8a6)
 - [Inter-Route Time Travel with Reactime](https://medium.com/@robbytiptontol/inter-route-time-travel-with-reactime-d84cd55ec73b)
 - [Time-Travel State with Reactime](https://medium.com/better-programming/time-traveling-state-with-reactime-6-0-53fdc3ae2a20)
 - [React Fiber and Reactime](https://medium.com/@aquinojardim/react-fiber-reactime-4-0-f200f02e7fa8)
@@ -381,6 +386,10 @@ of the structure and interfaces of the codebase.
 - **Kristina Wallen** - [@kristinawallen](https://github.com/kristinawallen)
 - **Quan Le** - [@blachfog](https://github.com/Blachfog)
 - **Robert Maeda** - [@robmaeda](https://github.com/robmaeda)
+- **Lance Ziegler** - [@lanceziegler](https://github.com/lanceziegler)
+- **Ngoc Zwolinski** - [@ngoczwolinski](https://github.com/ngoczwolinski)
+- **Peter Lam** - [@dev-plam](https://github.com/dev-plam)
+- **Zachary Freeman** - [@zacharydfreeman](https://github.com/zacharydfreeman/)
 
 ## <b>License </b>
 

README.rus.md

@@ -22,6 +22,11 @@
 <img src="./assets/new-reactime.gif" />
 </p>
 
+<b>Reactime 18.0</b> вводит ряд новых и улучшенных функций, направленных на оптимизацию производительности и улучшение совместимости.
+С поддержкой Next.js и Remix, увеличенной покрытия тестов (93% на бэкенде, необходимо больше на фронтенде) и структурных улучшений в кодовой базе.
+Кроме того, мы гордимся анонсом запуска нашего вновь переработанного веб-сайта, который служит центром для последних обновлений и информации о Reactime.
+Для помощи в отладке мы включили демонстрационные приложения для Next.js и Remix, что позволяет будущим итераторам тестировать и устранять ошибки с большей легкостью и эффективностью.
+
 <b>Reactime</b> - расширение для дебаггинга/отладки React приложений. Оно создает снэпшоты при каждом изменении состояния (state) и позволяет пользованию прыгать на любое предыдущее состояние (state). 
 В настоящее время Reactime поддерживает React приложения с классовыми, функциональными компонентами, хуками и Context API.
 
@@ -171,6 +176,10 @@ Reactime beta поддерживает приложения, написанны
 - **Kristina Wallen** - [@kristinawallen](https://github.com/kristinawallen)
 - **Quan Le** - [@blachfog](https://github.com/Blachfog)
 - **Robert Maeda** - [@robmaeda](https://github.com/robmaeda)
+- **Lance Ziegler** - [@lanceziegler](https://github.com/lanceziegler)
+- **Ngoc Zwolinski** - [@ngoczwolinski](https://github.com/ngoczwolinski)
+- **Peter Lam** - [@dev-plam](https://github.com/dev-plam)
+- **Zachary Freeman** - [@zacharydfreeman](https://github.com/zacharydfreeman/)
 
 ## <b>License </b>
 

demo-app/package.json

@@ -4,7 +4,7 @@
  "description": "",
  "main": "index.js",
  "scripts": {
- "start": "webpack-dev-server",
+ "dev": "webpack-dev-server",
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {

src/README.md

@@ -6,9 +6,48 @@ Our mission at Reactime is to maintain and iterate constantly, but never at the
 
 ## Building from source
 
-1. If you have already installed Reactime from the Chrome Web Store, disable or uninstall it.
-2. Run `yarn` to install all dependencies.
-3. Run `yarn dev`. This will start a `webpack` process which watches for file changes and whenever it sees some, automatically rebuilds the webpack bundles used by the extension.
+1. [Download]("https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en") React Dev Tools from the Chrome Webstore Here
+
+2. Clone down the Reactime repo onto your machine.
+
+```
+git clone https://github.com/open-source-labs/reactime.git
+```
+
+3. Install dependencies and build.
+
+```
+cd reactime
+npm install --force
+npm run dev
+```
+With release of Node v18.12.1 (LTS) on 11/4/22, the script has been updated to 'npm run dev' || 'npm run build' for backwards compatibility.<br/>
+For version Node v16.16.0, please use script 'npm run devlegacy' || 'npm run buildlegacy'
+
+4. Spin up the demo application.
+
+```
+cd demo-app
+npm install
+npm run dev
+```
+Similar approach for Next.js and Remix demo apps
+
+5. Add Reactime to your Chrome extensions.
+
+- Navigate to chrome://extensions
+- Select “Load Unpacked”
+- Choose reactime > src > extension > build
+- Navigate to http://localhost:8080/ to inspect the demo application using Reactime!
+ <br>
+
+<p align="center">
+ <img src="./assets/reactime-dev-setup.gif" />
+</p>
+
+<h2>Documentation for Consideration</h2>
+<h4>Can Reactime be integrated with Redux compatibility so applications using Redux can track state in Reactime?</h4>
+Yes, but it would be very time-consuming and not the most feasible option while Redux devtools exists already. With how Redux devtools is currently set up, a developer is unable to use Redux devtools as a third-party user and integrate its functionality into their own application, as Redux devtools is meant to be used directly on an application using Redux for state-tracking purposes. Since the devtools do not appear to have a public API for integrated use in an application or it simply does not exist, Redux devtools would need to be rebuilt from the ground up and then integrated into Reactime, or built into Reactime directly still from scratch.
 4. Go to `chrome://extensions`
 5. Ensure Developer mode is enabled
 6. Click `Load unpacked`
@@ -48,15 +87,15 @@ src/
 │   ├── createComponentActionsRecord.ts # Update the componentActionsRecord with new bound state-update methods
 │   ├── createTree.ts # Construct a tree snapshot from the FiberRoot tree given by ReactFiber.
 │   ├── statePropExtractor.ts # Helper functions to extract & format prop, state, and context data
-│   ├── throttle.ts # 
+│   ├── throttle.ts #
 │   ├── timeJump.ts # Rerenders DOM based on snapshot from background script
 │   ├── models/
 │   ├── filterConditions.ts #
 │   ├── masterState.ts # Component action record interface
 │   ├── routes.ts # Interfaces with the browser history stack
 │   ├── tree.ts # Custom structure to send to background
 │   ├── routers/
-│   ├── linkFiber.ts # Check for all requirement to start Reactime and 
+│   ├── linkFiber.ts # Check for all requirement to start Reactime and
 │   ├── snapShot.ts #
 │   ├── types/ # Typescript interfaces
 │   ├── index.ts # Starting point for backend functionality
@@ -80,15 +119,17 @@ src/
 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.
 
-![BACKEND DATA FLOW](../assets/backend.png)
+![BACKEND RECORD SNAPSHOT DATA FLOW](../assets/backend-recordSnapshot.png)
+
+![BACKEND TIME TRAVEL DATA FLOW](../assets/backend-timeTravel.png)
 
 3. The _extension_ folder is where the `contentScript.js` and `background.js` are located.
  - Like regular web apps, Chrome Extensions are event-based. The background script is where one typically monitors for browser triggers (e.g. events like closing a tab, for example). The content script is what allows us to read or write to our target web application, usually as a result of [messages passed](https://developer.chrome.com/extensions/messaging) from the background script.
  - These two files help us handle requests both from the web browser and from the Reactime extension itself
 
 ## Diagramming
 
-All the diagrams of data flows are avaliable on [MIRO](https://miro.com/app/board/o9J_lejUqLQ=/)
+All the diagrams of data flows are avaliable on [MIRO](https://miro.com/app/board/uXjVPictrsM=/)
 
 ## Data Flow Architecture
 
@@ -103,6 +144,9 @@ The general flow of data is described in the following steps:
 3. Likewise, when Reactime emits an action due to user interaction -- a "jump" request for example -- a message will be passed from Reactime via the background script to the content script. Then, the content script will pass a message to the target application containing a payload that represents the state the user wants the DOM to reflect or "jump" to.
  - One important thing to note here is that this jump action must be dispatched in the target application (i.e. _backend_ land), because only there do we have direct access to the DOM.
 
+## Reacti.me Website:
+See [Reacti.me README](https://github.com/reactimetravel/reactime-website/blob/main/README.md) for instruction of how to update the website
+
 ## Console.log
 
 Navigation between different console.log panels can be confusing when running Reactime. We created a short instruction where you can find the results for your console.log