Phoenix_typed_hook - better documentation and autocomplete for Phoenix LiveView client hooks

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. :slight_smile:

It can be installed through Hex or NPM.

Hope you find it useful!

Links:

18 Likes

This is awesome! I see that you’ve released it as v0.18 as well, which is smart. Should make upgrades nice and easy!

One suggestion, if I may: I believe it should be possible to distribute this through Hex so that it can be added to your mix.exs dependencies. This would also make it very easy to remember to upgrade down the line. Here’s an example of a project that bundles some JS. It looks like the minified JS is included in the list of files in package. I don’t think there’s any particular reason that

1 Like

Nice suggestion! I’ve released it to Hex as well and updated the initial post. :slight_smile:

Note: when installing it through Hex, it’s still necessary to add it to package.json but pointing to the Hex-downloaded code inside deps, to make the code editor detect the typing to provide autocomplete.

1 Like