fix: 修复无法使用 catch 事件和 dataset 的问题

fix #219 resolve #231
remaxjs · Sep 18, 2019 · 44485b4 · 44485b4
1 parent d02c1db
commit 44485b4
Show file tree

Hide file tree

Showing 78 changed files with 113 additions and 15 deletions.
diff --git a/packages/remax-cli/src/build/adapters/alipay/index.ts b/packages/remax-cli/src/build/adapters/alipay/index.ts
@@ -27,6 +27,7 @@ export const moduleFormat = 'esm';
 const alias: any = {
   className: 'class',
   onClick: 'onTap',
+  catchClick: 'catchTap',
 };
 
 export function getNativePropName(prop: string) {

diff --git a/packages/remax-cli/src/build/adapters/wechat/index.ts b/packages/remax-cli/src/build/adapters/wechat/index.ts
@@ -25,10 +25,13 @@ export const moduleFormat = 'cjs';
 
 // TODO: alias 方法在 remax 和 remax-cli 都重复定义了，想办法 DRY
 const alias: { [prop: string]: string } = {
-  className: 'class',
   activeColor: 'activeColor',
   backgroundColor: 'backgroundColor',
   onClick: 'bindtap',
+  catchClick: 'catchtap',
+  enable3D: 'enable-3D',
+  hTouchMove: 'htouchmove',
+  vTouchMove: 'vtouchmove',
 };
 
 export function getNativePropName(prop: string) {
@@ -38,7 +41,11 @@ export function getNativePropName(prop: string) {
     return aliasProp;
   }
 
-  if (prop.startsWith('on')) {
+  if (prop.endsWith('className')) {
+    return prop.replace('className', 'class');
+  }
+
+  if (prop.startsWith('on') || prop.startsWith('catch')) {
     return prop.toLowerCase().replace('on', 'bind');
   }
 

diff --git a/packages/remax-cli/src/build/plugins/components.ts b/packages/remax-cli/src/build/plugins/components.ts
@@ -41,10 +41,6 @@ function addToComponentCollection(
 }
 
 function shouldRegisterAllProps(adapter: Adapter, node: t.JSXElement) {
-  if (adapter.name === 'alipay') {
-    return true;
-  }
-
   if (
     node.openingElement.attributes.find(a => a.type === 'JSXSpreadAttribute')
   ) {
@@ -77,7 +73,16 @@ function registerComponent(
   }
 
   let usedProps = adapter.hostComponents(componentName).props;
-  if (node && !shouldRegisterAllProps(adapter, node)) {
+  if (node && adapter.name === 'alipay') {
+    // 支付宝在使用全部props的基础上，还加入用户定义的prop，用于收集 dataset, catch 事件等props
+    node.openingElement.attributes.forEach(e => {
+      const propName = get(e, 'name.name') as string;
+
+      if (!usedProps.find(prop => prop === propName)) {
+        usedProps.push(propName);
+      }
+    });
+  } else if (node && !shouldRegisterAllProps(adapter, node)) {
     usedProps = node.openingElement.attributes.map(e => {
       const propName = get(e, 'name.name') as string;
       return propName;

diff --git a/packages/remax-cli/templates/alipay/component.ejs b/packages/remax-cli/templates/alipay/component.ejs
@@ -1,7 +1,12 @@
-<% camelCased = function(str) { return str.replace(/-([a-z0-9])/g, function (g) { return g[1].toUpperCase(); })}%>
+<% camelCased = function(str) {
+  if (str.indexOf('-') !== -1) {
+    return str;
+  }
+  return str.replace(/-([a-z0-9])/g, function (g) { return g[1].toUpperCase();
+})}%>
 
 <template name="REMAX_TPL_1_<%=id%>">
-  <<%=id%> <% for(let key of props) { %> <%=key%>="{{item.props.<%=camelCased(key)%>}}" <% } %>>
+  <<%=id%> <% for(let key of props) { %> <%=key%>="{{item.props['<%=camelCased(key)%>']}}" <% } %>>
     <% if (id === 'swiper') { %>
     <block a:for="{{item.children}}" a:key="{{item.id}}">
       <swiper-item key="{{item.props.key}}">

diff --git a/packages/remax-cli/templates/wechat/component.ejs b/packages/remax-cli/templates/wechat/component.ejs
@@ -1,7 +1,7 @@
 <% camelCased = function(str) { return str.replace(/-([a-z0-9])/g, function (g) { return g[1].toUpperCase(); })}%>
 
 <template name="REMAX_TPL_<%=templateId%>_<%=id%>">
-  <<%=id%> <% for(let key of props) { %> <%=key%>="{{_h.v(i.props.<%=camelCased(key)%>)}}" <% } %>>
+  <<%=id%> <% for(let key of props) { %> <%=key%>="{{_h.v(i.props['<%=key%>'])}}" <% } %>>
     <% if (id === 'swiper') { %>
     <block wx:for="{{i.children}}" wx:key="{{id}}">
       <swiper-item item-id="{{item.props.itemId}}" key="{{item.props.key}}">

diff --git a/packages/remax/src/adapters/alipay/components/Button.ts b/packages/remax/src/adapters/alipay/components/Button.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface ButtonProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   style?: React.CSSProperties;

diff --git a/packages/remax/src/adapters/alipay/components/Canvas.ts b/packages/remax/src/adapters/alipay/components/Canvas.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface CanvasProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   style?: React.CSSProperties;
   className?: string;

diff --git a/packages/remax/src/adapters/alipay/components/Checkbox.ts b/packages/remax/src/adapters/alipay/components/Checkbox.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface CheckboxProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   value?: string;

diff --git a/packages/remax/src/adapters/alipay/components/CheckboxGroup.ts b/packages/remax/src/adapters/alipay/components/CheckboxGroup.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface CheckboxGroupProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   name?: string;

diff --git a/packages/remax/src/adapters/alipay/components/ContactButton.ts b/packages/remax/src/adapters/alipay/components/ContactButton.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface LifestyleProps {
+  readonly dataset?: DOMStringMap;
   tntInstId: string;
   scene: string;
   size?: string | number;

diff --git a/packages/remax/src/adapters/alipay/components/CoverImage.ts b/packages/remax/src/adapters/alipay/components/CoverImage.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface CoverImageProps {
+  readonly dataset?: DOMStringMap;
   className?: string;
   style?: React.CSSProperties;
   src?: string;

diff --git a/packages/remax/src/adapters/alipay/components/CoverView.ts b/packages/remax/src/adapters/alipay/components/CoverView.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface CoverViewProps {
+  readonly dataset?: DOMStringMap;
   className?: string;
   style?: React.CSSProperties;
   onTap?: (e: any) => void;

diff --git a/packages/remax/src/adapters/alipay/components/Form.ts b/packages/remax/src/adapters/alipay/components/Form.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface FormProps {
+  readonly dataset?: DOMStringMap;
   className?: string;
   style?: React.CSSProperties;
   reportSubmit: boolean;

diff --git a/packages/remax/src/adapters/alipay/components/Icon.ts b/packages/remax/src/adapters/alipay/components/Icon.ts
@@ -1,5 +1,6 @@
 import factory from './factory';
 export interface IconProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className: string;
   type:

diff --git a/packages/remax/src/adapters/alipay/components/Image.ts b/packages/remax/src/adapters/alipay/components/Image.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface ImageProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   src?: string;

diff --git a/packages/remax/src/adapters/alipay/components/Input.ts b/packages/remax/src/adapters/alipay/components/Input.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface InputProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   value?: string;

diff --git a/packages/remax/src/adapters/alipay/components/Label.ts b/packages/remax/src/adapters/alipay/components/Label.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface LabelProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   for?: string;
 }

diff --git a/packages/remax/src/adapters/alipay/components/Lifestyle.ts b/packages/remax/src/adapters/alipay/components/Lifestyle.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface LifestyleProps {
+  readonly dataset?: DOMStringMap;
   publicId: string;
   onFollow?: (e: any) => void;
 }

diff --git a/packages/remax/src/adapters/alipay/components/Map.ts b/packages/remax/src/adapters/alipay/components/Map.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface MapMarker {
+  readonly dataset?: DOMStringMap;
   id?: number;
   latitude: number;
   longitude: number;
@@ -24,6 +25,7 @@ export interface MapMarker {
 }
 
 export interface MapPolyline {
+  readonly dataset?: DOMStringMap;
   points: Array<{
     latitude: number;
     longitude: number;
@@ -38,6 +40,7 @@ export interface MapPolyline {
 }
 
 export interface MapCircle {
+  readonly dataset?: DOMStringMap;
   latitude: number;
   longitude: number;
   color?: string;
@@ -47,20 +50,23 @@ export interface MapCircle {
 }
 
 export interface MapPosition {
+  readonly dataset?: DOMStringMap;
   left?: number;
   top?: number;
   width?: number;
   height?: number;
 }
 
 export interface MapControl {
+  readonly dataset?: DOMStringMap;
   id?: number;
   position: MapPosition;
   iconPath: string;
   clickable?: boolean;
 }
 
 export interface MapPolygon {
+  readonly dataset?: DOMStringMap;
   points: Array<{
     latitude: number;
     longitude: number;
@@ -71,11 +77,13 @@ export interface MapPolygon {
 }
 
 export interface MapCoordinate {
+  readonly dataset?: DOMStringMap;
   latitude?: number;
   longitude?: number;
 }
 
 export interface MapSetting {
+  readonly dataset?: DOMStringMap;
   // 手势
   gestureEnable?: number;
   // 比例尺
@@ -96,6 +104,7 @@ export interface MapSetting {
 }
 
 export interface Map extends MapCoordinate {
+  readonly dataset?: DOMStringMap;
   style?: React.CSSProperties;
   className?: string;
   scale?: number;

diff --git a/packages/remax/src/adapters/alipay/components/MovableArea.ts b/packages/remax/src/adapters/alipay/components/MovableArea.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface MovableAreaProps {
+  readonly dataset?: DOMStringMap;
   style?: React.CSSProperties;
   width: number;
   height: number;

diff --git a/packages/remax/src/adapters/alipay/components/MovableView.ts b/packages/remax/src/adapters/alipay/components/MovableView.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface MovableViewProps {
+  readonly dataset?: DOMStringMap;
   style?: React.CSSProperties;
   width: number;
   height: number;

diff --git a/packages/remax/src/adapters/alipay/components/Navigator.ts b/packages/remax/src/adapters/alipay/components/Navigator.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface NavigatorProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   openType?:

diff --git a/packages/remax/src/adapters/alipay/components/Picker.ts b/packages/remax/src/adapters/alipay/components/Picker.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface PickerProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   range?: string[] | any[];

diff --git a/packages/remax/src/adapters/alipay/components/PickerView.ts b/packages/remax/src/adapters/alipay/components/PickerView.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface PickerViewProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   value?: number[];

diff --git a/packages/remax/src/adapters/alipay/components/Progress.ts b/packages/remax/src/adapters/alipay/components/Progress.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface ProgressProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   percent?: number;

diff --git a/packages/remax/src/adapters/alipay/components/Radio.ts b/packages/remax/src/adapters/alipay/components/Radio.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface RadioProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   value?: string;

diff --git a/packages/remax/src/adapters/alipay/components/RadioGroup.ts b/packages/remax/src/adapters/alipay/components/RadioGroup.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface RadioGroupProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   name?: string;

diff --git a/packages/remax/src/adapters/alipay/components/RichText.ts b/packages/remax/src/adapters/alipay/components/RichText.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface RichTextNode {
+  readonly dataset?: DOMStringMap;
   type?: string;
   name: string;
   attrs?: any;

diff --git a/packages/remax/src/adapters/alipay/components/ScrollView.ts b/packages/remax/src/adapters/alipay/components/ScrollView.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface ScrollViewProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   style?: React.CSSProperties;

diff --git a/packages/remax/src/adapters/alipay/components/Slider.ts b/packages/remax/src/adapters/alipay/components/Slider.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface SliderProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   name?: string;

diff --git a/packages/remax/src/adapters/alipay/components/Swiper.ts b/packages/remax/src/adapters/alipay/components/Swiper.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface SwiperProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   indicatorDots?: boolean;

diff --git a/packages/remax/src/adapters/alipay/components/SwiperItem.ts b/packages/remax/src/adapters/alipay/components/SwiperItem.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface SwiperItemProps {
+  readonly dataset?: DOMStringMap;
   key: string;
 }
 

diff --git a/packages/remax/src/adapters/alipay/components/Switch.ts b/packages/remax/src/adapters/alipay/components/Switch.ts
@@ -1,6 +1,7 @@
 import factory from './factory';
 
 export interface SwitchProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   name?: string;

diff --git a/packages/remax/src/adapters/alipay/components/Text.ts b/packages/remax/src/adapters/alipay/components/Text.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface TextProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   style?: React.CSSProperties;

diff --git a/packages/remax/src/adapters/alipay/components/TextArea.ts b/packages/remax/src/adapters/alipay/components/TextArea.ts
@@ -2,6 +2,7 @@ import factory from './factory';
 import * as React from 'react';
 
 export interface TextareaProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   name?: string;

diff --git a/packages/remax/src/adapters/alipay/components/View.ts b/packages/remax/src/adapters/alipay/components/View.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import factory from './factory';
 
 export interface ViewProps {
+  readonly dataset?: DOMStringMap;
   id?: string;
   className?: string;
   style?: React.CSSProperties;