Skip to content

U
uni-app

DCloud / uni-app
3 个月 前同步成功

通知 725
Star 38705
Fork 3642
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 cf29e835 编写于 作者: fxy060608's avatar fxy060608
浏览文件
操作

wip(mp): v-bind:class array syntax

上级 34d1e5e1
隐藏空白更改
内联 并排
Showing with 94 addition and 82 deletion
packages/uni-mp-compiler/__tests__/style.spec.ts
浏览文件 @ cf29e835
......@@ -67,80 +67,80 @@ describe('compiler: transform style', () => {
}`
)
})
// test('v-bind:style object syntax + style', () => {
// assert(
// `<view :style="{ red: isRed }" style="foo bar"/>`,
// `<view style="{{[a && 'red', 'foo bar']}}"/>`,
// `(_ctx, _cache) => {
// return { a: _ctx.isRed }
// }`
// )
// assert(
// `<view style="foo bar" :style="{ red: isRed }"/>`,
// `<view style="{{['foo bar', a && 'red']}}"/>`,
// `(_ctx, _cache) => {
// return { a: _ctx.isRed }
// }`
// )
// assert(
// `<view :style="{ a: 1, b: 0, c: true, d: false, e: null, f: undefined, g: ok, h: handle(ok), i: ok>1, j, [k]:1, [l]:m, ...n, ...{a:true}, ...{b:o} }" style="foo bar"/>`,
// `<view style="{{['a', 'c', a && 'g', b && 'h', c && 'i', d && 'j', e, g && f, h, i, j, 'foo bar']}}"/>`,
// `(_ctx, _cache) => {
// return { a: _ctx.ok, b: _ctx.handle(_ctx.ok), c: _ctx.ok > 1, d: _ctx.j, e: _ctx.k, f: _ctx.l, g: _ctx.m, h: _normalizeClass({ ..._ctx.n }), i: _normalizeClass({ ...{ a: true } }), j: _normalizeClass({ ...{ b: _ctx.o } }) }
// }`
// )
// assert(
// `<view style="foo bar" :style="{ a: 1, b: 0, c: true, d: false, e: null, f: undefined, g: ok, h: handle(ok), i: ok>1, j, [k]:1, [l]:m, ...n, ...{a:true}, ...{b:o} }"/>`,
// `<view style="{{['foo bar', 'a', 'c', a && 'g', b && 'h', c && 'i', d && 'j', e, g && f, h, i, j]}}"/>`,
// `(_ctx, _cache) => {
// return { a: _ctx.ok, b: _ctx.handle(_ctx.ok), c: _ctx.ok > 1, d: _ctx.j, e: _ctx.k, f: _ctx.l, g: _ctx.m, h: _normalizeClass({ ..._ctx.n }), i: _normalizeClass({ ...{ a: true } }), j: _normalizeClass({ ...{ b: _ctx.o } }) }
// }`
// )
// })
// test('v-bind:style array syntax', () => {
// assert(
// `<view :style="[classA, classB]"/>`,
// `<view style="{{[a, b]}}"/>`,
// `(_ctx, _cache) => {
// return { a: _normalizeClass(_ctx.classA), b: _normalizeClass(_ctx.classB) }
// }`
// )
// assert(
// `<view :style="[classA, classB, { classC: isC, classD: isD }, 'classE', isF ? 'classF' : '', isG && 'classG', ...classH, ...[classI,classJ], handle(classK) ]"/>`,
// `<view style="{{[a, b, c, 'classE', d, e, f, g, h]}}"/>`,
// `(_ctx, _cache) => {
// return { a: _normalizeClass(_ctx.classA), b: _normalizeClass(_ctx.classB), c: _normalizeClass({ classC: _ctx.isC, classD: _ctx.isD }), d: _normalizeClass(_ctx.isF ? 'classF' : ''), e: _normalizeClass(_ctx.isG && 'classG'), f: _normalizeClass([..._ctx.classH]), g: _normalizeClass([...[_ctx.classI, _ctx.classJ]]), h: _normalizeClass(_ctx.handle(_ctx.classK)) }
// }`
// )
// })
// test('v-bind:style array syntax + style', () => {
// assert(
// `<view :style="[classA, classB]" style="foo bar"/>`,
// `<view style="{{[a, b, 'foo bar']}}"/>`,
// `(_ctx, _cache) => {
// return { a: _normalizeClass(_ctx.classA), b: _normalizeClass(_ctx.classB) }
// }`
// )
// assert(
// `<view style="foo bar" :style="[classA, classB]"/>`,
// `<view style="{{['foo bar', a, b]}}"/>`,
// `(_ctx, _cache) => {
// return { a: _normalizeClass(_ctx.classA), b: _normalizeClass(_ctx.classB) }
// }`
// )
// assert(
// `<view :style="[classA, classB, { classC: isC, classD: isD }, 'classE', isF ? 'classF' : '', isG && 'classG', ...classH, ...[classI,classJ], handle(classK) ]" style="foo bar"/>`,
// `<view style="{{[a, b, c, 'classE', d, e, f, g, h, 'foo bar']}}"/>`,
// `(_ctx, _cache) => {
// return { a: _normalizeClass(_ctx.classA), b: _normalizeClass(_ctx.classB), c: _normalizeClass({ classC: _ctx.isC, classD: _ctx.isD }), d: _normalizeClass(_ctx.isF ? 'classF' : ''), e: _normalizeClass(_ctx.isG && 'classG'), f: _normalizeClass([..._ctx.classH]), g: _normalizeClass([...[_ctx.classI, _ctx.classJ]]), h: _normalizeClass(_ctx.handle(_ctx.classK)) }
// }`
// )
// assert(
// `<view style="foo bar" :style="[classA, classB, { classC: isC, classD: isD }, 'classE', isF ? 'classF' : '', isG && 'classG', ...classH, ...[classI,classJ], handle(classK) ]"/>`,
// `<view style="{{['foo bar', a, b, c, 'classE', d, e, f, g, h]}}"/>`,
// `(_ctx, _cache) => {
// return { a: _normalizeClass(_ctx.classA), b: _normalizeClass(_ctx.classB), c: _normalizeClass({ classC: _ctx.isC, classD: _ctx.isD }), d: _normalizeClass(_ctx.isF ? 'classF' : ''), e: _normalizeClass(_ctx.isG && 'classG'), f: _normalizeClass([..._ctx.classH]), g: _normalizeClass([...[_ctx.classI, _ctx.classJ]]), h: _normalizeClass(_ctx.handle(_ctx.classK)) }
// }`
// )
// })
test('v-bind:style object syntax + style', () => {
assert(
`<view :style="{ color: 'green' }" style="font-size:15px"/>`,
`<view style="{{'color:' + 'green' + ';' + 'font-size:15px'}}"/>`,
`(_ctx, _cache) => {
return {}
}`
)
assert(
`<view style="font-size:15px" :style="{ color: 'green' }"/>`,
`<view style="{{'font-size:15px' + ';' + ('color:' + 'green')}}"/>`,
`(_ctx, _cache) => {
return {}
}`
)
assert(
`<view :style="{color:'green',fontSize:'15px',backgroundColor: handle(bg),fontWeight,[padding]:box.padding,...style,...{margin:'0px'}}" style="font-size:15px"/>`,
`<view style="{{'color:' + 'green' + ';' + ('font-size:' + '15px') + ';' + ('background-color:' + a) + ';' + ('font-weight:' + b) + ';' + (c + ':' + d) + ';' + e + ';' + f + ';' + 'font-size:15px'}}"/>`,
`(_ctx, _cache) => {
return { a: _ctx.handle(_ctx.bg), b: _ctx.fontWeight, c: _hyphenate(_ctx.padding), d: _ctx.box.padding, e: _normalizeStyle(_ctx.style), f: _normalizeStyle({ margin: '0px' }) }
}`
)
assert(
`<view style="font-size:15px" :style="{color:'green',fontSize:'15px',backgroundColor: handle(bg),fontWeight,[padding]:box.padding,...style,...{margin:'0px'}}"/>`,
`<view style="{{'font-size:15px' + ';' + ('color:' + 'green' + ';' + ('font-size:' + '15px') + ';' + ('background-color:' + a) + ';' + ('font-weight:' + b) + ';' + (c + ':' + d) + ';' + e + ';' + f)}}"/>`,
`(_ctx, _cache) => {
return { a: _ctx.handle(_ctx.bg), b: _ctx.fontWeight, c: _hyphenate(_ctx.padding), d: _ctx.box.padding, e: _normalizeStyle(_ctx.style), f: _normalizeStyle({ margin: '0px' }) }
}`
)
})
test('v-bind:style array syntax', () => {
assert(
`<view :style="[styleA, styleB]"/>`,
`<view style="{{a + ';' + b}}"/>`,
`(_ctx, _cache) => {
return { a: _normalizeStyle(_ctx.styleA), b: _normalizeStyle(_ctx.styleB) }
}`
)
assert(
`<view :style="[styleA, styleB, { color:'red',fontSize }, 'font-weight:bold', ...styleC, ...[styleD,styleE], handle(styleF) ]"/>`,
`<view style="{{a + ';' + b + ';' + c + ';' + 'font-weight:bold' + ';' + d + ';' + e + ';' + f}}"/>`,
`(_ctx, _cache) => {
return { a: _normalizeStyle(_ctx.styleA), b: _normalizeStyle(_ctx.styleB), c: _normalizeStyle({ color: 'red', fontSize: _ctx.fontSize }), d: _normalizeStyle(_ctx.styleC), e: _normalizeStyle([_ctx.styleD, _ctx.styleE]), f: _normalizeStyle(_ctx.handle(_ctx.styleF)) }
}`
)
})
test('v-bind:style array syntax + style', () => {
assert(
`<view :style="[styleA, styleB]" style="font-size:15px"/>`,
`<view style="{{a + ';' + b + ';' + 'font-size:15px'}}"/>`,
`(_ctx, _cache) => {
return { a: _normalizeStyle(_ctx.styleA), b: _normalizeStyle(_ctx.styleB) }
}`
)
assert(
`<view style="font-size:15px" :style="[styleA, styleB]"/>`,
`<view style="{{'font-size:15px' + ';' + (a + ';' + b)}}"/>`,
`(_ctx, _cache) => {
return { a: _normalizeStyle(_ctx.styleA), b: _normalizeStyle(_ctx.styleB) }
}`
)
assert(
`<view :style="[styleA, styleB, { color:'red',fontSize }, 'font-weight:bold', ...styleC, ...[styleD,styleE], handle(styleF) ]" style="font-size:15px"/>`,
`<view style="{{a + ';' + b + ';' + c + ';' + 'font-weight:bold' + ';' + d + ';' + e + ';' + f + ';' + 'font-size:15px'}}"/>`,
`(_ctx, _cache) => {
return { a: _normalizeStyle(_ctx.styleA), b: _normalizeStyle(_ctx.styleB), c: _normalizeStyle({ color: 'red', fontSize: _ctx.fontSize }), d: _normalizeStyle(_ctx.styleC), e: _normalizeStyle([_ctx.styleD, _ctx.styleE]), f: _normalizeStyle(_ctx.handle(_ctx.styleF)) }
}`
)
assert(
`<view style="font-size:15px" :style="[styleA, styleB, { color:'red',fontSize }, 'font-weight:bold', ...styleC, ...[styleD,styleE], handle(styleF) ]"/>`,
`<view style="{{'font-size:15px' + ';' + (a + ';' + b + ';' + c + ';' + 'font-weight:bold' + ';' + d + ';' + e + ';' + f)}}"/>`,
`(_ctx, _cache) => {
return { a: _normalizeStyle(_ctx.styleA), b: _normalizeStyle(_ctx.styleB), c: _normalizeStyle({ color: 'red', fontSize: _ctx.fontSize }), d: _normalizeStyle(_ctx.styleC), e: _normalizeStyle([_ctx.styleD, _ctx.styleE]), f: _normalizeStyle(_ctx.handle(_ctx.styleF)) }
}`
)
})
})
packages/uni-mp-compiler/src/transforms/transformStyle.ts
浏览文件 @ cf29e835
......@@ -12,6 +12,7 @@ import {
isLiteral,
isObjectProperty,
binaryExpression,
isIdentifier,
} from '@babel/types'
import {
DirectiveNode,
......@@ -118,13 +119,12 @@ function rewriteStyleArrayExpression(
) {
expr.elements.forEach((prop, index) => {
if (!isStringLiteral(prop)) {
const code = genBabelExpr(arrayExpression([prop]))
const code = genBabelExpr(
arrayExpression([isSpreadElement(prop) ? prop.argument : prop])
)
expr.elements[index] = identifier(
rewriteStyleExpression(
createSimpleExpression(
isSpreadElement(prop) ? code : code.slice(1, -1),
false
),
createSimpleExpression(code.slice(1, -1), false),
context
).content
)
......@@ -187,6 +187,18 @@ function createBinaryExpression(left: Expression, right: Expression) {
function createStyleBindingByArrayExpression(expr: ArrayExpression) {
let result: Expression | undefined
function concat(expr: Expression) {
if (!result) {
result = expr
} else {
result = createBinaryExpression(addSemicolon(result), expr)
}
}
expr.elements.forEach((prop) => {
if (isStringLiteral(prop) || isIdentifier(prop)) {
concat(prop)
}
})
return result
}
......
packages/uni-mp-vue/dist/vue.runtime.esm.js
浏览文件 @ cf29e835
import { extend, isSymbol, isObject, toRawType, def, hasChanged, isArray, isFunction, NOOP, remove, toHandlerKey, camelize, capitalize, isString, normalizeClass, normalizeStyle, isOn, isPromise, EMPTY_OBJ, isSet, isMap, isPlainObject, invokeArrayFns, hasOwn, NO, isIntegerKey, toNumber, hyphenate, isReservedProp, EMPTY_ARR, makeMap, toTypeString } from '@vue/shared';
export { camelize, normalizeClass, normalizeProps, normalizeStyle, toDisplayString, toHandlerKey } from '@vue/shared';
export { camelize, hyphenate, normalizeClass, normalizeProps, normalizeStyle, toDisplayString, toHandlerKey } from '@vue/shared';
// lifecycle
// App and Page
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或