From 5c00f46ad266a95bfd90fd3d735f0ba115960956 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Wed, 18 Dec 2024 10:50:57 +0800
Subject: [PATCH 01/27] fix(*): fix style.

---
 .../lib/runtime/components/react/mpx-view.tsx | 33 +++++++++++++------
 .../lib/runtime/components/react/utils.tsx    | 17 ++++++++++
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
index 42b9d0a077..efb03be7e6 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -12,8 +12,9 @@ import useAnimationHooks from './useAnimationHooks'
 import type { AnimationProp } from './useAnimationHooks'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject } from './utils'
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useGesture } from './utils'
 import LinearGradient from 'react-native-linear-gradient'
+import { GestureDetector } from 'react-native-gesture-handler'
 
 export interface _ViewProps extends ViewProps {
   style?: ExtendedViewStyle
@@ -714,6 +715,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   enableBackground = enableBackground || !!backgroundStyle
+  const enableHoverStyle = !!hoverStyle
   const enableBackgroundRef = useRef(enableBackground)
   if (enableBackgroundRef.current !== enableBackground) {
     throw new Error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
@@ -814,17 +816,28 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     innerStyle,
     enableFastImage
   })
-  return enableAnimation
+  const BaseComponent = animation?.actions?.length
     ? (<Animated.View
-      {...innerProps}
-    >
-      {childNode}
-    </Animated.View>)
+    {...innerProps}
+    style={finalStyle}
+  >
+    {childNode}
+  </Animated.View>)
     : (<View
-      {...innerProps}
-    >
-      {childNode}
-    </View>)
+    {...innerProps}
+  >
+    {childNode}
+  </View>)
+
+  return enableHoverStyle
+    ? <GestureDetector
+      gesture={useGesture({
+        onTouchStart: setStartTimer,
+        onTouchEnd: setStayTimer
+      })}>
+      { BaseComponent }
+    </GestureDetector>
+    : BaseComponent
 })
 
 _View.displayName = 'MpxView'
diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index a00bb771ea..af8399831f 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -6,6 +6,8 @@ import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
 import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
 import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
+import { runOnJS } from 'react-native-reanimated'
+import { Gesture } from 'react-native-gesture-handler'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
@@ -610,3 +612,18 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
     return acc
   }, {})
 }
+
+export function useGesture ({ onTouchStart, onTouchEnd }: { onTouchStart: () => void, onTouchEnd: () => void }) {
+  const gesturePan = Gesture.Pan()
+
+    .onTouchesDown(() => {
+      'worklet'
+      runOnJS(onTouchStart)()
+    })
+    .onTouchesUp(() => {
+      'worklet'
+      runOnJS(onTouchEnd)()
+    })
+
+  return gesturePan
+}

From 4b918bb3630aff9f4c3002f03a678a644732ec6a Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 18 Dec 2024 14:40:33 +0800
Subject: [PATCH 02/27] =?UTF-8?q?feat:=20scroll-view=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9Econtext?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/react/context.ts   |  6 ++
 .../components/react/mpx-scroll-view.tsx      | 61 ++++++++++---------
 2 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/context.ts b/packages/webpack-plugin/lib/runtime/components/react/context.ts
index 5bb14fc15d..11b88ebfc0 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/context.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/context.ts
@@ -33,6 +33,10 @@ export interface IntersectionObserver {
   }
 }
 
+export interface ScrollViewContextValue {
+   gestureRef: Record<string, any> | null
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -52,3 +56,5 @@ export const IntersectionObserverContext = createContext<IntersectionObserver |
 export const RouteContext = createContext<number | null>(null)
 
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
+
+export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
index 17f45a6e41..a01f584e28 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
@@ -31,15 +31,15 @@
  * ✔ bindscrolltolower
  * ✔ bindscroll
  */
-import { ScrollView } from 'react-native-gesture-handler'
+import { Gesture, ScrollView } from 'react-native-gesture-handler'
 import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
-import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext } from 'react'
+import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react'
 import { useAnimatedRef } from 'react-native-reanimated'
 import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
-import { IntersectionObserverContext } from './context'
+import { IntersectionObserverContext, ScrollViewContext } from './context'
 
 interface ScrollViewProps {
   children?: ReactNode;
@@ -194,6 +194,12 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     gestureRef: scrollViewRef
   })
 
+  const contextValue = useMemo(() => {
+    return {
+      gestureRef: scrollViewRef
+    }
+  }, [])
+
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
 
   if (scrollX && scrollY) {
@@ -491,32 +497,29 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     white: ['#fff']
   }
 
-  return (
-    <ScrollView
-      {...innerProps}
-      refreshControl={refresherEnabled
-        ? (
-          <RefreshControl
-            progressBackgroundColor={refresherBackground}
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-            {...(refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : {})}
-          />
-          )
-        : undefined}
-    >
-       {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-          }
-        )
-      }
-    </ScrollView>
+  return createElement(
+    ScrollView,
+    extendObject({}, innerProps, {
+      refreshControl: refresherEnabled
+        ? createElement(RefreshControl, extendObject({
+          progressBackgroundColor: refresherBackground,
+          refreshing: refreshing,
+          onRefresh: onRefresh
+        }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
+        : undefined
+    }),
+    createElement(ScrollViewContext.Provider,
+      { value: contextValue },
+      wrapChildren(
+        props,
+        {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
+        }
+      )
+    )
   )
 })
 

From a3b2ec1bc86564b6a333928c347e3cc199bf64a0 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 18 Dec 2024 17:05:38 +0800
Subject: [PATCH 03/27] fix: build error

---
 .../lib/platform/template/wx/component-config/scroll-view.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/scroll-view.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/scroll-view.js
index a5e426e398..0987235c64 100644
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/scroll-view.js
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/scroll-view.js
@@ -53,7 +53,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(scroll-into-view|refresher-threshold|enable-passive|scroll-anchoring|using-sticky|fast-deceleration|enable-flex)$/,
+        test: /^(refresher-threshold|enable-passive|scroll-anchoring|using-sticky|fast-deceleration|enable-flex)$/,
         android: androidPropLog,
         ios: iosPropLog
       },

From 98b831bdcf2ef9625f848e075cba8425d2627b62 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 18 Dec 2024 17:12:24 +0800
Subject: [PATCH 04/27] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0movable?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B1=9E=E6=80=A7=E6=94=AF=E6=8C=81=E8=A7=84?=
 =?UTF-8?q?=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../template/wx/component-config/movable-view.js         | 9 ++++++++-
 .../lib/runtime/components/react/mpx-movable-view.tsx    | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/movable-view.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/movable-view.js
