The Events Extensions is used to extend event related functionalities of Mini.

Last updated at March 2, 2024 by Joeylene

IN THIS ARTICLE

Adding Custom Events

Mini allows extending custom events by using the extend method of EventsExtentions:

// lib/extensions/events-extensions.js
export class EventsExtensions {
  static USER_CUSTOM_EVENTS = {}

  ...

  extend(events) {
    EventsExtensions.USER_CUSTOM_EVENTS = {
      ...EventsExtensions.USER_CUSTOM_EVENTS,
      ...events,
    }
  }
}

Added events are tracked as the user’s custom events.

Mini exposes this functionality to the user by adding it to the MiniJS scope:

// lib/main.js
const MiniJS = (() => {
  ...
  return {
    ...
    extendEvents: (events) => {
      mini.extensions.events.extend(events)
    },
  }
}

Then under Events, it gets implemented:

// lib/events.js
static isValidEvent(event) {
  // user custom events are treated as valid events
  if (event in EventsExtensions.USER_CUSTOM_EVENTS) return true
  ...
}

// user custom events are automatically setup during entity.events.apply()
setEvent(attr) {
  ...

  const nativeEventName =
    attr in EventsExtensions.USER_CUSTOM_EVENTS
      ? EventsExtensions.USER_CUSTOM_EVENTS[attr]
      : attr.substring(1)

  this.listener[attr] = {
    el,
    eventName: nativeEventName,
    event: () => {
      this.evaluate(attr)
    },
  }
}

Using Custom Events

<script>
  MiniJS.extendEvents({ ':htmx:afteronload': 'htmx:afterOnLoad' })
</script>

<button
  :htmx:afteronload="console.log('custom event!', event)"
  :click="const event = document.createEvent('CustomEvent');
          event.initCustomEvent('htmx:afterOnLoad', true, true, { name: 'htmx:afterOnLoad' });
          this.dispatchEvent(event)"
>
  Click Me
</button>

The way it works is that when it comes to custom events, there are times where they are case sensitive. However, attributes in HTML are case insensitive, meaning there is no different between afterOnLoad and afteronload for HTML.

To work around this, we need to tell Mini that if it find an event called :htmx:afteronload, it would to use htmx:afterOnLoad instead as the event name.

<script>
  MiniJS.extendEvents({ ':htmx:afteronload': 'htmx:afterOnLoad' })
</script>