@mpxjs/webpack-plugin 2.10.4 → 2.10.5-beta.1

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

@@ -1,17 +1,16 @@
-import { useRef, useMemo, RefObject } from 'react'
-import { hasOwn, collectDataset } from '@mpxjs/utils'
+import { useRef, useMemo } from 'react'
+import { collectDataset } from '@mpxjs/utils'
 import { omit, extendObject, useNavigation } from './utils'
-import eventConfigMap, { TAP_EVENTS, LONGPRESS_EVENTS } from './event.config'
+import eventConfigMap from './event.config'
 import {
   Props,
-  AdditionalProps,
+  EventConfig,
+  RawConfig,
+  EventType,
   RemoveProps,
-  UseInnerPropsConfig,
   InnerRef,
-  SetTimeoutReturnType,
   LayoutRef,
-  ExtendedNativeTouchEvent,
-  Navigation
+  ExtendedNativeTouchEvent
 } from './types/getInnerListeners'
 
 const globalEventState = {
@@ -21,21 +20,20 @@ const globalEventState = {
 const getTouchEvent = (
   type: string,
   event: ExtendedNativeTouchEvent,
-  props: Props,
-  config: UseInnerPropsConfig,
-  navigation: Navigation
+  config: EventConfig
 ) => {
+  const { navigation, propsRef, layoutRef } = config
+  const props = propsRef.current
   const { y: navigationY = 0 } = navigation?.layout || {}
   const nativeEvent = event.nativeEvent
   const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent
   const { id } = props
-  const { layoutRef } = config
 
   const currentTarget = extendObject({}, event.currentTarget, {
     id: id || '',
     dataset: collectDataset(props),
-    offsetLeft: layoutRef?.current?.offsetLeft || 0,
-    offsetTop: layoutRef?.current?.offsetTop || 0
+    offsetLeft: layoutRef.current?.offsetLeft || 0,
+    offsetTop: layoutRef.current?.offsetTop || 0
   })
 
   const pendingProps = (event as any)._targetInst?.pendingProps || {}
@@ -108,186 +106,129 @@ export const getCustomEvent = (
 }
 
 function handleEmitEvent (
-  events: string[],
-  type: string,
-  oe: ExtendedNativeTouchEvent,
-  propsRef: Record<string, any>,
-  config: UseInnerPropsConfig,
-  navigation: Navigation
+  name: string,
+  e: ExtendedNativeTouchEvent,
+  type: EventType,
+  eventConfig: EventConfig
 ) {
-  events.forEach((event) => {
-    if (propsRef.current[event]) {
-      const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event)
-      // 检查是否已经被上层的 catch 阻止
-      if ((type === 'tap' || type === 'longpress') && oe._stoppedEventTypes?.has(type)) {
-        return
-      }
-      if (match) {
-        const eventBase = match[2] || ''
-        if (eventBase === 'tap' || eventBase === 'longpress') {
-          // 为 tap、longpress 添加标记，影响后续的冒泡
-          if (!oe._stoppedEventTypes) {
-            oe._stoppedEventTypes = new Set()
-          }
-          oe._stoppedEventTypes.add(eventBase)
-        } else {
-          // 原生 touch 事件使用 stopPropagation
-          oe.stopPropagation()
-        }
-      }
-      propsRef.current[event](
-        getTouchEvent(type, oe, propsRef.current, config, navigation)
-      )
+  const { propsRef } = eventConfig
+  const eventCfg = eventConfig[name]
+  if (eventCfg) {
+    if (eventCfg.hasCatch && name !== 'tap' && name !== 'longpress') {
+      e.stopPropagation()
     }
-  })
+    eventCfg[type].forEach((event) => {
+      propsRef.current[event]?.(getTouchEvent(name, e, eventConfig))
+    })
+  }
 }
 
-function checkIsNeedPress (e: ExtendedNativeTouchEvent, 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
+function checkIsNeedPress (e: ExtendedNativeTouchEvent, type: 'bubble' | 'capture', ref: InnerRef) {
+  const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 }
+  const currentPageX = e.nativeEvent.changedTouches[0].pageX
+  const currentPageY = e.nativeEvent.changedTouches[0].pageY
   if (
     Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
-        Math.abs(currentPageY - tapDetailInfo.y) > 3
+    Math.abs(currentPageY - tapDetailInfo.y) > 3
   ) {
     globalEventState.needPress = false
-    ref.current!.startTimer[type] &&
-          clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
-    ref.current!.startTimer[type] = null
+    ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as unknown as number)
+    ref.current.startTimer[type] = null
   }
 }
 
-function handleTouchstart (e: ExtendedNativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
+function handleTouchstart (e: ExtendedNativeTouchEvent, type: EventType, eventConfig: EventConfig) {
+  // 阻止事件被释放放回对象池，导致对象复用 _stoppedEventTypes 状态被保留
   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
+  const { innerRef } = eventConfig
   globalEventState.needPress = true
-  const nativeEvent = e.nativeEvent
-  ref.current!.mpxPressInfo.detail = {
-    x: nativeEvent.changedTouches[0].pageX,
-    y: nativeEvent.changedTouches[0].pageY
+  innerRef.current.mpxPressInfo.detail = {
+    x: e.nativeEvent.changedTouches[0].pageX,
+    y: e.nativeEvent.changedTouches[0].pageY
   }
-  const currentTouchEvent =
-        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-  const currentPressEvent =
-        type === 'bubble' ? bubblePressEvent : capturePressEvent
-  handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config, navigation)
-  if (LONGPRESS_EVENTS.some(eventName => propsRef.current[eventName])) {
-    ref.current!.startTimer[type] = setTimeout(() => {
+
+  handleEmitEvent('touchstart', e, type, eventConfig)
+
+  if (eventConfig.longpress) {
+    if (e._stoppedEventTypes?.has('longpress')) {
+      return
+    }
+    if (eventConfig.longpress.hasCatch) {
+      e._stoppedEventTypes = e._stoppedEventTypes || new Set()
+      e._stoppedEventTypes.add('longpress')
+    }
+    innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
+    innerRef.current.startTimer[type] = setTimeout(() => {
       // 只要触发过longpress, 全局就不再触发tap
       globalEventState.needPress = false
-      handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config, navigation)
+      handleEmitEvent('longpress', e, type, eventConfig)
     }, 350)
   }
 }
 
-function handleTouchmove (e: ExtendedNativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
-  const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove']
-  const captureTouchEvent = [
-    'capture-catchtouchmove',
-    'capture-bindtouchmove'
-  ]
-  const currentTouchEvent =
-        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-  handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config, navigation)
-  if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
-    checkIsNeedPress(e, type, ref)
+function handleTouchmove (e: ExtendedNativeTouchEvent, type: EventType, eventConfig: EventConfig) {
+  const { innerRef } = eventConfig
+  handleEmitEvent('touchmove', e, type, eventConfig)
+  if (eventConfig.tap) {
+    checkIsNeedPress(e, type, innerRef)
   }
 }
 
-function handleTouchend (e: ExtendedNativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
-  // move event may not be triggered
-  if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
-    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, navigation)
-  if (globalEventState.needPress) {
-    if (type === 'bubble' && config.disableTap) {
+function handleTouchend (e: ExtendedNativeTouchEvent, type: EventType, eventConfig: EventConfig) {
+  const { innerRef, disableTap } = eventConfig
+  handleEmitEvent('touchend', e, type, eventConfig)
+  innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
+  if (eventConfig.tap) {
+    checkIsNeedPress(e, type, innerRef)
+    if (!globalEventState.needPress || (type === 'bubble' && disableTap) || e._stoppedEventTypes?.has('tap')) {
       return
     }
-    handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config, navigation)
+    if (eventConfig.tap.hasCatch) {
+      e._stoppedEventTypes = e._stoppedEventTypes || new Set()
+      e._stoppedEventTypes.add('tap')
+    }
+    handleEmitEvent('tap', e, type, eventConfig)
   }
 }
 
-function handleTouchcancel (
-  e: ExtendedNativeTouchEvent,
-  type: 'bubble' | 'capture',
-  ref: RefObject<InnerRef>,
-  propsRef: Record<string, any>,
-  config: UseInnerPropsConfig,
-  navigation: Navigation
-) {
-  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, navigation)
+function handleTouchcancel (e: ExtendedNativeTouchEvent, type: EventType, eventConfig: EventConfig) {
+  const { innerRef } = eventConfig
+  handleEmitEvent('touchcancel', e, type, eventConfig)
+  innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
 }
 
-function createTouchEventHandler (eventName: 'onTouchStart'|'onTouchMove'|'onTouchEnd'|'onTouchCancel', type: 'bubble' | 'capture') {
-  return (e: ExtendedNativeTouchEvent, ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) => {
-    const handlerMap = {
+function createTouchEventHandler (eventName: string, eventConfig: EventConfig) {
+  return (e: ExtendedNativeTouchEvent) => {
+    const bubbleHandlerMap: Record<string, any> = {
       onTouchStart: handleTouchstart,
       onTouchMove: handleTouchmove,
       onTouchEnd: handleTouchend,
       onTouchCancel: handleTouchcancel
     }
 
-    const handler = handlerMap[eventName]
-    if (handler) {
-      handler(e, type, ref, propsRef, config, navigation)
+    const captureHandlerMap: Record<string, any> = {
+      onTouchStartCapture: handleTouchstart,
+      onTouchMoveCapture: handleTouchmove,
+      onTouchEndCapture: handleTouchend,
+      onTouchCancelCapture: handleTouchcancel
+    }
+
+    if (bubbleHandlerMap[eventName]) {
+      bubbleHandlerMap[eventName](e, 'bubble', eventConfig)
+    }
+
+    if (captureHandlerMap[eventName]) {
+      captureHandlerMap[eventName](e, 'capture', eventConfig)
     }
   }
 }
 
-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 = {},
   userRemoveProps: RemoveProps = [],
-  rawConfig?: UseInnerPropsConfig
+  rawConfig?: RawConfig
 ) => {
-  const ref = useRef<InnerRef>({
+  const innerRef: InnerRef = useRef({
     startTimer: {
       bubble: null,
       capture: null
@@ -299,67 +240,80 @@ const useInnerProps = (
       }
     }
   })
-
-  const propsRef = useRef<Record<string, any>>({})
-  const eventConfig: { [key: string]: string[] } = {}
-  const config = rawConfig || {
-    layoutRef: { current: {} },
-    disableTap: false
-  }
+  const propsRef = useRef({})
+  propsRef.current = props
   const navigation = useNavigation()
-
-  const removeProps = [
-    'children',
-    'enable-background',
-    'enable-offset',
-    'enable-var',
-    'external-var-context',
-    'parent-font-size',
-    'parent-width',
-    'parent-height',
-    ...userRemoveProps
-  ]
-
-  propsRef.current = extendObject({}, props, additionalProps)
+  const eventConfig: EventConfig = extendObject({
+    layoutRef: {
+      current: null
+    },
+    propsRef,
+    innerRef,
+    disableTap: false,
+    navigation
+  }, rawConfig)
 
   let hashEventKey = ''
   const rawEventKeys: Array<string> = []
-
-  for (const key in eventConfigMap) {
-    if (hasOwn(propsRef.current, key)) {
-      eventConfig[key] = eventConfigMap[key].events
-      hashEventKey = hashEventKey + eventConfigMap[key].bitFlag
+  const transformedEventSet = new Set<string>()
+  Object.keys(props).forEach((key) => {
+    if (eventConfigMap[key]) {
+      hashEventKey += eventConfigMap[key].bitFlag
       rawEventKeys.push(key)
+      eventConfigMap[key].events.forEach((event) => {
+        transformedEventSet.add(event)
+      })
+      const match = /^(bind|catch|capture-bind|capture-catch)(.*)$/.exec(key)!
+      const prefix = match[1]
+      const eventName = match[2]
+      eventConfig[eventName] = eventConfig[eventName] || {
+        bubble: [],
+        capture: [],
+        hasCatch: false
+      }
+      if (prefix === 'bind' || prefix === 'catch') {
+        eventConfig[eventName].bubble.push(key)
+      } else {
+        eventConfig[eventName].capture.push(key)
+      }
+
+      if (prefix === 'catch' || prefix === 'capture-catch') {
+        eventConfig[eventName].hasCatch = true
+      }
     }
-  }
+  })
 
   const events = useMemo(() => {
-    if (!rawEventKeys.length) {
+    if (!hashEventKey) {
       return {}
     }
-    const transformedEventKeys = rawEventKeys.reduce((acc: string[], key) => {
-      if (propsRef.current[key]) {
-        return acc.concat(eventConfig[key])
-      }
-      return acc
-    }, [])
-    const finalEventKeys = [...new Set(transformedEventKeys)]
+
     const events: Record<string, (e: ExtendedNativeTouchEvent) => void> = {}
 
-    touchEventList.forEach((item) => {
-      if (finalEventKeys.includes(item.eventName)) {
-        events[item.eventName] = (e: ExtendedNativeTouchEvent) =>
-          item.handler(e, ref, propsRef, config, navigation)
-      }
-    })
+    for (const eventName of transformedEventSet) {
+      events[eventName] = createTouchEventHandler(eventName, eventConfig)
+    }
 
     return events
   }, [hashEventKey])
 
+  const removeProps = [
+    'children',
+    'enable-background',
+    'enable-offset',
+    'enable-var',
+    'external-var-context',
+    'parent-font-size',
+    'parent-width',
+    'parent-height',
+    ...userRemoveProps,
+    ...rawEventKeys
+  ]
+
   return extendObject(
     {},
     events,
-    omit(propsRef.current, [...rawEventKeys, ...removeProps])
+    omit(props, removeProps)
   )
 }
 export default useInnerProps

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

@@ -42,7 +42,8 @@ import {
   TextStyle,
   Animated,
   Easing,
-  NativeSyntheticEvent
+  NativeSyntheticEvent,
+  useAnimatedValue
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
@@ -51,6 +52,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
 import type { ExtendedViewStyle } from './types/common'
+import Portal from './mpx-portal'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -156,7 +158,7 @@ const timer = (data: any, time = 3000) => new Promise((resolve) => {
 })
 
 const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
-  const image = useRef(new Animated.Value(0)).current
+  const image = useAnimatedValue(0)
 
   const rotate = image.interpolate({
     inputRange: [0, 1],
@@ -290,6 +292,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   )
 
   const {
+    hasPositionFixed,
     hasSelfPercent,
     normalStyle,
     hasVarDec,
@@ -371,14 +374,13 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   }
 
   const innerProps = useInnerProps(
-    props,
     extendObject(
-      {
-        ref: nodeRef,
-        style: extendObject({}, innerStyle, layoutStyle)
-      },
+      {},
+      props,
       layoutProps,
       {
+        ref: nodeRef,
+        style: extendObject({}, innerStyle, layoutStyle),
         bindtap: !disabled && onTap
       }
     ),
@@ -413,9 +415,15 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     )
   )
 
-  return enableHover
+  const finalComponent = enableHover
     ? createElement(GestureDetector, { gesture: gesture as PanGesture }, baseButton)
     : baseButton
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 Button.displayName = 'MpxButton'

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

@@ -1,4 +1,5 @@
 import { WebviewMessage, WEBVIEW_TARGET, registerWebviewProperties, CanvasInstance } from './utils'
+import { extendObject } from '../utils'
 
 const PROPERTIES = {
   crossOrigin: undefined,
@@ -60,10 +61,9 @@ export class Image {
             this[key] = value
           }
         }
-        callbackFn({
-          ...message.payload,
-          target: this
-        })
+        callbackFn(
+          extendObject({}, message.payload, { target: this })
+        )
       }
     })
   }