增加支付宝,百度 component is 的功能

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

@@ -84,15 +84,21 @@ parseVue2Wx.tap('vue2wx-v-for', (args) => {
 parseVue2Wx.tap('component-is', (args) => {
   let {path, node, type, options} = args;
   let lang = options.lang;
+  let conditionMap = {
+    wx: 'wx:if',
+    alipay: 'a:if',
+    baidu: 's-if'
+
+  }
   let usingComponents = (options.usingComponents || []).map(item => item.tagName)
-  if (type === 'wx' && t.isJSXElement(node)) {
+  if ((type === 'wx' || type === 'alipay' || type === 'baidu') && t.isJSXElement(node)) {
     let currentTag = node.openingElement.name.name;
     let jsxElementChildren = node.children || [];
     if (currentTag === 'component') {
       let attributes = utils.getJSXElementAttrKeyValue(path);
-      let shrinkComponents = attributes.shrinkComponents;
-      if (shrinkComponents) {
-        usingComponents = shrinkComponents.split(',').reduce((result, comp) => {
+      let shrinkcomponents = attributes.shrinkcomponents;
+      if (shrinkcomponents) {
+        usingComponents = shrinkcomponents.split(',').reduce((result, comp) => {
           comp = utils.trim(comp);
           if (comp) {
             result.push(comp);
@@ -114,7 +120,7 @@ parseVue2Wx.tap('component-is', (args) => {
       if (currentComp && usingComponents) {
         let elementAttributes = path.node.openingElement.attributes || []
         usingComponents.forEach((comp) => {
-          let openTag = t.jsxOpeningElement(t.jsxIdentifier(comp), [t.jsxAttribute(t.jsxIdentifier('wx:if'), t.stringLiteral(`{{${currentComp} === '${comp}'}}`))].concat(elementAttributes));
+          let openTag = t.jsxOpeningElement(t.jsxIdentifier(comp), [t.jsxAttribute(t.jsxIdentifier(`${conditionMap[type]}`), t.stringLiteral(`{{${currentComp} === '${comp}'}}`))].concat(elementAttributes));
           let closeTag = t.jsxClosingElement(t.jsxIdentifier(comp))
           let insertNode = t.jsxElement(openTag, closeTag, jsxElementChildren, false);
 

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

 const compileTemplate = require('../src/index.js');
-const source = `<scroller :height="-1">
-<view> <text>cpxtest</text> </view>
-<view :style="'width:'+cpx+'cpx;'+'height:'+cpx2+'cpx;background-color:red'">cpx</view>
-<view @click="handleClick">change-component-vue</view>
-<view @click="handleClick(1,2,3)">change-component</view>
-  <component :is="currentComp" :image-src="chameleonSrc" title="this is title"></component>
-  <show v-show="show"></show>
-  <view v-text="message"></view>
-  <view :class="5 > 6 ? 'cls1':'cls2'" :style="5 < 6 ? 'width:300cpx':'height:300cpx'">
-    {{5 > 6?'5>6' : '5 < 6'}}</view>
-  <view v-if="false">c-if</view>
-  <view v-else-if="true">c-else-if</view>
-  <view v-else>c-else</view>
-  
-  <demo-com :image-src="chameleonSrc" title="标题"></demo-com>
-  <view :style="computedStyle">computedStyle</view>
-  <view><text>v-model的使用</text></view>
-  <input type="text" v-model=" modelValueTest  "/>
-  <text>{{modelValueTest}}</text>
-
-  <comp v-model=" modelValueTest2 " ></comp>
-  <view><text>组件使其改变{{modelValueTest2}}</text></view>
-
-</scroller>`
+const source = `<view>
+<view style="width:200cpx;height:100cpx;backgrounnd-color:green">static style</view>
+<view style="{{'width:'+cpx+'cpx;'+'height:'+cpx2+'cpx;background-color:red'}}"></view>
+<view style="width:{{cpx}}cpx;{{'height:'+cpx2+'cpx'}};background-color:green">ccc</view></view>`
 // <view><text :class="{{true? 'bg-green':''}}" >fafafa</text></view>
 // <view><text :class="true? 'bg-green':''" >fafafa</text></view>
 //
 // let result = compileTemplate(source,'web');
-let options = {lang: 'vue',
+let options = {lang: 'cml',
   filePath: '/Users/didi/components.cml',
   buildInComponents: {button: "cml-buildin-button"},
   cmss: {
@@ -56,12 +36,12 @@ let options = {lang: 'vue',
   }]
 };
 console.log('before-compile', source);
-// let result_web = compileTemplate(source, 'web', options);
+let result_web = compileTemplate(source, 'web', 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',{lang:'cml'});
-// console.log('result_web', result_web)
-// console.log('result_wx', result_wx)
+console.log('result_web', result_web)
+console.log('result_wx', result_wx)
 // console.log('result_alipay', result_alipay)
 // console.log('result_baidu', result_baidu)