Skip to content

Commit b8d33ec

Browse files
Hanks10100yyx990803
Hanks10100
authored and
yyx990803
committed
feat(weex): WIP implement virtual component (#7165)
1 parent 70b97ac commit b8d33ec

13 files changed

+430
-10
lines changed

‎flow/component.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ declare interface Component {
4848
$createElement: (tag?: string | Component, data?: Object, children?: VNodeChildren) => VNode;
4949

5050
// private properties
51-
_uid: number;
51+
_uid: number | string;
5252
_name: string; // this only exists in dev mode
5353
_isVue: true;
5454
_self: Component;

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@
125125
"typescript": "^2.6.1",
126126
"uglify-js": "^3.0.15",
127127
"webpack": "^3.10.0",
128-
"weex-js-runtime": "^0.23.1",
128+
"weex-js-runtime": "^0.23.3",
129129
"weex-styler": "^0.3.0"
130130
},
131131
"config": {

‎src/core/instance/init.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export function initMixin (Vue: Class<Component>) {
7171
}
7272
}
7373

74-
function initInternalComponent (vm: Component, options: InternalComponentOptions) {
74+
export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
7575
const opts = vm.$options = Object.create(vm.constructor.options)
7676
// doing this because it's faster than dynamic enumeration.
7777
const parentVnode = options._parentVnode

‎src/platforms/weex/runtime/recycle-list/render-component-template.js

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { warn } from 'core/util/debug'
44
import { handleError } from 'core/util/error'
55
import { RECYCLE_LIST_MARKER } from 'weex/util/index'
66
import { createComponentInstanceForVnode } from 'core/vdom/create-component'
7+
import { resolveVirtualComponent } from './virtual-component'
78

89
export function isRecyclableComponent (vnode: VNodeWithData): boolean {
910
return vnode.data.attrs
@@ -14,6 +15,7 @@ export function isRecyclableComponent (vnode: VNodeWithData): boolean {
1415
export function renderRecyclableComponentTemplate (vnode: MountedComponentVNode): VNode {
1516
// $flow-disable-line
1617
delete vnode.data.attrs[RECYCLE_LIST_MARKER]
18+
resolveVirtualComponent(vnode)
1719
const vm = createComponentInstanceForVnode(vnode)
1820
const render = (vm.$options: any)['@render']
1921
if (render) {

‎src/platforms/weex/runtime/recycle-list/virtual-component.js

+90-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,90 @@
1-
// import {
2-
// // id, 'lifecycle', hookname, fn
3-
// // https://github.com/Hanks10100/weex-native-directive/tree/master/component
4-
// registerComponentHook,
5-
// updateComponentData
6-
// } from '../util/index'
1+
/* @flow */
2+
3+
// https://github.com/Hanks10100/weex-native-directive/tree/master/component
4+
5+
import { mergeOptions } from 'core/util/index'
6+
import { initProxy } from 'core/instance/proxy'
7+
import { initState } from 'core/instance/state'
8+
import { initRender } from 'core/instance/render'
9+
import { initEvents } from 'core/instance/events'
10+
import { initProvide, initInjections } from 'core/instance/inject'
11+
import { initLifecycle, mountComponent, callHook } from 'core/instance/lifecycle'
12+
import { initInternalComponent, resolveConstructorOptions } from 'core/instance/init'
13+
import { registerComponentHook, updateComponentData } from '../../util/index'
14+
15+
let uid = 0
16+
17+
// override Vue.prototype._init
18+
function initVirtualComponent (options: Object = {}) {
19+
const vm: Component = this
20+
const componentId = options.componentId
21+
22+
// virtual component uid
23+
vm._uid = `virtual-component-${uid++}`
24+
25+
// a flag to avoid this being observed
26+
vm._isVue = true
27+
// merge options
28+
if (options && options._isComponent) {
29+
// optimize internal component instantiation
30+
// since dynamic options merging is pretty slow, and none of the
31+
// internal component options needs special treatment.
32+
initInternalComponent(vm, options)
33+
} else {
34+
vm.$options = mergeOptions(
35+
resolveConstructorOptions(vm.constructor),
36+
options || {},
37+
vm
38+
)
39+
}
40+
41+
/* istanbul ignore else */
42+
if (process.env.NODE_ENV !== 'production') {
43+
initProxy(vm)
44+
} else {
45+
vm._renderProxy = vm
46+
}
47+
48+
vm._self = vm
49+
initLifecycle(vm)
50+
initEvents(vm)
51+
initRender(vm)
52+
callHook(vm, 'beforeCreate')
53+
initInjections(vm) // resolve injections before data/props
54+
initState(vm)
55+
initProvide(vm) // resolve provide after data/props
56+
callHook(vm, 'created')
57+
58+
registerComponentHook(componentId, 'lifecycle', 'attach', () => {
59+
mountComponent(vm)
60+
})
61+
62+
registerComponentHook(componentId, 'lifecycle', 'detach', () => {
63+
vm.$destroy()
64+
})
65+
}
66+
67+
// override Vue.prototype._update
68+
function updateVirtualComponent (vnode: VNode, hydrating?: boolean) {
69+
// TODO
70+
updateComponentData(this.$options.componentId, {})
71+
}
72+
73+
// listening on native callback
74+
export function resolveVirtualComponent (vnode: MountedComponentVNode): VNode {
75+
const BaseCtor = vnode.componentOptions.Ctor
76+
const VirtualComponent = BaseCtor.extend({})
77+
VirtualComponent.prototype._init = initVirtualComponent
78+
VirtualComponent.prototype._update = updateVirtualComponent
79+
80+
vnode.componentOptions.Ctor = BaseCtor.extend({
81+
beforeCreate () {
82+
registerComponentHook(VirtualComponent.cid, 'lifecycle', 'create', componentId => {
83+
// create virtual component
84+
const options = { componentId }
85+
return new VirtualComponent(options)
86+
})
87+
}
88+
})
89+
}
90+

‎test/weex/cases/cases.spec.js

+66-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import {
44
compileVue,
55
compileWithDeps,
66
createInstance,
7+
addTaskHook,
8+
resetTaskHook,
79
getRoot,
810
getEvents,
911
fireEvent
@@ -19,6 +21,7 @@ function createRenderTestCase (name) {
1921
const instance = createInstance(id, code)
2022
setTimeout(() => {
2123
expect(getRoot(instance)).toEqual(target)
24+
instance.$destroy()
2225
done()
2326
}, 50)
2427
}).catch(done.fail)
@@ -40,6 +43,7 @@ function createEventTestCase (name) {
4043
fireEvent(instance, event.ref, event.type, {})
4144
setTimeout(() => {
4245
expect(getRoot(instance)).toEqual(after)
46+
instance.$destroy()
4347
done()
4448
}, 50)
4549
}, 50)
@@ -79,6 +83,7 @@ describe('Usage', () => {
7983
setTimeout(() => {
8084
const target = readObject('recycle-list/components/stateless.vdom.js')
8185
expect(getRoot(instance)).toEqual(target)
86+
instance.$destroy()
8287
done()
8388
}, 50)
8489
}).catch(done.fail)
@@ -94,29 +99,89 @@ describe('Usage', () => {
9499
setTimeout(() => {
95100
const target = readObject('recycle-list/components/stateless-with-props.vdom.js')
96101
expect(getRoot(instance)).toEqual(target)
102+
instance.$destroy()
103+
done()
104+
}, 50)
105+
}).catch(done.fail)
106+
})
107+
108+
it('multi stateless components', done => {
109+
compileWithDeps('recycle-list/components/stateless-multi-components.vue', [{
110+
name: 'banner',
111+
path: 'recycle-list/components/banner.vue'
112+
}, {
113+
name: 'poster',
114+
path: 'recycle-list/components/poster.vue'
115+
}, {
116+
name: 'footer',
117+
path: 'recycle-list/components/footer.vue'
118+
}]).then(code => {
119+
const id = String(Date.now() * Math.random())
120+
const instance = createInstance(id, code)
121+
setTimeout(() => {
122+
const target = readObject('recycle-list/components/stateless-multi-components.vdom.js')
123+
expect(getRoot(instance)).toEqual(target)
124+
instance.$destroy()
97125
done()
98126
}, 50)
99127
}).catch(done.fail)
100128
})
101129

102130
it('stateful component', done => {
131+
const tasks = []
132+
addTaskHook((_, task) => tasks.push(task))
103133
compileWithDeps('recycle-list/components/stateful.vue', [{
104134
name: 'counter',
105135
path: 'recycle-list/components/counter.vue'
106136
}]).then(code => {
107137
const id = String(Date.now() * Math.random())
108138
const instance = createInstance(id, code)
139+
expect(tasks.length).toEqual(7)
140+
tasks.length = 0
141+
instance.$triggerHook(2, 'create', ['component-1'])
142+
instance.$triggerHook(2, 'create', ['component-2'])
143+
instance.$triggerHook('component-1', 'attach')
144+
instance.$triggerHook('component-2', 'attach')
145+
expect(tasks.length).toEqual(2)
146+
expect(tasks[0].method).toEqual('updateComponentData')
147+
// expect(tasks[0].args).toEqual([{ count: 42 }])
148+
expect(tasks[1].method).toEqual('updateComponentData')
149+
// expect(tasks[1].args).toEqual([{ count: 42 }])
109150
setTimeout(() => {
110151
const target = readObject('recycle-list/components/stateful.vdom.js')
111152
expect(getRoot(instance)).toEqual(target)
112153
const event = getEvents(instance)[0]
154+
tasks.length = 0
113155
fireEvent(instance, event.ref, event.type, {})
114156
setTimeout(() => {
115-
expect(getRoot(instance)).toEqual(target)
157+
// expect(tasks.length).toEqual(1)
158+
// expect(tasks[0]).toEqual({
159+
// module: 'dom',
160+
// method: 'updateComponentData',
161+
// args: [{ count: 43 }]
162+
// })
163+
instance.$destroy()
164+
resetTaskHook()
116165
done()
117166
})
118167
}, 50)
119168
}).catch(done.fail)
120169
})
170+
171+
it('stateful component with v-model', done => {
172+
compileWithDeps('recycle-list/components/stateful-v-model.vue', [{
173+
name: 'editor',
174+
path: 'recycle-list/components/editor.vue'
175+
}]).then(code => {
176+
const id = String(Date.now() * Math.random())
177+
const instance = createInstance(id, code)
178+
setTimeout(() => {
179+
const target = readObject('recycle-list/components/stateful-v-model.vdom.js')
180+
expect(getRoot(instance)).toEqual(target)
181+
instance.$destroy()
182+
done()
183+
}, 50)
184+
}).catch(done.fail)
185+
})
121186
})
122187
})

