refactor: move SSE to devtools RPC

client/app/plugins/0.rpc.ts

@@ -0,0 +1,33 @@
+import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
+import type { HintsClientRpc, HintsServerRpc } from '../../../src/rpc-types'
+
+const RPC_NAMESPACE = 'hints'
+
+export default defineNuxtPlugin(() => {
+  if (import.meta.test) return
+
+  const nuxtApp = useNuxtApp()
+
+  onDevtoolsClientConnected((client) => {
+    client.devtools.extendClientRpc<HintsServerRpc, HintsClientRpc>(RPC_NAMESPACE, {
+      onHydrationMismatch(mismatch) {
+        nuxtApp.callHook('hints:rpc:hydration:mismatch', mismatch)
+      },
+      onHydrationCleared(ids) {
+        nuxtApp.callHook('hints:rpc:hydration:cleared', ids)
+      },
+      onLazyLoadReport(report) {
+        nuxtApp.callHook('hints:rpc:lazy-load:report', report)
+      },
+      onLazyLoadCleared(id) {
+        nuxtApp.callHook('hints:rpc:lazy-load:cleared', id)
+      },
+      onHtmlValidateReport(report) {
+        nuxtApp.callHook('hints:rpc:html-validate:report', report)
+      },
+      onHtmlValidateDeleted(id) {
+        nuxtApp.callHook('hints:rpc:html-validate:deleted', id)
+      },
+    })
+  })
+})

client/app/plugins/html-validate.ts

@@ -11,30 +11,15 @@ export default defineNuxtPlugin(() => {
     deep: true,
   })
 
