The combination of Elixir typespecs with @doc allows Phoenix to provide great documentation and autocompletion inside the code editor. But I missed the same level of good experience when playing with LiveView client hooks via phx-hook.

Since LiveView hooks are defined as plain JS objects, there is no way for code editors to provide documentation and autocomplete around attributes and callbacks available, nor compile-time checks (this last one, when TypeScript is used in the project).

To solve that, I created a tiny library called phoenix_typed_hook, that allows you to define a LiveView client hook by extending a base typed Hook class. By using it, editors like VS Code will provide all those documentation and autocomplete features automatically. And there is no need to use TypeScript in the project to take advantage of it, if it’s not your thing.

One GIF says more than a thousand words.

It can be installed through Hex or NPM.

Hope you find it useful!

Links:

• GitHub repo: GitHub - guisehn/phoenix_typed_hook: Write your Phoenix LiveView client hooks using typed classes
• Hex docs: Phoenix Typed Hook — Phoenix Typed Hook v0.18.1