index 77d53b44ed..f24b45bf8a 100644
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/movable-view.js
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/movable-view.js
@@ -2,6 +2,8 @@ const TAG_NAME = 'movable-view'
 
 module.exports = function ({ print }) {
   const aliEventLog = print({ platform: 'ali', tag: TAG_NAME, isError: false, type: 'event' })
+  const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
+  const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
@@ -27,7 +29,7 @@ module.exports = function ({ print }) {
         android: androidPropLog
       },
       {
-        test: /^(inertia|damping|animation)$/,
+        test: /^(damping|friction|scale|scale-min|scale-max|scale-value)$/,
         ios: iosPropLog,
         android: androidPropLog
       }
@@ -36,6 +38,11 @@ module.exports = function ({ print }) {
       {
         test: /^(htouchmove|vtouchmove)$/,
         ali: aliEventLog
+      },
+      {
+        test: /^(bindscale)$/,
+        ios: iosEventLog,
+        android: androidEventLog
       }
     ]
   }
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx
index a5b29a9a37..4a2b32e125 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx
@@ -11,7 +11,7 @@
  * ✘ scale-min
  * ✘ scale-max
  * ✘ scale-value
- * ✘ animation
+ * ✔ animation
  * ✔ bindchange
  * ✘ bindscale
  * ✔ htouchmove

From 0cbeca542c1e1a4ec9903c2e41c4215f50cce534 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Thu, 19 Dec 2024 20:39:25 +0800
Subject: [PATCH 05/27] feat(*): add gesture.

---
 .../lib/runtime/components/react/context.ts              | 2 +-
 .../lib/runtime/components/react/utils.tsx               | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/context.ts b/packages/webpack-plugin/lib/runtime/components/react/context.ts
index 11b88ebfc0..e0b922ffd5 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/context.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/context.ts
@@ -34,7 +34,7 @@ export interface IntersectionObserver {
 }
 
 export interface ScrollViewContextValue {
-   gestureRef: Record<string, any> | null
+   gestureRef: React.RefObject<any>
 }
 
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index af8399831f..38bbef98d5 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
 import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
-import { VarContext } from './context'
+import { VarContext, ScrollViewContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
 import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
@@ -613,7 +613,10 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
   }, {})
 }
 
+
 export function useGesture ({ onTouchStart, onTouchEnd }: { onTouchStart: () => void, onTouchEnd: () => void }) {
+  const gestureRef: React.RefObject<any> = useContext(ScrollViewContext).gestureRef
+
   const gesturePan = Gesture.Pan()
 
     .onTouchesDown(() => {
@@ -625,5 +628,9 @@ export function useGesture ({ onTouchStart, onTouchEnd }: { onTouchStart: () =>
       runOnJS(onTouchEnd)()
     })
 
+    if (gestureRef) {
+      gesturePan.simultaneousWithExternalGesture(gestureRef)
+    }
+
   return gesturePan
 }

From 016b974ab4e1b990e70d59f8390facb8987aa254 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Thu, 19 Dec 2024 20:54:48 +0800
Subject: [PATCH 06/27] fix(*): fix code.

---
 .../webpack-plugin/lib/runtime/components/react/utils.tsx  | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index 38bbef98d5..7f65649569 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -613,7 +613,6 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
   }, {})
 }
 
-
 export function useGesture ({ onTouchStart, onTouchEnd }: { onTouchStart: () => void, onTouchEnd: () => void }) {
   const gestureRef: React.RefObject<any> = useContext(ScrollViewContext).gestureRef
 
@@ -628,9 +627,9 @@ export function useGesture ({ onTouchStart, onTouchEnd }: { onTouchStart: () =>
       runOnJS(onTouchEnd)()
     })
 
-    if (gestureRef) {
-      gesturePan.simultaneousWithExternalGesture(gestureRef)
-    }
+  if (gestureRef) {
+    gesturePan.simultaneousWithExternalGesture(gestureRef)
+  }
 
   return gesturePan
 }

From 2edbe942af6cf09168841d93b833604526f4bcdb Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 19 Dec 2024 21:14:52 +0800
Subject: [PATCH 07/27] fix: ts error

---
 packages/webpack-plugin/lib/runtime/components/react/context.ts | 2 +-
 packages/webpack-plugin/lib/runtime/components/react/utils.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/context.ts b/packages/webpack-plugin/lib/runtime/components/react/context.ts
index e0b922ffd5..39472e6744 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/context.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/context.ts
@@ -34,7 +34,7 @@ export interface IntersectionObserver {
 }
 
 export interface ScrollViewContextValue {
-   gestureRef: React.RefObject<any>
+   gestureRef: React.RefObject<any> | null
 }
 
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index 7f65649569..523fc857ff 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -614,7 +614,7 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
 }
 
 export function useGesture ({ onTouchStart, onTouchEnd }: { onTouchStart: () => void, onTouchEnd: () => void }) {
-  const gestureRef: React.RefObject<any> = useContext(ScrollViewContext).gestureRef
+  const gestureRef: React.RefObject<any> | null = useContext(ScrollViewContext).gestureRef
 
   const gesturePan = Gesture.Pan()
 

From b051823e5e599ec8e7d08bccc1e2f631eb20b9a3 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Thu, 19 Dec 2024 21:35:44 +0800
Subject: [PATCH 08/27] fix(rich): opt code.

---
 .../components/react/mpx-rich-text/index.tsx  | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-rich-text/index.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-rich-text/index.tsx
index db6097df5d..b3037a7ea3 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-rich-text/index.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-rich-text/index.tsx
@@ -3,10 +3,10 @@
  * ✔ nodes
  */
 import { View, ViewProps, ViewStyle } from 'react-native'
-import { useRef, forwardRef, JSX, useState } from 'react'
+import { useRef, forwardRef, JSX, useState, createElement } from 'react'
 import useInnerProps from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
-import { useTransformStyle, useLayout } from '../utils'
+import { useTransformStyle, useLayout, extendObject } from '../utils'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
 import { generateHTML } from './html'
 
@@ -91,28 +91,22 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
     layoutRef
   })
 
-  const innerProps = useInnerProps(props, {
+  const innerProps = useInnerProps(props, extendObject({
     ref: nodeRef,
-    style: { ...normalStyle, ...layoutStyle },
-    ...layoutProps
-  }, [], {
+    style: extendObject(normalStyle, layoutStyle)
+  }, layoutProps), [], {
     layoutRef
   })
 
   const html: string = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes)
 
-  return (
-    <View
-      {...innerProps}
-    >
-      <WebView
-        source={{ html: generateHTML(html) }}
-        onMessage={(event: WebViewMessageEvent) => {
-          setWebViewHeight(+event.nativeEvent.data)
-        }}
-      >
-      </WebView>
-    </View>
+  return createElement(View, extendObject(innerProps),
+    createElement(WebView, extendObject({
+      source: { html: generateHTML(html) },
+      onMessage: (event: WebViewMessageEvent) => {
+        setWebViewHeight(+event.nativeEvent.data)
+      }
+    }))
   )
 })
 

