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: src/README.md
+12-12Lines changed: 12 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -47,17 +47,19 @@ Similar approach for Next.js and Remix demo apps
47
47
## Linting
48
48
49
49
_Before_ beginning development, especially on teams, make sure to configure your linter and code formatting to conform to one unified setting (We recommend [the Airbnb style guide](https://github.com/airbnb/javascript)!) This will make reviewing PRs much more readable and less error-prone.
50
-
50
+
51
+
52
+
# Possible Avenues for Future Iterators
51
53
52
-
# Possible Avenues for Future Iterators
53
54
Here are some notes on the current state of Reactime and considerations for future development.
54
55
55
56
## Testing
56
57
57
-
For Reactime unit tests, pre-v.19 there were tests built out in two places. Backend tests were in backend >\_\_tests\_\_. Frontend tests were in src > app >\_\_tests\_\_. In v19, we specifically focused on rebuilding front tests to use React Testing Library (RTL) + Jest. Previously, front end testing existed but utilized Enzyme + Jest . Our decision to move to RTL stemmed on the fact that Enzyme did not support React V17 (third party Enzyme adaptor libraries were created to provide support to previous React versions, but were still very much out of date) and that Enzyme is no longer industry standard. We began the process of creating new frontend tests but they are not complete and this is a great place for future iterators to build out more. Since the new suite of RTL tests are not fully complete, we have kept the older Enzyme tests within the codebase to be referenced (src > app > __tests__enzyme). However, these will not be included in the tests run in the testing scripts.
58
+
For Reactime unit tests, pre-v.19 there were tests built out in two places. Backend tests were in backend >\_\_tests\_\_. Frontend tests were in src > app >\_\_tests\_\_. In v19, we specifically focused on rebuilding front tests to use React Testing Library (RTL) + Jest. Previously, front end testing existed but utilized Enzyme + Jest . Our decision to move to RTL stemmed on the fact that Enzyme did not support React V17 (third party Enzyme adaptor libraries were created to provide support to previous React versions, but were still very much out of date) and that Enzyme is no longer industry standard. We began the process of creating new frontend tests but they are not complete and this is a great place for future iterators to build out more. Since the new suite of RTL tests are not fully complete, we have kept the older Enzyme tests within the codebase to be referenced (src > app > **tests**enzyme). However, these will not be included in the tests run in the testing scripts.
58
59
59
60
## Including Support for Hooks Beyond useState
60
-
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.*
61
+
62
+
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._
61
63
62
64
To see how hook data is stored on the fiber tree:
63
65
@@ -71,20 +73,19 @@ To see how hook data is stored on the fiber tree:
71
73
Any changes to console.logs in Reactime can be seen by refreshing the browser the app is running in.
72
74
73
75
## Replace Functionality for Outdated Packages
74
-
Packages emotion/core and material-ui/core haven't been updated to use React 18. This is the reason npm install --force is necessary when installing the dependencies of Reactime. Replacing the functionality these packages perform and removing them from Reactime would ensure compatibility moving forward.
75
76
76
-
React Developer Tools has deprecated \_\_REACT\_DEVTOOLS\_GLOBAL\_HOOK\_\_, which Reactime uses to extract a running application's fiber tree. At the time of the release of Reactime 19 (May 2023), this tool still works reliably to deliver said fiber tree. This will likely be the case until the React version (React version 18.2 at time of writing) undergoes updates that diverge beyond compatibility with \_\_REACT\_DEVTOOLS\_GLOBAL\_HOOK\_\_. At this time, Reactime will need to change how it extracts an application's fiber tree.
77
+
Packages emotion/core and material-ui/core haven't been updated to use React 18. This is the reason npm install --force is necessary when installing the dependencies of Reactime. Replacing the functionality these packages perform and removing them from Reactime would ensure compatibility moving forward.
77
78
78
-
Changing how Reactime extracts the fiber tree before said React version update may yeild diminishing result, as whatever method will also need to be updated to match React's breaking updates.
79
+
React Developer Tools has deprecated \_\_REACT_DEVTOOLS_GLOBAL_HOOK\_\_, which Reactime uses to extract a running application's fiber tree. At the time of the release of Reactime 19 (May 2023), this tool still works reliably to deliver said fiber tree. This will likely be the case until the React version (React version 18.2 at time of writing) undergoes updates that diverge beyond compatibility with \_\_REACT_DEVTOOLS_GLOBAL_HOOK\_\_. At this time, Reactime will need to change how it extracts an application's fiber tree.
79
80
81
+
Changing how Reactime extracts the fiber tree before said React version update may yeild diminishing result, as whatever method will also need to be updated to match React's breaking updates.
80
82
81
83
## Redux
82
84
83
85
Can Reactime be integrated with Redux compatibility so applications using Redux can track state in Reactime?
84
86
85
87
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.
86
88
87
-
88
89
# File Structure
89
90
90
91
In the _src_ folder, there are three directories we care about: _app_, _backend_, and _extension_.
@@ -100,7 +101,7 @@ src/
100
101
│ ├── containers/ # More React components
101
102
│ ├── reducers/ # Redux mechanism for updating state
102
103
│ ├── styles/ #
103
-
│ ├── FrontendTypes.ts # Library of typescript interfaces
104
+
│ ├── FrontendTypes.ts # Library of typescript interfaces
104
105
│ ├── index.tsx # Starting point for root App component
105
106
│ ├── module.d.ts #
106
107
│ └── store.tsx #
@@ -127,7 +128,7 @@ src/
127
128
│ ├── index.d.ts # Definitely Type file for Index
128
129
│ ├── module.d.ts #
129
130
│ ├── package.json #
130
-
│ ├── puppeteerServer.js #
131
+
│ ├── puppeteerServer.ts #
131
132
│
132
133
├── extension/ # Chrome Extension code
133
134
│ ├── build/ # Destination for bundles and manifest.json (Chrome config file)
@@ -156,7 +157,6 @@ All the diagrams of data flows are available on [MIRO](https://miro.com/app/boar
156
157
- Like regular web apps, Chrome Extensions are event-based. The background script is where one typically monitors for browser triggers (e.g. events like closing a tab, for example). The content script is what allows us to read or write to our target web application, usually as a result of [messages passed](https://developer.chrome.com/extensions/messaging) from the background script.
157
158
- These two files help us handle requests both from the web browser and from the Reactime extension itself
158
159
159
-
160
160
## Data Flow Architecture
161
161
162
162
The general flow of data is described in the following steps:
@@ -170,7 +170,6 @@ The general flow of data is described in the following steps:
170
170
3. Likewise, when Reactime emits an action due to user interaction -- a "jump" request for example -- a message will be passed from Reactime via the background script to the content script. Then, the content script will pass a message to the target application containing a payload that represents the state the user wants the DOM to reflect or "jump" to.
171
171
- One important thing to note here is that this jump action must be dispatched in the target application (i.e. _backend_ land), because only there do we have direct access to the DOM.
172
172
173
-
174
173
# Reacti.me Website:
175
174
176
175
See [Reacti.me README](https://github.com/reactimetravel/reactime-website/blob/main/README.md) for instruction of how to update the website
@@ -239,6 +238,7 @@ Some relevant sections are reproduced below:
239
238
- In other words, a background script works as a sort of middleman, directly maintaining connection with its parent extension, and acting as a proxy enabling communication between it and the content script.
240
239
241
240
# Past Medium Articles for Reference
241
+
242
242
-[Reactime 19: What time is it? It’s still Reactime!](https://medium.com/@minzo.kim/what-time-is-it-its-still-reactime-d496adfa908c)
243
243
-[Reactime 18.0. Better than ever](https://medium.com/@zdf2424/reactime-18-0-better-than-ever-148b81606257)
244
244
-[Reactime v17.0.0: Now with support for the Context API, and a modern UI](https://medium.com/@reactime/reactime-v17-0-0-now-with-support-for-the-context-api-and-a-modern-ui-f0edf9e54dae)
0 commit comments