web端支持组件上的原生事件

packages/chameleon-template-parse/src/common/process-template.js

@@ -257,10 +257,8 @@ exports.preParseVueEvent = function (content) {
   content = content.replace(reg, (m, $1) => {
     if (typeof $1 === "string" && $1.endsWith('.stop')) {
       $1 = $1.replace('.stop', '');
-      $1 = $1 === 'click' ? 'tap' : $1;
       return `c-catch:${$1}=`;
     } else {
-      $1 = $1 === 'click' ? 'tap' : $1;
       return `c-bind:${$1}=`
     }
   });
@@ -534,3 +532,7 @@ exports._deOperationGtLt = function(content) {
     return match;
   })
 }
+exports.transformNativeEvent = function(source) {
+  let reg = /__CML_NATIVE_EVENTS__/g;
+  return source.replace(reg, '.native');
+}

packages/chameleon-template-parse/src/common/utils.js

@@ -307,3 +307,22 @@ _.getInlineStatementArgs = function(argsStr) {
   return result.join();// "1,'index'+1,'$event','item',index+1,item"
 
 }
+_.isOriginTagOrNativeComp = function(tagName, options) {
+  let usedComponentInfo = (options.usingComponents || []).find((item) => item.tagName === tagName)
+  let isNative = usedComponentInfo && usedComponentInfo.isNative;
+  let isOrigin = (tagName && typeof tagName === 'string' && tagName.indexOf('origin-') === 0);
+  if (isOrigin || isNative) {
+    return true
+  }
+  return false;
+}
+// 判断是否是组件，不包括原生组件
+_.isNotNativeComponent = function(tagName, options) {
+  let usingComponents = options.usingComponents || [];
+  let buildInComponents = options.buildInComponents || {};
+  let isComponent = usingComponents.find((comp) =>
+    ((comp.tagName === tagName) && !comp.isNative)
+  ) || Object.keys(buildInComponents).includes(tagName);
+  return isComponent
+}
+

packages/chameleon-template-parse/src/compile-template-cml.js

