feat!: implement advanced plugin hook (#20)

Hebilicious · web-flow · commit 405404896705 · 2023-08-05T20:53:54.000+07:00
diff --git a/README.md b/README.md
@@ -123,14 +123,17 @@ In `vue-query.config.ts` :
 ```ts
 import { library } from "@example/libray"
 
-export default defineVueQueryPluginCallback((vueQueryOptions) => {
-  console.log(vueQueryOptions) // You can access the queryClient here
-  return { provide: { library, test: console } }
+export default defineVueQueryPluginHook(({ queryClient, nuxt }) => {
+  console.log(queryClient, nuxt) // You can access the queryClient here
+  return {
+    pluginReturn: { provide: { library, test: console } }, // nuxt plugin return value
+    vueQueryPluginOptions: { queryClient } // You can pass dynamic options
+  }
 })
 ```
 
-This callback will be run _directly_ after the Vue Query plugin is installed, so you can use it to `provide` something.
-This can be useful if you want to configure something that needs the `queryClient` or you want to provide a library in the same plugin.
+This hook will be run within the nuxt plugin installed by the module, so you can use it to `provide` something or replace the vue query options.
+This can be useful if you need to run custom logic when the `queryClient` is being installed.
 
 ## 📦 Contributing
 
diff --git a/packages/vue-query-nuxt/package.json b/packages/vue-query-nuxt/package.json
@@ -53,8 +53,8 @@
     "dev": "nuxi dev"
   },
   "peerDependencies": {
-    "@tanstack/vue-query": "^4.32.4",
-    "nuxt": "3.6.5"
+    "@tanstack/vue-query": "*",
+    "nuxt": "*"
   },
   "dependencies": {
     "@nuxt/kit": "3.6.5",
diff --git a/packages/vue-query-nuxt/src/module.ts b/packages/vue-query-nuxt/src/module.ts
@@ -1,13 +1,13 @@
 import { existsSync } from "node:fs"
-import { addImports, addPlugin, addTemplate, createResolver, defineNuxtModule, updateTemplates, useLogger } from "@nuxt/kit"
+import { addImports, addPlugin, addTemplate, addTypeTemplate, createResolver, defineNuxtModule, updateTemplates, useLogger } from "@nuxt/kit"
 import { defu } from "defu"
 import { generateCode, loadFile } from "magicast"
 import { transform } from "esbuild"
 import { NAME, type VueQueryOptions, configKey, defaults } from "./runtime/utils"
 
 declare module "@nuxt/schema" {
   interface PublicRuntimeConfig {
-    [configKey]: VueQueryOptions
+    vueQuery: VueQueryOptions
   }
 }
 
@@ -33,52 +33,53 @@ export default defineNuxtModule<VueQueryOptions>({
     addPlugin(resolve("./runtime/plugin"))
 
     // 3. Add composable
-    addImports([{ name: "defineVueQueryPluginCallback", from: resolve("./runtime/composables/defineVueQueryPluginCallback") }])
+    addImports([{ name: "defineVueQueryPluginHook", from: resolve("./runtime/composables/defineVueQueryPluginHook") }])
 
-    const filename = "internal.vue-query-plugin-callback.mjs"
+    const filename = "internal.vue-query-plugin-hook.mjs"
 
-    // 4. Write pluginCallback() to .nuxt
-    const getContents = async () => {
-      if (existsSync(resolve(nuxt.options.rootDir, "vue-query.config.ts"))) {
-        const configFile = resolve(nuxt.options.rootDir, "vue-query.config.ts")
-        const file = await loadFile(configFile)
-        if (file.exports.pluginCallback || file.exports.default) {
-          logger.success("Found vue-query.config.ts file")
-          if (!file.exports.pluginCallback) file.exports.pluginCallback = file.exports.default
-          delete file.exports.default
-          const { code } = generateCode(file) // We extract it with magicast...
-          const shaked = await transform(code, { treeShaking: true, loader: "ts" }) // ...we clean it with esbuild.
-          return shaked.code
+    // 4. Write pluginHook() to .nuxt
+    addTemplate({
+      filename,
+      write: true,
+      getContents: async () => {
+        if (existsSync(resolve(nuxt.options.rootDir, "vue-query.config.ts"))) {
+          const configFile = resolve(nuxt.options.rootDir, "vue-query.config.ts")
+          const file = await loadFile(configFile)
+          if (file.exports.pluginHook || file.exports.default) {
+            logger.success("Found vue-query.config.ts file")
+            if (!file.exports.pluginHook) file.exports.pluginHook = file.exports.default
+            delete file.exports.default
+            const { code } = generateCode(file) // We extract it with magicast...
+            const shaked = await transform(code, { treeShaking: true, loader: "ts" }) // ...we clean it with esbuild.
+            return shaked.code
+          }
+          else {
+            logger.error("Found vue-query.config.ts file, but it does not export a `pluginHook`.")
+          }
         }
         else {
-          logger.error("Found vue-query.config.ts file, but it does not export a `pluginCallback`.")
+          logger.info("No vue-query.config.ts file found.")
         }
+        return "export function pluginHook() { return { pluginReturn: null, vueQueryPluginOptions: null}}"
       }
-      else {
-        logger.info("No vue-query.config.ts file found.")
-      }
-      return "export function pluginCallback() {}"
-    }
-    addTemplate({ filename, write: true, getContents })
-    // 4. Add types for the plugin callback.
-    const advancedTypes = "types/vue-query-nuxt-advanced.d.ts"
-    addTemplate({
-      filename: advancedTypes,
+    })
+
+    // 4. Augment NuxtApp with the pluginHook return type (for provide)
+    addTypeTemplate({
+      filename: "types/vue-query-nuxt-advanced.d.ts",
+      write: true,
       getContents: () => `
-      type PluginCallbackResult = Awaited<ReturnType<typeof import(".nuxt/${filename}").pluginCallback>>
-      
-      type AddPrefix<T> = {
+      type PluginHookResult = Awaited<ReturnType<typeof import(".nuxt/${filename}").pluginHook>["pluginReturn"]>
+
+      type AddDollarPrefix<T> = {
         [K in keyof T['provide'] as \`$\${string & K}\`]: T['provide'][K]
       }
-      
+
       declare module '#app' {
-        interface NuxtApp extends AddPrefix<PluginCallbackResult> {}
+        interface NuxtApp extends AddDollarPrefix<PluginHookResult> {}
       }
       export { }`
     })
-    nuxt.hook("prepare:types", ({ references }) => {
-      references.push({ path: advancedTypes })
-    })
 
     // 5. Auto - reload the config
     nuxt.hook("builder:watch", async (event, path) => {
diff --git a/packages/vue-query-nuxt/src/runtime/composables/defineVueQueryPluginCallback.ts b/packages/vue-query-nuxt/src/runtime/composables/defineVueQueryPluginCallback.ts
diff --git a/packages/vue-query-nuxt/src/runtime/composables/defineVueQueryPluginHook.ts b/packages/vue-query-nuxt/src/runtime/composables/defineVueQueryPluginHook.ts
@@ -0,0 +1,6 @@
+import type { PluginHookParameters, PluginHookReturn } from "../types"
+
+// @note the generic is needed to augment NuxtApp with the return type
+export function defineVueQueryPluginHook<T extends PluginHookReturn>(callback: (pluginHookParameters: PluginHookParameters) => T) {
+  return callback
+}
diff --git a/packages/vue-query-nuxt/src/runtime/plugin.ts b/packages/vue-query-nuxt/src/runtime/plugin.ts
@@ -1,15 +1,18 @@
 import type { DehydratedState } from "@tanstack/vue-query"
 import { QueryClient, VueQueryPlugin, dehydrate, hydrate } from "@tanstack/vue-query"
 import { getVueQueryOptions } from "./utils"
+import { pluginHook } from "#build/internal.vue-query-plugin-hook"
 import { defineNuxtPlugin, useRuntimeConfig, useState } from "#imports"
-import { pluginCallback } from "#build/internal.vue-query-plugin-callback"
 
 export default defineNuxtPlugin((nuxt) => {
   const { stateKey, queryClientOptions, vueQueryPluginOptions } = getVueQueryOptions(useRuntimeConfig())
   const vueQueryState = useState<DehydratedState | null>(stateKey)
   const queryClient = new QueryClient(queryClientOptions)
 
-  nuxt.vueApp.use(VueQueryPlugin, { queryClient, ...vueQueryPluginOptions })
+  // The plugin hook is replaced by the user provided vue-query.config.ts and allow advanced modifications
+  const { pluginReturn, vueQueryPluginOptions: hookOptions } = pluginHook({ queryClient, nuxt })
+
+  nuxt.vueApp.use(VueQueryPlugin, { queryClient, ...vueQueryPluginOptions, ...hookOptions })
 
   if (process.server) {
     nuxt.hooks.hook("app:rendered", () => {
@@ -21,5 +24,5 @@ export default defineNuxtPlugin((nuxt) => {
       hydrate(queryClient, vueQueryState.value)
     })
   }
-  return pluginCallback({ queryClient })
+  return pluginReturn
 })
diff --git a/packages/vue-query-nuxt/src/runtime/types.ts b/packages/vue-query-nuxt/src/runtime/types.ts
@@ -1,11 +1,15 @@
-import { type QueryClient } from "@tanstack/vue-query"
+import type { NuxtApp } from "nuxt/app"
+import type { QueryClient, VueQueryPluginOptions } from "@tanstack/vue-query"
 
-export type ReturnedByPlugin =
+export type NuxtPluginReturn =
 | void
 | Promise<void>
 | Promise<{ provide?: Record<string, unknown> | undefined }>
 | { provide?: Record<string, unknown> | undefined }
 
-export interface PluginCallbackParameters {
+export interface PluginHookParameters {
+  nuxt: NuxtApp
   queryClient: QueryClient
 }
+
+export interface PluginHookReturn { pluginReturn: NuxtPluginReturn; vueQueryPluginOptions?: VueQueryPluginOptions }
diff --git a/packages/vue-query-nuxt/src/runtime/utils.ts b/packages/vue-query-nuxt/src/runtime/utils.ts
@@ -17,7 +17,7 @@ const composables = [
 type VueQueryComposables = typeof composables[number]
 export interface VueQueryOptions {
   stateKey: string
-  autoImports: VueQueryComposables[] | [] | false
+  autoImports: VueQueryComposables[] | false
   queryClientOptions: QueryClientConfig | undefined
   vueQueryPluginOptions: VueQueryPluginOptions
 }
diff --git a/packages/vue-query-nuxt/src/runtime/virtual:pluginHook.ts b/packages/vue-query-nuxt/src/runtime/virtual:pluginHook.ts
@@ -1,8 +1,10 @@
-import type { PluginCallbackParameters, ReturnedByPlugin } from "./types"
+import type { PluginHookParameters, PluginHookReturn } from "./types"
 
 // "#build/internal.vue-query-plugin-callback will resolve to this file when building the library.
 // The actual function will be defined by the user and injected in the .nuxt directory.
 // Typescript will resolve this type regardless
 
 // eslint-disable-next-line unused-imports/no-unused-vars
-export const pluginCallback = (pluginCallbackParameters: PluginCallbackParameters): ReturnedByPlugin => ({})
+export function pluginHook(pluginHookParameters: PluginHookParameters): PluginHookReturn {
+  return { pluginReturn: {}, vueQueryPluginOptions: {} }
+}
diff --git a/playgrounds/advanced/vue-query.config.ts b/playgrounds/advanced/vue-query.config.ts
@@ -1,6 +1,7 @@
 import { createHooks } from "@wundergraph/vue-query"
 
-export default defineVueQueryPluginCallback(({ queryClient }) => {
+export default defineVueQueryPluginHook(({ queryClient, nuxt }) => {
+  nuxt.vueApp.use({ install: () => { } })
   queryClient.setQueryData(["todos"], [{ id: 1, todo: "Hello" }, { id: 2, todo: "World" }])
-  return { provide: { createHooks, test: console } }
+  return { pluginReturn: { provide: { createHooks, test: console } } }
 })
diff --git a/playgrounds/wagmi/README.md b/playgrounds/wagmi/README.md
@@ -0,0 +1,4 @@
+# Wagmi Example
+
+The Wagmi nuxt module doesn't install the wagmi plugin. 
+In order to install it and properly integrate, you will need to use `vue-query.config.ts`, which will be run in the nuxt plugin that install vue query.
diff --git a/playgrounds/wagmi/app.vue b/playgrounds/wagmi/app.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const { data, isLoading } = useQuery({
+  queryKey: ["todos"],
+  queryFn: () => $fetch("/api/todos")
+})
+const { $wagmi } = useNuxtApp()
+</script>
+
+<template>
+  <div>
+    <h1>Todos</h1>
+    <p v-if="isLoading">
+      Loading
+    </p>
+    <pre>{{ data }}</pre>
+  </div>
+</template>
diff --git a/playgrounds/wagmi/nuxt.config.ts b/playgrounds/wagmi/nuxt.config.ts
@@ -0,0 +1,7 @@
+export default defineNuxtConfig({
+  modules: [
+    "../../packages/vue-query-nuxt/src/module.ts",
+    "@use-wagmi/nuxt"
+    // "@hebilicious/vue-query-nuxt"
+  ]
+})
diff --git a/playgrounds/wagmi/package.json b/playgrounds/wagmi/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "nuxt-wagmi",
+  "private": true,
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "start": "nuxi preview",
+    "analyze": "nuxi analyze"
+  },
+  "dependencies": {
+    "@hebilicious/vue-query-nuxt": "latest",
+    "@tanstack/vue-query": "4.32.6",
+    "@use-wagmi/nuxt": "^1.1.0",
+    "nuxt": "latest",
+    "use-wagmi": "^0.3.8",
+    "viem": "^1.5.3"
+  }
+}
diff --git a/playgrounds/wagmi/server/api/todos.ts b/playgrounds/wagmi/server/api/todos.ts
@@ -0,0 +1,3 @@
+export default defineEventHandler(() => {
+  return [{ id: 1, todo: "Hello" }, { id: 2, todo: "World" }]
+})
diff --git a/playgrounds/wagmi/tsconfig.json b/playgrounds/wagmi/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/playgrounds/wagmi/vue-query.config.ts b/playgrounds/wagmi/vue-query.config.ts
@@ -0,0 +1,26 @@
+import { createPublicClient, http } from "viem"
+import { createConfig, mainnet } from "use-wagmi"
+
+export default defineVueQueryPluginHook(({ nuxt }) => {
+  const wagmiConfig = createConfig({
+    autoConnect: true,
+    publicClient: createPublicClient({
+      chain: mainnet,
+      transport: http()
+    })
+  })
+
+  const _config = shallowRef(markRaw(wagmiConfig))
+  const unsubscribe = wagmiConfig.subscribe(() => {
+    triggerRef(markRaw(_config))
+  })
+  const originalUnmount = nuxt.vueApp.unmount
+  nuxt.vueApp.unmount = function vueQueryUnmount() {
+    unsubscribe()
+    originalUnmount()
+  }
+  return {
+    pluginReturn: { provide: { wagmi: wagmiConfig } },
+    vueQueryPluginOptions: { queryClient: wagmiConfig.queryClient }
+  }
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ const composables = [`
`17`	`17`	`type VueQueryComposables = typeof composables[number]`
`18`	`18`	`export interface VueQueryOptions {`
`19`	`19`	`stateKey: string`
`20`		`- autoImports: VueQueryComposables[] \| [] \| false`
	`20`	`+ autoImports: VueQueryComposables[] \| false`
`21`	`21`	`queryClientOptions: QueryClientConfig \| undefined`
`22`	`22`	`vueQueryPluginOptions: VueQueryPluginOptions`
`23`	`23`	`}`