@mpxjs/webpack-plugin 2.10.4 → 2.10.5

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

@@ -42,71 +42,71 @@ import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, ext
 import { IntersectionObserverContext, ScrollViewContext } from './context'
 
 interface ScrollViewProps {
-  children?: ReactNode;
-  enhanced?: boolean;
-  bounces?: boolean;
-  style?: ViewStyle;
-  scrollEventThrottle?: number;
-  'scroll-x'?: boolean;
-  'scroll-y'?: boolean;
-  'enable-back-to-top'?: boolean;
-  'show-scrollbar'?: boolean;
-  'paging-enabled'?: boolean;
-  'upper-threshold'?: number;
-  'lower-threshold'?: number;
-  'scroll-with-animation'?: boolean;
-  'refresher-triggered'?: boolean;
-  'refresher-enabled'?: boolean;
-  'refresher-default-style'?: 'black' | 'white' | 'none';
-  'refresher-background'?: string;
-  'refresher-threshold'?: number;
-  'scroll-top'?: number;
-  'scroll-left'?: number;
-  'enable-offset'?: boolean;
-  'scroll-into-view'?: string;
-  'enable-trigger-intersection-observer'?: boolean;
-  'enable-var'?: boolean;
-  'external-var-context'?: Record<string, any>;
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
-  'wait-for'?: Array<GestureHandler>;
-  'simultaneous-handlers'?: Array<GestureHandler>;
-  'scroll-event-throttle'?:number;
-  bindscrolltoupper?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-  bindscrolltolower?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-  bindscroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-  bindrefresherrefresh?: (event: NativeSyntheticEvent<unknown>) => void;
-  binddragstart?: (event: NativeSyntheticEvent<DragEvent>) => void;
-  binddragging?: (event: NativeSyntheticEvent<DragEvent>) => void;
-  binddragend?: (event: NativeSyntheticEvent<DragEvent>) => void;
-  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindscrollend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  children?: ReactNode
+  enhanced?: boolean
+  bounces?: boolean
+  style?: ViewStyle
+  scrollEventThrottle?: number
+  'scroll-x'?: boolean
+  'scroll-y'?: boolean
+  'enable-back-to-top'?: boolean
+  'show-scrollbar'?: boolean
+  'paging-enabled'?: boolean
+  'upper-threshold'?: number
+  'lower-threshold'?: number
+  'scroll-with-animation'?: boolean
+  'refresher-triggered'?: boolean
+  'refresher-enabled'?: boolean
+  'refresher-default-style'?: 'black' | 'white' | 'none'
+  'refresher-background'?: string
+  'refresher-threshold'?: number
+  'scroll-top'?: number
+  'scroll-left'?: number
+  'enable-offset'?: boolean
+  'scroll-into-view'?: string
+  'enable-trigger-intersection-observer'?: boolean
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+  'wait-for'?: Array<GestureHandler>
+  'simultaneous-handlers'?: Array<GestureHandler>
+  'scroll-event-throttle'?: number
+  bindscrolltoupper?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+  bindscrolltolower?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+  bindscroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+  bindrefresherrefresh?: (event: NativeSyntheticEvent<unknown>) => void
+  binddragstart?: (event: NativeSyntheticEvent<DragEvent>) => void
+  binddragging?: (event: NativeSyntheticEvent<DragEvent>) => void
+  binddragend?: (event: NativeSyntheticEvent<DragEvent>) => void
+  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindscrollend?: (event: NativeSyntheticEvent<TouchEvent>) => void
   __selectRef?: (selector: string, nodeType: 'node' | 'component', all?: boolean) => HandlerRef<any, any>
 }
 type ScrollAdditionalProps = {
-  pinchGestureEnabled: boolean;
-  horizontal: boolean;
-  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-  onContentSizeChange: (width: number, height: number) => void;
-  onLayout?: (event: LayoutChangeEvent) => void;
-  scrollsToTop: boolean;
-  showsHorizontalScrollIndicator: boolean;
-  showsVerticalScrollIndicator: boolean;
-  scrollEnabled: boolean;
-  ref: RefObject<ScrollView>;
-  bounces?: boolean;
-  pagingEnabled?: boolean;
-  style?: ViewStyle;
-  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  onScrollBeginDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-  onScrollEndDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-  onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-};
+  pinchGestureEnabled: boolean
+  horizontal: boolean
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onContentSizeChange: (width: number, height: number) => void
+  onLayout?: (event: LayoutChangeEvent) => void
+  scrollsToTop: boolean
+  showsHorizontalScrollIndicator: boolean
+  showsVerticalScrollIndicator: boolean
+  scrollEnabled: boolean
+  ref: RefObject<ScrollView>
+  bounces?: boolean
+  pagingEnabled?: boolean
+  style?: ViewStyle
+  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  onScrollBeginDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onScrollEndDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+}
 
 const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, ScrollViewProps>((scrollViewProps: ScrollViewProps = {}, ref): JSX.Element => {
   const { textProps, innerProps: props = {} } = splitProps(scrollViewProps)
@@ -274,7 +274,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }, [refresherTriggered])
 