From 9fdda88752f5d4544a21619f10a8f73035f1d32a Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Thu, 19 Dec 2024 21:46:11 +0800
Subject: [PATCH 09/27] fix(*): remove extendObject.

---
 .../lib/runtime/components/react/mpx-rich-text/index.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-rich-text/index.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-rich-text/index.tsx
index b3037a7ea3..7e43b48c4b 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-rich-text/index.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-rich-text/index.tsx
@@ -100,13 +100,13 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
 
   const html: string = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes)
 
-  return createElement(View, extendObject(innerProps),
-    createElement(WebView, extendObject({
+  return createElement(View, innerProps,
+    createElement(WebView, {
       source: { html: generateHTML(html) },
       onMessage: (event: WebViewMessageEvent) => {
         setWebViewHeight(+event.nativeEvent.data)
       }
-    }))
+    })
   )
 })
 

From 3598dff0b38af82367ea1cafbc5d6c7931e196da Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Fri, 20 Dec 2024 13:49:06 +0800
Subject: [PATCH 10/27] fix(*): add use hover style.

---
 .../lib/runtime/components/react/mpx-view.tsx | 58 ++-----------------
 .../lib/runtime/components/react/utils.tsx    | 55 +++++++++++++++---
 2 files changed, 52 insertions(+), 61 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
index 8448b9880d..9db1faa722 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -12,7 +12,7 @@ import useAnimationHooks from './useAnimationHooks'
 import type { AnimationProp } from './useAnimationHooks'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useGesture } from './utils'
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHoverStyle } from './utils'
 import LinearGradient from 'react-native-linear-gradient'
 import { GestureDetector } from 'react-native-gesture-handler'
 
@@ -683,7 +683,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     animation
   } = props
 
-  const [isHover, setIsHover] = useState(false)
 
   // 默认样式
   const defaultStyle: ExtendedViewStyle = style.display === 'flex'
@@ -695,6 +694,8 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
       }
     : {}
 
+  const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime })
+
   const styleObj: ExtendedViewStyle = extendObject({}, defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {})
 
   const {
@@ -715,7 +716,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   enableBackground = enableBackground || !!backgroundStyle
-  const enableHoverStyle = !!hoverStyle
   const enableBackgroundRef = useRef(enableBackground)
   if (enableBackgroundRef.current !== enableBackground) {
     throw new Error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
@@ -726,44 +726,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     style: normalStyle
   })
 
-  const dataRef = useRef<{
-    startTimer?: ReturnType<typeof setTimeout>
-    stayTimer?: ReturnType<typeof setTimeout>
-  }>({})
-
-  useEffect(() => {
-    return () => {
-      dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
-      dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
-    }
-  }, [])
-
-  const setStartTimer = () => {
-    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
-    dataRef.current.startTimer = setTimeout(() => {
-      setIsHover(true)
-    }, +hoverStartTime)
-  }
-
-  const setStayTimer = () => {
-    dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
-    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
-    dataRef.current.stayTimer = setTimeout(() => {
-      setIsHover(false)
-    }, +hoverStayTime)
-  }
-
-  function onTouchStart (e: NativeSyntheticEvent<TouchEvent>) {
-    const { bindtouchstart } = props
-    bindtouchstart && bindtouchstart(e)
-    setStartTimer()
-  }
-
-  function onTouchEnd (e: NativeSyntheticEvent<TouchEvent>) {
-    const { bindtouchend } = props
-    bindtouchend && bindtouchend(e)
-    setStayTimer()
-  }
 
   const {
     layoutRef,
@@ -790,13 +752,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
       ref: nodeRef,
       style: finalStyle
     },
-    layoutProps,
-    hoverStyle
-      ? {
-          bindtouchstart: onTouchStart,
-          bindtouchend: onTouchEnd
-        }
-      : {}
+    layoutProps
     ), [
       'hover-start-time',
       'hover-stay-time',
@@ -822,11 +778,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     : createElement(View, innerProps, childNode)
 
   return enableHoverStyle
-    ? createElement(
-      GestureDetector,
-      { gesture: useGesture({ onTouchStart: setStartTimer, onTouchEnd: setStayTimer }) },
-      BaseComponent
-    )
+    ? createElement(GestureDetector, { gesture } , BaseComponent)
     : BaseComponent
 })
 
diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index 523fc857ff..c276a4a3e8 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -5,7 +5,7 @@ import { VarContext, ScrollViewContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
 import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
-import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
+import type { AnyFunc, ExtendedFunctionComponent, ExtendedViewStyle } from './types/common'
 import { runOnJS } from 'react-native-reanimated'
 import { Gesture } from 'react-native-gesture-handler'
 
@@ -613,23 +613,62 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
   }, {})
 }
 
-export function useGesture ({ onTouchStart, onTouchEnd }: { onTouchStart: () => void, onTouchEnd: () => void }) {
-  const gestureRef: React.RefObject<any> | null = useContext(ScrollViewContext).gestureRef
+export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime } : { hoverStyle?: ExtendedViewStyle, hoverStartTime: number, hoverStayTime: number }) {
 
-  const gesturePan = Gesture.Pan()
+  const enableHoverStyle = !!hoverStyle
+  const enableHoverStyleRef = useRef(enableHoverStyle)
+  if (enableHoverStyleRef.current !== enableHoverStyle  ) {
+    throw new Error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.');
+  }
+  
+  if (!enableHoverStyle) return { enableHoverStyle }
+
+  const gestureRef = useContext(ScrollViewContext).gestureRef
+  const [isHover, setIsHover] = useState(false)
+  const dataRef = useRef<{
+    startTimer?: ReturnType<typeof setTimeout>
+    stayTimer?: ReturnType<typeof setTimeout>
+  }>({})
+
+  useEffect(() => {
+    return () => {
+      dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+      dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    }
+  }, [])
 
+  const setStartTimer = () => {
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.startTimer = setTimeout(() => {
+      setIsHover(true)
+    }, +hoverStartTime)
+  }
+
+  const setStayTimer = () => {
+    dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.stayTimer = setTimeout(() => {
+      setIsHover(false)
+    }, +hoverStayTime)
+  }
+
+  const gesture = Gesture.Pan()
     .onTouchesDown(() => {
       'worklet'
-      runOnJS(onTouchStart)()
+      runOnJS(setStartTimer)()
     })
     .onTouchesUp(() => {
       'worklet'
-      runOnJS(onTouchEnd)()
+      runOnJS(setStayTimer)()
     })
 
   if (gestureRef) {
-    gesturePan.simultaneousWithExternalGesture(gestureRef)
+    gesture.simultaneousWithExternalGesture(gestureRef)
   }
 
-  return gesturePan
+  return {
+    isHover,
+    gesture,
+    enableHoverStyle
+  }
 }

