[Proposal] 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.

[absowoot]

Could there be a separate CRUD for adding live components as well? It would be great to have the ability to add them without needing to restart the app.

[leandrocp]

Could there be a separate CRUD for adding live components as well? It would be great to have the ability to add them without needing to restart the app.

Hey @absowoot do you mean creating a https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html? That's possible although it's not on the roadmap yet. First we're getting functions components so you can define attrs, slots, etc to use on page template, ie: a component named my_header is available on the template as <.my_header attrs...> - the last task to get this done is the admin interface https://github.com/BeaconCMS/beacon_live_admin/pull/160

After getting that done we would have the foundation to work on LiveComponents too. Feel free to open an issue requesting support for LiveComponents so we can have it on the backlog.