Hotwire Svelte Helpers

This is a demo app for the npm package @csedl/svelte-hotwire-helpers

Overlays

These helpers are primarily intended for creating overlays, such as dropdowns, modals and tooltips, using Stimulus or Svelte in a Hotwire/Rails environment.

The main goal is to provide the same helpers for building overlays with both Stimulus and Svelte.

Stimulus

The advantage of Stimulus is that it is fully integrated into classic Rails views. By a handy helper, a Stimulus dropdown requires less code in the view.

However, it has more limitations: The initial HTML state must be built on both the HTML/Rails and Stimulus sides. And, panels must be built from the server, regardless of whether the user clicks a button.

Svelte

Svelte is much more enjoyable when you need the kind of real reactivity that Hotwire can never provide.

Components are rendered with the svelte-on-rails gem.

Stimulus is mainly a initializer
Hotwired is a importand bridge for developing modern, backend-driven and backend-tested projects, but never a tool for building interactive frontent tools like svelte does
Svelte is a powerful and modern tool for building interactive components

Z-Index issues

When a dropdown panel should overlap all, it must be placed more on the root level.

When working with Stimulus we can use the content_for helpers to render a panel to a different place than the button is.

But When working with turbo-frames this doesnt work. Here, Svelte is much more flexible: The panel can be built on runtime and easy to develop because of Sveltes-html syntax.