@mpxjs/webpack-plugin 2.9.69 → 2.9.70

package/lib/runtime/components/react/mpx-swiper/carouse.tsx

@@ -57,7 +57,7 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
     parentWidth,
     parentHeight
   } = props
-  // 计算transfrom之类的
+  // 计算transform之类的
   const {
     normalStyle,
     hasVarDec,
@@ -92,7 +92,9 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
   // 内部存储上一次的offset值
   const autoplayTimerRef = useRef<ReturnType <typeof setTimeout> | null>(null)
   const scrollViewRef = useRef<ScrollView & View>(null)
-  useNodesRef<ScrollView & View, CarouseProps>(props, ref, scrollViewRef, {})
+  useNodesRef<ScrollView & View, CarouseProps>(props, ref, scrollViewRef, {
+    style: normalStyle
+  })
   const {
     // 存储layout布局信息
     layoutRef,

package/lib/runtime/components/react/mpx-swiper-item.tsx

@@ -18,7 +18,6 @@ interface SwiperItemProps {
 
 const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProps>((props: SwiperItemProps, ref) => {
   const {
-    'enable-offset': enableOffset,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
     style
@@ -26,7 +25,6 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
 
   const { textProps } = splitProps(props)
   const nodeRef = useRef(null)
-  useNodesRef(props, ref, nodeRef, {})
 
   const {
     normalStyle,
@@ -37,6 +35,9 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext })
   const { textStyle, innerStyle } = splitStyle(normalStyle)
+  useNodesRef(props, ref, nodeRef, {
+    style: normalStyle
+  })
 
   const {
     // 存储layout布局信息

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

@@ -5,14 +5,14 @@
  * ✔ color
  */
 import { Switch, SwitchProps, ViewStyle, NativeSyntheticEvent } from 'react-native'
-import { useRef, useEffect, forwardRef, JSX, useState, useContext } from 'react'
+import { useRef, useEffect, forwardRef, JSX, useState, useContext, createElement } from 'react'
 import { warn } from '@mpxjs/utils'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 
 import CheckBox from './mpx-checkbox'
 import { FormContext, FormFieldValue } from './context'
-import { useTransformStyle, useLayout } from './utils'
+import { useTransformStyle, useLayout, extendObject } from './utils'
 
 interface _SwitchProps extends SwitchProps {
   style?: ViewStyle
@@ -42,7 +42,6 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
-
     bindchange,
     catchchange
   } = props
@@ -77,7 +76,9 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
   }, [checked])
 
   const nodeRef = useRef(null)
-  useNodesRef<Switch, _SwitchProps>(props, ref, nodeRef)
+  useNodesRef<Switch, _SwitchProps>(props, ref, nodeRef, {
+    style: normalStyle
+  })
 
   const {
     layoutRef,
@@ -119,12 +120,13 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     }
   }, [])
 
-  const innerProps = useInnerProps(props, {
+  const innerProps = useInnerProps(props, extendObject({
     ref: nodeRef,
-    style: { ...normalStyle, ...layoutStyle },
-    ...layoutProps,
-    ...!disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}
-  }, [
+    style: extendObject({}, normalStyle, layoutStyle)
+  },
+  layoutProps,
+  !disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {})
+  , [
     'checked',
     'disabled',
     'type',
@@ -134,22 +136,26 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
   })
 
   if (type === 'checkbox') {
-    return <CheckBox
-      {...innerProps}
-      color={color}
-      style={normalStyle}
-      checked={isChecked}
-    />
+    return createElement(
+      CheckBox,
+      extendObject({}, innerProps, {
+        color: color,
+        style: normalStyle,
+        checked: isChecked
+      })
+    )
   }
 
-  return <Switch
-    {...innerProps}
-    style={normalStyle}
-    value={isChecked}
-    trackColor={{ false: '#FFF', true: color }}
-    thumbColor={isChecked ? '#FFF' : '#f4f3f4'}
-    ios_backgroundColor="#FFF"
-  />
+  return createElement(
+    Switch,
+    extendObject({}, innerProps, {
+      style: normalStyle,
+      value: isChecked,
+      trackColor: { false: '#FFF', true: color },
+      thumbColor: isChecked ? '#FFF' : '#f4f3f4',
+      ios_backgroundColor: '#FFF'
+    })
+  )
 })
 
 _Switch.displayName = 'MpxSwitch'

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

@@ -5,7 +5,7 @@
  * ✘ decode
  */
 import { Text, TextStyle, TextProps } from 'react-native'
-import { useRef, forwardRef, ReactNode, JSX } from 'react'
+import { useRef, forwardRef, ReactNode, JSX, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, wrapChildren } from './utils'
@@ -25,6 +25,7 @@ interface _TextProps extends TextProps {
 const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref): JSX.Element => {
   const {
     style = {},
+    allowFontScaling = false,
     selectable,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
@@ -49,33 +50,28 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
   })
 
   const nodeRef = useRef(null)
-  useNodesRef<Text, _TextProps>(props, ref, nodeRef)
+  useNodesRef<Text, _TextProps>(props, ref, nodeRef, {
+    style: normalStyle
+  })
 
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
     style: normalStyle,
-    selectable: !!selectable || !!userSelect
+    selectable: !!selectable || !!userSelect,
+    allowFontScaling
   }, [
     'user-select'
   ], {
     layoutRef
   })
 
