svelte-preprocess-delegate-events

• Purpose: Solves the event delegation issue in Svelte by allowing components to forward all events using on:* syntax.
• Target Audience: Svelte 3 and Svelte 4 developers looking for a clean way to delegate events without performance overhead.
• Key Features:
  • Delegates all events with a simple on:* syntax.
  • No performance impact (only listens to events actually handled by parent components).
  • Compatible with svelte-check without type errors.
  • Works with both Elements and Components (using different underlying mechanisms).
• Svelte Support: Primarily designed for Svelte (3 & 4). Svelte 5 has native event forwarding, making this library unnecessary for Svelte 5 users.
• Example Use Case:

  <!-- Child.svelte -->
  <button on:*>Click Me</button>
  
  <!-- Parent.svelte -->
  <Child on:click={() => console.log('clicked!')} />
  

• How It Works:
  • For Elements: Binds elements and listens only to events registered in the parent's component.$$.callbacks.
  • For Components: Proxies callbacks to forward events from grandchild to parent components dynamically.
• Limitations:
  • Does not support directly specifying event handlers on on:* (e.g., on:*={handleEvent}).
• Documentation: Includes type support instructions for svelte-check via svelte-jsx.d.ts.
• Demo: Available on Stackblitz ↗.