From 88226a5c9ed365e19fdbfba9d2c89dbc506d7372 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Fri, 20 Dec 2024 13:50:07 +0800
Subject: [PATCH 11/27] fix(view): fix view lint

---
 .../lib/runtime/components/react/mpx-view.tsx              | 4 +---
 .../webpack-plugin/lib/runtime/components/react/utils.tsx  | 7 +++----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
index 9db1faa722..7e1186e6c8 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -683,7 +683,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     animation
   } = props
 
-
   // 默认样式
   const defaultStyle: ExtendedViewStyle = style.display === 'flex'
     ? {
@@ -726,7 +725,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     style: normalStyle
   })
 
-
   const {
     layoutRef,
     layoutStyle,
@@ -778,7 +776,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     : createElement(View, innerProps, childNode)
 
   return enableHoverStyle
-    ? createElement(GestureDetector, { gesture } , BaseComponent)
+    ? createElement(GestureDetector, { gesture }, BaseComponent)
     : BaseComponent
 })
 
diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index c276a4a3e8..b004f4b26a 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -614,13 +614,12 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
 }
 
 export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime } : { hoverStyle?: ExtendedViewStyle, hoverStartTime: number, hoverStayTime: number }) {
-
   const enableHoverStyle = !!hoverStyle
   const enableHoverStyleRef = useRef(enableHoverStyle)
-  if (enableHoverStyleRef.current !== enableHoverStyle  ) {
-    throw new Error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.');
+  if (enableHoverStyleRef.current !== enableHoverStyle) {
+    throw new Error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')
   }
-  
+
   if (!enableHoverStyle) return { enableHoverStyle }
 
   const gestureRef = useContext(ScrollViewContext).gestureRef

From df909318c8c73b41417b26063983fab11f5e789c Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Fri, 20 Dec 2024 13:53:07 +0800
Subject: [PATCH 12/27] fix(*): fix animation.

---
 .../webpack-plugin/lib/runtime/components/react/mpx-view.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
index 7e1186e6c8..34fe924da6 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -771,7 +771,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     enableFastImage
   })
 
-  const BaseComponent = animation?.actions?.length
+  const BaseComponent = enableAnimation
     ? createElement(Animated.View, extendObject({}, innerProps, { style: finalStyle }), childNode)
     : createElement(View, innerProps, childNode)
 

From 477d28f498e629bbb15487447ed2661c3b26c3a4 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Fri, 20 Dec 2024 15:57:31 +0800
Subject: [PATCH 13/27] fix(*): add disable.

---
 .../webpack-plugin/lib/runtime/components/react/utils.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index b004f4b26a..d55ca7501f 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -613,7 +613,7 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
   }, {})
 }
 
-export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime } : { hoverStyle?: ExtendedViewStyle, hoverStartTime: number, hoverStayTime: number }) {
+export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disabled } : { hoverStyle?: ExtendedViewStyle, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
   const enableHoverStyle = !!hoverStyle
   const enableHoverStyleRef = useRef(enableHoverStyle)
   if (enableHoverStyleRef.current !== enableHoverStyle) {
@@ -651,15 +651,19 @@ export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime } : {
     }, +hoverStayTime)
   }
 
