diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c7a20ad96..ec43b159d 100644 --- a/CONTRIBUTING.md +++ b/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 diff --git a/DeveloperREADME.md b/DeveloperREADME.md deleted file mode 100644 index d6d824ea2..000000000 --- a/DeveloperREADME.md +++ /dev/null @@ -1,46 +0,0 @@ -
-

Development Enviroment Setup

- -

Getting Started

- -1. Download 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 build -``` -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.
-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 start -``` - -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! -
- -

- -

- -

Documentation for Consideration

-

Can Reactime be integrated with Redux compatibility so applications using Redux can track state in Reactime?

-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. diff --git a/README.fr.md b/README.fr.md index 4104075ea..80da66e26 100644 --- a/README.fr.md +++ b/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. +Reactime 18.0 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é. + Reactime version 7.0 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/) ## License diff --git a/README.md b/README.md index 25ed6674d..a65c2a327 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@

- 🇷🇺   РУССКАЯ ВЕРСИЯ   •   🇫🇷   VERSION FRANÇAISE   •   DEVELOPER INSTALL   •   DEVELOPER README + 🇷🇺   РУССКАЯ ВЕРСИЯ   •   🇫🇷   VERSION FRANÇAISE   •   DEVELOPER README

@@ -40,9 +40,15 @@

- How To Use • Features • Website • Read More + How To Use • Features • Website • Read More

+Reactime 18.0 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. + + Reactime 17.0 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? Please refer to Developer Install for a detailed guide: -Developer Install -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. ## How to Use @@ -156,7 +160,7 @@ clicking the right mouse button “Reload frame”. ### ❓ I found a bug in Reactime 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: -

- ### Bug Fixes - - 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 ## Read More +- [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/) ## License diff --git a/README.rus.md b/README.rus.md index 2d4303a2d..5ff1d8c0d 100644 --- a/README.rus.md +++ b/README.rus.md @@ -22,6 +22,11 @@

+Reactime 18.0 вводит ряд новых и улучшенных функций, направленных на оптимизацию производительности и улучшение совместимости. +С поддержкой Next.js и Remix, увеличенной покрытия тестов (93% на бэкенде, необходимо больше на фронтенде) и структурных улучшений в кодовой базе. +Кроме того, мы гордимся анонсом запуска нашего вновь переработанного веб-сайта, который служит центром для последних обновлений и информации о Reactime. +Для помощи в отладке мы включили демонстрационные приложения для Next.js и Remix, что позволяет будущим итераторам тестировать и устранять ошибки с большей легкостью и эффективностью. + Reactime - расширение для дебаггинга/отладки 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/) ## License diff --git a/assets/backend-recordSnapshot.png b/assets/backend-recordSnapshot.png new file mode 100644 index 000000000..b3e9f1559 Binary files /dev/null and b/assets/backend-recordSnapshot.png differ diff --git a/assets/backend-timeTravel.png b/assets/backend-timeTravel.png new file mode 100644 index 000000000..eee1a4a23 Binary files /dev/null and b/assets/backend-timeTravel.png differ diff --git a/assets/backend.png b/assets/obsolete/backend.png similarity index 100% rename from assets/backend.png rename to assets/obsolete/backend.png diff --git a/demo-app/package.json b/demo-app/package.json index 53839358f..da0a2658b 100644 --- a/demo-app/package.json +++ 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": { diff --git a/src/README.md b/src/README.md index 036e5a678..7871675a8 100644 --- a/src/README.md +++ b/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.
+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! +
+ +

+ +

+ +

Documentation for Consideration

+

Can Reactime be integrated with Redux compatibility so applications using Redux can track state in Reactime?

+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,7 +87,7 @@ 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 # @@ -56,7 +95,7 @@ src/ │   ├── 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,7 +119,9 @@ 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. @@ -88,7 +129,7 @@ src/ ## 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