Merge branch 'feat-react-template-compiler' of github.com:didi/mpx in…

…to feat-react-template-compiler

packages/core/src/platform/builtInMixins/proxyEventMixin.ios.js

@@ -3,16 +3,10 @@ import Mpx from '../../index'
 
 export default function proxyEventMixin () {
   const methods = {
-    __invoke (rawEvent, type, eventConfig = []) {
-      const eventObj = {
-        type,
-        detail: null,
-        // ...rawEvent.nativeEvent,
-        ...rawEvent
-      }
+    __invoke (rawEvent, eventConfig = []) {
       if (typeof Mpx.config.proxyEventHandler === 'function') {
         try {
-          Mpx.config.proxyEventHandler(eventObj)
+          Mpx.config.proxyEventHandler(rawEvent)
         } catch (e) {
         }
       }
@@ -25,12 +19,12 @@ export default function proxyEventMixin () {
           const params = item.length > 1
             ? item.slice(1).map(item => {
               if (item === '__mpx_event__') {
-                return eventObj
+                return rawEvent
               } else {
                 return item
               }
             })
-            : [eventObj]
+            : [rawEvent]
           if (typeof this[callbackName] === 'function') {
             returnedValue = this[callbackName].apply(this, params)
           } else {

packages/core/src/platform/patch/react/getDefaultOptions.ios.js

@@ -24,6 +24,10 @@ function getListeners (props) {
   return listenerMap
 }
 
+function getTemplateAttrs (listener = {}, attrs = {}) {
+  return Object.assign(listener, attrs)
+}
+
 function createEffect (proxy, components, listeners) {
   const update = proxy.update = () => {
     // pre render for props update
@@ -40,7 +44,7 @@ function createEffect (proxy, components, listeners) {
   }
   update.id = proxy.uid
   proxy.effect = new ReactiveEffect(() => {
-    return proxy.target.__injectedRender(createElement, components, getNativeComponent, listeners)
+    return proxy.target.__injectedRender(createElement, components, getNativeComponent, listeners, getTemplateAttrs)
   }, () => queueJob(update), proxy.scope)
 }
 

packages/webpack-plugin/lib/react/processTemplate.js

@@ -112,12 +112,13 @@ module.exports = function (template, {
             createElement: true,
             components: true,
             getNativeComponent: true,
-            listeners: true
+            listeners: true,
+            getTemplateAttrs: true
           }, meta.wxsModuleMap)
           const bindResult = bindThis.transform(rawCode, {
             ignoreMap
           })
-          output += `global.currentInject.render = function (createElement, components, getNativeComponent, listeners) {
+          output += `global.currentInject.render = function (createElement, components, getNativeComponent, listeners, getTemplateAttrs) {
   return ${bindResult.code}
 };\n`
         } catch (e) {

packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.js

@@ -188,7 +188,12 @@ const useInnerTouchable = props => {
     props: props
   })
   useEffect(() => {
-    ref.current.props = props
+    ref.current = {
+      startTimer: null,
+      needPress: true,
+      mpxPressInfo: {},
+      props: props
+    }
   })
 
   function handleEmitEvent (events, type, oe) {
@@ -222,7 +227,7 @@ const useInnerTouchable = props => {
     if (catchlongpress || bindlongpress || captureCatchlongpress || captureBindlongpress) {
       ref.current.startTimer = setTimeout(() => {
         if (ref.current.startTimer) {
-         ref.current.needPress = false
+          ref.current.needPress = false
           handleEmitEvent(currentPressEvent, 'longpress', e)
         }
       }, 350)

packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx

@@ -37,6 +37,7 @@
 import React, { useEffect, useMemo, useRef, useState, ReactNode, useCallback, forwardRef } from 'react'
 import {
   TouchableWithoutFeedback,
+  GestureResponderEvent,
   View,
   Text,
   StyleSheet,
@@ -47,6 +48,7 @@ import {
   Easing,
 } from 'react-native'
 import { extracteTextStyle } from './utils'
+import useInnerTouchable, { getCustomEvent } from './getInnerListeners'
 
 export interface ButtonProps {
   size?: string
@@ -60,7 +62,8 @@ export interface ButtonProps {
   'hover-stay-time'?: number
   style?: StyleProp<ViewStyle & TextStyle>
   children: ReactNode
-  bindTap?: () => void
+  bindtap?: (evt: GestureResponderEvent | unknown) => void
+  catchtap?: (evt: GestureResponderEvent | unknown) => void
 }
 
 export type Type = 'default' | 'primary' | 'warn'
@@ -155,7 +158,8 @@ const Button = forwardRef<View, ButtonProps>((props, ref): React.JSX.Element =>
     'hover-stay-time': hoverStayTime = 70,
     style = {},
     children,
-    bindTap = () => {},
+    bindtap = () => {},
+    catchtap = () => {},
   } = props
 
   const refs = useRef<{
@@ -233,24 +237,34 @@ const Button = forwardRef<View, ButtonProps>((props, ref): React.JSX.Element =>
     stopHover()
   }
 
-  const onPress = () => {
-    !disabled && bindTap()
+  const onPress = (evt: GestureResponderEvent) => {
+    !disabled && bindtap(getCustomEvent('tap', evt, {}, props))
+  }
+
+  const catchPress = (evt: GestureResponderEvent) => {
+    !disabled && catchtap(getCustomEvent('tap', evt, {}, props))
   }
 
   useEffect(() => {
     isHover && refs.current.isPressEnd && stopHover()
   }, [isHover, stopHover])
 
+  const innerTouchable = useInnerTouchable({
+    ...props,
+    bindtap: () => {},
+    catchtap: catchPress,
+  })
+
   return (
     <TouchableWithoutFeedback
       testID="button"
       accessibilityRole="button"
       onPress={onPress}
-      onLongPress={onPress}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       disabled={disabled}>
       <View
+        {...innerTouchable}
         ref={ref}
         style={[
           styles.button,

packages/webpack-plugin/lib/runtime/components/react/mpx-image/index.tsx

@@ -24,10 +24,10 @@ import {
   ImageErrorEventData,
   LayoutChangeEvent,
   DimensionValue,
+  ImageLoadEventData,
 } from 'react-native'
-import type { Event } from '../types'
 import { omit } from '../utils'
-import useInnerTouchable from '../getInnerListeners'
+import useInnerTouchable, { getCustomEvent } from '../getInnerListeners'
 
 export type Mode =
   | 'scaleToFill'
@@ -45,26 +45,15 @@ export type Mode =
   | 'bottom left'
   | 'bottom right'
 
-type ImageErrorEvent = NativeSyntheticEvent<ImageErrorEventData>
-
-type LoadEventData = {
-  width: number
-  height: number
-}
-
-type LoadErrorData = {
-  errMsg: string
-}
-
 export type SvgNumberProp = string | number | undefined
 
 export interface ImageProps {
   src?: string
   mode?: Mode
   svg?: boolean
   style?: StyleProp<ImageStyle>
-  bindLoad?: (evt: Event<LoadEventData>) => void
-  bindError?: (evt: Event<LoadErrorData>) => void
+  bindload?: (evt: NativeSyntheticEvent<ImageLoadEventData> | unknown) => void
+  binderror?: (evt: NativeSyntheticEvent<ImageErrorEventData> | unknown) => void
 }
 
 const DEFAULT_IMAGE_WIDTH = 240
@@ -120,8 +109,8 @@ const Image = forwardRef<RNImage, ImageProps>((props, ref): React.JSX.Element =>
     mode = 'scaleToFill',
     svg = false,
     style,
-    bindLoad,
-    bindError,
+    bindload,
+    binderror,
     ...restProps
   } = omit(props, ['source', 'resizeeMode'])
   const innerTouchable = useInnerTouchable(restProps)
@@ -186,27 +175,49 @@ const Image = forwardRef<RNImage, ImageProps>((props, ref): React.JSX.Element =>
     setViewHeight(height)
   }
 
-  const onImageLoad = useCallback(() => {
-    if (!bindLoad) return
+  const onImageLoad = (evt: NativeSyntheticEvent<ImageLoadEventData>) => {
+    if (!bindload) return
     if (typeof src === 'string') {
       RNImage.getSize(src, (width: number, height: number) => {
-        bindLoad({ detail: { width, height } })
+        bindload(
+          getCustomEvent(
+            'load',
+            evt,
+            {
+              detail: { width, height },
+            },
+            props
+          )
+        )
       })
     } else {
       const { width = 0, height = 0 } = RNImage.resolveAssetSource(src) || {}
-      bindLoad({ detail: { width, height } })
+      bindload(
+        getCustomEvent(
+          'load',
+          evt,
+          {
+            detail: { width, height },
+          },
+          props
+        )
+      )
     }
-  }, [bindLoad, src])
+  }
 
-  const onImageError = useCallback(
-    ({ nativeEvent }: ImageErrorEvent) => {
-      if (!bindError) return
-      bindError({
-        detail: { errMsg: nativeEvent.error },
-      })
-    },
-    [bindError]
-  )
+  const onImageError = (evt: NativeSyntheticEvent<ImageErrorEventData>) => {
+    binderror &&
+      binderror(
+        getCustomEvent(
+          'error',
+          evt,
+          {
+            detail: { errMsg: evt.nativeEvent.error },
+          },
+          props
+        )
+      )
+  }
 
   const loadImage = useCallback((): void => {
     if (!isWidthFixMode && !isHeightFixMode && !isCropMode) return