Skip to content

v1.6.0 AbortController & Smart Target Resolution

Choose a tag to compare

@eypsilon eypsilon released this 06 Aug 02:13
· 37 commits to main since this release

πŸš€ YpsilonEventHandler v1.6.0: Revolutionary Event Handling

✨ Major New Features

πŸŽ›οΈ AbortController Support

  • Modern event listener cancellation with abortController: true configuration
  • Automatic signal assignment to all event listeners for efficient cleanup
  • Perfect fallback to manual removal when AbortController is not available
  • Zero performance overhead when disabled

🎯 Smart Target Resolution

  • Solves the infamous SVG-in-button clicking problem with autoTargetResolution: true
  • Intelligent DOM traversal to find actionable parent elements
  • Handles nested elements like SVG icons, paths, and complex UI components
  • Only activates on configured event types for optimal performance

πŸ’Ύ Enhanced SPA Demo

  • Advanced localStorage persistence for todo items
  • Smart counter preservation during handler destroy/recreate cycles
  • Real-time configuration toggles without page refresh
  • Interactive testing of all library features
  • SPA Demo

🧠 Live Feature Toggles

  • Dynamic configuration switching in the SPA demo
  • Toggle smart target resolution on/off in real-time
  • Demonstrates handler recreation with preserved application state
  • Perfect for testing and understanding feature impact

πŸ”§ Technical Improvements

  • Complete TypeScript definitions for all new features
  • Updated all CDN references to v1.6.0 across examples
  • Comprehensive documentation with practical configuration examples
  • Perfect backward compatibility - no breaking changes
  • Enhanced error handling with better edge case coverage

🎯 Performance Impact

  • Zero performance overhead when features are disabled
  • Native AbortController efficiency when available in modern browsers
  • Optimized DOM traversal with proper boundary checking
  • Smart target resolution only processes configured event types

πŸ“š What's Included

  • πŸŽͺ 30 Interactive Examples demonstrating every feature
  • πŸ“– Complete Documentation with configuration guides
  • πŸ—οΈ TypeScript Support for enterprise development
  • 🌐 IE11+ Compatibility for maximum browser support
  • ⚑ Zero Dependencies - just native browser APIs

🌟 Why This Release Matters

This release establishes YpsilonEventHandler as the definitive solution for enterprise-grade event delegation. The combination of AbortController support and smart target resolution solves two of the most common pain points in modern web development:

  1. Memory leak prevention with efficient event cleanup
  2. Nested element handling for complex UI components

πŸš€ Get Started

npm install ypsilon-event-handler@1.6.4
<script src="https://cdn.jsdelivr.net/npm/ypsilon-event-handler@1.6.4/ypsilon-event-handler.min.js"></script>
class MyHandler extends YpsilonEventHandler {
  constructor() {
    super({
      'body': ['click']
    }, {}, {
      abortController: true,        // Modern cleanup
      autoTargetResolution: true,   // Handle nested elements
      enableStats: true             // Performance tracking
    });
  }
}

new MyHandler(); // Revolutionary event handling activated!

Live Examples: https://eypsilon.github.io/YpsilonEventHandler/example/public/
Documentation: https://github.com/eypsilon/YpsilonEventHandler#readme
NPM Package: https://www.npmjs.com/package/ypsilon-event-handler