feat(warn): warn defineAsyncComponent usage in routes (#682)

leemove · web-flow · commit 9520d66112c0 · 2021-01-09T11:10:27.000+01:00
diff --git a/__tests__/warnings.spec.ts b/__tests__/warnings.spec.ts
@@ -1,6 +1,11 @@
 import { mockWarn } from 'jest-mock-warn'
 import { createMemoryHistory, createRouter } from '../src'
-import { defineComponent, FunctionalComponent, h } from 'vue'
+import {
+  defineAsyncComponent,
+  defineComponent,
+  FunctionalComponent,
+  h,
+} from 'vue'
 
 let component = defineComponent({})
 
@@ -177,6 +182,23 @@ describe('warnings', () => {
     expect('"/foo" is a Promise instead of a function').toHaveBeenWarned()
   })
 
+  it('warns if use defineAsyncComponent in routes', async () => {
+    const router = createRouter({
+      history: createMemoryHistory(),
+      // simulates import('./component.vue')
+      routes: [
+        {
+          path: '/foo',
+          component: defineAsyncComponent(() => Promise.resolve({})),
+        },
+      ],
+    })
+    await router.push('/foo')
+    expect(
+      `Component "default" in record with path "/foo" is defined using "defineAsyncComponent()". Write "() => import('./MyPage.vue')" instead of "defineAsyncComponent(() => import('./MyPage.vue'))"`
+    ).toHaveBeenWarned()
+  })
+
   it('warns if no route matched', async () => {
     const router = createRouter({
       history: createMemoryHistory(),
diff --git a/src/navigationGuards.ts b/src/navigationGuards.ts
@@ -261,6 +261,16 @@ export function extractComponentsGuards(
           )
           let promise = rawComponent
           rawComponent = () => promise
+        } else if (
+          (rawComponent as any).__asyncLoader &&
+          guardType === 'beforeRouteEnter'
+        ) {
+          warn(
+            `Component "${name}" in record with path "${record.path}" is defined ` +
+              `using "defineAsyncComponent()". ` +
+              `Write "() => import('./MyPage.vue')" instead of ` +
+              `"defineAsyncComponent(() => import('./MyPage.vue'))".`
+          )
         }
       }
 

Original file line number	Diff line number	Diff line change
`@@ -261,6 +261,16 @@ export function extractComponentsGuards(`
`261`	`261`	`)`
`262`	`262`	`let promise = rawComponent`
`263`	`263`	`rawComponent = () => promise`
	`264`	`+ } else if (`
	`265`	`+ (rawComponent as any).__asyncLoader &&`
	`266`	`+ guardType === 'beforeRouteEnter'`
	`267`	`+ ) {`
	`268`	`+ warn(`
	`269`	+ `Component "${name}" in record with path "${record.path}" is defined ` +
	`270`	+ `using "defineAsyncComponent()". ` +
	`271`	+ `Write "() => import('./MyPage.vue')" instead of ` +
	`272`	+ `"defineAsyncComponent(() => import('./MyPage.vue'))".`
	`273`	`+ )`
`264`	`274`	`}`
`265`	`275`	`}`
`266`	`276`