fix: native component event support

packages/jsx-compiler/src/modules/__tests__/element.js

@@ -334,6 +334,7 @@ describe('Transform JSXElement', () => {
         />
       `);
       ast.openingElement.name.isCustom = true;
+      ast.openingElement.name.isNative = true;
       _transform({
         templateAST: ast
       }, wxAdapter);
@@ -526,4 +527,34 @@ describe('Transform JSXElement', () => {
       }).toThrowError();
     });
   });
+
+  it('should transform events in native components (defined in package.json -> miniappConfig) in wechat miniprogram', () => {
+    const ast = parseExpression(`
+      <custom-element
+        onClick={onClick}
+        onChange={onChange}
+      />
+    `);
+    ast.openingElement.name.isCustom = true;
+    ast.openingElement.name.isNative = true;
+    _transform({
+      templateAST: ast
+    }, wxAdapter);
+    expect(genInlineCode(ast).code).toEqual('<custom-element bindonClick="_e0" bindonChange="_e1" />');
+  });
+
+  it('shouldn\'t transform events in non-native components (defined in package.json -> miniappConfig) in wechat miniprogram', () => {
+    const ast = parseExpression(`
+      <custom-element
+        onClick={onClick}
+        onChange={onChange}
+      />
+    `);
+    ast.openingElement.name.isCustom = true;
+    ast.openingElement.name.isNative = false;
+    _transform({
+      templateAST: ast
+    }, wxAdapter);
+    expect(genInlineCode(ast).code).toEqual('<custom-element onClick="_e0" onChange="_e1" />');
+  });
 });

packages/jsx-compiler/src/modules/components.js

@@ -35,10 +35,16 @@ function transformIdentifierComponentName(path, alias, dynamicValue, parsed, opt
   const aliasName = alias.name.replace(/@|\//g, '_');
   const componentTag = alias.default ? aliasName : `${aliasName}-${alias.local.toLowerCase()}`;
   replaceComponentTagName(path, t.jsxIdentifier(componentTag));
+  /**
+   * Judge whether the component is Custom Components.
+   * If it's Custom Component, the component should be defined in usingComponents property in .json,
+   * the tag's name of component should transform, and isCustomEl, isCustom should also be true.
+   */
   node.isCustomEl = alias.isCustomEl;
   node.name.isCustom = true;
 
-  if (!getCompiledComponents(options.adapter.platform)[componentTag]) {
+  const platform = options.adapter.platform;
+  if (!getCompiledComponents(platform)[componentTag]) {
     // <tag __tagId="tagId" />
 
     let tagId;
@@ -149,6 +155,12 @@ function transformIdentifierComponentName(path, alias, dynamicValue, parsed, opt
               importedComponent.isFromComponentLibrary = true;
             });
           }
+
+          /**
+           * Judge whether the component has native compiled component
+           * If it has, the property isNative should true, otherwise it would be false.
+           */
+          node.name.isNative = !!getCustomComponentPath(pkg, platform);
         }
       }
     }
@@ -468,3 +480,12 @@ function findParentsJSXListEl(path, parentList = []) {
     return parentList;
   }
 }
+
+function getCustomComponentPath(pkg, platform) {
+  /**
+   * Get the identifier in package.json -> miniappConfig
+   * In ali-miniApp, it will be 'main', otherwise it's `main:${platform}`
+   */
+  const platformIdentifier = platform === 'ali' ? 'main' : `main:${platform}`
+  return pkg && pkg.miniappConfig && pkg.miniappConfig[platformIdentifier] || null
+}

packages/jsx-compiler/src/modules/element.js

@@ -6,7 +6,6 @@ const createJSXBinding = require('../utils/createJSXBinding');
 const CodeError = require('../utils/CodeError');
 const DynamicBinding = require('../utils/DynamicBinding');
 const getCompiledComponents = require('../getCompiledComponents');
-const baseComponents = require('../baseComponents');
 const replaceComponentTagName = require('../utils/replaceComponentTagName');
 const { parseExpression } = require('../parser/index');
 const isSlotScopeNode = require('../utils/isSlotScopeNode');
@@ -541,7 +540,7 @@ function transformTemplate(
                 attr.name.name = attr.name.name.replace('on', 'bind').toLowerCase();
               }
             });
-          } else if (adapter.needTransformEvent && baseComponents.indexOf(name) > -1) {
+          } else if (adapter.needTransformEvent && componentTagNode.isNative) {
             // Rax base component should add bind before onXXX
             // While events in custom component should not be changed
             node.attributes.forEach(attr => {