+50
-14
lines changedFilter options
+50
-14
lines changed Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ import {
15 15 16 16
import {
17 17
resolveAsyncComponent,
18 +
createAsyncPlaceholder,
18 19
extractPropsFromVNodeData
19 20
} from './helpers/index'
20 21
@@ -122,22 +123,24 @@ export function createComponent (
122 123
return
123 124
}
124 125 126 +
data = data || {}
127 + 125 128
// async component
129 +
let asyncFactory
126 130
if (isUndef(Ctor.cid)) {
127 -
Ctor = resolveAsyncComponent(Ctor, baseCtor, context)
131 +
asyncFactory = Ctor
132 +
Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context)
128 133
if (Ctor === undefined) {
129 134
// return nothing if this is indeed an async component
130 135
// wait for the callback to trigger parent update.
131 -
return
136 +
return createAsyncPlaceholder(asyncFactory, data.key)
132 137
}
133 138
}
134 139 135 140
// resolve constructor options in case global mixins are applied after
136 141
// component constructor creation
137 142
resolveConstructorOptions(Ctor)
138 143 139 -
data = data || {}
140 - 141 144
// transform component v-model data into props & events
142 145
if (isDef(data.model)) {
143 146
transformModel(Ctor.options, data)
@@ -171,7 +174,8 @@ export function createComponent (
171 174
const vnode = new VNode(
172 175
`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
173 176
data, undefined, undefined, undefined, context,
174 -
{ Ctor, propsData, listeners, tag, children }
177 +
{ Ctor, propsData, listeners, tag, children },
178 +
asyncFactory
175 179
)
176 180
return vnode
177 181
}
@@ -9,12 +9,24 @@ import {
9 9
isObject
10 10
} from 'core/util/index'
11 11 12 +
import { createEmptyVNode } from 'core/vdom/vnode'
13 + 12 14
function ensureCtor (comp, base) {
13 15
return isObject(comp)
14 16
? base.extend(comp)
15 17
: comp
16 18
}
17 19 20 +
export function createAsyncPlaceholder (
21 +
factory: Function,
22 +
key: string | number | void
23 +
): VNode {
24 +
const node = createEmptyVNode()
25 +
node.asyncFactory = factory
26 +
node.key = key
27 +
return node
28 +
}
29 + 18 30
export function resolveAsyncComponent (
19 31
factory: Function,
20 32
baseCtor: Class<Component>,
@@ -33,11 +33,17 @@ const hooks = ['create', 'activate', 'update', 'remove', 'destroy']
33 33 34 34
function sameVnode (a, b) {
35 35
return (
36 -
a.key === b.key &&
37 -
a.tag === b.tag &&
38 -
a.isComment === b.isComment &&
39 -
isDef(a.data) === isDef(b.data) &&
40 -
sameInputType(a, b)
36 +
a.key === b.key && (
37 +
(
38 +
a.isAsyncPlaceholder === true &&
39 +
a.asyncFactory === b.asyncFactory
40 +
) || (
41 +
a.tag === b.tag &&
42 +
a.isComment === b.isComment &&
43 +
isDef(a.data) === isDef(b.data) &&
44 +
sameInputType(a, b)
45 +
)
46 +
)
41 47
)
42 48
}
43 49
@@ -434,6 +440,9 @@ export function createPatchFunction (backend) {
434 440
if (oldVnode === vnode) {
435 441
return
436 442
}
443 +
if (oldVnode.isAsyncPlaceholder) {
444 +
return hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
445 +
}
437 446
// reuse element for static trees.
438 447
// note we only do this if the vnode is cloned -
439 448
// if the new node is not cloned it means the render functions have been
@@ -497,6 +506,11 @@ export function createPatchFunction (backend) {
497 506 498 507
// Note: this is a browser-only function so we can assume elms are DOM nodes.
499 508
function hydrate (elm, vnode, insertedVnodeQueue) {
509 +
if (isTrue(vnode.isComment) && isDef(vnode.asyncFactory)) {
510 +
vnode.elm = elm
511 +
vnode.isAsyncPlaceholder = true
512 +
return true
513 +
}
500 514
if (process.env.NODE_ENV !== 'production') {
501 515
if (!assertNodeMatch(elm, vnode)) {
502 516
return false
@@ -19,6 +19,8 @@ export default class VNode {
19 19
isComment: boolean; // empty comment placeholder?
20 20
isCloned: boolean; // is a cloned node?
21 21
isOnce: boolean; // is a v-once node?
22 +
asyncFactory: ?Function; // async component factory function
23 +
isAsyncPlaceholder: boolean;
22 24 23 25
constructor (
24 26
tag?: string,
@@ -27,7 +29,8 @@ export default class VNode {
27 29
text?: string,
28 30
elm?: Node,
29 31
context?: Component,
30 -
componentOptions?: VNodeComponentOptions
32 +
componentOptions?: VNodeComponentOptions,
33 +
asyncFactory?: Function
31 34
) {
32 35
this.tag = tag
33 36
this.data = data
@@ -47,6 +50,8 @@ export default class VNode {
47 50
this.isComment = false
48 51
this.isCloned = false
49 52
this.isOnce = false
53 +
this.asyncFactory = asyncFactory
54 +
this.isAsyncPlaceholder = false
50 55
}
51 56 52 57
// DEPRECATED: alias for componentInstance for backwards compat.
@@ -61,7 +61,8 @@ describe('create-component', () => {
61 61
}
62 62
function go () {
63 63
vnode = createComponent(async, data, vm, vm)
64 -
expect(vnode).toBeUndefined() // not to be loaded yet.
64 +
expect(vnode.isComment).toBe(true) // not to be loaded yet.
65 +
expect(vnode.asyncFactory).toBe(async)
65 66
}
66 67
function loaded () {
67 68
vnode = createComponent(async, data, vm, vm)
@@ -93,11 +94,11 @@ describe('create-component', () => {
93 94
}
94 95
function go () {
95 96
vnode = createComponent(async, data, vm, vm)
96 -
expect(vnode).toBeUndefined() // not to be loaded yet.
97 +
expect(vnode.isComment).toBe(true) // not to be loaded yet.
97 98
}
98 99
function failed () {
99 100
vnode = createComponent(async, data, vm, vm)
100 -
expect(vnode).toBeUndefined() // failed
101 +
expect(vnode.isComment).toBe(true) // failed, still a comment node
101 102
expect(`Failed to resolve async component: ${async}\nReason: ${reason}`).toHaveBeenWarned()
102 103
done()
103 104
}
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4