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/06/30 03:25:03 UTC
[2/5] incubator-weex git commit: + [html5] support vue-loader ^12.0
+ [html5] support vue-loader ^12.0
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/ec853550
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/ec853550
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/ec853550
Branch: refs/heads/0.14-dev
Commit: ec853550eece60153d966bbf7decc65e0090fb0e
Parents: ccc6c4b
Author: MrRaindrop <te...@gmail.com>
Authored: Thu Jun 29 14:35:48 2017 +0800
Committer: MrRaindrop <te...@gmail.com>
Committed: Thu Jun 29 14:35:48 2017 +0800
----------------------------------------------------------------------
build/webpack.examples.web.config.js | 1 +
html5/render/vue/core/style.js | 27 ++++++++------
html5/render/vue/env/global.js | 2 ++
html5/render/vue/env/weex.js | 3 ++
html5/render/vue/mixins/style.js | 58 ++++++++++++++++++++++++++-----
5 files changed, 73 insertions(+), 18 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ec853550/build/webpack.examples.web.config.js
----------------------------------------------------------------------
diff --git a/build/webpack.examples.web.config.js b/build/webpack.examples.web.config.js
index 4b81cc5..c28db57 100644
--- a/build/webpack.examples.web.config.js
+++ b/build/webpack.examples.web.config.js
@@ -81,6 +81,7 @@ module.exports = {
]
},
vue: {
+ optimizeSSR: false,
/**
* important! should use postTransformNode to add $processStyle for
* inline style prefixing.
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ec853550/html5/render/vue/core/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/core/style.js b/html5/render/vue/core/style.js
index 7230b74..d2b155a 100644
--- a/html5/render/vue/core/style.js
+++ b/html5/render/vue/core/style.js
@@ -41,8 +41,13 @@ export function getHeadStyleMap () {
tagBegin('getHeadStyleMap')
}
const needToRemoveStyleSheetNodes = []
- const res = Array.from(document.styleSheets || [])
+ const styleSheetsArr = Array.from(document.styleSheets || []).filter(function (styleSheet) {
+ return styleSheet.ownerNode.getAttribute('weex-scanned') !== '1'
+ })
+
+ const res = Array.from(styleSheetsArr)
.reduce((pre, styleSheet) => {
+ styleSheet.ownerNode.setAttribute('weex-scanned', 1)
/**
* why not using styleSheet.rules || styleSheet.cssRules to get css rules ?
* because weex's components defined non-standard style attributes, which is
@@ -50,16 +55,18 @@ export function getHeadStyleMap () {
* another reason not to use cssRules directy:
* @issue: https://stackoverflow.com/questions/21642277/security-error-the-operation-is-insecure-in-firefox-document-stylesheets
*/
- if ((styleSheet.ownerNode.tagName.toLowerCase() === 'link')
- || !styleSheet.ownerNode.textContent) {
- /**
- * css in a link. just ignore this. probably a link stylesheet.
- */
- return pre
- }
- if (styleSheet.ownerNode.id.match(/weex-pseudo-\d+/)) {
+ if (
+ // css in a link. just ignore this. probably a link stylesheet.
+ (styleSheet.ownerNode.tagName.toLowerCase() === 'link')
+ || !styleSheet.ownerNode.textContent
+ // pseudo class styleSheet node is generated by weex. just ignore it.
+ || styleSheet.ownerNode.id.match(/weex-pseudo-\d+/)) {
return pre
}
+
+ /**
+ * start to analyze it's content.
+ */
const strArr = trimComment(styleSheet.ownerNode.textContent.trim()).split(/}/)
const len = strArr.length
const rules = []
@@ -170,7 +177,7 @@ export function getScopeId (vnode) {
export function getScopeStyle (vnode, classNames) {
const scopeId = getScopeId(vnode)
const style = {}
- const styleMap = weex.styleMap || {}
+ const styleMap = weex._styleMap || {}
let clsNmsIdx = 0
const clsNmsLen = classNames.length
while (clsNmsIdx < clsNmsLen) {
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ec853550/html5/render/vue/env/global.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/env/global.js b/html5/render/vue/env/global.js
index 337244e..e872c4f 100644
--- a/html5/render/vue/env/global.js
+++ b/html5/render/vue/env/global.js
@@ -22,6 +22,8 @@ import * as core from '../core'
window.global = window
window.weex = weex
+weex._styleMap = {}
+
; ['getComponentStyle',
'extractComponentStyle',
'createEventMap',
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ec853550/html5/render/vue/env/weex.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/env/weex.js b/html5/render/vue/env/weex.js
index e5ae94b..cffb2e2 100644
--- a/html5/render/vue/env/weex.js
+++ b/html5/render/vue/env/weex.js
@@ -33,6 +33,8 @@ const weex = {
bundleUrl: location.href
},
+ _components: {},
+
document: {
body: {}
},
@@ -89,6 +91,7 @@ const weex = {
if (!this.__vue__) {
return console.log('[Vue Render] Vue is not found. Please import Vue.js before register a component.')
}
+ this._components[name] = 1
if (component._css) {
const css = component._css.replace(/\b[+-]?[\d.]+rem;?\b/g, function (m) {
return parseFloat(m) * 75 * weex.config.env.scale + 'px'
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/ec853550/html5/render/vue/mixins/style.js
----------------------------------------------------------------------
diff --git a/html5/render/vue/mixins/style.js b/html5/render/vue/mixins/style.js
index 394c1ab..5be2edc 100644
--- a/html5/render/vue/mixins/style.js
+++ b/html5/render/vue/mixins/style.js
@@ -28,21 +28,63 @@ import {
extend
} from '../utils'
-export default {
- beforeCreate () {
+/**
+ * get a beforeCreate hook, which has a mark to identify the hook function itself.
+ */
+function getIdentifiedBeforeCreate () {
+ const disposed = {} // disposed components. Already scanned.
+ function beforeCreate () {
/**
* get static class style map from document's styleSheets.
* Weex.on will create a Vue instance. In this case we'll ignore it, since
* it's not sure whether the scoped style has already attached to head or not.
*/
- if (this === this.$root && this.$options && !this._styleMapGot) {
- if (!weex.styleMap) {
- weex.styleMap = {}
+ const tagName = this.$options && this.$options._componentTag
+ /**
+ * For vue-loader ^11.3.x, there's no injectStyle function. The styleSheet
+ * is already injected into the head. Just scan it.
+ */
+ if (this === this.$root && this.$options && !this._firstScanned) {
+ this._firstScanned = true
+ extend(weex._styleMap, getHeadStyleMap())
+ }
+ /**
+ * For vue-loader ^12.0, the injectStyle function is hooked. We should scan
+ * style map after the injectStyle hook called.
+ */
+ if (((this === this.$root && this.$options)
+ || (tagName
+ && !weex._components[tagName]
+ && !disposed[tagName]))
+ && !this._secondScanned) {
+ disposed[tagName] = 1
+ this._secondScanned = true
+ const hooks = this.$options.beforeCreate
+ const len = hooks.length
+ let thisHookIdx = 0 // index of this hook in the hooks array.
+ for (; thisHookIdx < len; thisHookIdx++) {
+ if (hooks[thisHookIdx]._styleMixin) { break }
+ }
+ for (let i = thisHookIdx + 1; i < len; i++) {
+ const func = hooks[i]
+ if (func.name === 'injectStyle') {
+ hooks[i] = function () {
+ // call the original injectStyle hook.
+ func.call(this)
+ // scan the new appended styleSheet.
+ extend(weex._styleMap, getHeadStyleMap())
+ hooks[i] = func
+ }
+ }
}
- this._styleMapGot = true
- extend(weex.styleMap, getHeadStyleMap())
}
- },
+ }
+ beforeCreate._styleMixin = true
+ return beforeCreate
+}
+
+export default {
+ beforeCreate: getIdentifiedBeforeCreate(),
methods: {
$processStyle (style) {