chore: 修改extend的使用

didi · Dec 4, 2024 · aa13704 · aa13704
1 parent 156eae3
commit aa13704
Show file tree

Hide file tree

Showing 19 changed files with 63 additions and 52 deletions.
diff --git a/packages/api-proxy/src/platform/api/create-selector-query/rnNodesRef.js b/packages/api-proxy/src/platform/api/create-selector-query/rnNodesRef.js
@@ -84,8 +84,7 @@ const getComputedStyle = (config = []) => {
   return wrapFn((nodeInstance, resolve) => {
     config = new Set(config)
     const res = {}
-    const finalStyle = nodeInstance.instance.style
-    const computedStyle = finalStyle || {}
+    const computedStyle = nodeInstance.instance.style || {}
     config.forEach((key) => {
       const humpKey = dash2hump(key)
       // 取 style 的 key 是根据传入的 key 来设置，传什么设置什么 key，只不过取值需要做兼容

diff --git a/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts b/packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts
@@ -31,6 +31,7 @@ const getTouchEvent = (
   const { layoutRef } = config
 
   const currentTarget = extendObject(
+    {},
     event.currentTarget,
     {
       id: id || '',
@@ -40,7 +41,7 @@ const getTouchEvent = (
     }
   )
 
-  return extendObject(event, {
+  return extendObject({}, event, {
     type,
     timeStamp: timestamp,
     currentTarget,
@@ -78,13 +79,13 @@ export const getCustomEvent = (
   { detail = {}, layoutRef }: { detail?: Record<string, unknown>; layoutRef: LayoutRef },
   props: Props = {}
 ) => {
-  const targetInfo = extendObject(oe.target || {}, {
+  const targetInfo = extendObject({}, oe.target, {
     id: props.id || '',
     dataset: collectDataset(props),
     offsetLeft: layoutRef?.current?.offsetLeft || 0,
     offsetTop: layoutRef?.current?.offsetTop || 0
   })
-  return extendObject(oe, {
+  return extendObject({}, oe, {
     type,
     detail,
     target: targetInfo,
@@ -132,7 +133,7 @@ const useInnerProps = (
     ...userRemoveProps
   ]
 
-  propsRef.current = extendObject(props, additionalProps)
+  propsRef.current = extendObject({}, props, additionalProps)
 
   for (const key in eventConfigMap) {
     if (hasOwn(propsRef.current, key)) {
@@ -296,6 +297,7 @@ const useInnerProps = (
   const rawEventKeys = Object.keys(eventConfig)
 
   return extendObject(
+    {},
     events,
     omit(propsRef.current, [...rawEventKeys, ...removeProps])
   )

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-button.tsx
@@ -182,6 +182,7 @@ const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
   }, [])
 
   const loadingStyle = extendObject(
+    {},
     styles.loading,
     {
       transform: [{ rotate }],
@@ -277,20 +278,23 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   }
 
   const defaultViewStyle = extendObject(
+    {},
     styles.button,
     isMiniSize ? styles.buttonMini : null,
     viewStyle
   )
 
   const defaultTextStyle = extendObject(
+    {},
     styles.text,
     isMiniSize ? styles.textMini : {},
     { color: plain ? plainTextColor : normalTextColor }
   )
 
-  const defaultStyle = extendObject(defaultViewStyle, defaultTextStyle)
+  const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle)
 
   const styleObj = extendObject(
+    {},
     defaultStyle,
     style,
     applyHoverEffect ? hoverStyle : {}
@@ -410,7 +414,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     extendObject(
       {
         ref: nodeRef,
-        style: extendObject(innerStyle, layoutStyle)
+        style: extendObject({}, innerStyle, layoutStyle)
       },
       layoutProps,
       {

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-canvas/index.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-canvas/index.tsx
@@ -73,7 +73,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     hasSelfPercent,
     setWidth,
     setHeight
-  } = useTransformStyle(extendObject(style, stylesheet.container), {
+  } = useTransformStyle(extendObject({}, style, stylesheet.container), {
     enableVar,
     externalVarContext,
     parentFontSize,
@@ -93,7 +93,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
-    style: extendObject(normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 }),
+    style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 }),
     ...layoutProps
   }, [], {
     layoutRef

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx
@@ -64,7 +64,7 @@ const CheckboxGroup = forwardRef<
     flexWrap: 'wrap'
   }
 
-  const styleObj = extendObject(defaultStyle, style)
+  const styleObj = extendObject({}, defaultStyle, style)
 
   const {
     hasSelfPercent,
@@ -119,7 +119,7 @@ const CheckboxGroup = forwardRef<
     extendObject(
       {
         ref: nodeRef,
-        style: extendObject(normalStyle, layoutStyle)
+        style: extendObject({}, normalStyle, layoutStyle)
       },
       layoutProps
     ),

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx
@@ -102,11 +102,12 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined
 
     const defaultStyle = extendObject(
+      {},
       styles.wrapper,
-      disabled ? styles.wrapperDisabled : {}
+      disabled ? styles.wrapperDisabled : null
     )
 
-    const styleObj = extendObject(styles.container, style)
+    const styleObj = extendObject({}, styles.container, style)
 
     const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
       if (disabled) return
@@ -137,7 +138,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     const nodeRef = useRef(null)
 
     useNodesRef(props, ref, nodeRef, {
-      style: extendObject(defaultStyle, normalStyle),
+      style: extendObject({}, defaultStyle, normalStyle),
       change: onChange
     })
 
@@ -165,7 +166,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       extendObject(
         {
           ref: nodeRef,
-          style: extendObject(innerStyle, layoutStyle)
+          style: extendObject({}, innerStyle, layoutStyle)
         },
         layoutProps,
         {

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx
@@ -60,7 +60,7 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef })
 
   const innerProps = useInnerProps(props, extendObject({
-    style: extendObject(innerStyle, layoutStyle),
+    style: extendObject({}, innerStyle, layoutStyle),
     ref: formRef
   }, layoutProps)
   , [

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx
@@ -63,7 +63,7 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
 
     const defaultStyle = { width: ~~size, height: ~~size }
 
-    const styleObj = extendObject(defaultStyle, style)
+    const styleObj = extendObject({}, defaultStyle, style)
 
     const {
       hasSelfPercent,
@@ -83,7 +83,7 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
         {
           ref: nodeRef,
           source: { uri },
-          style: extendObject(normalStyle, layoutStyle, { tintColor: color })
+          style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
         },
         layoutProps
       ),

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx
@@ -113,6 +113,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   }
 
   const styleObj = extendObject(
+    {},
     defaultStyle,
     style,
     { overflow: 'hidden' }
@@ -339,6 +340,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
       {
         ref: nodeRef,
         style: extendObject(
+          {},
           normalStyle,
           layoutStyle,
           isHeightFixMode ? { width: fixedWidth } : {},

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx
@@ -396,7 +396,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     extendObject(
       {
         ref: nodeRef,
-        style: extendObject(normalStyle, layoutStyle)
+        style: extendObject({}, normalStyle, layoutStyle)
       },
       layoutProps,
       {

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx
@@ -42,7 +42,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       flexDirection: 'row'
     }
 
-    const styleObj = extendObject(defaultStyle, style)
+    const styleObj = extendObject({}, defaultStyle, style)
 
     const {
       hasSelfPercent,
@@ -79,7 +79,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       extendObject(
         {
           ref: nodeRef,
-          style: extendObject(innerStyle, layoutStyle)
+          style: extendObject({}, innerStyle, layoutStyle)
         },
         layoutProps,
         {

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view.tsx
@@ -138,6 +138,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     extendObject({
       ref: nodeRef,
       style: extendObject(
+        {},
         normalStyle,
         layoutStyle,
         {
@@ -155,6 +156,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     const extraProps = {}
     const childProps = child?.props || {}
     const wrappedProps = extendObject(
+      {},
       childProps,
       {
         columnData,

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx
@@ -67,7 +67,7 @@ const radioGroup = forwardRef<
     flexWrap: 'wrap'
   }
 
-  const styleObj = extendObject(defaultStyle, style)
+  const styleObj = extendObject({}, defaultStyle, style)
 
   const {
     hasSelfPercent,
@@ -144,7 +144,7 @@ const radioGroup = forwardRef<
     extendObject(
       {
         ref: nodeRef,
-        style: extendObject(normalStyle, layoutStyle)
+        style: extendObject({}, normalStyle, layoutStyle)
       },
       layoutProps
     ),

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx
@@ -90,12 +90,13 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
     const labelContext = useContext(LabelContext)
 
     const defaultStyle = extendObject(
+      {},
       styles.wrapper,
       isChecked ? styles.wrapperChecked : {},
       disabled ? styles.wrapperDisabled : {}
     )
 
-    const styleObj = extendObject(styles.container, style)
+    const styleObj = extendObject({}, styles.container, style)
 
     const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
       if (disabled || isChecked) return
@@ -132,7 +133,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
 
     const nodeRef = useRef(null)
     useNodesRef(props, ref, nodeRef, {
-      style: extendObject(defaultStyle, normalStyle),
+      style: extendObject({}, defaultStyle, normalStyle),
       change: onChange
     })
 
@@ -152,7 +153,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       extendObject(
         {
           ref: nodeRef,
-          style: extendObject(innerStyle, layoutStyle)
+          style: extendObject({}, innerStyle, layoutStyle)
         },
         layoutProps,
         {

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
@@ -299,7 +299,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     const visibleLength = selectLength(e.nativeEvent.layoutMeasurement)
     const contentLength = selectLength(e.nativeEvent.contentSize)
     const offset = selectOffset(e.nativeEvent.contentOffset)
-    scrollOptions.current = extendObject(scrollOptions.current, {
+    extendObject(scrollOptions.current, {
       contentLength,
       offset,
       scrollLeft: position.scrollLeft,
@@ -428,7 +428,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   const scrollAdditionalProps: ScrollAdditionalProps = extendObject(
     {
-      style: extendObject(innerStyle, layoutStyle),
+      style: extendObject({}, innerStyle, layoutStyle),
       pinchGestureEnabled: false,
       horizontal: scrollX && !scrollY,
       scrollEventThrottle: scrollEventThrottle,

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx
@@ -122,7 +122,7 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
 
   const innerProps = useInnerProps(props, extendObject({
     ref: nodeRef,
-    style: extendObject(normalStyle, layoutStyle)
+    style: extendObject({}, normalStyle, layoutStyle)
   },
   layoutProps,
   !disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {})

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -236,7 +236,7 @@ function backgroundPosition (imageProps: ImageProps, preImageInfo: PreImageInfo,
     }
   }
 
-  imageProps.style = extendObject(imageProps.style, style)
+  extendObject(imageProps.style, style)
 }
 
 // background-size 转换
@@ -289,7 +289,7 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
   }
 
   // 样式合并
-  imageProps.style = extendObject(imageProps.style, dimensions)
+  extendObject(imageProps.style, dimensions)
 }
 
 // background-image转换为source
@@ -475,7 +475,7 @@ function parseLinearGradient (text: string): LinearInfo | undefined {
       return prev
     }, { colors: [], locations: [] })
 
-  return extendObject(linearInfo, {
+  return extendObject({}, linearInfo, {
     direction: direction.trim()
   })
 }
@@ -685,17 +685,16 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   const [isHover, setIsHover] = useState(false)
 
   // 默认样式
-  const defaultStyle: ExtendedViewStyle = extendObject(
-    style.display === 'flex'
-      ? {
-          flexDirection: 'row',
-          flexBasis: 'auto',
-          flexShrink: 1,
-          flexWrap: 'nowrap'
-        }
-      : {})
+  const defaultStyle: ExtendedViewStyle = style.display === 'flex'
+    ? {
+        flexDirection: 'row',
+        flexBasis: 'auto',
+        flexShrink: 1,
+        flexWrap: 'nowrap'
+      }
+    : {}
 
-  const styleObj: ExtendedViewStyle = extendObject(defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {})
+  const styleObj: ExtendedViewStyle = extendObject({}, defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {})
 
   const {
     normalStyle,
@@ -770,7 +769,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     layoutProps
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
-  const viewStyle = extendObject(innerStyle, layoutStyle)
+  const viewStyle = extendObject({}, innerStyle, layoutStyle)
 
   enableAnimation = enableAnimation || !!animation
   const enableAnimationRef = useRef(enableAnimation)