refactor(runtime-core): rename `createAsyncComponent` to `defineAsyncComponent` (#888)

BREAKING CHANGE: `createAsyncComponent` has been renamed to `defineAsyncComponent` for consistency with `defineComponent`.

packages/runtime-core/__tests__/apiAsyncComponent.spec.ts

@@ -1,5 +1,5 @@
 import {
-  createAsyncComponent,
+  defineAsyncComponent,
   h,
   Component,
   ref,
@@ -10,10 +10,10 @@ import { createApp, nodeOps, serializeInner } from '@vue/runtime-test'
 
 const timeout = (n: number = 0) => new Promise(r => setTimeout(r, n))
 
-describe('api: createAsyncComponent', () => {
+describe('api: defineAsyncComponent', () => {
   test('simple usage', async () => {
     let resolve: (comp: Component) => void
-    const Foo = createAsyncComponent(
+    const Foo = defineAsyncComponent(
       () =>
         new Promise(r => {
           resolve = r as any
@@ -47,7 +47,7 @@ describe('api: createAsyncComponent', () => {
 
   test('with loading component', async () => {
     let resolve: (comp: Component) => void
-    const Foo = createAsyncComponent({
+    const Foo = defineAsyncComponent({
       loader: () =>
         new Promise(r => {
           resolve = r as any
@@ -87,7 +87,7 @@ describe('api: createAsyncComponent', () => {
 
   test('with loading component + explicit delay (0)', async () => {
     let resolve: (comp: Component) => void
-    const Foo = createAsyncComponent({
+    const Foo = defineAsyncComponent({
       loader: () =>
         new Promise(r => {
           resolve = r as any
@@ -124,7 +124,7 @@ describe('api: createAsyncComponent', () => {
   test('error without error component', async () => {
     let resolve: (comp: Component) => void
     let reject: (e: Error) => void
-    const Foo = createAsyncComponent(
+    const Foo = defineAsyncComponent(
       () =>
         new Promise((_resolve, _reject) => {
           resolve = _resolve as any
@@ -169,7 +169,7 @@ describe('api: createAsyncComponent', () => {
   test('error with error component', async () => {
     let resolve: (comp: Component) => void
     let reject: (e: Error) => void
-    const Foo = createAsyncComponent({
+    const Foo = defineAsyncComponent({
       loader: () =>
         new Promise((_resolve, _reject) => {
           resolve = _resolve as any
@@ -214,7 +214,7 @@ describe('api: createAsyncComponent', () => {
   test('error with error + loading components', async () => {
     let resolve: (comp: Component) => void
     let reject: (e: Error) => void
-    const Foo = createAsyncComponent({
+    const Foo = defineAsyncComponent({
       loader: () =>
         new Promise((_resolve, _reject) => {
           resolve = _resolve as any
@@ -270,7 +270,7 @@ describe('api: createAsyncComponent', () => {
 
   test('timeout without error component', async () => {
     let resolve: (comp: Component) => void
-    const Foo = createAsyncComponent({
+    const Foo = defineAsyncComponent({
       loader: () =>
         new Promise(_resolve => {
           resolve = _resolve as any
@@ -304,7 +304,7 @@ describe('api: createAsyncComponent', () => {
 
   test('timeout with error component', async () => {
     let resolve: (comp: Component) => void
-    const Foo = createAsyncComponent({
+    const Foo = defineAsyncComponent({
       loader: () =>
         new Promise(_resolve => {
           resolve = _resolve as any
@@ -336,7 +336,7 @@ describe('api: createAsyncComponent', () => {
 
   test('timeout with error + loading components', async () => {
     let resolve: (comp: Component) => void
-    const Foo = createAsyncComponent({
+    const Foo = defineAsyncComponent({
       loader: () =>
         new Promise(_resolve => {
           resolve = _resolve as any
@@ -369,7 +369,7 @@ describe('api: createAsyncComponent', () => {
 
   test('timeout without error component, but with loading component', async () => {
     let resolve: (comp: Component) => void
-    const Foo = createAsyncComponent({
+    const Foo = defineAsyncComponent({
       loader: () =>
         new Promise(_resolve => {
           resolve = _resolve as any
@@ -405,7 +405,7 @@ describe('api: createAsyncComponent', () => {
 
   test('with suspense', async () => {
     let resolve: (comp: Component) => void
-    const Foo = createAsyncComponent(
+    const Foo = defineAsyncComponent(
       () =>
         new Promise(_resolve => {
           resolve = _resolve as any
@@ -432,7 +432,7 @@ describe('api: createAsyncComponent', () => {
 
   test('suspensible: false', async () => {
     let resolve: (comp: Component) => void
-    const Foo = createAsyncComponent({
+    const Foo = defineAsyncComponent({
       loader: () =>
         new Promise(_resolve => {
           resolve = _resolve as any
@@ -461,7 +461,7 @@ describe('api: createAsyncComponent', () => {
 
   test('suspense with error handling', async () => {
     let reject: (e: Error) => void
-    const Foo = createAsyncComponent(
+    const Foo = defineAsyncComponent(
       () =>
         new Promise((_resolve, _reject) => {
           reject = _reject

packages/runtime-core/__tests__/components/Suspense.spec.ts

@@ -22,7 +22,7 @@ describe('Suspense', () => {
   })
 
   // a simple async factory for testing purposes only.
-  function createAsyncComponent<T extends ComponentOptions>(
+  function defineAsyncComponent<T extends ComponentOptions>(
     comp: T,
     delay: number = 0
   ) {
@@ -42,7 +42,7 @@ describe('Suspense', () => {
   }
 
   test('fallback content', async () => {
-    const Async = createAsyncComponent({
+    const Async = defineAsyncComponent({
       render() {
         return h('div', 'async')
       }
@@ -70,7 +70,7 @@ describe('Suspense', () => {
   test('nested async deps', async () => {
     const calls: string[] = []
 
-    const AsyncOuter = createAsyncComponent({
+    const AsyncOuter = defineAsyncComponent({
       setup() {
         onMounted(() => {
           calls.push('outer mounted')
@@ -79,7 +79,7 @@ describe('Suspense', () => {
       }
     })
 
-    const AsyncInner = createAsyncComponent(
+    const AsyncInner = defineAsyncComponent(
       {
         setup() {
           onMounted(() => {
@@ -118,7 +118,7 @@ describe('Suspense', () => {
   })
 
   test('onResolve', async () => {
-    const Async = createAsyncComponent({
+    const Async = defineAsyncComponent({
       render() {
         return h('div', 'async')
       }
@@ -221,7 +221,7 @@ describe('Suspense', () => {
   })
 
   test('content update before suspense resolve', async () => {
-    const Async = createAsyncComponent({
+    const Async = defineAsyncComponent({
       setup(props: { msg: string }) {
         return () => h('div', props.msg)
       }
@@ -321,7 +321,7 @@ describe('Suspense', () => {
     const toggle = ref(true)
     const unmounted = jest.fn()
 
-    const Async = createAsyncComponent({
+    const Async = defineAsyncComponent({
       setup() {
         onUnmounted(unmounted)
         return () => h('div', 'async')
@@ -360,7 +360,7 @@ describe('Suspense', () => {
     const mounted = jest.fn()
     const unmounted = jest.fn()
 
-    const Async = createAsyncComponent({
+    const Async = defineAsyncComponent({
       setup() {
         onMounted(mounted)
         onUnmounted(unmounted)
@@ -400,7 +400,7 @@ describe('Suspense', () => {
   test('nested suspense (parent resolves first)', async () => {
     const calls: string[] = []
 
-    const AsyncOuter = createAsyncComponent(
+    const AsyncOuter = defineAsyncComponent(
       {
         setup: () => {
           onMounted(() => {
@@ -412,7 +412,7 @@ describe('Suspense', () => {
       1
     )
 
-    const AsyncInner = createAsyncComponent(
+    const AsyncInner = defineAsyncComponent(
       {
         setup: () => {
           onMounted(() => {
@@ -466,7 +466,7 @@ describe('Suspense', () => {
   test('nested suspense (child resolves first)', async () => {
     const calls: string[] = []
 
-    const AsyncOuter = createAsyncComponent(
+    const AsyncOuter = defineAsyncComponent(
       {
         setup: () => {
           onMounted(() => {
@@ -478,7 +478,7 @@ describe('Suspense', () => {
       10
     )
 
-    const AsyncInner = createAsyncComponent(
+    const AsyncInner = defineAsyncComponent(
       {
         setup: () => {
           onMounted(() => {
@@ -568,7 +568,7 @@ describe('Suspense', () => {
     const msg = ref('nested msg')
     const calls: number[] = []
 
-    const AsyncChildWithSuspense = createAsyncComponent({
+    const AsyncChildWithSuspense = defineAsyncComponent({
       setup(props: { msg: string }) {
         onMounted(() => {
           calls.push(0)
@@ -581,7 +581,7 @@ describe('Suspense', () => {
       }
     })
 
-    const AsyncInsideNestedSuspense = createAsyncComponent(
+    const AsyncInsideNestedSuspense = defineAsyncComponent(
       {
         setup(props: { msg: string }) {
           onMounted(() => {
@@ -593,7 +593,7 @@ describe('Suspense', () => {
       20
     )
 
-    const AsyncChildParent = createAsyncComponent({
+    const AsyncChildParent = defineAsyncComponent({
       setup(props: { msg: string }) {
         onMounted(() => {
           calls.push(1)
@@ -602,7 +602,7 @@ describe('Suspense', () => {
       }
     })
 
-    const NestedAsyncChild = createAsyncComponent(
+    const NestedAsyncChild = defineAsyncComponent(
       {
         setup(props: { msg: string }) {
           onMounted(() => {
@@ -692,13 +692,13 @@ describe('Suspense', () => {
   test('new async dep after resolve should cause suspense to restart', async () => {
     const toggle = ref(false)
 
-    const ChildA = createAsyncComponent({
+    const ChildA = defineAsyncComponent({
       setup() {
         return () => h('div', 'Child A')
       }
     })
 
-    const ChildB = createAsyncComponent({
+    const ChildB = defineAsyncComponent({
       setup() {
         return () => h('div', 'Child B')
       }

packages/runtime-core/__tests__/hydration.spec.ts

@@ -8,7 +8,7 @@ import {
   createStaticVNode,
   Suspense,
   onMounted,
-  createAsyncComponent
+  defineAsyncComponent
 } from '@vue/runtime-dom'
 import { renderToString } from '@vue/server-renderer'
 import { mockWarn } from '@vue/shared'
@@ -394,7 +394,7 @@ describe('SSR hydration', () => {
       )
 
     let serverResolve: any
-    let AsyncComp = createAsyncComponent(
+    let AsyncComp = defineAsyncComponent(
       () =>
         new Promise(r => {
           serverResolve = r
@@ -417,7 +417,7 @@ describe('SSR hydration', () => {
 
     // hydration
     let clientResolve: any
-    AsyncComp = createAsyncComponent(
+    AsyncComp = defineAsyncComponent(
       () =>
         new Promise(r => {
           clientResolve = r

packages/runtime-core/src/apiAsyncComponent.ts

@@ -31,7 +31,7 @@ export interface AsyncComponentOptions<T = any> {
   suspensible?: boolean
 }
 
-export function createAsyncComponent<
+export function defineAsyncComponent<
   T extends PublicAPIComponent = { new (): ComponentPublicInstance }
 >(source: AsyncComponentLoader<T> | AsyncComponentOptions<T>): T {
   if (isFunction(source)) {

packages/runtime-core/src/index.ts

@@ -34,7 +34,7 @@ export {
 export { provide, inject } from './apiInject'
 export { nextTick } from './scheduler'
 export { defineComponent } from './apiDefineComponent'
-export { createAsyncComponent } from './apiAsyncComponent'
+export { defineAsyncComponent } from './apiAsyncComponent'
 
 // Advanced API ----------------------------------------------------------------