-  function htmlValidateReportHandler(event: MessageEvent) {
-    try {
-      const payload: HtmlValidateReport = JSON.parse(event.data)
-      if (!htmlValidateReports.value.some(existing => existing.id === payload.id)) {
-        htmlValidateReports.value = [...htmlValidateReports.value, payload]
-      }
+  nuxtApp.hook('hints:rpc:html-validate:report', (report) => {
+    if (!htmlValidateReports.value.some(existing => existing.id === report.id)) {
+      htmlValidateReports.value = [...htmlValidateReports.value, report]
     }
-    catch {
-      console.warn('[hints] Ignoring malformed hints:html-validate:report event', event.data)
-    }
-  }
-
-  function htmlValidateDeletedHandler(event: MessageEvent) {
-    try {
-      const deletedId = JSON.parse(event.data)
-      htmlValidateReports.value = htmlValidateReports.value.filter(report => report.id !== deletedId)
-    }
-    catch {
-      console.warn('[hints] Ignoring malformed hints:html-validate:deleted event', event.data)
-    }
-  }
+  })
 
-  useEventListener(nuxtApp.$sse.eventSource, 'hints:html-validate:report', htmlValidateReportHandler)
-  useEventListener(nuxtApp.$sse.eventSource, 'hints:html-validate:deleted', htmlValidateDeletedHandler)
+  nuxtApp.hook('hints:rpc:html-validate:deleted', (deletedId) => {
+    htmlValidateReports.value = htmlValidateReports.value.filter(report => report.id !== deletedId)
+  })
 
   return {
     provide: {

client/app/plugins/hydration.ts

@@ -4,6 +4,7 @@ import { HYDRATION_ROUTE } from '../utils/routes'
 
 export default defineNuxtPlugin(() => {
   if (import.meta.test || !useHintsFeature('hydration')) return
+
   const host = useHostNuxt()
   const nuxtApp = useNuxtApp()
   const hydrationMismatches = ref<(HydrationMismatchPayload | LocalHydrationMismatch)[]>([])
@@ -14,29 +15,14 @@ export default defineNuxtPlugin(() => {
     hydrationMismatches.value = [...hydrationMismatches.value, ...data.mismatches.filter(m => !hydrationMismatches.value.some(existing => existing.id === m.id))]
   })
 
-  const hydrationMismatchHandler = (event: MessageEvent) => {
-    const mismatch: HydrationMismatchPayload = JSON.parse(event.data)
+  nuxtApp.hook('hints:rpc:hydration:mismatch', (mismatch) => {
     if (!hydrationMismatches.value.some(existing => existing.id === mismatch.id)) {
       hydrationMismatches.value.push(mismatch)
     }
-  }
+  })
 
-  const hydrationClearedHandler = (event: MessageEvent) => {
-    const clearedIds: string[] = JSON.parse(event.data)
+  nuxtApp.hook('hints:rpc:hydration:cleared', (clearedIds) => {
     hydrationMismatches.value = hydrationMismatches.value.filter(m => !clearedIds.includes(m.id))
-  }
-
-  watch(nuxtApp.$sse.eventSource, (newEventSource, oldEventSource) => {
-    if (newEventSource) {
-      newEventSource.addEventListener('hints:hydration:mismatch', hydrationMismatchHandler)
-      newEventSource.addEventListener('hints:hydration:cleared', hydrationClearedHandler)
-    }
-    if (oldEventSource) {
-      oldEventSource.removeEventListener('hints:hydration:mismatch', hydrationMismatchHandler)
-      oldEventSource.removeEventListener('hints:hydration:cleared', hydrationClearedHandler)
-    }
-  }, {
-    immediate: true,
   })
 
   return {

client/app/plugins/lazy-load.ts

@@ -13,40 +13,20 @@ export default defineNuxtPlugin(() => {
     deep: true,
   })
 
-  const lazyLoadReportHandler = (event: MessageEvent) => {
+  nuxtApp.hook('hints:rpc:lazy-load:report', (report) => {
     try {
-      const payload = parse(ComponentLazyLoadDataSchema, JSON.parse(event.data))
+      const payload = parse(ComponentLazyLoadDataSchema, report)
       if (!lazyLoadHints.value.some(existing => existing.id === payload.id)) {
         lazyLoadHints.value.push(payload)
       }
     }
     catch {
-      console.warn('[hints] Ignoring malformed hints:lazy-load:report event', event.data)
-      return
+      console.warn('[hints] Ignoring malformed hints:lazy-load:report event')
     }
-  }
-
-  const lazyLoadClearedHandler = (event: MessageEvent) => {
-    try {
-      const clearedId = JSON.parse(event.data)
-      lazyLoadHints.value = lazyLoadHints.value.filter(entry => entry.id !== clearedId)
-    }
-    catch {
-      return
-    }
-  }
+  })
 
-  watch(nuxtApp.$sse.eventSource, (newEventSource, oldEventSource) => {
-    if (newEventSource) {
-      newEventSource.addEventListener('hints:lazy-load:report', lazyLoadReportHandler)
-      newEventSource.addEventListener('hints:lazy-load:cleared', lazyLoadClearedHandler)
-    }
-    if (oldEventSource) {
-      oldEventSource.removeEventListener('hints:lazy-load:report', lazyLoadReportHandler)
-      oldEventSource.removeEventListener('hints:lazy-load:cleared', lazyLoadClearedHandler)
-    }
-  }, {
-    immediate: true,
+  nuxtApp.hook('hints:rpc:lazy-load:cleared', (clearedId) => {
+    lazyLoadHints.value = lazyLoadHints.value.filter(entry => entry.id !== clearedId)
   })
 
   return {

client/app/utils/routes.ts

@@ -5,7 +5,6 @@
  */
 
 export const HINTS_ROUTE = '/__nuxt_hints'
-export const HINTS_SSE_ROUTE = '/__nuxt_hints/sse'
 export const HYDRATION_ROUTE = `${HINTS_ROUTE}/hydration`
 export const LAZY_LOAD_ROUTE = `${HINTS_ROUTE}/lazy-load`
 export const HTML_VALIDATE_ROUTE = `${HINTS_ROUTE}/html-validate`