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 { import {
createAsyncComponent, defineAsyncComponent,
h, h,
Component, Component,
ref, ref,
@ -10,10 +10,10 @@ import { createApp, nodeOps, serializeInner } from '@vue/runtime-test'
const timeout = (n: number = 0) => new Promise(r => setTimeout(r, n)) const timeout = (n: number = 0) => new Promise(r => setTimeout(r, n))
describe('api: createAsyncComponent', () => { describe('api: defineAsyncComponent', () => {
test('simple usage', async () => { test('simple usage', async () => {
let resolve: (comp: Component) => void let resolve: (comp: Component) => void
const Foo = createAsyncComponent( const Foo = defineAsyncComponent(
() => () =>
new Promise(r => { new Promise(r => {
resolve = r as any resolve = r as any
@ -47,7 +47,7 @@ describe('api: createAsyncComponent', () => {
test('with loading component', async () => { test('with loading component', async () => {
let resolve: (comp: Component) => void let resolve: (comp: Component) => void
const Foo = createAsyncComponent({ const Foo = defineAsyncComponent({
loader: () => loader: () =>
new Promise(r => { new Promise(r => {
resolve = r as any resolve = r as any
@ -87,7 +87,7 @@ describe('api: createAsyncComponent', () => {
test('with loading component + explicit delay (0)', async () => { test('with loading component + explicit delay (0)', async () => {
let resolve: (comp: Component) => void let resolve: (comp: Component) => void
const Foo = createAsyncComponent({ const Foo = defineAsyncComponent({
loader: () => loader: () =>
new Promise(r => { new Promise(r => {
resolve = r as any resolve = r as any
@ -124,7 +124,7 @@ describe('api: createAsyncComponent', () => {
test('error without error component', async () => { test('error without error component', async () => {
let resolve: (comp: Component) => void let resolve: (comp: Component) => void
let reject: (e: Error) => void let reject: (e: Error) => void
const Foo = createAsyncComponent( const Foo = defineAsyncComponent(
() => () =>
new Promise((_resolve, _reject) => { new Promise((_resolve, _reject) => {
resolve = _resolve as any resolve = _resolve as any
@ -169,7 +169,7 @@ describe('api: createAsyncComponent', () => {
test('error with error component', async () => { test('error with error component', async () => {
let resolve: (comp: Component) => void let resolve: (comp: Component) => void
let reject: (e: Error) => void let reject: (e: Error) => void
const Foo = createAsyncComponent({ const Foo = defineAsyncComponent({
loader: () => loader: () =>
new Promise((_resolve, _reject) => { new Promise((_resolve, _reject) => {
resolve = _resolve as any resolve = _resolve as any
@ -214,7 +214,7 @@ describe('api: createAsyncComponent', () => {
test('error with error + loading components', async () => { test('error with error + loading components', async () => {
let resolve: (comp: Component) => void let resolve: (comp: Component) => void
let reject: (e: Error) => void let reject: (e: Error) => void
const Foo = createAsyncComponent({ const Foo = defineAsyncComponent({
loader: () => loader: () =>
new Promise((_resolve, _reject) => { new Promise((_resolve, _reject) => {
resolve = _resolve as any resolve = _resolve as any
@ -270,7 +270,7 @@ describe('api: createAsyncComponent', () => {
test('timeout without error component', async () => { test('timeout without error component', async () => {
let resolve: (comp: Component) => void let resolve: (comp: Component) => void
const Foo = createAsyncComponent({ const Foo = defineAsyncComponent({
loader: () => loader: () =>
new Promise(_resolve => { new Promise(_resolve => {
resolve = _resolve as any resolve = _resolve as any
@ -304,7 +304,7 @@ describe('api: createAsyncComponent', () => {
test('timeout with error component', async () => { test('timeout with error component', async () => {
let resolve: (comp: Component) => void let resolve: (comp: Component) => void
const Foo = createAsyncComponent({ const Foo = defineAsyncComponent({
loader: () => loader: () =>
new Promise(_resolve => { new Promise(_resolve => {
resolve = _resolve as any resolve = _resolve as any
@ -336,7 +336,7 @@ describe('api: createAsyncComponent', () => {
test('timeout with error + loading components', async () => { test('timeout with error + loading components', async () => {
let resolve: (comp: Component) => void let resolve: (comp: Component) => void
const Foo = createAsyncComponent({ const Foo = defineAsyncComponent({
loader: () => loader: () =>
new Promise(_resolve => { new Promise(_resolve => {
resolve = _resolve as any resolve = _resolve as any
@ -369,7 +369,7 @@ describe('api: createAsyncComponent', () => {
test('timeout without error component, but with loading component', async () => { test('timeout without error component, but with loading component', async () => {
let resolve: (comp: Component) => void let resolve: (comp: Component) => void
const Foo = createAsyncComponent({ const Foo = defineAsyncComponent({
loader: () => loader: () =>
new Promise(_resolve => { new Promise(_resolve => {
resolve = _resolve as any resolve = _resolve as any
@ -405,7 +405,7 @@ describe('api: createAsyncComponent', () => {
test('with suspense', async () => { test('with suspense', async () => {
let resolve: (comp: Component) => void let resolve: (comp: Component) => void
const Foo = createAsyncComponent( const Foo = defineAsyncComponent(
() => () =>
new Promise(_resolve => { new Promise(_resolve => {
resolve = _resolve as any resolve = _resolve as any
@ -432,7 +432,7 @@ describe('api: createAsyncComponent', () => {
test('suspensible: false', async () => { test('suspensible: false', async () => {
let resolve: (comp: Component) => void let resolve: (comp: Component) => void
const Foo = createAsyncComponent({ const Foo = defineAsyncComponent({
loader: () => loader: () =>
new Promise(_resolve => { new Promise(_resolve => {
resolve = _resolve as any resolve = _resolve as any
@ -461,7 +461,7 @@ describe('api: createAsyncComponent', () => {
test('suspense with error handling', async () => { test('suspense with error handling', async () => {
let reject: (e: Error) => void let reject: (e: Error) => void
const Foo = createAsyncComponent( const Foo = defineAsyncComponent(
() => () =>
new Promise((_resolve, _reject) => { new Promise((_resolve, _reject) => {
reject = _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. // a simple async factory for testing purposes only.
function createAsyncComponent<T extends ComponentOptions>( function defineAsyncComponent<T extends ComponentOptions>(
comp: T, comp: T,
delay: number = 0 delay: number = 0
) { ) {
@ -42,7 +42,7 @@ describe('Suspense', () => {
} }
test('fallback content', async () => { test('fallback content', async () => {
const Async = createAsyncComponent({ const Async = defineAsyncComponent({
render() { render() {
return h('div', 'async') return h('div', 'async')
} }
@ -70,7 +70,7 @@ describe('Suspense', () => {
test('nested async deps', async () => { test('nested async deps', async () => {
const calls: string[] = [] const calls: string[] = []
const AsyncOuter = createAsyncComponent({ const AsyncOuter = defineAsyncComponent({
setup() { setup() {
onMounted(() => { onMounted(() => {
calls.push('outer mounted') calls.push('outer mounted')
@ -79,7 +79,7 @@ describe('Suspense', () => {
} }
}) })
const AsyncInner = createAsyncComponent( const AsyncInner = defineAsyncComponent(
{ {
setup() { setup() {
onMounted(() => { onMounted(() => {
@ -118,7 +118,7 @@ describe('Suspense', () => {
}) })
test('onResolve', async () => { test('onResolve', async () => {
const Async = createAsyncComponent({ const Async = defineAsyncComponent({
render() { render() {
return h('div', 'async') return h('div', 'async')
} }
@ -221,7 +221,7 @@ describe('Suspense', () => {
}) })
test('content update before suspense resolve', async () => { test('content update before suspense resolve', async () => {
const Async = createAsyncComponent({ const Async = defineAsyncComponent({
setup(props: { msg: string }) { setup(props: { msg: string }) {
return () => h('div', props.msg) return () => h('div', props.msg)
} }
@ -321,7 +321,7 @@ describe('Suspense', () => {
const toggle = ref(true) const toggle = ref(true)
const unmounted = jest.fn() const unmounted = jest.fn()
const Async = createAsyncComponent({ const Async = defineAsyncComponent({
setup() { setup() {
onUnmounted(unmounted) onUnmounted(unmounted)
return () => h('div', 'async') return () => h('div', 'async')
@ -360,7 +360,7 @@ describe('Suspense', () => {
const mounted = jest.fn() const mounted = jest.fn()
const unmounted = jest.fn() const unmounted = jest.fn()
const Async = createAsyncComponent({ const Async = defineAsyncComponent({
setup() { setup() {
onMounted(mounted) onMounted(mounted)
onUnmounted(unmounted) onUnmounted(unmounted)
@ -400,7 +400,7 @@ describe('Suspense', () => {
test('nested suspense (parent resolves first)', async () => { test('nested suspense (parent resolves first)', async () => {
const calls: string[] = [] const calls: string[] = []
const AsyncOuter = createAsyncComponent( const AsyncOuter = defineAsyncComponent(
{ {
setup: () => { setup: () => {
onMounted(() => { onMounted(() => {
@ -412,7 +412,7 @@ describe('Suspense', () => {
1 1
) )
const AsyncInner = createAsyncComponent( const AsyncInner = defineAsyncComponent(
{ {
setup: () => { setup: () => {
onMounted(() => { onMounted(() => {
@ -466,7 +466,7 @@ describe('Suspense', () => {
test('nested suspense (child resolves first)', async () => { test('nested suspense (child resolves first)', async () => {
const calls: string[] = [] const calls: string[] = []
const AsyncOuter = createAsyncComponent( const AsyncOuter = defineAsyncComponent(
{ {
setup: () => { setup: () => {
onMounted(() => { onMounted(() => {
@ -478,7 +478,7 @@ describe('Suspense', () => {
10 10
) )
const AsyncInner = createAsyncComponent( const AsyncInner = defineAsyncComponent(
{ {
setup: () => { setup: () => {
onMounted(() => { onMounted(() => {
@ -568,7 +568,7 @@ describe('Suspense', () => {
const msg = ref('nested msg') const msg = ref('nested msg')
const calls: number[] = [] const calls: number[] = []
const AsyncChildWithSuspense = createAsyncComponent({ const AsyncChildWithSuspense = defineAsyncComponent({
setup(props: { msg: string }) { setup(props: { msg: string }) {
onMounted(() => { onMounted(() => {
calls.push(0) calls.push(0)
@ -581,7 +581,7 @@ describe('Suspense', () => {
} }
}) })
const AsyncInsideNestedSuspense = createAsyncComponent( const AsyncInsideNestedSuspense = defineAsyncComponent(
{ {
setup(props: { msg: string }) { setup(props: { msg: string }) {
onMounted(() => { onMounted(() => {
@ -593,7 +593,7 @@ describe('Suspense', () => {
20 20
) )
const AsyncChildParent = createAsyncComponent({ const AsyncChildParent = defineAsyncComponent({
setup(props: { msg: string }) { setup(props: { msg: string }) {
onMounted(() => { onMounted(() => {
calls.push(1) calls.push(1)
@ -602,7 +602,7 @@ describe('Suspense', () => {
} }
}) })
const NestedAsyncChild = createAsyncComponent( const NestedAsyncChild = defineAsyncComponent(
{ {
setup(props: { msg: string }) { setup(props: { msg: string }) {
onMounted(() => { onMounted(() => {
@ -692,13 +692,13 @@ describe('Suspense', () => {
test('new async dep after resolve should cause suspense to restart', async () => { test('new async dep after resolve should cause suspense to restart', async () => {
const toggle = ref(false) const toggle = ref(false)
const ChildA = createAsyncComponent({ const ChildA = defineAsyncComponent({
setup() { setup() {
return () => h('div', 'Child A') return () => h('div', 'Child A')
} }
}) })
const ChildB = createAsyncComponent({ const ChildB = defineAsyncComponent({
setup() { setup() {
return () => h('div', 'Child B') return () => h('div', 'Child B')
} }

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

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

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

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

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

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