You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by fk...@apache.org on 2017/04/12 08:27:54 UTC
[11/17] incubator-weex git commit: * [html5] add funciontal methods
createEventMap & trimTextNodes.
* [html5] add funciontal methods createEventMap & trimTextNodes.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/ff76bfa1
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/ff76bfa1
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/ff76bfa1
Branch: refs/heads/0.11-dev
Commit: ff76bfa148cc1418f82e1b138c3449a46e8bc53e
Parents: e49dad6
Author: MrRaindrop <te...@gmail.com>
Authored: Sun Apr 9 18:38:55 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Sun Apr 9 18:38:55 2017 +0800
----------------------------------------------------------------------
html5/render/vue/components/a.js | 6 ++--
html5/render/vue/components/div.js | 6 ++--
html5/render/vue/components/image.js | 4 +--
html5/render/vue/components/input.js | 4 +--
.../render/vue/components/scrollable/header.js | 4 +--
.../vue/components/scrollable/list/cell.js | 4 +--
.../vue/components/scrollable/list/index.js | 4 +--
.../vue/components/scrollable/scroller.js | 4 +--
html5/render/vue/components/slider/index.js | 4 +--
html5/render/vue/components/text.js | 4 +--
html5/render/vue/components/textarea.js | 4 +--
html5/render/vue/components/video.js | 4 +--
html5/render/vue/components/web.js | 4 +--
html5/render/vue/core/index.js | 1 +
html5/render/vue/core/node.js | 28 +++++++++++++++++++
html5/render/vue/env/global.js | 11 ++++++++
html5/render/vue/env/index.js | 9 ++----
html5/render/vue/mixins/base.js | 20 --------------
html5/test/render/vue/core/style.js | 29 ++++++++++----------
html5/test/render/vue/helper/index.js | 4 +--
html5/test/render/vue/helper/runtime.js | 3 +-
21 files changed, 87 insertions(+), 74 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/components/a.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/a.js b/html5/render/vue/components/a.js
index 18b0b16..83851b2 100644
--- a/html5/render/vue/components/a.js
+++ b/html5/render/vue/components/a.js
@@ -1,4 +1,4 @@
-import { extractComponentStyle } from '../core'
+import { extractComponentStyle, trimTextVNodes, createEventMap } from '../core'
// import { validateStyles } from '../validator'
const _css = `
@@ -22,10 +22,10 @@ export default {
'weex-type': 'a',
href: this.href
},
- on: this._createEventMap(),
+ on: createEventMap(this),
staticClass: 'weex-a weex-ct',
staticStyle: extractComponentStyle(this)
- }, this._trimTextNodeChildren(this.$slots.default))
+ }, trimTextVNodes(this.$slots.default))
},
_css
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/components/div.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/div.js b/html5/render/vue/components/div.js
index 426b678..bdc90d0 100644
--- a/html5/render/vue/components/div.js
+++ b/html5/render/vue/components/div.js
@@ -1,5 +1,5 @@
// import { validateStyles } from '../validator'
-import { extractComponentStyle } from '../core'
+import { extractComponentStyle, trimTextVNodes, createEventMap } from '../core'
const _css = `
body > .weex-div {
@@ -16,10 +16,10 @@ export default {
// }
return createElement('html:div', {
attrs: { 'weex-type': 'div' },
- on: this._createEventMap(),
+ on: createEventMap(this),
staticClass: 'weex-div weex-ct',
staticStyle: extractComponentStyle(this)
- }, this._trimTextNodeChildren(this.$slots.default))
+ }, trimTextVNodes(this.$slots.default))
},
_css
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/components/image.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/image.js b/html5/render/vue/components/image.js
index 98ad632..b245338 100644
--- a/html5/render/vue/components/image.js
+++ b/html5/render/vue/components/image.js
@@ -1,4 +1,4 @@
-import { extractComponentStyle } from '../core/style'
+import { extractComponentStyle, createEventMap } from '../core'
import { extend } from '../utils'
const _css = `
@@ -66,7 +66,7 @@ export default {
'img-src': preProcessSrc(this, this.src, style),
'img-placeholder': preProcessSrc(this, this.placeholder, style)
},
- on: this._createEventMap(['load', 'error']),
+ on: createEventMap(this, ['load', 'error']),
staticClass: 'weex-image weex-el',
staticStyle: extend(style, resizeStyle)
})
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/components/input.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/input.js b/html5/render/vue/components/input.js
index 2d3590e..0f68604 100644
--- a/html5/render/vue/components/input.js
+++ b/html5/render/vue/components/input.js
@@ -2,7 +2,7 @@
* @fileOverview Input component.
* Support v-model only if vue version is large than 2.2.0
*/
-import { extractComponentStyle } from '../core'
+import { extractComponentStyle, createEventMap } from '../core'
import { inputCommon } from '../mixins'
import { extend, mapFormEvents } from '../utils'
// import { validateStyles } from '../validator'
@@ -50,7 +50,7 @@ export default {
// if (process.env.NODE_ENV === 'development') {
// validateStyles('input', this.$vnode.data && this.$vnode.data.staticStyle)
// }
- const events = extend(this._createEventMap(), mapFormEvents(this))
+ const events = extend(createEventMap(this), mapFormEvents(this))
return createElement('html:input', {
attrs: {
'weex-type': 'input',
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/components/scrollable/header.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/header.js b/html5/render/vue/components/scrollable/header.js
index 64ebd77..9fdeddb 100644
--- a/html5/render/vue/components/scrollable/header.js
+++ b/html5/render/vue/components/scrollable/header.js
@@ -1,6 +1,6 @@
// import { validateStyles } from '../../validator'
import { supportSticky } from '../../utils/style'
-import { extractComponentStyle } from '../../core'
+import { extractComponentStyle, createEventMap } from '../../core'
export default {
data () {
@@ -49,7 +49,7 @@ export default {
// }
return createElement('html:header', {
attrs: { 'weex-type': 'header' },
- on: this._createEventMap(),
+ on: createEventMap(this),
ref: 'header',
staticClass: 'weex-header weex-ct',
class: { sticky: this.sticky, iossticky: this.supportSticky },
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/components/scrollable/list/cell.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/list/cell.js b/html5/render/vue/components/scrollable/list/cell.js
index 32ec1f9..ab8910c 100644
--- a/html5/render/vue/components/scrollable/list/cell.js
+++ b/html5/render/vue/components/scrollable/list/cell.js
@@ -1,5 +1,5 @@
// import { validateStyles } from '../../../validator'
-import { extractComponentStyle } from '../../../core'
+import { extractComponentStyle, createEventMap } from '../../../core'
export default {
render (createElement) {
@@ -9,7 +9,7 @@ export default {
// }
return createElement('section', {
attrs: { 'weex-type': 'cell' },
- on: this._createEventMap(),
+ on: createEventMap(this),
staticClass: 'weex-cell weex-ct',
staticStyle: extractComponentStyle(this)
}, this.$slots.default)
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/components/scrollable/list/index.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/list/index.js b/html5/render/vue/components/scrollable/list/index.js
index 2db5239..fc803c6 100644
--- a/html5/render/vue/components/scrollable/list/index.js
+++ b/html5/render/vue/components/scrollable/list/index.js
@@ -1,4 +1,4 @@
-import { extractComponentStyle } from '../../../core'
+import { extractComponentStyle, createEventMap } from '../../../core'
import { scrollable } from '../../../mixins'
// import { validateStyles } from '../../../validator'
import { extend } from '../../../utils'
@@ -57,7 +57,7 @@ export default {
ref: 'wrapper',
attrs: { 'weex-type': 'list' },
staticClass: this.wrapperClass,
- on: extend(this._createEventMap(), {
+ on: extend(createEventMap(this), {
scroll: this.handleListScroll,
touchstart: this.handleTouchStart,
touchmove: this.handleTouchMove,
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/components/scrollable/scroller.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/scrollable/scroller.js b/html5/render/vue/components/scrollable/scroller.js
index ee117e2..b56ef70 100644
--- a/html5/render/vue/components/scrollable/scroller.js
+++ b/html5/render/vue/components/scrollable/scroller.js
@@ -1,4 +1,4 @@
-import { extractComponentStyle } from '../../core'
+import { extractComponentStyle, createEventMap } from '../../core'
import { scrollable } from '../../mixins'
// import { validateStyles } from '../../validator'
import { extend } from '../../utils'
@@ -76,7 +76,7 @@ export default {
return createElement('main', {
ref: 'wrapper',
attrs: { 'weex-type': 'scroller' },
- on: extend(this._createEventMap(), {
+ on: extend(createEventMap(this), {
scroll: this.handleScroll,
touchstart: this.handleTouchStart,
touchmove: this.handleTouchMove,
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/components/slider/index.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/slider/index.js b/html5/render/vue/components/slider/index.js
index ab7187d..b37b0a2 100644
--- a/html5/render/vue/components/slider/index.js
+++ b/html5/render/vue/components/slider/index.js
@@ -1,5 +1,5 @@
// import { validateStyles } from '../../validator'
-import { extractComponentStyle } from '../../core'
+import { extractComponentStyle, createEventMap } from '../../core'
import { throttle, bind, extend, fireLazyload } from '../../utils'
import indicator from './indicator'
import slideMixin from './slideMixin'
@@ -154,7 +154,7 @@ export default {
ref: 'wrapper',
attrs: { 'weex-type': 'slider' },
staticClass: 'weex-slider weex-slider-wrapper weex-ct',
- on: extend(this._createEventMap(['scroll', 'scrollstart', 'scrollend']), {
+ on: extend(createEventMap(this, ['scroll', 'scrollstart', 'scrollend']), {
touchstart: this.handleTouchStart,
touchmove: throttle(bind(this.handleTouchMove, this), 25),
touchend: this.handleTouchEnd
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/components/text.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/text.js b/html5/render/vue/components/text.js
index 6963b0b..68a6f32 100644
--- a/html5/render/vue/components/text.js
+++ b/html5/render/vue/components/text.js
@@ -6,7 +6,7 @@
* be clipped according to the 'lines'. Otherwise, it'll be the 'height'.
*/
-import { extractComponentStyle } from '../core'
+import { extractComponentStyle, createEventMap } from '../core'
import { extend } from '../utils'
const _css = `
@@ -51,7 +51,7 @@ export default {
const textSpecStyle = getTextSpecStyle(style)
return createElement('p', {
attrs: { 'weex-type': 'text' },
- on: this._createEventMap(),
+ on: createEventMap(this),
staticClass: 'weex-text weex-el',
staticStyle: extend(style, textSpecStyle)
}, this.$slots.default || [this.value])
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/components/textarea.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/textarea.js b/html5/render/vue/components/textarea.js
index e017512..bc1ffdf 100644
--- a/html5/render/vue/components/textarea.js
+++ b/html5/render/vue/components/textarea.js
@@ -1,4 +1,4 @@
-import { extractComponentStyle } from '../core'
+import { extractComponentStyle, createEventMap } from '../core'
import { inputCommon } from '../mixins'
import { extend, mapFormEvents } from '../utils'
@@ -38,7 +38,7 @@ export default {
// if (process.env.NODE_ENV === 'development') {
// validateStyles('textarea', this.$vnode.data && this.$vnode.data.staticStyle)
// }
- const events = extend(this._createEventMap(), mapFormEvents(this))
+ const events = extend(createEventMap(this), mapFormEvents(this))
return createElement('html:textarea', {
attrs: {
'weex-type': 'textarea',
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/components/video.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/video.js b/html5/render/vue/components/video.js
index 5d8c312..8c52672 100644
--- a/html5/render/vue/components/video.js
+++ b/html5/render/vue/components/video.js
@@ -1,5 +1,5 @@
// import { validateStyles } from '../validator'
-import { extractComponentStyle } from '../core'
+import { extractComponentStyle, createEventMap } from '../core'
export default {
props: {
@@ -46,7 +46,7 @@ export default {
controls: this.controls,
src: this.src
},
- on: this._createEventMap(['start', 'pause', 'finish', 'fail']),
+ on: createEventMap(this, ['start', 'pause', 'finish', 'fail']),
staticClass: 'weex-video weex-el',
staticStyle: extractComponentStyle(this)
})
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/components/web.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/components/web.js b/html5/render/vue/components/web.js
index f810e4b..9ae7d5f 100644
--- a/html5/render/vue/components/web.js
+++ b/html5/render/vue/components/web.js
@@ -1,4 +1,4 @@
-import { extractComponentStyle } from '../core'
+import { extractComponentStyle, createEventMap } from '../core'
import { createEvent } from '../utils'
// import { validateStyles } from '../validator'
@@ -55,7 +55,7 @@ export default {
'weex-type': 'web',
src: this.src
},
- on: this._createEventMap(['error']),
+ on: createEventMap(this, ['error']),
staticClass: 'weex-web weex-el',
staticStyle: extractComponentStyle(this)
})
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/core/index.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/core/index.js b/html5/render/vue/core/index.js
index 57fe34e..04f56bc 100644
--- a/html5/render/vue/core/index.js
+++ b/html5/render/vue/core/index.js
@@ -1 +1,2 @@
export * from './style'
+export * from './node'
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/core/node.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/core/node.js b/html5/render/vue/core/node.js
new file mode 100644
index 0000000..905d828
--- /dev/null
+++ b/html5/render/vue/core/node.js
@@ -0,0 +1,28 @@
+/**
+ * remove text nodes in the nodes array.
+ * @param {Array} nodes
+ * @return {Array} nodes without text nodes.
+ */
+export function trimTextVNodes (vnodes) {
+ if (Array.isArray(vnodes)) {
+ return vnodes.filter(vnode => !!vnode.tag)
+ }
+ return vnodes
+}
+
+const supportedEvents = [
+ 'click', 'longpress', 'appear', 'disappear'
+ // 'touchstart', 'touchmove', 'touchend'
+]
+/**
+ * emit native events to enable v-on.
+ * @param {VComponent} context: which one to emit a event on.
+ * @param {array} extras: extra events.
+ */
+export function createEventMap (context, extras = []) {
+ const eventMap = {}
+ supportedEvents.concat(extras).forEach(name => {
+ eventMap[name] = event => context.$emit(name, event)
+ })
+ return eventMap
+}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/env/global.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/env/global.js b/html5/render/vue/env/global.js
new file mode 100644
index 0000000..5dd375c
--- /dev/null
+++ b/html5/render/vue/env/global.js
@@ -0,0 +1,11 @@
+import weex from './weex'
+import * as core from '../core'
+
+window.global = window
+window.weex = weex
+
+; ['getComponentStyle',
+ 'extractComponentStyle',
+ 'trimTextVNodes'].forEach(function (method) {
+ weex[method] = core[method].bind(weex)
+ })
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/env/index.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/env/index.js b/html5/render/vue/env/index.js
index 0d997ee..73f640e 100644
--- a/html5/render/vue/env/index.js
+++ b/html5/render/vue/env/index.js
@@ -14,20 +14,17 @@ import 'core-js/modules/web.dom.iterable'
import 'core-js/modules/es6.promise'
import modules from '../modules'
-import weex from './weex'
+import './global'
// register built-in modules.
-weex.install(modules)
+global.weex.install(modules)
export function setVue (vue) {
if (!vue) {
throw new Error('[Vue Render] Vue not found. Please make sure vue 2.x runtime is imported.')
}
- weex.__vue__ = vue
+ global.weex.__vue__ = vue
console.log(`[Vue Render] install Vue ${vue.version}.`)
}
-window.weex = weex
-window.global = window
-
export default weex
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/render/vue/mixins/base.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/mixins/base.js b/html5/render/vue/mixins/base.js
index 8f0953e..d0262c9 100644
--- a/html5/render/vue/mixins/base.js
+++ b/html5/render/vue/mixins/base.js
@@ -1,11 +1,6 @@
import { getThrottleLazyload, watchAppear } from '../utils'
import { tagBeforeCreate, tagMounted, tagBeforeUpdate, tagUpdated, tagBegin, tagEnd } from '../utils/perf'
-const supportedEvents = [
- 'click', 'longpress', 'appear', 'disappear'
- // 'touchstart', 'touchmove', 'touchend'
-]
-
const scrollableTypes = ['scroller', 'list']
let lazyloadWatched = false
@@ -77,14 +72,6 @@ export default {
return parent
},
- _createEventMap (extras = []) {
- const eventMap = {}
- supportedEvents.concat(extras).forEach(name => {
- eventMap[name] = event => this.$emit(name, event)
- })
- return eventMap
- },
-
_fireLazyload (el) {
if (process.env.NODE_ENV === 'development') {
tagBegin('base._fireLazyload')
@@ -93,13 +80,6 @@ export default {
if (process.env.NODE_ENV === 'development') {
tagEnd('base._fireLazyload')
}
- },
-
- _trimTextNodeChildren (children) {
- if (Array.isArray(children)) {
- return children.filter(vnode => !!vnode.tag)
- }
- return children
}
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/test/render/vue/core/style.js
----------------------------------------------------------------------
diff --git a/html5/test/render/vue/core/style.js b/html5/test/render/vue/core/style.js
index cacdd57..6b4a5ae 100644
--- a/html5/test/render/vue/core/style.js
+++ b/html5/test/render/vue/core/style.js
@@ -36,9 +36,8 @@ init('core style', (Vue, helper) => {
it('should get normalized merged styles.', function () {
const vm = helper.createVm(scopedStyleBundle)
- const el = vm.$refs.foo.$el
+ const el = vm.$refs.foo.$el || vm.$refs.foo
expect(el).to.be.ok
-
const expectedMap = {
width: 200 * scale + 'px',
height: 200 * scale + 'px',
@@ -55,19 +54,19 @@ init('core style', (Vue, helper) => {
transform: `translate3d(${100 * scale + 'px'}, ${100 * scale + 'px'}, 0px)`
}
- for (const k in expectedMap) {
- expect(el.style[k]).to.equal(expectedMap[k])
- }
- const directionRes = []
- for (const k in expectedDirection) {
- directionRes.push(el.style[k] === expectedDirection[k])
- }
- expect(directionRes).to.include(true)
+ for (const k in expectedMap) {
+ expect(el.style[k]).to.equal(expectedMap[k])
+ }
+ const directionRes = []
+ for (const k in expectedDirection) {
+ directionRes.push(el.style[k] === expectedDirection[k])
+ }
+ expect(directionRes).to.include(true)
- const transformRes = []
- for (const k in expectedTransform) {
- transformRes.push(el.style[k] === expectedTransform[k])
- }
- expect(transformRes).to.include(true)
+ const transformRes = []
+ for (const k in expectedTransform) {
+ transformRes.push(el.style[k] === expectedTransform[k])
+ }
+ expect(transformRes).to.include(true)
})
})
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/test/render/vue/helper/index.js
----------------------------------------------------------------------
diff --git a/html5/test/render/vue/helper/index.js b/html5/test/render/vue/helper/index.js
index e89ac86..90e7371 100644
--- a/html5/test/render/vue/helper/index.js
+++ b/html5/test/render/vue/helper/index.js
@@ -24,10 +24,9 @@ export function init (title, fn) {
Vue.mixin(base)
Vue.mixin(style)
- setVue(Vue)
-
window.global = window
global.weex = weex
+ setVue(Vue)
window._no_remove_style_sheets = true
})
@@ -42,7 +41,6 @@ export function init (title, fn) {
*/
register (name, component) {
global.weex.registerComponent(name, component)
- // components[name] = component
},
/**
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ff76bfa1/html5/test/render/vue/helper/runtime.js
----------------------------------------------------------------------
diff --git a/html5/test/render/vue/helper/runtime.js b/html5/test/render/vue/helper/runtime.js
index 319fd20..140405a 100644
--- a/html5/test/render/vue/helper/runtime.js
+++ b/html5/test/render/vue/helper/runtime.js
@@ -24,10 +24,9 @@ export function init (title, fn) {
Vue.mixin(base)
Vue.mixin(style)
- setVue(Vue)
-
window.global = window
global.weex = weex
+ setVue(Vue)
window._no_remove_style_sheets = true
})