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/DEVELOPER_README.md
+41-35Lines changed: 41 additions & 35 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -58,58 +58,66 @@ Here are some notes on the current state of Reactime and considerations for futu
58
58
59
59
There are a variety of open issues on the [OSLabs Reactime Github](https://github.com/open-source-labs/reactime) that remain to be addressed.
60
60
61
-
## Main Slice Modularity
61
+
## Support for useReducer Time Travel
62
62
63
-
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.
63
+
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.
64
64
65
-
## Testing
65
+
Current Implementation
66
66
67
-
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.
67
+
Reactime successfully captures and displays the current state of useReducer hooks in components
68
+
The state data and last dispatched action for reducers are captured in the component snapshot
69
+
This data is accessible in the component tooltips when hovering over nodes in the component map
70
+
Reducer states are stored separately from useState data in the componentData structure
68
71
69
-
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. -->
72
+
Challenges with Time Travel
70
73
71
-
## Continue to investigate app behavior on load
74
+
Unlike useState which has a simple state setter function, useReducer state changes must go through the reducer function
75
+
The reducer function defines the valid state transitions through actions
76
+
Simply setting a new state value would bypass the reducer's action-based state management
77
+
Maintaining the correct action history and ensuring state validity through time travel becomes complex
78
+
The current implementation can show reducer states at different points in time but cannot reliably replay state transitions
72
79
73
-
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.
80
+
Future Considerations
81
+
Teams working on expanding reducer support should consider:
74
82
75
-
## Including Support for Hooks Beyond useState
83
+
How to capture and replay sequences of reducer actions
84
+
Ways to maintain reducer state validity during time travel
85
+
Potential approaches for reconstructing reducer state history
86
+
Methods to handle complex reducer patterns like middleware or side effects
87
+
Trade-offs between full reducer state management and simplified state snapshots
76
88
77
-
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._
89
+
## Expanding Support for Custom Hooks
78
90
79
-
To see how hook data is stored on the fiber tree:
91
+
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.
80
92
81
-
1. Change demo-app/src/client/Router.tsx to use utilize the ButtonsWithMoreHooks component
82
-
2. Have the "Load Unpacked" version of Reactime in your chrome extension.
83
-
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
84
-
4. Run Reactime on your computer via "npm run dev", which links your local Reactime to the "Load Unpacked" chrome extension.
85
-
5. Run the demo-app from a separate terminal that's currently in the demo-app directory via "npm run dev"
86
-
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.
93
+
Current Implementation
87
94
88
-
Any changes to console.logs in Reactime can be seen by refreshing the browser the app is running in.
95
+
Reactime uses AST parsing via @babel/parser to analyze hook usage in components
96
+
The system identifies hook patterns through memoizedState examination in the Fiber tree
97
+
Hook names and state variables are extracted and matched with their corresponding state values
98
+
This works well for direct useState and useReducer calls but may miss custom hook implementations
89
99
90
-
## React DevTools Global Hook
100
+
Challenges
91
101
92
-
React Developer Tools has NOT deprecated \_\_REACT_DEVTOOLS_GLOBAL_HOOK\_\_. However, Reactime v21 has sleuthed and learned the following from the team at React:
102
+
Custom hooks can contain multiple internal state management hooks
103
+
The relationship between custom hook state and component state is not always clear in the Fiber tree
104
+
Hook naming patterns may vary across different custom hook implementations
105
+
State updates in custom hooks might use complex patterns or composition
106
+
The current AST parsing system is optimized for standard hook patterns
93
107
94
-
Ruslan Lesiutin (https://github.com/hoxyq) from Meta/ Facebook responded on July 28, 2023
95
-
"Hey @morahgeist,
96
-
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.
97
-
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."
108
+
Future Considerations
109
+
Teams looking to expand custom hook support should consider:
98
110
99
-
## Redux
100
-
101
-
Can Reactime functionality be extended so applications using Redux can track state in Reactime?
102
-
103
-
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.
111
+
How to identify and group state belonging to the same custom hook
112
+
Ways to visualize the relationship between custom hook state and component state
113
+
Methods to track state flow through custom hook composition
114
+
Approaches for handling custom hooks that combine multiple state management methods
115
+
Strategies for maintaining time travel functionality with custom hook state
104
116
105
117
## Newsletter functionality on the Reactime website
106
118
107
119
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.
108
120
109
-
## Optimize webpack bundle size in production mode
110
-
111
-
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.
112
-
113
121
# File Structure
114
122
115
123
In the _src_ folder, there are three directories we care about: _app_, _backend_, and _extension_.
@@ -274,12 +282,10 @@ Once you are ready for launch, follow these steps to simplify deployment to the
274
282
275
283
# Past Medium Articles for Reference
276
284
285
+
-[Reactime Reimagined: A Major Leap Forward in React Debugging](https://medium.com/@elliesimens/reactime-reimagined-a-major-leap-forward-in-react-debugging-7b76a0a66f42)
277
286
-[Reactime v25: The Time to React is Now!](https://medium.com/@loganjnelsen/reactime-v25-the-time-to-react-is-now-ace90e45a9c7)
278
-
279
287
-[Relaunching Reactime: Updates and a New Accessibility Feature!](https://medium.com/@evaury/relaunching-reactime-updates-and-a-new-accessibility-feature-1f0fd3a5bd8c)
280
-
281
288
-[Reactime renovation: Updates Coming in Version 23.0!](https://medium.com/@liam.donaher/reactime-renovation-updates-coming-in-version-23-0-37b2ef2a2771)
0 commit comments