-  const gesture = Gesture.Pan()
+  const gesture = useMemo(() => {
+    return Gesture.Pan()
     .onTouchesDown(() => {
       'worklet'
+      if (disabled) return
       runOnJS(setStartTimer)()
     })
     .onTouchesUp(() => {
       'worklet'
+      if (disabled) return
       runOnJS(setStayTimer)()
     })
+  }, [disabled])
 
   if (gestureRef) {
     gesture.simultaneousWithExternalGesture(gestureRef)

From c34d8f5b6eedfdb943550665ec4a983efb0b495f Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Fri, 20 Dec 2024 15:58:14 +0800
Subject: [PATCH 14/27] fix(*): add disable.

---
 .../lib/runtime/components/react/utils.tsx    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index d55ca7501f..0efe89a63f 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -653,16 +653,16 @@ export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disa
 
   const gesture = useMemo(() => {
     return Gesture.Pan()
-    .onTouchesDown(() => {
-      'worklet'
-      if (disabled) return
-      runOnJS(setStartTimer)()
-    })
-    .onTouchesUp(() => {
-      'worklet'
-      if (disabled) return
-      runOnJS(setStayTimer)()
-    })
+      .onTouchesDown(() => {
+        'worklet'
+        if (disabled) return
+        runOnJS(setStartTimer)()
+      })
+      .onTouchesUp(() => {
+        'worklet'
+        if (disabled) return
+        runOnJS(setStayTimer)()
+      })
   }, [disabled])
 
   if (gestureRef) {

From 698f8057cfad1a4191950b3d4e0117d2d07ce685 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Tue, 24 Dec 2024 22:46:03 +0800
Subject: [PATCH 15/27] fix(*): fix hover style.

---
 .../lib/runtime/components/react/mpx-view.tsx | 36 ++++++++-----------
 .../components/react/useAnimationHooks.ts     | 14 ++++++--
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
index dfe12e0927..2cc8e276ae 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -643,7 +643,7 @@ function wrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string,
 
 interface WrapChildrenConfig {
   hasVarDec: boolean
-  enableBackground: boolean
+  enableBackground?: boolean
   textStyle?: TextStyle
   backgroundStyle?: ExtendedViewStyle
   varContext?: Record<string, any>
@@ -653,6 +653,11 @@ interface WrapChildrenConfig {
 }
 
 function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }: WrapChildrenConfig) {
+  enableBackground = enableBackground || !!backgroundStyle
+  const enableBackgroundRef = useRef(enableBackground)
+  if (enableBackgroundRef.current !== enableBackground) {
+    error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
+  }
   const children = wrapChildren(props, {
     hasVarDec,
     varContext,
@@ -715,12 +720,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
 
   const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
-  enableBackground = enableBackground || !!backgroundStyle
-  const enableBackgroundRef = useRef(enableBackground)
-  if (enableBackgroundRef.current !== enableBackground) {
-    error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
-  }
-
   const nodeRef = useRef(null)
   useNodesRef<View, _ViewProps>(props, ref, nodeRef, {
     style: normalStyle
@@ -734,22 +733,17 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
 
   const viewStyle = extendObject({}, innerStyle, layoutStyle)
 
-  enableAnimation = enableAnimation || !!animation
-  const enableAnimationRef = useRef(enableAnimation)
-  if (enableAnimationRef.current !== enableAnimation) {
-    error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
-  }
-  const finalStyle = enableAnimationRef.current
-    ? [viewStyle, useAnimationHooks({
-        animation,
-        style: viewStyle
-      })]
-    : viewStyle
+  const { enableStyleAnimation, animationStyle } = useAnimationHooks({
+    enableAnimation,
+    animation,
+    style: viewStyle
+  })
+  
   const innerProps = useInnerProps(
     props,
     extendObject({
       ref: nodeRef,
-      style: finalStyle
+      style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
     },
     layoutProps
     ), [
@@ -763,7 +757,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
 
   const childNode = wrapWithChildren(props, {
     hasVarDec,
-    enableBackground: enableBackgroundRef.current,
+    enableBackground,
     textStyle,
     backgroundStyle,
     varContext: varContextRef.current,
@@ -773,7 +767,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   })
 
   const BaseComponent = enableAnimation
-    ? createElement(Animated.View, extendObject({}, innerProps, { style: finalStyle }), childNode)
+    ? createElement(Animated.View, innerProps, childNode)
     : createElement(View, innerProps, childNode)
 
   return enableHoverStyle
diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
index 77d1ac0503..860bb79a08 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
@@ -13,6 +13,7 @@ import {
   WithTimingConfig,
   AnimationCallback
 } from 'react-native-reanimated'
+import { error } from '@mpxjs/utils'
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
@@ -166,8 +167,17 @@ const formatStyle = (style: ExtendedViewStyle): ExtendedViewStyle => {
   })
 }
 
-export default function useAnimationHooks<T, P> (props: _ViewProps) {
-  const { style = {}, animation } = props
+export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean }) {
+  const { style = {}, animation, enableAnimation } = props
+
+  const enableStyleAnimation = enableAnimation || !!animation
+  const enableAnimationRef = useRef(enableStyleAnimation)
+  if (enableAnimationRef.current !== enableStyleAnimation) {
+    error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
+  }
+
+  if (!enableStyleAnimation) return { enableStyleAnimation }
+  
   const originalStyle = formatStyle(style)
   // id 标识
   const id = animation?.id || -1

From 144674393bc6b702b79852951751aa3d7f97ffe9 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Tue, 24 Dec 2024 23:11:31 +0800
Subject: [PATCH 16/27] fix(*): fix lint.

---
 .../webpack-plugin/lib/runtime/components/react/mpx-view.tsx  | 4 ++--
 .../lib/runtime/components/react/useAnimationHooks.ts         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
index 2cc8e276ae..530f68f10c 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -673,7 +673,7 @@ function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, tex
 
 const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, ref): JSX.Element => {
   const { textProps, innerProps: props = {} } = splitProps(viewProps)
-  let {
+  const {
     style = {},
     'hover-style': hoverStyle,
     'hover-start-time': hoverStartTime = 50,
@@ -738,7 +738,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     animation,
     style: viewStyle
   })
-  
+
   const innerProps = useInnerProps(
     props,
     extendObject({
diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
index 860bb79a08..6107e17b2b 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
@@ -177,7 +177,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
   }
 
   if (!enableStyleAnimation) return { enableStyleAnimation }
-  
+
   const originalStyle = formatStyle(style)
   // id 标识
   const id = animation?.id || -1

From ba06d3ea79b05cbfe5864d8bbde9706a9ac225f1 Mon Sep 17 00:00:00 2001
From: WX-DongXing <dong.xing@outlook.com>
Date: Thu, 26 Dec 2024 17:36:51 +0800
Subject: [PATCH 17/27] feat: perf hover

---
 .../runtime/components/react/mpx-button.tsx   | 62 ++++---------------
 1 file changed, 13 insertions(+), 49 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
index 004afef42c..3d67acbeb6 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
@@ -34,7 +34,7 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import { createElement, useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'
+import { createElement, useEffect, useRef, ReactNode, forwardRef, useContext, JSX } from 'react'
 import {
   View,
   StyleSheet,
@@ -45,10 +45,12 @@ import {
   NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
+import { GestureDetector } from 'react-native-gesture-handler'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHoverStyle } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
+import type { ExtendedViewStyle } from './types/common'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -68,7 +70,7 @@ export interface ButtonProps {
   disabled?: boolean
   loading?: boolean
   'hover-class'?: string
-  'hover-style'?: ViewStyle & TextStyle & Record<string, any>
+  'hover-style'?: ExtendedViewStyle
   'hover-start-time'?: number
   'hover-stay-time'?: number
   'open-type'?: OpenType
@@ -83,8 +85,6 @@ export interface ButtonProps {
   children: ReactNode
   bindgetuserinfo?: (userInfo: any) => void
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  bindtouchstart?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  bindtouchend?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 const LOADING_IMAGE_URI =
@@ -216,15 +216,15 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     style = {},
     children,
     bindgetuserinfo,
-    bindtap,
-    bindtouchstart,
-    bindtouchend
+    bindtap
   } = props
 
   const pageId = useContext(RouteContext)
 
   const formContext = useContext(FormContext)
 
+  const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime, disabled })
+
   let submitFn: () => void | undefined
   let resetFn: () => void | undefined
 
@@ -233,16 +233,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     resetFn = formContext.reset
   }
 
-  const refs = useRef<{
-    hoverStartTimer: ReturnType<typeof setTimeout> | undefined
-    hoverStayTimer: ReturnType<typeof setTimeout> | undefined
-  }>({
-    hoverStartTimer: undefined,
-    hoverStayTimer: undefined
-  })
-
-  const [isHover, setIsHover] = useState(false)
-
   const isMiniSize = size === 'mini'
 
   const applyHoverEffect = isHover && hoverClass !== 'none'
@@ -366,34 +356,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     }
   }
 
-  const setStayTimer = () => {
-    clearTimeout(refs.current.hoverStayTimer)
-    refs.current.hoverStayTimer = setTimeout(() => {
-      setIsHover(false)
-      clearTimeout(refs.current.hoverStayTimer)
-    }, hoverStayTime)
-  }
-
-  const setStartTimer = () => {
-    clearTimeout(refs.current.hoverStartTimer)
-    refs.current.hoverStartTimer = setTimeout(() => {
-      setIsHover(true)
-      clearTimeout(refs.current.hoverStartTimer)
-    }, hoverStartTime)
-  }
-
-  const onTouchStart = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    bindtouchstart && bindtouchstart(evt)
-    if (disabled) return
-    setStartTimer()
-  }
-
-  const onTouchEnd = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    bindtouchend && bindtouchend(evt)
-    if (disabled) return
-    setStayTimer()
-  }
-
   const handleFormTypeFn = () => {
     if (formType === 'submit') {
       submitFn && submitFn()
@@ -418,8 +380,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
       },
       layoutProps,
       {
-        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
-        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
         bindtap: !disabled && onTap
       }
     ),
@@ -442,7 +402,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     }
   )
 
-  return createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
+  const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
     wrapChildren(
       props,
       {
@@ -453,6 +413,10 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
       }
     )
   )
+
+  return enableHoverStyle
+    ? createElement(GestureDetector, { gesture }, baseButton)
+    : baseButton
 })
 
 Button.displayName = 'MpxButton'

