New revived version

[ultroned]

New revived version (aka v1.0.0)

This release represents a complete modernization and enhancement of xray-react,
bringing it up to date with modern React development practices and adding
powerful new features for component inspection and debugging.

Major Features

React 18+ Support

• Full support for React 18+ using React DevTools protocol
• Legacy fallback support for React <18
• Deep fiber tree traversal for accurate component detection

Multi-Bundler Support

• Webpack plugin (XrayReactWebpackPlugin)
• Vite plugin (xrayReactVitePlugin)
• Manual import support for custom setups

Smart Component Filtering

• Automatic project root detection via package.json or XRAY_REACT_PROJECT_ROOT env var
• External library component filtering (excludes node_modules, build artifacts, etc.)
• Hybrid usage/import detection for accurate component mapping
• Context-aware component matching for duplicate component names
• Filtered component path showing only project-owned components

Enhanced User Experience

• Component hierarchy display with parent-to-child ordering
• Component search functionality
• Improved action bar layout with scrollable component path
• Loading spinner overlay displayed during component processing for visual feedback
• Esc key support to turn off overlay
• Keyboard shortcut: Cmd+Shift+X (Mac) / Ctrl+Shift+X (Windows/Linux)

Improvements

Component Detection

• HTML element filtering (div, span, form, etc.)
• Component name resolution from displayName, name, and debugSource
• Full React component hierarchy traversal
• Deduplication of repeated components in paths

File Opening

• Context-aware file resolution for duplicate component names
• Support for .js, .jsx, .ts, .tsx file types
• Priority-based file selection (.tsx/.jsx > .ts/.js)
• Editor detection for VSCode, Cursor, WebStorm, Sublime, and more
• Improved PATH resolution for editor commands

Architecture

• Centralized constants management
• Shared source utilities across all plugins
• Socket.IO server for client-server communication
• Project configuration synchronization (project root, usage map, import map)

Performance Improvements

• O(n*m) to O(1) optimizations: Pre-computed indexes (componentNameToFilesIndex, normalizedProjectFilePaths) reduce component detection complexity from 25,000+ iterations to ~50 lookups for typical projects
• Path normalization memoization: normalizePathCache eliminates redundant string operations for repeated path lookups
• Async batch processing: processElementsAsync processes DOM elements in batches (20 elements, then 10 paths) to prevent UI blocking during activation
• Performance impact: Reduced activation time from 1-15 seconds to under 500ms for simple pages and under 2s for complex pages

Technical Changes

Dependencies

• Node.js >= 22.0.0 required
• React >= 18.0.0 as peer dependency
• Updated to modern ES modules (type: "module")
• Removed Babel 6 dependencies

Code Quality

• Removed unused imports and declarations
• Improved error handling and fallbacks
• Better code organization and separation of concerns
• Comprehensive comments and documentation

Bug Fixes

• Fixed incorrect file opening for duplicate component names
• Fixed component path showing external library components
• Fixed editor command resolution (subl, code, etc.)
• Fixed component hierarchy ordering (parent -> child)
• Fixed duplicate components appearing in paths

Documentation

• Updated README with comprehensive usage examples
• Added keyboard shortcuts documentation
• Added troubleshooting section
• Added configuration options documentation

Breaking Changes

• Node.js >= 22.0.0 required (previously supported older versions)
• React >= 18.0.0 required (previously supported React <18)
• Removed Babel 6 support (now uses native ES modules)
• Plugin API changes (new plugin names and options)

Migration Guide

For existing users:

1. Update Node.js to >= 22.0.0
2. Update React to >= 18.0.0
3. Update plugin imports to new names (XrayReactWebpackPlugin, etc.)
4. Set XRAY_REACT_PROJECT_ROOT if needed for custom project structures

---

Full Changelog: See git history for detailed (sort of) commit log