diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index c31d41d9f..000000000
--- a/.travis.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-language: node_js
-node_js:
- - 12
-dist: trusty
-cache: npm
-git:
- submodules: false
-# branches:
-# only:
-# - implementtravisci
-install:
- - npm install
-script:
- - npm run test
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 75a7940e3..d63679ccb 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,72 +1,107 @@
-# Welcome to the Reactime contributing guide!
+# Contributing to Reactime :sparkles:
-Thank you for investing your time in contributing to our project! :sparkles:.
+Thank you for your interest in making Reactime even better! :heart_eyes: Your help is invaluable, and we appreciate every contribution, big or small. This guide will walk you through the process of opening issues, creating pull requests, and navigating our workflow.
-In this guide you will get an overview of the contribution workflow from opening an issue, creating a PR, reviewing, and merging the PR.
+## New Contributor Guide :hatching_chick:
-## New contributor guide
+Whether you’re brand new to open source or a seasoned pro, we encourage you to:
-To get an overview of the project, read the [README](README.md). Here are some resources to help you get started with open source contributions:
+- **Check out our [README](README.md).**
+ It’ll give you a birds-eye view of what Reactime does and how you can get involved.
+- **Explore these helpful resources:**
+ - [Finding ways to contribute to open source on GitHub](https://docs.github.com/en/get-started/exploring-projects-on-github/finding-ways-to-contribute-to-open-source-on-github)
+ - [Set up Git](https://docs.github.com/en/get-started/quickstart/set-up-git)
+ - [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)
-- [Finding ways to contribute to open source on GitHub](https://docs.github.com/en/get-started/exploring-projects-on-github/finding-ways-to-contribute-to-open-source-on-github)
-- [Set up Git](https://docs.github.com/en/get-started/quickstart/set-up-git)
-- [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 :rocket:
-## Getting started
+If you want to understand the codebase in more detail, take a look at our [Developer Guidelines](src/DEVELOPER_README.md). :confetti_ball:
-To navigate our codebase with confidence, see the [Developer Guidelines](src/DEVELOPER_README.md) :confetti_ball:.
+### Issues :eyes:
-### Issues
+#### Creating a New Issue :new:
-#### Create a new issue
+1. **Check existing issues.**
+ Before opening a new issue, please [search if it already exists](https://github.com/open-source-labs/reactime/issues).
-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).
+2. **Open your own issue.**
+ If you can’t find an existing issue, feel free to [open a new one](https://github.com/open-source-labs/reactime/issues/new) to report bugs, request features, or suggest improvements.
-#### Solve an issue
+#### Solving an Issue :wrench:
-Scan through our [existing issues](https://github.com/open-source-labs/reactime/issues) to find one that interests you. As a general rule, we don’t assign issues to anyone. If you find an issue to work on, you are welcome to open a PR with a fix.
+1. **Pick an issue.**
+ Browse through our [open issues](https://github.com/open-source-labs/reactime/issues). We don’t officially assign them, so if something sparks your interest, go for it!
-### Make Changes
+2. **Open a pull request.**
+ Once you’re ready to propose a fix or feature, you can open a PR referencing the issue you’re solving.
-#### Make changes in the UI
+### Make Changes :rainbow:
-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.
+#### Small Edits in the UI :pencil2:
-#### Make changes locally
+- Click **Make a contribution** at the bottom of any documentation page to quickly fix typos, broken links, or small wording changes.
+- This will take you directly to the `.md` file, where you can make edits and open a pull request.
-1. [Install Git LFS](https://docs.github.com/en/github/managing-large-files/versioning-large-files/installing-git-large-file-storage).
+#### Larger Changes Locally :computer:
-2. Fork the repository.
+1. **Install Git LFS.**
+ Follow the instructions [here](https://docs.github.com/en/github/managing-large-files/versioning-large-files/installing-git-large-file-storage).
-- Using GitHub Desktop:
+2. **Fork the Repository.**
- - [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)!
+ - **GitHub Desktop:**
+ [Getting started with GitHub Desktop](https://docs.github.com/en/desktop/installing-and-configuring-github-desktop/getting-started-with-github-desktop) walks you through setup. Then, you can [fork the repo](https://github.com/open-source-labs/reactime.git) right from GitHub Desktop!
+ - **Command Line:**
+ [Fork the repo](https://github.com/open-source-labs/reactime.git) and clone your fork locally so you can work on your own copy.
-- Using the command line:
- - [Fork the repo](https://github.com/open-source-labs/reactime.git) so that you can make your changes without affecting the original project until you're ready to merge them.
+3. **Create a working branch.**
+ Name it something descriptive (e.g., `feature/new-feature` or `fix/typo-in-docs`).
-3. Create a working branch and start with your changes!
+### Commit Your Changes :white_check_mark:
-### Commit your update
+When you’re happy with your updates:
-Commit the changes once you are happy with them.
+1. **Commit them locally.**
+ Write clear commit messages describing _what_ you changed and _why_.
-### Pull Request
+2. **Push to your branch.**
+ This makes your changes visible on GitHub.
-When you're finished with the changes, create a pull request, also known as a PR.
+### Open a Pull Request :arrows_counterclockwise:
-- 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.
-- 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.
+Once you’ve finished working and pushed your code:
-### Your PR is merged!
+1. **Create the PR.**
+ Click on **Compare & pull request** on your branch to open a new PR.
-Congratulations :tada::tada: The Reactime team thanks you! :sparkles:.
+2. **Fill the “Ready for review” template.**
+ This helps reviewers quickly understand the context and purpose of your changes.
-Once your PR is merged, your contributions will be publicly visible on [Reactime](https://github.com/open-source-labs/reactime)!
+3. **Link Issues.**
+ If your PR fixes or relates to an existing issue, [link it](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue) in the PR description.
+
+4. **Allow Maintainer Edits.**
+ Check the box so our team can help update your branch if needed.
+
+5. **Address Feedback.**
+ If reviewers suggest changes, you can:
+
+ - Apply **suggested changes** directly on the GitHub UI.
+ - Make edits in your local branch and push them.
+
+6. **Resolve Conversations.**
+ Mark each PR comment as [resolved](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/commenting-on-a-pull-request#resolving-conversations) once you’ve addressed it.
+
+7. **Handle Merge Conflicts.**
+ Check out [this tutorial](https://github.com/skills/resolve-merge-conflicts) if you get stuck.
+
+## Your PR is Merged! :tada:
+
+**Congratulations and thank you!** :dancer: :dancer: Once we merge your PR, your contributions become part of Reactime. We appreciate every contribution, and we hope you’ll stick around for more.
+
+> If you have any further questions or ideas, don’t hesitate to open another issue or join the conversation in the repo!
+
+---
+
+Happy coding and welcome to the Reactime community! :sparkles:
diff --git a/Dockerfile b/Dockerfile
deleted file mode 100644
index b5872bcd3..000000000
--- a/Dockerfile
+++ /dev/null
@@ -1,4 +0,0 @@
-FROM node:10.16.2
-WORKDIR /usr/src/app
-COPY package*.json ./
-RUN npm i
diff --git a/LICENSE b/LICENSE
index d19ddaf80..498003dd9 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
MIT License
-Copyright (c) 2019 reactime
+Copyright (c) 2025 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/README.fr.md b/README.fr.md
index ca9f0a2a5..86ac9d8e2 100644
--- a/README.fr.md
+++ b/README.fr.md
@@ -1,217 +1,269 @@
+
Reactime est un outil de performance et de débogage pour les développeurs React. Reactime enregistre un snapshot à chaque fois que l'état d'une application cible est modifié et permet à l'utilisateur de passer à tout état précédemment enregistré.
-
+
Une puissante extension Chrome qui améliore le développement React grâce au débogage avec retour dans le temps et à la surveillance avancée des performances
+### 🔍 Visualisation de l'État
-### 🔹 L'Exposition
+- **Vues Multiples** : Visualisez l’état de votre application via des Graphiques de Composants, des Arborescences JSON, des Graphiques de Performances et des Arbres d’Accessibilité
+- **Historique Chronologique** : Suivez l’évolution de l’état dans le temps grâce à une représentation intuitive de l’historique
+- **Métriques Web** : Surveillez en temps réel les métriques de performance essentielles
+- **Aperçus d’Accessibilité** : Analysez l’arbre d’accessibilité de votre application pour chaque changement d’état
+
-Vous pouvez afficher la structure des fichiers de votre application et cliquer sur un instantané pour afficher l'état de votre application. L'état peut être visualisé dans un graphique de composants, une arborescence JSON ou un graphique de performances. Les instantanés peuvent être comparés à l'instantané précédent, qui peut être visualisé en mode Diff.
-
-
+
Sur la page principale, vous disposez de deux choix principaux depuis le menu déroulant :
+
+- **Timejump** : Consultez et naviguez dans l’historique des snapshots de l’état de votre application. Vous pouvez revenir à n’importe quel point dans le temps pour observer l’évolution de l’état au fil des modifications. Vous pouvez également utiliser le bouton de lecture pour rejouer chaque changement d’état automatiquement.
+- **Providers / Consumers** : Comprenez mieux les dépendances de contexte de votre application et leurs interactions grâce à une visualisation des relations entre fournisseurs et consommateurs.
+
-
+
-### 🔹 Enregistrement
+### ⏱️ Débogage avec Retour dans le Temps
-Chaque fois que l'état est modifié (chaque fois que setState, useState est appelé), cette extension créera un instantané de l'arborescence d'état actuelle et l'enregistrera. Chaque instantané sera affiché dans Chrome DevTools sous le panneau Reactime.
-
+- **Snapshots d’État** : Capturez et naviguez à travers l’historique d’état de votre application
+- **Commandes de Lecture** : Rejouez automatiquement les changements d’état avec une vitesse ajustable
+- **Points de Saut** : Naviguez instantanément vers n’importe quel état antérieur
+- **Comparaisons Diff** : Comparez l’état entre différents snapshots
+
+
+
+
+
-### 🔹 Série d'Instantanés et Comparaison d'Actions
+### 📊 Analyse de Performance
-Vous pouvez enregistrer une série d'instantanés d'état et l'utilizer pour analyser les changements dans les performances de rendu des composants entre la série d'instantanés actuelle et la série précédente. Vous pouvez également nommer les instantanés spécifiquement et comparer tous les instantanés avec le même nom.
-
-
+- **Métriques de Composants** : Mesurez les temps de rendu et identifiez les goulets d’étranglement
+- **Comparaison de Séries** : Comparez les performances sur différentes séries de changements d’état
+- **Détection de Re-rendu** : Identifiez et corrigez les rendus inutiles
+- **Web Vitals** : Surveillez les Core Web Vitals et d’autres métriques de performance
+
+
-### 🔹 Comparaison des Composants
+### 🔄 Prise en Charge des Frameworks Modernes
-Lorsque vous avez sélectionné un instantané, un visualisation des composants individuels de l'instantané sera affichée. Cela peut être fait sous le même onglet de performances où les instantanés sont rendus. Vous pouvez également voir les détails d'un composant lorsque vous le survolez avec votre souris.
-
+
+
+ Compatibilité complète avec Gatsby, Next.js et Remix
+
+
+Prise en charge de TypeScript pour les composants de classe et fonctionnels
+
+
+Prise en charge des Hooks et de l’API Context de React
+
+
-### 🔹 Importer/Exporter des Instantanés
+### 💾 Persistance & Partage d’État
-Vous pouvez exporter les instantanés sous forme de fichier JSON et les importer pour accéder aux arborescences d'état sur différentes sessions.
-
-
+Reactime facilite la sauvegarde et le partage de l’historique d’état de votre application :
+
+- **Exporter l’Historique d’État** : Enregistrez vos snapshots sous forme de fichier JSON pour une analyse ultérieure ou pour les partager
+- **Importer des Sessions Précédentes** : Chargez des snapshots enregistrés précédemment pour comparer les changements d’état entre différentes sessions
+- **Analyse Inter-Session** : Comparez les performances et les changements d’état entre différentes sessions de développement
+
-
+
-### 🔹 Reconnexion et Statut
+### 📚 Documentation Interactive
-Si Reactime se déconnecte de l'application que vous surveillez, cliquez sur le bouton « Reconnect » pour reprendre votre travail. Il y a un petit cercle sur le bouton. Il sera vert si vous êtes connecté et rouge si vous êtes déconnecté.
-
-
+Reactime propose une documentation complète pour aider les développeurs à comprendre son architecture et ses APIs.
+Après avoir cloné ce référentiel, les développeurs peuvent simplement exécuter `npm run docs` à la racine et servir le fichier `/docs/index.html` généré dynamiquement, offrant :
-
-
-
+
+
+ Des diagrammes interactifs de composants
+
+
+Des définitions de types et interfaces
+
+
+Une vue d’ensemble de l’architecture du code
+
+
+Des références d’API et des exemples
+
+
-### 🔹 Optimisation du Rendu
+
🎉 Nouveautés !
-L'un des problèmes les plus courants affectant les performances dans React est rednu plusieurs fois. Ce problème peut être résolu en vérifiant vos rendus dans le Onglet Performances dans Chrome DevTools sous le panneau Reactime.
-
-
+La version 26.0 de Reactime propose une refonte complète de l’expérience de débogage React, avec :
-### 🔹 Jumping
+- **Nouvelle Visualisation des Données de Contexte**
-Un utilisateur peut accéder à n'importe quel instantané précédemment enregistré à l'aide de la barre latérale d'actions. Si un utilisateur appuie sur le bouton « Jump » sur un instantané, il pourra voir les informations d'état à partir du moment où cet instantané a été créé pour la première fois.
-
-
+ - Première visualisation des changements d’état du hook useContext
+ - Cartographie claire des relations fournisseur-consommateur
+ - Surveillance en temps réel de la valeur d’état du contexte
+ - Visualisation détaillée des données du fournisseur
-### 🔹 Gatsby
+- **Débogage avec Retour dans le Temps Amélioré**
-Reactime offre un support complet pour les applications Gatsby.
-
-
+ - Interface du curseur de temps repensée, positionnée à côté des snapshots
+ - Contrôles de vitesse de lecture variables
+ - Navigation plus intuitive dans l’état
+ - Visualisation de snapshot améliorée
-### 🔹 Next.js
+- **Refonte Complète de l’UI Moderne**
-Reactime propose des outils de débogage et de performances pour les applications Next.js : débogage de voyage dans le temps, évitant les rendus de composants inutiles et rendant votre application plus rapide.
-
-
+ - Design élégant et contemporain avec composants arrondis
+ - Améliorations de la disposition pour une meilleure intuitivité
+ - Nouveau mode sombre
+ - Hiérarchie visuelle améliorée
-### 🔹 Remix
+- **Améliorations Techniques Majeures**
+ - Correction de la persistance de connexion lors de périodes d’inactivité et de changements d’onglet
+ - Restauration de la visualisation de l’arbre d’accessibilité
+ - Résolution de problèmes de capture d’état pour les hooks useState basés sur des fonctions
+ - Fiabilité et performance globales de l’extension grandement améliorées
-Reactime propose des outils de débogage et de performances pour les applications Remix (en version bêta).
+Ces mises à jour rendent Reactime plus puissant, plus fiable et plus convivial que jamais, établissant un nouveau standard pour les outils de débogage React.
+
+Pour en savoir plus sur les versions précédentes, cliquez ici !
-### 🔹 TypeScript
+
🚀 Bien Commencer
-Reactime offre la prise en charge des applications TypeScript utilisant des composants de classe avec état et des composants fonctionnels. Des tests et un développement supplémentaires sont nécessaires pour les hooks personnalisés.
-
-
+### Installation
-### Documentation
+1. Installez l’[extension Reactime](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) depuis le Chrome Web Store
+2. Installez l’extension requise [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) si vous ne l’avez pas déjà
-Après avoir cloné ce référentiel, les développeurs peuvent simplement exécuter `npm run docs` au niveau racine et servir le fichier `/docs/index.html` généré dynamiquement sur un navigateur. Cela fournira une vue GUI lisible, extensible et interactive de la structure et des interfaces de la base de code.
-
-
+### Prérequis
-### Caractéristiques Supplémentaires
+- Votre application React doit fonctionner en **mode développement**
+- L’extension React Developer Tools doit être installée
+- Navigateur Chrome (version 80 ou supérieure recommandée)
-- Tutoriels pour des onglets spécifiques
-- Passez la souris sur un composant pour afficher les détails de l'état
-- Double-cliquez pour masquer les composants enfants
-- Cliquez pour vous concentrer sur une partie de la carte des composants
-- A dropdown to support the development of projects on multiple tabs
-- Une liste déroulante pour accompagner le développement de projets sur plusieurs onglets
-- Fonctionnalité verrouillée/déverrouillée permettant une pause temporaire de la surveillance de l'état
-- Visualisation des propriétés à la fois en couleur et en épaisseur des branches reliant les composants
-- Barre de chaleur sous le menu supérieur
+### Lancer Reactime
-
Quoi de Neuf!
+Il existe deux manières d’ouvrir le panneau Reactime :
-Reactime 25.0 comprend une nouvelle fonctionnalité de visualisation des propriétés et une barre de chaleur pour les développeurs !
+1. **Menu Contextuel**
-Nous avons également résolu les problèmes de gel signalés précédemment au démarrage et avons amélioré la bibliothèque Jest, qui est maintenant en bien meilleur état qu'avant, avec la plupart des tests fonctionnant correctement.
+ - Faites un clic droit n’importe où dans votre application React
+ - Sélectionnez "Reactime" dans le menu contextuel
-Une partie de l'interface utilisateur a été réorganisée pour être plus esthétiquement agréable et pour rendre la fenêtre principale plus grande pour l'affichage de l'arbre des composants dans le processus.
+2. **DevTools**
+ - Ouvrez les DevTools de Chrome (F12 ou ⌘+⌥+I)
+ - Naviguez jusqu’à l’onglet "Reactime"
-Regarder Plus Profondément
+Une fois lancé, Reactime commencera automatiquement à surveiller les changements d’état et les métriques de performance de votre application.
+
+
-En résolvant les problèmes persistants de déconnexion/d'écran noir qui affectaient parfois les utilisateurs lors de l'utilisation régulière de l'application, nous avons apporté des améliorations décisives en supprimant la fonction « keepAlive » et en implémentant une logique robuste pour résoudre le problème principal. Cela nous a permis d'affiner le protocole de communication entre notre application et le navigateur, offrant ainsi une connexion plus cohérente et stable. Cela offre aux utilisateurs une voie de récupération rapide et constitue également une couche de protection supplémentaire contre toute déconnexion inattendue à l'avenir.
+
🤝 Contribuer à Reactime
-Pour améliorer la maintenabilité, l'évolutivité et la longévité, nous avons mis à jour et supprimé progressivement certaines dépendances. Nous nous sommes éloignés de la bibliothèque Immer et avons transféré notre gestion d'état pour utiliser Redux Toolkit, tout en mettant à niveau l'API Web Vitals de la version 1.1.2 à 3.5.0, nous permettant d'utiliser une gamme plus large de métriques Web. Dans le cadre de cette transition, nous avons également converti tous les tests existants pour qu'ils fonctionnent avec le système de gestion d'état mis à jour, tout en élargissant encore les suites de tests pour augmenter la couverture globale des tests. Enfin, nous avons obtenu une augmentation notable de la couverture TypeScript, renforçant la qualité du code et la détection précoce des problèmes de développement potentiels.
+Nous accueillons avec joie les contributions de développeurs de tous niveaux ! Voici comment vous pouvez aider à améliorer Reactime: 🙋 Contributing README
-Nous avons apporté de nombreux changements destinés à améliorer l'expérience utilisateur. Le premier est la fonction de reconnexion, conçue comme une mesure de protection pour les moments inattendus où un utilisateur est déconnecté. Lorsque cela se produit, une boîte de dialogue contextuelle intuitive apparaîtra instantanément, offrant aux utilisateurs un moyen transparent de replonger directement dans leur session, tout en offrant également la possibilité de télécharger des instantanés d'état enregistrés sous forme de fichier JSON. Nous avons également intégré un indicateur d'état dynamique qui affiche de manière transparente l'état actuel de l'application d'un utilisateur, indiquant s'il est en ligne ou hors ligne. Nous avons également enrichi l'application avec deux mesures de performances Web essentielles : « Cumulative Layout Shift » (CLS) et « Interaction to Next Paint » (INP). Ces mesures sont essentielles, car elles fournissent aux développeurs des informations sur la stabilité et la réactivité de la mise en page, leur permettant ainsi d'optimiser les interactions des utilisateurs avec précision.
+1. **Commencer**
-Si vous souhaitez en savoir plus sur les versions précédentes, cliquez ici !
+ - Forkez le dépôt
+ - Consultez notre README Développeur détaillé
+ - Mettez en place votre environnement de développement local
-
+2. **Processus de Build**
-
Installation
+ - Suivez les instructions de build dans le README Développeur
+ - Testez soigneusement vos modifications
+ - Soumettez une Pull Request
-Pour commencer, installer l’[extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) Reactime depuis le Chrome Web Store.
+Rejoignez notre communauté grandissante de contributeurs et participez à façonner l’avenir des outils de débogage React ! Pour des lignes directrices de contribution plus détaillées et des informations sur l’architecture du projet, veuillez vous référer à notre 👩💻 README Développeur.
+
+
-REMARQUE: L'[extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) React Developer Tools est également requise pour que Reactime s'exécute, si vous ne l'avez pas déjà installé sur votre navigateur.
+
🛠️ Dépannage
-### Installation Alternative
+### ❓ Pourquoi Reactime n’enregistre-t-il pas les nouveaux changements d’état ?
-Utilisez `src/extension/build/build.zip` pour une installation manuelle en [mode Développeur](https://developer.chrome.com/extensions/faq#faq-dev-01). Activez "Autoriser l'accès aux URL de fichiers" dans la page des détails de l'extension si vous effectuez un test local.
+Reactime a perdu sa connexion avec l’onglet que vous surveillez ; il vous suffit de cliquer sur le bouton "reconnecter"
+pour reprendre votre travail.
-### Voulez-vous contribuer à Reactime ?
+### ❓ Pourquoi Reactime ne trouve-t-il pas mes hooks ?
-Veuillez vous référer à la documentation du développeur pour un guide détaillé :
+Reactime détecte et surveille les hooks en parcourant le code React non minifié de votre application en mode développement. Si votre processus de build minifie ou "uglifie" votre code — même pour les builds de développement — Reactime risque de ne pas pouvoir localiser et suivre correctement vos hooks. Pour résoudre ce problème :
-Consultez [DEVELOPER README](src/README.md) pour plus d'informations sur le projet et des instructions sur la construction à partir des sources.
+1. **Assurez-vous d’une vraie build de développement** : Vérifiez la configuration de votre bundler ou outil de build (par ex. Webpack, Babel, Vite, etc.) pour vous assurer que votre application n’est pas minimisée ou "uglifiée" en mode développement.
-### Manuel
+ - Par exemple, avec Webpack, assurez-vous d’exécuter le mode : 'development', ce qui devrait désactiver la minification par défaut.
+ - Dans un projet Create React App, il suffit d’exécuter `npm start` ou `yarn start` pour configurer automatiquement une build de développement non minifiée.
-Après avoir installé l’extension Chrome Reactime, ouvrez votre application dans le navigateur.
+2. **Vérifiez les surcharges** : Assurez-vous qu’aucun plugin Babel ou Webpack personnalisé ne minifie votre code, surtout si vous utilisez des frameworks comme Next.js ou Gatsby. Parfois, des plugins ou scripts supplémentaires peuvent s’exécuter en arrière-plan.
-Ensuite, ouvrez vos Chrome DevTools et accédez au panneau Reactime.
+3. **Redémarrez & recompilez** : Après avoir modifié toute configuration de build, recompilez ou redémarrez votre serveur de développement pour vous assurer que la nouvelle configuration est prise en compte. Ensuite, rafraîchissez l’onglet de votre navigateur afin que Reactime puisse détecter vos hooks non minifiés.
-## Diagnostic des anomalies
+Après avoir modifié toute configuration de build, recompilez ou redémarrez votre serveur de développement pour vous assurer que la nouvelle configuration est prise en compte. Ensuite, rafraîchissez l’onglet de votre navigateur afin que Reactime puisse détecter vos hooks non minifiés.
-### ❓ Que faire quand Reactime ne trouve pas d’application React?
+### ❓ Pourquoi Reactime m’indique qu’aucune application React n’a été trouvée ?
-Reactime s'exécute initialement à l'aide du hook global des outils de développement de l'API Chrome. Leur chargement dans Chrome peut prendre du temps. Essayez d'actualiser votre application plusieurs fois jusqu'à ce que Reactime s'exécute.
+Reactime s’exécute initialement grâce au hook global des dev tools de Chrome.
+Il faut du temps à Chrome pour le charger. Essayez de rafraîchir votre application plusieurs fois jusqu’à ce que vous voyiez Reactime en fonctionnement.
-### ❓ Un écran noir s’affiche à la place de l’extension Reactime
+### ❓ Pourquoi dois-je avoir les React Dev Tools activées ?
-Essayez d'actualiser l'application que vous souhaitez tester et actualisez les DevTools en cliquant sur le bouton droit de la souris «Recharger le cadre».
+Reactime fonctionne de concert avec les React Developer Tools pour accéder à l’arbre Fiber d’une application React ; en interne, Reactime parcourt l’arbre Fiber via le hook global des React Dev Tools, récupérant toutes les informations pertinentes à afficher au développeur.
### ❓ J’ai trouvé un bug dans Reactime
-Reactime est un projet open source, et toute aide de vore part sera grandement appréciée pour nous aider à améliorer l'expérience utilisateur. Veuillez créer une pull request (ou un problème) pour proposer et collaborer sur les modifications apportées à un référentiel.
+Reactime est un projet open-source, et nous serions ravis d’avoir vos retours pour améliorer l’expérience utilisateur. Veuillez consulter le 👩💻 README Développeur,
+et créer une Pull Request (ou une issue) pour proposer et collaborer sur des modifications de Reactime.
-## En savoir plus
+### ❓ Compatibilité avec les versions Node
-- [Reactime: Real-time Debugging, Timeless Results](https://medium.com/@kelvinmirhan/reactime-real-time-debugging-timeless-results-3f163b721d01)
+Depuis la sortie de Node v18.12.1 (LTS) le 04/11/22, le script a été mis à jour avec
+`npm run dev` | `npm run build` pour assurer une rétrocompatibilité.
+Pour la version Node v16.16.0, veuillez utiliser les scripts `npm run devlegacy` | `npm run buildlegacy`
+
+
-## Auteurs
+
✍️ Auteurs
+- **Garrett Chow** - [@garrettlchow](https://github.com/garrettlchow)
+- **Ellie Simens** - [@elliesimens](https://github.com/elliesimens)
+- **Ragad Mohammed** - [@ragad-mohammed](https://github.com/ragad-mohammed)
+- **Daniel Ryczek** - [@dryczek14](https://github.com/dryczek01)
+- **Patrice Pinardo** - [@pinardo88](https://github.com/pinardo88)
- **Haider Ali** - [@hali03](https://github.com/hali03)
- **Jose Luis Sanchez** - [@JoseSanchez1996](https://github.com/JoseSanchez1996)
- **Logan Nelsen** - [@ljn16](https://github.com/ljn16)
@@ -224,6 +276,14 @@ Reactime est un projet open source, et toute aide de vore part sera grandement a
- **Eric Yun** - [@ericsngyun](https://github.com/ericsngyun)
- **James Nghiem** - [@jemzir](https://github.com/jemzir)
- **Wilton Lee** - [@wiltonlee948](https://github.com/wiltonlee948)
+- **Louis Lam** - [@llam722](https://github.com/llam722)
+- **Samuel Tran** - [@leumastr](https://github.com/leumastr)
+- **Brian Yang** - [@yangbrian310](https://github.com/yangbrian310)
+- **Emin Tahirov** - [@eminthrv](https://github.com/eminthrv)
+- **Peng Dong** - [@d28601581](https://github.com/d28601581)
+- **Ozair Ghulam** - [@ozairgh](https://github.com/ozairgh)
+- **Christina Or** - [@christinaor](https://github.com/christinaor)
+- **Khanh Bui** - [@AndyB909](https://github.com/AndyB909)
- **David Kim** - [@codejunkie7](https://github.com/codejunkie7)
- **Robby Tipton** - [@RobbyTipton](https://github.com/RobbyTipton)
- **Kevin HoEun Lee** - [@khobread](https://github.com/khobread)
@@ -233,7 +293,8 @@ Reactime est un projet open source, et toute aide de vore part sera grandement a
- **Daljit Gill** - [@dgill05](https://github.com/dgill05)
- **Ben Michareune** - [@bmichare](https://github.com/bmichare)
- **Dane Corpion** - [@danecorpion](https://github.com/danecorpion)
-- **Harry Fox** - [@StackOverFlowWhereArtThou](https://github.com/StackOverFlowWhereArtThou)
+- **Harry Fox** -
+ [@StackOverFlowWhereArtThou](https://github.com/StackOverFlowWhereArtThou)
- **Nathan Richardson** - [@BagelEnthusiast](https://github.com/BagelEnthusiast)
- **David Bernstein** - [@dangitbobbeh](https://github.com/dangitbobbeh)
- **Joseph Stern** - [@josephiswhere](https://github.com/josephiswhere)
@@ -264,18 +325,19 @@ Reactime est un projet open source, et toute aide de vore part sera grandement a
- **Bryan Lee** - [@mylee1995](https://github.com/mylee1995)
- **Josh Kim** - [@joshua0308](https://github.com/joshua0308)
- **Sierra Swaby** - [@starkspark](https://github.com/starkspark)
-- **Ruth Anam** - [@peachiecodes](https://github.com/peachiecodes)
+- **Ruth Anam** - [@nusanam](https://github.com/nusanam)
- **David Chai** - [@davidchaidev](https://github.com/davidchai717)
- **Yujin Kang** - [@yujinkay](https://github.com/yujinkay)
-- **Andy Wong** - [@andywongdev](https://github.com/andywongdev)
-- **Chris Flannery** - [@chriswillsflannery](https://github.com/chriswillsflannery)
+- **Andy Wong** - [@andynullwong](https://github.com/andynullwong)
+- **Chris Flannery** -
+ [@chriswillsflannery](https://github.com/chriswillsflannery)
- **Rajeeb Banstola** - [@rajeebthegreat](https://github.com/rajeebthegreat)
- **Prasanna Malla** - [@prasmalla](https://github.com/prasmalla)
- **Rocky Lin** - [@rocky9413](https://github.com/rocky9413)
- **Abaas Khorrami** - [@dubalol](https://github.com/dubalol)
- **Ergi Shehu** - [@Ergi516](https://github.com/ergi516)
- **Raymond Kwan** - [@rkwn](https://github.com/rkwn)
-- **Joshua Howard** - [@Joshua-Howard](https://github.com/joshua-howard)
+- **Joshua Howard** - [@joshua-howard](https://github.com/joshua-howard)
- **Lina Shin** - [@rxlina](https://github.com/rxlina)
- **Andy Tsou** - [@andytsou19](https://github.com/andytsou19)
- **Feiyi Wu** - [@FreyaWu](https://github.com/FreyaWu)
@@ -283,7 +345,7 @@ Reactime est un projet open source, et toute aide de vore part sera grandement a
- **Alex Gomez** - [@alexgomez9](https://github.com/alexgomez9)
- **Edar Liu** - [@liuedar](https://github.com/liuedar)
- **Kristina Wallen** - [@kristinawallen](https://github.com/kristinawallen)
-- **Quan Le** - [@blachfog](https://github.com/Blachfog)
+- **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)
@@ -297,11 +359,21 @@ Reactime est un projet open source, et toute aide de vore part sera grandement a
- **James McCollough** - [@j-mccoll](https://github.com/j-mccoll)
- **Mike Bednarz** - [@mikebednarz](https://github.com/mikebednarz)
- **Sergei Liubchenko** - [@sergeylvq](https://github.com/sergeylvq)
+- **Yididia Ketema** - [@yididiaketema](https://github.com/yididiaketema)
+- **Morah Geist** - [@morahgeist](https://github.com/morahgeist)
+- **Eivind Del Fierro** - [@EivindDelFierro](https://github.com/EivindDelFierro)
+- **Kyle Bell** - [@KyEBell](https://github.com/KyEBell)
+- **Sean Kelly** - [@brok3turtl3](https://github.com/brok3turtl3)
- **Christopher Stamper** - [@ctstamper](https://github.com/ctstamper)
- **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)
+
-## License
+
⚖️ Licence
-Ce projet est sous licence MIT - voir le fichier [LICENSE](LICENSE) pour plus de détails
+Ce projet est distribué sous licence MIT - voir le fichier [LICENSE](LICENSE) pour plus de détails.
diff --git a/README.id.md b/README.id.md
new file mode 100644
index 000000000..80b2b8898
--- /dev/null
+++ b/README.id.md
@@ -0,0 +1,361 @@
+
+
+### 🔍 Visualisasi State
+
+- **Beberapa Tampilan**: Visualisasikan state aplikasi Anda melalui Component Graphs, JSON Trees, Performance Graphs, dan Accessibility Trees
+- **History Timeline**: Lacak perubahan state seiring waktu melalui tampilan riwayat yang intuitif
+- **Web Metrics**: Pantau metrik kinerja penting secara real-time
+- **Insight Aksesibilitas**: Analisis accessibility tree aplikasi Anda pada setiap perubahan state
+
+
+
Pada halaman utama, terdapat dua pilihan utama di panel dropdown:
+
+- **Timejump**: Melihat dan menavigasi riwayat snapshot state aplikasi Anda. Anda dapat melompat ke titik mana pun dalam waktu untuk melihat bagaimana state berubah di setiap perubahan. Anda juga dapat menggunakan tombol play untuk memutar ulang setiap perubahan state secara otomatis.
+- **Providers / Consumers**: Memahami dependensi context aplikasi Anda dan bagaimana elemen-elemen tersebut berinteraksi, melalui visualisasi hubungan provider dan consumer.
+
+
+
+
+
+
+
+### ⏱️ Debugging Lintas-Waktu
+
+- **Snapshot State**: Tangkap dan navigasi riwayat state aplikasi Anda
+- **Playback Controls**: Putar ulang perubahan state secara otomatis dengan kecepatan yang dapat disesuaikan
+- **Jump Points**: Langsung menuju state yang sebelumnya
+- **Perbandingan Diff**: Bandingkan state antar snapshot
+
+
+
+
+
+
+
+### 📊 Analisis Kinerja
+
+- **Metrik Komponen**: Lacak waktu render dan potensi bottleneck pada kinerja
+- **Perbandingan Seri**: Bandingkan kinerja di berbagai set perubahan state
+- **Deteksi Re-render**: Identifikasi dan perbaiki siklus render yang tidak diperlukan
+- **Web Vitals**: Pantau Core Web Vitals dan metrik kinerja lainnya
+
+
+
+### 🔄 Dukungan Framework Modern
+
+
+
+ Kompatibilitas penuh dengan Next.js, Remix, Recoil, dan Gatsby
+
+
+ Dukungan TypeScript untuk komponen berbasis class dan fungsional
+
+
+ Dukungan untuk React Hooks dan Context API
+
+
+
+
+### 💾 Persistensi & Berbagi State
+
+Reactime memudahkan proses menyimpan dan berbagi riwayat state aplikasi Anda:
+
+- **Ekspor Riwayat State**: Simpan snapshot yang direkam sebagai berkas JSON untuk analisis lebih lanjut atau dibagikan
+- **Impor Sesi Sebelumnya**: Unggah snapshot yang telah disimpan untuk membandingkan perubahan state di sesi yang berbeda
+- **Analisis Lintas-Sesi**: Bandingkan kinerja dan perubahan state antara berbagai sesi pengembangan
+
+
+
+
+
+
+
+### 📚 Dokumentasi Interaktif
+
+Reactime menyediakan dokumentasi komprehensif untuk membantu pengembang memahami arsitektur dan API-nya:
+Setelah melakukan clone pada repositori ini, pengembang dapat menjalankan `npm run docs` di
+level root, dan menyajikan `/docs/index.html` yang dihasilkan secara dinamis, yang menyediakan:
+
+
+
Diagram komponen interaktif
+
Definisi tipe dan interface
+
Gambaran umum arsitektur codebase
+
Referensi dan contoh API
+
+
+
+
🎉 Apa yang Baru!
+
+Reactime 26.0 menghadirkan perombakan total pada pengalaman debugging React, dengan fitur-fitur:
+
+- **Tampilan Data Context Baru**
+ - Visualisasi pertama untuk perubahan state hook useContext
+ - Pemetaan jelas hubungan provider-consumer
+ - Pemantauan nilai state context secara real-time
+ - Visualisasi data provider yang terperinci
+
+- **Debugging Lintas-Waktu yang Ditingkatkan**
+ - Antarmuka slider yang didesain ulang, ditempatkan di samping snapshot
+ - Kontrol kecepatan pemutaran yang bervariasi
+ - Navigasi state yang lebih intuitif
+ - Visualisasi snapshot yang lebih baik
+
+- **Perombakan UI Modern**
+ - Desain yang lebih segar dengan komponen membulat
+ - Peningkatan tata letak yang intuitif
+ - Dukungan mode gelap baru
+ - Hierarki visual yang diperbarui
+
+- **Peningkatan Teknis Besar**
+ - Mengatasi masalah koneksi yang terputus saat idle dan perpindahan tab
+ - Mengembalikan visualisasi accessibility tree
+ - Memperbaiki masalah penangkapan state pada useState berbasis fungsi
+ - Meningkatkan keandalan dan kinerja ekstensi secara keseluruhan
+
+Pembaruan ini membuat Reactime lebih kuat, andal, dan ramah pengguna dari sebelumnya, menetapkan standar baru bagi alat debugging React.
+
+
+
+
🚀 Memulai
+
+### Instalasi
+
+1. Pasang [Ekstensi Reactime](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) dari Chrome Web Store
+2. Pasang ekstensi [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) yang diperlukan jika Anda belum memasangnya
+
+### Prasyarat
+
+- Aplikasi React Anda harus berjalan dalam **mode development**
+- Ekstensi React Developer Tools harus terpasang
+- Peramban Chrome (disarankan versi 80 atau lebih tinggi)
+
+### Menjalankan Reactime
+
+Ada dua cara untuk membuka panel Reactime:
+
+1. **DevTools**
+ - Buka Chrome DevTools (F12 atau ⌘+⌥+I)
+ - Buka tab "Reactime"
+ - Ini akan membuka Reactime sebagai panel di dalam Chrome DevTools, terintegrasi bersama alat pengembangan Anda yang lain
+
+2. **Context Menu**
+ - Klik kanan di mana saja pada aplikasi React Anda
+ - Pilih "Reactime" dari context menu
+ - Ini akan membuka Reactime di jendela popup terpisah yang dapat Anda ubah ukuran dan posisinya secara mandiri
+
+Setelah diluncurkan, Reactime secara otomatis akan mulai memantau perubahan state dan metrik kinerja aplikasi Anda.
+
+
+
+
🤝 Berkontribusi di Reactime
+
+Kami menyambut kontribusi dari pengembang di semua tingkatan! Untuk panduan terperinci tentang cara berkontribusi:
+
+1. **Mulai**
+ - Fork repositori
+ - Pelajari README Pengembang kami yang komprehensif
+ - Siapkan lingkungan pengembangan lokal Anda
+
+2. **Proses Build**
+ - Ikuti petunjuk build di README Pengembang kami
+ - Uji perubahan Anda secara menyeluruh
+ - Ajukan pull request
+
+Bergabunglah dengan komunitas kontributor kami yang terus berkembang dan bantu membentuk masa depan alat debugging React! Untuk panduan kontribusi dan informasi arsitektur proyek yang lebih rinci, silakan lihat 👩💻 README Pengembang dan 🙋 Contributing README.
+
+
+
+
🛠️ Pemecahan Masalah
+
+### ❓ Mengapa Reactime tidak merekam perubahan state baru?
+
+Reactime kehilangan koneksi dengan tab yang Anda pantau. Cukup klik tombol "reconnect" untuk melanjutkan pekerjaan Anda.
+
+### ❓ Mengapa Reactime tidak menemukan hooks saya?
+
+Reactime mendeteksi dan memantau hooks dengan menelusuri kode React Anda yang belum di-minify di mode development. Jika proses build Anda meminifikasi atau meng-uglify kode—even untuk build development—Reactime mungkin tidak bisa mendeteksi dan melacak hooks Anda dengan benar. Untuk memperbaikinya:
+
+1. **Pastikan build benar-benar development**: Periksa konfigurasi bundler atau build tool Anda (misalnya, Webpack, Babel, Vite, dll.) untuk memastikan aplikasi tidak di-minify atau di-uglify dalam mode development.
+ - Misalnya, dengan Webpack, pastikan Anda menjalankan mode: 'development' yang menonaktifkan minification default.
+ - Pada proyek Create React App, cukup jalankan npm start atau yarn start yang secara otomatis mengonfigurasi build development yang tidak di-minify.
+2. **Periksa override**: Pastikan tidak ada plugin Babel atau Webpack kustom yang meminifikasi kode Anda, terutama jika Anda menggunakan framework seperti Next.js atau Gatsby. Terkadang ada plugin atau skrip tambahan yang berjalan di belakang layar.
+3. **Restart & rebuild**: Setelah mengubah konfigurasi build, lakukan rebuild atau restart server development Anda agar konfigurasi baru diterapkan. Lalu segarkan tab peramban Anda agar Reactime dapat mendeteksi hooks yang tidak di-minify.
+
+Setelah mengubah konfigurasi build, rebuild atau restart server pengembangan Anda agar konfigurasi baru diterapkan. Kemudian, refresh tab peramban sehingga Reactime dapat mendeteksi hooks Anda yang tidak di-minify.
+
+### ❓ Mengapa Reactime mengatakan bahwa tidak ada aplikasi React yang ditemukan?
+
+Reactime awalnya dijalankan menggunakan dev tools global hook dari API Chrome. Proses ini memerlukan waktu untuk dimuat. Coba refresh aplikasi Anda beberapa kali hingga Reactime muncul.
+
+### ❓ Mengapa saya harus mengaktifkan React Dev Tools?
+
+Reactime bekerja berdampingan dengan React Developer Tools untuk mengakses Fiber tree aplikasi React; di balik layar, Reactime menjelajahi Fiber tree melalui global hook dari React Developer Tools, dan mengambil semua informasi relevan yang diperlukan untuk ditampilkan kepada pengembang.
+
+### ❓ Saya menemukan bug di Reactime
+
+Reactime adalah proyek open-source, dan kami ingin mendengar masukan Anda untuk meningkatkan pengalaman pengguna. Silakan baca 👩💻 README Pengembang,
+dan buat pull request (atau issue) untuk mengusulkan dan berkolaborasi dalam perubahan pada Reactime.
+
+### ❓ Kecocokan versi Node
+
+Dengan rilis Node v18.12.1 (LTS) pada 4/11/22, skrip telah diperbarui menjadi
+'npm run dev' | 'npm run build' untuk menjaga kompatibilitas mundur.
+Untuk versi Node v16.16.0, silakan gunakan skrip 'npm run devlegacy' | 'npm run buildlegacy'
+
+
+
+
+
+Proyek ini dilisensikan di bawah MIT License - lihat berkas [LICENSE](LICENSE) untuk detail selengkapnya.
diff --git a/README.md b/README.md
index 7534d0384..c9ac28701 100644
--- a/README.md
+++ b/README.md
@@ -1,222 +1,242 @@
Reactime is an open-source Chrome developer tool for time travel debugging and performance monitoring in React applications. Reactime enables developers to record snapshots of application state, jump between and inspect state snapshots, and monitor performance metrics such as component render time and render frequency.
+
A powerful Chrome extension that enhances React development with time-travel debugging and advanced performance monitoring
+
Read our Medium Article to learn more about Reactime’s behind-the-scenes and development process!
+### 🔍 State Visualization
-### 🔹 Viewing
+- **Multiple Views**: Visualize your application state through Component Graphs, JSON Trees, Performance Graphs, and Accessibility Trees
+- **History Timeline**: Track state changes over time with an intuitive history visualization
+- **Web Metrics**: Monitor critical performance metrics in real-time
+- **Accessibility Insights**: Analyze your app's accessibility tree for each state change
+
-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. Snapshot history can be visualized in the History tab.
-The Web Metrics tab provides some useful metrics for site performance. The accessibility tab
-visualizes an app's accessibility tree per state change.
-Snapshots can be compared with the previous snapshot, which can be viewed in Diff mode.
-
-
+
On the main page, there are two main selections from the dropdown panel:
+
+- **Timejump**: View and navigate through the snapshot history of your application's state. You can jump to any point in time to see how the state evolves across changes. You can also use the play button to replay each state change automatically.
+- **Providers / Consumers**: Understand your application's context dependencies and their interactions better through visualizing its provider and consumer relationships.
+
-
+
-### 🔹 Recording
+### ⏱️ Time-Travel Debugging
-Whenever the state is changed (whenever setState, useState 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.
-
+- **State Snapshots**: Capture and navigate through your application's state history
+- **Playback Controls**: Automatically replay state changes with adjustable speed
+- **Jump Points**: Instantly navigate to any previous state
+- **Diff Comparisons**: Compare states between snapshots
+
+
+
+
+
-### 🔹 Snapshot Series and Action Comparison
+### 📊 Performance Analysis
-You can save a series of state snapshots and use it to analyze changes in
-component render performance between the current and the previous series of snapshots.
-You can also name specific snapshots and compare all snapshots with the same
-name.
-
-
+- **Component Metrics**: Track render times and performance bottlenecks
+- **Series Comparison**: Compare performance across different sets of state changes
+- **Re-render Detection**: Identify and fix unnecessary render cycles
+- **Web Vitals**: Monitor Core Web Vitals and other performance metrics
+
+
-### 🔹 Components Comparison
+### 🔄 Modern Framework Support
+
+
+
+ Full compatibility with Next.js, Remix, Recoil, and Gatsby
+
+
+TypeScript support for class and functional components
+
+
+Support for React Hooks and Context API
+
+
+
-When toggled to a specific snapshot, a visualization of the individual
-components of the snapshot will be displayed. This can be done under the same
-Performance tab where the snapshots are rendered. You will also find details of
-each component upon hovering.
-
-
+### 💾 State Persistence & Sharing
-### 🔹 Download/Upload Snapshots
+Reactime makes it easy to save and share your application's state history:
-Download the recorded snapshots as a JSON file and upload them to access state trees across different sessions.
-
-
+- **Export State History**: Save your recorded snapshots as a JSON file for later analysis or sharing
+- **Import Previous Sessions**: Upload previously saved snapshots to compare state changes across different sessions
+- **Cross-Session Analysis**: Compare performance and state changes between different development sessions
+
-
+
-### 🔹 Reconnect and Status
+### 📚 Interactive Documentation
-If Reactime loses its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work. You'll notice a circle located to the right of the button, which will appear as either red (indicating disconnection) or green (signifying a successful reconnection).
-
-
+Reactime provides comprehensive documentation to help developers understand its architecture and APIs:
+After cloning this repository, developers can simply run `npm run docs` at the
+root level and serve the dynamically generated `/docs/index.html` provding:
+
+
+
+ Interactive component diagrams
+
+
+Type definitions and interfaces
+
+
+Codebase architecture overview
+
+
+API references and examples
+
+
+
-### 🔹 Re-render Optimization
+
🎉 What's New!
-One of the most common issues that affects performance in React is unnecessary
-render cycles. This problem can be fixed by checking your renders in the
-Performance tab in Chrome DevTools under the Reactime panel.
-
-
+Reactime 26.0 brings a complete overhaul to the React debugging experience, featuring:
-### 🔹 Jumping
+- **New Context Data Display**
-Using the actions sidebar, a user can jump to any previously recorded snapshots.
-Hitting the jump button on any snapshot will allow a user to view state data at
-any point in the history of the target application.
-
-
+ - First-ever visualization of useContext hook state changes
+ - Clear mapping of provider-consumer relationships
+ - Real-time context state value monitoring
+ - Detailed provider data visualization
-### 🔹 Gatsby
+- **Enhanced Time Travel Debugging**
-Reactime offers full support for Gatsby applications. You would be able to
-identify unnecessary renders, duration of each rendering, travel-debugging
-features and visual representation of the tree components.
-
-
+ - Redesigned slider interface positioned alongside snapshots
+ - Variable playback speed controls
+ - More intuitive state navigation
+ - Improved snapshot visualization
-### 🔹 Next.js
+- **Modern UI Overhaul**
-Reactime offers debugging and performance tools for Next.js apps: time-traveling
-debugging, preventing unnecessary component re-renders and making your
-application faster.
-
-
+ - Sleek, contemporary design with rounded components
+ - Intuitive layout improvements
+ - New dark mode support
+ - Enhanced visual hierarchy
-### 🔹 Remix
+- **Major Technical Improvements**
+ - Fixed connection persistence during idle time and tab switches
+ - Restored accessibility tree visualization
+ - Resolved state capture issues for function-based useState hooks
+ - Improved overall extension reliability and performance
-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.
+These updates make Reactime more powerful, reliable, and user-friendly than ever before, setting a new standard for React debugging tools.
-### 🔹 TypeScript Support
+
🚀 Getting Started
-Reactime offers support for TypeScript applications using stateful class
-components and functional components. Further testing and development is
-required for custom hooks and Concurrent Mode.
-
-
+### Installation
-### 🔹 Documentation
+1. Install the [Reactime extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from the Chrome Web Store
+2. Install the required [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) extension if you haven't already
-After cloning this repository, developers can simply run `npm run docs` at the
-root level and serve the dynamically generated `/docs/index.html` file on a
-browser. Doing so will provide a readable, extensible, and interactive GUI view
-of the structure and interfaces of the codebase.
-
-
+### Prerequisites
-### Additional Features
+- Your React application must be running in **development mode**
+- React Developer Tools extension must be installed
+- Chrome browser (version 80 or higher recommended)
-- In-app tab-specific tutorial walkthroughs
-- Hover over a component to view tooltip details on state visualizations
-- Double-click to collapse child components
-- Click to focus on a portion of the component map
-- A dropdown to support the development of projects on multiple tabs
-- Intuitive navigation between state snapshots
-- Locked/unlocked feature allowing temporary pause of state monitoring
-- Prop visualization both in color and tickness of the branches of connecting the components
-- Heatmap bar underneath the top menu
+### Launch Reactime
-
What's New!
+There are two ways to open the Reactime panel:
-Reactime 25.0 includes a new prop visualization feature and heatmap bar for developers!
+1. **DevTools**
-We also addressed the previously reported freezing issues on start and brought up the Jest Library in much better condition as it was before; from 20% of the tests working to more than 85% now working correctly.
+ - Open Chrome DevTools (F12 or ⌘+⌥+I)
+ - Navigate to the "Reactime" tab
+ - This will open Reactime as a panel within Chrome DevTools, integrated alongside your other development tools
-Some of the UI was rearranged to be more aesthetically pleasing and render the main window bigger for the diplay of the component tree in the process.
+2. **Context Menu**
-If you would like to read more about previous releases, click here!
+ - Right-click anywhere on your React application
+ - Select "Reactime" from the context menu
+ - This will open Reactime in a separate popup window which you can resize and position independently
-
+Once launched, Reactime will automatically begin monitoring your application's state changes and performance metrics.
+
+
+
+
🤝 Contributing to Reactime
-
Installation
+We welcome contributions from developers of all skill levels! For detailed guidelines on how to contribute:
-To get started, install the Reactime
-[extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga)
-from Chrome Web Store.
+1. **Get Started**
-After installing Reactime, you can test its functionalities with your React
-application in development mode.
+ - Fork the repository
+ - Review our comprehensive Developer README
+ - Set up your local development environment
-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.
+2. **Build Process**
-NOTE: The React Developer Tools
-[extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
-is also required for Reactime to run, if you do not already have it installed on
-your browser.
+ - Follow our build instructions in the Developer README
+ - Test your changes thoroughly
+ - Submit a pull request
+
+Join our growing community of contributors and help shape the future of React debugging tools! For detailed contribution guidelines and project architecture information, please refer to our 👩💻 Developer README and 🙋 Contributing README
+
+
-### Manual Installation
+
🛠️ Troubleshooting
-Go to Chrome Extensions (make sure Chrome Extension is in Developer Mode) for
-manual installation in (https://developer.chrome.com/extensions/faq#faq-dev-01)
-and click on Load Unpacked. Use `src/extension/build/` to load this extension.
-Turn on 'Allow access to file URLs' in the extension details page if testing
-locally.
+### ❓ Why is Reactime not recording new state changes?
-### Looking to contribute to Reactime?
+Reactime lost its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work.
-Please refer to Developer Install for a detailed guide:
+### ❓ Why isn’t Reactime finding my hooks?
-Refer to the [DEVELOPER README](src/DEVELOPER_README.md) for more info on the project, and
-instructions on building from source.
+Reactime detects and monitors hooks by traversing your application’s unminified React code in development mode. If your build process is minifying or uglifying your code—even for development builds—Reactime may not be able to properly locate and track your hooks. To fix this:
-### How to Use
+1. **Ensure a true development build**: Double-check your bundler or build tool configuration (e.g., Webpack, Babel, Vite, etc.) to make sure that your application is not minimized or uglified in development mode.
-After installing the Chrome extension, just open up your project in the browser.
+ - For example, with Webpack, make sure you’re running in mode: 'development', which should disable default minification.
+ - In a Create React App project, simply running npm start or yarn start will automatically configure a non-minified development build.
-Then right click on your application and choose the 'Reactime' context menu item to open up a Reactime panel.
+2. **Check for overrides**: Ensure there are no custom Babel or Webpack plugins that minify your code, especially if you’re using frameworks like Next.js or Gatsby. Sometimes additional plugins or scripts might be running under the hood.
-Alternatively, you can open up your Chrome DevTools and navigate to the Reactime panel.
+3. **Restart & rebuild**: After changing any build configuration, rebuild or restart your development server to ensure the new configuration is applied. Then refresh your browser tab so Reactime can detect your unminified hooks.
-## Troubleshooting
+After changing any build configuration, rebuild or restart your development server to ensure the new configuration is applied. Then refresh your browser tab so Reactime can detect your unminified hooks.
### ❓ Why is Reactime telling me that no React application is found?
@@ -228,15 +248,10 @@ times until you see Reactime running.
Reactime works in tandem with the React Developer Tools to access a React application's Fiber tree; under the hood, Reactime traverses the Fiber tree through the React Developer Tool's global hook, pulling all relevant information needed to display to the developer
-### ❓ There is a black screen instead of the Reactime extension
-
-Try refreshing the application you want to test and refresh the DevTools by
-clicking the right mouse button “Reload frame”.
-
### ❓ I found a bug in Reactime
Reactime is an open-source project, and we'd love to hear from you about
-improving the user experience. Please read [DEVELOPER README](src/DEVELOPER_README.md),
+improving the user experience. Please read the 👩💻 Developer README,
and create a pull request (or issue) to propose and collaborate on changes to Reactime.
### ❓ Node version compatibility
@@ -244,13 +259,16 @@ and create a pull request (or issue) to propose and collaborate on changes to Re
With the 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'
+
+
-## Read More
-
-- [Relaunching Reactime: Updates and a New Accessibility Feature!](https://medium.com/@evaury/relaunching-reactime-updates-and-a-new-accessibility-feature-1f0fd3a5bd8c)
-
-## Authors
+
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
-for details.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
diff --git a/README.rus.md b/README.rus.md
index da2824f10..508f69a1a 100644
--- a/README.rus.md
+++ b/README.rus.md
@@ -1,105 +1,258 @@
-
Мощное расширение Chrome, которое улучшает процесс разработки React за счёт отладки с путешествиями во времени и углублённого мониторинга производительности
-Reactime 25.0 включает в себя новую функцию визуализации свойств и тепловую панель для разработчиков!
+### 🔍 Визуализация состояния
-Мы также решили ранее сообщенные проблемы с зависанием при старте и значительно улучшили состояние библиотеки Jest, теперь большинство тестов работают корректно.
+- **Разнообразные представления**: Отображение состояния приложения в виде графов компонентов, JSON-деревьев, графиков производительности и деревьев доступности
+- **История изменений**: Отслеживайте изменения состояния во времени с удобной визуализацией истории
+- **Метрики веб-приложения**: Отслеживайте важные метрики производительности в реальном времени
+- **Аналитика доступности**: Анализируйте дерево доступности вашего приложения на каждом этапе изменения состояния
+
-Некоторые элементы пользовательского интерфейса были перераспределены для более эстетически приятного вида и для отображения главного окна большего размера для отображения дерева компонентов в процессе.
+
На главном экране доступны два основных выбора из выпадающего списка:
-Reactime - расширение для дебаггинга/отладки React приложений. Оно создает снэпшоты при каждом изменении состояния (state) и позволяет пользованию прыгать на любое предыдущее состояние (state).
-В настоящее время Reactime поддерживает React приложения с классовыми, функциональными компонентами, хуками и Context API.
+- **Timejump**: Просматривайте и перемещайтесь по истории снимков состояния (snapshot) вашего приложения. Можно переместиться в любую точку во времени, чтобы увидеть, как состояние эволюционировало при изменениях. Также доступна кнопка воспроизведения, чтобы автоматически проиграть каждое изменение состояния.
+- **Providers / Consumers**: Глубже понимайте зависимости контекста приложения и его взаимодействия, визуализируя отношения провайдеров и потребителей.
+
+
+
+
+
+
-После загрузки Reactime вы можете протестировать его полную функциональность на любом вашем React приложении в режиме разработки (dev mode). В продакшен режиме вы можете только работать с картой компонентов.
+### ⏱️ Отладка с путешествиями во времени
-## Установка
+- **Снимки состояния**: Фиксируйте и перемещайтесь по истории состояния приложения
+- **Элементы управления воспроизведением**: Автоматически воспроизводите изменения состояния с регулировкой скорости
+- **Точки мгновенного перехода**: Мгновенно возвращайтесь к любому предыдущему состоянию
+- **Сравнение состояний**: Сравнивайте разницу между снимками состояния
+
-Для начала использования приложения, скачайте Reactime [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) из Chrome Web Store.
+
+
+
+
-Внимание: Вам понадобится React Developer Tools [extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) Вам не нужно запускать React DevTools, но расширение должно быть установлено в вашем браузере.
+### 📊 Анализ производительности
-### Альтернативная установка
+- **Метрики компонентов**: Отслеживайте время рендера и узкие места в производительности
+- **Сравнение серий**: Сопоставляйте производительность при разных наборах изменений состояния
+- **Определение перерисовок**: Находите и исправляйте избыточные циклы рендера
+- **Web Vitals**: Следите за Core Web Vitals и другими метриками
+
+
-Используйте `src/extension/build/build.zip` для мануальной установки в [Developer mode](https://developer.chrome.com/extensions/faq#faq-dev-01). Включите 'Allow access to file URLs' в разделе с расширениями.
+### 🔄 Поддержка современных фреймворков
+
+
+
+ Полная совместимость с Gatsby, Next.js и Remix
+
+
+Поддержка TypeScript для классовых и функциональных компонентов
+
+
+Поддержка React Hooks и Context API
+
+
+
-## Как использовать
+### 💾 Сохранение и обмен состоянием
-После установки Chrome extension, просто откройте ваш проект в браузере.
+Reactime упрощает сохранение и обмен историей состояния вашего приложения:
-Затем откройте Chrome DevTools и найдите панель Reactime.
+- **Экспорт истории**: Сохраняйте записанные снимки в JSON-файл для дальнейшего анализа или передачи
+- **Импорт предыдущих сессий**: Загружайте ранее сохранённые снимки, чтобы сравнивать изменения состояния между разными сессиями
+- **Межсессионный анализ**: Сопоставляйте производительность и изменения состояния между разными этапами разработки
+
-## Устраняем проблемы
+
+
+
+
-### Почему Reactime говорит, что приложение React не найдено?
+### 📚 Интерактивная документация
+
+Reactime предлагает обширную документацию, помогающую разработчикам разобраться в архитектуре и API инструмента. После клонирования репозитория достаточно запустить `npm run docs` в корневой директории, а затем открыть сгенерированный файл `/docs/index.html`, в котором представлены:
+
+
+
+ Интерактивные диаграммы компонентов
+
+
+Типы и интерфейсы
+
+
+Обзор архитектуры кодовой базы
+
+
+API-справочник и примеры
+
+
+
-Reactime работает при использовании глобального хука DevTools, его загрузка может занимать некоторое время у Chrome браузера. Попробуйте обновить ваше приложение.
+
🎉 Что нового!
-### Вместо Reactime - черный экран
+Версия Reactime 26.0 предлагает полное обновление инструмента отладки React, включая:
-Попробуйте обновить приложение, которые вы хотите отладить или обновите панель Reactime. Сделать это можно кликом правой кнопки “Reload the frame”.
+- **Новый показ данных контекста**
-### Я нашел ошибки при работе Reactime
+ - Первая в своём роде визуализация состояния, основанного на хуке useContext
+ - Чёткое отображение отношений «провайдер – потребитель»
+ - Мониторинг значений контекста в реальном времени
+ - Подробная визуализация данных провайдеров
-Reactime это open source project, поэтому мы будем рады, если вы поможете нам сделать его лучше. Если вы знаете как устранить баг - запросите pull request. Также вы можете сообщить об ошибках в разделе “Issues”.
+- **Улучшенная отладка с путешествиями во времени**
-## Функциональность
+ - Переработанный интерфейс слайдера, размещённого вместе со снимками
+ - Элементы управления скоростью воспроизведения
+ - Более интуитивная навигация по состояниям
+ - Улучшенная визуализация снимков
-### Оптимизация рендеринга
+- **Современный переработанный интерфейс**
-Одна из самых распространенных проблем, которая влияет на производительность приложения React - ненужный циклы ре-рендеринга. Эту проблему вы можете решить при помощи отслеживания рендеринга во вкладке Performance в Reactime.
+ - Стильный, современный дизайн со скруглёнными элементами
+ - Интуитивная структура расположения элементов
+ - Новый тёмный режим
+ - Улучшенная визуальная иерархия
-### Запись
+- **Крупные технические улучшения**
+ - Исправлена проблема с сохранением соединения при бездействии или переключении вкладок
+ - Восстановлена визуализация дерева доступности (Accessibility Tree)
+ - Исправлены проблемы с захватом состояния для хуков useState в функциональных компонентах
+ - Общий рост стабильности и производительности расширения
-Когда изменяется состояние (при вызове useState или setState), Reactime создает снэпшот состояния дерева в настоящий момент и записывает его. Каждый снэпшот отображается в Chrome DevTools в разделе Reactime.
+Благодаря этим обновлениям Reactime стал ещё более мощным, надёжным и удобным в использовании, устанавливая новый стандарт среди инструментов отладки React.
-### Просмотр
+Чтобы узнать больше о предыдущих релизах, перейдите по ссылке.
+
+
-При клике на снапшот вы можете увидеть состояние вашего приложения. Состояния отображаются в виде графика или JSON дерева, вы можете переключить вкладку на удобную вам визуализацию.
+
🚀 Начало работы
-### Прыжки
+### Установка
-Используя панель действий, вы можете совершать прыжки на предыдущие сохраненные снэпшоты. Используя данный функционал вы можете отследить работу приложения в нужный момент времени или при вводе определенных данных.
+1. Установите [Reactime](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) из Интернет-магазина Chrome
+2. Установите необходимое расширение [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), если у вас его ещё нет
-### TypeScript поддержка
+### Предварительные требования
-Reactime beta поддерживает приложения, написанные на TypeScript, которые используют классы и функциональные компоненты. Работа с хуками, Context API и Concurrent Mode находится в стадии тестирования.
+- Ваше React-приложение должно работать в **режиме разработки (development)**
+- Расширение React Developer Tools должно быть установлено
+- Браузер Chrome (рекомендуется версия 80 или выше)
-### Документация
+### Запуск Reactime
-После клонирования репозитория, вы можете использовать команду `npm run docs` в корневой папке, которая генерирует файл в браузере `/docs/index.html`. Это упростит знакомство с приложением и поможет вам ознакомиться со структурой и интерфейсом существующего кода.
+Существует два способа открыть панель Reactime:
-## Узнать больше о Reactime и React Fiber
+1. **Контекстное меню**
-- [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)
-- [Meet Reactime - a time-traveling State Debugger for React](https://medium.com/@yujinkay/meet-reactime-a-time-traveling-state-debugger-for-react-24f0fce96802)
-- [Deep in Weeds with Reactime, Concurrent React_fiberRoot, and Browser History Caching](https://itnext.io/deep-in-the-weeds-with-reactime-concurrent-react-fiberroot-and-browser-history-caching-7ce9d7300abb)
+ - Кликните правой кнопкой мыши в любом месте вашего React-приложения
+ - Выберите «Reactime» в контекстном меню
-## Авторы
+2. **Инструменты разработчика**
+ - Откройте Chrome DevTools (F12 или ⌘+⌥+I)
+ - Перейдите на вкладку «Reactime»
+После запуска Reactime автоматически начнёт отслеживать изменения состояния и метрики производительности вашего приложения.
+
+
+
+
🤝 Участие в развитии Reactime
+
+Мы приглашаем всех желающих внести свой вклад в улучшение Reactime! Вот как вы можете помочь: 🙋 Contributing README
+
+1. **Начальный шаг**
+
+ - Сделайте форк репозитория
+ - Изучите наше подробное Руководство для разработчиков (Developer README)
+ - Настройте локальную среду разработки
+
+2. **Процесс сборки**
+ - Следуйте инструкциям по сборке в Руководстве для разработчиков
+ - Тщательно протестируйте свои изменения
+ - Создайте пул-реквест
+
+Присоединяйтесь к нашему растущему сообществу контрибьюторов и помогите формировать будущее инструментов отладки React! Подробные инструкции по участию и архитектуре проекта вы найдёте в 👩💻 Руководстве для разработчиков.
+
+
+
+
🛠️ Устранение неполадок
+
+### ❓ Почему Reactime не записывает новые изменения состояния?
+
+Reactime потерял соединение с вкладкой, за которой ведётся наблюдение. Просто нажмите кнопку «reconnect», чтобы возобновить работу.
+
+### ❓ Почему Reactime не может найти мои хуки?
+
+Reactime обнаруживает и отслеживает хуки, просматривая «неминифицированный» код React в режиме разработки. Если ваш процесс сборки минифицирует или «уродует» (uglify) код — даже в режиме разработки — Reactime может не найти и не отследить ваши хуки. Чтобы исправить это:
+
+1. **Убедитесь, что сборка действительно предназначена для разработки**: Проверьте настройки вашего бандлера или инструмента сборки (например, Webpack, Babel, Vite и т. д.), чтобы приложение не было минимизировано и «уродовано» в режиме разработки.
+ - Например, в Webpack установите `mode: 'development'`, чтобы по умолчанию отключить минификацию.
+ - В Create React App, достаточно запустить `npm start` или `yarn start`, чтобы автоматически настроить неминифицированную сборку.
+2. **Проверьте, нет ли переопределений**: Убедитесь, что нет дополнительных Babel- или Webpack-плагинов, которые минифицируют ваш код, особенно если вы используете фреймворки вроде Next.js или Gatsby. Иногда дополнительные плагины или скрипты могут незаметно запускать минификацию.
+3. **Перезапустите и пересоберите**: После изменения настроек сборки перезапустите или пересоберите ваше приложение, чтобы новые настройки были применены. Затем обновите вкладку браузера, чтобы Reactime мог обнаружить ваши неминифицированные хуки.
+
+### ❓ Почему Reactime говорит, что React-приложение не найдено?
+
+Reactime изначально запускается, используя глобальный хук dev tools из API Chrome. Чтобы Chrome успел это загрузить, может потребоваться время. Попробуйте обновить (refresh) ваше приложение несколько раз, пока не увидите, что Reactime заработал.
+
+### ❓ Почему мне нужно включать React Dev Tools?
+
+Reactime работает в связке с React Developer Tools, чтобы получить доступ к дереву Fiber в React-приложении. Внутри Reactime просматривает дерево Fiber через глобальный хук из React Developer Tools, получая всю необходимую информацию для отображения разработчику.
+
+### ❓ Я нашёл(ла) баг в Reactime
+
+Reactime — это проект с открытым исходным кодом. Мы будем рады услышать ваши идеи по улучшению пользовательского опыта. Ознакомьтесь с 👩💻 Руководством для разработчиков и создайте пул-реквест (или Issue), чтобы предложить и совместно доработать изменения в Reactime.
+
+### ❓ Совместимость с версиями Node
+
+С выходом Node v18.12.1 (LTS) от 04.11.22 в скриптах появились команды
+`npm run dev` | `npm run build` для обратной совместимости. Для версии
+Node v16.16.0 используйте скрипты `npm run devlegacy` | `npm run buildlegacy`
+
+
+
+
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
+Этот проект распространяется по лицензии MIT — подробности см. в файле [LICENSE](LICENSE).
diff --git a/assets/App_Structure_Diagram_v21.png b/assets/App_Structure_Diagram_v21.png
deleted file mode 100644
index 81ed0b63d..000000000
Binary files a/assets/App_Structure_Diagram_v21.png and /dev/null differ
diff --git a/assets/BackEndDependencyChart.png b/assets/BackEndDependencyChart.png
deleted file mode 100644
index b86b0af66..000000000
Binary files a/assets/BackEndDependencyChart.png and /dev/null differ
diff --git a/assets/Back_End_Dependency_Chart_v21.png b/assets/Back_End_Dependency_Chart_v21.png
deleted file mode 100644
index a9ec18834..000000000
Binary files a/assets/Back_End_Dependency_Chart_v21.png and /dev/null differ
diff --git a/assets/Front_End_Dependency_Chart_v21.png b/assets/Front_End_Dependency_Chart_v21.png
deleted file mode 100644
index 9c9ceffcc..000000000
Binary files a/assets/Front_End_Dependency_Chart_v21.png and /dev/null differ
diff --git a/assets/Hook_Research_v21.png b/assets/Hook_Research_v21.png
deleted file mode 100644
index 6426db91e..000000000
Binary files a/assets/Hook_Research_v21.png and /dev/null differ
diff --git a/assets/archive/readme_logo.png b/assets/archive/readme_logo.png
deleted file mode 100644
index 618512e11..000000000
Binary files a/assets/archive/readme_logo.png and /dev/null differ
diff --git a/assets/gifs/GeneralDemoGif_V26.gif b/assets/gifs/GeneralDemoGif_V26.gif
new file mode 100644
index 000000000..cae64e5de
Binary files /dev/null and b/assets/gifs/GeneralDemoGif_V26.gif differ
diff --git a/assets/gifs/ImportExportGif_V26.gif b/assets/gifs/ImportExportGif_V26.gif
new file mode 100644
index 000000000..4947ff1dd
Binary files /dev/null and b/assets/gifs/ImportExportGif_V26.gif differ
diff --git a/assets/gifs/ProviderConsumer_V26.gif b/assets/gifs/ProviderConsumer_V26.gif
new file mode 100644
index 000000000..ff436de8f
Binary files /dev/null and b/assets/gifs/ProviderConsumer_V26.gif differ
diff --git a/assets/gifs/ReconnectGif22.gif b/assets/gifs/ReconnectGif22.gif
deleted file mode 100644
index b4da028bf..000000000
Binary files a/assets/gifs/ReconnectGif22.gif and /dev/null differ
diff --git a/assets/gifs/TimeTravelGif_V26.gif b/assets/gifs/TimeTravelGif_V26.gif
new file mode 100644
index 000000000..e1d20bb71
Binary files /dev/null and b/assets/gifs/TimeTravelGif_V26.gif differ
diff --git a/assets/gifs/app_main_v26.png b/assets/gifs/app_main_v26.png
new file mode 100644
index 000000000..c0d9076fd
Binary files /dev/null and b/assets/gifs/app_main_v26.png differ
diff --git a/assets/history_v21.jpg b/assets/history_v21.jpg
deleted file mode 100644
index 6c449c2ec..000000000
Binary files a/assets/history_v21.jpg and /dev/null differ
diff --git a/assets/logos/blackWhiteSquareIcon128.png b/assets/logos/blackWhiteSquareIcon128.png
new file mode 100644
index 000000000..9ff5c33e0
Binary files /dev/null and b/assets/logos/blackWhiteSquareIcon128.png differ
diff --git a/assets/logos/blackWhiteSquareIcon48.png b/assets/logos/blackWhiteSquareIcon48.png
new file mode 100644
index 000000000..d054e2b6c
Binary files /dev/null and b/assets/logos/blackWhiteSquareIcon48.png differ
diff --git a/assets/logos/marqueePromoTitle.png b/assets/logos/marqueePromoTitle.png
index e47d77771..7c13a6d7e 100644
Binary files a/assets/logos/marqueePromoTitle.png and b/assets/logos/marqueePromoTitle.png differ
diff --git a/assets/logos/smallPromoTitle.png b/assets/logos/smallPromoTitle.png
index 254f85d69..0074165eb 100644
Binary files a/assets/logos/smallPromoTitle.png and b/assets/logos/smallPromoTitle.png differ
diff --git a/assets/logos/whiteBlackSquareIcon128.png b/assets/logos/whiteBlackSquareIcon128.png
new file mode 100644
index 000000000..3f95221cb
Binary files /dev/null and b/assets/logos/whiteBlackSquareIcon128.png differ
diff --git a/assets/logos/whiteBlackSquareIcon48.png b/assets/logos/whiteBlackSquareIcon48.png
new file mode 100644
index 000000000..6788a2d02
Binary files /dev/null and b/assets/logos/whiteBlackSquareIcon48.png differ
diff --git a/assets/map_v21.jpg b/assets/map_v21.jpg
deleted file mode 100644
index df9afb41a..000000000
Binary files a/assets/map_v21.jpg and /dev/null differ
diff --git a/assets/obsolete/backend.png b/assets/obsolete/backend.png
deleted file mode 100644
index 6ef582455..000000000
Binary files a/assets/obsolete/backend.png and /dev/null differ
diff --git a/assets/obsolete/frontend.png b/assets/obsolete/frontend.png
deleted file mode 100644
index 9f5a30a3a..000000000
Binary files a/assets/obsolete/frontend.png and /dev/null differ
diff --git a/assets/gifs/GeneralDemoGif_V23.gif b/assets/obsolete/gifs/GeneralDemoGif_V23.gif
similarity index 100%
rename from assets/gifs/GeneralDemoGif_V23.gif
rename to assets/obsolete/gifs/GeneralDemoGif_V23.gif
diff --git a/assets/gifs/ImportExportGif_V23.gif b/assets/obsolete/gifs/ImportExportGif_V23.gif
similarity index 100%
rename from assets/gifs/ImportExportGif_V23.gif
rename to assets/obsolete/gifs/ImportExportGif_V23.gif
diff --git a/assets/gifs/PerformanceGif_V23.gif b/assets/obsolete/gifs/PerformanceGif_V23.gif
similarity index 100%
rename from assets/gifs/PerformanceGif_V23.gif
rename to assets/obsolete/gifs/PerformanceGif_V23.gif
diff --git a/assets/gifs/TimeTravelGif_V23.gif b/assets/obsolete/gifs/TimeTravelGif_V23.gif
similarity index 100%
rename from assets/gifs/TimeTravelGif_V23.gif
rename to assets/obsolete/gifs/TimeTravelGif_V23.gif
diff --git a/assets/obsolete/gifs/action-comparison.gif b/assets/obsolete/gifs/action-comparison.gif
deleted file mode 100644
index 4a50300ce..000000000
Binary files a/assets/obsolete/gifs/action-comparison.gif and /dev/null differ
diff --git a/assets/obsolete/gifs/components-viewing.gif b/assets/obsolete/gifs/components-viewing.gif
deleted file mode 100644
index 0560b58f7..000000000
Binary files a/assets/obsolete/gifs/components-viewing.gif and /dev/null differ
diff --git a/assets/obsolete/gifs/history-tree.gif b/assets/obsolete/gifs/history-tree.gif
deleted file mode 100644
index f53a30fce..000000000
Binary files a/assets/obsolete/gifs/history-tree.gif and /dev/null differ
diff --git a/assets/obsolete/gifs/history_v20.gif b/assets/obsolete/gifs/history_v20.gif
deleted file mode 100644
index 5f2574fc2..000000000
Binary files a/assets/obsolete/gifs/history_v20.gif and /dev/null differ
diff --git a/assets/obsolete/gifs/hooks-demo.gif b/assets/obsolete/gifs/hooks-demo.gif
deleted file mode 100644
index 1b662f51d..000000000
Binary files a/assets/obsolete/gifs/hooks-demo.gif and /dev/null differ
diff --git a/assets/obsolete/gifs/map-viewing.gif b/assets/obsolete/gifs/map-viewing.gif
deleted file mode 100644
index e1028a540..000000000
Binary files a/assets/obsolete/gifs/map-viewing.gif and /dev/null differ
diff --git a/assets/obsolete/gifs/map_v20.gif b/assets/obsolete/gifs/map_v20.gif
deleted file mode 100644
index 003cf1917..000000000
Binary files a/assets/obsolete/gifs/map_v20.gif and /dev/null differ
diff --git a/assets/obsolete/gifs/new-reactime.gif b/assets/obsolete/gifs/new-reactime.gif
deleted file mode 100644
index 7eae93979..000000000
Binary files a/assets/obsolete/gifs/new-reactime.gif and /dev/null differ
diff --git a/assets/obsolete/gifs/nextjs.gif b/assets/obsolete/gifs/nextjs.gif
deleted file mode 100644
index 5777a2751..000000000
Binary files a/assets/obsolete/gifs/nextjs.gif and /dev/null differ
diff --git a/assets/obsolete/gifs/overview_v20.gif b/assets/obsolete/gifs/overview_v20.gif
deleted file mode 100644
index fc49f5300..000000000
Binary files a/assets/obsolete/gifs/overview_v20.gif and /dev/null differ
diff --git a/assets/obsolete/gifs/react-calculator-demo.gif b/assets/obsolete/gifs/react-calculator-demo.gif
deleted file mode 100644
index d1a8e8807..000000000
Binary files a/assets/obsolete/gifs/react-calculator-demo.gif and /dev/null differ
diff --git a/assets/obsolete/gifs/reactime7.gif b/assets/obsolete/gifs/reactime7.gif
deleted file mode 100644
index 183347fb4..000000000
Binary files a/assets/obsolete/gifs/reactime7.gif and /dev/null differ
diff --git a/assets/obsolete/gifs/snapshot-comparison.gif b/assets/obsolete/gifs/snapshot-comparison.gif
deleted file mode 100644
index d6a3860b4..000000000
Binary files a/assets/obsolete/gifs/snapshot-comparison.gif and /dev/null differ
diff --git a/assets/obsolete/gifs/v4-demo.gif b/assets/obsolete/gifs/v4-demo.gif
deleted file mode 100644
index e4e959fb8..000000000
Binary files a/assets/obsolete/gifs/v4-demo.gif and /dev/null differ
diff --git a/assets/logos/blackWhiteSquareIcon.png b/assets/obsolete/logos/blackWhiteSquareIcon.png
similarity index 100%
rename from assets/logos/blackWhiteSquareIcon.png
rename to assets/obsolete/logos/blackWhiteSquareIcon.png
diff --git a/assets/logos/chromeExtensionIcons/blackWhiteSquareIcon128.png b/assets/obsolete/logos/blackWhiteSquareIcon128_old.png
similarity index 100%
rename from assets/logos/chromeExtensionIcons/blackWhiteSquareIcon128.png
rename to assets/obsolete/logos/blackWhiteSquareIcon128_old.png
diff --git a/assets/logos/chromeExtensionIcons/blackWhiteSquareIcon48.png b/assets/obsolete/logos/blackWhiteSquareIcon48_old.png
similarity index 100%
rename from assets/logos/chromeExtensionIcons/blackWhiteSquareIcon48.png
rename to assets/obsolete/logos/blackWhiteSquareIcon48_old.png
diff --git a/assets/logos/blackWhiteSquareLogo.png b/assets/obsolete/logos/blackWhiteSquareLogo.png
similarity index 100%
rename from assets/logos/blackWhiteSquareLogo.png
rename to assets/obsolete/logos/blackWhiteSquareLogo.png
diff --git a/assets/logos/blackWhiteSquareLogoMedium.png b/assets/obsolete/logos/blackWhiteSquareLogoMedium.png
similarity index 100%
rename from assets/logos/blackWhiteSquareLogoMedium.png
rename to assets/obsolete/logos/blackWhiteSquareLogoMedium.png
diff --git a/assets/logos/blackWhiteSquareSite.png b/assets/obsolete/logos/blackWhiteSquareSite.png
similarity index 100%
rename from assets/logos/blackWhiteSquareSite.png
rename to assets/obsolete/logos/blackWhiteSquareSite.png
diff --git a/assets/obsolete/logos/icon128.png b/assets/obsolete/logos/icon128.png
deleted file mode 100644
index 5010da137..000000000
Binary files a/assets/obsolete/logos/icon128.png and /dev/null differ
diff --git a/assets/obsolete/logos/icon48.png b/assets/obsolete/logos/icon48.png
deleted file mode 100644
index bcc344401..000000000
Binary files a/assets/obsolete/logos/icon48.png and /dev/null differ
diff --git a/assets/obsolete/logos/logo-no-version.png b/assets/obsolete/logos/logo-no-version.png
deleted file mode 100644
index 1cbbd91bf..000000000
Binary files a/assets/obsolete/logos/logo-no-version.png and /dev/null differ
diff --git a/assets/obsolete/logos/logo.png b/assets/obsolete/logos/logo.png
deleted file mode 100644
index 04c13455f..000000000
Binary files a/assets/obsolete/logos/logo.png and /dev/null differ
diff --git a/assets/logos/chromeExtensionIcons/marqueePromoTitle.png b/assets/obsolete/logos/marqueePromoTitle.png
similarity index 100%
rename from assets/logos/chromeExtensionIcons/marqueePromoTitle.png
rename to assets/obsolete/logos/marqueePromoTitle.png
diff --git a/assets/obsolete/logos/marqueePromoTitle_old.png b/assets/obsolete/logos/marqueePromoTitle_old.png
new file mode 100644
index 000000000..e47d77771
Binary files /dev/null and b/assets/obsolete/logos/marqueePromoTitle_old.png differ
diff --git a/assets/obsolete/logos/reactime with website svg.svg b/assets/obsolete/logos/reactime with website svg.svg
deleted file mode 100644
index 3356a87b3..000000000
--- a/assets/obsolete/logos/reactime with website svg.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
diff --git a/assets/obsolete/logos/readme-logo-300-no-version.png b/assets/obsolete/logos/readme-logo-300-no-version.png
deleted file mode 100644
index e1f788fbf..000000000
Binary files a/assets/obsolete/logos/readme-logo-300-no-version.png and /dev/null differ
diff --git a/assets/obsolete/logos/readme-logo-300.png b/assets/obsolete/logos/readme-logo-300.png
deleted file mode 100644
index 51e1baf48..000000000
Binary files a/assets/obsolete/logos/readme-logo-300.png and /dev/null differ
diff --git a/assets/obsolete/logos/readme-logo-small-no-version.png b/assets/obsolete/logos/readme-logo-small-no-version.png
deleted file mode 100644
index 3609df502..000000000
Binary files a/assets/obsolete/logos/readme-logo-small-no-version.png and /dev/null differ
diff --git a/assets/obsolete/logos/readme-logo-small.png b/assets/obsolete/logos/readme-logo-small.png
deleted file mode 100644
index 6695a5c86..000000000
Binary files a/assets/obsolete/logos/readme-logo-small.png and /dev/null differ
diff --git a/assets/obsolete/logos/readme-logo-svg.svg b/assets/obsolete/logos/readme-logo-svg.svg
deleted file mode 100644
index 3356a87b3..000000000
--- a/assets/obsolete/logos/readme-logo-svg.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
diff --git a/assets/logos/chromeExtensionIcons/smallPromoTitle.png b/assets/obsolete/logos/smallPromoTitle.png
similarity index 100%
rename from assets/logos/chromeExtensionIcons/smallPromoTitle.png
rename to assets/obsolete/logos/smallPromoTitle.png
diff --git a/assets/obsolete/logos/smallPromoTitle_old.png b/assets/obsolete/logos/smallPromoTitle_old.png
new file mode 100644
index 000000000..254f85d69
Binary files /dev/null and b/assets/obsolete/logos/smallPromoTitle_old.png differ
diff --git a/assets/logos/whiteBlackSquareIcon.png b/assets/obsolete/logos/whiteBlackSquareIcon.png
similarity index 100%
rename from assets/logos/whiteBlackSquareIcon.png
rename to assets/obsolete/logos/whiteBlackSquareIcon.png
diff --git a/assets/logos/chromeExtensionIcons/whiteBlackSquareIcon128.png b/assets/obsolete/logos/whiteBlackSquareIcon128.png
similarity index 100%
rename from assets/logos/chromeExtensionIcons/whiteBlackSquareIcon128.png
rename to assets/obsolete/logos/whiteBlackSquareIcon128.png
diff --git a/assets/logos/chromeExtensionIcons/whiteBlackSquareIcon48.png b/assets/obsolete/logos/whiteBlackSquareIcon48.png
similarity index 100%
rename from assets/logos/chromeExtensionIcons/whiteBlackSquareIcon48.png
rename to assets/obsolete/logos/whiteBlackSquareIcon48.png
diff --git a/assets/logos/whiteBlackSquareLogo.png b/assets/obsolete/logos/whiteBlackSquareLogo.png
similarity index 100%
rename from assets/logos/whiteBlackSquareLogo.png
rename to assets/obsolete/logos/whiteBlackSquareLogo.png
diff --git a/assets/logos/whiteBlackSquareSite.png b/assets/obsolete/logos/whiteBlackSquareSite.png
similarity index 100%
rename from assets/logos/whiteBlackSquareSite.png
rename to assets/obsolete/logos/whiteBlackSquareSite.png
diff --git a/assets/obsolete/oldDataflowDiagram.jpg b/assets/obsolete/oldDataflowDiagram.jpg
deleted file mode 100644
index 41d5e4230..000000000
Binary files a/assets/obsolete/oldDataflowDiagram.jpg and /dev/null differ
diff --git a/assets/obsolete/reactime-2022-workflow.png b/assets/obsolete/reactime-2022-workflow.png
deleted file mode 100644
index 90d2fdc66..000000000
Binary files a/assets/obsolete/reactime-2022-workflow.png and /dev/null differ
diff --git a/assets/obsolete/readme/v4-readme.md b/assets/obsolete/readme/v4-readme.md
deleted file mode 100644
index 29e2d69b4..000000000
--- a/assets/obsolete/readme/v4-readme.md
+++ /dev/null
@@ -1,128 +0,0 @@
-
-
-
-
-
State Debugger for React
-
-[](https://github.com/oslabs-beta/reactime) [](https://travis-ci.com/oslabs-beta/reactime) [](http://badge.fury.io/js/reactime) [](https://david-dm.org/oslabs-beta/reactime#info=dependencies) [](https://david-dm.org/oslabs-beta/reactime?type=dev) [](https://snyk.io/test/github/oslabs-beta/reactime)
-
-
-
-
-
-
-Reactime is a debugging tool for React developers. It records state whenever it is changed and allows the user to jump to any previously recorded state.
-
-This tool is for React apps using stateful components and prop drilling, and has beta support for Context API, conditional state routing, Hooks (useState, useEffect) and functional components.
-
-The latest release extends the core functionality by including support for TypeScript applications, improving the user experience through more declarative titles in the actions panel, and extending support for components with conditional state fields. The testing suite has also been expanded with the inclusion of a Sandbox utility to aid future expansion as well as additional E2E and integration tests with Puppeteer and React Testing Library.
-
-After installing the Reactime, you can test its functionalities in the following demo repositories:
-
-- [Calculator](https://joshua0308.github.io/calculator/)
-- [Bitcoin Price Index](http://reactime-demo2.us-east-1.elasticbeanstalk.com)
-
-Reactime was nominated for the Productivity Booster award at [React Open Source Awards 2020](https://osawards.com/react/)!
-
-## Installation
-
-Two parts are required for this tool to function: a [**Chrome extension**](https://chrome.google.com/webstore/detail/react-time-travel/cgibknllccemdnfhfpmjhffpjfeidjga) and an [**NPM package**](https://www.npmjs.com/package/reactime).
-
-1. Install the Reactime [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) from Chrome Web Store. Alternatively, use `src/extension/build/build.zip` for manual installation in [Developer mode](https://developer.chrome.com/extensions/faq#faq-dev-01). Turn on 'Allow access to file URLs' in extension details page if testing locally.
-
-2. Install the [NPM package](https://www.npmjs.com/package/reactime) in your application's root directory.
-
-```
-npm i reactime
-```
-
-3. Call the library method on your root container after rendering your App.
-
-```
-import reactime from 'reactime';
-
-const rootContainer = document.getElementById('root');
-ReactDOM.render(, rootContainer);
-
-reactime(rootContainer);
-```
-
-4. For experimental concurrent mode support.
-
-```
-import reactime from 'reactime';
-
-const rootContainer = ReactDOM.createRoot(document.getElementById('root'));
-rootContainer.render();
-reactime(rootContainer);
-```
-
-5. Done! That's all you have to do to link your React project to our library.
-
-## How to Use
-
-After installing both the Chrome extension and the NPM package, just open up your project in the browser.
-
-Then open up your Chrome DevTools and navigate to the Reactime tab.
-
-## Features
-
-### Recording
-
-Whenever state is changed (whenever setState or useState 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. Also, snapshots can be diffed with the previous snapshot, which can be viewed under the Diff tab.
-
-### Jumping
-
-Jumping is the most important feature of all. It allows you to jump to any previous recorded snapshots. Hitting the jump button on any snapshot will change the DOM by setting their state.
-
-### TypeScript Support
-
-Reactime offers beta support for TypeScript applications using stateful class components and functional components with useState hooks. Further testing and development is required for custom hooks, Context API, and Concurrent Mode.
-
-### Additional Features
-
-- multiple tree graph branches depicting state changes
-- tree graph hover functionality to view state changes
-- ability to pan and zoom tree graph
-- multiple tabs support
-- a slider to move through snapshots quickly
-- a play button to move through snapshots automatically
-- a pause button, which 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
-- declarative titles in the actions panel
-- extended support for components with conditional state fields
-- a Sandbox utility to aid future expansion
-
-## Authors
-- **Carlos Perez** - [@crperezt](https://github.com/crperezt)
-- **Edwin Menendez** - [@edwinjmenendez](https://github.com/edwinjmenendez)
-- **Gabriela Jardim Aquino** - [@aquinojardim](https://github.com/aquinojardim)
-- **Gregory Panciera** - [@gpanciera](https://github.com/gpanciera)
-- **Nathanael Wa Mwenze** - [@nmwenz90](https://github.com/nmwenz90)
-- **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)
-- **Ruth Anam** - [@peachiecodes](https://github.com/peachiecodes)
-- **David Chai** - [@davidchaidev](https://github.com/davidchai717)
-- **Yujin Kang** - [@yujinkay](https://github.com/yujinkay)
-- **Andy Wong** - [@andywongdev](https://github.com/andywongdev)
-- **Chris Flannery** - [@chriswillsflannery](https://github.com/chriswillsflannery)
-- **Rajeeb Banstola** - [@rajeebthegreat](https://github.com/rajeebthegreat)
-- **Prasanna Malla** - [@prasmalla](https://github.com/prasmalla)
-- **Rocky Lin** - [@rocky9413](https://github.com/rocky9413)
-- **Abaas Khorrami** - [@dubalol](https://github.com/dubalol)
-- **Ergi Shehu** - [@Ergi516](https://github.com/ergi516)
-- **Raymond Kwan** - [@rkwn](https://github.com/rkwn)
-- **Joshua Howard** - [@Joshua-Howard](https://github.com/joshua-howard)
-
-## License
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
-
diff --git a/assets/obsolete/src-app.jpg b/assets/obsolete/src-app.jpg
deleted file mode 100644
index a9e03415e..000000000
Binary files a/assets/obsolete/src-app.jpg and /dev/null differ
diff --git a/assets/performance_v21.jpg b/assets/performance_v21.jpg
deleted file mode 100644
index 954066f0c..000000000
Binary files a/assets/performance_v21.jpg and /dev/null differ
diff --git a/assets/tree_v21.jpg b/assets/tree_v21.jpg
deleted file mode 100644
index 1c7c266e7..000000000
Binary files a/assets/tree_v21.jpg and /dev/null differ
diff --git a/assets/useStoreContext_and_tabsObjects_v21.png b/assets/useStoreContext_and_tabsObjects_v21.png
deleted file mode 100644
index de1a45cce..000000000
Binary files a/assets/useStoreContext_and_tabsObjects_v21.png and /dev/null differ
diff --git a/assets/webMetrics_v21.jpg b/assets/webMetrics_v21.jpg
deleted file mode 100644
index da44f9f24..000000000
Binary files a/assets/webMetrics_v21.jpg and /dev/null differ
diff --git a/demo-app-next/next-env.d.ts b/demo-app-next/next-env.d.ts
index 4f11a03dc..a4a7b3f5c 100644
--- a/demo-app-next/next-env.d.ts
+++ b/demo-app-next/next-env.d.ts
@@ -2,4 +2,4 @@
///
// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/demo-app-next/tsconfig.json b/demo-app-next/tsconfig.json
index 093985aaf..1203d7cb2 100644
--- a/demo-app-next/tsconfig.json
+++ b/demo-app-next/tsconfig.json
@@ -1,6 +1,10 @@
{
"compilerOptions": {
- "lib": ["dom", "dom.iterable", "esnext"],
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
@@ -12,8 +16,15 @@
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
- "jsx": "preserve"
+ "jsx": "preserve",
+ "target": "ES2017"
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
- "exclude": ["node_modules"]
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
}
diff --git a/demo-app/package.json b/demo-app/package.json
index 17ed638c0..4003e82fa 100644
--- a/demo-app/package.json
+++ b/demo-app/package.json
@@ -9,6 +9,7 @@
},
"devDependencies": {
"@babel/core": "^7.16.7",
+ "@babel/plugin-transform-runtime": "^7.25.9",
"@babel/preset-env": "^7.16.7",
"@babel/preset-react": "^7.16.7",
"@types/express": "^4.17.13",
@@ -17,6 +18,7 @@
"@types/react-dom": "^17.0.19",
"babel-loader": "^8.2.3",
"copy-webpack-plugin": "^10.2.0",
+ "core-js": "^3.39.0",
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.5.0",
"node": "^16.0.0",
diff --git a/demo-app/src/client/Components/Buttons.tsx b/demo-app/src/client/Components/Buttons.tsx
index b27abfe24..60235aa92 100644
--- a/demo-app/src/client/Components/Buttons.tsx
+++ b/demo-app/src/client/Components/Buttons.tsx
@@ -1,22 +1,82 @@
-import React from 'react';
-import Increment from './Increment';
+import React, { Component, useState } from 'react';
-function Buttons(): JSX.Element {
- const buttons = [];
- for (let i = 0; i < 4; i++) {
- buttons.push();
+type ButtonProps = {
+ id: string;
+ label: string;
+ color?: string;
+ initialCount?: number;
+};
+
+type IncrementClassState = {
+ count: number;
+};
+
+class IncrementClass extends Component {
+ state = {
+ count: this.props.initialCount || 0,
+ };
+
+ handleClick = (): void => {
+ this.setState((prevState: IncrementClassState) => ({
+ count: prevState.count + 1,
+ }));
+ };
+
+ render(): JSX.Element {
+ return (
+
First two buttons use class components, last two use function components.
+
+
+
+
+
+ );
+ }
}
export default Buttons;
diff --git a/demo-app/src/client/Components/ButtonsWithMoreHooks.jsx b/demo-app/src/client/Components/ButtonsWithMoreHooks.jsx
deleted file mode 100644
index 5d9398b51..000000000
--- a/demo-app/src/client/Components/ButtonsWithMoreHooks.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useState, createContext } from 'react';
-import IncrementWithMoreHooks from './IncrementWithMoreHooks';
-
-/**
- * This component as well as IncrementWithMoreHooks were made to show where data for different
- * hooks show up in the react fiber tree.
- */
-
-/**
- * This file is a JSX file, not a TSX file, on purpose. The code won't be converted to common JS
- * before being bundled by webpack. There were some errors that weren't showing up for the other
- * Increment.tsx file based on how webpack uglifies ES6 files. Maintaining this as a JSX file
- * will help check for these types of issues.
- */
-
-/**
- * How Reactime extracts useState data and what would have to be done
- * to extract useContext and useReducer data:
- *
- * When extracting a functional component's useState data from the fiber tree in the backend of
- * Reactime, said data is stored on said component's fiber tree node at its memoizedState property,
- * which is a linked list with each node holding data for each useState invocation (some but
- * not all other hooks also store nodes with data here). Each useState memoizedState node includes
- * the variable (e.g. user) and its corresponding dispatch function (e.g. setUser). This dispatch
- * function is required to use Reactime's timeJump feature.
- *
- * useContext data is stored on the property "dependencies", and only the data passed into the
- * value attritibute of the 'context'.Provider element will be there. For tripContext.Provider,
- * we pass down "trip" without "setTrip", so we won't have access to the 'trip' dispatch function
- * in the "IncrementWithMoreHooks" component, meaning Reactime's timeJump won't work without
- * finding the 'trip' dispatch function by coming into this component where useState was invoked and
- * storing it in the appropriate place. This is easy enough for useState variables, but useContext
- * is commonly used with useReducer which is an entirely different beast.
- *
- * I advise solving the puzzle of making useReducer work with the timeJump functionality before
- * integrating other hooks. Look at time jumping in the Redux dev tools chrome extension for
- * inspiration, because you essentially need to recreate that within Reactime.
- */
-
-// userInCreateContext is different from 'user' to see where this variable name showed up in the AST
-export const userContext = createContext({ userInCreateContext: 'null', setUser: undefined });
-export const tripContext = createContext({ trip: 'null', setTrip: undefined });
-
-const ButtonsWithMoreHooks = () => {
- const [user, setUser] = useState('null');
- const userValue = { user, setUser };
- const [trip, setTrip] = useState('Hawaii');
- const tripValue = { trip };
-
- return (
-
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
- cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-
-
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
- cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-
- );
-}
-
-export default Increment;
diff --git a/demo-app/src/client/Components/IncrementWithMoreHooks.jsx b/demo-app/src/client/Components/IncrementWithMoreHooks.jsx
deleted file mode 100644
index 4cba379b3..000000000
--- a/demo-app/src/client/Components/IncrementWithMoreHooks.jsx
+++ /dev/null
@@ -1,312 +0,0 @@
-import React, {
- useState,
- useEffect,
- useContext,
- useReducer,
- useRef,
- useMemo,
- useCallback,
-} from 'react';
-import { userContext, tripContext } from './ButtonsWithMoreHooks';
-import { useImmer } from 'use-immer';
-
-/**
- * This component as well as ButtonsWithMoreHooks were made to show where data for different
- * hooks show up in the react fiber tree. There are duplicates of most hooks so you can see
- * how the react fiber tree iterates over hook data.
- */
-
-/**
- * This file is a JSX file, not a TSX file, on purpose. The code won't be converted to common JS
- * before being bundled by webpack. There were some errors that weren't showing up for the other
- * Increment.tsx file based on how webpack uglifies ES6 files. Maintaining this as a JSX file
- * will help check for these types of issues.
- */
-
-/**
- * ES5 function definitions are intentionally used for most functions as ES6 function definitions were one
- * of the reasons Reactime 18 was breaking. Handleclick within the component definitions is ES6 to cover
- * this case, but having only 1 ES6 function definition in the file makes it easy to switch for testing
- * purposes. Functional component definitions made with ES6
- */
-
-//---------useReducer reducer and initialState functions------------------------------------------------------------------
-
-function reducer1(state, action) {
- if (action.type === 'INCREMENT_UR1COUNT') {
- return {
- UR1Count: state.UR1Count + 1,
- };
- }
- // This throws an error if you send a dispatch action to this reducer without having
- // the matching action.type string, rather than returning the initial state. This'll
- // help display unexpected activity.
- throw Error('Unknown action 1.');
-}
-
-function reducer2(state, action) {
- if (action.type === 'ADD_TO_ARRAY') {
- return {
- UR2Array: state.UR2Array.concat(action.payload),
- };
- }
- // This throws an error if you send a dispatch action to this reducer without having
- // the matching action.type string, rather than returning the initial state. This'll
- // help display unexpected activity.
- throw Error('Unknown action 2.');
-}
-
-function createInitialState(num) {
- return { UR1Count: num };
-}
-
-//---------Custom Hook Definition-----------------------------------------------------------------------------------------
-
-function useCustomHook() {
- const [customCount, setCustomCount] = useState(0);
-
- useEffect(() => {
- setCustomCount((customCount) => customCount + 1);
- }, []);
-
- return { customCount };
-}
-
-//-------IncrementWithMoreHooks Component Definition--------------------------------------------------------------------------
-
-const IncrementWithMoreHooks = () => {
- //--------useState Invocations----------------------------------------------------------------------------------------------
-
- // useState stores stateful data in the component it's defined in
- const [count, setCount] = useState(0);
- const [buttonState, setButtonState] = useState(false);
-
- //--------useContext Invocations--------------------------------------------------------------------------------------------
-
- // useContext accesses stateful data defined in a 'super-parent' (grandparent, great-grandparent, etc.) component
- // that the current component is nested in, regardless of how many component parents are between the
- // current component and that 'super' parent component, allowing the user to avoid prop drilling through
- // multiple parent-child component relationships.
- const { user, setUser } = useContext(userContext);
- const { trip } = useContext(tripContext);
-
- //--------useReduce Invocations----------------------------------------------------------------------------------------------
-
- // useReducer stores stateful data in the component it's defined in.
- // It also takes custom 'reducer' functions which dictate how the stateful
- // data is updated when particular arguments are provided to invoked 'dispatch' functions
- const [UR1State, dispatch1] = useReducer(reducer1, 0, createInitialState);
- const [UR2State, dispatch2] = useReducer(reducer2, { UR2Array: [] });
-
- //--------useRef Invocations-------------------------------------------------------------------------------------------------
-
- // useRef stores stateful data that’s not needed for rendering.
- // This is generally used to hold DOM elements that the user wants to manipulate.
- const ref1 = useRef(null);
- const ref2 = useRef(1);
-
- //--------useMemo Invocations------------------------------------------------------------------------------------------------
-
- // useMemo takes a callback and dependency arrays holding values used in the callback.
- // It'll cache results of calling the callback for different values of the dependency and
- // if it sees the same value again it'll grab the result from the cache rather than calling
- // the callback again. This'll save resources if calling the callback is expensive.
- const memoValue1 = useMemo(() => count * ref2.current * 2, [count, ref2.current]);
- const memoValue2 = useMemo(() => count * 2, [count]);
-
- //--------useCallback Invocations-------------------------------------------------------------------------------------------
-
- // useCallback is similar to useMemo, however it caches a function definition that changes
- // based on the dependencies. This'll save resources when defining said function is expensive.
- const callback1 = useCallback(() => {
- return count * memoValue1;
- }, [count, memoValue1]);
- const callback2 = useCallback(() => {
- return count * memoValue2;
- }, [count, memoValue2]);
-
- //--------useEffect Invocations---------------------------------------------------------------------------------------------
-
- // useEffect is a lifecycle hook that invokes its first argument 'setup' callback based on whether or not
- // the contents of the second argument's 'dependencies' array have changed from the previous render.
- //
- // Not including a second argument will invoke 'setup' every time the component renders.
- // An empty dependency array will invoke 'setup' only for the first component render.
- // Providing variables to the dependency array will invoke 'setup' on the first component
- // and every subsequent render where the variable has changed.
- // Returning a callback will execute the callback when the current component unmounts
- useEffect(() => {
- setUser('Mark');
- return () => {
- console.log('I get executed when IncrementWithMoreHooks unmounts');
- };
- }, []);
-
- useEffect(() => {
- setCount((count) => count + 1);
- }, [buttonState]);
-
- //--------useImmer Invocation------------------------------------------------------------------------------------------------
-
- // use-immer is an npm library used for writing simple immutable changes with mutable syntax
- const [person, updatePerson] = useImmer({
- name: 'Jeff',
- age: 34,
- });
-
- // function to increment useImmer age value
- function incrementPersonAge() {
- updatePerson((draft) => {
- draft.age++;
- });
- }
-
- //--------Custom Hook Invocation---------------------------------------------------------------------------------------------
-
- // Custom hook implementation
- const { customCount } = useCustomHook();
-
- //--------Other function definitions---------------------------------------------------------------------------------------------
-
- //Click function to alter state of buttonState
- const handleClick = () => {
- if (buttonState) {
- setButtonState(false);
- } else {
- setButtonState(true);
- }
- };
-
- // Converts values like functions, objects, and 'false 'booleans that wouldn't otherwise print in a JSX element to strings if possible
- function printString(val) {
- let result;
-
- if (typeof val === 'function') {
- return val.toString();
- }
-
- try {
- result = JSON.stringify(val);
- } catch {
- result = 'Failed to convert into JSON string';
- }
- return result;
- }
-
- //--------Return Statement------------------------------------------------------------------------------------------------------
-
- return (
-
-
- Increment With More Hooks
-
-
-
-
useState data:
-
- count: {printString(count)}
-
- count will increment via useEffect on buttonState state change
-
-
buttonState: {printString(buttonState)}
-
-
-
-
-
useContext data:
-
user: {printString(user)}
-
trip: {printString(trip)}
-
-
-
-
useReducer data:
-
UR1State: {printString(UR1State)}
-
-
UR2State: {printString(UR2State)}
-
-
-
-
-
useRef data:
-
ref1: {ref1.current ? "holds ref to element with id 'useRef-data'" : 'null'}
-
- ref2: {printString(ref2)}
-
- Notice that this change doesn't cause the page to re-render
-
-
-
-
-
-
useMemo data:
-
- memoValue1: {printString(memoValue1)}
-
- memoValue1 depends on useState "count" and useRef "ref2"
-
- The custom hook utilizes useEffect to increments a useState var customCount only on the
- first render. Remove the empty dependency array from the second parameter of the useEffect
- call to see a show!
-
-
-
- );
-};
-
-export default IncrementWithMoreHooks;
diff --git a/demo-app/src/client/Components/Nav.tsx b/demo-app/src/client/Components/Nav.tsx
index c289f8d81..274c5ae39 100644
--- a/demo-app/src/client/Components/Nav.tsx
+++ b/demo-app/src/client/Components/Nav.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import { Link } from 'react-router-dom';
+import ThemeToggle from './ThemeToggle';
function Nav(): JSX.Element {
return (
@@ -11,8 +12,12 @@ function Nav(): JSX.Element {
Tic-Tac-Toe
- Counter
+ State Counter
+
+ Reducer Counter
+
+
An instance of this class is the default export from routes.ts. It includes the logic that allows Reactime to work with target applications built with React Router. The addRoute method is invoked in linkFiber.ts within the sendSnapshot function. The navigate method is invoked in timeJump.ts immediately before invoking jump.
This is a recursive function that runs after Fiber commit, if user is navigating to a new route during jumping. This function performs the following logic:
-
-
Traverse from FiberRootNode
-
If the component is stateful, extract its update methods & push to the componentActionRecord array
This is a function that runs after every Fiber commit using the following logic:
-
-
Traverse from FiberRootNode
-
Create an instance of custom Tree class
-
Build a new state snapshot
-Every time a state change is made in the accompanying app, the extension creates a Tree “snapshot” of the current state, and adds it to the current “cache” of snapshots in the extension
This function receives raw Data from REACT DEV TOOL and filter the Data based on the exclude list. The filterd data is then converted to string (if applicable) before being sent to reacTime front end.
-NOTE: the formating is important since Chrome will only accept JSON.stringfiable object. Circular object & function are not JSON stringifiable.
-
Parameters
reactDevData: { [key: string]: any; }
The data object obtained from React Devtool. Ex: memoizedProps, memoizedState
-
[key: string]: any
reactimeData: ReactimeData = {}
The cached data from the current component. This can be data about states, context and/or props of the component.
-
Returns ReactimeData
The update component data object to send to front end of ReactTime
-
Settings
Member Visibility
Theme
\ No newline at end of file
diff --git a/docs/functions/backend_controllers_statePropExtractors.getHooksNames.html b/docs/functions/backend_controllers_statePropExtractors.getHooksNames.html
deleted file mode 100644
index 060e35bb1..000000000
--- a/docs/functions/backend_controllers_statePropExtractors.getHooksNames.html
+++ /dev/null
@@ -1,6 +0,0 @@
-getHooksNames | reactime
This function receive a string representation of a functional component. This function then use JSX parser to traverse through the function string, and extract the state variable name and its corresponding setState method.
-
Parameters
elementType: string
The string representation of a functional component
-
Returns { hookName: string; varName: string; }[]
-
An array of objects with key: hookName (the name of setState method) | value: varName (the state variable name)
-
-
Settings
Member Visibility
Theme
\ No newline at end of file
diff --git a/docs/functions/backend_controllers_statePropExtractors.getHooksStateAndUpdateMethod.html b/docs/functions/backend_controllers_statePropExtractors.getHooksStateAndUpdateMethod.html
deleted file mode 100644
index d9ffb9625..000000000
--- a/docs/functions/backend_controllers_statePropExtractors.getHooksStateAndUpdateMethod.html
+++ /dev/null
@@ -1,9 +0,0 @@
-getHooksStateAndUpdateMethod | reactime
Object that contains the current state of the application or system that needs to be serialized.
-
Returns any
-
Depclone of the passed in state. If there is any circulate state, return 'circularState'
-
-
Function
serializeState - In the context of React, state is often used to store data that determines the behavior and appearance of a component. By serializing the state, we can preserve the component's data across page refreshes, server-side rendering, and other transitions. Additionally, by serializing the state and passing it to a child component, we can create a deep clone of the state, which allows the child component to manipulate the state without affecting the original component. This is useful in situations where we want to keep the state of the parent component immutable, but still allow child components to modify a copy of the state.
-
Settings
Member Visibility
Theme
\ No newline at end of file
diff --git a/docs/functions/backend_routers_linkFiber.default.html b/docs/functions/backend_routers_linkFiber.default.html
deleted file mode 100644
index c7802de5d..000000000
--- a/docs/functions/backend_routers_linkFiber.default.html
+++ /dev/null
@@ -1,12 +0,0 @@
-default | reactime
This function creates a new snapShot fiber tree with the provided fiberRoot, then send the updated snapshot to front end.
-This runs after every Fiber commit if mode is not jumping.
-This
The fiberRootNode, which is the root node of the fiber tree is stored in the current property of the fiber root object which we can use to traverse the tree
-
Returns void
Settings
Member Visibility
Theme
\ No newline at end of file
diff --git a/docs/hierarchy.html b/docs/hierarchy.html
deleted file mode 100644
index 3cbb75718..000000000
--- a/docs/hierarchy.html
+++ /dev/null
@@ -1 +0,0 @@
-reactime
Reactime is an open-source Chrome developer tool for time travel debugging and performance monitoring in React applications. Reactime enables developers to record snapshots of application state, jump between and inspect state snapshots, and monitor performance metrics such as component render time and render frequency.
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. Snapshot history can be visualized in the History tab.
-The Web Metrics tab provides some useful metrics for site performance. The accessibility tab
-visualizes an app's accessibility tree per state change.
-Snapshots can be compared with the previous snapshot, which can be viewed in Diff mode.
-
-
Whenever the state is changed (whenever setState, useState 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.
-
-
You can save a series of state snapshots and use it to analyze changes in
-component render performance between the current and the previous series of snapshots.
-You can also name specific snapshots and compare all snapshots with the same
-name.
-
-
When toggled to a specific snapshot, a visualization of the individual
-components of the snapshot will be displayed. This can be done under the same
-Performance tab where the snapshots are rendered. You will also find details of
-each component upon hovering.
-
-
If Reactime loses its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work. You'll notice a circle located to the right of the button, which will appear as either red (indicating disconnection) or green (signifying a successful reconnection).
-
-
One of the most common issues that affects performance in React is unnecessary
-render cycles. This problem can be fixed by checking your renders in the
-Performance tab in Chrome DevTools under the Reactime panel.
-
-
Using the actions sidebar, a user can jump to any previously recorded snapshots.
-Hitting the jump button on any snapshot will allow a user to view state data at
-any point in the history of the target application.
-
-
Reactime offers full support for Gatsby applications. You would be able to
-identify unnecessary renders, duration of each rendering, travel-debugging
-features and visual representation of the tree components.
-
-
Reactime offers debugging and performance tools for Next.js apps: time-traveling
-debugging, preventing unnecessary component re-renders and making your
-application faster.
-
-
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.
-
-
Reactime offers support for TypeScript applications using stateful class
-components and functional components. Further testing and development is
-required for custom hooks and Concurrent Mode.
-
-
After cloning this repository, developers can simply run npm run docs at the
-root level and serve the dynamically generated /docs/index.html file on a
-browser. Doing so will provide a readable, extensible, and interactive GUI view
-of the structure and interfaces of the codebase.
-
-
Hover over a component to view tooltip details on state visualizations
-
Double-click to collapse child components
-
Click to focus on a portion of the component map
-
A dropdown to support the development of projects on multiple tabs
-
Intuitive navigation between state snapshots
-
Locked/unlocked feature allowing temporary pause of state monitoring
-
-
What's New!
-
-
Reactime 24.0 includes a new accessibility debugging feature for developers!
-
"No ARIA is better than bad ARIA"
-
This version of Reactime remedies this phrase by implementing a feature that allows developers to track the accessibility tree of their application based on state change.
-
Similar to the component map feature, developers can time travel to different states of their app's accessibility tree and hover over specific nodes to learn more about their individual accessibility-related information.
-
We've also developed an enable/disable button that determines when the Chrome Debugger API grabs the app's accessibility tree and a legend component that describes the tree in greater detail.
-
If you would like to read more about previous releases, click here!
-
-
-
Installation
-
-
To get started, install the Reactime
-extension
-from Chrome Web Store.
-
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.
-
NOTE: The React Developer Tools
-extension
-is also required for Reactime to run, if you do not already have it installed on
-your browser.
Go to Chrome Extensions (make sure Chrome Extension is in Developer Mode) for
-manual installation in (https://developer.chrome.com/extensions/faq#faq-dev-01)
-and click on Load Unpacked. Use src/extension/build/ to load this extension.
-Turn on 'Allow access to file URLs' in the extension details page if testing
-locally.
Reactime initially runs using the dev tools global hook from the Chrome API. It
-takes time for Chrome to load this. Try refreshing your application a couple of
-times until you see Reactime running.
Reactime works in tandem with the React Developer Tools to access a React application's Fiber tree; under the hood, Reactime traverses the Fiber tree through the React Developer Tool's global hook, pulling all relevant information needed to display to the developer
Reactime is an open-source project, and we'd love to hear from you about
-improving the user experience. Please read DEVELOPER README,
-and create a pull request (or issue) to propose and collaborate on changes to Reactime.
With the 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'
actualDuration - The time taken to render the current Fiber node and its descendants during the previous render cycle. This value is used to optimize the rendering of components and to provide performance metrics to developers.
-
Member
actualStartTime - The time at which the rendering of the current Fiber node started during the previous render cycle.
-
Member
key - The key a user assigned to the component or null if they didn't assign one
-
Member
context - {in experiment} - An object contains all context information of the current component
-
Member
index - {class component only} - The index of the bound setState method stored in componentActionsRecord
-
Member
hooksState - {functional component only} - An object contains all states of the current functional component
-
Member
hooksIndex - {functional component only} - An array of index of the bound dispatch method stored in componentActionsRecord
-
Member
props - An object contains all props of the current component
-
Member
selfBaseDuration - The base duration of the current Fiber node's render phase (excluding the time taken to render its children). This field is only set when the enableProfilerTimer flag is enabled.
-
Member
state - {class component only} - An object contains all states of the current class component
-
Member
treeBaseDuration - The total base duration of the current Fiber node's subtree. This field is only set when the enableProfilerTimer flag is enabled.
DevTools - A global object provided by the React Developer Tools extension. It provides a set of methods that allow developers to inspect and manipulate React components in the browser.
getFiberRoots - get the Set of fiber roots that are currently mounted for the given rendererID. If not found, initalize a new empty Set at renderID key.
root of the rendered tree (a.k.a the root of the React Application)
-
priorityLevel: any
Returns void
Method
onCommitFiberRoot - After the state of a component in a React Application is updated, the virtual DOM will be updated. When a render has been commited for a root, onCommitFiberRoot will be invoked to determine if the component is being mounted, updated, or unmounted. After that, this method will send update information to the React DevTools to update its UI to reflect the change.
The type of the current Fiber node, such as FunctionComponent, ClassComponent, or HostComponent (for DOM elements).
-
OptionaltreeBaseDuration?: number
Sum of base times for all descendants of this Fiber. This value bubbles up during the "complete" phase.
-
This field is only set when the enableProfilerTimer flag is enabled.
-
Member
actualDuration - The time taken to render the current Fiber node and its descendants during the previous render cycle. This value is used to optimize the rendering of components and to provide performance metrics to developers.
-
Member
actualStartTime - The time at which the rendering of the current Fiber node started during the previous render cycle.
-
Member
child - Pointer to the first child.
-
Member
elementType - The type of the current Fiber node's element (e.g. the component function or class, or the DOM element type). For class/functional component, elmementType stores the function definition.
-
Member
key - The key a user assigned to the component or null if they didn't assign one
-
Member
memoizedProps - The current props of the component associated with the current Fiber node.
-
Member
memoizedState - The current state of the component associated with the current Fiber node.
-
Member
selfBaseDuration - The base duration of the current Fiber node's render phase (excluding the time taken to render its children). This field is only set when the enableProfilerTimer flag is enabled.
-
Member
sibling - Pointer to next sibling
-
Member
stateNode - The local state associated with this fiber. For classComponent, stateNode contains current state and the bound update methods of the component
-
Member
tag - The type of the current Fiber node, such as FunctionComponent, ClassComponent, or HostComponent (for DOM elements).
-
Member
treeBaseDuration - The total base duration of the current Fiber node's subtree. This field is only set when the enableProfilerTimer flag is enabled.
-
Member
_debugHookTypes - An array of hooks used for debugging purposes.
-
Settings
Member Visibility
Theme
\ No newline at end of file
diff --git a/docs/types/backend_types_backendTypes.FiberRoot.html b/docs/types/backend_types_backendTypes.FiberRoot.html
deleted file mode 100644
index 060e37302..000000000
--- a/docs/types/backend_types_backendTypes.FiberRoot.html
+++ /dev/null
@@ -1 +0,0 @@
-FiberRoot | reactime
getAllComponents - This method is used for debugging purpose to access the array of setState/dispatch methods
-
Returns
-
an array of objects containing the bound methods for updating state
-
-
(): any[]
Returns any[]
getComponentByIndex: ((inputIndex) => any)
Function
getComponentByIndex - This function is used for stateful Class Component to retrieve an object that has the bound setState method
-
Returns
-
an object containing the bound setState method
-
-
(inputIndex): any
Parameters
inputIndex: number
index of component inside componentActionsRecord coming from timeJump.ts
-
Returns any
getComponentByIndexHooks: ((inputIndex) => any[])
Function
getComponentByIndexHooks - This function is used for Functional Component to retrieve an array of objects that have the bound dispatch methods.
-
Returns
-
an array of objects containing the bound dispatch methods
-
-
(inputIndex): any[]
Parameters
inputIndex: number[]
index of component inside componentActionsRecord coming from timeJump.ts
-
Returns any[]
saveNew: ((component) => number)
Function
saveNew - Adds a new component to the componentActionsRecord array and returns its index.
-
Returns
-
the index of the newly added component
-
-
(component): number
Parameters
component: any
An object that contains bound update method. For class component, the udpate method is setState. For functional component, the update method is dispatch.
-
Returns number
Settings
Member Visibility
Theme
\ No newline at end of file
diff --git a/docs/variables/backend_models_routes.default.html b/docs/variables/backend_models_routes.default.html
deleted file mode 100644
index 64d13a646..000000000
--- a/docs/variables/backend_models_routes.default.html
+++ /dev/null
@@ -1 +0,0 @@
-default | reactime
\ No newline at end of file
diff --git a/jest.config.js b/jest.config.js
index 00ca90b0e..9373f1aff 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -10,13 +10,13 @@ module.exports = {
'www',
'./src/backend/__tests__/ignore',
'./src/app/__tests__enzyme/ignore',
- './src/backend/__tests__/linkFiber.test.ts',
+ // './src/backend/__tests__/linkFiber.test.ts',
'./src/app/slices/mainSlice.ts',
],
coveragePathIgnorePatterns: [
'/src/backend/__tests__/ignore/',
'/src/app/__tests__enzyme/ignore',
- './src/backend/__tests__/linkFiber.test.ts',
+ // './src/backend/__tests__/linkFiber.test.ts',
'./src/app/slices/mainSlice.ts',
],
transformIgnorePatterns: ['/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)'],
diff --git a/package.json b/package.json
index 6a006e972..b1e3c6dd5 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
"Cole Styron",
"Daljit Gill",
"Dane Corpion",
+ "Daniel Ryczek",
"David Bernstein",
"David Chai",
"David Kim",
@@ -64,10 +65,12 @@
"Edar Liu",
"Edwin Menendez",
"Eivind Del Fierro",
+ "Ellie Simens",
"Ergi Shehu",
"Eric Yun",
"Freya Wu",
"Gabriela Jardim Aquino",
+ "Garrett Chow",
"Gregory Panciera",
"Haejin Jo",
"Harry Fox",
@@ -104,9 +107,11 @@
"Nathan Richardson",
"Ngoc Zwolinski",
"Nick Huemmer",
+ "Patrice Pinardo",
"Peter Lam",
"Prasanna Malla",
"Quan Le",
+ "Ragad Mohammed",
"Rajeeb Banstola",
"Raymond Kwan",
"Robby Tipton",
@@ -127,6 +132,8 @@
],
"license": "ISC",
"devDependencies": {
+ "@babel/parser": "^7.26.2",
+ "@babel/types": "^7.26.0",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.5.1",
@@ -147,7 +154,8 @@
"jsdom": "^23.0.1",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1",
- "sass-loader": "^13.3.2",
+ "sass": "^1.83.0",
+ "sass-loader": "^16.0.4",
"style-loader": "^3.3.3",
"ts-jest": "^29.1.2",
"ts-loader": "^9.5.1",
@@ -186,20 +194,22 @@
"jest-environment-jsdom": "^29.7.0",
"jsondiffpatch": "^0.5.0",
"lodash": "^4.17.21",
+ "lucide-react": "^0.468.0",
"node": "^18.12.1",
"prettier": "^3.1.1",
"rc-slider": "^10.5.0",
"rc-tooltip": "^6.1.3",
"react": "^18.2.0",
"react-apexcharts": "^1.4.1",
+ "react-hot-toast": "^2.4.1",
"react-hover": "^3.0.1",
"react-json-tree": "^0.18.0",
"react-redux": "^9.0.4",
"react-select": "^5.8.0",
"react-spinners": "^0.13.8",
"redux": "^5.0.0",
+ "redux-mock-store": "^1.5.5",
"regenerator-runtime": "^0.14.1",
- "sass": "^1.69.5",
"styled-components": "^6.1.2",
"web-vitals": "^3.5.0"
}
diff --git a/src/DEVELOPER_README.md b/src/DEVELOPER_README.md
index 44abfb4f7..6a9491529 100644
--- a/src/DEVELOPER_README.md
+++ b/src/DEVELOPER_README.md
@@ -58,58 +58,66 @@ Here are some notes on the current state of Reactime and considerations for futu
There are a variety of open issues on the [OSLabs Reactime Github](https://github.com/open-source-labs/reactime) that remain to be addressed.
-## Main Slice Modularity
+## Support for useReducer Time Travel
-Currently, Reactime employs Redux Toolkit for state management. At present, all actions are housed within the mainSlice.ts file. As this file has expanded significantly, it would be beneficial to modularize it, creating separate slices for distinct components.
+Reactime currently shows data stored via useState, but has limited support for other hooks such as useReducer. While Reactime can now display state data from useReducer hooks in its component view, maintaining full time travel functionality for reducer states presents significant challenges.
-## Testing
+Current Implementation
-With reactime V25, a significant effort was made to update and address the various Jest testing issues. We managed to go from about 20% tests passing to more than 85% passing but more work remains to be done. Future itterators are invited to have a closer look and continue to update and improve the library to (hopefully) a 100% passing state.
+Reactime successfully captures and displays the current state of useReducer hooks in components
+The state data and last dispatched action for reducers are captured in the component snapshot
+This data is accessible in the component tooltips when hovering over nodes in the component map
+Reducer states are stored separately from useState data in the componentData structure
-In addition, while our current test coverage provides a sturdy base, the application can benefit from deeper exploration into critical user paths and broadening end-to-end testing scenarios. Embracing automation and periodic reviews can further ensure consistent quality and robustness in the face of evolving requirements. -->
+Challenges with Time Travel
-## Continue to investigate app behavior on load
+Unlike useState which has a simple state setter function, useReducer state changes must go through the reducer function
+The reducer function defines the valid state transitions through actions
+Simply setting a new state value would bypass the reducer's action-based state management
+Maintaining the correct action history and ensuring state validity through time travel becomes complex
+The current implementation can show reducer states at different points in time but cannot reliably replay state transitions
-With Reactime V23, loading errors were eliminated by having the web app reload upon a Reactime panel being opened. While this provides a working solution to what were persistent loading issues, the app's behavior on load should still be examined. There are odd interactions happening within the message passing framework of chrome which may be a root cause. Please examine the interaction between background.js, contentscript, maincontainer, and redux toolkit.
+Future Considerations
+Teams working on expanding reducer support should consider:
-## Including Support for Hooks Beyond useState
+How to capture and replay sequences of reducer actions
+Ways to maintain reducer state validity during time travel
+Potential approaches for reconstructing reducer state history
+Methods to handle complex reducer patterns like middleware or side effects
+Trade-offs between full reducer state management and simplified state snapshots
-Reactime currently shows data stored via useState, but does not show data stored via other hooks such as useContext or useReducer. While showing this data would be simple, maintaining the time travel functionality of Reactime with these hooks would not. _Please see file demo-app/src/client/Components/ButtonsWithMoreHooks.jsx for more details._
+## Expanding Support for Custom Hooks
-To see how hook data is stored on the fiber tree:
+Reactime currently has a robust system for detecting and handling built-in React hooks, but custom hooks present unique opportunities and challenges for state tracking and visualization.
-1. Change demo-app/src/client/Router.tsx to use utilize the ButtonsWithMoreHooks component
-2. Have the “Load Unpacked” version of Reactime in your chrome extension.
-3. Add console.logs in src/backend/routers/linkFiber.ts to log the fiber tree captured for a running app. In this case it'll be the demo-app
-4. Run Reactime on your computer via "npm run dev", which links your local Reactime to the “Load Unpacked” chrome extension.
-5. Run the demo-app from a separate terminal that's currently in the demo-app directory via "npm run dev"
-6. Navigate through the fiber tree in the console until you find the tree node for demo-app/src/client/Components/IncrementWithMoreHooks.jsx to see hook data.
+Current Implementation
-Any changes to console.logs in Reactime can be seen by refreshing the browser the app is running in.
+Reactime uses AST parsing via @babel/parser to analyze hook usage in components
+The system identifies hook patterns through memoizedState examination in the Fiber tree
+Hook names and state variables are extracted and matched with their corresponding state values
+This works well for direct useState and useReducer calls but may miss custom hook implementations
-## React DevTools Global Hook
+Challenges
-React Developer Tools has NOT deprecated \_\_REACT_DEVTOOLS_GLOBAL_HOOK\_\_. However, Reactime v21 has sleuthed and learned the following from the team at React:
+Custom hooks can contain multiple internal state management hooks
+The relationship between custom hook state and component state is not always clear in the Fiber tree
+Hook naming patterns may vary across different custom hook implementations
+State updates in custom hooks might use complex patterns or composition
+The current AST parsing system is optimized for standard hook patterns
-Ruslan Lesiutin (https://github.com/hoxyq) from Meta/ Facebook responded on July 28, 2023
-“Hey @morahgeist,
-We don't have plans on removing the global hook currently, this is still the primary way on how React and React DevTools interact, but it doesn't mean that any other extensions / applications should inject into this hook and use it. You should always take that into account that APIs inside this hook can have breaking changes.
-In a long term, there are plans to implement more reliable API contract of what DevTools can expose from React to other tools, but I don't have any timelines and details yet.”
+Future Considerations
+Teams looking to expand custom hook support should consider:
-## Redux
-
-Can Reactime functionality be extended 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.
+How to identify and group state belonging to the same custom hook
+Ways to visualize the relationship between custom hook state and component state
+Methods to track state flow through custom hook composition
+Approaches for handling custom hooks that combine multiple state management methods
+Strategies for maintaining time travel functionality with custom hook state
## Newsletter functionality on the Reactime website
As noted in the [Reactime Webite Github](https://github.com/reactimetravel/reactime-website), a newsletter functionality would be nice but has not been implemented yet.
-## Optimize webpack bundle size in production mode
-
-Currently, the webpack bundle size when running in production mode (through npm run build) is much larger than the recommended size. Implementing new rules, plugins, and/or uglification and minification strategies could help reduce the size.
-
# File Structure
In the _src_ folder, there are three directories we care about: _app_, _backend_, and _extension_.
@@ -186,7 +194,7 @@ All the diagrams of data flows are available on [MIRO](https://miro.com/app/boar
The general flow of data is described in the following steps:
-
+
1. When the background bundle is loaded by the browser, it executes a script injection into the dom. (see section on _backend_). This script uses a technique called [throttle](https://medium.com/@bitupon.211/debounce-and-throttle-160affa5457b) to send state data from the app to the content script every specified milliseconds (in our case, this interval is 70ms).
@@ -274,12 +282,10 @@ Once you are ready for launch, follow these steps to simplify deployment to the
# Past Medium Articles for Reference
+- [Reactime Reimagined: A Major Leap Forward in React Debugging](https://medium.com/@elliesimens/reactime-reimagined-a-major-leap-forward-in-react-debugging-7b76a0a66f42)
- [Reactime v25: The Time to React is Now!](https://medium.com/@loganjnelsen/reactime-v25-the-time-to-react-is-now-ace90e45a9c7)
-
- [Relaunching Reactime: Updates and a New Accessibility Feature!](https://medium.com/@evaury/relaunching-reactime-updates-and-a-new-accessibility-feature-1f0fd3a5bd8c)
-
- [Reactime renovation: Updates Coming in Version 23.0!](https://medium.com/@liam.donaher/reactime-renovation-updates-coming-in-version-23-0-37b2ef2a2771)
-
- [Reactime 22: Reactime: Real-time Debugging, Timless Results](https://medium.com/@kelvinmirhan/reactime-real-time-debugging-timeless-results-3f163b721d01)
- [Reactime 21: Cheers to Reactime, Version 21!](https://medium.com/@brok3turtl3/cheers-to-reactime-version-21-fa4dafa4bc74)
- [Reactime 20: Reactime just keeps getting better!](https://medium.com/@njhuemmer/reactime-just-keeps-getting-better-b37659ff8b71)
diff --git a/src/app/App.tsx b/src/app/App.tsx
index df58c3232..561a14322 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,20 +1,14 @@
import React from 'react';
import { MemoryRouter as Router } from 'react-router-dom';
import MainContainer from './containers/MainContainer';
-import { ThemeProvider } from '@mui/material/styles';
-import theme from './styles/theme';
-
-/*
- 'currentTab' is the current active tab within Google Chrome.
- This is used to decide what tab Reactime should be monitoring. This can be "locked" currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc).
- This is used to determine the proper tutorial to render when How To button is pressed.
-*/
+import { Toaster } from 'react-hot-toast';
+import { ThemeProvider } from './ThemeProvider';
function App(): JSX.Element {
return (
-
+
- {/* we wrap our application with the tag so that all components that are nested will have the react-router context */}
+
diff --git a/src/app/FrontendTypes.ts b/src/app/FrontendTypes.ts
index ceb834b5d..2fb4bb3b4 100644
--- a/src/app/FrontendTypes.ts
+++ b/src/app/FrontendTypes.ts
@@ -22,7 +22,7 @@ export interface PerfData {
export interface PerformanceVisxProps {
width: number;
height: number;
- snapshots: [];
+ snapshots: any[];
hierarchy: any;
}
@@ -44,7 +44,6 @@ export interface BarStackProp {
currentTab?: string;
}
-// On-hover data for BarGraph/BarGraphComparison.tsx
export interface TooltipData {
bar: SeriesPoint;
key: string;
@@ -105,9 +104,12 @@ export interface BarGraphComparisonAction {
}
export interface ActionContainerProps {
- actionView: boolean;
- setActionView: React.Dispatch>;
- toggleActionContainer: () => void;
+ snapshots?: any;
+ currLocation?: any;
+}
+
+export interface ProvConContainerProps {
+ currentSnapshot: any;
}
export interface StateContainerProps {
@@ -217,7 +219,6 @@ export interface ActionProps {
last: boolean;
index: number;
sliderIndex: number;
- // dispatch: (a: { type: string; payload: unknown }) => void;
displayName: string;
componentName: string;
componentData: { actualDuration: number } | undefined;
@@ -225,7 +226,6 @@ export interface ActionProps {
state?: Record;
viewIndex: number | undefined;
isCurrIndex: boolean;
- handleOnkeyDown: (e: KeyboardEvent, i: number) => void;
}
export interface DiffRouteProps {
@@ -248,8 +248,8 @@ export interface HandleProps {
}
export interface MainSliderProps {
- className: string;
- snapshotsLength: number;
+ className?: string;
+ snapshots?: any[];
}
export interface DefaultMargin {
@@ -297,12 +297,10 @@ export interface StepsObj {
}
export interface LinkControlProps {
- layout: string;
orientation: string;
linkType: string;
stepPercent: number;
selectedNode: string;
- setLayout: (layout: string) => void;
setOrientation: (orientation: string) => void;
setLinkType: (linkType: string) => void;
setStepPercent: (percent: number) => void;
@@ -311,7 +309,6 @@ export interface LinkControlProps {
}
export interface ControlStyles {
- //fontSize: string;
padding: string;
}
@@ -329,11 +326,9 @@ export interface DropDownStyle {
export interface Node {
children?: Node[];
name?: string;
- // other properties here
}
export interface LinkComponent {
- layout: string;
linkType: string;
orientation: string;
}
@@ -396,4 +391,24 @@ export interface AxContainer {
};
snapshots: [];
currLocation: object;
-}
\ No newline at end of file
+ setShowTree: any;
+ setShowParagraph: any;
+}
+
+export interface FilteredNode {
+ name?: string;
+ state?: any;
+ hooksState?: any;
+ props?: any;
+ componentData?: {
+ context?: any;
+ hooksState?: any;
+ props?: any;
+ };
+ children?: FilteredNode[];
+ context?: any;
+}
+
+export interface FilteredNodeChildren {
+ [key: string]: FilteredNode;
+}
diff --git a/src/app/ThemeProvider.tsx b/src/app/ThemeProvider.tsx
new file mode 100644
index 000000000..3d435faac
--- /dev/null
+++ b/src/app/ThemeProvider.tsx
@@ -0,0 +1,39 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const ThemeContext = createContext({
+ isDark: false,
+ toggleTheme: () => {},
+});
+
+export const ThemeProvider = ({ children }) => {
+ const [isDark, setIsDark] = useState(false);
+
+ // Check for system preference on mount
+ useEffect(() => {
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ setIsDark(prefersDark);
+ }, []);
+
+ // Update body class when theme changes
+ useEffect(() => {
+ if (isDark) {
+ document.documentElement.classList.add('dark');
+ } else {
+ document.documentElement.classList.remove('dark');
+ }
+ }, [isDark]);
+
+ const toggleTheme = () => {
+ setIsDark((prev) => !prev);
+ };
+
+ return {children};
+};
+
+export const useTheme = () => {
+ const context = useContext(ThemeContext);
+ if (context === undefined) {
+ throw new Error('useTheme must be used within a ThemeProvider');
+ }
+ return context;
+};
diff --git a/src/app/__tests__/ActionContainer.test.tsx b/src/app/__tests__/ActionContainer.test.tsx
deleted file mode 100644
index 652253bcc..000000000
--- a/src/app/__tests__/ActionContainer.test.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-import React from 'react';
-import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import ActionContainer from '../containers/ActionContainer';
-import TravelContainer from '../containers/TravelContainer';
-import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
-import { mainSlice } from '../slices/mainSlice';
-import { useDispatch } from 'react-redux';
-//Note for testing:
-//typically, jest.mock is commonly used in unit testing to isolate the code under test.
-//In contrast, when performing integration testing of components with a real Redux store,
-//you typically don't need to use jest.mock because you're interested in testing how the real components interact with the actual store.
-//The decision to use jest.mock depends on the type of testing (unit or integration) and your specific testing goals.
-
-const customTabs = {
- 87: {
- snapshots: [1, 2, 3, 4],
- hierarchy: {
- index: 0,
- name: 1,
- branch: 0,
- stateSnapshot: {
- state: {},
- children: [
- {
- state: { test: 'test' },
- name: 'App',
- componentData: { actualDuration: 3.5 },
- },
- ],
- route: {
- id: 1,
- url: 'http://localhost:8080/',
- },
- },
- children: [
- {
- index: 1,
- name: 2,
- branch: 0,
- stateSnapshot: {
- state: {},
- children: [
- {
- state: { test: 'test' },
- name: 'App',
- componentData: { actualDuration: 3.5 },
- },
- ],
- route: {
- id: 2,
- url: 'http://localhost:8080/',
- },
- },
- children: [
- {
- index: 2,
- name: 3,
- branch: 0,
- stateSnapshot: {
- state: {},
- children: [
- {
- state: { test: 'test' },
- name: 'App',
- componentData: { actualDuration: 3.5 },
- },
- ],
- route: {
- id: 3,
- url: 'http://localhost:8080/',
- },
- },
- children: [
- {
- index: 3,
- name: 4,
- branch: 0,
- stateSnapshot: {
- state: {},
- children: [
- {
- state: { test: 'test' },
- name: 'App',
- componentData: { actualDuration: 3.5 },
- },
- ],
- route: {
- id: 4,
- url: 'http://localhost:8080/test/',
- },
- },
- children: [],
- },
- ],
- },
- ],
- },
- ],
- },
- currLocation: {
- index: 0,
- name: 1,
- branch: 0,
- },
- sliderIndex: 0,
- viewIndex: -1,
- },
-};
-
-const customInitialState = {
- main: {
- port: null,
- currentTab: 87, // Update with your desired value
- currentTitle: 'test string',
- tabs: customTabs, // Replace with the actual (testing) tab data
- currentTabInApp: 'test string',
- connectionStatus: false,
- connectRequested: true,
- },
-};
-
-const customStore = configureStore({
- reducer: {
- main: mainSlice.reducer,
- },
- preloadedState: customInitialState, // Provide custom initial state
- middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
-});
-
-const render = (component) => rtlRender({component});
-
-const MockRouteDescription = jest.fn();
-jest.mock('../components/Actions/RouteDescription', () => () => {
- MockRouteDescription();
- return
;
-});
-//need to add this mockFunction for setActionView
-//because in actual actioncontainer componenent, it is prop drilled down from maincontainer
-//here we set it as a jest.fn()
-//then we pass it into our actionContainer on render
-const setActionViewMock = jest.fn();
-const toggleActionContainer = jest.fn();
-jest.mock('react-redux', () => ({
- ...jest.requireActual('react-redux'), // Use the actual react-redux module except for the functions you want to mock
- useDispatch: jest.fn(), // set up a mock function for useDispatch
-}));
-
-// const dispatch = jest.fn();
-
-describe('unit testing for ActionContainer', () => {
- const useDispatchMock = (useDispatch as unknown) as jest.Mock; // make the test run
- // const useDispatchMock = useDispatch as jest.Mock; //getting a reference to the mock function you setup during jest.mock configuration on line 18
- const dummyDispatch = jest.fn(); //separate mock function created because we need to explicitly define on line 30 what
- useDispatchMock.mockReturnValue(dummyDispatch); //exactly useDispatchMock returns (which is a jest.fn())
- beforeEach(() => {
- render(
- ,
- );
- });
-
- test('expect top arrow to be rendered', () => {
- // render()
- expect(screen.getByRole('complementary')).toBeInTheDocument();
- });
-
- test('Expect RouteDescription to be rendered', () => {
- // render()
- expect(screen.getAllByText('MockRouteDescription')).toHaveLength(2);
- });
-
- test('Expect SwitchApp to be rendered', () => {
- // render()
- expect(screen.getByText('MockSwitchApp')).toBeInTheDocument();
- });
-
- test('Click works on clear button', () => {
- fireEvent.click(screen.getAllByRole('button')[0]);
- expect(dummyDispatch).toHaveBeenCalledTimes(1);
- });
-});
-
-describe('Integration testing for ActionContainer.tsx', () => {
- xtest('renders the ActionContainer component', () => {
- //tests that the clearButton is rendered by testing if we can get "Clear"
- //need to set actionView to true to correctly render clearbutton
- render(
- ,
- );
- const clearButton = screen.getByText('Clear'); // Use an existing element
- expect(setActionViewMock).toHaveBeenCalledWith(true);
- expect(clearButton).toBeInTheDocument();
- });
-
- test('Slider resets on clear button', () => {
- render(
- ,
- );
- render();
- fireEvent.click(screen.getAllByRole('button')[0]);
- expect(screen.getByRole('slider')).toHaveStyle('left: 0');
- });
-});
diff --git a/src/app/__tests__/ActionsButtons.test.tsx b/src/app/__tests__/ActionsButtons.test.tsx
new file mode 100644
index 000000000..76213f702
--- /dev/null
+++ b/src/app/__tests__/ActionsButtons.test.tsx
@@ -0,0 +1,324 @@
+import React from 'react';
+import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { store } from '../store';
+import { useDispatch } from 'react-redux';
+import { mainSlice, changeSlider, emptySnapshots } from '../slices/mainSlice';
+
+import { useTheme } from '../ThemeProvider';
+import { configureStore } from '@reduxjs/toolkit';
+
+import DropDown from '../components/Actions/DropDown';
+import RecordButton from '../components/Actions/RecordButton';
+import ThemeToggle from '../components/Actions/ThemeToggle';
+import ProvConContainer from '../containers/ProvConContainer';
+import ActionContainer from '../containers/ActionContainer';
+
+// @ts-ignore
+const useDispatchMock = useDispatch as jest.Mock;
+const dummyDispatch = jest.fn();
+
+// Mock ThemeToggle for RecordButton tests
+jest.mock('../components/Actions/ThemeToggle', () => {
+ return function MockThemeToggle() {
+ return
+ A Note to Developers: Reactime is using the Chrome Debugger API in order to grab the
+ Accessibility Tree. Enabling this option will allow you to record Accessibility Tree
+ snapshots, but will result in the Chrome browser notifying you that the Chrome
+ Debugger has started.
+
- 
+ Outil de Performance React
+
+
+
+
-
+
+
+
-
+
-
+ 
+ 
- 
Route instances are created by the addRoute method on Routes. A Route instance has two properties: the url of the route and a unique id.
-