From 0c23e141d77d663c18b3cff00237e54a2019ce18 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Thu, 26 Dec 2024 17:45:15 +0800
Subject: [PATCH 18/27] fix(*): fix code

---
 .../lib/runtime/components/react/useAnimationHooks.ts     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
index 6107e17b2b..f7a1f3e25a 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
@@ -346,7 +346,8 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     }, {} as { [propName: string]: string | number })
   }
   // ** 生成动画样式
-  return useAnimatedStyle(() => {
+
+  const animationStyle = useAnimatedStyle(() => {
     // console.info(`useAnimatedStyle styles=`, originalStyle)
     return animatedStyleKeys.value.reduce((styles, key) => {
       // console.info('getAnimationStyles', key, shareValMap[key].value)
@@ -364,4 +365,9 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
       return styles
     }, {} as ExtendedViewStyle)
   })
+
+  return {
+    enableStyleAnimation,
+    animationStyle
+  }
 }

From 46edb82fc48fe9f7d8eb66b630b33c70445ba617 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Mon, 30 Dec 2024 16:19:05 +0800
Subject: [PATCH 19/27] fix(*): fix style.

---
 .../webpack-plugin/lib/runtime/components/react/mpx-view.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
index 530f68f10c..bf8f356196 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -766,7 +766,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     enableFastImage
   })
 
-  const BaseComponent = enableAnimation
+  const BaseComponent = enableStyleAnimation
     ? createElement(Animated.View, innerProps, childNode)
     : createElement(View, innerProps, childNode)
 

From 56022586fe2f07968758c682ca61518ea2d689dc Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Mon, 6 Jan 2025 16:53:45 +0800
Subject: [PATCH 20/27] fix(view): fix hover style ref.

---
 .../lib/runtime/components/react/useAnimationHooks.ts     | 2 +-
 .../webpack-plugin/lib/runtime/components/react/utils.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
index f7a1f3e25a..bf6a85676e 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
@@ -368,6 +368,6 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
 
   return {
     enableStyleAnimation,
-    animationStyle
+    animationStyle: enableAnimationRef.current
   }
 }
diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index 0efe89a63f..daf591028c 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -617,7 +617,7 @@ export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disa
   const enableHoverStyle = !!hoverStyle
   const enableHoverStyleRef = useRef(enableHoverStyle)
   if (enableHoverStyleRef.current !== enableHoverStyle) {
-    throw new Error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')
+    error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')
   }
 
   if (!enableHoverStyle) return { enableHoverStyle }
@@ -637,6 +637,7 @@ export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disa
   }, [])
 
   const setStartTimer = () => {
+    if (disabled) return
     dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
     dataRef.current.startTimer = setTimeout(() => {
       setIsHover(true)
@@ -644,6 +645,7 @@ export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disa
   }
 
   const setStayTimer = () => {
+    if (disabled) return
     dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
     dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
     dataRef.current.stayTimer = setTimeout(() => {
@@ -655,12 +657,10 @@ export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disa
     return Gesture.Pan()
       .onTouchesDown(() => {
         'worklet'
-        if (disabled) return
         runOnJS(setStartTimer)()
       })
       .onTouchesUp(() => {
         'worklet'
-        if (disabled) return
         runOnJS(setStayTimer)()
       })
   }, [disabled])
@@ -672,6 +672,6 @@ export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disa
   return {
     isHover,
     gesture,
-    enableHoverStyle
+    enableHoverStyle: enableHoverStyleRef.current
   }
 }

From 985307d32bc3e7458b5c26521d469390d50f7aa3 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Mon, 6 Jan 2025 16:54:50 +0800
Subject: [PATCH 21/27] fix(*): fix code.

---
 packages/webpack-plugin/lib/runtime/components/react/utils.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index daf591028c..f38ae2dfc6 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -663,7 +663,7 @@ export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disa
         'worklet'
         runOnJS(setStayTimer)()
       })
-  }, [disabled])
+  }, [])
 
   if (gestureRef) {
     gesture.simultaneousWithExternalGesture(gestureRef)

From 4e0a49b6afcbc449ccd7450e8a1696b43438241c Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Mon, 6 Jan 2025 17:02:43 +0800
Subject: [PATCH 22/27] fix(*): fix code.

---
 .../lib/runtime/components/react/useAnimationHooks.ts           | 2 +-
 packages/webpack-plugin/lib/runtime/components/react/utils.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
index bf6a85676e..d2a47a52b0 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
@@ -176,7 +176,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
   }
 
-  if (!enableStyleAnimation) return { enableStyleAnimation }
+  if (!enableStyleAnimation) return { animationStyle: enableAnimationRef.current }
 
   const originalStyle = formatStyle(style)
   // id 标识
diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index f38ae2dfc6..62b074e278 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -620,7 +620,7 @@ export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disa
     error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')
   }
 
-  if (!enableHoverStyle) return { enableHoverStyle }
+  if (!enableHoverStyle) return { enableHoverStyle: enableHoverStyleRef.current }
 
   const gestureRef = useContext(ScrollViewContext).gestureRef
   const [isHover, setIsHover] = useState(false)

From d1de57a67482ea462a874a5dde8bc4fab8773078 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Mon, 6 Jan 2025 20:48:07 +0800
Subject: [PATCH 23/27] fix(*): fix hover style.

---
 .../lib/runtime/components/react/mpx-button.tsx      |  7 ++++---
 .../lib/runtime/components/react/mpx-view.tsx        |  5 +++--
 .../runtime/components/react/useAnimationHooks.ts    |  6 +++---
 .../lib/runtime/components/react/utils.tsx           | 12 +++++-------
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
index 3d67acbeb6..528ad61b72 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
@@ -223,7 +223,8 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const formContext = useContext(FormContext)
 
