JS/CSS Assets in Phoenix Library?

[AndyL]

I’m working on a Phoenix library and it would be handy to inject custom CSS/JS assets into the parent app. In particular, I’d like to add a few window.addEventListeners to the parent app.js. Not sure how to do this & have not been able to find any examples or documentation. Is this possible, or should I fall back to manual install instructions in the README? Any links/tips/ideas appreciated.

[evadne]

Best is not to do this as any way you do it would pollute global state. Instead, expose something that the developer can call to initialise.

[al2o3cr]

The default esbuild configuration adds the entire deps directory as an additional source of Node modules:

phoenixframework/phoenix/blob/4fbf3700314882484642ae91b7fbdae04524207e/installer/templates/phx_single/config/config.exs#L32-L39

So users can load your package with import "your_package_name" if there’s a package.json at the root level; for instance, look at phoenix_html.

[benlime]

I recommended this in a similar thread some time ago. You should add expose functions and provide clear instructions how to add custom JS from your library.

Creating a Package With Hooks

As your user is a developer, there’s no issue in having them top modify the JavaScript code to add a reference to your library. To make this as simple as possible, I followed the approach from Phoenix LiveView and extended it for LiveMotion with a JS library a user can import. It does look something like this: From your JS, export a function to create your hooks (optionally taking some options or so - as Eiji said). live_motion/live_motion.ts at main · benvp/live_motion · GitHub Configure es…

[AndyL]

Thanks everyone - super great input! Any other ideas or suggestions are welcome.