-  return (
-    <Text
-      {...innerProps}
-    >
-      {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current
-          }
-        )
-      }
-    </Text>
-  )
+  return createElement(Text, innerProps, wrapChildren(
+    props,
+    {
+      hasVarDec,
+      varContext: varContextRef.current
+    }
+  ))
 })
 
 _Text.displayName = 'MpxText'

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

@@ -9,10 +9,10 @@
  *     ✘ show-confirm-bar
  *     ✔ bindlinechange: No `heightRpx` info.
  */
-import { JSX, forwardRef } from 'react'
+import { JSX, forwardRef, createElement } from 'react'
 import { Keyboard, TextInput } from 'react-native'
 import Input, { InputProps, PrivateInputProps } from './mpx-input'
-import { omit } from './utils'
+import { omit, extendObject } from './utils'
 import { HandlerRef } from './useNodesRef'
 
 export type TextareProps = Omit<
@@ -29,14 +29,15 @@ const Textarea = forwardRef<HandlerRef<TextInput, TextareProps>, TextareProps>(
       'multiline',
       'confirm-hold'
     ])
-    return (
-      <Input
-        ref={ref}
-        multiline
-        confirm-type='next'
-        bindblur={() => Keyboard.dismiss()}
-        {...restProps}
-      />
+
+    return createElement(
+      Input,
+      extendObject({
+        ref: ref,
+        multiline: true,
+        confirmType: 'next',
+        bindblur: () => Keyboard.dismiss()
+      }, restProps)
     )
   }
 )

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

@@ -5,14 +5,15 @@
  * ✔ hover-stay-time
  */
 import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, StyleSheet, Image, LayoutChangeEvent } from 'react-native'
-import { useRef, useState, useEffect, forwardRef, ReactNode, JSX } from 'react'
+import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
 import Animated from 'react-native-reanimated'
 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 } from './utils'
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject } from './utils'
+import { error } from '@mpxjs/utils'
 import LinearGradient from 'react-native-linear-gradient'
 
 export interface _ViewProps extends ViewProps {
@@ -236,10 +237,7 @@ function backgroundPosition (imageProps: ImageProps, preImageInfo: PreImageInfo,
     }
   }
 
-  imageProps.style = {
-    ...imageProps.style as ImageStyle,
-    ...style
-  }
+  extendObject(imageProps.style, style)
 }
 
 // background-size 转换
@@ -292,10 +290,7 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
   }
 
   // 样式合并
