@zachallaun and @LostKobrakai already hinted at this, but I just wanted to spell it out:

It’s actually relatively easy, and you just need to look at phoenix_live_view itself. LiveView needs a JS file to work. So how is it included in your app?

The hex package doubles as npm package by including a package.json that contains the location of the js file, so you can just do import {LiveSocket} from "phoenix_live_view" in the root file of your JS bundle. You can do that because the standard builder is esbuild, which will use your deps folder as the base folder for all dependencies (but will also look into assets so you can add stuff there as well). Things become slightly more complicated if you depart from the esbuild-based process and want to use something like Webpack: in that case you’ll need to add the hex packages as “path dependencies” in your package.json file, as explained here. What sucks about this latter approach is that you have to run a npm install --force after every update of your hex package to get the latest JS into your assets folder.

In LiveSelect I’m simply copying this simple idea , and this is the best way (that I know of) for a 3rd party library to include its JS dependencies.

On the other hand, what I find really problematic is when my library wants to include some custom CSS. Currently there is no easy and portable way to do it, AFAIK. Esbuild can output css, but some folks (like me) only use tailwind-cli and that would require the user to generate and add a second css file.

While it’s been great to see LiveView adopt some of Surface’s goodies, there’s still more:

• both scoped JS and scoped CSS
• css_variant option on component props to auto-generate CSS class (i.e. tailwind) variants based on prop values
• contexts are huge for making certain assigns (eg current_user) available without needed to explicitly pass them to every child component
• Dynamic.Component and Dynamic.LiveComponent for including components with a dynamic name (eg. configurable widgets)
• MacroComponent for creating specific components that are rendered at compile time (eg. to process static content like markdown, SVG icons, etc only once)

You can bundle JS with a mix project. Here’s a great project to use as an example: GitHub - maxmarcon/live_select: Dynamic (multi)selection field for LiveView · GitHub

Edit to add: the user does have to include this somehow in their own JS bundle and then export the required hooks, but that’s usually like ~2 lines. See here.