@mpxjs/webpack-plugin 2.9.69 → 2.9.70

package/lib/runtime/components/react/getInnerListeners.ts

@@ -1,6 +1,6 @@
-import { useRef } from 'react'
-import { collectDataset } from '@mpxjs/utils'
-import { omit } from './utils'
+import { useRef, useMemo, RefObject } from 'react'
+import { hasOwn, collectDataset } from '@mpxjs/utils'
+import { omit, extendObject } from './utils'
 import eventConfigMap from './event.config'
 import {
   Props,
@@ -20,31 +20,38 @@ const getTouchEvent = (
   config: UseInnerPropsConfig
 ) => {
   const nativeEvent = event.nativeEvent
-  const {
-    timestamp,
-    pageX,
-    pageY,
-    touches,
-    changedTouches
-  } = nativeEvent
+  const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent
   const { id } = props
   const { layoutRef } = config
-  return {
-    ...event,
+
+  const currentTarget = extendObject({}, event.currentTarget, {
+    id: id || '',
+    dataset: collectDataset(props),
+    offsetLeft: layoutRef?.current?.offsetLeft || 0,
+    offsetTop: layoutRef?.current?.offsetTop || 0
+  })
+
+  const pendingProps = (event as any)._targetInst?.pendingProps || {}
+
+  const target = extendObject(
+    {},
+    event.target,
+    {
+      id: pendingProps.parentId || pendingProps.nativeID || '',
+      dataset: collectDataset(pendingProps)
+    }
+  )
+
+  return extendObject({}, event, {
     type,
     timeStamp: timestamp,
-    currentTarget: {
-      ...(event.currentTarget || {}),
-      id: id || '',
-      dataset: collectDataset(props),
-      offsetLeft: layoutRef?.current?.offsetLeft || 0,
-      offsetTop: layoutRef?.current?.offsetTop || 0
-    },
+    currentTarget,
+    target,
     detail: {
       x: pageX,
       y: pageY
     },
-    touches: touches.map(item => {
+    touches: touches.map((item) => {
       return {
         identifier: item.identifier,
         pageX: item.pageX,
@@ -53,7 +60,7 @@ const getTouchEvent = (
         clientY: item.locationY
       }
     }),
-    changedTouches: changedTouches.map(item => {
+    changedTouches: changedTouches.map((item) => {
       return {
         identifier: item.identifier,
         pageX: item.pageX,
@@ -65,32 +72,196 @@ const getTouchEvent = (
     persist: event.persist,
     stopPropagation: event.stopPropagation,
     preventDefault: event.preventDefault
-  }
+  })
 }
 
 export const getCustomEvent = (
   type = '',
   oe: any = {},
-  { detail = {}, layoutRef }: { detail?: Record<string, unknown>; layoutRef: LayoutRef },
+  {
+    detail = {},
+    layoutRef
+  }: { detail?: Record<string, unknown>; layoutRef?: LayoutRef },
   props: Props = {}
 ) => {
-  return {
-    ...oe,
+  const targetInfo = extendObject({}, oe.target, {
+    id: props.id || '',
+    dataset: collectDataset(props),
+    offsetLeft: layoutRef?.current?.offsetLeft || 0,
+    offsetTop: layoutRef?.current?.offsetTop || 0
+  })
+  return extendObject({}, oe, {
     type,
     detail,
-    target: {
-      ...(oe.target || {}),
-      id: props.id || '',
-      dataset: collectDataset(props),
-      offsetLeft: layoutRef?.current?.offsetLeft || 0,
-      offsetTop: layoutRef?.current?.offsetTop || 0
-    },
+    target: targetInfo,
     persist: oe.persist,
     stopPropagation: oe.stopPropagation,
     preventDefault: oe.preventDefault
+  })
+}
+
+function handleEmitEvent (
+  events: string[],
+  type: string,
+  oe: NativeTouchEvent,
+  propsRef: Record<string, any>,
+  config: UseInnerPropsConfig
+) {
+  events.forEach((event) => {
+    if (propsRef.current[event]) {
+      const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event)
+      if (match) {
+        oe.stopPropagation()
+      }
+      propsRef.current[event](
+        getTouchEvent(type, oe, propsRef.current, config)
+      )
+    }
+  })
+}
+
+function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>) {
+  const tapDetailInfo = ref.current!.mpxPressInfo.detail || { x: 0, y: 0 }
+  const nativeEvent = e.nativeEvent
+  const currentPageX = nativeEvent.changedTouches[0].pageX
+  const currentPageY = nativeEvent.changedTouches[0].pageY
+  if (
+    Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
+        Math.abs(currentPageY - tapDetailInfo.y) > 3
+  ) {
+    ref.current!.needPress[type] = false
+    ref.current!.startTimer[type] &&
+          clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
+    ref.current!.startTimer[type] = null
+  }
+}
+
+function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig) {
+  e.persist()
+  const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart']
+  const bubblePressEvent = ['catchlongpress', 'bindlongpress']
+  const captureTouchEvent = [
+    'capture-catchtouchstart',
+    'capture-bindtouchstart'
+  ]
+  const capturePressEvent = [
+    'capture-catchlongpress',
+    'capture-bindlongpress'
+  ]
+  ref.current!.startTimer[type] = null
+  ref.current!.needPress[type] = true
+  const nativeEvent = e.nativeEvent
+  ref.current!.mpxPressInfo.detail = {
+    x: nativeEvent.changedTouches[0].pageX,
+    y: nativeEvent.changedTouches[0].pageY
+  }
+  const currentTouchEvent =
+        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+  const currentPressEvent =
+        type === 'bubble' ? bubblePressEvent : capturePressEvent
+  handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config)
+  const {
+    catchlongpress,
+    bindlongpress,
+    'capture-catchlongpress': captureCatchlongpress,
+    'capture-bindlongpress': captureBindlongpress
+  } = propsRef.current
+  if (
+    catchlongpress ||
+        bindlongpress ||
+        captureCatchlongpress ||
+        captureBindlongpress
+  ) {
+    ref.current!.startTimer[type] = setTimeout(() => {
+      ref.current!.needPress[type] = false
+      handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config)
+    }, 350)
+  }
+}
+
+function handleTouchmove (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig) {
+  const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove']
+  const captureTouchEvent = [
+    'capture-catchtouchmove',
+    'capture-bindtouchmove'
+  ]
+  const currentTouchEvent =
+        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+  handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config)
+  checkIsNeedPress(e, type, ref)
+}
+
+function handleTouchend (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig) {
+  // move event may not be triggered
+  checkIsNeedPress(e, type, ref)
+  const bubbleTouchEvent = ['catchtouchend', 'bindtouchend']
+  const bubbleTapEvent = ['catchtap', 'bindtap']
+  const captureTouchEvent = [
+    'capture-catchtouchend',
+    'capture-bindtouchend'
+  ]
+  const captureTapEvent = ['capture-catchtap', 'capture-bindtap']
+  const currentTouchEvent =
+        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+  const currentTapEvent =
+        type === 'bubble' ? bubbleTapEvent : captureTapEvent
+  ref.current!.startTimer[type] &&
+        clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
+  ref.current!.startTimer[type] = null
+  handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config)
+  if (ref.current!.needPress[type]) {
+    if (type === 'bubble' && config.disableTap) {
+      return
+    }
+    handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config)
+  }
+}
+
+function handleTouchcancel (
+  e: NativeTouchEvent,
+  type: 'bubble' | 'capture',
+  ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig
+) {
+  const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel']
+  const captureTouchEvent = [
+    'capture-catchtouchcancel',
+    'capture-bindtouchcancel'
+  ]
+  const currentTouchEvent =
+        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+  ref.current!.startTimer[type] &&
+        clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
+  ref.current!.startTimer[type] = null
+  handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config)
+}
+
+function createTouchEventHandler (eventName: 'onTouchStart'|'onTouchMove'|'onTouchEnd'|'onTouchCancel', type: 'bubble' | 'capture') {
+  return (e: NativeTouchEvent, ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig) => {
+    const handlerMap = {
+      onTouchStart: handleTouchstart,
+      onTouchMove: handleTouchmove,
+      onTouchEnd: handleTouchend,
+      onTouchCancel: handleTouchcancel
+    }
+
+    const handler = handlerMap[eventName]
+    if (handler) {
+      handler(e, type, ref, propsRef, config)
+    }
   }
 }
 
+const touchEventList = [
+  { eventName: 'onTouchStart', handler: createTouchEventHandler('onTouchStart', 'bubble') },
+  { eventName: 'onTouchMove', handler: createTouchEventHandler('onTouchMove', 'bubble') },
+  { eventName: 'onTouchEnd', handler: createTouchEventHandler('onTouchEnd', 'bubble') },
+  { eventName: 'onTouchCancel', handler: createTouchEventHandler('onTouchCancel', 'bubble') },
+  { eventName: 'onTouchStartCapture', handler: createTouchEventHandler('onTouchStart', 'capture') },
+  { eventName: 'onTouchMoveCapture', handler: createTouchEventHandler('onTouchMove', 'capture') },
+  { eventName: 'onTouchEndCapture', handler: createTouchEventHandler('onTouchEnd', 'capture') },
+  { eventName: 'onTouchCancelCapture', handler: createTouchEventHandler('onTouchCancel', 'capture') }
+]
+
 const useInnerProps = (
   props: Props = {},
   additionalProps: AdditionalProps = {},
@@ -116,7 +287,10 @@ const useInnerProps = (
 
   const propsRef = useRef<Record<string, any>>({})
   const eventConfig: { [key: string]: string[] } = {}
-  const config = rawConfig || { layoutRef: { current: {} }, disableTouch: false, disableTap: false }
+  const config = rawConfig || {
+    layoutRef: { current: {} },
+    disableTap: false
+  }
   const removeProps = [
     'children',
     'enable-background',
@@ -129,170 +303,46 @@ const useInnerProps = (
     ...userRemoveProps
   ]
 
-  propsRef.current = { ...props, ...additionalProps }
-
-  for (const key in eventConfigMap) {
-    if (propsRef.current[key]) {
-      eventConfig[key] = eventConfigMap[key]
-    }
-  }
-
-  if (!(Object.keys(eventConfig).length) || config.disableTouch) {
-    return omit(propsRef.current, removeProps)
-  }
+  propsRef.current = extendObject({}, props, additionalProps)
 
-  function handleEmitEvent (
-    events: string[],
-    type: string,
-    oe: NativeTouchEvent
-  ) {
-    events.forEach(event => {
-      if (propsRef.current[event]) {
-        const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event)
-        if (match) {
-          oe.stopPropagation()
-        }
-        propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config))
-      }
-    })
-  }
+  let hashEventKey = ''
+  const rawEventKeys: Array<string> = []
 
-  function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 }
-    const nativeEvent = e.nativeEvent
-    const currentPageX = nativeEvent.changedTouches[0].pageX
-    const currentPageY = nativeEvent.changedTouches[0].pageY
-    if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
-      ref.current.needPress[type] = false
-      ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
-      ref.current.startTimer[type] = null
+  for (const key in eventConfigMap) {
+    if (hasOwn(propsRef.current, key)) {
+      eventConfig[key] = eventConfigMap[key].events
+      hashEventKey = hashEventKey + eventConfigMap[key].bitFlag
+      rawEventKeys.push(key)
     }
   }
 
-  function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    e.persist()
-    const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart']
-    const bubblePressEvent = ['catchlongpress', 'bindlongpress']
-    const captureTouchEvent = ['capture-catchtouchstart', 'capture-bindtouchstart']
-    const capturePressEvent = ['capture-catchlongpress', 'capture-bindlongpress']
-    ref.current.startTimer[type] = null
-    ref.current.needPress[type] = true
-    const nativeEvent = e.nativeEvent
-    ref.current.mpxPressInfo.detail = {
-      x: nativeEvent.changedTouches[0].pageX,
-      y: nativeEvent.changedTouches[0].pageY
+  const events = useMemo(() => {
+    if (!rawEventKeys.length) {
+      return {}
     }
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent
-    handleEmitEvent(currentTouchEvent, 'touchstart', e)
-    const { catchlongpress, bindlongpress, 'capture-catchlongpress': captureCatchlongpress, 'capture-bindlongpress': captureBindlongpress } = propsRef.current
-    if (catchlongpress || bindlongpress || captureCatchlongpress || captureBindlongpress) {
-      ref.current.startTimer[type] = setTimeout(() => {
-        ref.current.needPress[type] = false
-        handleEmitEvent(currentPressEvent, 'longpress', e)
-      }, 350)
-    }
-  }
-
-  function handleTouchmove (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove']
-    const captureTouchEvent = ['capture-catchtouchmove', 'capture-bindtouchmove']
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    handleEmitEvent(currentTouchEvent, 'touchmove', e)
-    checkIsNeedPress(e, type)
-  }
-
-  function handleTouchend (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    // move event may not be triggered
-    checkIsNeedPress(e, type)
-    const bubbleTouchEvent = ['catchtouchend', 'bindtouchend']
-    const bubbleTapEvent = ['catchtap', 'bindtap']
-    const captureTouchEvent = ['capture-catchtouchend', 'capture-bindtouchend']
-    const captureTapEvent = ['capture-catchtap', 'capture-bindtap']
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    const currentTapEvent = type === 'bubble' ? bubbleTapEvent : captureTapEvent
-    ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
-    ref.current.startTimer[type] = null
-    handleEmitEvent(currentTouchEvent, 'touchend', e)
-    if (ref.current.needPress[type]) {
-      if (type === 'bubble' && config.disableTap) {
-        return
+    const transformedEventKeys = rawEventKeys.reduce((acc: string[], key) => {
+      if (propsRef.current[key]) {
+        return acc.concat(eventConfig[key])
       }
-      handleEmitEvent(currentTapEvent, 'tap', e)
-    }
-  }
-
-  function handleTouchcancel (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel']
-    const captureTouchEvent = ['capture-catchtouchcancel', 'capture-bindtouchcancel']
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
-    ref.current.startTimer[type] = null
-    handleEmitEvent(currentTouchEvent, 'touchcancel', e)
-  }
-
-  const touchEventList = [{
-    eventName: 'onTouchStart',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchstart(e, 'bubble')
-    }
-  }, {
-    eventName: 'onTouchMove',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchmove(e, 'bubble')
-    }
-  }, {
-    eventName: 'onTouchEnd',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchend(e, 'bubble')
-    }
-  }, {
-    eventName: 'onTouchCancel',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchcancel(e, 'bubble')
-    }
-  }, {
-    eventName: 'onTouchStartCapture',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchstart(e, 'capture')
-    }
-  }, {
-    eventName: 'onTouchMoveCapture',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchmove(e, 'capture')
-    }
-  }, {
-    eventName: 'onTouchEndCapture',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchend(e, 'capture')
-    }
-  }, {
-    eventName: 'onTouchCancelCapture',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchcancel(e, 'capture')
-    }
-  }]
-
-  const events: Record<string, (e: NativeTouchEvent) => void> = {}
-
-  const transformedEventKeys: string[] = []
-  for (const key in eventConfig) {
-    transformedEventKeys.push(...eventConfig[key])
-  }
-
-  const finalEventKeys = [...new Set(transformedEventKeys)]
+      return acc
+    }, [])
+    const finalEventKeys = [...new Set(transformedEventKeys)]
+    const events: Record<string, (e: NativeTouchEvent) => void> = {}
 
