From 1bef55513ee2e17414525d53e63d7094614e7926 Mon Sep 17 00:00:00 2001
From: Rodolfo Silva <contato@rodolfosilva.com>
Date: Sat, 21 Oct 2023 10:19:35 -0300
Subject: [PATCH] add jsDocs for hook examples

---
 guides/client/js-interop.md | 9 +++++++++
 lib/phoenix_live_view.ex    | 3 +++
 2 files changed, 12 insertions(+)

diff --git a/guides/client/js-interop.md b/guides/client/js-interop.md
index de2a2afcb..b95623acd 100644
--- a/guides/client/js-interop.md
+++ b/guides/client/js-interop.md
@@ -223,6 +223,9 @@ like this:
 Then a hook callback object could be defined and passed to the socket:
 
 ```javascript
+/**
+ * @type {Object.<string, import("phoenix_live_view").ViewHook>}
+ */
 let Hooks = {}
 Hooks.PhoneNumber = {
   mounted() {
@@ -281,6 +284,9 @@ For example, to implement infinite scrolling, one can pass the current page usin
 And then in the client:
 
 ```javascript
+/**
+ * @type {import("phoenix_live_view").ViewHook}
+ */
 Hooks.InfiniteScroll = {
   page() { return this.el.dataset.page },
   mounted(){
@@ -304,6 +310,9 @@ However, the data attribute approach is not a good approach if you need to frequ
 And then on the client:
 
 ```javascript
+/**
+ * @type {import("phoenix_live_view").ViewHook}
+ */
 Hooks.Chart = {
   mounted(){
     this.handleEvent("points", ({points}) => MyChartLib.addPoints(points))
diff --git a/lib/phoenix_live_view.ex b/lib/phoenix_live_view.ex
index b0bf620a9..85f5c20b4 100644
--- a/lib/phoenix_live_view.ex
+++ b/lib/phoenix_live_view.ex
@@ -1667,6 +1667,9 @@ defmodule Phoenix.LiveView do
   Replying to a client event:
 
       # JavaScript:
+      # /**
+      #  * @type {Object.<string, import("phoenix_live_view").ViewHook>}
+      #  */
       # let Hooks = {}
       # Hooks.ClientHook = {
       #   mounted() {