diff --git a/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts b/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts index eb3ff7b283e..2ddce743c3e 100644 --- a/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts +++ b/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 diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts index 555a6de2194..994bd71a341 100644 --- a/packages/runtime-core/__tests__/components/Suspense.spec.ts +++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts @@ -22,7 +22,7 @@ describe('Suspense', () => { }) // a simple async factory for testing purposes only. - function createAsyncComponent( + function defineAsyncComponent( 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') } diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index 96686c2ea21..84a95b41e49 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ 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 diff --git a/packages/runtime-core/src/apiAsyncComponent.ts b/packages/runtime-core/src/apiAsyncComponent.ts index 39862e07def..6a6896263ae 100644 --- a/packages/runtime-core/src/apiAsyncComponent.ts +++ b/packages/runtime-core/src/apiAsyncComponent.ts @@ -31,7 +31,7 @@ export interface AsyncComponentOptions { suspensible?: boolean } -export function createAsyncComponent< +export function defineAsyncComponent< T extends PublicAPIComponent = { new (): ComponentPublicInstance } >(source: AsyncComponentLoader | AsyncComponentOptions): T { if (isFunction(source)) { diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts index f5fbb9af84e..b320ffd9d4e 100644 --- a/packages/runtime-core/src/index.ts +++ b/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 ----------------------------------------------------------------