-  touchEventList.forEach(item => {
-    if (finalEventKeys.includes(item.eventName)) {
-      events[item.eventName] = item.handler
-    }
-  })
+    touchEventList.forEach((item) => {
+      if (finalEventKeys.includes(item.eventName)) {
+        events[item.eventName] = (e: NativeTouchEvent) =>
+          item.handler(e, ref, propsRef, config)
+      }
+    })
 
-  const rawEventKeys = Object.keys(eventConfig)
+    return events
+  }, [hashEventKey])
 
-  return {
-    ...events,
-    ...omit(propsRef.current, [...rawEventKeys, ...removeProps])
-  }
+  return extendObject(
+    {},
+    events,
+    omit(propsRef.current, [...rawEventKeys, ...removeProps])
+  )
 }
 export default useInnerProps

package/lib/runtime/components/react/mpx-button.tsx

@@ -34,7 +34,7 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import { useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'
+import { createElement, useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'
 import {
   View,
   StyleSheet,
@@ -45,7 +45,7 @@ import {
   NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
@@ -181,11 +181,14 @@ const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
     }
   }, [])
 
-  const loadingStyle = {
-    ...styles.loading,
-    transform: [{ rotate }],
-    marginRight: alone ? 0 : 5
-  }
+  const loadingStyle = extendObject(
+    {},
+    styles.loading,
+    {
+      transform: [{ rotate }],
+      marginRight: alone ? 0 : 5
+    }
+  )
 
   return <Animated.Image testID="loading" style={loadingStyle} source={{ uri: LOADING_IMAGE_URI }} />
 }
