@mpxjs/webpack-plugin 2.10.4 → 2.10.5

package/lib/platform/style/wx/index.js

@@ -184,8 +184,9 @@ module.exports = function getSpec ({ warn, error }) {
     'border-top': ['borderTopWidth', 'borderTopStyle', 'borderTopColor'],
     // 仅支持 width | style | color 这种排序
     'border-bottom': ['borderBottomWidth', 'borderBottomStyle', 'borderBottomColor'],
+    // 0.76 及以上版本RN支持 box-shadow，实测0.77版本drn红米note12pro Android12 不支持内阴影，其他表现和web一致
     // 仅支持 offset-x | offset-y | blur-radius | color 排序
-    'box-shadow': ['shadowOffset.width', 'shadowOffset.height', 'shadowRadius', 'shadowColor'],
+    // 'box-shadow': ['shadowOffset.width', 'shadowOffset.height', 'shadowRadius', 'shadowColor'],
     // 仅支持 text-decoration-line text-decoration-style text-decoration-color 这种格式
     'text-decoration': ['textDecorationLine', 'textDecorationStyle', 'textDecorationColor'],
     // flex-grow | flex-shrink | flex-basis
@@ -525,20 +526,20 @@ module.exports = function getSpec ({ warn, error }) {
     return { prop, value: values[0].trim() }
   }
 
-  const formatBoxShadow = ({ prop, value, selector }, { mode }) => {
-    value = value.trim()
-    if (value === 'none') {
-      return false
-    }
-    const cssMap = formatAbbreviation({ prop, value, selector }, { mode })
-    if (mode === 'android' || mode === 'harmony') return cssMap
-    // ios 阴影需要额外设置 shadowOpacity=1
-    cssMap.push({
-      prop: 'shadowOpacity',
-      value: 1
-    })
-    return cssMap
-  }
+  // const formatBoxShadow = ({ prop, value, selector }, { mode }) => {
+  //   value = value.trim()
+  //   if (value === 'none') {
+  //     return false
+  //   }
+  //   const cssMap = formatAbbreviation({ prop, value, selector }, { mode })
+  //   if (mode === 'android' || mode === 'harmony') return cssMap
+  //   // ios 阴影需要额外设置 shadowOpacity=1
+  //   cssMap.push({
+  //     prop: 'shadowOpacity',
+  //     value: 1
+  //   })
+  //   return cssMap
+  // }
 
   return {
     supportedModes: ['ios', 'android', 'harmony'],
@@ -579,12 +580,12 @@ module.exports = function getSpec ({ warn, error }) {
         android: formatFontFamily,
         harmony: formatFontFamily
       },
-      {
-        test: 'box-shadow',
-        ios: formatBoxShadow,
-        android: formatBoxShadow,
-        harmony: formatBoxShadow
-      },
+      // {
+      //   test: 'box-shadow',
+      //   ios: formatBoxShadow,
+      //   android: formatBoxShadow,
+      //   harmony: formatBoxShadow
+      // },
       // 通用的简写格式匹配
       {
         test: new RegExp('^(' + Object.keys(AbbreviationMap).join('|') + ')$'),

package/lib/react/processScript.js

@@ -16,6 +16,8 @@ module.exports = function (script, {
   componentGenerics,
   genericsInfo
 }, callback) {
+  const { appInfo } = loaderContext.getMpx()
+
   let scriptSrcMode = srcMode
   if (script) {
     scriptSrcMode = script.mode || scriptSrcMode
@@ -23,6 +25,12 @@ module.exports = function (script, {
     script = { tag: 'script' }
   }
 
+  let hasApp = true
+
+  if (!appInfo.name) {
+    hasApp = false
+  }
+
   let output = '/* script */\n'
   if (ctorType === 'app') {
     output += `
@@ -38,7 +46,7 @@ import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPa
       loaderContext,
       jsonConfig
     })
-    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, pagesMap, firstPage })
+    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, pagesMap, firstPage, hasApp })
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   } else {

package/lib/react/script-helper.js

@@ -90,7 +90,8 @@ function buildGlobalParams ({
   pagesMap,
   firstPage,
   outputPath,
-  genericsInfo
+  genericsInfo,
+  hasApp
 }) {
   let content = ''
   if (ctorType === 'app') {
@@ -111,6 +112,9 @@ global.currentInject.getPages = function () {
 }
 global.currentInject.firstPage = ${JSON.stringify(firstPage)}\n`
   } else {
+    if (!hasApp) {
+      content += '  global.__mpxGenericsMap = global.__mpxGenericsMap || {}\n'
+    }
     if (ctorType === 'page') {
       const pageConfig = Object.assign({}, jsonConfig)
       delete pageConfig.usingComponents

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

@@ -1,5 +1,3 @@
-export const TAP_EVENTS = ['bindtap', 'catchtap', 'capture-bindtap', 'capture-catchtap'];
-export const LONGPRESS_EVENTS = ['bindlongpress', 'catchlongpress', 'capture-bindlongpress', 'capture-catchlongpress'];
 const eventConfigMap = {
     bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
     bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },

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

@@ -1,21 +1,22 @@
 import { useRef, useMemo } from 'react';
-import { hasOwn, collectDataset } from '@mpxjs/utils';
+import { collectDataset } from '@mpxjs/utils';
 import { omit, extendObject, useNavigation } from './utils';
-import eventConfigMap, { TAP_EVENTS, LONGPRESS_EVENTS } from './event.config';
+import eventConfigMap from './event.config';
 const globalEventState = {
     needPress: true
 };
-const getTouchEvent = (type, event, props, config, navigation) => {
+const getTouchEvent = (type, event, config) => {
+    const { navigation, propsRef, layoutRef } = config;
+    const props = propsRef.current;
     const { y: navigationY = 0 } = navigation?.layout || {};
     const nativeEvent = event.nativeEvent;
     const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
     const { id } = props;
-    const { layoutRef } = config;
     const currentTarget = extendObject({}, event.currentTarget, {
         id: id || '',
         dataset: collectDataset(props),
-        offsetLeft: layoutRef?.current?.offsetLeft || 0,
-        offsetTop: layoutRef?.current?.offsetTop || 0
+        offsetLeft: layoutRef.current?.offsetLeft || 0,
+        offsetTop: layoutRef.current?.offsetTop || 0
     });
     const pendingProps = event._targetInst?.pendingProps || {};
     const target = extendObject({}, event.target, {
@@ -70,150 +71,107 @@ export const getCustomEvent = (type = '', oe = {}, { detail = {}, layoutRef }, p
         preventDefault: oe.preventDefault
     });
 };
-function handleEmitEvent(events, type, oe, propsRef, config, navigation) {
-    events.forEach((event) => {
-        if (propsRef.current[event]) {
-            const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event);
-            // 检查是否已经被上层的 catch 阻止
-            if ((type === 'tap' || type === 'longpress') && oe._stoppedEventTypes?.has(type)) {
-                return;
-            }
-            if (match) {
-                const eventBase = match[2] || '';
-                if (eventBase === 'tap' || eventBase === 'longpress') {
-                    // 为 tap、longpress 添加标记，影响后续的冒泡
-                    if (!oe._stoppedEventTypes) {
-                        oe._stoppedEventTypes = new Set();
-                    }
-                    oe._stoppedEventTypes.add(eventBase);
-                }
-                else {
-                    // 原生 touch 事件使用 stopPropagation
-                    oe.stopPropagation();
-                }
-            }
-            propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config, navigation));
+function handleEmitEvent(name, e, type, eventConfig) {
+    const { propsRef } = eventConfig;
+    const eventCfg = eventConfig[name];
+    if (eventCfg) {
+        if (eventCfg.hasCatch && name !== 'tap' && name !== 'longpress') {
+            e.stopPropagation();
         }
-    });
+        eventCfg[type].forEach((event) => {
+            propsRef.current[event]?.(getTouchEvent(name, e, eventConfig));
+        });
+    }
 }
 function checkIsNeedPress(e, type, ref) {
     const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 };
-    const nativeEvent = e.nativeEvent;
-    const currentPageX = nativeEvent.changedTouches[0].pageX;
-    const currentPageY = nativeEvent.changedTouches[0].pageY;
+    const currentPageX = e.nativeEvent.changedTouches[0].pageX;
+    const currentPageY = e.nativeEvent.changedTouches[0].pageY;
     if (Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
         Math.abs(currentPageY - tapDetailInfo.y) > 3) {
         globalEventState.needPress = false;
-        ref.current.startTimer[type] &&
-            clearTimeout(ref.current.startTimer[type]);
+        ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type]);
         ref.current.startTimer[type] = null;
     }
 }
-function handleTouchstart(e, type, ref, propsRef, config, navigation) {
+function handleTouchstart(e, type, eventConfig) {
+    // 阻止事件被释放放回对象池，导致对象复用 _stoppedEventTypes 状态被保留
     e.persist();
-    const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart'];
-    const bubblePressEvent = ['catchlongpress', 'bindlongpress'];
-    const captureTouchEvent = [
-        'capture-catchtouchstart',
-        'capture-bindtouchstart'
-    ];
-    const capturePressEvent = [
-        'capture-catchlongpress',
-        'capture-bindlongpress'
-    ];
-    ref.current.startTimer[type] = null;
+    const { innerRef } = eventConfig;
     globalEventState.needPress = true;
-    const nativeEvent = e.nativeEvent;
-    ref.current.mpxPressInfo.detail = {
-        x: nativeEvent.changedTouches[0].pageX,
-        y: nativeEvent.changedTouches[0].pageY
+    innerRef.current.mpxPressInfo.detail = {
+        x: e.nativeEvent.changedTouches[0].pageX,
+        y: e.nativeEvent.changedTouches[0].pageY
     };
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent;
-    handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config, navigation);
-    if (LONGPRESS_EVENTS.some(eventName => propsRef.current[eventName])) {
-        ref.current.startTimer[type] = setTimeout(() => {
+    handleEmitEvent('touchstart', e, type, eventConfig);
+    if (eventConfig.longpress) {
+        if (e._stoppedEventTypes?.has('longpress')) {
+            return;
+        }
+        if (eventConfig.longpress.hasCatch) {
+            e._stoppedEventTypes = e._stoppedEventTypes || new Set();
+            e._stoppedEventTypes.add('longpress');
+        }
+        innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
+        innerRef.current.startTimer[type] = setTimeout(() => {
             // 只要触发过longpress, 全局就不再触发tap
             globalEventState.needPress = false;
-            handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config, navigation);
+            handleEmitEvent('longpress', e, type, eventConfig);
         }, 350);
     }
 }
-function handleTouchmove(e, type, ref, propsRef, config, navigation) {
-    const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove'];
-    const captureTouchEvent = [
-        'capture-catchtouchmove',
-        'capture-bindtouchmove'
-    ];
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config, navigation);
-    if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
-        checkIsNeedPress(e, type, ref);
+function handleTouchmove(e, type, eventConfig) {
+    const { innerRef } = eventConfig;
+    handleEmitEvent('touchmove', e, type, eventConfig);
+    if (eventConfig.tap) {
+        checkIsNeedPress(e, type, innerRef);
     }
 }
-function handleTouchend(e, type, ref, propsRef, config, navigation) {
-    // move event may not be triggered
-    if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
-        checkIsNeedPress(e, type, ref);
-    }
-    const bubbleTouchEvent = ['catchtouchend', 'bindtouchend'];
-    const bubbleTapEvent = ['catchtap', 'bindtap'];
-    const captureTouchEvent = [
-        'capture-catchtouchend',
-        'capture-bindtouchend'
-    ];
-    const captureTapEvent = ['capture-catchtap', 'capture-bindtap'];
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    const currentTapEvent = type === 'bubble' ? bubbleTapEvent : captureTapEvent;
-    ref.current.startTimer[type] &&
-        clearTimeout(ref.current.startTimer[type]);
-    ref.current.startTimer[type] = null;
-    handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config, navigation);
-    if (globalEventState.needPress) {
-        if (type === 'bubble' && config.disableTap) {
+function handleTouchend(e, type, eventConfig) {
+    const { innerRef, disableTap } = eventConfig;
+    handleEmitEvent('touchend', e, type, eventConfig);
+    innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
+    if (eventConfig.tap) {
+        checkIsNeedPress(e, type, innerRef);
+        if (!globalEventState.needPress || (type === 'bubble' && disableTap) || e._stoppedEventTypes?.has('tap')) {
             return;
         }
-        handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config, navigation);
+        if (eventConfig.tap.hasCatch) {
+            e._stoppedEventTypes = e._stoppedEventTypes || new Set();
+            e._stoppedEventTypes.add('tap');
+        }
+        handleEmitEvent('tap', e, type, eventConfig);
     }
 }
-function handleTouchcancel(e, type, ref, propsRef, config, navigation) {
-    const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel'];
-    const captureTouchEvent = [
-        'capture-catchtouchcancel',
-        'capture-bindtouchcancel'
-    ];
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    ref.current.startTimer[type] &&
-        clearTimeout(ref.current.startTimer[type]);
-    ref.current.startTimer[type] = null;
-    handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config, navigation);
+function handleTouchcancel(e, type, eventConfig) {
+    const { innerRef } = eventConfig;
+    handleEmitEvent('touchcancel', e, type, eventConfig);
+    innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
 }
-function createTouchEventHandler(eventName, type) {
-    return (e, ref, propsRef, config, navigation) => {
-        const handlerMap = {
+function createTouchEventHandler(eventName, eventConfig) {
+    return (e) => {
+        const bubbleHandlerMap = {
             onTouchStart: handleTouchstart,
             onTouchMove: handleTouchmove,
             onTouchEnd: handleTouchend,
             onTouchCancel: handleTouchcancel
         };
-        const handler = handlerMap[eventName];
-        if (handler) {
-            handler(e, type, ref, propsRef, config, navigation);
+        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);
         }
     };
 }
-const touchEventList = [
-    { eventName: 'onTouchStart', handler: createTouchEventHandler('onTouchStart', 'bubble') },
-    { eventName: 'onTouchMove', handler: createTouchEventHandler('onTouchMove', 'bubble') },
-    { eventName: 'onTouchEnd', handler: createTouchEventHandler('onTouchEnd', 'bubble') },
-    { eventName: 'onTouchCancel', handler: createTouchEventHandler('onTouchCancel', 'bubble') },
-    { eventName: 'onTouchStartCapture', handler: createTouchEventHandler('onTouchStart', 'capture') },
-    { eventName: 'onTouchMoveCapture', handler: createTouchEventHandler('onTouchMove', 'capture') },
-    { eventName: 'onTouchEndCapture', handler: createTouchEventHandler('onTouchEnd', 'capture') },
-    { eventName: 'onTouchCancelCapture', handler: createTouchEventHandler('onTouchCancel', 'capture') }
-];
-const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], rawConfig) => {
-    const ref = useRef({
+const useInnerProps = (props = {}, userRemoveProps = [], rawConfig) => {
+    const innerRef = useRef({
         startTimer: {
             bubble: null,
             capture: null
@@ -226,52 +184,68 @@ const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], r
         }
     });
     const propsRef = useRef({});
-    const eventConfig = {};
-    const config = rawConfig || {
-        layoutRef: { current: {} },
-        disableTap: false
-    };
+    propsRef.current = props;
     const navigation = useNavigation();
-    const removeProps = [
-        'children',
-        'enable-background',
-        'enable-offset',
-        'enable-var',
-        'external-var-context',
-        'parent-font-size',
-        'parent-width',
-        'parent-height',
-        ...userRemoveProps
-    ];
-    propsRef.current = extendObject({}, props, additionalProps);
+    const eventConfig = extendObject({
+        layoutRef: {
+            current: null
+        },
+        propsRef,
+        innerRef,
+        disableTap: false,
+        navigation
+    }, rawConfig);
     let hashEventKey = '';
     const rawEventKeys = [];
-    for (const key in eventConfigMap) {
-        if (hasOwn(propsRef.current, key)) {
-            eventConfig[key] = eventConfigMap[key].events;
-            hashEventKey = hashEventKey + eventConfigMap[key].bitFlag;
+    const transformedEventSet = new Set();
+    Object.keys(props).forEach((key) => {
+        if (eventConfigMap[key]) {
+            hashEventKey += eventConfigMap[key].bitFlag;
             rawEventKeys.push(key);
+            eventConfigMap[key].events.forEach((event) => {
+                transformedEventSet.add(event);
+            });
+            const match = /^(bind|catch|capture-bind|capture-catch)(.*)$/.exec(key);
+            const prefix = match[1];
+            const eventName = match[2];
+            eventConfig[eventName] = eventConfig[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;
+            }
         }
-    }
+    });
     const events = useMemo(() => {
-        if (!rawEventKeys.length) {
+        if (!hashEventKey) {
             return {};
         }
-        const transformedEventKeys = rawEventKeys.reduce((acc, key) => {
-            if (propsRef.current[key]) {
-                return acc.concat(eventConfig[key]);
-            }
-            return acc;
-        }, []);
-        const finalEventKeys = [...new Set(transformedEventKeys)];
         const events = {};
-        touchEventList.forEach((item) => {
-            if (finalEventKeys.includes(item.eventName)) {
-                events[item.eventName] = (e) => item.handler(e, ref, propsRef, config, navigation);
-            }
-        });
+        for (const eventName of transformedEventSet) {
+            events[eventName] = createTouchEventHandler(eventName, eventConfig);
+        }
         return events;
     }, [hashEventKey]);
-    return extendObject({}, events, omit(propsRef.current, [...rawEventKeys, ...removeProps]));
+    const removeProps = [
+        'children',
+        'enable-background',
+        'enable-offset',
+        'enable-var',
+        'external-var-context',
+        'parent-font-size',
+        'parent-width',
+        'parent-height',
+        ...userRemoveProps,
+        ...rawEventKeys
+    ];
+    return extendObject({}, events, omit(props, removeProps));
 };
 export default useInnerProps;

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

@@ -236,10 +236,9 @@ const Button = forwardRef((buttonProps, ref) => {
         handleOpenTypeEvent(evt);
         handleFormTypeFn();
     };
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, innerStyle, layoutStyle)
-    }, layoutProps, {
+        style: extendObject({}, innerStyle, layoutStyle),
         bindtap: !disabled && onTap
     }), [
         'disabled',

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

@@ -56,11 +56,10 @@ const _Canvas = forwardRef((props = {}, ref) => {
     });
     const { register } = useConstructorsRegistry();
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 }),
-        ...layoutProps
-    }, [], {
+        style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 })
+    }), [], {
         layoutRef
     });
     const context2D = new CanvasRenderingContext2D(canvasRef.current);

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

@@ -57,10 +57,10 @@ const CheckboxGroup = forwardRef((props, ref) => {
             }
         };
     }, []);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle)
-    }, layoutProps), [
+    }), [
         'name'
     ], {
         layoutRef

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

@@ -82,10 +82,9 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
     if (labelContext) {
         labelContext.current.triggerChange = onChange;
     }
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, innerStyle, layoutStyle)
-    }, layoutProps, {
+        style: extendObject({}, innerStyle, layoutStyle),
         bindtap: !disabled && onTap
     }), [
         'value',

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

@@ -22,10 +22,10 @@ const _Form = forwardRef((fromProps, ref) => {
     const propsRef = useRef({});
     propsRef.current = props;
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef });
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         style: extendObject({}, innerStyle, layoutStyle),
         ref: formRef
-    }, layoutProps), [
+    }), [
         'bindsubmit',
         'bindreset'
     ], { layoutRef });

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

@@ -37,11 +37,11 @@ const Icon = forwardRef((props, ref) => {
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         source,
         style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
-    }, layoutProps), [], {
+    }), [], {
         layoutRef
     });
     return createElement(Image, innerProps);

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

@@ -258,10 +258,10 @@ const Image = forwardRef((props, ref) => {
             });
         }
     }, [src, isSvg, isLayoutMode]);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: fixedWidth } : {}, isWidthFixMode ? { height: fixedHeight } : {})
-    }, layoutProps), [
+    }), [
         'src',
         'mode',
         'svg'