guisehn/phoenix_typed_hook

Write your Phoenix LiveView client hooks using typed classes

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.