@mpxjs/webpack-plugin 2.10.21 → 2.10.24-beta.1

package/lib/runtime/components/react/dist/mpx-section-list.jsx

@@ -0,0 +1,484 @@
+import { forwardRef, useRef, useMemo, createElement, useImperativeHandle, useEffect } from 'react';
+import { SectionList, RefreshControl } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { hasOwn, error } from '@mpxjs/utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import { extendObject, useLayout, useTransformStyle, flatGesture } from './utils';
+const TypedSectionList = SectionList;
+const getGeneric = (generichash, generickey) => {
+    if (!generichash || !generickey)
+        return null;
+    return global.__mpxGenericsMap?.[generichash]?.[generickey]?.() || null;
+};
+const getExposurePercentThreshold = (threshold = 0) => {
+    return Math.max(0, Math.min(100, threshold));
+};
+const _SectionList = forwardRef((props = {}, ref) => {
+    const { enhanced = false, bounces = true, height, width, generichash, style = {}, 'list-data': listData, 'scroll-event-throttle': scrollEventThrottle = 0, 'item-height': itemHeight = {}, 'section-header-height': sectionHeaderHeight = {}, 'section-footer-height': sectionFooterHeight = {}, 'list-header-height': listHeaderHeight = 0, 'list-header-data': listHeaderData = null, 'use-list-header': useListHeader = false, 'list-footer-data': listFooterData = null, 'use-list-footer': useListFooter = false, 'genericrecycle-item': genericrecycleItem, 'genericsection-header': genericsectionHeader, 'genericsection-footer': genericsectionFooter, 'genericlist-header': genericListHeader, 'genericlist-footer': genericListFooter, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'enable-sticky': enableSticky = false, 'enable-back-to-top': enableBackToTop = false, 'end-reached-threshold': onEndReachedThreshold = 0.1, 'refresher-enabled': refresherEnabled, 'show-scrollbar': showScrollbar = true, 'refresher-triggered': refresherTriggered, 'enable-item-exposure': enableItemExposure = false, 'item-exposure-threshold': itemExposureThreshold = 0, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, binditemexposure } = props;
+    const refreshing = !!refresherTriggered;
+    const scrollViewRef = useRef(null);
+    const sectionListGestureRef = useRef();
+    const indexMap = useRef({});
+    const reverseIndexMap = useRef({});
+    const exposureIndexMap = useRef({});
+    const itemLayoutsRef = useRef([]);
+    const itemExposureState = useRef({});
+    const enableStickyRef = useRef(enableSticky);
+    const bindItemExposureRef = useRef();
+    const propsRef = useRef(props);
+    const initialEnableItemExposureRef = useRef(enableItemExposure);
+    const itemExposureViewabilityConfig = useRef();
+    if (!itemExposureViewabilityConfig.current) {
+        itemExposureViewabilityConfig.current = {
+            itemVisiblePercentThreshold: getExposurePercentThreshold(itemExposureThreshold)
+        };
+    }
+    const itemExposureViewabilityConfigValue = itemExposureViewabilityConfig.current;
+    const { hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef });
+    if (initialEnableItemExposureRef.current !== enableItemExposure) {
+        error('[Mpx runtime error]: [enable-item-exposure] cannot be toggled at runtime. Set its value once at component initialization.');
+    }
+    enableStickyRef.current = enableSticky;
+    bindItemExposureRef.current = binditemexposure;
+    propsRef.current = props;
+    const onRefresh = () => {
+        const { bindrefresherrefresh } = props;
+        bindrefresherrefresh &&
+            bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, props));
+    };
+    const onEndReached = () => {
+        const { bindscrolltolower } = props;
+        bindscrolltolower &&
+            bindscrolltolower(getCustomEvent('scrolltolower', {}, { layoutRef }, props));
+    };
+    const onScroll = (event) => {
+        const { bindscroll } = props;
+        bindscroll &&
+            bindscroll(getCustomEvent('scroll', event.nativeEvent, { layoutRef }, props));
+    };
+    const itemExposureViewabilityPairs = useRef();
+    if (!itemExposureViewabilityPairs.current) {
+        itemExposureViewabilityPairs.current = [
+            {
+                viewabilityConfig: itemExposureViewabilityConfigValue,
+                onViewableItemsChanged: ({ changed }) => {
+                    const bindItemExposure = bindItemExposureRef.current;
+                    if (!bindItemExposure)
+                        return;
+                    const exposedItems = [];
+                    changed.forEach((viewToken) => {
+                        const exposureInfo = getItemExposureInfo(viewToken);
+                        if (!exposureInfo)
+                            return;
+                        const { index, itemData, layout } = exposureInfo;
+                        const key = `${index}`;
+                        if (!viewToken.isViewable) {
+                            delete itemExposureState.current[key];
+                            return;
+                        }
+                        if (!itemExposureState.current[key]) {
+                            itemExposureState.current[key] = true;
+                            exposedItems.push({
+                                index,
+                                itemData,
+                                layout,
+                                threshold: itemExposureViewabilityConfigValue.itemVisiblePercentThreshold
+                            });
+                        }
+                    });
+                    if (exposedItems.length) {
+                        bindItemExposure(getCustomEvent('itemexposure', {}, {
+                            detail: {
+                                items: exposedItems,
+                                time: Date.now()
+                            },
+                            layoutRef
+                        }, propsRef.current));
+                    }
+                }
+            }
+        ];
+    }
+    // 通过sectionIndex和rowIndex获取原始索引
+    const getOriginalIndex = (sectionIndex, rowIndex) => {
+        const key = `${sectionIndex}_${rowIndex}`;
+        return reverseIndexMap.current[key] ?? -1; // 如果找不到，返回-1
+    };
+    const getItemExposureInfo = (viewToken) => {
+        const item = viewToken.item;
+        if (!item)
+            return null;
+        const viewIndex = viewToken.index;
+        if (viewIndex == null)
+            return null;
+        const indexInfo = exposureIndexMap.current[viewIndex];
+        if (!indexInfo)
+            return null;
+        if (indexInfo.type === 'header' && enableStickyRef.current)
+            return null;
+        const layoutInfo = itemLayoutsRef.current[viewIndex];
+        const layout = {
+            offset: layoutInfo ? layoutInfo.offset : 0,
+            length: layoutInfo ? layoutInfo.length : 0
+        };
+        if (indexInfo.type === 'header') {
+            const section = item;
+            return {
+                index: indexInfo.index,
+                itemData: section.headerData || null,
+                layout
+            };
+        }
+        if (indexInfo.type === 'footer') {
+            const section = item;
+            return {
+                index: indexInfo.index,
+                itemData: section.footerData || null,
+                layout
+            };
+        }
+        return {
+            index: indexInfo.index,
+            itemData: item,
+            layout
+        };
+    };
+    const scrollToIndex = ({ index, animated, viewOffset = 0, viewPosition = 0 }) => {
+        if (!scrollViewRef.current)
+            return;
+        // 通过索引映射表快速定位位置
+        const position = indexMap.current[index];
+        if (!position)
+            return;
+        const [sectionIndex, itemIndex] = position.split('_');
+        const targetSectionIndex = Number(sectionIndex) || 0;
+        const targetItemIndex = itemIndex === 'header'
+            ? 0
+            : itemIndex === 'footer'
+                ? convertedListData[targetSectionIndex].data.length + 1
+                : Number(itemIndex) + 1;
+        scrollViewRef.current.scrollToLocation?.({
+            itemIndex: targetItemIndex,
+            sectionIndex: targetSectionIndex,
+            animated,
+            viewOffset,
+            viewPosition
+        });
+    };
+    const getItemHeight = ({ sectionIndex, rowIndex }) => {
+        if (!itemHeight) {
+            return 0;
+        }
+        if (itemHeight.getter) {
+            const item = convertedListData[sectionIndex].data[rowIndex];
+            return itemHeight.getter?.(item, getOriginalIndex(sectionIndex, rowIndex)) || 0;
+        }
+        else {
+            return itemHeight.value || 0;
+        }
+    };
+    const getSectionExtraHeight = ({ sectionIndex, type }) => {
+        const item = convertedListData[sectionIndex];
+        const isHeader = type === 'header';
+        if (!(isHeader ? item.hasSectionHeader : item.hasSectionFooter))
+            return 0;
+        const sectionExtraHeight = (isHeader ? sectionHeaderHeight : sectionFooterHeight);
+        if (sectionExtraHeight.getter) {
+            const sectionExtraData = isHeader ? item.headerData : item.footerData;
+            return sectionExtraHeight.getter?.(sectionExtraData, getOriginalIndex(sectionIndex, type)) || 0;
+        }
+        return sectionExtraHeight.value || 0;
+    };
+    const convertedListData = useMemo(() => {
+        const sections = [];
+        let currentSection = null;
+        // 清空之前的索引映射
+        indexMap.current = {};
+        // 清空反向索引映射
+        reverseIndexMap.current = {};
+        exposureIndexMap.current = {};
+        // 处理 listData 为空的情况
+        if (!listData || !listData.length) {
+            return sections;
+        }
+        let exposureIndex = 0;
+        // 需与 RN SectionList 和 getItemLayout 的扁平顺序保持一致：每个 section 都是 [header, ...items, footer]
+        const createSection = (headerInfo) => {
+            const sectionIndex = sections.length;
+            const section = {
+                headerData: headerInfo?.data || null,
+                footerData: null,
+                data: [],
+                hasSectionHeader: !!headerInfo,
+                hasSectionFooter: false
+            };
+            if (headerInfo) {
+                const { index } = headerInfo;
+                indexMap.current[index] = `${sectionIndex}_header`;
+                reverseIndexMap.current[`${sectionIndex}_header`] = index;
+                exposureIndexMap.current[exposureIndex] = {
+                    index,
+                    type: 'header'
+                };
+            }
+            exposureIndex++;
+            return section;
+        };
+        const closeSection = () => {
+            const section = currentSection;
+            if (!section)
+                return;
+            if (section.hasSectionFooter) {
+                const sectionIndex = sections.length;
+                const index = getOriginalIndex(sectionIndex, 'footer');
+                if (index > -1) {
+                    exposureIndexMap.current[exposureIndex] = {
+                        index,
+                        type: 'footer'
+                    };
+                }
+            }
+            // RN SectionList 即使没有真实 footer，也会为每个 section 保留 footer slot
+            exposureIndex++;
+            sections.push(section);
+            currentSection = null;
+        };
+        listData.forEach((item, index) => {
+            if (item.isSectionHeader) {
+                // 如果已经存在一个 section，先把它添加到 sections 中
+                if (currentSection) {
+                    closeSection();
+                }
+                currentSection = createSection({ data: item, index });
+            }
+            else if (item.isSectionFooter) {
+                // 如果没有当前 section，创建一个默认的
+                if (!currentSection) {
+                    // 创建默认section (无header的section)
+                    currentSection = createSection();
+                }
+                const sectionIndex = sections.length;
+                currentSection.footerData = item;
+                currentSection.hasSectionFooter = true;
+                indexMap.current[index] = `${sectionIndex}_footer`;
+                // 添加反向索引映射
+                reverseIndexMap.current[`${sectionIndex}_footer`] = index;
+                closeSection();
+            }
+            else {
+                // 如果没有当前 section，创建一个默认的
+                if (!currentSection) {
+                    // 创建默认section (无header的section)
+                    currentSection = createSection();
+                }
+                // 将 item 添加到当前 section 的 data 中
+                const itemIndex = currentSection.data.length;
+                currentSection.data.push(item);
+                const sectionIndex = sections.length;
+                // 为 item 添加索引映射 - 存储格式为: "sectionIndex_itemIndex"
+                indexMap.current[index] = `${sectionIndex}_${itemIndex}`;
+                // 添加反向索引映射
+                reverseIndexMap.current[`${sectionIndex}_${itemIndex}`] = index;
+                exposureIndexMap.current[exposureIndex] = {
+                    index,
+                    type: 'item'
+                };
+                exposureIndex++;
+            }
+        });
+        // 添加最后一个 section
+        if (currentSection) {
+            closeSection();
+        }
+        return sections;
+    }, [listData]);
+    const { getItemLayout } = useMemo(() => {
+        const layouts = [];
+        let offset = 0;
+        if (useListHeader) {
+            // 计算列表头部的高度
+            offset += listHeaderHeight;
+        }
+        // 遍历所有 sections
+        convertedListData.forEach((section, sectionIndex) => {
+            // 添加 section header 的位置信息
+            const headerHeight = getSectionExtraHeight({ sectionIndex, type: 'header' });
+            layouts.push({
+                length: headerHeight,
+                offset,
+                index: layouts.length
+            });
+            offset += headerHeight;
+            // 添加该 section 中所有 items 的位置信息
+            section.data.forEach((item, itemIndex) => {
+                const contentHeight = getItemHeight({ sectionIndex, rowIndex: itemIndex });
+                layouts.push({
+                    length: contentHeight,
+                    offset,
+                    index: layouts.length
+                });
+                offset += contentHeight;
+            });
+            // 添加该 section 尾部位置信息
+            // 因为即使 sectionList 没传 renderSectionFooter，getItemLayout 中的 index 的计算也会包含尾部节点
+            const footerHeight = getSectionExtraHeight({ sectionIndex, type: 'footer' });
+            layouts.push({
+                length: footerHeight,
+                offset,
+                index: layouts.length
+            });
+            offset += footerHeight;
+        });
+        itemLayoutsRef.current = layouts;
+        return {
+            getItemLayout: (data, index) => layouts[index]
+        };
+    }, [convertedListData, useListHeader, itemHeight.value, itemHeight.getter, sectionHeaderHeight.value, sectionHeaderHeight.getter, sectionFooterHeight.value, sectionFooterHeight.getter, listHeaderHeight]);
+    useEffect(() => {
+        itemExposureState.current = {};
+    }, [convertedListData, enableSticky]);
+    const scrollAdditionalProps = extendObject({
+        style: [
+            hasOwn(style, 'flex') || hasOwn(style, 'flexGrow') ? null : { flexGrow: 0 },
+            { height, width },
+            style,
+            layoutStyle
+        ],
+        alwaysBounceVertical: false,
+        alwaysBounceHorizontal: false,
+        scrollEventThrottle: scrollEventThrottle,
+        scrollsToTop: enableBackToTop,
+        showsHorizontalScrollIndicator: showScrollbar,
+        onEndReachedThreshold,
+        ref: scrollViewRef,
+        bounces: enhanced ? bounces : false,
+        stickySectionHeadersEnabled: enableSticky,
+        onScroll: onScroll,
+        onEndReached: onEndReached
+    }, refresherEnabled ? { refreshing } : null, layoutProps);
+    if (initialEnableItemExposureRef.current) {
+        extendObject(scrollAdditionalProps, {
+            viewabilityConfigCallbackPairs: itemExposureViewabilityPairs.current
+        });
+    }
+    const nativeGesture = useMemo(() => {
+        const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+        const waitForHandlers = flatGesture(waitFor);
+        const gesture = Gesture.Native().withRef(sectionListGestureRef);
+        if (simultaneousHandlers && simultaneousHandlers.length) {
+            gesture.simultaneousWithExternalGesture(...simultaneousHandlers);
+        }
+        if (waitForHandlers && waitForHandlers.length) {
+            gesture.requireExternalGestureToFail(...waitForHandlers);
+        }
+        return gesture;
+    }, [originSimultaneousHandlers, waitFor]);
+    useImperativeHandle(ref, () => {
+        return {
+            gestureRef: sectionListGestureRef,
+            scrollToIndex
+        };
+    });
+    const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [
+        'id',
+        'enhanced',
+        'height',
+        'width',
+        'list-data',
+        'item-height',
+        'section-header-height',
+        'section-footer-height',
+        'list-header-height',
+        'list-header-data',
+        'use-list-header',
+        'list-footer-data',
+        'use-list-footer',
+        'genericrecycle-item',
+        'genericsection-header',
+        'genericsection-footer',
+        'genericlist-header',
+        'genericlist-footer',
+        'show-scrollbar',
+        'lower-threshold',
+        'scroll-event-throttle',
+        'enable-sticky',
+        'enable-back-to-top',
+        'end-reached-threshold',
+        'refresher-triggered',
+        'refresher-enabled',
+        'enable-item-exposure',
+        'item-exposure-threshold',
+        'bindrefresherrefresh',
+        'bindscrolltolower',
+        'bindscroll',
+        'binditemexposure',
+        'simultaneous-handlers',
+        'wait-for'
+    ], { layoutRef });
+    // 使用 useMemo 获取 GenericComponent 并创建渲染函数，避免每次组件更新都重新创建函数引用导致不必要的重新渲染
+    const renderItem = useMemo(() => {
+        const ItemComponent = getGeneric(generichash, genericrecycleItem);
+        if (!ItemComponent)
+            return undefined;
+        return ({ item }) => createElement(ItemComponent, { itemData: item });
+    }, [generichash, genericrecycleItem]);
+    const renderSectionHeader = useMemo(() => {
+        const SectionHeaderComponent = getGeneric(generichash, genericsectionHeader);
+        if (!SectionHeaderComponent)
+            return undefined;
+        return (sectionData) => {
+            if (!sectionData.section.hasSectionHeader)
+                return null;
+            return createElement(SectionHeaderComponent, { itemData: sectionData.section.headerData });
+        };
+    }, [generichash, genericsectionHeader]);
+    const renderSectionFooter = useMemo(() => {
+        const SectionFooterComponent = getGeneric(generichash, genericsectionFooter);
+        if (!SectionFooterComponent)
+            return undefined;
+        return (sectionData) => {
+            if (!sectionData.section.hasSectionFooter)
+                return null;
+            return createElement(SectionFooterComponent, { itemData: sectionData.section.footerData });
+        };
+    }, [generichash, genericsectionFooter]);
+    const ListHeaderGenericComponent = useMemo(() => {
+        if (!useListHeader)
+            return null;
+        return getGeneric(generichash, genericListHeader);
+    }, [useListHeader, generichash, genericListHeader]);
+    const ListFooterGenericComponent = useMemo(() => {
+        if (!useListFooter)
+            return null;
+        return getGeneric(generichash, genericListFooter);
+    }, [useListFooter, generichash, genericListFooter]);
+    const ListHeaderComponent = useMemo(() => {
+        if (!ListHeaderGenericComponent)
+            return null;
+        return createElement(ListHeaderGenericComponent, { listHeaderData });
+    }, [ListHeaderGenericComponent, listHeaderData]);
+    const ListFooterComponent = useMemo(() => {
+        if (!ListFooterGenericComponent)
+            return null;
+        return createElement(ListFooterGenericComponent, { listFooterData });
+    }, [ListFooterGenericComponent, listFooterData]);
+    const sectionListProps = extendObject({
+        sections: convertedListData,
+        renderItem: renderItem,
+        getItemLayout: getItemLayout,
+        ListHeaderComponent: useListHeader ? ListHeaderComponent : null,
+        ListFooterComponent: useListFooter ? ListFooterComponent : null,
+        renderSectionHeader: renderSectionHeader,
+        renderSectionFooter: renderSectionFooter,
+        refreshControl: refresherEnabled
+            ? createElement(RefreshControl, {
+                onRefresh: onRefresh,
+                refreshing: refreshing
+            })
+            : undefined
+    }, innerProps);
+    return createElement(GestureDetector, { gesture: nativeGesture }, createElement(TypedSectionList, sectionListProps));
+});
+_SectionList.displayName = 'MpxSectionList';
+export default _SectionList;

