-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(weex): WIP implement virtual component (#7165)
- Loading branch information
1 parent
70b97ac
commit b8d33ec
Showing
13 changed files
with
430 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 90 additions & 6 deletions
96
src/platforms/weex/runtime/recycle-list/virtual-component.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,90 @@ | ||
| // import { | ||
| // // id, 'lifecycle', hookname, fn | ||
| // // https://github.com/Hanks10100/weex-native-directive/tree/master/component | ||
| // registerComponentHook, | ||
| // updateComponentData | ||
| // } from '../util/index' | ||
| /* @flow */ | ||
|
|
||
| // https://github.com/Hanks10100/weex-native-directive/tree/master/component | ||
|
|
||
| import { mergeOptions } from 'core/util/index' | ||
| import { initProxy } from 'core/instance/proxy' | ||
| import { initState } from 'core/instance/state' | ||
| import { initRender } from 'core/instance/render' | ||
| import { initEvents } from 'core/instance/events' | ||
| import { initProvide, initInjections } from 'core/instance/inject' | ||
| import { initLifecycle, mountComponent, callHook } from 'core/instance/lifecycle' | ||
| import { initInternalComponent, resolveConstructorOptions } from 'core/instance/init' | ||
| import { registerComponentHook, updateComponentData } from '../../util/index' | ||
|
|
||
| let uid = 0 | ||
|
|
||
| // override Vue.prototype._init | ||
| function initVirtualComponent (options: Object = {}) { | ||
| const vm: Component = this | ||
| const componentId = options.componentId | ||
|
|
||
| // virtual component uid | ||
| vm._uid = `virtual-component-${uid++}` | ||
|
|
||
| // a flag to avoid this being observed | ||
| vm._isVue = true | ||
| // merge options | ||
| if (options && options._isComponent) { | ||
| // optimize internal component instantiation | ||
| // since dynamic options merging is pretty slow, and none of the | ||
| // internal component options needs special treatment. | ||
| initInternalComponent(vm, options) | ||
| } else { | ||
| vm.$options = mergeOptions( | ||
| resolveConstructorOptions(vm.constructor), | ||
| options || {}, | ||
| vm | ||
| ) | ||
| } | ||
|
|
||
| /* istanbul ignore else */ | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| initProxy(vm) | ||
| } else { | ||
| vm._renderProxy = vm | ||
| } | ||
|
|
||
| vm._self = vm | ||
| initLifecycle(vm) | ||
| initEvents(vm) | ||
| initRender(vm) | ||
| callHook(vm, 'beforeCreate') | ||
| initInjections(vm) // resolve injections before data/props | ||
| initState(vm) | ||
| initProvide(vm) // resolve provide after data/props | ||
| callHook(vm, 'created') | ||
|
|
||
| registerComponentHook(componentId, 'lifecycle', 'attach', () => { | ||
| mountComponent(vm) | ||
| }) | ||
|
|
||
| registerComponentHook(componentId, 'lifecycle', 'detach', () => { | ||
| vm.$destroy() | ||
| }) | ||
| } | ||
|
|
||
| // override Vue.prototype._update | ||
| function updateVirtualComponent (vnode: VNode, hydrating?: boolean) { | ||
| // TODO | ||
| updateComponentData(this.$options.componentId, {}) | ||
| } | ||
|
|
||
| // listening on native callback | ||
| export function resolveVirtualComponent (vnode: MountedComponentVNode): VNode { | ||
| const BaseCtor = vnode.componentOptions.Ctor | ||
| const VirtualComponent = BaseCtor.extend({}) | ||
| VirtualComponent.prototype._init = initVirtualComponent | ||
| VirtualComponent.prototype._update = updateVirtualComponent | ||
|
|
||
| vnode.componentOptions.Ctor = BaseCtor.extend({ | ||
| beforeCreate () { | ||
| registerComponentHook(VirtualComponent.cid, 'lifecycle', 'create', componentId => { | ||
| // create virtual component | ||
| const options = { componentId } | ||
| return new VirtualComponent(options) | ||
| }) | ||
| } | ||
| }) | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <template recyclable="true"> | ||
| <div> | ||
| <text class="output">{{output}}</text> | ||
| <input class="input" type="text" v-model="output" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| module.exports = { | ||
| props: ['message'], | ||
| data () { | ||
| return { | ||
| output: this.message | '' | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .output { | ||
| height: 80px; | ||
| font-size: 60px; | ||
| color: #41B883; | ||
| } | ||
| .input { | ||
| font-size: 50px; | ||
| color: #666666; | ||
| border-width: 2px; | ||
| border-color: #41B883; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <template recyclable="true"> | ||
| <div class="footer"> | ||
| <text class="copyright">All rights reserved.</text> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .footer { | ||
| height: 80px; | ||
| justify-content: center; | ||
| background-color: #EEEEEE; | ||
| } | ||
| .copyright { | ||
| color: #AAAAAA; | ||
| font-size: 32px; | ||
| text-align: center; | ||
| } | ||
| </style> |
48 changes: 48 additions & 0 deletions
48
test/weex/cases/recycle-list/components/stateful-v-model.vdom.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| ({ | ||
| type: 'recycle-list', | ||
| attr: { | ||
| listData: [ | ||
| { type: 'A' }, | ||
| { type: 'A' } | ||
| ], | ||
| templateKey: 'type', | ||
| alias: 'item' | ||
| }, | ||
| children: [{ | ||
| type: 'cell-slot', | ||
| attr: { templateType: 'A' }, | ||
| children: [{ | ||
| type: 'div', | ||
| attr: { | ||
| '@isComponentRoot': true, | ||
| '@componentProps': { | ||
| message: 'No binding' | ||
| } | ||
| }, | ||
| children: [{ | ||
| type: 'text', | ||
| style: { | ||
| height: '80px', | ||
| fontSize: '60px', | ||
| color: '#41B883' | ||
| }, | ||
| attr: { | ||
| value: { '@binding': 'output' } | ||
| } | ||
| }, { | ||
| type: 'input', | ||
| event: ['input'], | ||
| style: { | ||
| fontSize: '50px', | ||
| color: '#666666', | ||
| borderWidth: '2px', | ||
| borderColor: '#41B883' | ||
| }, | ||
| attr: { | ||
| type: 'text', | ||
| value: 0 | ||
| } | ||
| }] | ||
| }] | ||
| }] | ||
| }) |
21 changes: 21 additions & 0 deletions
21
test/weex/cases/recycle-list/components/stateful-v-model.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <template> | ||
| <recycle-list :list-data="longList" template-key="type" alias="item"> | ||
| <cell-slot template-type="A"> | ||
| <editor message="No binding"></editor> | ||
| </cell-slot> | ||
| </recycle-list> | ||
| </template> | ||
|
|
||
| <script> | ||
| // require('./editor.vue') | ||
| module.exports = { | ||
| data () { | ||
| return { | ||
| longList: [ | ||
| { type: 'A' }, | ||
| { type: 'A' } | ||
| ] | ||
| } | ||
| } | ||
| } | ||
| </script> |
Oops, something went wrong.