‎test/weex/cases/recycle-list/components/editor.vue

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template recyclable="true">
2+
<div>
3+
<text class="output">{{output}}</text>
4+
<input class="input" type="text" v-model="output" />
5+
</div>
6+
</template>
7+
8+
<script>
9+
module.exports = {
10+
props: ['message'],
11+
data () {
12+
return {
13+
output: this.message | ''
14+
}
15+
}
16+
}
17+
</script>
18+
19+
<style scoped>
20+
.output {
21+
height: 80px;
22+
font-size: 60px;
23+
color: #41B883;
24+
}
25+
.input {
26+
font-size: 50px;
27+
color: #666666;
28+
border-width: 2px;
29+
border-color: #41B883;
30+
}
31+
</style>

‎test/weex/cases/recycle-list/components/footer.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template recyclable="true">
2+
<div class="footer">
3+
<text class="copyright">All rights reserved.</text>
4+
</div>
5+
</template>
6+
7+
<style scoped>
8+
.footer {
9+
height: 80px;
10+
justify-content: center;
11+
background-color: #EEEEEE;
12+
}
13+
.copyright {
14+
color: #AAAAAA;
15+
font-size: 32px;
16+
text-align: center;
17+
}
18+
</style>

‎test/weex/cases/recycle-list/components/stateful-v-model.vdom.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
({
2+
type: 'recycle-list',
3+
attr: {
4+
listData: [
5+
{ type: 'A' },
6+
{ type: 'A' }
7+
],
8+
templateKey: 'type',
9+
alias: 'item'
10+
},
11+
children: [{
12+
type: 'cell-slot',
13+
attr: { templateType: 'A' },
14+
children: [{
15+
type: 'div',
16+
attr: {
17+
'@isComponentRoot': true,
18+
'@componentProps': {
19+
message: 'No binding'
20+
}
21+
},
22+
children: [{
23+
type: 'text',
24+
style: {
25+
height: '80px',
26+
fontSize: '60px',
27+
color: '#41B883'
28+
},
29+
attr: {
30+
value: { '@binding': 'output' }
31+
}
32+
}, {
33+
type: 'input',
34+
event: ['input'],
35+
style: {
36+
fontSize: '50px',
37+
color: '#666666',
38+
borderWidth: '2px',
39+
borderColor: '#41B883'
40+
},
41+
attr: {
42+
type: 'text',
43+
value: 0
44+
}
45+
}]
46+
}]
47+
}]
48+
})

‎test/weex/cases/recycle-list/components/stateful-v-model.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<recycle-list :list-data="longList" template-key="type" alias="item">
3+
<cell-slot template-type="A">
4+
<editor message="No binding"></editor>
5+
</cell-slot>
6+
</recycle-list>
7+
</template>
8+
9+
<script>
10+
// require('./editor.vue')
11+
module.exports = {
12+
data () {
13+
return {
14+
longList: [
15+
{ type: 'A' },
16+
{ type: 'A' }
17+
]
18+
}
19+
}
20+
}
21+
</script>

0 commit comments

Comments
 (0)