Phoenix_typed_hook - better documentation and autocomplete for Phoenix LiveView client hooks

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

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

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.

Use JS Docs, check my PR:
https://github.com/phoenixframework/phoenix_live_view/pull/3022

Usage example:

/**
 * @type {import("phoenix_live_view").ViewHook}
 */
Hooks.InfiniteScroll = {
  page() { return this.el.dataset.page },
  mounted(){
    this.pending = this.page()
    window.addEventListener("scroll", e => {
      if(this.pending == this.page() && scrollAt() > 90){
        this.pending = this.page() + 1
        this.pushEvent("load-more", {})
      }
    })
  },
  updated(){ this.pending = this.page() }
}

image1200×685 43.8 KB