async component improvements

This commit is contained in:
Evan You 2017-04-04 15:06:00 +08:00
parent 354c2f4922
commit 4e980976ea
2 changed files with 77 additions and 34 deletions

View File

@ -1,63 +1,102 @@
/* @flow */
// () => ({
// component: import('./xxx.vue'),
// delay: 200,
// loading: LoadingComponent,
// error: ErrorComponent
// })
import {
warn,
isObject
once,
isDef,
isUndef,
isTrue,
isObject,
isFunction
} from 'core/util/index'
function ensureCtor (comp, base) {
return isObject(comp)
? base.extend(comp)
: comp
}
export function resolveAsyncComponent (
factory: Function,
baseCtor: Class<Component>,
context: Component
): Class<Component> | void {
if (factory.resolved) {
if (isTrue(factory.error) && isDef(factory.errorComp)) {
return factory.errorComp
}
if (isDef(factory.resolved)) {
return factory.resolved
}
const cb = () => context.$forceUpdate()
if (factory.requested) {
// pool callbacks
factory.pendingCallbacks.push(cb)
if (isTrue(factory.loading) && isDef(factory.loadingComp)) {
return factory.loadingComp
}
if (isDef(factory.contexts)) {
// already pending
factory.contexts.push(context)
} else {
factory.requested = true
const cbs = factory.pendingCallbacks = [cb]
const contexts = factory.contexts = [context]
let sync = true
const resolve = (res: Object | Class<Component>) => {
if (isObject(res)) {
res = baseCtor.extend(res)
const forceRender = () => {
for (let i = 0, l = contexts.length; i < l; i++) {
contexts[i].$forceUpdate()
}
}
const resolve = once((res: Object | Class<Component>) => {
// cache resolved
factory.resolved = res
factory.resolved = ensureCtor(res, baseCtor)
// invoke callbacks only if this is not a synchronous resolve
// (async resolves are shimmed as synchronous during SSR)
if (!sync) {
for (let i = 0, l = cbs.length; i < l; i++) {
cbs[i](res)
}
}
forceRender()
}
})
const reject = reason => {
const reject = once(reason => {
process.env.NODE_ENV !== 'production' && warn(
`Failed to resolve async component: ${String(factory)}` +
(reason ? `\nReason: ${reason}` : '')
)
if (isDef(factory.errorComp)) {
factory.error = true
forceRender()
}
})
const res = factory(resolve, reject)
// handle promise
if (res && typeof res.then === 'function' && !factory.resolved) {
if (isObject(res)) {
if (isFunction(res.then)) {
// () => Promise
if (isUndef(factory.resolved)) {
res.then(resolve, reject)
}
} else if (isDef(res.component) && isFunction(res.component.then)) {
if (isDef(res.error)) {
factory.errorComp = ensureCtor(res.error, baseCtor)
}
if (isDef(res.loading)) {
factory.loadingComp = ensureCtor(res.loading, baseCtor)
setTimeout(() => {
if (isUndef(factory.resolved) && isUndef(factory.error)) {
factory.loading = true
forceRender()
}
}, res.delay || 200)
}
if (isDef(res.timeout)) {
setTimeout(reject, res.timeout)
}
res.component.then(resolve, reject)
}
}
sync = false
// return in case resolved synchronously

View File

@ -14,6 +14,10 @@ export function isTrue (v: any): boolean {
return v === true
}
export function isFunction (v: any): boolean {
return typeof v === 'function'
}
/**
* Convert a value to a string that is actually rendered.
*/
@ -250,10 +254,10 @@ export function looseIndexOf (arr: Array<mixed>, val: mixed): number {
*/
export function once (fn: Function): Function {
let called = false
return () => {
return function () {
if (!called) {
called = true
fn()
fn.apply(this, arguments)
}
}
}