const err = new Error('errored out')
reject!(err)
await timeout()
- // error handler will not be called if error component is present
- expect(handler).not.toHaveBeenCalled()
+ expect(handler).toHaveBeenCalled()
expect(serializeInner(root)).toBe('errored out')
toggle.value = false
const err = new Error('errored out')
reject!(err)
await timeout()
- // error handler will not be called if error component is present
- expect(handler).not.toHaveBeenCalled()
+ expect(handler).toHaveBeenCalled()
expect(serializeInner(root)).toBe('errored out')
toggle.value = false
expect(serializeInner(root)).toBe('<!---->')
await timeout(1)
- expect(handler).not.toHaveBeenCalled()
+ expect(handler).toHaveBeenCalled()
expect(serializeInner(root)).toBe('timed out')
// if it resolved after timeout, should still work
components: { Foo },
render: () => h(Foo)
})
+ const handler = (app.config.errorHandler = jest.fn())
app.mount(root)
expect(serializeInner(root)).toBe('<!---->')
await timeout(1)
await timeout(16)
expect(serializeInner(root)).toBe('timed out')
+ expect(handler).toHaveBeenCalled()
resolve!(() => 'resolved')
await timeout()
expect(serializeInner(root)).toBe('resolved & resolved')
})
- // TODO
- test.todo('suspense with error handling')
+ test('suspense with error handling', async () => {
+ let reject: (e: Error) => void
+ const Foo = createAsyncComponent(
+ () =>
+ new Promise((_resolve, _reject) => {
+ reject = _reject
+ })
+ )
+
+ const root = nodeOps.createElement('div')
+ const app = createApp({
+ components: { Foo },
+ render: () =>
+ h(Suspense, null, {
+ default: () => [h(Foo), ' & ', h(Foo)],
+ fallback: () => 'loading'
+ })
+ })
+
+ const handler = (app.config.errorHandler = jest.fn())
+ app.mount(root)
+ expect(serializeInner(root)).toBe('loading')
+
+ reject!(new Error('no'))
+ await timeout()
+ expect(handler).toHaveBeenCalled()
+ expect(serializeInner(root)).toBe('<!----> & <!---->')
+ })
})
Portal,
createStaticVNode,
Suspense,
- onMounted
+ onMounted,
+ createAsyncComponent
} from '@vue/runtime-dom'
import { renderToString } from '@vue/server-renderer'
import { mockWarn } from '@vue/shared'
expect(container.innerHTML).toMatch(`<span>2</span><span>3</span>`)
})
- // TODO
- test.todo('async component')
+ test('async component', async () => {
+ const spy = jest.fn()
+ const Comp = () =>
+ h(
+ 'button',
+ {
+ onClick: spy
+ },
+ 'hello!'
+ )
+
+ let serverResolve: any
+ let AsyncComp = createAsyncComponent(
+ () =>
+ new Promise(r => {
+ serverResolve = r
+ })
+ )
+
+ const App = {
+ render() {
+ return ['hello', h(AsyncComp), 'world']
+ }
+ }
+
+ // server render
+ const htmlPromise = renderToString(h(App))
+ serverResolve(Comp)
+ const html = await htmlPromise
+ expect(html).toMatchInlineSnapshot(
+ `"<!--[-->hello<button>hello!</button>world<!--]-->"`
+ )
+
+ // hydration
+ let clientResolve: any
+ AsyncComp = createAsyncComponent(
+ () =>
+ new Promise(r => {
+ clientResolve = r
+ })
+ )
+
+ const container = document.createElement('div')
+ container.innerHTML = html
+ createSSRApp(App).mount(container)
+
+ // hydration not complete yet
+ triggerEvent('click', container.querySelector('button')!)
+ expect(spy).not.toHaveBeenCalled()
+
+ // resolve
+ clientResolve(Comp)
+ await new Promise(r => setTimeout(r))
+
+ // should be hydrated now
+ triggerEvent('click', container.querySelector('button')!)
+ expect(spy).toHaveBeenCalled()
+ })
describe('mismatch handling', () => {
test('text node', () => {
Component,
currentSuspense,
currentInstance,
- ComponentInternalInstance
+ ComponentInternalInstance,
+ isInSSRComponentSetup
} from './component'
import { isFunction, isObject, EMPTY_OBJ } from '@vue/shared'
import { ComponentPublicInstance } from './componentProxy'
}
return defineComponent({
+ __asyncLoader: load,
name: 'AsyncComponentWrapper',
setup() {
const instance = currentInstance!
return () => createInnerComp(resolvedComp!, instance)
}
- // suspense-controlled
- if (__FEATURE_SUSPENSE__ && suspensible && currentSuspense) {
- return load().then(comp => {
- return () => createInnerComp(comp, instance)
- })
- // TODO suspense error handling
+ const onError = (err: Error) => {
+ pendingRequest = null
+ handleError(err, instance, ErrorCodes.ASYNC_COMPONENT_LOADER)
}
- // self-controlled
- if (__NODE_JS__) {
- // TODO SSR
+ // suspense-controlled or SSR.
+ if (
+ (__FEATURE_SUSPENSE__ && suspensible && currentSuspense) ||
+ (__NODE_JS__ && isInSSRComponentSetup)
+ ) {
+ return load()
+ .then(comp => {
+ return () => createInnerComp(comp, instance)
+ })
+ .catch(err => {
+ onError(err)
+ return () =>
+ errorComponent
+ ? createVNode(errorComponent as Component, { error: err })
+ : null
+ })
}
+
// TODO hydration
const loaded = ref(false)
const err = new Error(
`Async component timed out after ${timeout}ms.`
)
- if (errorComponent) {
- error.value = err
- } else {
- handleError(err, instance, ErrorCodes.ASYNC_COMPONENT_LOADER)
- }
+ onError(err)
+ error.value = err
}
}, timeout)
}
loaded.value = true
})
.catch(err => {
- pendingRequest = null
- if (errorComponent) {
- error.value = err
- } else {
- handleError(err, instance, ErrorCodes.ASYNC_COMPONENT_LOADER)
- }
+ onError(err)
+ error.value = err
})
return () => {
SetupContext,
RenderFunction,
SFCInternalOptions,
- PublicAPIComponent
+ PublicAPIComponent,
+ Component
} from './component'
import {
isFunction,
// type-only differentiator to separate OptionWithoutProps from a constructor
// type returned by defineComponent() or FunctionalComponent
call?: never
+ // marker for AsyncComponentWrapper
+ __asyncLoader?: () => Promise<Component>
// type-only differentiators for built-in Vnode types
__isFragment?: never
__isPortal?: never
SuspenseBoundary,
queueEffectWithSuspense
} from './components/Suspense'
+import { ComponentOptions } from './apiOptions'
export type RootHydrateFunction = (
vnode: VNode<Node, Element>,
// has .el set, the component will perform hydration instead of mount
// on its sub-tree.
const container = parentNode(node)!
- mountComponent(
- vnode,
- container,
- null,
- parentComponent,
- parentSuspense,
- isSVGContainer(container)
- )
+ const hydrateComponent = () => {
+ mountComponent(
+ vnode,
+ container,
+ null,
+ parentComponent,
+ parentSuspense,
+ isSVGContainer(container)
+ )
+ }
+ // async component
+ const loadAsync = (vnode.type as ComponentOptions).__asyncLoader
+ if (loadAsync) {
+ loadAsync().then(hydrateComponent)
+ } else {
+ hydrateComponent()
+ }
// component may be async, so in the case of fragments we cannot rely
// on component's rendered output to determine the end of the fragment
// instead, we do a lookahead to find the end anchor node.
projects / thirdparty / vuejs / core.git / commitdiff
