微信端自定义组件不加cml-base改成cml-view

packages/chameleon-template-parse/src/parser/parse-class.js

@@ -73,14 +73,18 @@ parseClass.tap('weex-cml', (args) => {
 
 })
 parseClass.tap('wx-alipay-baidu-cml', (args) => {
-  let { node, type, options: {lang, filePath} } = args;
+  let { node, type, options: {lang, filePath, usingComponents} } = args;
   if (lang === 'cml' && (type === 'wx' || type === 'alipay' || type === 'baidu')) {
     let tagName = node.openingElement.name.name;
     let attributes = node.openingElement.attributes;
     let classNodes = attributes.filter((attr) => // 如果没有符合条件的classNodes则返回一个空数组
       attr.name.name === 'class'
     );
+    let isUsingComponents = (usingComponents || []).find((comp) => comp.tagName === tagName);
     let extraClass = ` cml-base cml-${tagName}`;
+    if (isUsingComponents && type === 'wx') {
+      extraClass = ` cml-view cml-${tagName}`;
+    }
     if (type === 'alipay') {
       let randomClassName = hash(filePath);
       extraClass = `${extraClass} cml-${randomClassName}`
@@ -128,7 +132,7 @@ parseClass.tap('weex-vue', (args) => {
 
 })
 parseClass.tap('wx-alipay-baidu-vue', (args) => {
-  let { node, type, options: {lang, filePath} } = args;
+  let { node, type, options: {lang, filePath, usingComponents} } = args;
   if (lang === 'vue' && (type === 'wx' || type === 'alipay' || type === 'baidu')) {
     let tagName = node.openingElement.name.name;
     let attributes = node.openingElement.attributes;
@@ -136,6 +140,10 @@ parseClass.tap('wx-alipay-baidu-vue', (args) => {
       attr.name.name === 'class' || attr.name.name.name === 'class'
     );
     let extraClass = ` cml-base cml-${tagName}`;
+    let isUsingComponents = (usingComponents || []).find((comp) => comp.tagName === tagName);
+    if (isUsingComponents && type === 'wx') {
+      extraClass = ` cml-view cml-${tagName}`;
+    }
     if (type === 'alipay') {
       let randomClassName = hash(filePath);
       extraClass = `${extraClass} cml-${randomClassName}`

packages/chameleon-template-parse/test/index.js

 const compileTemplate = require('../src/index.js');
-const source = `<component class="{{cls1}}" c-if="{{value}}" is="{{currentComp}}" style="width:{{cpx}}cpx" c-bind:eventClick="handleEventClick" c-bind:changeevent="handleChangeEvent" shrinkcomponents="comp1,comp2,comp3"></component>`
+const source = `<view class="pay-detail-li">
+<text c-if="{{fee_detail.length > 2 && fee_detail[3]}}">行程总计（含{{fee_detail.length > 2 && fee_detail[3].name}}{{fee_detail.length > 2 && fee_detail[3].fee}}）</text>
+<text c-else-if="{{fee_detail.length > 1 && fee_detail[2]}}">行程总计（含{{fee_detail.length > 1 && fee_detail[2].name}}{{fee_detail.length > 1 && fee_detail[2].fee}}）</text>
+<text c-else>行程总计</text>
+<text>{{total_fee || '0.00元'}}</text>
+</view>`
 // <view><text :class="{{true? 'bg-green':''}}" >fafafa</text></view>
 // <view><text :class="true? 'bg-green':''" >fafafa</text></view>
 //
@@ -35,10 +40,10 @@ let options = {lang: 'cml',
 console.log('before-compile', source);
 // let result_web = compileTemplate(source, 'web', options);
 // let result_weex = compileTemplate(source, 'weex', options);
-// let result_wx = compileTemplate(source, 'wx', options);
+let result_wx = compileTemplate(source, 'wx', options);
 // let result_baidu = compileTemplate(source, 'wx', options);
-let result_alipay = compileTemplate(source, 'alipay', options);
+// let result_alipay = compileTemplate(source, 'alipay', options);
 // console.log('result_web', result_web)
 // console.log('result_weex', result_weex)
-// console.log('result_wx', result_wx)
-console.log('result_alipay', result_alipay)
+console.log('result_wx', result_wx)
+// console.log('result_alipay', result_alipay)

packages/chameleon-template-parse/test/parser/cml.test.js

@@ -36,7 +36,7 @@ describe('parse-template-cml-all', function() {
     let source = `<view><button></button><thirdComp1></thirdComp1><thirdComp2></thirdComp2></view>`;
     it('test-tag-transform', function() {
       expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button class=" cml-base cml-button"></cml-buildin-button><thirdComp1 class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 class=" cml-base cml-thirdComp2"></thirdComp2></div>`);
-      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button class=" cml-base cml-button"></cml-buildin-button><thirdComp1 class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 class=" cml-base cml-thirdComp2"></thirdComp2></view>`)
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button class=" cml-base cml-button"></cml-buildin-button><thirdComp1 class=" cml-view cml-thirdComp1"></thirdComp1><thirdComp2 class=" cml-view cml-thirdComp2"></thirdComp2></view>`)
     });
   });
   // directive c-model
@@ -184,7 +184,7 @@ describe('parse-template-cml-all', function() {
       expect(compileTemplate(source, 'weex', options).source).to.equal(`<div class=" cml-base cml-view"><tag v-on:click="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 v-on:click="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 v-on:click="_cmlInlineStatementEventProxy(\'handleClick\',1,item,\'str\')" class=" cml-base cml-thirdComp2"></thirdComp2></div>`);
     });
     it('test-event-transform-wx', function() {
-      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><tag bindtap="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 bindtap="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 bindtap="_cmlInlineStatementEventProxy" data-arg2="str" data-arg1="{{item}}" data-arg0="{{1}}" data-args="1,item,\'str\'" data-eventtap="handleClick" class=" cml-base cml-thirdComp2"></thirdComp2></view>`);
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><tag bindtap="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 bindtap="handleClick(1,item,\'str\')" class=" cml-view cml-thirdComp1"></thirdComp1><thirdComp2 bindtap="_cmlInlineStatementEventProxy" data-arg2="str" data-arg1="{{item}}" data-arg0="{{1}}" data-args="1,item,\'str\'" data-eventtap="handleClick" class=" cml-view cml-thirdComp2"></thirdComp2></view>`);
     });
     it('test-event-transform-alipay', function() {
       expect(compileTemplate(source, 'alipay', options).source).to.equal(`<view class=" cml-base cml-view cml-5766bf8a"><tag onTap="handleClick" class=" cml-base cml-origin-tag cml-5766bf8a"></tag><view class=" cml-base cml-view cml-5766bf8a"><thirdComp1 onTap="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1 cml-5766bf8a"></thirdComp1></view><view class=" cml-base cml-view cml-5766bf8a"><thirdComp2 onTap="_cmlInlineStatementEventProxy" data-arg2="str" data-arg1="{{item}}" data-arg0="{{1}}" data-args="1,item,\'str\'" data-eventtap="handleClick" class=" cml-base cml-thirdComp2 cml-5766bf8a"></thirdComp2></view></view>`);
@@ -204,7 +204,7 @@ describe('parse-template-cml-all', function() {
     });
     // wx baidu alipay
     it('parse-class-miniapp', function() {
-      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button class="cls1 {{true ? \'cls2\':\'cls3\'}}  cml-base cml-button"></cml-buildin-button><thirdComp1 class="cls4  cml-base cml-thirdComp1"></thirdComp1></view>`);
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button class="cls1 {{true ? \'cls2\':\'cls3\'}}  cml-base cml-button"></cml-buildin-button><thirdComp1 class="cls4  cml-view cml-thirdComp1"></thirdComp1></view>`);
     });
   });
   // style 以及 miniappp端cpx动态测试
@@ -218,7 +218,7 @@ describe('parse-template-cml-all', function() {
     });
     // wx baidu alipay
     it('parse-style-miniapp', function() {
-      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button style="width:{{cpx}}rpx;height:100rpx;border-width:200rpx;{{\'width:\' + cpx + \'rpx\'}}" class=" cml-base cml-button"></cml-buildin-button><thirdComp1 style="{{\'width:\' + cpx + \'rpx;\' + \'height:\' + cpx2 + \'rpx;background-color:red\'}}" class=" cml-base cml-thirdComp1"></thirdComp1></view>`);
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button style="width:{{cpx}}rpx;height:100rpx;border-width:200rpx;{{\'width:\' + cpx + \'rpx\'}}" class=" cml-base cml-button"></cml-buildin-button><thirdComp1 style="{{\'width:\' + cpx + \'rpx;\' + \'height:\' + cpx2 + \'rpx;background-color:red\'}}" class=" cml-view cml-thirdComp1"></thirdComp1></view>`);
     });
   });
   // ref  动态

packages/chameleon-template-parse/test/parser/vue.test.js

@@ -35,7 +35,7 @@ describe('parse-template-vue-all', function() {
     let source = `<view><button></button><thirdComp1></thirdComp1><thirdComp2></thirdComp2></view>`;
     it('test-tag-transform', function() {
       expect(compileTemplate(source, 'web', options).source).to.equal(`<div class=" cml-base cml-view"><cml-buildin-button class=" cml-base cml-button"></cml-buildin-button><thirdComp1 class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 class=" cml-base cml-thirdComp2"></thirdComp2></div>`);
-      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button class=" cml-base cml-button"></cml-buildin-button><thirdComp1 class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 class=" cml-base cml-thirdComp2"></thirdComp2></view>`)
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button class=" cml-base cml-button"></cml-buildin-button><thirdComp1 class=" cml-view cml-thirdComp1"></thirdComp1><thirdComp2 class=" cml-view cml-thirdComp2"></thirdComp2></view>`)
     });
   });
   // directive v-model
@@ -183,7 +183,7 @@ describe('parse-template-vue-all', function() {
       expect(compileTemplate(source, 'weex', options).source).to.equal(`<div class=" cml-base cml-view"><tag v-on:click="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 v-on:click="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 v-on:click="_cmlInlineStatementEventProxy(\'handleClick\',1,item,\'str\')" class=" cml-base cml-thirdComp2"></thirdComp2></div>`);
     });
     it('test-event-transform-wx', function() {
-      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><tag bindtap="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 bindtap="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1"></thirdComp1><thirdComp2 bindtap="_cmlInlineStatementEventProxy" data-arg2="str" data-arg1="{{item}}" data-arg0="{{1}}" data-args="1,item,\'str\'" data-eventtap="handleClick" class=" cml-base cml-thirdComp2"></thirdComp2></view>`);
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><tag bindtap="handleClick" class=" cml-base cml-origin-tag"></tag><thirdComp1 bindtap="handleClick(1,item,\'str\')" class=" cml-view cml-thirdComp1"></thirdComp1><thirdComp2 bindtap="_cmlInlineStatementEventProxy" data-arg2="str" data-arg1="{{item}}" data-arg0="{{1}}" data-args="1,item,\'str\'" data-eventtap="handleClick" class=" cml-view cml-thirdComp2"></thirdComp2></view>`);
     });
     it('test-event-transform-alipay', function() {
       expect(compileTemplate(source, 'alipay', options).source).to.equal(`<view class=" cml-base cml-view cml-5766bf8a"><tag onTap="handleClick" class=" cml-base cml-origin-tag cml-5766bf8a"></tag><view class=" cml-base cml-view cml-5766bf8a"><thirdComp1 onTap="handleClick(1,item,\'str\')" class=" cml-base cml-thirdComp1 cml-5766bf8a"></thirdComp1></view><view class=" cml-base cml-view cml-5766bf8a"><thirdComp2 onTap="_cmlInlineStatementEventProxy" data-arg2="str" data-arg1="{{item}}" data-arg0="{{1}}" data-args="1,item,\'str\'" data-eventtap="handleClick" class=" cml-base cml-thirdComp2 cml-5766bf8a"></thirdComp2></view></view>`);
@@ -203,7 +203,7 @@ describe('parse-template-vue-all', function() {
     });
     // wx baidu alipay
     it('parse-class-miniapp', function() {
-      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button class="{{true ? \'cls2\':\'cls3\'}} cls1  cml-base cml-button"></cml-buildin-button><thirdComp1 class="cls4  cml-base cml-thirdComp1"></thirdComp1></view>`);
+      expect(compileTemplate(source, 'wx', options).source).to.equal(`<view class=" cml-base cml-view"><cml-buildin-button class="{{true ? \'cls2\':\'cls3\'}} cls1  cml-base cml-button"></cml-buildin-button><thirdComp1 class="cls4  cml-view cml-thirdComp1"></thirdComp1></view>`);
     });
   });
   // style 以及 miniappp端cpx动态测试