theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
BREAKING CHANGE: `createAsyncComponent` has been renamed to `defineAsyncComponent` for consistency with `defineComponent`.
This commit is contained in:
Cédric Exbrayat 2020-03-26 16:59:54 +01:00 committed by GitHub
parent 6a65739f61
commit ebc587376c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/runtime-core/__tests__/apiAsyncComponent.spec.ts
View File

@ -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

36
packages/runtime-core/__tests__/components/Suspense.spec.ts
View File

@ -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')
}

6
packages/runtime-core/__tests__/hydration.spec.ts
View File

@ -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

2
packages/runtime-core/src/apiAsyncComponent.ts
View File

@ -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)) {

2
packages/runtime-core/src/index.ts
View File

@ -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 ----------------------------------------------------------------