Good way to bundle JS dependencies into a elixir library

Phoenix Forum Questions / Help
,
1

Consider this scenario: I’m creating a library that contains a phoenix component on it. That component requires a hook, and that hook imports some JS library to do its job.

What is the correct approach to make my Phoenix project (or esbuild for that matter), that has my library as a dependency, see that JS library correctly (let’s say the JS library is in deps/my_library/assets/node_modules/library)?

Esbuild will obviously find the path for the Phoenix project node_modules in assets/node_modules via the :cd in config, but it doesn’t know about my library path at all.

I guess I could generate a dist directory with the hooks + JS libraries already bundled with esbuild and push it to the library repo, but I’m not sure if that would be the best approach to solve this or if there is some corner cases.

1 Like
2

I’m not positive 100% on a correct approach, however I think you can use the approach liveview uses to serve the JS it requires to be up and running.

The way it does is by placing the JS files in priv folder.

Then you import them in your own project and you can use them directly from js.

2 Likes
3

Yeah, essentially you can make your mix project an npm project as well. You can then have your user lookup deps as a possible node_modules folder. That’s what phoenix does with it’s own project internal dependencies as well.

2 Likes
4

Thank you, that did it, I replicated the way liveview does for their JS stuff and it worked like a charm. I also added a package.json file to the root of the project like @LostKobrakai mentioned and now I can import the library the same way we do with lv (import {LiveSocket} from "phoenix_live_view") pretty neat!

2 Likes