Shared Event Handlers

[leandrocp]

A common scenario that's not yet handled fully by Beacon is handling events emitted by components. Suppose a newsletter_form component that renders a form with phx-submit="signup", that signup event will be handled by an event handler defined in the Page, that works and is the current approach we have.

But it becomes cumbersome when that component is called in a layout because now all pages using that layout must create the same event handler over and over again, duplicating data and effort to manage that event.

layouts:
  - newsletter_form component
  pages:
    - page a
      - event_handler signup
    - page b
      - event_handler signup

See how the event_handler signup gets duplicated.

The proposal is to introduce a (Event Handlers* resource in the Content API and also on the Admin interface to manage shared events so whenever an event is called, it will be fetched by name and executed, globally on the site.

Tasks

• [ ] Create beacon_event_handlers table and schema
• [ ] Create CRUD functions in Beacon.Content that will be called from BeaconLiveAdmin
• [ ] Create the Event Handlers page in the admin interface
• [ ] Migrate existing Page's event handler to the shared table
• [ ] Remove Page event handlers from the admin interface
• [ ] Remove the event handler attribute/field on the Page schema and Beacon.Content

FAQ

• Why not LiveComponents?

• Some pages may actually share the same event but not use components, so we'd need to duplicate event handlers anyway.
• The LiveComponent model is more complex than function components that we already support which would require changes to the existing approach too.