You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

180 lines
7.1 KiB

6 months ago
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createVirtualHostStyle = exports.rewriteStyle = exports.findStaticStyleIndex = exports.isStyleBinding = void 0;
const types_1 = require("@babel/types");
const compiler_core_1 = require("@vue/compiler-core");
const shared_1 = require("@vue/shared");
const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
const runtimeHelpers_1 = require("../runtimeHelpers");
const ast_1 = require("../ast");
const codegen_1 = require("../codegen");
const utils_1 = require("./utils");
function isStyleBinding({ arg, exp }) {
return (arg && arg.type === 4 /* NodeTypes.SIMPLE_EXPRESSION */ && arg.content === 'style');
}
exports.isStyleBinding = isStyleBinding;
function findStaticStyleIndex(props) {
return props.findIndex((prop) => prop.name === 'style');
}
exports.findStaticStyleIndex = findStaticStyleIndex;
function rewriteStyle(index, styleBindingProp, props, virtualHost, context) {
const expr = styleBindingProp.exp
? (0, ast_1.parseExpr)(styleBindingProp.exp, context)
: undefined;
let styleBidingExpr = expr;
if (expr) {
if ((0, types_1.isObjectExpression)(expr)) {
styleBidingExpr = createStyleBindingByObjectExpression(rewriteStyleObjectExpression(expr, styleBindingProp.loc, context));
}
else if ((0, types_1.isArrayExpression)(expr)) {
styleBidingExpr = createStyleBindingByArrayExpression(rewriteStyleArrayExpression(expr, context));
}
else {
styleBidingExpr = (0, ast_1.parseExpr)(rewriteStyleExpression(styleBindingProp.exp, context).content, context);
}
if (!styleBidingExpr) {
return;
}
}
else if (!virtualHost) {
return;
}
const staticStylePropIndex = findStaticStyleIndex(props);
if (staticStylePropIndex > -1) {
const staticStyle = props[staticStylePropIndex].value
.content;
if (staticStyle.trim()) {
if (styleBidingExpr) {
if (index > staticStylePropIndex) {
styleBidingExpr = (0, types_1.binaryExpression)('+', addSemicolon((0, types_1.stringLiteral)(staticStyle)), styleBidingExpr);
}
else {
styleBidingExpr = (0, types_1.binaryExpression)('+', addSemicolon(styleBidingExpr), (0, types_1.stringLiteral)(staticStyle));
}
}
else {
styleBidingExpr = (0, types_1.stringLiteral)(staticStyle);
}
}
}
if (virtualHost) {
styleBidingExpr = styleBidingExpr
? (0, types_1.binaryExpression)('+', addSemicolon(styleBidingExpr), (0, types_1.identifier)(utils_1.VIRTUAL_HOST_STYLE))
: (0, types_1.identifier)(utils_1.VIRTUAL_HOST_STYLE);
}
styleBindingProp.exp = (0, compiler_core_1.createSimpleExpression)((0, codegen_1.genBabelExpr)(styleBidingExpr));
}
exports.rewriteStyle = rewriteStyle;
function createVirtualHostStyle(props, context) {
const styleBindingProp = (0, uni_cli_shared_1.createBindDirectiveNode)('style', '');
delete styleBindingProp.exp;
rewriteStyle(0, styleBindingProp, props, true, context);
return styleBindingProp;
}
exports.createVirtualHostStyle = createVirtualHostStyle;
function rewriteStyleExpression(expr, context) {
return (0, utils_1.rewriteExpression)((0, compiler_core_1.createCompoundExpression)([
context.helperString(runtimeHelpers_1.STRINGIFY_STYLE) + '(',
expr,
')',
]), context);
}
function rewriteStyleArrayExpression(expr, context) {
expr.elements.forEach((prop, index) => {
if (!(0, types_1.isStringLiteral)(prop)) {
const code = (0, codegen_1.genBabelExpr)((0, types_1.arrayExpression)([(0, types_1.isSpreadElement)(prop) ? prop.argument : prop]));
expr.elements[index] = (0, types_1.identifier)(rewriteStyleExpression((0, compiler_core_1.createSimpleExpression)(code.slice(1, -1), false), context).content);
}
});
return expr;
}
function rewriteStyleObjectExpression(expr, loc, context) {
expr.properties.forEach((prop, index) => {
if ((0, types_1.isSpreadElement)(prop)) {
// <view :style="{...obj}"/>
// <view style="{{a}}"/>
const newExpr = (0, utils_1.rewriteSpreadElement)(runtimeHelpers_1.STRINGIFY_STYLE, prop, loc, context);
if (newExpr) {
prop.argument = newExpr;
}
}
else if ((0, types_1.isObjectProperty)(prop)) {
const { key, value, computed } = prop;
if (!(0, types_1.isPrivateName)(key)) {
if (computed) {
// {[handle(computedKey)]:1} => {[a]:1}
const newExpr = (0, utils_1.rewirteWithHelper)(runtimeHelpers_1.HYPHENATE, key, loc, context);
if (newExpr) {
prop.key = newExpr;
}
}
else {
// {fontSize:'15px'} => {'font-size':'15px'}
prop.key = (0, ast_1.parseStringLiteral)(key);
prop.key.value = (0, shared_1.hyphenate)(prop.key.value) + ':';
}
// {fontSize:`${fontSize}px`} => {'font-size':a}
if ((0, utils_1.isStaticLiteral)(value)) {
return;
}
else {
const newExpr = (0, utils_1.parseExprWithRewrite)((0, codegen_1.genBabelExpr)(value), loc, context, value);
if (newExpr) {
prop.value = newExpr;
}
}
}
}
});
return expr;
}
function addSemicolon(expr) {
return createBinaryExpression(expr, (0, types_1.stringLiteral)(';'));
}
function createBinaryExpression(left, right) {
return (0, types_1.binaryExpression)('+', left, right);
}
function createStyleBindingByArrayExpression(expr) {
let result;
function concat(expr) {
if (!result) {
result = expr;
}
else {
result = createBinaryExpression(addSemicolon(result), expr);
}
}
expr.elements.forEach((prop) => {
if ((0, types_1.isStringLiteral)(prop) || (0, types_1.isIdentifier)(prop)) {
concat(prop);
}
});
return result;
}
function createStyleBindingByObjectExpression(expr) {
let result;
function concat(expr) {
if (!result) {
result = expr;
}
else {
result = createBinaryExpression(addSemicolon(result), expr);
}
}
expr.properties.forEach((prop) => {
if ((0, types_1.isSpreadElement)(prop)) {
concat(prop.argument);
}
else if ((0, types_1.isObjectProperty)(prop)) {
const { key, value } = prop;
if (!(0, types_1.isPrivateName)(key)) {
const expr = createBinaryExpression((0, types_1.isStringLiteral)(key)
? key // 之前已经补充了:
: createBinaryExpression(key, (0, types_1.stringLiteral)(':')), value);
concat(expr);
}
}
});
return result;
}