slim Svelte Themes

Slim

A lightweight event management library for Svelte.

🪶 slim — Simple Event Management for Svelte

slim is a lightweight, modular, and easy-to-use event management library for Svelte that allows you to register and dispatch custom events using a global bus mechanism.


šŸš€ Features

  • āœ… Register custom events with a useEvents() API
  • āœ… Optional stopPropagation for scoped event control
  • āœ… TypeScript + JavaScript compatible
  • āœ… Supports async event handlers
  • āœ… Works with all Svelte versions (v3 and up)

šŸ“¦ Installation

npm install svelte-slim

⚔ Quick Start

<script>
  import { useEvents, dispatch } from 'slim';

  // Register an event
  onMount(() => {
    useEvents({
      ['ALERT']: (payload) => {
        alert(payload.message);
      },
      stopPropagation: true
    });
  })

  function sendEvent() {
    dispatch('ALERT', { message: 'Hello World!' });
  }
</script>

<button on:click={sendEvent}>Send Event</button>

šŸ“š API Reference

useEvents(events: Record<string, EventConfig>): () => void

Registers multiple event handlers and returns a cleanup function to unregister them.

  • Parameters:

    events: An object where keys are event names and values are EventConfig objects.

  • Returns:

    A cleanup function to unregister all event handlers when called.

  • Example:

    import { useEvents } from 'slim';
    
    useEvents({
      ['LOG_MESSAGE']: {
        handler: (payload) => {
          console.log('Received:', payload);
        },
        stopPropagation: true, // Optional, default value is false
      },
      ['LOAD_DATA']: {
        handler: async (payload) => {
          await fetch('/api/log', {
            method: 'POST',
            body: JSON.stringify(payload),
          });
          console.log('Logged data:', payload);
        }
      },
    });
    

dispatch(event: string, ...args: any[]): Promise<void>

Dispatches an event asynchronously to all registered handlers.

  • Parameters:

    event: The name of the event to dispatch.

    ...args: Any arguments to pass to event handlers.

  • Returns:

    A Promise that resolves when all event handlers have been invoked.

  • Example:

    import { dispatch } from 'slim';
    
    dispatch('my-event', { message: 'Hello, world!' });
    

šŸŽÆ Why Use slim?

Traditional event handling in Svelte often requires passing callbacks or using external stores. slim simplifies event management by providing a dedicated, global event bus that keeps your components decoupled and scalable.

šŸ¤ Contributing

Contributions, issues, and feature requests are welcome!

šŸ“„ License

This project is licensed under the MIT License.

Top categories

Loading Svelte Themes