-  const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime, disabled })
+  const enableHover = hoverClass !== 'none'
+  const { isHover, gesture } = useHoverStyle({ enableHover, hoverStartTime, hoverStayTime, disabled })
 
   let submitFn: () => void | undefined
   let resetFn: () => void | undefined
@@ -235,7 +236,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const isMiniSize = size === 'mini'
 
-  const applyHoverEffect = isHover && hoverClass !== 'none'
+  const applyHoverEffect = isHover && enableHover
 
   const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type]
 
@@ -414,7 +415,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     )
   )
 
-  return enableHoverStyle
+  return enableHover
     ? createElement(GestureDetector, { gesture }, baseButton)
     : baseButton
 })
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
index bf8f356196..d677a784d9 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -699,7 +699,8 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
       }
     : {}
 
-  const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime })
+  const enableHover = !!hoverStyle
+  const { isHover, gesture } = useHoverStyle({ enableHover, hoverStartTime, hoverStayTime })
 
   const styleObj: ExtendedViewStyle = extendObject({}, defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {})
 
@@ -770,7 +771,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     ? createElement(Animated.View, innerProps, childNode)
     : createElement(View, innerProps, childNode)
 
-  return enableHoverStyle
+  return enableHover
     ? createElement(GestureDetector, { gesture }, BaseComponent)
     : BaseComponent
 })
diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
index d2a47a52b0..850d00c4c1 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
@@ -176,7 +176,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
   }
 
-  if (!enableStyleAnimation) return { animationStyle: enableAnimationRef.current }
+  if (!enableAnimationRef.current) return { animationStyle: false }
 
   const originalStyle = formatStyle(style)
   // id 标识
@@ -367,7 +367,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
   })
 
   return {
-    enableStyleAnimation,
-    animationStyle: enableAnimationRef.current
+    enableStyleAnimation: enableAnimationRef.current,
+    animationStyle
   }
 }
diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index 62b074e278..acc57492c5 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -613,14 +613,13 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
   }, {})
 }
 
-export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disabled } : { hoverStyle?: ExtendedViewStyle, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
-  const enableHoverStyle = !!hoverStyle
-  const enableHoverStyleRef = useRef(enableHoverStyle)
-  if (enableHoverStyleRef.current !== enableHoverStyle) {
+export function useHoverStyle ({ enableHover, hoverStartTime, hoverStayTime, disabled } : { enableHover: boolean, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
+  const enableHoverRef = useRef(enableHover)
+  if (enableHoverRef.current !== enableHover) {
     error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')
   }
 
-  if (!enableHoverStyle) return { enableHoverStyle: enableHoverStyleRef.current }
+  if (!enableHoverRef.current) return { isHover: false }
 
   const gestureRef = useContext(ScrollViewContext).gestureRef
   const [isHover, setIsHover] = useState(false)
@@ -671,7 +670,6 @@ export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disa
 
   return {
     isHover,
-    gesture,
-    enableHoverStyle: enableHoverStyleRef.current
+    gesture
   }
 }

From 89007db3d78effdb6a7b3eedcfdb2cb159af9ff4 Mon Sep 17 00:00:00 2001
From: WX-DongXing <dong.xing@outlook.com>
Date: Mon, 6 Jan 2025 22:30:21 +0800
Subject: [PATCH 24/27] feat: fix lint and replace isHover

---
 .../runtime/components/react/mpx-button.tsx    | 18 ++++++++----------
 .../lib/runtime/components/react/mpx-view.tsx  |  4 ++--
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
index 528ad61b72..ca32653431 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
@@ -45,7 +45,7 @@ import {
   NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { GestureDetector } from 'react-native-gesture-handler'
+import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
 import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHoverStyle } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
@@ -236,15 +236,13 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const isMiniSize = size === 'mini'
 
-  const applyHoverEffect = isHover && enableHover
-
   const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type]
 
-  const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color
+  const normalBackgroundColor = disabled ? disabledColor : isHover || loading ? hoverColor : color
 
   const plainBorderColor = disabled
     ? 'rgba(0, 0, 0, .2)'
-    : applyHoverEffect
+    : isHover
       ? `rgba(${plainColor},.6)`
       : `rgb(${plainColor})`
 
@@ -252,14 +250,14 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const plainTextColor = disabled
     ? 'rgba(0, 0, 0, .2)'
-    : applyHoverEffect
+    : isHover
       ? `rgba(${plainColor}, .6)`
       : `rgb(${plainColor})`
 
   const normalTextColor =
     type === 'default'
-      ? `rgba(0, 0, 0, ${disabled ? 0.3 : applyHoverEffect || loading ? 0.6 : 1})`
-      : `rgba(255 ,255 ,255 , ${disabled || applyHoverEffect || loading ? 0.6 : 1})`
+      ? `rgba(0, 0, 0, ${disabled ? 0.3 : isHover || loading ? 0.6 : 1})`
+      : `rgba(255 ,255 ,255 , ${disabled || isHover || loading ? 0.6 : 1})`
 
   const viewStyle = {
     borderWidth: 1,
@@ -288,7 +286,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     {},
     defaultStyle,
     style,
-    applyHoverEffect ? hoverStyle : {}
+    isHover ? hoverStyle : {}
   )
 
   const {
@@ -416,7 +414,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   )
 
   return enableHover
-    ? createElement(GestureDetector, { gesture }, baseButton)
+    ? createElement(GestureDetector, { gesture: gesture as PanGesture }, baseButton)
     : baseButton
 })
 
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
index d677a784d9..dbd9c82f8d 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -15,7 +15,7 @@ import useNodesRef, { HandlerRef } from './useNodesRef'
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHoverStyle } from './utils'
 import { error } from '@mpxjs/utils'
 import LinearGradient from 'react-native-linear-gradient'
-import { GestureDetector } from 'react-native-gesture-handler'
+import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
 
 export interface _ViewProps extends ViewProps {
   style?: ExtendedViewStyle
@@ -772,7 +772,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     : createElement(View, innerProps, childNode)
 
   return enableHover
-    ? createElement(GestureDetector, { gesture }, BaseComponent)
+    ? createElement(GestureDetector, { gesture: gesture as PanGesture }, BaseComponent)
     : BaseComponent
 })
 

From 25b81a18b5e61fc8c9c8f247ec2fbe7175f751f3 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Thu, 9 Jan 2025 17:24:46 +0800
Subject: [PATCH 25/27] fix(*): fix code.

