react-compiler-marker highlights React components optimized by the React Compiler. This tool provides clear, visual indicators ✨ for successfully optimized components and 🚫 for those that failed optimization. It makes the optimization process more transparent and helps developers achieve better performance in their React applications.
Features 🌟
Highlight Optimized Components: Receive visual markers ✨ for React functions or components successfully optimized by the React Compiler.
Spot Failed Optimizations: See clear indicators 🚫 for components that couldn't be optimized, with detailed hover tooltips explaining why.
Hover for Details: Hover over markers to display the reason for optimization success or failure.
Manual Controls:
Activate or deactivate the extension as needed.
Perform a one-time check of the current file using the Check Once command.
Screenshots 📸
✨ Example Optimized Marker
🚫 Example Failed Marker
Commands 🛠️
The extension provides the following commands:
Activate Decorations: Activates the markers for all relevant files in the current session.
React Compiler Marker: Activate Extension
Deactivate Decorations: Deactivates the markers and clears them from the editor.
React Compiler Marker: Deactivate Extension
Check Once (File-Specific Check): Analyzes a single file for one-time feedback without altering activation state.
React Compiler Marker: Check Once
These commands can be accessed via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and are associated with customizable keyboard shortcuts in your VS Code settings.
Requirements ⚙️
This extension is fully self-contained and does not require external setup or dependencies. However, to fully utilize React Compiler insights, ensure your project:
Includes React codebases.
Uses standard JavaScript, TypeScript, or jsx/tsx file formats.
Known Issues 🐛
Some rare edge cases of anonymous functions could fail to properly display tooltips.
For files with a large number of React components, performance may degrade slightly during real-time updates.
Release Notes 📜
1.0.0
Initial release of React Compiler Marker ✨.
Added support for:
Marking optimized (✨) and failed (🚫) components.
Hoverable tooltips with optimization details.
Commands for manual control (Activate, Deactivate, Check Once).
For More Information 🤝
Learn about React Compiler and how it can improve your React app's performance.
