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

package/lib/react/index.js

@@ -23,6 +23,7 @@ module.exports = function ({
   usingComponentsInfo,
   originalUsingComponents,
   componentGenerics,
+  componentPlaceholder,
   autoScope,
   callback
 }) {
@@ -55,7 +56,8 @@ module.exports = function ({
             ctorType,
             usingComponentsInfo,
             originalUsingComponents,
-            componentGenerics
+            componentGenerics,
+            componentPlaceholder
           }, callback)
         },
         (callback) => {

package/lib/react/processTemplate.js

@@ -32,7 +32,8 @@ module.exports = function (template, {
   ctorType,
   usingComponentsInfo,
   originalUsingComponents,
-  componentGenerics
+  componentGenerics,
+  componentPlaceholder
 }, callback) {
   const mpx = loaderContext.getMpx()
   const {
@@ -103,6 +104,7 @@ module.exports = function (template, {
         i18n: null,
         // 与 template-compiler/index 一致：usingComponentsInfo 已合并 globalComponentsInfo，此处白名单避免对仅 app 注册的组件误报「未使用」
         globalComponents: Object.keys(globalComponents || {}),
+        componentPlaceholder,
         // rn模式下实现抽象组件
         componentGenerics,
         hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules),

package/lib/react/style-helper.js

@@ -5,21 +5,21 @@ const getRulesRunner = require('../platform/index')
 const createDiagnostic = require('../platform/create-diagnostic')
 const dash2hump = require('../utils/hump-dash').dash2hump
 const parseValues = require('../utils/string').parseValues
-const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh|px)?\s*$/
+const unitRegExp = /^\s*(-?(?:\d+(?:\.\d+)?|\.\d+))(rpx|vw|vh|px)?\s*$/
 const hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
 function getClassMap ({ content, styles, filename, inputFileSystem, mode, srcMode, ctorType, formatValueName, warn, error }) {
   const classMap = ctorType === 'page'
-      ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1, height: "'100%'" } }
-      : {}
+    ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1, height: "'100%'" } }
+    : {}
 
   styles = styles && styles.length
     ? styles
     : [{
-        content,
-        filename
-      }]
+      content,
+      filename
+    }]
 
   function formatValue (value) {
     let needStringify = true

package/lib/runtime/components/react/animationHooks/index.ts

@@ -4,14 +4,13 @@ import useAnimationAPIHooks from './useAnimationAPIHooks'
 import useTransitionHooks from './useTransitionHooks'
 import type { AnimatableValue } from 'react-native-reanimated'
 import type { MutableRefObject } from 'react'
-import type { NativeSyntheticEvent } from 'react-native'
 import type { _ViewProps } from '../mpx-view'
 
 // 动画类型
 export type AnimationType = 'api'|'animation'|'transition'|'none'
 
-export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean | AnimationType, layoutRef: MutableRefObject<any>, transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void }) {
-  const { style: originalStyle = {}, enableAnimation, animation, transitionend, layoutRef } = props
+export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean | AnimationType, layoutRef: MutableRefObject<any> }) {
+  const { style: originalStyle = {}, enableAnimation, animation, catchtransitionend, bindtransitionend, layoutRef } = props
   // 记录动画类型
   let animationType = ''
   if (hasOwn(originalStyle, 'animation') || (hasOwn(originalStyle, 'animationName') && hasOwn(originalStyle, 'animationDuration'))) {
@@ -42,6 +41,11 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
   if (!animationTypeRef.current) return { enableStyleAnimation: false }
 
   const hooksProps = { style: originalStyle }
+  const transitionend = typeof catchtransitionend === 'function'
+    ? catchtransitionend
+    : typeof bindtransitionend === 'function'
+      ? bindtransitionend
+      : undefined
   if (transitionend && typeof transitionend === 'function') {
     function withTimingCallback (finished?: boolean, current?: AnimatableValue, duration?: number) {
       const target = {

package/lib/runtime/components/react/dist/animationHooks/index.d.ts

@@ -1,11 +1,9 @@
 import type { MutableRefObject } from 'react';
-import type { NativeSyntheticEvent } from 'react-native';
 import type { _ViewProps } from '../mpx-view';
 export type AnimationType = 'api' | 'animation' | 'transition' | 'none';
 export default function useAnimationHooks<T, P>(props: _ViewProps & {
     enableAnimation?: boolean | AnimationType;
     layoutRef: MutableRefObject<any>;
-    transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
 }): {
     enableStyleAnimation: boolean;
     animationStyle?: undefined;

package/lib/runtime/components/react/dist/animationHooks/index.js

@@ -3,7 +3,7 @@ import { useRef } from 'react';
 import useAnimationAPIHooks from './useAnimationAPIHooks';
 import useTransitionHooks from './useTransitionHooks';
 export default function useAnimationHooks(props) {
-    const { style: originalStyle = {}, enableAnimation, animation, transitionend, layoutRef } = props;
+    const { style: originalStyle = {}, enableAnimation, animation, catchtransitionend, bindtransitionend, layoutRef } = props;
     // 记录动画类型
     let animationType = '';
     if (hasOwn(originalStyle, 'animation') || (hasOwn(originalStyle, 'animationName') && hasOwn(originalStyle, 'animationDuration'))) {
@@ -34,6 +34,11 @@ export default function useAnimationHooks(props) {
     if (!animationTypeRef.current)
         return { enableStyleAnimation: false };
     const hooksProps = { style: originalStyle };
+    const transitionend = typeof catchtransitionend === 'function'
+        ? catchtransitionend
+        : typeof bindtransitionend === 'function'
+            ? bindtransitionend
+            : undefined;
     if (transitionend && typeof transitionend === 'function') {
         function withTimingCallback(finished, current, duration) {
             const target = {

package/lib/runtime/components/react/dist/event.config.d.ts

@@ -1,7 +1,3 @@
-declare const eventConfigMap: {
-    [key: string]: {
-        bitFlag: string;
-        events: string[];
-    };
-};
+import type { EventMeta } from './types/getInnerListeners';
+declare const eventConfigMap: Record<string, EventMeta>;
 export default eventConfigMap;

package/lib/runtime/components/react/dist/event.config.js

@@ -1,27 +1,31 @@
+const tapEvents = ['onTouchStart', 'onTouchMove', 'onTouchEnd'];
+const longpressEvents = ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'];
+const tapCaptureEvents = ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'];
+const longpressCaptureEvents = ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'];
 const eventConfigMap = {
-    bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
-    bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
-    bindtouchstart: { bitFlag: '2', events: ['onTouchStart'] },
-    bindtouchmove: { bitFlag: '3', events: ['onTouchMove'] },
-    bindtouchend: { bitFlag: '4', events: ['onTouchEnd'] },
-    bindtouchcancel: { bitFlag: '5', events: ['onTouchCancel'] },
-    catchtap: { bitFlag: '6', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
-    catchlongpress: { bitFlag: '7', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
-    catchtouchstart: { bitFlag: '8', events: ['onTouchStart'] },
-    catchtouchmove: { bitFlag: '9', events: ['onTouchMove'] },
-    catchtouchend: { bitFlag: 'a', events: ['onTouchEnd'] },
-    catchtouchcancel: { bitFlag: 'b', events: ['onTouchCancel'] },
-    'capture-bindtap': { bitFlag: 'c', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
-    'capture-bindlongpress': { bitFlag: 'd', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
-    'capture-bindtouchstart': { bitFlag: 'e', events: ['onTouchStartCapture'] },
-    'capture-bindtouchmove': { bitFlag: 'f', events: ['onTouchMoveCapture'] },
-    'capture-bindtouchend': { bitFlag: 'g', events: ['onTouchEndCapture'] },
-    'capture-bindtouchcancel': { bitFlag: 'h', events: ['onTouchCancelCapture'] },
-    'capture-catchtap': { bitFlag: 'i', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
-    'capture-catchlongpress': { bitFlag: 'j', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
-    'capture-catchtouchstart': { bitFlag: 'k', events: ['onTouchStartCapture'] },
-    'capture-catchtouchmove': { bitFlag: 'l', events: ['onTouchMoveCapture'] },
-    'capture-catchtouchend': { bitFlag: 'm', events: ['onTouchEndCapture'] },
-    'capture-catchtouchcancel': { bitFlag: 'n', events: ['onTouchCancelCapture'] }
+    bindtap: { bitFlag: '0', events: tapEvents, eventName: 'tap', eventType: 'bubble', hasCatch: false },
+    bindlongpress: { bitFlag: '1', events: longpressEvents, eventName: 'longpress', eventType: 'bubble', hasCatch: false },
+    bindtouchstart: { bitFlag: '2', events: ['onTouchStart'], eventName: 'touchstart', eventType: 'bubble', hasCatch: false },
+    bindtouchmove: { bitFlag: '3', events: ['onTouchMove'], eventName: 'touchmove', eventType: 'bubble', hasCatch: false },
+    bindtouchend: { bitFlag: '4', events: ['onTouchEnd'], eventName: 'touchend', eventType: 'bubble', hasCatch: false },
+    bindtouchcancel: { bitFlag: '5', events: ['onTouchCancel'], eventName: 'touchcancel', eventType: 'bubble', hasCatch: false },
+    catchtap: { bitFlag: '6', events: tapEvents, eventName: 'tap', eventType: 'bubble', hasCatch: true },
+    catchlongpress: { bitFlag: '7', events: longpressEvents, eventName: 'longpress', eventType: 'bubble', hasCatch: true },
+    catchtouchstart: { bitFlag: '8', events: ['onTouchStart'], eventName: 'touchstart', eventType: 'bubble', hasCatch: true },
+    catchtouchmove: { bitFlag: '9', events: ['onTouchMove'], eventName: 'touchmove', eventType: 'bubble', hasCatch: true },
+    catchtouchend: { bitFlag: 'a', events: ['onTouchEnd'], eventName: 'touchend', eventType: 'bubble', hasCatch: true },
+    catchtouchcancel: { bitFlag: 'b', events: ['onTouchCancel'], eventName: 'touchcancel', eventType: 'bubble', hasCatch: true },
+    'capture-bindtap': { bitFlag: 'c', events: tapCaptureEvents, eventName: 'tap', eventType: 'capture', hasCatch: false },
+    'capture-bindlongpress': { bitFlag: 'd', events: longpressCaptureEvents, eventName: 'longpress', eventType: 'capture', hasCatch: false },
+    'capture-bindtouchstart': { bitFlag: 'e', events: ['onTouchStartCapture'], eventName: 'touchstart', eventType: 'capture', hasCatch: false },
+    'capture-bindtouchmove': { bitFlag: 'f', events: ['onTouchMoveCapture'], eventName: 'touchmove', eventType: 'capture', hasCatch: false },
+    'capture-bindtouchend': { bitFlag: 'g', events: ['onTouchEndCapture'], eventName: 'touchend', eventType: 'capture', hasCatch: false },
+    'capture-bindtouchcancel': { bitFlag: 'h', events: ['onTouchCancelCapture'], eventName: 'touchcancel', eventType: 'capture', hasCatch: false },
+    'capture-catchtap': { bitFlag: 'i', events: tapCaptureEvents, eventName: 'tap', eventType: 'capture', hasCatch: true },
+    'capture-catchlongpress': { bitFlag: 'j', events: longpressCaptureEvents, eventName: 'longpress', eventType: 'capture', hasCatch: true },
+    'capture-catchtouchstart': { bitFlag: 'k', events: ['onTouchStartCapture'], eventName: 'touchstart', eventType: 'capture', hasCatch: true },
+    'capture-catchtouchmove': { bitFlag: 'l', events: ['onTouchMoveCapture'], eventName: 'touchmove', eventType: 'capture', hasCatch: true },
+    'capture-catchtouchend': { bitFlag: 'm', events: ['onTouchEndCapture'], eventName: 'touchend', eventType: 'capture', hasCatch: true },
+    'capture-catchtouchcancel': { bitFlag: 'n', events: ['onTouchCancelCapture'], eventName: 'touchcancel', eventType: 'capture', hasCatch: true }
 };
 export default eventConfigMap;

package/lib/runtime/components/react/dist/getInnerListeners.d.ts

@@ -3,5 +3,5 @@ export declare const getCustomEvent: (type: string | undefined, oe: any, { detai
     detail?: Record<string, unknown> | undefined;
     layoutRef?: LayoutRef | undefined;
 }, props?: Props) => any;
-declare const useInnerProps: (props?: Props, userRemoveProps?: RemoveProps, rawConfig?: RawConfig) => Record<string, (e: ExtendedNativeTouchEvent) => void> & Omit<Props, string>;
+declare const useInnerProps: (props?: Props, userRemoveProps?: RemoveProps, rawConfig?: RawConfig) => Record<string, (e: ExtendedNativeTouchEvent) => void> & Props;
 export default useInnerProps;

package/lib/runtime/components/react/dist/getInnerListeners.js

@@ -1,11 +1,22 @@
 import { useRef, useMemo } from 'react';
 import { collectDataset } from '@mpxjs/utils';
-import { omit, extendObject, useNavigation } from './utils';
+import { extendObject, useNavigation } from './utils';
 import eventConfigMap from './event.config';
 const globalEventState = {
     needPress: true,
     identifier: null
 };
+const baseRemovePropsMap = {
+    children: true,
+    'enable-background': true,
+    'enable-offset': true,
+    'enable-var': true,
+    'external-var-context': true,
+    'parent-font-size': true,
+    'parent-width': true,
+    'parent-height': true,
+    'enable-text-pass-through': true
+};
 const getTouchEvent = (type, event, config) => {
     const { navigation, propsRef, layoutRef } = config;
     const props = propsRef.current;
@@ -162,26 +173,44 @@ function handleTouchcancel(e, type, eventConfig) {
     handleEmitEvent('touchcancel', e, type, eventConfig);
     innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
 }
-function createTouchEventHandler(eventName, eventConfig) {
+const touchHandlerMap = {
+    onTouchStart: {
+        type: 'bubble',
+        handler: handleTouchstart
+    },
+    onTouchMove: {
+        type: 'bubble',
+        handler: handleTouchmove
+    },
+    onTouchEnd: {
+        type: 'bubble',
+        handler: handleTouchend
+    },
+    onTouchCancel: {
+        type: 'bubble',
+        handler: handleTouchcancel
+    },
+    onTouchStartCapture: {
+        type: 'capture',
+        handler: handleTouchstart
+    },
+    onTouchMoveCapture: {
+        type: 'capture',
+        handler: handleTouchmove
+    },
+    onTouchEndCapture: {
+        type: 'capture',
+        handler: handleTouchend
+    },
+    onTouchCancelCapture: {
+        type: 'capture',
+        handler: handleTouchcancel
+    }
+};
+function createTouchEventHandler(eventName, eventConfigRef) {
+    const eventHandler = touchHandlerMap[eventName];
     return (e) => {
-        const bubbleHandlerMap = {
-            onTouchStart: handleTouchstart,
-            onTouchMove: handleTouchmove,
-            onTouchEnd: handleTouchend,
-            onTouchCancel: handleTouchcancel
-        };
-        const captureHandlerMap = {
-            onTouchStartCapture: handleTouchstart,
-            onTouchMoveCapture: handleTouchmove,
-            onTouchEndCapture: handleTouchend,
-            onTouchCancelCapture: handleTouchcancel
-        };
-        if (bubbleHandlerMap[eventName]) {
-            bubbleHandlerMap[eventName](e, 'bubble', eventConfig);
-        }
-        if (captureHandlerMap[eventName]) {
-            captureHandlerMap[eventName](e, 'capture', eventConfig);
-        }
+        eventHandler.handler(e, eventHandler.type, eventConfigRef.current);
     };
 }
 const useInnerProps = (props = {}, userRemoveProps = [], rawConfig) => {
@@ -209,58 +238,47 @@ const useInnerProps = (props = {}, userRemoveProps = [], rawConfig) => {
         disableTap: false,
         navigation
     }, rawConfig);
+    const eventConfigRef = useRef(eventConfig);
+    const restProps = {};
+    const eventNameMap = {};
+    const userRemovePropsMap = {};
     let hashEventKey = '';
-    const rawEventKeys = [];
-    const transformedEventSet = new Set();
+    userRemoveProps.forEach((key) => {
+        userRemovePropsMap[key] = true;
+    });
     Object.keys(props).forEach((key) => {
-        if (eventConfigMap[key]) {
-            hashEventKey += eventConfigMap[key].bitFlag;
-            rawEventKeys.push(key);
-            eventConfigMap[key].events.forEach((event) => {
-                transformedEventSet.add(event);
+        const eventMeta = eventConfigMap[key];
+        if (eventMeta) {
+            hashEventKey += eventMeta.bitFlag;
+            eventMeta.events.forEach((event) => {
+                eventNameMap[event] = true;
             });
-            const match = /^(bind|catch|capture-bind|capture-catch)(.*)$/.exec(key);
-            const prefix = match[1];
-            const eventName = match[2];
-            eventConfig[eventName] = eventConfig[eventName] || {
+            eventConfig[eventMeta.eventName] = eventConfig[eventMeta.eventName] || {
                 bubble: [],
                 capture: [],
                 hasCatch: false
             };
-            if (prefix === 'bind' || prefix === 'catch') {
-                eventConfig[eventName].bubble.push(key);
-            }
-            else {
-                eventConfig[eventName].capture.push(key);
-            }
-            if (prefix === 'catch' || prefix === 'capture-catch') {
-                eventConfig[eventName].hasCatch = true;
+            eventConfig[eventMeta.eventName][eventMeta.eventType].push(key);
+            if (eventMeta.hasCatch) {
+                eventConfig[eventMeta.eventName].hasCatch = true;
             }
+            return;
+        }
+        if (!baseRemovePropsMap[key] && !userRemovePropsMap[key]) {
+            restProps[key] = props[key];
         }
     });
+    eventConfigRef.current = eventConfig;
     const events = useMemo(() => {
         if (!hashEventKey) {
             return {};
         }
         const events = {};
-        for (const eventName of transformedEventSet) {
-            events[eventName] = createTouchEventHandler(eventName, eventConfig);
-        }
+        Object.keys(eventNameMap).forEach((eventName) => {
+            events[eventName] = createTouchEventHandler(eventName, eventConfigRef);
+        });
         return events;
     }, [hashEventKey]);
-    const removeProps = [
-        'children',
-        'enable-background',
-        'enable-offset',
-        'enable-var',
-        'external-var-context',
-        'parent-font-size',
-        'parent-width',
-        'parent-height',
-        'enable-text-pass-through',
-        ...userRemoveProps,
-        ...rawEventKeys
-    ];
-    return extendObject({}, events, omit(props, removeProps));
+    return extendObject({}, events, restProps);
 };
 export default useInnerProps;

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

@@ -55,7 +55,7 @@ export interface ButtonProps {
     'form-type'?: 'submit' | 'reset';
     '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-button.jsx

@@ -36,9 +36,9 @@
  */
 import { createElement, useEffect, useRef, forwardRef, useContext } from 'react';
 import { View, StyleSheet, Animated, Easing, useAnimatedValue } from 'react-native';
-import { warn } from '@mpxjs/utils';
+import { warn, hasOwn } from '@mpxjs/utils';
 import { GestureDetector } from 'react-native-gesture-handler';
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover, useTextPassThroughValue } from './utils';
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover, useTextPassThrough } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { RouteContext, FormContext } from './context';
@@ -55,14 +55,14 @@ const OpenTypeEventsMap = new Map([
 ]);
 const styles = StyleSheet.create({
     button: {
-        width: '100%',
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
         height: 46,
         borderRadius: 5,
         backgroundColor: '#F8F8F8',
-        marginHorizontal: 'auto' // 按钮默认居中
+        marginHorizontal: 'auto',
+        paddingHorizontal: 14
     },
     buttonMini: {
         height: 30
@@ -130,7 +130,7 @@ const Loading = ({ alone = false }) => {
 };
 const Button = forwardRef((buttonProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(buttonProps);
-    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap } = props;
+    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap } = props;
     const { pageId } = useContext(RouteContext) || {};
     const formContext = useContext(FormContext);
     const enableHover = hoverClass !== 'none';
@@ -166,14 +166,21 @@ const Button = forwardRef((buttonProps, ref) => {
     };
     const defaultViewStyle = extendObject({}, styles.button, isMiniSize ? styles.buttonMini : null, viewStyle);
     const defaultTextStyle = extendObject({}, styles.text, isMiniSize ? styles.textMini : {}, { color: plain ? plainTextColor : normalTextColor });
+    const styleObj = isHover ? extendObject({}, style, hoverStyle) : style;
     const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle);
-    const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    // 用户 shorthand 优先：避免 longhand default 反向覆盖
+    if (hasOwn(styleObj, 'margin')) {
+        delete defaultStyle.marginHorizontal;
+    }
+    if (hasOwn(styleObj, 'padding')) {
+        delete defaultStyle.paddingHorizontal;
+    }
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { 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('Button does not support background image-related styles!');
     }
@@ -259,7 +266,7 @@ const Button = forwardRef((buttonProps, ref) => {
         layoutRef,
         disableTap: disabled
     });
-    const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }), wrapChildren(props, {
+    const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }), wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current,
         textPassThrough

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

@@ -22,7 +22,6 @@ interface CameraProps {
     'parent-width'?: number;
     'parent-height'?: number;
     'enable-var'?: boolean;
-    'external-var-context'?: any;
 }
 type HandlerRef<T, P> = {
     current: T | null;

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

@@ -15,11 +15,10 @@ let RecordRes = null;
 const _camera = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     const cameraRef = useRef(null);
-    const { mode = 'normal', resolution = 'medium', 'device-position': devicePosition = 'back', flash = 'auto', 'frame-size': frameSize = 'medium', bindinitdone, bindstop, bindscancode, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'enable-var': enableVar, 'external-var-context': externalVarContext, style = {} } = props;
+    const { mode = 'normal', resolution = 'medium', 'device-position': devicePosition = 'back', flash = 'auto', 'frame-size': frameSize = 'medium', bindinitdone, bindstop, bindscancode, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'enable-var': enableVar, style = {} } = props;
     const styleObj = extendObject({}, style);
     const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, {
         enableVar,
-        externalVarContext,
         parentFontSize,
         parentWidth,
         parentHeight

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

@@ -20,7 +20,6 @@ interface CanvasProps {
     'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
-    'external-var-context'?: Record<string, any>;
     bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
     bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
     bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;

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

@@ -39,12 +39,11 @@ const stylesheet = StyleSheet.create({
     }
 });
 const _Canvas = forwardRef((props = {}, ref) => {
-    const { style = {}, originWhitelist = ['*'], 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, originWhitelist = ['*'], 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const [isLoaded, setIsLoaded] = useState(false);
     const nodeRef = useRef(null);
     const { normalStyle, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(extendObject({}, style, stylesheet.container), {
         enableVar,
-        externalVarContext,
         parentFontSize,
         parentWidth,
         parentHeight

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

@@ -30,7 +30,7 @@ export interface WebviewMessage {
     };
 }
 export interface CanvasInstance {
-    webview: WebView | null;
+    webview: WebView<any> | null;
     bus: Bus | null;
     context2D: CanvasRenderingContext2D;
     getContext: (contextType: string) => CanvasRenderingContext2D | null;

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

@@ -9,7 +9,6 @@ export interface CheckboxGroupProps {
     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-checkbox-group.jsx

@@ -12,7 +12,7 @@ import Portal from './mpx-portal';
 const CheckboxGroup = forwardRef((props, ref) => {
     const propsRef = useRef({});
     propsRef.current = props;
-    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 formContext = useContext(FormContext);
     let formValuesMap;
     if (formContext) {
@@ -23,8 +23,7 @@ const CheckboxGroup = 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 CheckboxGroup = forwardRef((props, ref) => {
             notifyChange
         };
     }, []);
-    const finalComponent = createElement(View, innerProps, createElement(CheckboxGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
+    const finalComponent = createElement(View, innerProps, createElement(CheckboxGroupContext.Provider, { value: contextValue }, wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current
     })));

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

@@ -18,7 +18,7 @@ export interface CheckboxProps extends Selection {
     groupValue?: Array<string>;
     '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-checkbox.jsx

@@ -10,7 +10,7 @@ import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import Icon from './mpx-icon';
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThroughValue } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThrough } from './utils';
 import { CheckboxGroupContext, LabelContext } from './context';
 import Portal from './mpx-portal';
 const styles = StyleSheet.create({
@@ -41,13 +41,12 @@ const styles = StyleSheet.create({
 });
 const Checkbox = forwardRef((checkboxProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(checkboxProps);
-    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, _onChange } = 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, _onChange } = props;
     const [isChecked, setIsChecked] = useState(!!checked);
     const groupContext = useContext(CheckboxGroupContext);
     let groupValue;
     let notifyChange;
-    const defaultStyle = extendObject({}, styles.wrapper, disabled ? styles.wrapperDisabled : null);
-    const styleObj = extendObject({}, styles.container, style);
+    const wrapperStyle = extendObject({}, styles.wrapper, disabled ? styles.wrapperDisabled : null);
     const onChange = (evt) => {
         if (disabled)
             return;
@@ -64,15 +63,15 @@ const Checkbox = forwardRef((checkboxProps, 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 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 });
     const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
-    const textPassThrough = useTextPassThroughValue(textStyle, textProps);
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
     if (backgroundStyle) {
         warn('Checkbox does not support background image-related styles!');
     }
@@ -118,12 +117,12 @@ const Checkbox = forwardRef((checkboxProps, 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_no_circle',
         size: 18,
         color: disabled ? '#ADADAD' : color,
         style: isChecked ? styles.iconChecked : styles.icon
-    })), wrapChildren(props, {
+    })), wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current,
         textPassThrough