feat: add hook for karbon client

packages/karbon/package.json

@@ -116,6 +116,7 @@
     "@nuxt/devalue": "^2.0.2",
     "@nuxt/image": "^1.0.0-rc.1",
     "@nuxt/kit": "^3.6.3",
+    "@nuxt/schema": "^3.6.5",
     "@nuxtjs/html-validator": "^1.5.1",
     "@sentry/node": "^7.58.1",
     "@sentry/tracing": "^7.58.1",
@@ -141,6 +142,7 @@
     "find-cache-dir": "^4.0.0",
     "fs-extra": "^11.1.1",
     "graphql": "^16.7.1",
+    "hookable": "^5.5.3",
     "js-yaml": "^4.1.0",
     "jszip": "^3.10.1",
     "knitwork": "^1.0.0",
@@ -191,7 +193,6 @@
     "@nuxt/eslint-config": "0.1.1",
     "@nuxt/kit": "3.6.5",
     "@nuxt/module-builder": "0.4.0",
-    "@nuxt/schema": "3.6.5",
     "@nuxt/test-utils": "3.6.5",
     "@nuxtjs/tailwindcss": "6.8.0",
     "@types/find-cache-dir": "3.2.1",
@@ -224,4 +225,4 @@
     "access": "public"
   },
   "gitHead": "8df1f4d5837a7e2ddbff6cc79f5fec256c34a394"
-}
+}

packages/karbon/src/internal.ts

@@ -5,6 +5,7 @@ export {
   createStoripressBaseClient,
   storipressConfigCtx,
   createTenantURL,
+  _karbonClientHooks as clientHooks,
 } from './runtime/composables/storipress-base-client'
 export { definePayloadHandler } from './runtime/routes/payload-handler'
 export { getSite } from './runtime/api/site'

packages/karbon/src/module.ts

