@mpxjs/webpack-plugin 2.10.22 → 2.10.24-test.1

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

@@ -23,11 +23,11 @@ import {
   ImageLoadEventData,
   ImageSourcePropType
 } from 'react-native'
-import { noop } from '@mpxjs/utils'
+import { hasOwn, noop } from '@mpxjs/utils'
 import { LocalSvg, SvgCssUri } from 'react-native-svg/css'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils'
+import { svgRegExp, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils'
 import Portal from './mpx-portal'
 
 export type Mode =
@@ -52,7 +52,6 @@ export interface ImageProps {
   style?: ImageStyle & Record<string, any>
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
@@ -72,26 +71,46 @@ interface ImageState {
 
 const DEFAULT_IMAGE_WIDTH = 320
 const DEFAULT_IMAGE_HEIGHT = 240
-const cropMode: Mode[] = [
-  'top',
-  'bottom',
-  'center',
-  'right',
-  'left',
-  'top left',
-  'top right',
-  'bottom left',
-  'bottom right'
-]
-
-const ModeMap = new Map<Mode, ImageResizeMode | undefined>([
-  ['scaleToFill', 'stretch'],
-  ['aspectFit', 'contain'],
-  ['aspectFill', 'cover'],
-  ['widthFix', 'stretch'],
-  ['heightFix', 'stretch'],
-  ...cropMode.map<[Mode, ImageResizeMode]>(mode => [mode, 'stretch'])
-])
+const cropModeMap: Record<string, boolean> = {
+  top: true,
+  bottom: true,
+  center: true,
+  right: true,
+  left: true,
+  'top left': true,
+  'top right': true,
+  'bottom left': true,
+  'bottom right': true
+}
+
+const modeResizeMap: Record<string, ImageResizeMode> = {
+  scaleToFill: 'stretch',
+  aspectFit: 'contain',
+  aspectFill: 'cover',
+  widthFix: 'stretch',
+  heightFix: 'stretch',
+  top: 'stretch',
+  bottom: 'stretch',
+  center: 'stretch',
+  right: 'stretch',
+  left: 'stretch',
+  'top left': 'stretch',
+  'top right': 'stretch',
+  'bottom left': 'stretch',
+  'bottom right': 'stretch'
+}
+
+const DEFAULT_IMAGE_STYLE: ImageStyle = {
+  width: DEFAULT_IMAGE_WIDTH,
+  height: DEFAULT_IMAGE_HEIGHT
+}
+const OVERFLOW_HIDDEN_STYLE = { overflow: 'hidden' as const }
+const SVG_TRANSFORM_ORIGIN_STYLE = { transformOrigin: 'left top' as const }
+const BASE_IMAGE_FILL_STYLE: ImageStyle = {
+  transformOrigin: 'left top',
+  width: '100%',
+  height: '100%'
+}
 
 const isNumber = (value: DimensionValue): value is number => typeof value === 'number'
 
@@ -109,7 +128,7 @@ function getImageUri (src: string | ImageSourcePropType) {
 
 function isSvgSource (src: string | ImageSourcePropType) {
   const uri = getImageUri(src)
-  return SVG_REGEXP.test(uri)
+  return svgRegExp.test(uri)
 }
 
 function getImageSize (src: string | ImageSourcePropType, success: (width: number, height: number) => void, fail: () => void = noop) {
@@ -158,7 +177,6 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     mode = 'scaleToFill',
     style = {},
     'enable-var': enableVar,
-    'external-var-context': externalVarContext,
     'parent-font-size': parentFontSize,
     'enable-fast-image': enableFastImage,
     'parent-width': parentWidth,
@@ -168,29 +186,17 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     binderror
   } = props
 
-  const defaultStyle = {
-    width: DEFAULT_IMAGE_WIDTH,
-    height: DEFAULT_IMAGE_HEIGHT
-  }
-
-  const styleObj = extendObject(
-    {},
-    defaultStyle,
-    style,
-    { overflow: 'hidden' }
-  )
+  const styleObj = extendObject({}, style, OVERFLOW_HIDDEN_STYLE)
 
   const nodeRef = useRef(null)
-  useNodesRef(props, ref, nodeRef, {
-    defaultStyle
-  })
 
-  const isSvg = isSvgProp || isSvgSource(src)
+  const isSvg = useMemo(() => isSvgProp || isSvgSource(src), [isSvgProp, src])
+  const imageSource = useMemo(() => normalizeImageSource(src), [src])
   const isWidthFixMode = mode === 'widthFix'
   const isHeightFixMode = mode === 'heightFix'
-  const isCropMode = cropMode.includes(mode)
+  const isCropMode = hasOwn(cropModeMap, mode)
   const isLayoutMode = isWidthFixMode || isHeightFixMode || isCropMode
-  const resizeMode: ImageResizeMode = ModeMap.get(mode) || 'stretch'
+  const resizeMode: ImageResizeMode = hasOwn(modeResizeMap, mode) ? modeResizeMap[mode] : 'stretch'
 
   const onLayout = ({ nativeEvent: { layout: { width, height } } }: LayoutChangeEvent) => {
     state.current.viewWidth = width
@@ -217,7 +223,12 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     normalStyle,
     setWidth,
     setHeight
-  } = useTransformStyle(styleObj, { enableVar, transformRadiusPercent: isAndroid && !isSvg && !isLayoutMode, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(styleObj, { enableVar, transformRadiusPercent: isAndroid && !isSvg && !isLayoutMode, parentFontSize, parentWidth, parentHeight, defaultStyle: DEFAULT_IMAGE_STYLE })
+
+  // normalStyle 已合入 DEFAULT_IMAGE_STYLE，对外暴露完整 style（含 default 兜底的 width/height）
+  useNodesRef(props, ref, nodeRef, {
+    style: normalStyle
+  })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({
     props,
@@ -225,7 +236,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     setWidth,
     setHeight,
     nodeRef,
-    onLayout: isLayoutMode ? onLayout : noop
+    onLayout: isLayoutMode ? onLayout : undefined
   })
 
   const { width, height } = normalStyle
@@ -504,7 +515,8 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     const svgProps = {
       onLayout: onSvgLoad,
       style: extendObject(
-        { transformOrigin: 'left top' },
+        {},
+        SVG_TRANSFORM_ORIGIN_STYLE,
         modeStyle
       )
     }
@@ -518,21 +530,20 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   }
 
   function renderBaseImage () {
+    const baseImageStyle = isCropMode
+      ? extendObject(
+        { transformOrigin: 'left top', width: imageWidth, height: imageHeight },
+        modeStyle
+      )
+      : BASE_IMAGE_FILL_STYLE
     return renderImage(
       extendObject(
         {
-          source: normalizeImageSource(src),
+          source: imageSource,
           resizeMode: resizeMode,
           onLoad: bindload && onImageLoad,
           onError: binderror && onImageError,
-          style: extendObject(
-            {
-              transformOrigin: 'left top',
-              width: isCropMode ? imageWidth : '100%',
-              height: isCropMode ? imageHeight : '100%'
-            },
-            isCropMode ? modeStyle : {}
-          )
+          style: baseImageStyle
         },
         isLayoutMode ? {} : innerProps
       ),

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

@@ -97,7 +97,6 @@ export interface InputProps {
   'placeholder-style'?: { color?: string }
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
@@ -148,7 +147,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     'selection-start': selectionStart = -1,
     'selection-end': selectionEnd = -1,
     'enable-var': enableVar,
-    'external-var-context': externalVarContext,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
@@ -212,7 +210,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     normalStyle,
     setWidth,
     setHeight
-  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(styleObj, { enableVar, parentFontSize, parentWidth, parentHeight })
 
   const nodeRef = useRef(null)
   useNodesRef(props, ref, nodeRef, {

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

@@ -6,7 +6,7 @@ import { View, ViewStyle, NativeSyntheticEvent } from 'react-native'
 import { noop, warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThroughValue } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThrough } from './utils'
 import { LabelContext, LabelContextValue } from './context'
 import Portal from './mpx-portal'
 
@@ -15,7 +15,7 @@ export interface LabelProps {
   style?: ViewStyle & Record<string, any>
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
+  'enable-text-pass-through'?: boolean
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
@@ -31,7 +31,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
     const {
       style = {},
       'enable-var': enableVar,
-      'external-var-context': externalVarContext,
+      'enable-text-pass-through': enableTextPassThrough,
       'parent-font-size': parentFontSize,
       'parent-width': parentWidth,
       'parent-height': parentHeight
@@ -43,8 +43,6 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       flexDirection: 'row'
     }
 
-    const styleObj = extendObject({}, defaultStyle, style)
-
     const {
       hasPositionFixed,
       hasSelfPercent,
@@ -53,7 +51,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       varContextRef,
       setWidth,
       setHeight
-    } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+    } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight, defaultStyle })
 
     const nodeRef = useRef(null)
     useNodesRef(props, ref, nodeRef, { style: normalStyle })
@@ -61,7 +59,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
     const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
-    const textPassThrough = useTextPassThroughValue(textStyle, textProps)
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough })
 
     if (backgroundStyle) {
       warn('Label does not support background image-related styles!')
@@ -100,7 +98,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       LabelContext.Provider,
       { value: contextRef },
       wrapChildren(
-        props,
+        props.children,
         {
           hasVarDec,
           varContext: varContextRef.current,

package/lib/runtime/components/react/mpx-movable-area.tsx

@@ -17,14 +17,13 @@ interface MovableAreaProps {
   height?: number
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
 }
 
 const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaProps>((props: MovableAreaProps, ref): JSX.Element => {
-  const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
+  const { style = {}, 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
 
   const {
     hasSelfPercent,
@@ -34,7 +33,7 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     hasPositionFixed,
     setWidth,
     setHeight
-  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight })
 
   const movableViewRef = useRef(null)
   useNodesRef(props, ref, movableViewRef, {
@@ -66,7 +65,7 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     View,
     innerProps,
     wrapChildren(
-      props,
+      props.children,
       {
         hasVarDec,
         varContext: varContextRef.current

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

@@ -22,7 +22,7 @@ import { StyleSheet, View, LayoutChangeEvent } from 'react-native'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { MovableAreaContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback, useTextPassThroughValue } from './utils'
+import { useTransformStyle, splitProps, splitStyle, hiddenStyle, wrapChildren, GestureHandler, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback, useTextPassThrough } from './utils'
 import { GestureDetector, Gesture, GestureTouchEvent, GestureStateChangeEvent, PanGestureHandlerEventPayload, PanGesture } from 'react-native-gesture-handler'
 import Animated, {
   useSharedValue,
@@ -179,7 +179,7 @@ interface MovableViewProps {
   'simultaneous-handlers'?: Array<GestureHandler>
   inertia?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
+  'enable-text-pass-through'?: boolean
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
@@ -213,7 +213,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     friction = 2,
     'out-of-bounds': outOfBounds = false,
     'enable-var': enableVar,
-    'external-var-context': externalVarContext,
+    'enable-text-pass-through': enableTextPassThrough,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
@@ -243,7 +243,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     varContextRef,
     setWidth,
     setHeight
-  } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, parentFontSize, parentWidth, parentHeight })
 
   const navigation = useNavigation()
 
@@ -251,7 +251,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   const prevWaitForHandlersRef = useRef<Array<GestureHandler>>(waitFor || [])
   const gestureSwitch = useRef(false)
   const { textStyle, innerStyle } = splitStyle(normalStyle)
-  const textPassThrough = useTextPassThroughValue(textStyle, textProps)
+  const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough })
 
   const offsetX = useSharedValue(x)
   const offsetY = useSharedValue(y)
@@ -719,7 +719,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     return handlers
   }
 
-  const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {}
+  const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? hiddenStyle : {}
 
   // bind 相关 touch 事件直接由 gesture 触发，无须重复挂载
   // catch 相关 touch 事件需要重写并通过 useInnerProps 注入阻止冒泡逻辑
@@ -769,7 +769,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     Animated.View,
     innerProps,
     wrapChildren(
-      props,
+      props.children,
       {
         hasVarDec,
         varContext: varContextRef.current,

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

@@ -9,7 +9,7 @@ import {
   wrapChildren,
   useTransformStyle,
   extendObject,
-  useTextPassThroughValue
+  useTextPassThrough
 } from '../utils'
 import { PickerViewStyleContext } from './pickerVIewContext'
 import Portal from '../mpx-portal'
@@ -38,7 +38,7 @@ interface PickerViewProps {
   'indicator-style'?: Record<string, any>,
   'mask-style'?: Record<string, any>,
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>,
+  'enable-text-pass-through'?: boolean
   'enable-offset'?: boolean
 }
 
@@ -75,7 +75,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     'indicator-style': indicatorStyle = {},
     'mask-style': pickerMaskStyle = {},
     'enable-var': enableVar,
-    'external-var-context': externalVarContext
+    'enable-text-pass-through': enableTextPassThrough
   } = props
   const { height: indicatorH, ...pickerIndicatorStyle } = indicatorStyle
   const nodeRef = useRef(null)
@@ -92,7 +92,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     setWidth,
     setHeight,
     hasPositionFixed
-  } = useTransformStyle(style, { enableVar, externalVarContext })
+  } = useTransformStyle(style, { enableVar })
 
   useNodesRef<View, PickerViewProps>(props, ref, nodeRef, {
     style: normalStyle
@@ -105,7 +105,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef })
   const { textProps } = splitProps(props)
   const { textStyle } = splitStyle(normalStyle)
-  const textPassThrough = useTextPassThroughValue(textStyle, textProps)
+  const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough })
 
   const onSelectChange = (columnIndex: number, selectedIndex: number) => {
     const activeValue = activeValueRef.current
@@ -189,9 +189,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     )
     const realElement = React.cloneElement(child, wrappedProps)
     return wrapChildren(
-      {
-        children: realElement
-      },
+      realElement,
       {
         hasVarDec,
         varContext: varContextRef.current,

package/lib/runtime/components/react/mpx-picker-view-column/index.tsx

@@ -19,7 +19,6 @@ interface ColumnProps {
     [key: string]: any
   }
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
   wrapperStyle: {
     height: number
     itemHeight: number
@@ -42,8 +41,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     pickerMaskStyle,
     pickerIndicatorStyle,
     enableWheelAnimation = true,
-    'enable-var': enableVar,
-    'external-var-context': externalVarContext
+    'enable-var': enableVar
   } = props
 
   const {
@@ -51,7 +49,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     hasSelfPercent,
     setWidth,
     setHeight
-  } = useTransformStyle(style, { enableVar, externalVarContext })
+  } = useTransformStyle(style, { enableVar })
   const { textStyle = {} } = splitStyle(normalStyle)
   const { textProps = {} } = splitProps(props)
   const scrollViewRef = useAnimatedRef<Reanimated.ScrollView>()

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

@@ -51,7 +51,6 @@ export interface ProgressProps {
   style?: ViewStyle & Record<string, any>
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
@@ -72,7 +71,6 @@ const Progress = forwardRef<
     duration = 30,
     style = {},
     'enable-var': enableVar,
-    'external-var-context': externalVarContext,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight
@@ -94,7 +92,6 @@ const Progress = forwardRef<
     hasPositionFixed
   } = useTransformStyle(style, {
     enableVar,
-    externalVarContext,
     parentFontSize,
     parentWidth,
     parentHeight

package/lib/runtime/components/react/mpx-radio-group.tsx

@@ -29,7 +29,6 @@ export interface RadioGroupProps {
   style?: ViewStyle & Record<string, any>
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
@@ -44,7 +43,6 @@ const radioGroup = forwardRef<
   const {
     style = {},
     'enable-var': enableVar,
-    'external-var-context': externalVarContext,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight
@@ -69,8 +67,6 @@ const radioGroup = forwardRef<
     flexWrap: 'wrap'
   }
 
-  const styleObj = extendObject({}, defaultStyle, style)
-
   const {
     hasPositionFixed,
     hasSelfPercent,
@@ -79,7 +75,7 @@ const radioGroup = forwardRef<
     varContextRef,
     setWidth,
     setHeight
-  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight, defaultStyle })
 
   const nodeRef = useRef(null)
   useNodesRef(props, ref, nodeRef, { style: normalStyle })
@@ -168,7 +164,7 @@ const radioGroup = forwardRef<
         value: contextValue
       },
       wrapChildren(
-        props,
+        props.children,
         {
           hasVarDec,
           varContext: varContextRef.current

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

@@ -10,7 +10,7 @@ import { warn } from '@mpxjs/utils'
 import { LabelContext, RadioGroupContext } from './context'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThroughValue } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThrough } from './utils'
 import Icon from './mpx-icon'
 import Portal from './mpx-portal'
 
@@ -22,7 +22,7 @@ export interface RadioProps {
   style?: ViewStyle & Record<string, any>
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
+  'enable-text-pass-through'?: boolean
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
@@ -75,7 +75,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       color = '#09BB07',
       style = [],
       'enable-var': enableVar,
-      'external-var-context': externalVarContext,
+      'enable-text-pass-through': enableTextPassThrough,
       'parent-font-size': parentFontSize,
       'parent-width': parentWidth,
       'parent-height': parentHeight,
@@ -90,15 +90,13 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
 
     const labelContext = useContext(LabelContext)
 
-    const defaultStyle = extendObject(
+    const wrapperStyle = extendObject(
       {},
       styles.wrapper,
       isChecked ? styles.wrapperChecked : {},
       disabled ? styles.wrapperDisabled : {}
     )
 
-    const styleObj = extendObject({}, styles.container, style)
-
     const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
       if (disabled || isChecked) return
       setIsChecked(!isChecked)
@@ -125,10 +123,10 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       varContextRef,
       setWidth,
       setHeight
-    } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+    } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight, defaultStyle: styles.container })
 
     const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
-    const textPassThrough = useTextPassThroughValue(textStyle, textProps)
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough })
 
     if (backgroundStyle) {
       warn('Radio does not support background image-related styles!')
@@ -136,7 +134,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
 
     const nodeRef = useRef(null)
     useNodesRef(props, ref, nodeRef, {
-      style: extendObject({}, defaultStyle, normalStyle),
+      style: normalStyle,
       change: onChange
     })
 
@@ -199,7 +197,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
     const finalComponent = createElement(View, innerProps,
       createElement(
         View,
-        { style: defaultStyle },
+        { style: wrapperStyle },
         createElement(Icon, {
           type: 'success',
           size: 24,
@@ -208,7 +206,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
         })
       ),
       wrapChildren(
-        props,
+        props.children,
         {
           hasVarDec,
           varContext: varContextRef.current,

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

@@ -23,7 +23,6 @@ interface _RichTextProps extends ViewProps {
   style?: ViewStyle
   nodes: string | Array<Node>
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
@@ -57,7 +56,6 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
     style = {},
     nodes,
     'enable-var': enableVar,
-    'external-var-context': externalVarContext,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight
@@ -77,7 +75,6 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
     height: webViewHeight
   }, style), {
     enableVar,
-    externalVarContext,
     parentFontSize,
     parentWidth,
     parentHeight