@@ -52,6 +52,8 @@ exports.compileTemplateForCml = function (source, type, options) {
   source = processTemplate.postParseMustache(source)
   // 后置处理：用于处理 \u ，便于解析unicode 中文
   source = processTemplate.postParseUnicode(source);
+  // 后置处理，所有的 __CML_NATIVE_EVENTS__ ==> .native
+  source = processTemplate.transformNativeEvent(source)
   return {
     source,
     usedBuildInTagMap: options.usedBuildInTagMap

packages/chameleon-template-parse/src/compile-template-vue.js

@@ -53,6 +53,8 @@ exports.compileTemplateForVue = function (source, type, options) {
   source = processTemplate.postParseMustache(source)
   // 后置处理：用于处理 \u ，便于解析unicode 中文
   source = processTemplate.postParseUnicode(source);
+  // 后置处理，所有的 __CML_NATIVE_EVENTS__ ==> .native
+  source = processTemplate.transformNativeEvent(source)
   return {
     source,
     usedBuildInTagMap: options.usedBuildInTagMap

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

@@ -14,24 +14,34 @@ parseEvent.tap('web-weex', (args) => {
   if (type === 'web' || type === 'weex') {
     let container = path.container;
     let value = container.value;
-    let isStopBubble = false;// 默认都是冒泡的
+    let isStopBubble = false;// 默认都是冒泡
     if (node.namespace.name === 'c-catch') {
-      node.name.name === 'tap' && (node.name.name = 'click');
       isStopBubble = true;
-      // node.name.name = `${node.name.name}.stop`;
     } else {
-      node.name.name === 'tap' && (node.name.name = 'click');
       isStopBubble = false;
     }
     node.namespace.name = 'v-on';
     // ====这里作用是阻止对 origin-tag标签的事件进行代理
     let jsxElementNodePath = path.findParent((path) => t.isJSXElement(path.node));
     let jsxElementNode = jsxElementNodePath.node;
-    let usedComponentInfo = (options.usingComponents || []).find((item) => item.tagName === jsxElementNode.openingElement.name.name)
-    let isNative = usedComponentInfo && usedComponentInfo.isNative;
-    let isOrigin = (jsxElementNode.openingElement.name && typeof jsxElementNode.openingElement.name.name === 'string' && jsxElementNode.openingElement.name.name.indexOf('origin-') === 0);
-    if (isOrigin || isNative) {
-      return;
+    let tagName = jsxElementNode.openingElement.name.name;
+    let isOriginOrNative = utils.isOriginTagOrNativeComp(tagName, options);
+    let isNotNativeComp = utils.isNotNativeComponent(tagName, options)
+    let originEvents = ['click', 'touchstart', 'touchmove', 'touchend', 'touchcancel'];
+    if (type === 'web') { // web端tap和click区分
+      if (isNotNativeComp) { // 对于不是原生组件才进行原生事件的 .native的处理,非原生组件上如果写了tap事件，需要转化为click事件，因为 .native 语法对tap事件不生效
+        node.name.name === 'tap' && (node.name.name = 'click');
+        originEvents.includes(node.name.name) && (node.name.name = `${node.name.name}__CML_NATIVE_EVENTS__`);
+      }
+    }
+    if (type === 'weex') { // weex端 tap和click都处理成click
+      node.name.name === 'tap' && (node.name.name = 'click');
+      if (isNotNativeComp) {
+        originEvents.includes(node.name.name) && (node.name.name = `${node.name.name}__CML_NATIVE_EVENTS__`);
+      }
+    }
+    if (isOriginOrNative) {
+      return // 原生标签和原生组件直接不解析
     }
     // ====这里作用是阻止对 origin-tag标签的事件进行代理
 
@@ -78,12 +88,9 @@ parseEvent.tap('wx-baidu', (args) => {
     // ====这里作用是阻止对 origin-tag标签的事件进行代理
     let jsxElementNodePath = path.findParent((path) => t.isJSXElement(path.node));
     let jsxElementNode = jsxElementNodePath.node;
-    let usedComponentInfo = (options.usingComponents || []).find((item) => item.tagName === jsxElementNode.openingElement.name.name)
-
-    let isNative = usedComponentInfo && usedComponentInfo.isNative;
-    let isOrigin = (jsxElementNode.openingElement.name && typeof jsxElementNode.openingElement.name.name === 'string' && jsxElementNode.openingElement.name.name.indexOf('origin-') === 0);
-    if (isOrigin || isNative) {
-      return;
+    let tagName = jsxElementNode.openingElement.name.name
+    if (utils.isOriginTagOrNativeComp(tagName, options)) {
+      return // 原生标签和原生组件直接不解析
     }
     // ====这里作用是阻止对 origin-tag标签的事件进行代理
     if (!match) {
@@ -125,11 +132,9 @@ parseEvent.tap('alipay', (args) => {
     // ====这里作用是阻止对 origin-tag标签的事件进行代理
     let jsxElementNodePath = path.findParent((path) => t.isJSXElement(path.node));
     let jsxElementNode = jsxElementNodePath.node;
-    let usedComponentInfo = (options.usingComponents || []).find((item) => item.tagName === jsxElementNode.openingElement.name.name)
-    let isNative = usedComponentInfo && usedComponentInfo.isNative;
-    let isOrigin = (jsxElementNode.openingElement.name && typeof jsxElementNode.openingElement.name.name === 'string' && jsxElementNode.openingElement.name.name.indexOf('origin-') === 0);
-    if (isOrigin || isNative) {
-      return;
+    let tagName = jsxElementNode.openingElement.name.name
+    if (utils.isOriginTagOrNativeComp(tagName, options)) {
+      return // 原生标签和原生组件直接不解析
     }
     // ====这里作用是阻止对 origin-tag标签的事件进行代理
     if (!match) {

packages/chameleon-template-parse/test/common/process-template.test.js

@@ -53,7 +53,7 @@ describe('process-template', function() {
   });
   describe('preParseVueEvent', function() {
     it('support @ v-on', function() {
-      expect(processTemplate.preParseVueEvent(`<view v-on:touch="handle1" @click="handle2"></view>`)).to.equal(`<view c-bind:touch="handle1" c-bind:tap="handle2"></view>`)
+      expect(processTemplate.preParseVueEvent(`<view v-on:touch="handle1" @tap="handle2"></view>`)).to.equal(`<view c-bind:touch="handle1" c-bind:tap="handle2"></view>`)
     })
   });
   describe('preParseGtLt', function() {

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

 const compileTemplate = require('../src/index.js');
 const source = `<view class="demo-com">
-<view c-bind:touchstart="handleIndexTouchStart">index-handleTouchStart</view>
-<view c-bind:userEvent="handleIndexTap">index-handletap</view>
-<view c-bind:userevent="handleIndexTap">index-handletap</view>
+<thirdComp2 c-bind:tap="handleIndexTouchStart">index-handleTouchStart</thirdComp2>
 </view>`
 // <view><text :class="{{true? 'bg-green':''}}" >fafafa</text></view>
 // <view><text :class="true? 'bg-green':''" >fafafa</text></view>
@@ -28,7 +26,7 @@ let options = {lang: 'cml',
     tagName: 'cube-button',
     refUrl: '/path/to/ref1',
     filePath: 'path/to/real1',
-    isNative: false
+    isNative: true
   }, {
     tagName: 'thirdComp2',
     refUrl: '/path/to/ref2',
@@ -37,13 +35,13 @@ let options = {lang: 'cml',
   }]
 };
 console.log('before-compile', source);
-// let result_web = compileTemplate(source, 'web', options);
+let result_web = compileTemplate(source, 'web', options);
 // let result_weex = compileTemplate(source, 'weex', options);
 // let result_wx = compileTemplate(source, 'wx', options);
 // let result_baidu = compileTemplate(source, 'baidu', options);
-let result_alipay = compileTemplate(source, 'alipay', options);
-// console.log('result_web', result_web)
+// 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_baidu', result_baidu)
-console.log('result_alipay', result_alipay)
+// console.log('result_alipay', result_alipay)

packages/chameleon-vue-precompiler/lib/precompiler/hooks/events.js

@@ -123,9 +123,8 @@ function bindEvents(evts, el, attrs, cmlEvents, appearAttached) {
    * - click -> cml$tap
    * - scroll -> cml$scroll
    */
-  if (evts.click) {
-    evts['cml$tap'] = extend({}, evts.click);
-    delete evts.click;
+  if (evts.tap) { //这里取到tap事件进行代理，而不是原来的click事件，区分了tap和click
+    evts['cml$tap'] = extend({}, evts.tap);
     if (!hasBubbleParent) {
       evts.click = {
         value: '$stopOuterA'