@@ -7,6 +7,7 @@ import {
   addPlugin,
   addPrerenderRoutes,
   addServerHandler,
+  addServerPlugin,
   addTemplate,
   createResolver,
   defineNuxtModule,
@@ -21,7 +22,7 @@ import serialize from 'serialize-javascript'
 import fs from 'fs-extra'
 import { resolve } from 'pathe'
 import { genArrayFromRaw, genImport, genObjectFromRaw } from 'knitwork'
-import type { NuxtPlugin } from '@nuxt/schema'
+import type { HookResult, NuxtPlugin } from '@nuxt/schema'
 import { resolveSEOProviders } from './seo-provider'
 import { versionSafe } from './cli/checkFile'
 import type {
@@ -41,6 +42,21 @@ import { getResources, payloadScopes } from './runtime/api/sitemap'
 import telemetry from './modules/telemetry'
 import feed from './modules/feed'
 import instantsearch from './modules/instantsearch'
+import type { RequestContext, ResponseContext } from './runtime/composables/storipress-base-client'
+
+declare module '#app' {
+  interface RuntimeNuxtHooks {
+    'karbon:request': (ctx: RequestContext) => HookResult
+    'karbon:response': (ctx: ResponseContext) => HookResult
+  }
+}
+
+declare module 'nitropack' {
+  interface NitroRuntimeHooks {
+    'karbon:request': (ctx: RequestContext) => void
+    'karbon:response': (ctx: ResponseContext) => void
+  }
+}
 
 const AD_COMPONENTS = ['AdvertisingProvider', 'AdvertisingSlot', 'GlobalAdvertisingProvider', 'GlobalAdvertisingSlot']
 
@@ -446,6 +462,7 @@ const karbon = defineNuxtModule<ModuleOptions>({
       './runtime/plugins/debug-info.client',
       './runtime/plugins/track.client',
       './runtime/plugins/iframely.client',
+      './runtime/plugins/client-hooks',
       './runtime/plugins/1.injectRuntimeConfig',
     ]
 
@@ -465,6 +482,8 @@ const karbon = defineNuxtModule<ModuleOptions>({
       )
     }
 
+    addServerPlugin(resolver.resolve('./runtime/server/plugins/hook'))
+
     await installModule('@nuxt/image', {
       provider: 'Storipress',
       providers: {

packages/karbon/src/runtime/composables/storipress-base-client.ts

@@ -1,18 +1,34 @@
-import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client/core/index.js'
+import type { Operation } from '@apollo/client/core/index.js'
+import { ApolloClient, ApolloLink, HttpLink, InMemoryCache, Observable } from '@apollo/client/core/index.js'
 import { setContext } from '@apollo/client/link/context/index.js'
 import { fetch } from 'cross-fetch'
 import { withHttps } from 'ufo'
+import { Hookable } from 'hookable'
+import type { Subscription } from 'zen-observable-ts'
 import type { ModuleRuntimeConfig } from '../types'
 
-function getUserAgent() {
-  if (process.server) {
-    return { 'user-agent': 'karbon/1.0.0' }
-  }
+let c: any = null
 
-  return {}
+export interface RequestContext {
+  name: string
+  id: string
+  operation: Operation
 }
 
-let c: any = null
+export interface ResponseContext {
+  name: string
+  id: string
+  operation: Operation
+  type: 'next' | 'error' | 'complete'
+  data: any
+}
+
+type HookResult = Promise<void> | void
+
+export const _karbonClientHooks = new Hookable<{
+  'karbon:request': (ctx: RequestContext) => HookResult
+  'karbon:response': (ctx: ResponseContext) => HookResult
+}>()
 
 export const storipressConfigCtx = {
   use: () => {
@@ -37,7 +53,75 @@ export function createTenantURL(config: Pick<ModuleRuntimeConfig['storipress'],
   return withHttps(`${config.apiHost}/client/${config.clientId}/graphql`)
 }
 
-export function createStoripressBaseClient(getHeaders: () => Record<string, string | null | undefined>, uri: string) {
+export interface CreateBaseClientInput {
+  name?: string
+}
+
+export function createStoripressBaseClient(
+  getHeaders: () => Record<string, string | null | undefined>,
+  uri: string,
+  opt: CreateBaseClientInput = {},
+) {
+  const tapClient = new ApolloLink((operation, forward) => {
+    const id = crypto.randomUUID()
+
+    operation.setContext({
+      karbonTracing: id,
+    })
+
+    return new Observable((observer) => {
+      let subscription: Subscription
+      let closed = false
+      Promise.resolve(
+        _karbonClientHooks.callHookParallel('karbon:request', {
+          name: opt.name ?? 'unknown',
+          operation,
+          id,
+        }),
+      )
+        .then(() => {
+          if (closed) {
+            return
+          }
+
+          function createCallback(type: 'next' | 'error' | 'complete', callback: (...args: any[]) => void) {
+            return (...args: any[]) => {
+              Promise.resolve(
+                _karbonClientHooks.callHookParallel('karbon:response', {
+                  name: opt.name ?? 'unknown',
+                  operation,
+                  id,
+                  type,
+                  data: args[0],
+                }),
+              )
+                .then(() => callback(...args))
+                .catch((err) => {
+                  if (process.dev) {
+                    console.error(err)
+                  }
+                })
+            }
+          }
+
+          subscription = forward(operation).subscribe({
+            next: createCallback('next', observer.next.bind(observer)),
+            error: createCallback('error', observer.error.bind(observer)),
+            complete: createCallback('complete', observer.complete.bind(observer)),
+          })
+        })
+        .catch((err) => {
+          observer.error(err)
+        })
+
+      return () => {
+        closed = true
+        if (subscription) {
+          subscription.unsubscribe()
+        }
+      }
+    })
+  })
   const authLink = setContext(() => {
     return {
       headers: { ...getUserAgent(), ...getHeaders() },
@@ -50,7 +134,7 @@ export function createStoripressBaseClient(getHeaders: () => Record<string, stri
   })
 
   return new ApolloClient({
-    link: authLink.concat(httpLink),
+    link: ApolloLink.from([authLink, tapClient, httpLink]),
     cache: new InMemoryCache({
       typePolicies: {
         CustomField: {
@@ -63,3 +147,12 @@ export function createStoripressBaseClient(getHeaders: () => Record<string, stri
     }),
   })
 }
+
+function getUserAgent() {
+  if (process.server) {
+    const config = getStoripressConfig()
+    return { 'user-agent': config.userAgent ?? 'karbon/1.0.0' }
+  }
+
+  return {}
+}

packages/karbon/src/runtime/composables/storipress-client.ts

@@ -10,6 +10,7 @@ export function createStoripressClient() {
       authorization: `Bearer ${storipress?.apiToken}`,
     }),
     getUri(),
+    { name: 'storipress' },
   )
 }
 
@@ -33,7 +34,7 @@ export function createSubscriberClient() {
     }
   }
 
-  return createStoripressBaseClient(authorization, getUri())
+  return createStoripressBaseClient(authorization, getUri(), { name: 'storipress-subscriber' })
 }
 
 export function getUri() {

packages/karbon/src/runtime/plugins/client-hooks.ts

@@ -0,0 +1,12 @@
+import { _karbonClientHooks } from '../composables/storipress-base-client'
+import { defineNuxtPlugin } from '#imports'
+
+export default defineNuxtPlugin((nuxt) => {
+  _karbonClientHooks.hook('karbon:request', async (ctx) => {
+    await nuxt.hooks.callHookParallel('karbon:request', ctx)
+  })
+
+  _karbonClientHooks.hook('karbon:response', async (ctx) => {
+    await nuxt.hooks.callHookParallel('karbon:response', ctx)
+  })
+})

packages/karbon/src/runtime/server/plugins/hook.ts

@@ -0,0 +1,14 @@
+import { clientHooks } from '@storipress/karbon/internal'
+import { type _karbonClientHooks } from '../../composables/storipress-base-client'
+import { defineNitroPlugin } from '#imports'
+
+const hooks: typeof _karbonClientHooks = clientHooks
+
+export default defineNitroPlugin((nitro) => {
+  hooks.hook('karbon:request', (ctx) => {
+    return nitro.hooks.callHookParallel('karbon:request', ctx)
+  })
+  hooks.hook('karbon:response', (ctx) => {
+    return nitro.hooks.callHookParallel('karbon:response', ctx)
+  })
+})

packages/karbon/src/runtime/types.ts

@@ -162,6 +162,7 @@ export interface StoripressRuntimeConfig {
   searchKey: string
   searchDomain?: string
   encryptKey?: string
+  userAgent?: string
 }
 
 export type StoripressPublicRuntimeConfig = Omit<StoripressRuntimeConfig, 'apiToken' | 'stripeKey' | 'encryptKey'>

packages/playground/nuxt.config.ts

@@ -9,6 +9,17 @@ import {
 } from '@storipress/karbon/helper'
 
 export default defineNuxtConfig({
+  devtools: {
+    enabled: true,
+
+    experimental: {
+      timeline: true,
+    },
+
+    timeline: {
+      enabled: true,
+    },
+  },
   modules: ['@storipress/karbon', '@nuxtjs/tailwindcss', '@vueuse/nuxt'],
   build: {
     transpile: ['@storipress/vue-advertising'],
@@ -68,4 +79,4 @@ export default defineNuxtConfig({
       logo: './image/favicon.png',
     },
   },
-})
+})

packages/playground/package.json

@@ -70,6 +70,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config-vue": "0.40.2",
+    "@nuxt/devtools": "^0.8.0",
     "@nuxt/image": "1.0.0-rc.1",
     "@nuxtjs/tailwindcss": "6.8.0",
     "@rollup/plugin-virtual": "3.0.1",

packages/playground/plugins/listener.server.ts

@@ -0,0 +1,9 @@
+export default defineNuxtPlugin(() => {
+  const nuxt = useNuxtApp()
+  nuxt.hooks.hook('karbon:request', (ctx) => {
+    console.log('nuxt request', ctx)
+  })
+  nuxt.hooks.hook('karbon:response', (ctx) => {
+    console.log('nuxt response', ctx)
+  })
+})

packages/playground/server/plugins/listener.ts

@@ -0,0 +1,10 @@
+import { defineNitroPlugin } from '#imports'
+
+export default defineNitroPlugin((nitro) => {
+  nitro.hooks.hook('karbon:request', (ctx) => {
+    console.log('nitro request', ctx)
+  })
+  nitro.hooks.hook('karbon:response', (ctx) => {
+    console.log('nitro response', ctx)
+  })
+})