test(mp): mergeVirtualHostAttributes

packages/uni-template-compiler/__tests__/compiler-mp-alipay.spec.js

@@ -204,6 +204,41 @@ describe('mp:compiler-mp-alipay', () => {
     )
   })
 
+  it('generate attrs with mergeVirtualHostAttributes', () => {
+    assertCodegen(
+      '<custom-view>hello world</custom-view>',
+      '<custom-view vue-id="551070e6-1" onVueInit="__l" virtualHostStyle="{{virtualHostStyle}}" virtualHostClass="{{(virtualHostClass)}}">hello world</custom-view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<custom-view :class="class1" :style="style">hello world</custom-view>',
+      '<custom-view vue-id="551070e6-1" onVueInit="__l" virtualHostStyle="{{(style)+virtualHostStyle}}" virtualHostClass="{{((class1)+\' \'+virtualHostClass)}}">hello world</custom-view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<view><custom-view>hello world</custom-view></view>',
+      '<view class="{{(virtualHostClass)}}" style="{{virtualHostStyle}}"><custom-view vue-id="551070e6-1" onVueInit="__l">hello world</custom-view></view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<view><custom-view :class="class1" :style="style">hello world</custom-view></view>',
+      '<view class="{{(virtualHostClass)}}" style="{{virtualHostStyle}}"><custom-view vue-id="551070e6-1" onVueInit="__l" virtualHostStyle="{{(style)}}" virtualHostClass="{{(class1)}}">hello world</custom-view></view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+  })
+
   it('generate getPhoneNumber', () => {
     assertCodegen(
       '<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>',

packages/uni-template-compiler/__tests__/compiler.spec.js

 const compiler = require('../lib')
 
-function assertCodegen (template, templateCode, renderCode = 'with(this){}') {
+function assertCodegen (template, templateCode, renderCode = 'with(this){}', options = {}) {
   const res = compiler.compile(template, {
     resourcePath: 'test.wxml',
-    mp: {
+    mp: Object.assign({
       minified: true,
       isTest: true,
       platform: 'mp-weixin'
-    }
+    }, options)
   })
 
   expect(res.template).toBe(templateCode)
@@ -253,6 +253,108 @@ describe('mp:compiler', () => {
     //     )
   })
 
+  it('generate attrs with mergeVirtualHostAttributes', () => {
+    assertCodegen(
+      '<view>hello world</view>',
+      '<view class="{{[virtualHostClass]}}" style="{{virtualHostStyle}}">hello world</view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<view><view>hello world</view></view>',
+      '<view class="{{[virtualHostClass]}}" style="{{virtualHostStyle}}"><view>hello world</view></view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<custom-view>hello world</custom-view>',
+      '<custom-view vue-id="551070e6-1" class="{{[virtualHostClass]}}" style="{{virtualHostStyle}}" bind:__l="__l" virtualHostStyle="{{virtualHostStyle}}" virtualHostClass="{{[virtualHostClass]}}" vue-slots="{{[\'default\']}}">hello world</custom-view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<custom-view :class="class1" :style="style">hello world</custom-view>',
+      '<custom-view class="{{[class1,virtualHostClass]}}" style="{{(style)+virtualHostStyle}}" vue-id="551070e6-1" bind:__l="__l" virtualHostStyle="{{(style)+virtualHostStyle}}" virtualHostClass="{{[class1,virtualHostClass]}}" vue-slots="{{[\'default\']}}">hello world</custom-view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<view><custom-view>hello world</custom-view></view>',
+      '<view class="{{[virtualHostClass]}}" style="{{virtualHostStyle}}"><custom-view vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}">hello world</custom-view></view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<view><custom-view :class="class1" :style="style">hello world</custom-view></view>',
+      '<view class="{{[virtualHostClass]}}" style="{{virtualHostStyle}}"><custom-view class="{{[class1]}}" style="{{(style)}}" vue-id="551070e6-1" bind:__l="__l" virtualHostStyle="{{(style)}}" virtualHostClass="{{[class1]}}" vue-slots="{{[\'default\']}}">hello world</custom-view></view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+  })
+
+  it('generate class with mergeVirtualHostAttributes', () => {
+    assertCodegen(
+      '<view class="a">hello world</view>',
+      '<view class="{{[\'a\',virtualHostClass]}}" style="{{virtualHostStyle}}">hello world</view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<view :class="class1">hello world</view>',
+      '<view class="{{[class1,virtualHostClass]}}" style="{{virtualHostStyle}}">hello world</view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<view :class="[class1,class2]">hello world</view>',
+      '<view class="{{[class1,class2,virtualHostClass]}}" style="{{virtualHostStyle}}">hello world</view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<view :class="{class1,class2}">hello world</view>',
+      '<view class="{{[(class1)?\'class1\':\'\',(class2)?\'class2\':\'\',virtualHostClass]}}" style="{{virtualHostStyle}}">hello world</view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<view class="a external-class c" :class="class1">hello world</view>',
+      '<view class="{{[\'a\',\'external-class\',\'c\',class1,virtualHostClass]}}" style="{{virtualHostStyle}}">hello world</view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<view class="a external-class c" :class="class1"><view class="a external-class c" :class="class1">hello world</view></view>',
+      '<view class="{{[\'a\',\'external-class\',\'c\',class1,virtualHostClass]}}" style="{{virtualHostStyle}}"><view class="{{[\'a\',\'external-class\',\'c\',class1]}}">hello world</view></view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+  })
+
   it('generate staticStyle', () => {
     assertCodegen(
       '<view style="height:400upx">hello world</view>',
@@ -272,6 +374,33 @@ describe('mp:compiler', () => {
     //     )
   })
 
+  it('generate style with mergeVirtualHostAttributes', () => {
+    assertCodegen(
+      '<view style="color:red">hello world</view>',
+      '<view class="{{[virtualHostClass]}}" style="{{\'color:red;\'+virtualHostStyle}}">hello world</view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<view :style="style">hello world</view>',
+      '<view style="{{(style)+virtualHostStyle}}" class="{{[virtualHostClass]}}">hello world</view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+    assertCodegen(
+      '<view :style="{color}">hello world</view>',
+      '<view style="{{\'color:\'+(color)+\';\'+virtualHostStyle}}" class="{{[virtualHostClass]}}">hello world</view>',
+      'with(this){}',
+      {
+        mergeVirtualHostAttributes: true
+      }
+    )
+  })
+
   it('generate v-show directive', () => {
     assertCodegen(
       '<view v-show="shown">hello world</view>',