feat: add helpful diagnostics (#2737)

use nostics

Author: posva

packages/router/__tests__/guards/guardToPromiseFn.spec.ts

@@ -5,7 +5,7 @@ import { mockWarn } from '../vitest-mock-warn'
 import { vi, describe, expect, it } from 'vitest'
 
 const NEXT_DEPRECATION_MESSAGE =
-  'The `next()` callback in navigation guards is deprecated. Return the value instead of calling `next(value)`.'
+  'The `next()` callback in navigation guards is deprecated.'
 
 // stub those two
 const to = START_LOCATION_NORMALIZED

packages/router/__tests__/lazyLoading.spec.ts

@@ -269,7 +269,7 @@ describe('Lazy Loading', () => {
 
     expect(spy).toHaveBeenCalled()
     expect(spy).toHaveBeenLastCalledWith(error)
-    expect('uncaught error').toHaveBeenWarned()
+    expect('Uncaught error').toHaveBeenWarned()
 
     expect(router.currentRoute.value).toMatchObject({
       path: '/',
@@ -289,7 +289,7 @@ describe('Lazy Loading', () => {
     await router.push('/foo').catch(spy)
 
     expect(spy).toHaveBeenCalledTimes(1)
-    expect('uncaught error').toHaveBeenWarned()
+    expect('Uncaught error').toHaveBeenWarned()
 
     expect(router.currentRoute.value).toMatchObject({
       path: '/',
@@ -318,7 +318,7 @@ describe('Lazy Loading', () => {
     await router.push('/foo').catch(spy)
 
     expect(spy).toHaveBeenCalledWith(error)
-    expect('uncaught error').toHaveBeenWarned()
+    expect('Uncaught error').toHaveBeenWarned()
 
     expect(router.currentRoute.value).toMatchObject({
       path: '/',

packages/router/__tests__/scrollBehavior.spec.ts

@@ -185,14 +185,14 @@ describe('scrollBehavior', () => {
       it('warns if element cannot be found with id but can with selector', () => {
         scrollToPosition({ el: '#text .container' })
         expect(
-          `selector "#text .container" should be passed as "el: document.querySelector('#text .container')"`
+          `el: document.querySelector('#text .container')`
         ).toHaveBeenWarned()
       })
 
       it('warns if element cannot be found with id but can with selector', () => {
         scrollToPosition({ el: '#text .container' })
         expect(
-          `selector "#text .container" should be passed as "el: document.querySelector('#text .container')"`
+          `el: document.querySelector('#text .container')`
         ).toHaveBeenWarned()
       })
 

packages/router/__tests__/warnings.spec.ts

@@ -9,7 +9,7 @@ import { mockWarn } from './vitest-mock-warn'
 let component = defineComponent({})
 
 const NEXT_DEPRECATION_MESSAGE =
-  'The `next()` callback in navigation guards is deprecated. Return the value instead of calling `next(value)`.'
+  'The `next()` callback in navigation guards is deprecated.'
 
 describe('warnings', () => {
   mockWarn()
@@ -289,7 +289,7 @@ describe('warnings', () => {
     })
     await router.push('/foo')
     expect(
-      'It should be called exactly one time in each navigation guard'
+      'The "next" callback was called more than once in one navigation guard'
     ).toHaveBeenWarned()
     expect(NEXT_DEPRECATION_MESSAGE).toHaveBeenWarned()
   })

packages/router/package.json

@@ -146,6 +146,7 @@
     "magic-string": "^0.30.21",
     "mlly": "^1.8.2",
     "muggle-string": "^0.4.1",
+    "nostics": "^1.0.0",
     "pathe": "^2.0.3",
     "picomatch": "^4.0.3",
     "scule": "^1.3.0",

packages/router/src/RouterLink.ts

@@ -25,7 +25,7 @@ import { routerKey, routeLocationKey } from './injectionSymbols'
 import type { RouteRecord } from './matcher/types'
 import type { NavigationFailure } from './errors'
 import { isArray, isBrowser, noop } from './utils'
-import { warn } from './warning'
+import { diagnostics } from './diagnostics'
 import { isRouteLocation } from './types'
 import type {
   RouteLocation,
@@ -146,23 +146,7 @@ export function useLink<Name extends keyof RouteMap = keyof RouteMap>(
 
     if (__DEV__ && (!hasPrevious || to !== previousTo)) {
       if (!isRouteLocation(to)) {
-        if (hasPrevious) {
-          warn(
-            `Invalid value for prop "to" in useLink()\n- to:`,
-            to,
-            `\n- previous to:`,
-            previousTo,
-            `\n- props:`,
-            props
-          )
-        } else {
-          warn(
-            `Invalid value for prop "to" in useLink()\n- to:`,
-            to,
-            `\n- props:`,
-            props
-          )
-        }
+        diagnostics.VUE_ROUTER_R0050({ to })
       }
 
       previousTo = to

packages/router/src/RouterView.ts

@@ -30,7 +30,7 @@ import {
   routerViewLocationKey,
 } from './injectionSymbols'
 import { assign, isArray, isBrowser } from './utils'
-import { warn } from './warning'
+import { diagnostics } from './diagnostics'
 import { isSameRouteRecord } from './location'
 
 export interface RouterViewProps {
@@ -254,14 +254,6 @@ function warnDeprecatedUsage() {
     (parentSubTreeType as Component).name === 'RouterView'
   ) {
     const comp = parentName === 'KeepAlive' ? 'keep-alive' : 'transition'
-    warn(
-      `<router-view> can no longer be used directly inside <${comp}>.\n` +
-        `Use slot props instead:\n\n` +
-        `<router-view v-slot="{ Component }">\n` +
-        `  <${comp}>\n` +
-        `    <component :is="Component" />\n` +
-        `  </${comp}>\n` +
-        `</router-view>`
-    )
+    diagnostics.VUE_ROUTER_R0060({ comp })
   }
 }