Merge pull request Meituan-Dianping#90 from samwang1027/prettier-brea…

…k-fix/Meituan-Dianping#87 Update attrs.js
meishijie · Mar 15, 2018 · 004eed9 · 004eed9
2 parents 86dc4b8 + 3851c86
commit 004eed9
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/packages/mpvue-template-compiler/build.js b/packages/mpvue-template-compiler/build.js
@@ -4353,15 +4353,15 @@ function transformDynamicClass (staticClass, clsBinding) {
   var result = babel.transform(("!" + clsBinding), { plugins: [transformObjectToTernaryOperator] });
   // 先实现功能，再优化代码
   // https://github.com/babel/babel/issues/7138
-  var cls = prettier.format(result.code, { semi: false, singleQuote: true }).slice(1).slice(0, -1);
+  var cls = prettier.format(result.code, { semi: false, singleQuote: true }).slice(1).slice(0, -1).replace(/\n|\r/g, "");
   return (staticClass + " {{" + cls + "}}")
 }
 
 function transformDynamicStyle (staticStyle, styleBinding) {
   if ( staticStyle === void 0 ) staticStyle = '';
 
   var result = babel.transform(("!" + styleBinding), { plugins: [transformObjectToString] });
-  var cls = prettier.format(result.code, { semi: false, singleQuote: true }).slice(2).slice(0, -2);
+  var cls = prettier.format(result.code, { semi: false, singleQuote: true }).slice(1).slice(0, -1).replace(/\n|\r/g, "");
   return (staticStyle + " {{" + cls + "}}")
 }
 

diff --git a/packages/mpvue/index.js b/packages/mpvue/index.js
@@ -2139,7 +2139,7 @@ function mountComponent (
   vm.$el = el;
   if (!vm.$options.render) {
     vm.$options.render = createEmptyVNode;
-    
+
   }
   callHook(vm, 'beforeMount');
 
@@ -2234,7 +2234,7 @@ function updateChildComponent (
     vm.$forceUpdate();
   }
 
-  
+
 }
 
 function isInInactiveTree (vm) {
@@ -2845,7 +2845,7 @@ function initMethods (vm, methods) {
   var props = vm.$options.props;
   for (var key in methods) {
     vm[key] = methods[key] == null ? noop : bind(methods[key], vm);
-    
+
   }
 }
 

diff --git a/src/platforms/mp/compiler/codegen/convert/attrs.js b/src/platforms/mp/compiler/codegen/convert/attrs.js
@@ -9,13 +9,13 @@ function transformDynamicClass (staticClass = '', clsBinding) {
   const result = babel.transform(`!${clsBinding}`, { plugins: [transformObjectToTernaryOperator] })
   // 先实现功能，再优化代码
   // https://github.com/babel/babel/issues/7138
-  const cls = prettier.format(result.code, { semi: false, singleQuote: true }).slice(1).slice(0, -1)
+  const cls = prettier.format(result.code, { semi: false, singleQuote: true }).slice(1).slice(0, -1).replace(/\n|\r/g, "")
   return `${staticClass} {{${cls}}}`
 }
 
 function transformDynamicStyle (staticStyle = '', styleBinding) {
   const result = babel.transform(`!${styleBinding}`, { plugins: [transformObjectToString] })
-  const cls = prettier.format(result.code, { semi: false, singleQuote: true }).slice(2).slice(0, -2)
+  const cls = prettier.format(result.code, { semi: false, singleQuote: true }).slice(1).slice(0, -1).replace(/\n|\r/g, "")
   return `${staticStyle} {{${cls}}}`
 }
 

diff --git a/test/mp/compiler/index.spec.js b/test/mp/compiler/index.spec.js
@@ -153,6 +153,11 @@ describe('指令', () => {
       `<template name="a"><view class="_div"><view class="_p static {{[isActive ? 'active' : '', hasError ? 'text-danger' : '']}}">233</view></view></template>`,
       { name: 'a' }
     )
+    assertCodegen(
+      `<div><p class="static" v-bind:class="computedClassStr">233</p></div>`,
+      `<template name="a"><view class="_div"><view class="_p static {{computedClassStr}}">233</view></view></template>`,
+      { name: 'a' }
+    )
     // TODO, classObject 暂不支持
     // assertCodegen(
     //   `<div><p class="static" v-bind:class="classObject">233</p></div>`,
@@ -180,12 +185,17 @@ describe('指令', () => {
   it('v-bind:style', () => {
     assertCodegen(
       `<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">111</div>`,
-      `<template name="a"><view class="_div" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">111</view></template>`,
+      `<template name="a"><view class="_div" style=" {{('color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';')}}">111</view></template>`,
       { name: 'a' }
     )
     assertCodegen(
       `<div v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">111</div>`,
-      `<template name="a"><view class="_div" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">111</view></template>`,
+      `<template name="a"><view class="_div" style=" {{['color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';']}}">111</view></template>`,
+      { name: 'a' }
+    )
+    assertCodegen(
+      `<div v-bind:style="computedStyleStr">222</div>`,
+      `<template name="a"><view class="_div" style=" {{computedStyleStr}}">222</view></template>`,
       { name: 'a' }
     )
     // TODO, 等微信支持了再支持