@@ -274,28 +277,28 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     backgroundColor: plain ? 'transparent' : normalBackgroundColor
   }
 
-  const defaultViewStyle = {
-    ...styles.button,
-    ...(isMiniSize && styles.buttonMini),
-    ...viewStyle
-  }
+  const defaultViewStyle = extendObject(
+    {},
+    styles.button,
+    isMiniSize ? styles.buttonMini : null,
+    viewStyle
+  )
 
-  const defaultTextStyle = {
-    ...styles.text,
-    ...(isMiniSize && styles.textMini),
-    color: plain ? plainTextColor : normalTextColor
-  }
+  const defaultTextStyle = extendObject(
+    {},
+    styles.text,
+    isMiniSize ? styles.textMini : {},
+    { color: plain ? plainTextColor : normalTextColor }
+  )
 
-  const defaultStyle = {
-    ...defaultViewStyle,
-    ...defaultTextStyle
-  }
+  const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle)
 
-  const styleObj = {
-    ...defaultStyle,
-    ...style,
-    ...(applyHoverEffect && hoverStyle)
-  }
+  const styleObj = extendObject(
+    {},
+    defaultStyle,
+    style,
+    applyHoverEffect ? hoverStyle : {}
+  )
 
   const {
     hasSelfPercent,
@@ -308,11 +311,11 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const nodeRef = useRef(null)
 
-  useNodesRef(props, ref, nodeRef, { defaultStyle })
+  useNodesRef(props, ref, nodeRef, { style: normalStyle })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
-  const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+  const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   if (backgroundStyle) {
     warn('Button does not support background image-related styles!')
@@ -408,36 +411,47 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const innerProps = useInnerProps(
     props,
-    {
-      ref: nodeRef,
-      style: { ...innerStyle, ...layoutStyle },
-      ...layoutProps,
-      bindtouchstart: onTouchStart,
-      bindtouchend: onTouchEnd,
-      bindtap: onTap
-    },
-    [],
+    extendObject(
+      {
+        ref: nodeRef,
+        style: extendObject({}, innerStyle, layoutStyle)
+      },
+      layoutProps,
+      {
+        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
+        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
+        bindtap: !disabled && onTap
+      }
+    ),
+    [
+      'disabled',
+      'size',
+      'type',
+      'plain',
+      'loading',
+      'hover-class',
+      'hover-style',
+      'hover-start-time',
+      'hover-stay-time',
+      'open-type',
+      'form-type'
+    ],
     {
       layoutRef,
       disableTap: disabled
     }
   )
 
-  return (
-    <View {...innerProps}>
-      {loading && <Loading alone={!children} />}
+  return createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
+    wrapChildren(
+      props,
       {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-          }
-        )
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
       }
-    </View>
+    )
   )
 })
 

package/lib/runtime/components/react/mpx-canvas/html.ts

@@ -316,8 +316,7 @@ var handleError = function (err, message) {
   document.removeEventListener('message', handleIncomingMessage);
 };
 
-function handleIncomingMessage(e) {
-  var data = JSON.parse(e.data);
+function handleIncomingMessage(data) {
   if (Array.isArray(data)) {
     for (var i = 0; i < data.length; i++) {
       try {
@@ -335,8 +334,7 @@ function handleIncomingMessage(e) {
   }
 }
 
-window.addEventListener('message', handleIncomingMessage);
-document.addEventListener('message', handleIncomingMessage);
+window.mpxWebviewMessageCallback = handleIncomingMessage
 </script>