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

package/lib/runtime/components/react/dist/mpx-form.d.ts

@@ -12,7 +12,7 @@ interface FormProps {
     children?: ReactNode;
     '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;

package/lib/runtime/components/react/dist/mpx-form.jsx

@@ -9,13 +9,13 @@ import { useRef, forwardRef, useMemo, createElement } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import { FormContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject, useTextPassThroughValue } from './utils';
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject, useTextPassThrough } from './utils';
 const _Form = forwardRef((fromProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(fromProps);
-    const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { style, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
-    const textPassThrough = useTextPassThroughValue(textStyle, textProps);
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
     const formRef = useRef(null);
     useNodesRef(props, ref, formRef, {
         style: normalStyle
@@ -58,7 +58,7 @@ const _Form = forwardRef((fromProps, ref) => {
             reset
         };
     }, []);
-    return createElement(View, innerProps, createElement(FormContext.Provider, { value: contextValue }, wrapChildren(props, {
+    return createElement(View, innerProps, createElement(FormContext.Provider, { value: contextValue }, wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current,
         textPassThrough

package/lib/runtime/components/react/dist/mpx-icon/index.d.ts

@@ -9,7 +9,6 @@ export interface IconProps {
     style?: TextStyle & 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;

package/lib/runtime/components/react/dist/mpx-icon/index.jsx

@@ -30,11 +30,11 @@ const IconTypeMap = new Map([
     ['clear', Clear]
 ]);
 const Icon = forwardRef((props, ref) => {
-    const { type, size = 23, color, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { type, size = 23, color, style = {}, 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const source = IconTypeMap.get(type);
     const defaultStyle = { width: ~~size, height: ~~size };
     const styleObj = extendObject({}, defaultStyle, style);
-    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });

package/lib/runtime/components/react/dist/mpx-image.d.ts

@@ -8,7 +8,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;

package/lib/runtime/components/react/dist/mpx-image.jsx

@@ -12,33 +12,52 @@
  */
 import { useEffect, useMemo, useState, useRef, forwardRef, createElement } from 'react';
 import { Image as RNImage, View } 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 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';
 const DEFAULT_IMAGE_WIDTH = 320;
 const DEFAULT_IMAGE_HEIGHT = 240;
-const cropMode = [
-    'top',
-    'bottom',
-    'center',
-    'right',
-    'left',
-    'top left',
-    'top right',
-    'bottom left',
-    'bottom right'
-];
-const ModeMap = new Map([
-    ['scaleToFill', 'stretch'],
-    ['aspectFit', 'contain'],
-    ['aspectFill', 'cover'],
-    ['widthFix', 'stretch'],
-    ['heightFix', 'stretch'],
-    ...cropMode.map(mode => [mode, 'stretch'])
-]);
+const cropModeMap = {
+    top: true,
+    bottom: true,
+    center: true,
+    right: true,
+    left: true,
+    'top left': true,
+    'top right': true,
+    'bottom left': true,
+    'bottom right': true
+};
+const modeResizeMap = {
+    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 = {
+    width: DEFAULT_IMAGE_WIDTH,
+    height: DEFAULT_IMAGE_HEIGHT
+};
+const OVERFLOW_HIDDEN_STYLE = { overflow: 'hidden' };
+const SVG_TRANSFORM_ORIGIN_STYLE = { transformOrigin: 'left top' };
+const BASE_IMAGE_FILL_STYLE = {
+    transformOrigin: 'left top',
+    width: '100%',
+    height: '100%'
+};
 const isNumber = (value) => typeof value === 'number';
 const relativeCenteredSize = (viewSize, imageSize) => {
     return (viewSize - imageSize) / 2;
@@ -51,7 +70,7 @@ function getImageUri(src) {
 }
 function isSvgSource(src) {
     const uri = getImageUri(src);
-    return SVG_REGEXP.test(uri);
+    return svgRegExp.test(uri);
 }
 function getImageSize(src, success, fail = noop) {
     if (typeof src === 'string') {
@@ -92,22 +111,16 @@ const getFixedHeight = (viewWidth, viewHeight, ratio) => {
     return !fixed ? viewHeight : fixed;
 };
 const Image = forwardRef((props, ref) => {
-    const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, 'is-svg': isSvgProp, bindload, binderror } = props;
-    const defaultStyle = {
-        width: DEFAULT_IMAGE_WIDTH,
-        height: DEFAULT_IMAGE_HEIGHT
-    };
-    const styleObj = extendObject({}, defaultStyle, style, { overflow: 'hidden' });
+    const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, 'is-svg': isSvgProp, bindload, binderror } = props;
+    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 = ModeMap.get(mode) || 'stretch';
+    const resizeMode = hasOwn(modeResizeMap, mode) ? modeResizeMap[mode] : 'stretch';
     const onLayout = ({ nativeEvent: { layout: { width, height } } }) => {
         state.current.viewWidth = width;
         state.current.viewHeight = height;
@@ -127,14 +140,18 @@ const Image = forwardRef((props, ref) => {
             setLoaded(true);
         }
     };
-    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, transformRadiusPercent: isAndroid && !isSvg && !isLayoutMode, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = 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,
         hasSelfPercent,
         setWidth,
         setHeight,
         nodeRef,
-        onLayout: isLayoutMode ? onLayout : noop
+        onLayout: isLayoutMode ? onLayout : undefined
     });
     const { width, height } = normalStyle;
     const [viewWidth, setViewWidth] = useState(isNumber(width) ? width : 0);
@@ -350,23 +367,22 @@ const Image = forwardRef((props, ref) => {
     function renderSvgImage() {
         const svgProps = {
             onLayout: onSvgLoad,
-            style: extendObject({ transformOrigin: 'left top' }, modeStyle)
+            style: extendObject({}, SVG_TRANSFORM_ORIGIN_STYLE, modeStyle)
         };
         return createElement(View, innerProps, typeof src === 'string'
             ? createElement(SvgCssUri, extendObject({ uri: src, onError: binderror && onSvgError }, svgProps))
             : createElement(LocalSvg, extendObject({ asset: src }, svgProps)));
     }
     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), enableFastImage);
     }
     function renderLayoutImage() {

package/lib/runtime/components/react/dist/mpx-input.d.ts

@@ -27,7 +27,6 @@ export interface InputProps {
     };
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
     'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;

package/lib/runtime/components/react/dist/mpx-input.jsx

@@ -52,7 +52,7 @@ const inputModeMap = {
     digit: 'decimal'
 };
 const Input = forwardRef((props, ref) => {
-    const { style = {}, allowFontScaling, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, '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, 'adjust-position': adjustPosition = true, 'keyboard-type': originalKeyboardType, 'hold-keyboard': holdKeyboard = false, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    const { style = {}, allowFontScaling, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, 'keyboard-type': originalKeyboardType, 'hold-keyboard': holdKeyboard = false, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
     multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);
@@ -84,7 +84,7 @@ const Input = forwardRef((props, ref) => {
     const [contentHeight, setContentHeight] = useState(0);
     const [selection, setSelection] = useState({ start: -1, end: tmpValue.current.length });
     const styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight ? { height: 'auto' } : {});
-    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle

package/lib/runtime/components/react/dist/mpx-label.d.ts

@@ -9,7 +9,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;

package/lib/runtime/components/react/dist/mpx-label.jsx

@@ -6,24 +6,23 @@ import { View } from 'react-native';
 import { noop, warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThroughValue } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThrough } from './utils';
 import { LabelContext } from './context';
 import Portal from './mpx-portal';
 const Label = forwardRef((labelProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(labelProps);
     const propsRef = useRef({});
-    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, 'enable-text-pass-through': enableTextPassThrough, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     propsRef.current = props;
     const defaultStyle = {
         flexDirection: 'row'
     };
-    const styleObj = extendObject({}, defaultStyle, style);
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight, defaultStyle });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     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!');
     }
@@ -44,7 +43,7 @@ const Label = forwardRef((labelProps, ref) => {
     ], {
         layoutRef
     });
-    const finalComponent = createElement(View, innerProps, createElement(LabelContext.Provider, { value: contextRef }, wrapChildren(props, {
+    const finalComponent = createElement(View, innerProps, createElement(LabelContext.Provider, { value: contextRef }, wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current,
         textPassThrough

package/lib/runtime/components/react/dist/mpx-movable-area.d.ts

@@ -11,7 +11,6 @@ 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;

package/lib/runtime/components/react/dist/mpx-movable-area.jsx

@@ -9,8 +9,8 @@ import { MovableAreaContext } from './context';
 import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
 import Portal from './mpx-portal';
 const _MovableArea = forwardRef((props, ref) => {
-    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { style = {}, 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight });
     const movableViewRef = useRef(null);
     useNodesRef(props, ref, movableViewRef, {
         style: normalStyle
@@ -24,7 +24,7 @@ const _MovableArea = forwardRef((props, ref) => {
         style: extendObject({ height: contextValue.height, width: contextValue.width }, normalStyle, layoutStyle),
         ref: movableViewRef
     }), [], { layoutRef });
-    let movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
+    let movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current
     })));

package/lib/runtime/components/react/dist/mpx-movable-view.d.ts

@@ -55,7 +55,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;

package/lib/runtime/components/react/dist/mpx-movable-view.jsx

@@ -22,7 +22,7 @@ import { StyleSheet } from 'react-native';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback, useTextPassThroughValue } from './utils';
+import { useTransformStyle, splitProps, splitStyle, hiddenStyle, wrapChildren, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback, useTextPassThrough } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, runOnJS, runOnUI, withTiming, Easing } from 'react-native-reanimated';
 import { collectDataset, noop } from '@mpxjs/utils';
@@ -129,14 +129,14 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const hasLayoutRef = useRef(false);
     const propsRef = useRef({});
     propsRef.current = (props || {});
-    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, damping = 20, friction = 2, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'disable-event-passthrough': disableEventPassthrough = false, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, damping = 20, friction = 2, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'disable-event-passthrough': disableEventPassthrough = false, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, parentFontSize, parentWidth, parentHeight });
     const navigation = useNavigation();
     const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
     const prevWaitForHandlersRef = useRef(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);
     const startPosition = useSharedValue({
@@ -564,7 +564,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         });
         return handlers;
     };
-    const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {};
+    const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? hiddenStyle : {};
     // bind 相关 touch 事件直接由 gesture 触发，无须重复挂载
     // catch 相关 touch 事件需要重写并通过 useInnerProps 注入阻止冒泡逻辑
     const filterProps = omit(props, [
@@ -599,7 +599,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         'changeThrottleTime',
         'bindchange'
     ]);
-    return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, innerProps, wrapChildren(props, {
+    return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, innerProps, wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current,
         textPassThrough

package/lib/runtime/components/react/dist/mpx-picker-view/index.d.ts

@@ -25,7 +25,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;
 }
 declare const _PickerView: React.ForwardRefExoticComponent<PickerViewProps & React.RefAttributes<HandlerRef<View, PickerViewProps>>>;

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

@@ -2,7 +2,7 @@ import { View } from 'react-native';
 import React, { createElement, forwardRef, useRef } from 'react';
 import useInnerProps, { getCustomEvent } from '../getInnerListeners';
 import useNodesRef from '../useNodesRef';
-import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject, useTextPassThroughValue } from '../utils';
+import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject, useTextPassThrough } from '../utils';
 import { PickerViewStyleContext } from './pickerVIewContext';
 import Portal from '../mpx-portal';
 const styles = {
@@ -17,21 +17,21 @@ const styles = {
 };
 const DefaultPickerItemH = 36;
 const _PickerView = forwardRef((props, ref) => {
-    const { children, value = [], bindchange, style, 'enable-wheel-animation': enableWheelAnimation = true, 'indicator-style': indicatorStyle = {}, 'mask-style': pickerMaskStyle = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
+    const { children, value = [], bindchange, style, 'enable-wheel-animation': enableWheelAnimation = true, 'indicator-style': indicatorStyle = {}, 'mask-style': pickerMaskStyle = {}, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough } = props;
     const { height: indicatorH, ...pickerIndicatorStyle } = indicatorStyle;
     const nodeRef = useRef(null);
     const cloneRef = useRef(null);
     const activeValueRef = useRef(value);
     activeValueRef.current = value.slice();
     const snapActiveValueRef = useRef(null);
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, { enableVar, externalVarContext });
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, { enableVar });
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
     });
     const { layoutRef, layoutProps, layoutStyle } = 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, selectedIndex) => {
         const activeValue = activeValueRef.current;
         activeValue[columnIndex] = selectedIndex;
@@ -83,9 +83,7 @@ const _PickerView = forwardRef((props, ref) => {
             enableWheelAnimation
         });
         const realElement = React.cloneElement(child, wrappedProps);
-        return wrapChildren({
-            children: realElement
-        }, {
+        return wrapChildren(realElement, {
             hasVarDec,
             varContext: varContextRef.current,
             textPassThrough

package/lib/runtime/components/react/dist/mpx-picker-view-column/index.d.ts

@@ -10,7 +10,6 @@ interface ColumnProps {
         [key: string]: any;
     };
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
     wrapperStyle: {
         height: number;
         itemHeight: number;

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

@@ -11,8 +11,8 @@ import { PickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewC
 import { calcHeightOffsets } from './pickerViewFaces';
 const visibleCount = 5;
 const _PickerViewColumn = forwardRef((props, ref) => {
-    const { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle, enableWheelAnimation = true, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
+    const { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle, enableWheelAnimation = true, 'enable-var': enableVar } = props;
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar });
     const { textStyle = {} } = splitStyle(normalStyle);
     const { textProps = {} } = splitProps(props);
     const scrollViewRef = useAnimatedRef();

package/lib/runtime/components/react/dist/mpx-progress.d.ts

@@ -14,7 +14,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;

package/lib/runtime/components/react/dist/mpx-progress.jsx

@@ -20,7 +20,7 @@ import useNodesRef from './useNodesRef';
 import { useLayout, useTransformStyle, extendObject, useRunOnJSCallback } from './utils';
 import Portal from './mpx-portal';
 const Progress = forwardRef((props, ref) => {
-    const { percent = 0, 'stroke-width': strokeWidth = 6, color, activeColor = color || '#09BB07', backgroundColor = '#EBEBEB', active = false, 'active-mode': activeMode = 'backwards', duration = 30, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { percent = 0, 'stroke-width': strokeWidth = 6, color, activeColor = color || '#09BB07', backgroundColor = '#EBEBEB', active = false, 'active-mode': activeMode = 'backwards', duration = 30, style = {}, 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const nodeRef = useRef(null);
     const propsRef = useRef(props);
     propsRef.current = props;
@@ -29,7 +29,6 @@ const Progress = forwardRef((props, ref) => {
     const progressWidth = useSharedValue(0);
     const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, {
         enableVar,
-        externalVarContext,
         parentFontSize,
         parentWidth,
         parentHeight

package/lib/runtime/components/react/dist/mpx-radio-group.d.ts

@@ -9,7 +9,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;

package/lib/runtime/components/react/dist/mpx-radio-group.jsx

@@ -10,7 +10,7 @@ import useNodesRef from './useNodesRef';
 import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 import Portal from './mpx-portal';
 const radioGroup = forwardRef((props, ref) => {
-    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 propsRef = useRef({});
     propsRef.current = props;
     const formContext = useContext(FormContext);
@@ -23,8 +23,7 @@ const radioGroup = forwardRef((props, ref) => {
         flexDirection: 'row',
         flexWrap: 'wrap'
     };
-    const styleObj = extendObject({}, defaultStyle, style);
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight, defaultStyle });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
@@ -83,7 +82,7 @@ const radioGroup = forwardRef((props, ref) => {
     });
     const finalComponent = createElement(View, innerProps, createElement(RadioGroupContext.Provider, {
         value: contextValue
-    }, wrapChildren(props, {
+    }, wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current
     })));

package/lib/runtime/components/react/dist/mpx-radio.d.ts

@@ -15,7 +15,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;

package/lib/runtime/components/react/dist/mpx-radio.jsx

@@ -10,7 +10,7 @@ import { warn } from '@mpxjs/utils';
 import { LabelContext, RadioGroupContext } from './context';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef 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';
 const styles = StyleSheet.create({
@@ -48,14 +48,13 @@ const styles = StyleSheet.create({
 });
 const Radio = forwardRef((radioProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(radioProps);
-    const { value = '', disabled = false, checked = false, color = '#09BB07', style = [], 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap } = props;
+    const { value = '', disabled = false, checked = false, color = '#09BB07', style = [], 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap } = props;
     const [isChecked, setIsChecked] = useState(!!checked);
     const groupContext = useContext(RadioGroupContext);
     let groupValue;
     let notifyChange;
     const labelContext = useContext(LabelContext);
-    const defaultStyle = extendObject({}, styles.wrapper, isChecked ? styles.wrapperChecked : {}, disabled ? styles.wrapperDisabled : {});
-    const styleObj = extendObject({}, styles.container, style);
+    const wrapperStyle = extendObject({}, styles.wrapper, isChecked ? styles.wrapperChecked : {}, disabled ? styles.wrapperDisabled : {});
     const onChange = (evt) => {
         if (disabled || isChecked)
             return;
@@ -74,15 +73,15 @@ const Radio = forwardRef((radioProps, ref) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
         onChange(evt);
     };
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = 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!');
     }
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
-        style: extendObject({}, defaultStyle, normalStyle),
+        style: normalStyle,
         change: onChange
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
@@ -126,12 +125,12 @@ const Radio = forwardRef((radioProps, ref) => {
             }
         }
     }, [checked]);
-    const finalComponent = createElement(View, innerProps, createElement(View, { style: defaultStyle }, createElement(Icon, {
+    const finalComponent = createElement(View, innerProps, createElement(View, { style: wrapperStyle }, createElement(Icon, {
         type: 'success',
         size: 24,
         color: disabled ? '#E1E1E1' : color,
         style: extendObject({}, styles.icon, isChecked && styles.iconChecked, disabled && styles.iconDisabled)
-    })), wrapChildren(props, {
+    })), wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current,
         textPassThrough