-  imageProps.style = {
-    ...imageProps.style as ImageStyle,
-    ...dimensions
-  }
+  extendObject(imageProps.style, dimensions)
 }
 
 // background-image转换为source
@@ -481,10 +476,9 @@ function parseLinearGradient (text: string): LinearInfo | undefined {
       return prev
     }, { colors: [], locations: [] })
 
-  return {
-    ...linearInfo,
+  return extendObject({}, linearInfo, {
     direction: direction.trim()
-  }
+  })
 }
 
 function parseBgImage (text: string): {
@@ -557,7 +551,7 @@ function inheritStyle (innerStyle: ExtendedViewStyle = {}) {
       : undefined)
 }
 
-function wrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string, any>, enableFastImage?: boolean) {
+function useWrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string, any>, enableFastImage?: boolean) {
   // 预处理数据
   const preImageInfo: PreImageInfo = preParseImage(imageStyle)
   // 预解析
@@ -666,7 +660,8 @@ function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, tex
   })
 
   return [
-    enableBackground ? wrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    enableBackground ? useWrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
     children
   ]
 }
@@ -692,21 +687,16 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   const [isHover, setIsHover] = useState(false)
 
   // 默认样式
-  const defaultStyle: ExtendedViewStyle = {
-    // flex 布局相关的默认样式
-    ...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 = {
-    ...defaultStyle,
-    ...style,
-    ...(isHover ? hoverStyle : null)
-  }
+  const styleObj: ExtendedViewStyle = extendObject({}, defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {})
 
   const {
     normalStyle,
@@ -723,17 +713,17 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     parentHeight
   })
 
-  const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+  const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   enableBackground = enableBackground || !!backgroundStyle
   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.')
+    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, {
-    defaultStyle
+    style: normalStyle
   })
 
   const dataRef = useRef<{
@@ -781,36 +771,43 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     layoutProps
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
-  const viewStyle = Object.assign({}, innerStyle, layoutStyle)
+  const viewStyle = extendObject({}, innerStyle, layoutStyle)
 
   enableAnimation = enableAnimation || !!animation
   const enableAnimationRef = useRef(enableAnimation)
   if (enableAnimationRef.current !== enableAnimation) {
-    throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
+    error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
   }
-  const finalStyle = enableAnimation
-    ? useAnimationHooks({
-      animation,
-      style: viewStyle
-    })
-    : viewStyle
 
-  const innerProps = useInnerProps(props, {
-    ref: nodeRef,
-    style: finalStyle,
-    ...layoutProps,
-    ...(hoverStyle && {
-      bindtouchstart: onTouchStart,
-      bindtouchend: onTouchEnd
+  const finalStyle = enableAnimationRef.current
+    ? [viewStyle,
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useAnimationHooks({
+          animation,
+          style: viewStyle
+        })]
+    : viewStyle
+  const innerProps = useInnerProps(
+    props,
+    extendObject({
+      ref: nodeRef,
+      style: finalStyle
+    },
+    layoutProps,
+    hoverStyle
+      ? {
+          bindtouchstart: onTouchStart,
+          bindtouchend: onTouchEnd
+        }
+      : {}
+    ), [
+      'hover-start-time',
+      'hover-stay-time',
+      'hover-style',
+      'hover-class'
+    ], {
+      layoutRef
     })
-  }, [
-    'hover-start-time',
-    'hover-stay-time',
-    'hover-style',
-    'hover-class'
-  ], {
-    layoutRef
-  })
 
   const childNode = wrapWithChildren(props, {
     hasVarDec,
@@ -822,17 +819,10 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     innerStyle,
     enableFastImage
   })
+
   return enableAnimation
-    ? (<Animated.View
-      {...innerProps}
-    >
-      {childNode}
-    </Animated.View>)
-    : (<View
-      {...innerProps}
-    >
-      {childNode}
-    </View>)
+    ? createElement(Animated.View, innerProps, childNode)
+    : createElement(View, innerProps, childNode)
 })
 
 _View.displayName = 'MpxView'