|
| 1 | +# Changelog |
| 2 | + |
| 3 | +All notable changes to this project will be documented in this file. |
| 4 | + |
| 5 | +The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), |
| 6 | +and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). |
| 7 | + |
| 8 | +## [1.0.0] - 2025-10-31 |
| 9 | + |
| 10 | +### 🎉 Initial Release |
| 11 | + |
| 12 | +First stable release of Vue Render Inspector - Advanced render profiler and debugger for Vue 3.5+ applications. |
| 13 | + |
| 14 | +### ✨ Added |
| 15 | + |
| 16 | +#### Core Features |
| 17 | +- **Automatic Render Tracking** - Monitor all component renders without manual instrumentation |
| 18 | +- **Unnecessary Render Detection** - Identify components that re-render without actual data changes |
| 19 | +- **Performance Analysis** - Microsecond-precision timing with configurable thresholds |
| 20 | +- **Reactivity Tracking** - Visualize Vue's reactivity system with renderTracked/renderTriggered hooks |
| 21 | +- **Render Storm Detection** - Identify components caught in rapid re-render loops (>5 renders/second) |
| 22 | +- **Component Recreation Detection** - Find components being destroyed and recreated unnecessarily |
| 23 | +- **Cross-Tab Communication** - Visualize renders across multiple browser windows via BroadcastChannel API |
| 24 | +- **Memory Safe Implementation** - WeakMap-based tracking prevents memory leaks |
| 25 | + |
| 26 | +#### Pattern Detection System (11 Patterns) |
| 27 | +1. **Deep Reactivity Misuse** - Detects large objects (>50 properties) with unnecessary deep reactivity |
| 28 | +2. **Watcher Misuse** - Identifies watchers that should be computed properties (derived state pattern) |
| 29 | +3. **Large List No Virtualization** - Flags lists >100 items without virtual scrolling |
| 30 | +4. **Template Method Calls** - Finds method calls in templates that should be computed properties |
| 31 | +5. **Array Mutations** - Detects direct array mutations that may break reactivity |
| 32 | +6. **Missing v-memo** - Identifies expensive list items that would benefit from v-memo optimization |
| 33 | +7. **Array Index as Key** - Warns about using array index as v-for :key |
| 34 | +8. **Computed No Dependencies** - Finds computed properties that don't access reactive dependencies |
| 35 | +9. **Deep Watchers** - Detects expensive deep watchers on large objects |
| 36 | +10. **Event Listener Leaks** - Identifies missing cleanup in lifecycle hooks |
| 37 | +11. **Inline Object Creation** - Finds inline objects/functions in props causing unnecessary child re-renders |
| 38 | + |
| 39 | +#### Interactive Visualizer |
| 40 | +- **Real-time Component Tree** - Interactive canvas-based visualization |
| 41 | +- **Performance Heatmap** - Color-coded nodes (green <16ms, yellow 16-100ms, red >100ms) |
| 42 | +- **Inspector Panel** - Detailed component analysis on click |
| 43 | + - Total renders & unnecessary renders with percentages |
| 44 | + - Performance metrics (avg/slowest/fastest render times) |
| 45 | + - Detected bottlenecks with severity scores |
| 46 | + - Render history with timestamps and reasons |
| 47 | + - Props/state diff tracking |
| 48 | + - Reactivity event correlation |
| 49 | + - User event correlation |
| 50 | + - Component context (parent chain, depth, children) |
| 51 | +- **Viewport Culling** - Only renders visible nodes for performance |
| 52 | +- **Level of Detail (LOD)** - Simplifies distant nodes |
| 53 | +- **Quadtree Spatial Indexing** - O(log n) mouse hit detection |
| 54 | +- **Notification System** - Real-time render notifications with auto-dismiss |
| 55 | + |
| 56 | +#### Console API |
| 57 | +- `__VUE_RENDER_INSPECTOR__.summary()` - Show render summary |
| 58 | +- `__VUE_RENDER_INSPECTOR__.top(n)` - Show top N components with most unnecessary renders |
| 59 | +- `__VUE_RENDER_INSPECTOR__.slow(n)` - Show N slowest components |
| 60 | +- `__VUE_RENDER_INSPECTOR__.visualizer()` - Open interactive visualizer |
| 61 | +- `__VUE_RENDER_INSPECTOR__.panel()` - Toggle inspector panel |
| 62 | +- `__VUE_RENDER_INSPECTOR__.clear()` - Clear all data |
| 63 | +- `__VUE_RENDER_INSPECTOR__.help()` - Show help |
| 64 | + |
| 65 | +#### Developer Experience |
| 66 | +- **Zero-config Installation** - Works out of the box with sensible defaults |
| 67 | +- **Vue Plugin Integration** - Simple `app.use(VueRenderInspector)` |
| 68 | +- **Flexible Configuration** - 33+ configurable options for advanced use cases |
| 69 | +- **Auto-disable in Production** - Automatically disabled when `NODE_ENV === 'production'` |
| 70 | +- **Zero Dependencies** - No external runtime dependencies |
| 71 | + |
| 72 | +#### Configuration Options |
| 73 | +- Core: `enabled`, `console`, `verbose` |
| 74 | +- Filtering: `include`, `exclude` (string/regex patterns) |
| 75 | +- Performance: `warnThreshold` (16ms), `errorThreshold` (100ms) |
| 76 | +- Detection: `detectUnnecessary`, `strictMode`, `trackDependencies` |
| 77 | +- Memory: `maxRecords` (1000), `maxHistorySize` (50), `memoryCleanupInterval` (30s) |
| 78 | +- Storm: `stormWindow` (1000ms), `stormThreshold` (5 renders) |
| 79 | +- Recreation: `recreationWindow` (100ms) |
| 80 | +- Events: `trackEvents`, `eventContextTimeout` (500ms), `debugEvents` |
| 81 | +- Reactivity: `trackReactivity`, `maxReactivityEvents` (100), `reactivitySamplingRate` (1.0) |
| 82 | +- Console: `showTimestamp`, `showDuration`, `groupByComponent`, `colorize` |
| 83 | +- UI: `showWelcome` |
| 84 | + |
| 85 | +#### Security Features |
| 86 | +- **XSS Prevention** - All user-controlled strings escaped in visualizer |
| 87 | +- **Memory Safety** - WeakMaps allow garbage collection of unmounted components |
| 88 | +- **No Sensitive Data** - BroadcastChannel only transmits render events |
| 89 | +- **Production Safety** - Auto-disabled by default, manual override available |
| 90 | + |
| 91 | +#### Documentation |
| 92 | +- **README.md** - Comprehensive user guide with quick start, features, and examples |
| 93 | +- **ARCHITECTURE.md** - Complete codebase structure and design patterns |
| 94 | +- **OPTIONS_REFERENCE.md** - Detailed configuration reference with 33+ options |
| 95 | +- **COMPREHENSIVE_ANALYSIS.md** - Technical deep dive and accuracy verification |
| 96 | +- **UNDERSTANDING_UNNECESSARY_RENDERS.md** - Conceptual guide for developers |
| 97 | +- **CONTRIBUTING.md** - Contribution guidelines and development setup |
| 98 | +- **VERIFICATION_PROOF.md** - Accuracy verification against real-world tests |
| 99 | + |
| 100 | +#### Testing |
| 101 | +- **1030 Tests Passing** - Comprehensive test suite (100% pass rate) |
| 102 | +- **99.7% Code Coverage** - Extensively tested for reliability |
| 103 | +- **Unit Tests** - All pattern detectors individually tested |
| 104 | +- **Integration Tests** - Real-world component scenarios |
| 105 | +- **Visualizer Tests** - Canvas rendering, layout, spatial indexing |
| 106 | +- **Edge Case Coverage** - Rapid mount/unmount, memory management |
| 107 | + |
| 108 | +### 🏗️ Technical Details |
| 109 | + |
| 110 | +#### Bundle Size |
| 111 | +- ES Module entry: 0.87 KB (gzipped: 0.45 KB) |
| 112 | +- Core library: 173 KB (gzipped: 42 KB) |
| 113 | +- Visualizer (lazy-loaded): 70 KB (gzipped: 16 KB) |
| 114 | +- UMD bundle: 198 KB (gzipped: 52 KB) |
| 115 | + |
| 116 | +#### Browser Support |
| 117 | +- Modern browsers with ES2015+ support |
| 118 | +- Vue 3.5.0 or higher required |
| 119 | +- BroadcastChannel API for cross-tab communication (optional) |
| 120 | +- Canvas API for visualizer |
| 121 | + |
| 122 | +#### Performance Impact |
| 123 | +- **Development:** ~0.1-0.5ms overhead per render |
| 124 | +- **Production:** 0ms (auto-disabled) |
| 125 | +- **Memory:** ~50MB with default settings (1000 max records) |
| 126 | + |
| 127 | +### 📚 Resources |
| 128 | + |
| 129 | +- **GitHub Repository:** https://github.com/damianidczak/vue-render-inspector |
| 130 | +- **NPM Package:** https://www.npmjs.com/package/vue-render-inspector |
| 131 | +- **Issues:** https://github.com/damianidczak/vue-render-inspector/issues |
| 132 | + |
| 133 | +### 🙏 Acknowledgments |
| 134 | + |
| 135 | +- Built for Vue 3.5+ with love ❤️ |
| 136 | +- Inspired by [React why did you render](https://github.com/welldone-software/why-did-you-render) |
| 137 | +- Zero dependencies for maximum performance and compatibility |
| 138 | + |
| 139 | +--- |
| 140 | + |
| 141 | +## [Unreleased] |
| 142 | + |
| 143 | +### Planned Features |
| 144 | +- [ ] Performance regression detection |
| 145 | +- [ ] Baseline comparison mode |
| 146 | +- [ ] Enhanced AST analysis for watchers |
| 147 | +- [ ] SSR-specific pattern detection |
| 148 | +- [ ] VS Code extension for one-click fixes |
| 149 | +- [ ] Chrome DevTools integration |
| 150 | + |
| 151 | +--- |
| 152 | + |
| 153 | +**Legend:** |
| 154 | +- 🎉 Major release |
| 155 | +- ✨ New features |
| 156 | +- 🐛 Bug fixes |
| 157 | +- 🔒 Security fixes |
| 158 | +- 📚 Documentation |
| 159 | +- ⚡ Performance improvements |
| 160 | +- 🔧 Configuration changes |
| 161 | +- ⚠️ Deprecations |
| 162 | +- 💥 Breaking changes |
0 commit comments