Skip to content

v1.0.0

Latest
Latest

Choose a tag to compare

View all tags
@damianidczak damianidczak released this 31 Oct 06:48
· 6 commits to main since this release
v1.0.0
afec515

[1.0.0] - 2025-10-31

🎉 Initial Release

First stable release of Vue Render Inspector - Advanced render profiler and debugger for Vue 3.5+ applications.

✨ Added

Core Features

  • Automatic Render Tracking - Monitor all component renders without manual instrumentation
  • Unnecessary Render Detection - Identify components that re-render without actual data changes
  • Performance Analysis - Microsecond-precision timing with configurable thresholds
  • Reactivity Tracking - Visualize Vue's reactivity system with renderTracked/renderTriggered hooks
  • Render Storm Detection - Identify components caught in rapid re-render loops (>5 renders/second)
  • Component Recreation Detection - Find components being destroyed and recreated unnecessarily
  • Cross-Tab Communication - Visualize renders across multiple browser windows via BroadcastChannel API
  • Memory Safe Implementation - WeakMap-based tracking prevents memory leaks

Pattern Detection System (11 Patterns)

  1. Deep Reactivity Misuse - Detects large objects (>50 properties) with unnecessary deep reactivity
  2. Watcher Misuse - Identifies watchers that should be computed properties (derived state pattern)
  3. Large List No Virtualization - Flags lists >100 items without virtual scrolling
  4. Template Method Calls - Finds method calls in templates that should be computed properties
  5. Array Mutations - Detects direct array mutations that may break reactivity
  6. Missing v-memo - Identifies expensive list items that would benefit from v-memo optimization
  7. Array Index as Key - Warns about using array index as v-for :key
  8. Computed No Dependencies - Finds computed properties that don't access reactive dependencies
  9. Deep Watchers - Detects expensive deep watchers on large objects
  10. Event Listener Leaks - Identifies missing cleanup in lifecycle hooks
  11. Inline Object Creation - Finds inline objects/functions in props causing unnecessary child re-renders

Interactive Visualizer

  • Real-time Component Tree - Interactive canvas-based visualization
  • Performance Heatmap - Color-coded nodes (green <16ms, yellow 16-100ms, red >100ms)
  • Inspector Panel - Detailed component analysis on click
    • Total renders & unnecessary renders with percentages
    • Performance metrics (avg/slowest/fastest render times)
    • Detected bottlenecks with severity scores
    • Render history with timestamps and reasons
    • Props/state diff tracking
    • Reactivity event correlation
    • User event correlation
    • Component context (parent chain, depth, children)
  • Viewport Culling - Only renders visible nodes for performance
  • Level of Detail (LOD) - Simplifies distant nodes
  • Quadtree Spatial Indexing - O(log n) mouse hit detection
  • Notification System - Real-time render notifications with auto-dismiss

Console API

  • __VUE_RENDER_INSPECTOR__.summary() - Show render summary
  • __VUE_RENDER_INSPECTOR__.top(n) - Show top N components with most unnecessary renders
  • __VUE_RENDER_INSPECTOR__.slow(n) - Show N slowest components
  • __VUE_RENDER_INSPECTOR__.visualizer() - Open interactive visualizer
  • __VUE_RENDER_INSPECTOR__.panel() - Toggle inspector panel
  • __VUE_RENDER_INSPECTOR__.clear() - Clear all data
  • __VUE_RENDER_INSPECTOR__.help() - Show help

Developer Experience

  • Zero-config Installation - Works out of the box with sensible defaults
  • Vue Plugin Integration - Simple app.use(VueRenderInspector)
  • Flexible Configuration - 33+ configurable options for advanced use cases
  • Auto-disable in Production - Automatically disabled when NODE_ENV === 'production'
  • Zero Dependencies - No external runtime dependencies

Configuration Options

  • Core: enabled, console, verbose
  • Filtering: include, exclude (string/regex patterns)
  • Performance: warnThreshold (16ms), errorThreshold (100ms)
  • Detection: detectUnnecessary, strictMode, trackDependencies
  • Memory: maxRecords (1000), maxHistorySize (50), memoryCleanupInterval (30s)
  • Storm: stormWindow (1000ms), stormThreshold (5 renders)
  • Recreation: recreationWindow (100ms)
  • Events: trackEvents, eventContextTimeout (500ms), debugEvents
  • Reactivity: trackReactivity, maxReactivityEvents (100), reactivitySamplingRate (1.0)
  • Console: showTimestamp, showDuration, groupByComponent, colorize
  • UI: showWelcome

Security Features

  • XSS Prevention - All user-controlled strings escaped in visualizer
  • Memory Safety - WeakMaps allow garbage collection of unmounted components
  • No Sensitive Data - BroadcastChannel only transmits render events
  • Production Safety - Auto-disabled by default, manual override available

Documentation

  • README.md - Comprehensive user guide with quick start, features, and examples
  • ARCHITECTURE.md - Complete codebase structure and design patterns
  • OPTIONS_REFERENCE.md - Detailed configuration reference with 33+ options
  • COMPREHENSIVE_ANALYSIS.md - Technical deep dive and accuracy verification
  • UNDERSTANDING_UNNECESSARY_RENDERS.md - Conceptual guide for developers
  • CONTRIBUTING.md - Contribution guidelines and development setup
  • VERIFICATION_PROOF.md - Accuracy verification against real-world tests

Testing

  • 1030 Tests Passing - Comprehensive test suite (100% pass rate)
  • 99.7% Code Coverage - Extensively tested for reliability
  • Unit Tests - All pattern detectors individually tested
  • Integration Tests - Real-world component scenarios
  • Visualizer Tests - Canvas rendering, layout, spatial indexing
  • Edge Case Coverage - Rapid mount/unmount, memory management

🏗️ Technical Details

Bundle Size

  • ES Module entry: 0.87 KB (gzipped: 0.45 KB)
  • Core library: 173 KB (gzipped: 42 KB)
  • Visualizer (lazy-loaded): 70 KB (gzipped: 16 KB)
  • UMD bundle: 198 KB (gzipped: 52 KB)

Browser Support

  • Modern browsers with ES2015+ support
  • Vue 3.5.0 or higher required
  • BroadcastChannel API for cross-tab communication (optional)
  • Canvas API for visualizer

Performance Impact

  • Development: ~0.1-0.5ms overhead per render
  • Production: 0ms (auto-disabled)
  • Memory: ~50MB with default settings (1000 max records)

📚 Resources

🙏 Acknowledgments

  • Built for Vue 3.5+ with love ❤️
  • Inspired by React why did you render
  • Zero dependencies for maximum performance and compatibility
Assets 2
Loading