You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.fr.md
+16-1Lines changed: 16 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -36,7 +36,7 @@
36
36
<br>
37
37
38
38
<palign="center">
39
-
<imgsrc="./assets/new-reactime.gif" />
39
+
<imgsrc="./assets/v20/Overview.gif" />
40
40
</p>
41
41
42
42
<palign="center">
@@ -124,6 +124,13 @@ Après avoir cloné ce référentiel, les développeurs peuvent simplement exéc
124
124
- télécharger les snapshots actuels en mémoire
125
125
- titres déclaratifs dans la barre latérale des actions
126
126
127
+
<h1>Quoi de neuf !</h1>
128
+
Reactime 20.0 inclut plusieurs améliorations clés sous le capot pour améliorer les performances et résoudre les bogues existants, ainsi qu'une UX remaniée pour atteindre la compatibilité WCAG.
129
+
130
+
Nous avons résolu plusieurs bogues persistants, y compris un problème majeur qui faisait planter les applications utilisant Reactime lors de l'utilisation de la fonctionnalité de connexion ou de soumission. Dans le cadre de nos efforts pour améliorer les performances globales de Reactime, nous avons continué à implémenter TypeScript dans toute la base de code et créé de nouveaux tests avec React Testing Library. Nous avons également rendu les tests plus robustes, améliorant les tests existants et corrigeant les environnements de test défectueux. Enfin, nous avons mis à jour Reactime en supprimant certains codes et packages obsolètes, réduisant ainsi les erreurs de compilation.
131
+
132
+
Nous avons mis à jour l'UX, en recherchant la cohérence avec les directives pour l'accessibilité des contenus Web (WCAG). Plus précisément, nous avons amélioré la taille et la conception des éléments cibles dans Reactime et soigneusement choisi de nouveaux contrastes de couleurs.
133
+
127
134
## <b>En savoir plus</b>
128
135
129
136
-[Time-Travel State with Reactime](https://medium.com/better-programming/time-traveling-state-with-reactime-6-0-53fdc3ae2a20)
@@ -202,6 +209,14 @@ Après avoir cloné ce référentiel, les développeurs peuvent simplement exéc
Copy file name to clipboardExpand all lines: README.md
+13-18Lines changed: 13 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -28,7 +28,7 @@
28
28
<br>
29
29
30
30
<palign="center">
31
-
<imgsrc="./assets/v19/Overview.gif" />
31
+
<imgsrc="./assets/v20/Overview.gif" />
32
32
</p>
33
33
34
34
<palign="center">
@@ -47,7 +47,7 @@ be viewed in Diff mode.
47
47
<br>
48
48
49
49
<palign="center">
50
-
<imgsrc="./assets/v19/map.gif" />
50
+
<imgsrc="./assets/v20/map.gif" />
51
51
</p>
52
52
<br>
53
53
@@ -60,10 +60,6 @@ name.
60
60
<br>
61
61
<br>
62
62
63
-
<!-- <p align="center">
64
-
<img src="./assets/action-comparison.gif" />
65
-
</p> -->
66
-
67
63
### 🔹 Components Comparison
68
64
69
65
When toggled to a specific snapshot, a visualization of the individual
@@ -73,11 +69,6 @@ each component upon hovering.
73
69
<br>
74
70
<br>
75
71
76
-
<palign="center">
77
-
<imgsrc="./assets/v19/performance.gif" />
78
-
</p>
79
-
<br>
80
-
81
72
### 🔹 Recording
82
73
83
74
Whenever state is changed (whenever setState, useState is called), this
@@ -87,7 +78,7 @@ snapshot will be displayed in Chrome DevTools under the Reactime panel.
87
78
<br>
88
79
89
80
<palign="center">
90
-
<imgsrc="./assets/v19/history.gif" />
81
+
<imgsrc="./assets/v20/history.gif" />
91
82
</p>
92
83
<br>
93
84
@@ -147,15 +138,15 @@ of the structure and interfaces of the codebase.
147
138
148
139
<h1>What's New!</h1>
149
140
150
-
<b>Reactime 19.0</b> comes with UI updates to enhance the developer's experience, as well as a much-needed revamping of the codebase to reflect current industry standards and better maintainability for future contributors.
141
+
Reactime 20.0 includes several key improvements under the hood to improve performance and resolve existing bugs, as well as a revamped UX to achieve WCAG compatibility.
151
142
152
-
<i>UI Updates</i>
143
+
<i>Under the Hood</i>
153
144
154
-
To handle displaying large amounts of data, we have changed how nested structures like objects and arrays are displayed to now be collapsible and scrollable. In addition, we've updated component information to include the necessary component "key" information, and data now also persists on hover, eliminating the need to leave the cursor in one place.
145
+
We have resolved several persistent bugs, including a major issue that caused apps using Reactime to crash when using login or submit functionality. As part of our effort to improve Reactime performance overall, we have continued to implement TypeScript throughout the codebase and created new tests with React Testing Library. We have also made testing more robust, improving existing tests and fixing broken test environments. Lastly, we have upgraded Reactime by removing some deprecated code and packages, reducing compilation errors.
155
146
156
-
<i>Under the Hood</i>
147
+
<i>Accessibility</i>
157
148
158
-
We are happy to say that we've migrated from Enzyme to React Testing Library to eliminate the need for the Enzyme adapter, converted from JavaScript to TypeScript to ensure type safety, and updated the traversal of the React Fiber Tree to accurately extract useState data for previously unsupported edge cases.
149
+
We have updated the UX, seeking consistency with the Web Content Accessibility Guidelines (WCAG). Specifically, we have improved the size and design of target elements throughout Reactime and carefully chosen new color contrasts to ensure WCAG compatibility.
159
150
160
151
If you would like to read more about previous releases, click <ahref="https://github.com/open-source-labs/reactime/releases">here!</a>
161
152
@@ -231,7 +222,7 @@ Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
231
222
232
223
## <b>Read More</b>
233
224
234
-
-[It's time for Reactime 19.0!](linkhere)
225
+
-[It's time for Reactime 20.0!](linkhere)
235
226
236
227
## <b>Authors</b>
237
228
@@ -318,6 +309,10 @@ Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
Copy file name to clipboardExpand all lines: README.rus.md
+17-20Lines changed: 17 additions & 20 deletions
Original file line number
Diff line number
Diff line change
@@ -19,19 +19,20 @@
19
19
<br>
20
20
21
21
<palign="center">
22
-
<imgsrc="./assets/new-reactime.gif" />
22
+
<imgsrc="./assets/v20/Overview.gif" />
23
23
</p>
24
24
25
-
<b>Reactime 18.0</b> вводит ряд новых и улучшенных функций, направленных на оптимизацию производительности и улучшение совместимости.
26
-
С поддержкой Next.js и Remix, увеличенной покрытия тестов (93% на бэкенде, необходимо больше на фронтенде) и структурных улучшений в кодовой базе.
27
-
Кроме того, мы гордимся анонсом запуска нашего вновь переработанного веб-сайта, который служит центром для последних обновлений и информации о Reactime.
28
-
Для помощи в отладке мы включили демонстрационные приложения для Next.js и Remix, что позволяет будущим итераторам тестировать и устранять ошибки с большей легкостью и эффективностью.
25
+
<b>Reactime 20.0</b>
26
+
27
+
Reactime 20.0 включает в себя несколько ключевых улучшений для повышения производительности и устранения существующих ошибок, а также переработанный пользовательский интерфейс для обеспечения совместимости с WCAG.
28
+
29
+
Мы исправили несколько постоянных ошибок, в том числе серьезную проблему, которая приводила к сбою приложения, использующих Reactime, при использовании функций входа или отправки. Мы продолжили внедрять TypeScript в кодовую базу и создали новые тесты с библиотекой тестирования React. Мы также сделали тестирование более надежным, улучшив существующие тесты и исправив неработающие тесты. Наконец, мы обновили Reactime, удалив некоторый устаревший код и пакеты, уменьшив количество ошибок компиляции.
30
+
31
+
Мы обновили взаимодействие с пользователем, в соответствие с требованиями Руководства по доступности веб-контента (WCAG). В частности, мы улучшили размер и дизайн целевых элементов в Reactime и тщательно выбрали новые цветовые контрасты.
29
32
30
33
<b>Reactime</b> - расширение для дебаггинга/отладки React приложений. Оно создает снэпшоты при каждом изменении состояния (state) и позволяет пользованию прыгать на любое предыдущее состояние (state).
31
34
В настоящее время Reactime поддерживает React приложения с классовыми, функциональными компонентами, хуками и Context API.
32
35
33
-
В Reactime версии 7.0 отлажены баги предыдущих версий, улучшена визуализация данных отношений между компонентами. Также новая версия включает в себя расширенную документацию для разработчиков, которые хотят работать над приложением.
34
-
35
36
После загрузки Reactime вы можете протестировать его полную функциональность на любом вашем React приложении в режиме разработки (dev mode). В продакшен режиме вы можете только работать с картой компонентов.
36
37
37
38
## <b>Установка</b>
@@ -90,19 +91,6 @@ Reactime beta поддерживает приложения, написанны
90
91
91
92
После клонирования репозитория, вы можете использовать команду `npm run docs` в корневой папке, которая генерирует файл в браузере `/docs/index.html`. Это упростит знакомство с приложением и поможет вам ознакомиться со структурой и интерфейсом существующего кода.
92
93
93
-
### <b>Дополнительный функционал</b>
94
-
95
-
- identifying unnecessary re-renders
96
-
- hover functionality to view tooltip details on state visualizations
97
-
- ability to pan and zoom on state visualizations
98
-
- a dropdown to support development of projects on multiple tabs
99
-
- a slider to move through snapshots quickly
100
-
- a play button to move through snapshots automatically
101
-
- a lock button, which stops recording each snapshot
102
-
- a persist button to keep snapshots upon refresh (handy when changing code and debugging)
103
-
- download/upload the current snapshots in memory
104
-
- declarative titles in the actions sidebar
105
-
106
94
## <b>Узнать больше о Reactime и React Fiber</b>
107
95
108
96
-[Time-Travel State with Reactime](https://medium.com/better-programming/time-traveling-state-with-reactime-6-0-53fdc3ae2a20)
@@ -111,6 +99,7 @@ Reactime beta поддерживает приложения, написанны
111
99
-[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)
0 commit comments