-  function scrollTo ({ top = 0, left = 0, animated = false } : { top?: number; left?: number; animated?: boolean }) {
+  function scrollTo ({ top = 0, left = 0, animated = false }: { top?: number; left?: number; animated?: boolean }) {
     scrollToOffset(left, top, animated)
   }
 
@@ -676,33 +676,39 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     })
   }
 
-  const innerProps = useInnerProps(props, scrollAdditionalProps, [
-    'id',
-    'scroll-x',
-    'scroll-y',
-    'enable-back-to-top',
-    'enable-trigger-intersection-observer',
-    'paging-enabled',
-    'show-scrollbar',
-    'upper-threshold',
-    'lower-threshold',
-    'scroll-top',
-    'scroll-left',
-    'scroll-with-animation',
-    'refresher-triggered',
-    'refresher-enabled',
-    'refresher-default-style',
-    'refresher-background',
-    'children',
-    'enhanced',
-    'binddragstart',
-    'binddragging',
-    'binddragend',
-    'bindscroll',
-    'bindscrolltoupper',
-    'bindscrolltolower',
-    'bindrefresherrefresh'
-  ], { layoutRef })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      scrollAdditionalProps
+    ),
+    [
+      'id',
+      'scroll-x',
+      'scroll-y',
+      'enable-back-to-top',
+      'enable-trigger-intersection-observer',
+      'paging-enabled',
+      'show-scrollbar',
+      'upper-threshold',
+      'lower-threshold',
+      'scroll-top',
+      'scroll-left',
+      'scroll-with-animation',
+      'refresher-triggered',
+      'refresher-enabled',
+      'refresher-default-style',
+      'refresher-background',
+      'children',
+      'enhanced',
+      'binddragstart',
+      'binddragging',
+      'binddragend',
+      'bindscroll',
+      'bindscrolltoupper',
+      'bindscrolltolower',
+      'bindrefresherrefresh'
+    ], { layoutRef })
 
   const withRefresherScrollView = createElement(
     GestureDetector,

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

@@ -1,6 +1,7 @@
 import { Text, TextProps } from 'react-native'
 import { JSX, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
+import { extendObject } from './utils'
 
 const SimpleText = (props: TextProps): JSX.Element => {
   const {
@@ -8,9 +9,15 @@ const SimpleText = (props: TextProps): JSX.Element => {
     children
   } = props
 
-  const innerProps = useInnerProps(props, {
-    allowFontScaling
-  }, [])
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      {
+        allowFontScaling
+      }
+    )
+  )
 
   return createElement(Text, innerProps, children)
 }

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

@@ -1,6 +1,6 @@
 import { View, ViewProps, TextStyle } from 'react-native'
 import { createElement } from 'react'
-import { splitProps, splitStyle, wrapChildren } from './utils'
+import { splitProps, splitStyle, wrapChildren, extendObject } from './utils'
 import useInnerProps from './getInnerListeners'
 
 const SimpleView = (simpleViewProps: ViewProps): JSX.Element => {
@@ -8,9 +8,15 @@ const SimpleView = (simpleViewProps: ViewProps): JSX.Element => {
 
   const { textStyle, innerStyle = {} } = splitStyle(props.style || {})
 
-  const innerProps = useInnerProps(props, {
-    style: innerStyle
-  }, [])
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      {
+        style: innerStyle
+      }
+    )
+  )
 
   return createElement(View, innerProps, wrapChildren(
     props,

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

@@ -3,28 +3,28 @@ import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-nati
 import { ReactNode, forwardRef, useRef, useContext } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils'
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject } from './utils'
 import { SwiperContext } from './context'
 
 interface SwiperItemProps {
-  'item-id'?: string;
-  'enable-offset'?: boolean;
-  'enable-var': boolean;
-  'external-var-context'?: Record<string, any>;
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
-  children?: ReactNode;
-  style?: Object;
-  customStyle: Object;
-  itemIndex: number;
+  'item-id'?: string
+  'enable-offset'?: boolean
+  'enable-var': boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+  children?: ReactNode
+  style?: Object
+  customStyle: Object
+  itemIndex: number
 }
 
 interface ContextType {
-  offset: SharedValue<number>;
-  step: SharedValue<number>;
-  scale: boolean;
-  dir: string;
+  offset: SharedValue<number>
+  step: SharedValue<number>
+  scale: boolean
+  dir: string
 }
 
 const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProps>((props: SwiperItemProps, ref) => {
@@ -64,14 +64,21 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
     layoutStyle
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef })
 
-  const innerProps = useInnerProps(props, {
-    ref: nodeRef,
-    ...layoutProps
-  }, [
-    'children',
-    'enable-offset',
-    'style'
-  ], { layoutRef })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        ref: nodeRef
+      }
+    ),
+    [
+      'children',
+      'enable-offset',
+      'style'
+    ],
+    { layoutRef })
   const itemAnimatedStyle = useAnimatedStyle(() => {
     if (!step.value) return {}
     const inputRange = [step.value, 0]

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

@@ -5,7 +5,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS
 import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useMemo } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject } from './utils'
 import { SwiperContext } from './context'
 /**
  * ✔ indicator-dots
@@ -30,32 +30,32 @@ type EventDataType = {
 }
 
 interface SwiperProps {
-  children?: ReactNode;
-  circular?: boolean;
-  current?: number;
-  interval?: number;
-  autoplay?: boolean;
+  children?: ReactNode
+  circular?: boolean
+  current?: number
+  interval?: number
+  autoplay?: boolean
   // scrollView 只有安卓可以设
-  duration?: number;
+  duration?: number
   // 滑动过程中元素是否scale变化
-  scale?: boolean;
-  'indicator-dots'?: boolean;
-  'indicator-color'?: string;
-  'indicator-active-color'?: string;
-  vertical?: boolean;
+  scale?: boolean
+  'indicator-dots'?: boolean
+  'indicator-color'?: string
+  'indicator-active-color'?: string
+  vertical?: boolean
   style: {
     [key: string]: any
-  };
-  'easing-function'?: EaseType;
-  'previous-margin'?: string;
-  'next-margin'?: string;
-  'enable-offset'?: boolean;
-  'enable-var': boolean;
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
-  'external-var-context'?: Record<string, any>;
-  bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+  }
+  'easing-function'?: EaseType
+  'previous-margin'?: string
+  'next-margin'?: string
+  'enable-offset'?: boolean
+  'enable-var': boolean
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+  'external-var-context'?: Record<string, any>
+  bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 /**
@@ -201,23 +201,29 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     layoutProps,
     layoutStyle
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout: onWrapperLayout })
-  const innerProps = useInnerProps(props, {
-    ref: nodeRef
-  }, [
-    'style',
-    'indicator-dots',
-    'indicator-color',
-    'indicator-active-color',
-    'previous-margin',
-    'vertical',
-    'previous-margin',
-    'next-margin',
-    'easing-function',
-    'autoplay',
-    'circular',
-    'interval',
-    'easing-function'
-  ], { layoutRef: layoutRef })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      {
+        ref: nodeRef
+      }
+    ),
+    [
+      'style',
+      'indicator-dots',
+      'indicator-color',
+      'indicator-active-color',
+      'previous-margin',
+      'vertical',
+      'previous-margin',
+      'next-margin',
+      'easing-function',
+      'autoplay',
+      'circular',
+      'interval',
+      'easing-function'
+    ], { layoutRef: layoutRef })
 
   function onWrapperLayout (e: LayoutChangeEvent) {
     const { width, height } = e.nativeEvent.layout
@@ -251,8 +257,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       dots.push(<View style={[dotCommonStyle, { backgroundColor: unActionColor }]} key={i}></View>)
     }
     return (
-      <View pointerEvents="none" style = {styles['pagination_' + dir]}>
-        <View style = {[styles['pagerWrapper' + dir]]}>
+      <View pointerEvents="none" style={styles['pagination_' + dir]}>
+        <View style={[styles['pagerWrapper' + dir]]}>
           <Animated.View style={[
             dotCommonStyle,
             activeDotStyle,
@@ -266,8 +272,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           ]}
           />
           {dots}
-      </View>
-    </View>)
+        </View>
+      </View>)
   }
 
   function renderItems () {
@@ -392,7 +398,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     }
   }
 
-  function getOffset (index:number, stepValue: number) {
+  function getOffset (index: number, stepValue: number) {
     if (!stepValue) return 0
     let targetOffset = 0
     if (circular && children.length > 1) {
@@ -404,7 +410,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     return targetOffset
   }
 
-  function updateCurrent (index:number, stepValue: number) {
+  function updateCurrent (index: number, stepValue: number) {
     const targetOffset = getOffset(index || 0, stepValue)
     if (targetOffset !== offset.value) {
       // 内部基于props.current!==currentIndex.value决定是否使用动画及更新currentIndex.value
@@ -712,21 +718,21 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   function renderSwiper () {
     const arrPages: Array<ReactNode> | ReactNode = renderItems()
     return (<View style={[normalStyle, layoutStyle, styles.swiper]} {...layoutProps} {...innerProps}>
-        <Animated.View style={[{
-          flexDirection: dir === 'x' ? 'row' : 'column',
-          width: '100%',
-          height: '100%'
-        }, animatedStyles]}>
-          {wrapChildren({
-            children: arrPages
-          }, {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-          })}
-        </Animated.View>
-        {showsPagination && renderPagination()}
+      <Animated.View style={[{
+        flexDirection: dir === 'x' ? 'row' : 'column',
+        width: '100%',
+        height: '100%'
+      }, animatedStyles]}>
+        {wrapChildren({
+          children: arrPages
+        }, {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
+        })}
+      </Animated.View>
+      {showsPagination && renderPagination()}
     </View>)
   }
 

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

@@ -120,20 +120,25 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     }
   }, [])
 
-  const innerProps = useInnerProps(props, extendObject({
-    ref: nodeRef,
-    style: extendObject({}, normalStyle, layoutStyle)
-  },
-  layoutProps,
-  !disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {})
-  , [
-    'checked',
-    'disabled',
-    'type',
-    'color'
-  ], {
-    layoutRef
-  })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle)
+      },
+      !disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}
+    ),
+    [
+      'checked',
+      'disabled',
+      'type',
+      'color'
+    ],
+    { layoutRef }
+  )
 
   if (type === 'checkbox') {
     return createElement(

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

@@ -8,7 +8,7 @@ import { Text, TextStyle, TextProps } from 'react-native'
 import { useRef, forwardRef, ReactNode, JSX, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { useTransformStyle, wrapChildren } from './utils'
+import { useTransformStyle, wrapChildren, extendObject } from './utils'
 
 interface _TextProps extends TextProps {
   style?: TextStyle
@@ -35,8 +35,6 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
     'parent-height': parentHeight
   } = props
 
-  const layoutRef = useRef({})
-
   const {
     normalStyle,
     hasVarDec,
@@ -54,16 +52,21 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
     style: normalStyle
   })
 
-  const innerProps = useInnerProps(props, {
-    ref: nodeRef,
-    style: normalStyle,
-    selectable: !!selectable || !!userSelect,
-    allowFontScaling
-  }, [
-    'user-select'
-  ], {
-    layoutRef
-  })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      {
+        ref: nodeRef,
+        style: normalStyle,
+        selectable: !!selectable || !!userSelect,
+        allowFontScaling
+      }
+    ),
+    [
+      'user-select'
+    ]
+  )
 
   return createElement(Text, innerProps, wrapChildren(
     props,