fix(devtools): show validation errors

Author: harlan-zw

client/app.vue

@@ -245,6 +245,12 @@ function viewDocs(docs: string) {
                     <div v-else-if="event.status === 'loading'" class="font-bold px-2 py-[2px] bg-yellow-100 text-yellow-700 rounded-lg">
                       {{ event.status }}
                     </div>
+                    <div v-else-if="event.status === 'validation-failed'" class="flex items-center gap-2">
+                      <div class="font-bold px-2 py-[2px] bg-purple-100 text-purple-700 rounded-lg">
+                        {{ event.status }}
+                      </div>
+                      {{ event.args.issues.map(i => `${key}.${i.path?.map(i => i.key).join(',')}: ${i.message}`).join(',') }}
+                    </div>
                   </template>
                   <div v-else-if="event.type === 'fn-call' && event.args" class="px-2 py-[2px] bg-gray-100 text-gray-700 rounded-lg font-mono">
                     {{ `${event.fn}(${event.args?.map((a: any) => JSON.stringify(a, null, 2)).join(', ') || ''})` }}

src/runtime/composables/useScript.ts

@@ -89,6 +89,15 @@ export function useScript<T extends Record<symbol | string, any> = Record<symbol
         syncScripts()
       })
       payload.$script = instance
+      const err = options._validate?.()
+      if (err) {
+        payload.events.push({
+          type: 'status',
+          status: 'validation-failed',
+          args: err,
+          at: Date.now(),
+        })
+      }
       payload.events.push({
         type: 'status',
         status: 'awaitingLoad',

src/runtime/types.ts

@@ -3,7 +3,7 @@ import type {
 } from '@unhead/vue/types'
 import type { UseScriptInput, VueScriptInstance, UseScriptOptions } from '@unhead/vue'
 import type { ComputedRef, Ref } from 'vue'
-import type { InferInput, ObjectSchema } from 'valibot'
+import type {InferInput, ObjectSchema, ValiError} from 'valibot'
 import type { Import } from 'unimport'
 import type { SegmentInput } from './registry/segment'
 import type { CloudflareWebAnalyticsInput } from './registry/cloudflare-web-analytics'
@@ -86,6 +86,10 @@ export type NuxtUseScriptOptions<T extends Record<symbol | string, any> = {}> =
      */
     registryMeta?: Record<string, string>
   }
+  /**
+   * @internal Used to run custom validation logic in dev mode.
+   */
+  _validate?: () => ValiError<any> | null | undefined
 }
 
 export type NuxtUseScriptOptionsSerializable = Omit<NuxtUseScriptOptions, 'use' | 'skipValidation' | 'stub' | 'trigger' | 'eventContext' | 'beforeInit'> & { trigger?: 'client' | 'server' | 'onNuxtReady' }

src/runtime/utils.ts

@@ -22,11 +22,11 @@ function validateScriptInputSchema<T extends GenericSchema>(key: string, schema:
     }
     catch (_e) {
       const e = _e as ValiError<any>
-      // TODO nicer error handling
-      // @ts-expect-error untyped?
       console.error(e.issues.map(i => `${key}.${i.path?.map(i => i.key).join(',')}: ${i.message}`).join('\n'))
+      return e
     }
   }
+  return null
 }
 
 type OptionsFn<O> = (options: InferIfSchema<O>) => ({
@@ -60,14 +60,18 @@ export function useRegistryScript<T extends Record<string | symbol, any>, O = Em
     }
   }
   const init = scriptOptions.beforeInit
-  scriptOptions.beforeInit = () => {
-    // a manual trigger also means it was disabled by nuxt.config
-    if (import.meta.dev && !scriptOptions.skipValidation && options.schema) {
+
+  if (import.meta.dev) {
+    scriptOptions._validate = () => {
+      // a manual trigger also means it was disabled by nuxt.config
       // overriding the src will skip validation
-      if (!userOptions.scriptInput?.src) {
-        validateScriptInputSchema(registryKey, options.schema, userOptions)
+      if (!userOptions.scriptInput?.src && !scriptOptions.skipValidation && options.schema) {
+        return validateScriptInputSchema(registryKey, options.schema, userOptions)
       }
     }
+  }
+  // wrap beforeInit to add validation
+  scriptOptions.beforeInit = () => {
     // avoid clearing the user beforeInit
     init?.()
     if (import.meta.client) {