package/lib/runtime/components/react/dist/mpx-simple-text.jsx

@@ -5,13 +5,13 @@ import { extendObject, getDefaultAllowFontScaling, useTextPassThroughValue, wrap
 import { TextPassThroughContext } from './context';
 import * as perf from '@mpxjs/perf';
 const SimpleText = (props) => {
-    let stopTotal;
+    let idTotal = -1;
     if (__mpx_perf_framework__)
-        stopTotal = perf.scope('simple-text:render:total');
+        idTotal = perf.scopeStart('simple-text:render:total');
     // ───── style 阶段 ─────
-    let stopStyle;
+    let idStyle = -1;
     if (__mpx_perf_framework__)
-        stopStyle = perf.scope('simple-text:render:style');
+        idStyle = perf.scopeStart('simple-text:render:style');
     const inheritedText = useContext(TextPassThroughContext);
     const mergedStyle = extendObject({}, inheritedText?.textStyle, props.style);
     let hasBoxSizingAffectingStyle = false;
@@ -30,29 +30,29 @@ const SimpleText = (props) => {
         disabled: isStringOnly
     });
     if (__mpx_perf_framework__)
-        stopStyle();
+        perf.scopeEnd(idStyle);
     // ───── innerProps 阶段 ─────
-    let stopInnerProps;
+    let idInnerProps = -1;
     if (__mpx_perf_framework__)
-        stopInnerProps = perf.scope('simple-text:render:innerProps');
+        idInnerProps = perf.scopeStart('simple-text:render:innerProps');
     const innerProps = useInnerProps(extendObject({}, mergedProps, {
         allowFontScaling: allowFontScaling ?? getDefaultAllowFontScaling(),
         style: finalStyle
     }));
     if (__mpx_perf_framework__)
-        stopInnerProps();
+        perf.scopeEnd(idInnerProps);
     // ───── createElement 阶段 ─────
-    let stopCreate;
+    let idCreate = -1;
     if (__mpx_perf_framework__)
-        stopCreate = perf.scope('simple-text:render:createElement');
+        idCreate = perf.scopeStart('simple-text:render:createElement');
     const result = createElement(Text, innerProps, wrapChildren({ children }, {
         hasVarDec: false,
         textPassThrough: childTextPassThrough
     }));
     if (__mpx_perf_framework__)
-        stopCreate();
+        perf.scopeEnd(idCreate);
     if (__mpx_perf_framework__)
-        stopTotal();
+        perf.scopeEnd(idTotal);
     return result;
 };
 SimpleText.displayName = 'MpxSimpleText';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ViewProps } from 'react-native';
 declare const SimpleView: {
     (simpleViewProps: ViewProps): JSX.Element;

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

@@ -4,13 +4,13 @@ import { splitProps, splitStyle, wrapChildren, extendObject, useTextPassThroughV
 import useInnerProps from './getInnerListeners';
 import * as perf from '@mpxjs/perf';
 const SimpleView = (simpleViewProps) => {
-    let stopTotal;
+    let idTotal = -1;
     if (__mpx_perf_framework__)
-        stopTotal = perf.scope('simple-view:render:total');
+        idTotal = perf.scopeStart('simple-view:render:total');
     // ───── style 阶段 ─────
-    let stopStyle;
+    let idStyle = -1;
     if (__mpx_perf_framework__)
-        stopStyle = perf.scope('simple-view:render:style');
+        idStyle = perf.scopeStart('simple-view:render:style');
     const { textProps, innerProps: props = {} } = splitProps(simpleViewProps);
     let hasBoxSizingAffectingStyle = false;
     const { textStyle, innerStyle = {} } = splitStyle(props.style || {}, (key) => {
@@ -20,28 +20,28 @@ const SimpleView = (simpleViewProps) => {
     });
     const textPassThrough = useTextPassThroughValue(textStyle, textProps);
     if (__mpx_perf_framework__)
-        stopStyle();
+        perf.scopeEnd(idStyle);
     // ───── innerProps 阶段 ─────
-    let stopInnerProps;
+    let idInnerProps = -1;
     if (__mpx_perf_framework__)
-        stopInnerProps = perf.scope('simple-view:render:innerProps');
+        idInnerProps = perf.scopeStart('simple-view:render:innerProps');
     const innerProps = useInnerProps(extendObject({}, props, {
         style: transformBoxSizing(extendObject({}, innerStyle), hasBoxSizingAffectingStyle)
     }));
     if (__mpx_perf_framework__)
-        stopInnerProps();
+        perf.scopeEnd(idInnerProps);
     // ───── createElement 阶段 ─────
-    let stopCreate;
+    let idCreate = -1;
     if (__mpx_perf_framework__)
-        stopCreate = perf.scope('simple-view:render:createElement');
+        idCreate = perf.scopeStart('simple-view:render:createElement');
     const result = createElement(View, innerProps, wrapChildren(props, {
         hasVarDec: false,
         textPassThrough
     }));
     if (__mpx_perf_framework__)
-        stopCreate();
+        perf.scopeEnd(idCreate);
     if (__mpx_perf_framework__)
-        stopTotal();
+        perf.scopeEnd(idTotal);
     return result;
 };
 SimpleView.displayName = 'MpxSimpleView';

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

@@ -36,22 +36,22 @@ function getDecodedChildren(children) {
     });
 }
 const _Text = forwardRef((props, ref) => {
-    let stopTotal;
+    let idTotal = -1;
     if (__mpx_perf_framework__)
-        stopTotal = perf.scope('text:render:total');
+        idTotal = perf.scopeStart('text:render:total');
     // ───── props 阶段 ─────
-    let stopProps;
+    let idProps = -1;
     if (__mpx_perf_framework__)
-        stopProps = perf.scope('text:render:props');
+        idProps = perf.scopeStart('text:render:props');
     const inheritedText = useContext(TextPassThroughContext);
     const mergedProps = extendObject({}, inheritedText?.pendingTextProps, props);
     const { style: currentStyle = {}, allowFontScaling, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, decode } = mergedProps;
     if (__mpx_perf_framework__)
-        stopProps();
+        perf.scopeEnd(idProps);
     // ───── style 阶段 ─────
-    let stopStyle;
+    let idStyle = -1;
     if (__mpx_perf_framework__)
-        stopStyle = perf.scope('text:render:style');
+        idStyle = perf.scopeStart('text:render:style');
     const { normalStyle, hasVarDec, varContextRef, hasPositionFixed } = useTransformStyle(currentStyle, {
         enableVar,
         externalVarContext,
@@ -76,11 +76,11 @@ const _Text = forwardRef((props, ref) => {
         disabled: isStringOnly
     });
     if (__mpx_perf_framework__)
-        stopStyle();
+        perf.scopeEnd(idStyle);
     // ───── innerProps 阶段 ─────
-    let stopInnerProps;
+    let idInnerProps = -1;
     if (__mpx_perf_framework__)
-        stopInnerProps = perf.scope('text:render:innerProps');
+        idInnerProps = perf.scopeStart('text:render:innerProps');
     const innerProps = useInnerProps(extendObject({}, mergedProps, {
         ref: nodeRef,
         style: finalStyle,
@@ -91,11 +91,11 @@ const _Text = forwardRef((props, ref) => {
         'decode'
     ]);
     if (__mpx_perf_framework__)
-        stopInnerProps();
+        perf.scopeEnd(idInnerProps);
     // ───── createElement 阶段 ─────
-    let stopCreate;
+    let idCreate = -1;
     if (__mpx_perf_framework__)
-        stopCreate = perf.scope('text:render:createElement');
+        idCreate = perf.scopeStart('text:render:createElement');
     let finalComponent = createElement(Text, innerProps, wrapChildren(extendObject({}, mergedProps, {
         children
     }), {
@@ -107,9 +107,9 @@ const _Text = forwardRef((props, ref) => {
         finalComponent = createElement(Portal, null, finalComponent);
     }
     if (__mpx_perf_framework__)
-        stopCreate();
+        perf.scopeEnd(idCreate);
     if (__mpx_perf_framework__)
-        stopTotal();
+        perf.scopeEnd(idTotal);
     return finalComponent;
 });
 _Text.displayName = 'MpxText';