---
 .../lib/runtime/components/react/mpx-button.tsx               | 4 ++--
 .../webpack-plugin/lib/runtime/components/react/mpx-view.tsx  | 4 ++--
 .../lib/runtime/components/react/useAnimationHooks.ts         | 2 +-
 .../webpack-plugin/lib/runtime/components/react/utils.tsx     | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
index ca32653431..56881b4a39 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
@@ -46,7 +46,7 @@ import {
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHoverStyle } from './utils'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
@@ -224,7 +224,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   const formContext = useContext(FormContext)
 
   const enableHover = hoverClass !== 'none'
-  const { isHover, gesture } = useHoverStyle({ enableHover, hoverStartTime, hoverStayTime, disabled })
+  const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime, disabled })
 
   let submitFn: () => void | undefined
   let resetFn: () => void | undefined
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
index 4970a2f21d..ce36d5ca0a 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -12,7 +12,7 @@ import useAnimationHooks from './useAnimationHooks'
 import type { AnimationProp } from './useAnimationHooks'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHoverStyle } from './utils'
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils'
 import { error } from '@mpxjs/utils'
 import LinearGradient from 'react-native-linear-gradient'
 import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
@@ -701,7 +701,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     : {}
 
   const enableHover = !!hoverStyle
-  const { isHover, gesture } = useHoverStyle({ enableHover, hoverStartTime, hoverStayTime })
+  const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime })
 
   const styleObj: ExtendedViewStyle = extendObject({}, defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {})
 
diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
index a707d28d77..26467184bb 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
@@ -176,7 +176,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
   }
 
-  if (!enableAnimationRef.current) return { animationStyle: false }
+  if (!enableAnimationRef.current) return { enableStyleAnimation: false }
 
   const originalStyle = formatStyle(style)
   // id 标识
diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index c176bba7b7..b2db39bcab 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -645,7 +645,7 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
   }, {})
 }
 
-export function useHoverStyle ({ enableHover, hoverStartTime, hoverStayTime, disabled } : { enableHover: boolean, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
+export function useHover ({ enableHover, hoverStartTime, hoverStayTime, disabled } : { enableHover: boolean, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
   const enableHoverRef = useRef(enableHover)
   if (enableHoverRef.current !== enableHover) {
     error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')

From 156269a6053946e7492427b1f88ac3a05b4dcd28 Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Thu, 9 Jan 2025 17:30:05 +0800
Subject: [PATCH 26/27] fix(*): fix enableBackground back.

---
 .../lib/runtime/components/react/mpx-view.tsx     | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
index ce36d5ca0a..7d8cdbc94b 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -653,11 +653,6 @@ interface WrapChildrenConfig {
 }
 
 function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }: WrapChildrenConfig) {
-  enableBackground = enableBackground || !!backgroundStyle
-  const enableBackgroundRef = useRef(enableBackground)
-  if (enableBackgroundRef.current !== enableBackground) {
-    error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
-  }
   const children = wrapChildren(props, {
     hasVarDec,
     varContext,
@@ -674,7 +669,7 @@ function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, tex
 
 const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, ref): JSX.Element => {
   const { textProps, innerProps: props = {} } = splitProps(viewProps)
-  const {
+  let {
     style = {},
     'hover-style': hoverStyle,
     'hover-start-time': hoverStartTime = 50,
@@ -722,6 +717,12 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
 
   const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
+  enableBackground = enableBackground || !!backgroundStyle
+  const enableBackgroundRef = useRef(enableBackground)
+  if (enableBackgroundRef.current !== enableBackground) {
+    error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
+  }
+
   const nodeRef = useRef(null)
   useNodesRef<View, _ViewProps>(props, ref, nodeRef, {
     style: normalStyle
@@ -759,7 +760,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
 
   const childNode = wrapWithChildren(props, {
     hasVarDec,
-    enableBackground,
+    enableBackground: enableBackgroundRef.current,
     textStyle,
     backgroundStyle,
     varContext: varContextRef.current,

From 157d6b8e4b73ceb050c6a5bf6d95aade2fafab3f Mon Sep 17 00:00:00 2001
From: shangqunfeng <shangqunfeng@didiglobal.com>
Date: Thu, 9 Jan 2025 17:59:03 +0800
Subject: [PATCH 27/27] fix(eslint): fix rule hook.

---
 .../lib/runtime/components/react/useAnimationHooks.ts      | 7 ++++++-
 .../webpack-plugin/lib/runtime/components/react/utils.tsx  | 7 +++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
index 26467184bb..620dea764a 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
@@ -182,14 +182,17 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
   // id 标识
   const id = animation?.id || -1
   // 有动画样式的 style key
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const animatedStyleKeys = useSharedValue([] as (string|string[])[])
   // 记录动画key的style样式值 没有的话设置为false
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean})
   // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
   // ** 全量 style prop sharedValue
   // 不能做增量的原因：
   // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
   // 2 尝试用 useSharedValue，因为实际触发的 style prop 需要是 sharedValue 才能驱动动画，若外层 shareValMap 也是 sharedValue，动画无法驱动。
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const shareValMap = useMemo(() => {
     return Object.keys(InitialValue).reduce((valMap, key) => {
       const defaultVal = getInitialVal(key, isTransform(key))
@@ -198,6 +201,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
   }, [])
   // ** 获取动画样式prop & 驱动动画
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     if (id === -1) return
     // 更新动画样式 key map
@@ -218,6 +222,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
   //   })
   // }, [style])
   // ** 清空动画
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     return () => {
       Object.values(shareValMap).forEach((value) => {
@@ -345,7 +350,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     }, {} as { [propName: string]: string | number })
   }
   // ** 生成动画样式
-
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const animationStyle = useAnimatedStyle(() => {
     // console.info(`useAnimatedStyle styles=`, originalStyle)
     return animatedStyleKeys.value.reduce((styles, key) => {
diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index b2db39bcab..f14a5e6ad8 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -652,14 +652,17 @@ export function useHover ({ enableHover, hoverStartTime, hoverStayTime, disabled
   }
 
   if (!enableHoverRef.current) return { isHover: false }
-
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const gestureRef = useContext(ScrollViewContext).gestureRef
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [isHover, setIsHover] = useState(false)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const dataRef = useRef<{
     startTimer?: ReturnType<typeof setTimeout>
     stayTimer?: ReturnType<typeof setTimeout>
   }>({})
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     return () => {
       dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
@@ -683,7 +686,7 @@ export function useHover ({ enableHover, hoverStartTime, hoverStayTime, disabled
       setIsHover(false)
     }, +hoverStayTime)
   }
-
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const gesture = useMemo(() => {
     return Gesture.Pan()
       .onTouchesDown(() => {