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

packages/uni-mp-compiler/__tests__/style.spec.ts

@@ -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

@@ -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

 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