@mpxjs/webpack-plugin 2.10.24 → 2.11.0

package/lib/platform/template/wx/component-config/picker.js

@@ -8,9 +8,6 @@ module.exports = function ({ print }) {
   const ttPropLog = print({ platform: 'bytedance', tag: TAG_NAME, isError: false })
   const baiduPropLog = print({ platform: 'baidu', tag: TAG_NAME, isError: false })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
-  const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
-  const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
-  const harmonyPropLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false })
   const ksPropLog = print({ platform: 'ks', tag: TAG_NAME, isError: false })
 
   return {
@@ -48,9 +45,6 @@ module.exports = function ({ print }) {
         ali: aliPropLog,
         jd: jdPropLog,
         qa: qaPropLog,
-        ios: iosPropLog,
-        android: androidPropLog,
-        harmony: harmonyPropLog,
         ks: ksPropLog
       }
     ],

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/resolver/AddEnvPlugin.js

@@ -19,7 +19,7 @@ module.exports = class AddEnvPlugin {
     const envPattern = new RegExp(`\\.${env}(\\.|$)`)
 
     resolver.getHook(this.source).tapAsync('AddEnvPlugin', (request, resolveContext, callback) => {
-      if (request.env) {
+      if (request.__mpxResolvedExtendComponent || request.env) {
         return callback()
       }
       const obj = {

package/lib/resolver/AddModePlugin.js

@@ -21,7 +21,7 @@ module.exports = class AddModePlugin {
     const defaultModePattern = new RegExp(`\\.${defaultMode}(\\.|$)`)
 
     resolver.getHook(this.source).tapAsync('AddModePlugin', (request, resolveContext, callback) => {
-      if (request.mode || request.env) {
+      if (request.__mpxResolvedExtendComponent || request.mode || request.env) {
         return callback()
       }
       const obj = {

package/lib/resolver/ExtendComponentsPlugin.js

@@ -0,0 +1,68 @@
+const path = require('path')
+const toPosix = require('../utils/to-posix')
+const EXTEND_COMPONENT_PATH_REGEXP = /@mpxjs\/webpack-plugin\/lib\/runtime\/components\/extends\/[^/]+$/
+const RN_COMPONENTS_DIST_PATH = 'lib/runtime/components/react/dist'
+const EXTEND_COMPONENTS = {
+  'section-list': {
+    ios: `${RN_COMPONENTS_DIST_PATH}/mpx-section-list.jsx`,
+    android: `${RN_COMPONENTS_DIST_PATH}/mpx-section-list.jsx`,
+    harmony: `${RN_COMPONENTS_DIST_PATH}/mpx-section-list.jsx`
+  }
+}
+
+/**
+ * 扩展组件路径解析插件
+ * 将 @mpxjs/webpack-plugin/lib/runtime/components/extends/[component-name] 格式的路径
+ * 解析为对应平台的实际组件路径
+ */
+module.exports = class ExtendComponentsPlugin {
+  constructor (source, mode, target) {
+    this.source = source
+    this.target = target
+    this.mode = mode
+  }
+
+  apply (resolver) {
+    const target = resolver.ensureHook(this.target)
+    const mode = this.mode
+
+    resolver.getHook(this.source).tapAsync('ExtendComponentsPlugin', (request, resolveContext, callback) => {
+      if (request.__mpxResolvedExtendComponent) return callback()
+
+      const componentName = getComponentName(request)
+      if (!componentName) {
+        return callback()
+      }
+
+      // 检查组件是否在配置中
+      const componentTargetMap = EXTEND_COMPONENTS[componentName]
+      const targetSubPath = componentTargetMap && componentTargetMap[mode]
+      if (!targetSubPath) {
+        return callback(new Error(`Extended component "${componentName}" cannot be used on the ${mode} platform.`))
+      }
+      const targetPath = path.join(request.descriptionFileRoot, targetSubPath)
+      const targetRelativePath = `./${targetSubPath}`
+
+      const redirectRequest = Object.assign({}, request, {
+        path: targetPath,
+        relativePath: targetRelativePath,
+        __mpxResolvedExtendComponent: true
+      })
+
+      resolver.doResolve(
+        target,
+        redirectRequest,
+        `resolve extend component: ${componentName} to ${targetPath}`,
+        resolveContext,
+        callback
+      )
+    })
+  }
+}
+
+function getComponentName (request) {
+  if (!request.path) return
+  const requestPath = toPosix(request.path)
+  if (!EXTEND_COMPONENT_PATH_REGEXP.test(requestPath)) return
+  return path.basename(requestPath, path.extname(requestPath))
+}

package/lib/runtime/components/extends/section-list.mpx

@@ -0,0 +1,14 @@
+<!--
+  Placeholder for @mpxjs/webpack-plugin/lib/runtime/components/extends/section-list.
+  ExtendComponentsPlugin should always redirect requests away from this file at
+  build time. Reaching this module means the plugin failed to redirect — most
+  likely because section-list is not supported on the current platform, or
+  ExtendComponentsPlugin is not registered on the resolver.
+-->
+<template></template>
+
+<script>
+  import { error } from '@mpxjs/utils'
+  error('section-list extend placeholder reached at runtime, ExtendComponentsPlugin redirect failed. See build log for the original error.')
+  export default {}
+</script>

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,8 +55,7 @@ export interface ButtonProps {
     'form-type'?: 'submit' | 'reset';
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
+    'enable-text-pass-through'?: boolean;
     'parent-width'?: number;
     'parent-height'?: number;
     style?: ViewStyle & TextStyle & Record<string, any>;

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-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, 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

@@ -18,11 +18,9 @@ interface CameraProps {
         type: string;
         data: string;
     }) => void;
-    'parent-font-size'?: number;
     '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

@@ -12,15 +12,24 @@ const qualityValue = {
     original: 100
 };
 let RecordRes = null;
+const cameraPermissionCacheMap = new Map();
+function getCameraPermissionCache(pageId) {
+    if (pageId == null)
+        return;
+    let cache = cameraPermissionCacheMap.get(pageId);
+    if (!cache) {
+        cache = {};
+        cameraPermissionCacheMap.set(pageId, cache);
+    }
+    return cache;
+}
 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-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
     });
@@ -210,14 +219,36 @@ const _camera = forwardRef((props, ref) => {
             try {
                 const cameraPermission = global?.__mpx?.config?.rnConfig?.cameraPermission;
                 if (typeof cameraPermission === 'function') {
-                    const permissionResult = await cameraPermission();
-                    setHasPermission(permissionResult === true);
+                    const permissionCache = getCameraPermissionCache(pageId);
+                    if (permissionCache && hasOwn(permissionCache, 'result')) {
+                        setHasPermission(permissionCache.result === true);
+                        return;
+                    }
+                    let permissionResult;
+                    if (permissionCache) {
+                        if (!permissionCache.promise) {
+                            permissionCache.promise = cameraPermission();
+                        }
+                        permissionResult = await permissionCache.promise;
+                    }
+                    else {
+                        permissionResult = await cameraPermission();
+                    }
+                    const granted = permissionResult === true;
+                    if (permissionCache) {
+                        permissionCache.result = granted;
+                    }
+                    setHasPermission(granted);
                 }
                 else {
                     setHasPermission(true);
                 }
             }
             catch (error) {
+                const permissionCache = getCameraPermissionCache(pageId);
+                if (permissionCache) {
+                    permissionCache.result = false;
+                }
                 setHasPermission(false);
             }
         };