Creating a Package With Hooks

Phoenix Forum Questions / Help
, ,
3

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:

  1. 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
  2. Configure esbuild to build your JS files. live_motion/config.exs at main · benvp/live_motion · GitHub
  3. Define a build task in the mix.exs file for building the assets. live_motion/mix.exs at main · benvp/live_motion · GitHub
  4. Include the built assets in the repository and define a package.json in the root of your project. In that you define the module and main keys which point to your JS file. That’s so that can be imported from the other project via the file path in deps folder. You can see the instructions in the README

Hope that helps.

3 Likes