@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.






















