You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ta...@apache.org on 2017/05/25 02:45:47 UTC
[05/50] incubator-weex git commit: * [html5] use to preprocess
vnode's style data,
which will be directly used in updateChildren patch ignoring the render
function processing.
* [html5] use to preprocess vnode's style data, which will be directly used in updateChildren patch ignoring the render function processing.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/6ed07bd5
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/6ed07bd5
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/6ed07bd5
Branch: refs/heads/0.13-dev
Commit: 6ed07bd5c521d8c77cce5dbcdc994f9aad3939ed
Parents: c853cb9
Author: MrRaindrop <te...@gmail.com>
Authored: Thu May 4 18:25:23 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Thu May 4 18:25:23 2017 +0800
----------------------------------------------------------------------
build/webpack.examples.web.config.js | 29 +++++++++++------------
build/webpack.test.web.config.js | 21 ++++++++---------
html5/render/vue/core/style.js | 15 ++++++++----
html5/render/vue/mixins/base.js | 38 +++++++++++++-----------------
html5/render/vue/mixins/style.js | 14 ++++++-----
package.json | 2 +-
packages/weex-vue-render/package.json | 2 +-
7 files changed, 60 insertions(+), 61 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/6ed07bd5/build/webpack.examples.web.config.js
----------------------------------------------------------------------
diff --git a/build/webpack.examples.web.config.js b/build/webpack.examples.web.config.js
index 5f329ed..4b81cc5 100644
--- a/build/webpack.examples.web.config.js
+++ b/build/webpack.examples.web.config.js
@@ -80,20 +80,19 @@ module.exports = {
}
]
},
- // vue: {
- // /**
- // * important! should use postTransformNode to add $processStyle for
- // * inline style prefixing.
- // */
- // compilerModules: [
- // {
- // postTransformNode: el => {
- // el.staticStyle = `$processStyle(${el.staticStyle})`
- // el.styleBinding = `$processStyle(${el.styleBinding})`
- // }
- // }
- // ],
- // postcss: [require('autoprefixer')()]
- // },
+ vue: {
+ /**
+ * important! should use postTransformNode to add $processStyle for
+ * inline style prefixing.
+ */
+ compilerModules: [
+ {
+ postTransformNode: el => {
+ el.staticStyle = `$processStyle(${el.staticStyle})`
+ el.styleBinding = `$processStyle(${el.styleBinding})`
+ }
+ }
+ ],
+ },
plugins: [bannerPlugin]
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/6ed07bd5/build/webpack.test.web.config.js
----------------------------------------------------------------------
diff --git a/build/webpack.test.web.config.js b/build/webpack.test.web.config.js
index 64e0009..3135852 100644
--- a/build/webpack.test.web.config.js
+++ b/build/webpack.test.web.config.js
@@ -80,20 +80,19 @@ module.exports = {
}
]
},
- // vue: {
+ vue: {
/**
* important! should use postTransformNode to add $processStyle for
* inline style prefixing.
*/
- // compilerModules: [
- // {
- // postTransformNode: el => {
- // el.staticStyle = `$processStyle(${el.staticStyle})`
- // el.styleBinding = `$processStyle(${el.styleBinding})`
- // }
- // }
- // ],
- // postcss: [require('autoprefixer')()]
- // }
+ compilerModules: [
+ {
+ postTransformNode: el => {
+ el.staticStyle = `$processStyle(${el.staticStyle})`
+ el.styleBinding = `$processStyle(${el.styleBinding})`
+ }
+ }
+ ]
+ }
// plugins: [bannerPlugin]
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/6ed07bd5/html5/render/vue/core/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/core/style.js b/html5/render/vue/core/style.js
index 4f6aa78..2d6ec6f 100644
--- a/html5/render/vue/core/style.js
+++ b/html5/render/vue/core/style.js
@@ -158,7 +158,7 @@ export function getScopeStyle (vnode, classNames) {
map && extendTruthy(style, map)
clsNmsIdx++
}
- return style
+ return camelizeKeys(style)
}
function getStyle (vnode, extract) {
@@ -166,20 +166,25 @@ function getStyle (vnode, extract) {
const staticClassNames = (typeof data.staticClass === 'string') ? data.staticClass.split(' ') : (data.staticClass || [])
const classNames = (typeof data.class === 'string') ? data.class.split(' ') : (data.class || [])
const clsNms = staticClassNames.concat(classNames)
- const style = getScopeStyle(vnode, clsNms)
+ const style = normalizeStyle(getScopeStyle(vnode, clsNms))
+ /**
+ * cache static style and bind style.
+ * cached staticStyle (including style and staticStyle) has already been normalized
+ * in $processStyle. So there's no need to normalize it again.
+ */
if (!data.cached) {
// cache staticStyle once in the beginning.
data.cached = extendTruthy({}, data.staticStyle)
}
// cache binding style every time since the binding style is variable.
extendTruthy(data.cached, data.style)
- extend(style, data.cached)
+ extend(style, camelizeKeys(data.cached))
data.staticStyle = style
if (extract) {
delete data.staticStyle
delete data.style
}
- return camelizeKeys(style)
+ return style
}
/**
@@ -199,7 +204,7 @@ export function getComponentStyle (context, extract) {
extend(style, getStyle(vnode, extract))
vnode = vnode.parent
}
- style = addPrefix(normalizeStyle(style))
+ style = addPrefix(style)
/**
* when prefixed value is a array, it should be applied to element
* during the next tick.
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/6ed07bd5/html5/render/vue/mixins/base.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/mixins/base.js b/html5/render/vue/mixins/base.js
index 0b49566..e1476b0 100644
--- a/html5/render/vue/mixins/base.js
+++ b/html5/render/vue/mixins/base.js
@@ -52,6 +52,17 @@ function watchLazyload () {
})
}
+let warned = false
+const notePage = 'https://gist.github.com/MrRaindrop/5a805a067146609e5cfd4d64d775d693#file-weex-vue-render-config-for-vue-loader-js'
+function warnProcessStyle () {
+ if (!warned) {
+ warned = true
+ const page = window._process_style_note_page || notePage
+ console.warn(`[vue-render]: you should add vue-loader config with $processStyle to enable inline styles's `
+ + `normalization. see ${page} If you already did this, please ignore this message.`)
+ }
+}
+
export default {
beforeCreate () {
if (!lazyloadWatched) {
@@ -77,6 +88,11 @@ export default {
weex._root.classList.add('weex-root')
}
+ // give warning for not using $processStyle in vue-loader config.
+ if (!warned && !window._style_processing_added) {
+ warnProcessStyle()
+ }
+
// bind attrs to $el.
let i, j
if (this.$el && (i = j = this.$vnode) && (i = i.data) && (j = j.componentOptions)) {
@@ -96,28 +112,6 @@ export default {
if (process.env.NODE_ENV === 'development') {
tagUpdated()
}
-
- /**
- * During updating process, updateChildren will not process the render function of the
- * children's components. Therefore it is necessary to process children's static styles in
- * this hook func.
- */
- const children = this.$children
- if (children) {
- children.forEach((childVm) => {
- /**
- * Has to delete the previousVnode's staticStyle. Otherwise some style props may not
- * be attached on the dom, since the previous staticStyle val is equal with the new
- * updated style val.
- */
- let i
- if ((i = childVm._vnode) && (i = childVm._vnode.data)) {
- delete i.staticStyle
- }
- childVm._watcher.run()
- })
- }
-
watchAppear(this)
},
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/6ed07bd5/html5/render/vue/mixins/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/mixins/style.js b/html5/render/vue/mixins/style.js
index 8625537..69b7dc2 100644
--- a/html5/render/vue/mixins/style.js
+++ b/html5/render/vue/mixins/style.js
@@ -22,8 +22,10 @@ import {
extractComponentStyle
} from '../core'
-let warned = false
-const warnInfo = `[vue-render] after v0.11.3 there's no need to add $processStyle in vue-loader config anymore.`
+import {
+ normalizeStyle,
+ camelizeKeys
+} from '../utils'
export default {
beforeCreate () {
@@ -35,11 +37,11 @@ export default {
methods: {
$processStyle (style) {
- if (!warned) {
- warned = true
- console.warn(warnInfo)
+ window._style_processing_added = true
+ if (!style) {
+ return
}
- return style
+ return normalizeStyle(camelizeKeys(style))
},
_extractComponentStyle () {
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/6ed07bd5/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
index 4637764..5d0530f 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"subversion": {
"browser": "0.5.0",
"framework": "0.20.5",
- "vue-render": "0.11.17",
+ "vue-render": "0.11.18",
"transformer": ">=0.1.5 <0.5"
},
"description": "A framework for building Mobile cross-platform UI",
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/6ed07bd5/packages/weex-vue-render/package.json
----------------------------------------------------------------------
diff --git a/packages/weex-vue-render/package.json b/packages/weex-vue-render/package.json
index 5d95837..d7ec02d 100644
--- a/packages/weex-vue-render/package.json
+++ b/packages/weex-vue-render/package.json
@@ -1,6 +1,6 @@
{
"name": "weex-vue-render",
- "version": "0.11.17",
+ "version": "0.11.18",
"description": "Weex built-in components for Vue 2.x.",
"license": "Apache-2.0",
"main": "dist/index.js",