phoenix_typed_hook
v0.18.2
Published
Write your Phoenix LiveView client hooks using typed classes
Downloads
1,552
Readme
Phoenix Typed Hook
Write your Phoenix LiveView client hooks using typed classes, with or without TypeScript.
See autocomplete available in VS Code by using it:
Reasoning
Custom LiveView client hooks are defined as plain objects implementing callbacks such as mounted
, updated
, etc.
Since they're plain objects, there is no typing involved, so code editors can't provide code completion for attributes available, and also can't do compile-time checks (this last one, when TypeScript is used).
This package allows those features, by introducing a typed base hook class you can extend from, and a function to convert this class to a format that Phoenix LiveView understands.
How to use
Once installed, define your hook as a class that extends Hook
, and convert it using makeHook
:
import { Hook, makeHook } from "phoenix_typed_hook";
class MyHook extends Hook {
mounted() {
this.el.style.color = "red";
this.handleEvent("foo", (payload) => {});
}
}
export default makeHook(MyHook);
Then, pass the hook as usual to the LiveSocket
constructor options.
import MyHook from "./hooks/my_hook";
const hooks = { MyHook };
const liveSocket = new LiveSocket("/live", Socket, { hooks, ... });
Installation
Phoenix Typed Hook can be installed via NPM or Mix.
Installing with NPM
In your project directory, go to the assets folder (cd assets
) and run npm install phoenix_typed_hook --save
Installing with Hex
Using Hex to install Phoenix Typed Hook requires more steps compared to NPM, but allows you to manage its version on mix.exs
, closer to where the Phoenix LiveView version is also declared. This makes it easier to remember to upgrade them together.
Add phoenix_typed_hook
to the list of dependencies in mix.exs
:
def deps do
[
{:phoenix_typed_hook, "~> 0.18.2"}
]
end
And run mix deps.get
.
After that, open assets/package.json
of your project (create it if it doesn't exist), and add phoenix_typed_hook
to the list of dependencies:
{
"dependencies": {
"phoenix_typed_hook": "file:../deps/phoenix_typed_hook"
}
}
And run npm install
inside the assets
folder.