提交 ea808591 编写于 作者: Q qiang

wip: virtualHost style

上级 453df92d
......@@ -66,6 +66,8 @@ module.exports = {
ATTR_DATA_EVENT_PARAMS: 'data-event-params',
ATTR_DATA_EVENT_LIST: 'data-event-list',
ATTE_DATA_CUSTOM_HIDDEN: 'data-custom-hidden',
VIRTUAL_HOST_STYLE: 'virtualHostStyle',
VIRTUAL_HOST_CLASS: 'virtualHostClass',
INTERNAL_GET_ORIG,
INTERNAL_GET_CLASS,
INTERNAL_GET_STYLE,
......
const t = require('@babel/types')
const uniI18n = require('@dcloudio/uni-cli-i18n')
const {
VIRTUAL_HOST_CLASS
} = require('../../../constants')
const {
getCode
} = require('../../../util')
const {
isRootElement
} = require('./util')
function processClassArrayExpressionElements (classArrayExpression) {
let binaryExpression
......@@ -76,45 +84,30 @@ function processClassArrayExpression (classValuePath) {
module.exports = function processClass (paths, path, state) {
const classPath = paths.class
const staticClassPath = paths.staticClass
const platformName = state.options.platform.name
const virtualHost = platformName === 'mp-weixin' || platformName === 'mp-alipay'
let classArrayExpression
if (classPath) {
const classValuePath = classPath.get('value')
if (classValuePath.isObjectExpression()) { // object
classValuePath.replaceWith(
processStaticClass(
processClassObjectExpression(classValuePath),
staticClassPath,
state
)
)
classArrayExpression = processClassObjectExpression(classValuePath)
} else if (classValuePath.isArrayExpression()) { // array
classValuePath.replaceWith(
processStaticClass(
processClassArrayExpression(classValuePath),
staticClassPath,
state
)
)
classArrayExpression = processClassArrayExpression(classValuePath)
} else if (
classValuePath.isStringLiteral() || // :class="'a'"
classValuePath.isIdentifier() || // TODO 需要优化到下一个条件,:class="classObject"
classValuePath.isMemberExpression() || // 需要优化到下一个条件,:class="item.classObject"
classValuePath.isConditionalExpression() ||
classValuePath.isLogicalExpression() ||
classValuePath.isBinaryExpression()
classValuePath.isIdentifier() || // TODO 需要优化到下一个条件,:class="classObject"
classValuePath.isMemberExpression() || // 需要优化到下一个条件,:class="item.classObject"
classValuePath.isConditionalExpression() ||
classValuePath.isLogicalExpression() ||
classValuePath.isBinaryExpression()
) {
// 理论上 ConditionalExpression,LogicalExpression 可能存在 classObject,应该__get_class,还是先不考虑这种情况吧
// ConditionalExpression :class="index === currentIndex ? activeStyle : itemStyle"
// BinaryExpression :class="'m-content-head-'+message.user"
classValuePath.replaceWith(
processStaticClass(
t.arrayExpression([classValuePath.node]),
staticClassPath,
state
)
)
classArrayExpression = t.arrayExpression([classValuePath.node])
} else if (
classValuePath.isIdentifier() ||
classValuePath.isMemberExpression()
classValuePath.isMemberExpression()
) { // classObject :class="classObject" :class="vm.classObject"
// TODO 目前先不考虑 classObject,styleObject
......@@ -135,5 +128,20 @@ module.exports = function processClass (paths, path, state) {
state.errors.add(':class' + uniI18n.__('templateCompiler.noSupportSyntax', { 0: getCode(classValuePath.node) }))
}
}
if (virtualHost && isRootElement(path.parentPath)) {
const virtualHostClass = t.identifier(VIRTUAL_HOST_CLASS)
if (classArrayExpression) {
classArrayExpression.elements.push(virtualHostClass)
} else {
classArrayExpression = t.arrayExpression([virtualHostClass])
const property = t.objectProperty(t.identifier('class'), processStaticClass(classArrayExpression, staticClassPath, state))
path.node.properties.push(property)
return []
}
}
if (classArrayExpression) {
const classValuePath = classPath.get('value')
classValuePath.replaceWith(processStaticClass(classArrayExpression, staticClassPath, state))
}
return []
}
......@@ -2,7 +2,8 @@ const t = require('@babel/types')
const {
IDENTIFIER_STYLE,
INTERNAL_GET_STYLE
INTERNAL_GET_STYLE,
VIRTUAL_HOST_STYLE
} = require('../../../constants')
const {
......@@ -10,6 +11,10 @@ const {
hyphenate
} = require('../../../util')
const {
isRootElement
} = require('./util')
const getMemberExpr = require('../member-expr')
const REGEX_PX = /(:|\s|\(|\/)[+-]?\d+(\.\d+)?u?px/g
......@@ -120,6 +125,8 @@ function generateGetStyle (stylePath, styleValuePath, staticStylePath, state) {
module.exports = function processStyle (paths, path, state) {
const stylePath = paths.style
const staticStylePath = paths.staticStyle
const platformName = state.options.platform.name
const virtualHost = platformName === 'mp-weixin' || platformName === 'mp-alipay'
if (stylePath) {
const styleValuePath = stylePath.get('value')
if (styleValuePath.isObjectExpression()) {
......@@ -146,11 +153,11 @@ module.exports = function processStyle (paths, path, state) {
}
} else if (
styleValuePath.isStringLiteral() || // :style="'background:red'"
styleValuePath.isIdentifier() || // TODO 需要优化到下一个条件,:style="styleObject"
styleValuePath.isMemberExpression() || // TODO 需要优化到下一个条件,:style="item.styleObject"
styleValuePath.isConditionalExpression() ||
styleValuePath.isLogicalExpression() ||
styleValuePath.isBinaryExpression()
styleValuePath.isIdentifier() || // TODO 需要优化到下一个条件,:style="styleObject"
styleValuePath.isMemberExpression() || // TODO 需要优化到下一个条件,:style="item.styleObject"
styleValuePath.isConditionalExpression() ||
styleValuePath.isLogicalExpression() ||
styleValuePath.isBinaryExpression()
) {
// 理论上 ConditionalExpression,LogicalExpression 可能存在 styleObject,应该__get_style,还是先不考虑这种情况吧
// ConditionalExpression :style="index === currentIndex ? activeStyle : itemStyle"
......@@ -164,14 +171,24 @@ module.exports = function processStyle (paths, path, state) {
)
} else if (
styleValuePath.isIdentifier() ||
styleValuePath.isMemberExpression()
styleValuePath.isMemberExpression()
) { // TODO 目前先不考虑 classObject,styleObject
// generateGetStyle(stylePath, styleValuePath, staticStylePath, state)
} else {
state.errors.add(`:style 不支持 ${getCode(styleValuePath.node)} 语法`)
}
if (virtualHost && isRootElement(path.parentPath)) {
styleValuePath.replaceWith(t.binaryExpression('+', styleValuePath.node, t.identifier(VIRTUAL_HOST_STYLE)))
}
} else if (staticStylePath) {
if (virtualHost && isRootElement(path.parentPath)) {
const styleNode = processStaticStyle([t.identifier(VIRTUAL_HOST_STYLE)], staticStylePath, state)
const property = t.objectProperty(t.identifier('style'), styleNode)
path.node.properties.push(property)
return []
}
staticStylePath.get('value').replaceWith(getStaticStyleStringLiteral(staticStylePath, state))
}
return []
}
}
const t = require('@babel/types')
const babelTraverse = require('@babel/traverse').default
const {
INTERNAL_SET_MODEL
} = require('../../../constants')
const t = require('@babel/types')
const babelTraverse = require('@babel/traverse').default
const {
INTERNAL_SET_MODEL,
METHOD_CREATE_ELEMENT
} = require('../../../constants')
module.exports = {
getModelEventFunctionExpr (funcExpr, propPath, modifiers = []) {
let targetExpr
......@@ -43,5 +44,9 @@ module.exports = {
]
)
)
},
isRootElement (path) {
const result = path.findParent(path => (path.isCallExpression() && path.get('callee').isIdentifier({ name: METHOD_CREATE_ELEMENT })) || path.isReturnStatement())
return result.isReturnStatement()
}
}
}
......@@ -4,12 +4,16 @@ const {
const {
SELF_CLOSING_TAGS,
INTERNAL_EVENT_LINK
INTERNAL_EVENT_LINK,
VIRTUAL_HOST_STYLE,
VIRTUAL_HOST_CLASS
} = require('../constants')
const uniI18n = require('@dcloudio/uni-cli-i18n')
function processElement (ast, state, isRoot) {
const platformName = state.options.platform.name
const platform = state.options.platform
const platformName = platform.name
const virtualHost = platformName === 'mp-weixin' || platformName === 'mp-alipay'
// <template slot="f"></template>
if (ast.type === 'template' && hasOwn(ast.attr, 'slot')) {
ast.type = 'view'
......@@ -36,13 +40,26 @@ function processElement (ast, state, isRoot) {
}]
delete ast.attr.innerHTML
}
if (state.options.platform.isComponent(ast.type)) {
if (platform.isComponent(ast.type)) {
if (platformName === 'mp-alipay') {
ast.attr.onVueInit = INTERNAL_EVENT_LINK
} else if (platformName !== 'mp-baidu') {
ast.attr['bind:' + INTERNAL_EVENT_LINK] = INTERNAL_EVENT_LINK
}
if (virtualHost && platform.isComponent(ast.type)) {
const obj = {
style: VIRTUAL_HOST_STYLE,
class: VIRTUAL_HOST_CLASS
}
Object.keys(obj).forEach(key => {
ast.attr[obj[key]] = ast.attr[key]
if (platformName === 'mp-alipay') {
delete ast.attr[key]
}
})
}
const children = ast.children
// default slot
let defaultSlot = false
......
......@@ -225,17 +225,31 @@ function parsePropType (key, type, defaultValue, file) {
return type
}
export function initProperties (props, isBehavior = false, file = '') {
export function initProperties (props, isBehavior = false, file = '', options) {
const properties = {}
if (!isBehavior) {
properties.vueId = {
type: String,
value: ''
}
// 用于字节跳动小程序模拟抽象节点
properties.generic = {
type: Object,
value: null
if (__PLATFORM__ === 'mp-toutiao' || __PLATFORM__ === 'mp-lark') {
// 用于字节跳动小程序模拟抽象节点
properties.generic = {
type: Object,
value: null
}
}
if (__PLATFORM__ === 'mp-weixin' || __PLATFORM__ === 'mp-alipay') {
if (__PLATFORM__ === 'mp-alipay' || options.virtualHost) {
properties.virtualHostStyle = {
type: null,
value: ''
}
properties.virtualHostClass = {
type: null,
value: ''
}
}
}
// scopedSlotsCompiler auto
properties.scopedSlotsCompiler = {
......
......@@ -38,7 +38,7 @@ export default function parseBaseComponent (vueComponentOptions, {
options,
data: initData(vueOptions, Vue.prototype),
behaviors: initBehaviors(vueOptions, initBehavior),
properties: initProperties(vueOptions.props, false, vueOptions.__file),
properties: initProperties(vueOptions.props, false, vueOptions.__file, options),
lifetimes: {
attached () {
const properties = this.properties
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册