Discovery - Harmonium/Elixir interactive components

[achord]

Background

The purpose of this discovery ticket is to decide on a path forward concerning: Should Elixir apps use Harmonium JS components ?

While working on a Global Impact PR the dev team had a discussion with @Dacello about using interactive Harmonium components which currently use javascript:

• Flash
• Accordian
• Modal
• Tabs
• Drawer
• Slider
• ExpandingColumn

Challenges

JS and LiveView don't play well together

• There is an issue when using JS with LiveView. JS is initialize first, then LiveView re-renders the view without the JS. While we can tell Phoenix to ignore certain JS, we're wondering if there's a better way.

We should probably use LiveView over JS

• If so, we will have to create LiveView components specifically for Harmonium/Elixir
• We could also use: Alpine, Tailwind, or Surface

Importing Harmonium JS into an Elixir app

• If we decide to take this route, we would likely need to fix Harmonium first. We could import the vanilla js file from node_modules but there are some issues which are failing in Travis.

[achord]

@nschello @Dacello Maybe we can talk about this at the next Engineering meeting. ?

[grossvogel]

I think LiveView is the right way, we'd just need to spend the time to make the components. I played the phoenix recently generator with LiveView wired up out of the box, and it has a Modal component built in, even

[Dacello]

Yea, agreed that liveview is the right way and it will take some time to make the components. Would also like to look into Alpine/Tailwind/Surface

[CrystalJewell]

Has anyone looked into Javascript Interoperability with Liveview? Specifically, Client Hooks?

The project I worked on before here we used quite a few vanilla JS files with LiveView, but it did require us to use PubSub to interact with said JS. I could try to whip up an example of how I did it then. There have probably been some updates to how it works since then though so it might take me a little time to work through those changes.