Skip to content

Commit ebc5873

Browse files
cexbrayatcexbrayat
authored
refactor(runtime-core): rename createAsyncComponent to defineAsyncComponent (#888)
BREAKING CHANGE: `createAsyncComponent` has been renamed to `defineAsyncComponent` for consistency with `defineComponent`.
1 parent 6a65739 commit ebc5873

File tree

5 files changed

+38
-38
lines changed

5 files changed

+38
-38
lines changed

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

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {
2-
createAsyncComponent,
2+
defineAsyncComponent,
33
h,
44
Component,
55
ref,
@@ -10,10 +10,10 @@ import { createApp, nodeOps, serializeInner } from '@vue/runtime-test'
1010

1111
const timeout = (n: number = 0) => new Promise(r => setTimeout(r, n))
1212

13-
describe('api: createAsyncComponent', () => {
13+
describe('api: defineAsyncComponent', () => {
1414
test('simple usage', async () => {
1515
let resolve: (comp: Component) => void
16-
const Foo = createAsyncComponent(
16+
const Foo = defineAsyncComponent(
1717
() =>
1818
new Promise(r => {
1919
resolve = r as any
@@ -47,7 +47,7 @@ describe('api: createAsyncComponent', () => {
4747

4848
test('with loading component', async () => {
4949
let resolve: (comp: Component) => void
50-
const Foo = createAsyncComponent({
50+
const Foo = defineAsyncComponent({
5151
loader: () =>
5252
new Promise(r => {
5353
resolve = r as any
@@ -87,7 +87,7 @@ describe('api: createAsyncComponent', () => {
8787

8888
test('with loading component + explicit delay (0)', async () => {
8989
let resolve: (comp: Component) => void
90-
const Foo = createAsyncComponent({
90+
const Foo = defineAsyncComponent({
9191
loader: () =>
9292
new Promise(r => {
9393
resolve = r as any
@@ -124,7 +124,7 @@ describe('api: createAsyncComponent', () => {
124124
test('error without error component', async () => {
125125
let resolve: (comp: Component) => void
126126
let reject: (e: Error) => void
127-
const Foo = createAsyncComponent(
127+
const Foo = defineAsyncComponent(
128128
() =>
129129
new Promise((_resolve, _reject) => {
130130
resolve = _resolve as any
@@ -169,7 +169,7 @@ describe('api: createAsyncComponent', () => {
169169
test('error with error component', async () => {
170170
let resolve: (comp: Component) => void
171171
let reject: (e: Error) => void
172-
const Foo = createAsyncComponent({
172+
const Foo = defineAsyncComponent({
173173
loader: () =>
174174
new Promise((_resolve, _reject) => {
175175
resolve = _resolve as any
@@ -214,7 +214,7 @@ describe('api: createAsyncComponent', () => {
214214
test('error with error + loading components', async () => {
215215
let resolve: (comp: Component) => void
216216
let reject: (e: Error) => void
217-
const Foo = createAsyncComponent({
217+
const Foo = defineAsyncComponent({
218218
loader: () =>
219219
new Promise((_resolve, _reject) => {
220220
resolve = _resolve as any
@@ -270,7 +270,7 @@ describe('api: createAsyncComponent', () => {
270270

271271
test('timeout without error component', async () => {
272272
let resolve: (comp: Component) => void
273-
const Foo = createAsyncComponent({
273+
const Foo = defineAsyncComponent({
274274
loader: () =>
275275
new Promise(_resolve => {
276276
resolve = _resolve as any
@@ -304,7 +304,7 @@ describe('api: createAsyncComponent', () => {
304304

305305
test('timeout with error component', async () => {
306306
let resolve: (comp: Component) => void
307-
const Foo = createAsyncComponent({
307+
const Foo = defineAsyncComponent({
308308
loader: () =>
309309
new Promise(_resolve => {
310310
resolve = _resolve as any
@@ -336,7 +336,7 @@ describe('api: createAsyncComponent', () => {
336336

337337
test('timeout with error + loading components', async () => {
338338
let resolve: (comp: Component) => void
339-
const Foo = createAsyncComponent({
339+
const Foo = defineAsyncComponent({
340340
loader: () =>
341341
new Promise(_resolve => {
342342
resolve = _resolve as any
@@ -369,7 +369,7 @@ describe('api: createAsyncComponent', () => {
369369

370370
test('timeout without error component, but with loading component', async () => {
371371
let resolve: (comp: Component) => void
372-
const Foo = createAsyncComponent({
372+
const Foo = defineAsyncComponent({
373373
loader: () =>
374374
new Promise(_resolve => {
375375
resolve = _resolve as any
@@ -405,7 +405,7 @@ describe('api: createAsyncComponent', () => {
405405

406406
test('with suspense', async () => {
407407
let resolve: (comp: Component) => void
408-
const Foo = createAsyncComponent(
408+
const Foo = defineAsyncComponent(
409409
() =>
410410
new Promise(_resolve => {
411411
resolve = _resolve as any
@@ -432,7 +432,7 @@ describe('api: createAsyncComponent', () => {
432432

433433
test('suspensible: false', async () => {
434434
let resolve: (comp: Component) => void
435-
const Foo = createAsyncComponent({
435+
const Foo = defineAsyncComponent({
436436
loader: () =>
437437
new Promise(_resolve => {
438438
resolve = _resolve as any
@@ -461,7 +461,7 @@ describe('api: createAsyncComponent', () => {
461461

462462
test('suspense with error handling', async () => {
463463
let reject: (e: Error) => void
464-
const Foo = createAsyncComponent(
464+
const Foo = defineAsyncComponent(
465465
() =>
466466
new Promise((_resolve, _reject) => {
467467
reject = _reject

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

+18-18
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ describe('Suspense', () => {
2222
})
2323

2424
// a simple async factory for testing purposes only.
25-
function createAsyncComponent<T extends ComponentOptions>(
25+
function defineAsyncComponent<T extends ComponentOptions>(
2626
comp: T,
2727
delay: number = 0
2828
) {
@@ -42,7 +42,7 @@ describe('Suspense', () => {
4242
}
4343

4444
test('fallback content', async () => {
45-
const Async = createAsyncComponent({
45+
const Async = defineAsyncComponent({
4646
render() {
4747
return h('div', 'async')
4848
}
@@ -70,7 +70,7 @@ describe('Suspense', () => {
7070
test('nested async deps', async () => {
7171
const calls: string[] = []
7272

73-
const AsyncOuter = createAsyncComponent({
73+
const AsyncOuter = defineAsyncComponent({
7474
setup() {
7575
onMounted(() => {
7676
calls.push('outer mounted')
@@ -79,7 +79,7 @@ describe('Suspense', () => {
7979
}
8080
})
8181

82-
const AsyncInner = createAsyncComponent(
82+
const AsyncInner = defineAsyncComponent(
8383
{
8484
setup() {
8585
onMounted(() => {
@@ -118,7 +118,7 @@ describe('Suspense', () => {
118118
})
119119

120120
test('onResolve', async () => {
121-
const Async = createAsyncComponent({
121+
const Async = defineAsyncComponent({
122122
render() {
123123
return h('div', 'async')
124124
}
@@ -221,7 +221,7 @@ describe('Suspense', () => {
221221
})
222222

223223
test('content update before suspense resolve', async () => {
224-
const Async = createAsyncComponent({
224+
const Async = defineAsyncComponent({
225225
setup(props: { msg: string }) {
226226
return () => h('div', props.msg)
227227
}
@@ -321,7 +321,7 @@ describe('Suspense', () => {
321321
const toggle = ref(true)
322322
const unmounted = jest.fn()
323323

324-
const Async = createAsyncComponent({
324+
const Async = defineAsyncComponent({
325325
setup() {
326326
onUnmounted(unmounted)
327327
return () => h('div', 'async')
@@ -360,7 +360,7 @@ describe('Suspense', () => {
360360
const mounted = jest.fn()
361361
const unmounted = jest.fn()
362362

363-
const Async = createAsyncComponent({
363+
const Async = defineAsyncComponent({
364364
setup() {
365365
onMounted(mounted)
366366
onUnmounted(unmounted)
@@ -400,7 +400,7 @@ describe('Suspense', () => {
400400
test('nested suspense (parent resolves first)', async () => {
401401
const calls: string[] = []
402402

403-
const AsyncOuter = createAsyncComponent(
403+
const AsyncOuter = defineAsyncComponent(
404404
{
405405
setup: () => {
406406
onMounted(() => {
@@ -412,7 +412,7 @@ describe('Suspense', () => {
412412
1
413413
)
414414

415-
const AsyncInner = createAsyncComponent(
415+
const AsyncInner = defineAsyncComponent(
416416
{
417417
setup: () => {
418418
onMounted(() => {
@@ -466,7 +466,7 @@ describe('Suspense', () => {
466466
test('nested suspense (child resolves first)', async () => {
467467
const calls: string[] = []
468468

469-
const AsyncOuter = createAsyncComponent(
469+
const AsyncOuter = defineAsyncComponent(
470470
{
471471
setup: () => {
472472
onMounted(() => {
@@ -478,7 +478,7 @@ describe('Suspense', () => {
478478
10
479479
)
480480

481-
const AsyncInner = createAsyncComponent(
481+
const AsyncInner = defineAsyncComponent(
482482
{
483483
setup: () => {
484484
onMounted(() => {
@@ -568,7 +568,7 @@ describe('Suspense', () => {
568568
const msg = ref('nested msg')
569569
const calls: number[] = []
570570

571-
const AsyncChildWithSuspense = createAsyncComponent({
571+
const AsyncChildWithSuspense = defineAsyncComponent({
572572
setup(props: { msg: string }) {
573573
onMounted(() => {
574574
calls.push(0)
@@ -581,7 +581,7 @@ describe('Suspense', () => {
581581
}
582582
})
583583

584-
const AsyncInsideNestedSuspense = createAsyncComponent(
584+
const AsyncInsideNestedSuspense = defineAsyncComponent(
585585
{
586586
setup(props: { msg: string }) {
587587
onMounted(() => {
@@ -593,7 +593,7 @@ describe('Suspense', () => {
593593
20
594594
)
595595

596-
const AsyncChildParent = createAsyncComponent({
596+
const AsyncChildParent = defineAsyncComponent({
597597
setup(props: { msg: string }) {
598598
onMounted(() => {
599599
calls.push(1)
@@ -602,7 +602,7 @@ describe('Suspense', () => {
602602
}
603603
})
604604

605-
const NestedAsyncChild = createAsyncComponent(
605+
const NestedAsyncChild = defineAsyncComponent(
606606
{
607607
setup(props: { msg: string }) {
608608
onMounted(() => {
@@ -692,13 +692,13 @@ describe('Suspense', () => {
692692
test('new async dep after resolve should cause suspense to restart', async () => {
693693
const toggle = ref(false)
694694

695-
const ChildA = createAsyncComponent({
695+
const ChildA = defineAsyncComponent({
696696
setup() {
697697
return () => h('div', 'Child A')
698698
}
699699
})
700700

701-
const ChildB = createAsyncComponent({
701+
const ChildB = defineAsyncComponent({
702702
setup() {
703703
return () => h('div', 'Child B')
704704
}

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
createStaticVNode,
99
Suspense,
1010
onMounted,
11-
createAsyncComponent
11+
defineAsyncComponent
1212
} from '@vue/runtime-dom'
1313
import { renderToString } from '@vue/server-renderer'
1414
import { mockWarn } from '@vue/shared'
@@ -394,7 +394,7 @@ describe('SSR hydration', () => {
394394
)
395395

396396
let serverResolve: any
397-
let AsyncComp = createAsyncComponent(
397+
let AsyncComp = defineAsyncComponent(
398398
() =>
399399
new Promise(r => {
400400
serverResolve = r
@@ -417,7 +417,7 @@ describe('SSR hydration', () => {
417417

418418
// hydration
419419
let clientResolve: any
420-
AsyncComp = createAsyncComponent(
420+
AsyncComp = defineAsyncComponent(
421421
() =>
422422
new Promise(r => {
423423
clientResolve = r

‎packages/runtime-core/src/apiAsyncComponent.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export interface AsyncComponentOptions<T = any> {
3131
suspensible?: boolean
3232
}
3333

34-
export function createAsyncComponent<
34+
export function defineAsyncComponent<
3535
T extends PublicAPIComponent = { new (): ComponentPublicInstance }
3636
>(source: AsyncComponentLoader<T> | AsyncComponentOptions<T>): T {
3737
if (isFunction(source)) {

‎packages/runtime-core/src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export {
3434
export { provide, inject } from './apiInject'
3535
export { nextTick } from './scheduler'
3636
export { defineComponent } from './apiDefineComponent'
37-
export { createAsyncComponent } from './apiAsyncComponent'
37+
export { defineAsyncComponent } from './apiAsyncComponent'
3838

3939
// Advanced API ----------------------------------------------------------------
4040

0 commit comments

Comments
 (0)