Release v1.1.1

What's Changed

• 29 apply dependabot version bumps by @ultroned in #30

Full Changelog: v1.1.0...v1.1.1

v1.1.0

This release introduces display modes, search enhancements, and comprehensive developer experience improvements.

Major Features:

Display Modes:

• Full Mode (default): Traditional behavior where all component overlays are visible immediately when xray-react is activated
• Simple Mode: Clean, minimal interface where only the action bar is visible initially
  • Component overlays are hidden by default and shown only on hover. Provides a less cluttered view for focused component inspection
  • Search component remains visible and functional
  • Configurable via mode plugin parameter or XRAY_REACT_MODE environment variable

Search Enhancements:

• Clear Button: Added X icon to search input for quick clearing
  • Automatically shows/hides based on input value
  • Accessible with proper ARIA labels
• Simple Mode Integration: Search highlights matching components in simple mode (makes them visible and highlighted)

Dev Improvements:

• ESLint Configuration: Added ESLint flat config (eslint.config.js)
• Prettier Configuration: Added Prettier JavaScript config (prettier.config.js)
• Pre-commit Hook: Integrated ESLint, Prettier, and build step with automatic staging
• Code Quality: Fixed ESLint issues and applied Prettier formatting across codebase
• Package Configuration: Optimized .npmignore to exclude non-required files

Configuration Changes:

New Plugin Options:

• mode (string): Display mode selection
  • Options: 'full' (default) or 'simple'
  • Validates against available modes and defaults to 'full' if invalid

Environment Variables:

• XRAY_REACT_MODE: Set display mode globally (default: 'full')
  • Takes precedence when plugins don't specify mode parameter
  • Validates against available modes and defaults to 'full' if invalid

---

Note: This release focuses on the new display mode options and dev improvements. All existing functionality remains unchanged.
Full Changelog: v1.1.0...v1.1.0 (or see PRs #21 #22 #23 for more details)

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)

Main 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

• 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

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

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: v0.5.0...v1.0.0 (or see PR #15 for more details)