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

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

@@ -1,28 +1,35 @@
-const eventConfigMap: { [key: string]: { bitFlag: string; events: string[] } } = {
-  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'] }
+import type { EventMeta } from './types/getInnerListeners'
+
+const tapEvents = ['onTouchStart', 'onTouchMove', 'onTouchEnd']
+const longpressEvents = ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel']
+const tapCaptureEvents = ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture']
+const longpressCaptureEvents = ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture']
+
+const eventConfigMap: Record<string, EventMeta> = {
+  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/getInnerListeners.ts

@@ -1,17 +1,19 @@
 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'
 import {
   Props,
   EventConfig,
+  EventConfigRef,
   RawConfig,
   EventType,
   RemoveProps,
   InnerRef,
   LayoutRef,
   ExtendedNativeTouchEvent,
-  GlobalEventState
+  GlobalEventState,
+  TouchHandlerConfig
 } from './types/getInnerListeners'
 
 const globalEventState: GlobalEventState = {
@@ -19,6 +21,18 @@ const globalEventState: GlobalEventState = {
   identifier: null
 }
 
+const baseRemovePropsMap: Record<string, boolean> = {
+  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: string,
   event: ExtendedNativeTouchEvent,
@@ -216,29 +230,45 @@ function handleTouchcancel (e: ExtendedNativeTouchEvent, type: EventType, eventC
   innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
 }
 
-function createTouchEventHandler (eventName: string, eventConfig: EventConfig) {
-  return (e: ExtendedNativeTouchEvent) => {
-    const bubbleHandlerMap: Record<string, any> = {
-      onTouchStart: handleTouchstart,
-      onTouchMove: handleTouchmove,
-      onTouchEnd: handleTouchend,
-      onTouchCancel: handleTouchcancel
-    }
-
-    const captureHandlerMap: Record<string, any> = {
-      onTouchStartCapture: handleTouchstart,
-      onTouchMoveCapture: handleTouchmove,
-      onTouchEndCapture: handleTouchend,
-      onTouchCancelCapture: handleTouchcancel
-    }
-
-    if (bubbleHandlerMap[eventName]) {
-      bubbleHandlerMap[eventName](e, 'bubble', eventConfig)
-    }
+const touchHandlerMap: Record<string, TouchHandlerConfig> = {
+  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
+  }
+}
 
-    if (captureHandlerMap[eventName]) {
-      captureHandlerMap[eventName](e, 'capture', eventConfig)
-    }
+function createTouchEventHandler (eventName: string, eventConfigRef: EventConfigRef) {
+  const eventHandler = touchHandlerMap[eventName]
+  return (e: ExtendedNativeTouchEvent) => {
+    eventHandler.handler(e, eventHandler.type, eventConfigRef.current)
   }
 }
 
@@ -271,37 +301,45 @@ const useInnerProps = (
     disableTap: false,
     navigation
   }, rawConfig)
+  const eventConfigRef = useRef<EventConfig>(eventConfig)
 
+  const restProps: Props = {}
+  const eventNameMap: Record<string, boolean> = {}
+  const userRemovePropsMap: Record<string, boolean> = {}
   let hashEventKey = ''
-  const rawEventKeys: Array<string> = []
-  const transformedEventSet = new Set<string>()
+
+  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)
-      }
+      eventConfig[eventMeta.eventName][eventMeta.eventType].push(key)
 
-      if (prefix === 'catch' || prefix === 'capture-catch') {
-        eventConfig[eventName].hasCatch = true
+      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 {}
@@ -309,31 +347,17 @@ const useInnerProps = (
 
     const events: Record<string, (e: ExtendedNativeTouchEvent) => void> = {}
 
-    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)
+    restProps
   )
 }
 export default useInnerProps

package/lib/runtime/components/react/mpx-button.tsx

@@ -45,9 +45,9 @@ import {
   NativeSyntheticEvent,
   useAnimatedValue
 } from 'react-native'
-import { warn } from '@mpxjs/utils'
+import { warn, hasOwn } from '@mpxjs/utils'
 import { GestureDetector, PanGesture } 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, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
@@ -79,7 +79,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
@@ -105,14 +105,14 @@ const OpenTypeEventsMap = new Map<OpenType, OpenTypeEvent>([
 
 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
@@ -211,7 +211,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     'open-type': openType,
     'form-type': formType,
     'enable-var': enableVar,
-    'external-var-context': externalVarContext,
+    'enable-text-pass-through': enableTextPassThrough,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
@@ -282,14 +282,16 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     { color: plain ? plainTextColor : normalTextColor }
   )
 
-  const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle)
+  const styleObj = isHover ? extendObject({}, style, hoverStyle) : style
 
-  const styleObj = extendObject(
-    {},
-    defaultStyle,
-    style,
-    isHover ? hoverStyle : {}
-  )
+  const defaultStyle: Record<string, any> = extendObject({}, defaultViewStyle, defaultTextStyle)
+  // 用户 shorthand 优先：避免 longhand default 反向覆盖
+  if (hasOwn(styleObj, 'margin')) {
+    delete defaultStyle.marginHorizontal
+  }
+  if (hasOwn(styleObj, 'padding')) {
+    delete defaultStyle.paddingHorizontal
+  }
 
   const {
     hasPositionFixed,
@@ -299,7 +301,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     varContextRef,
     setWidth,
     setHeight
-  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(styleObj, { enableVar, parentFontSize, parentWidth, parentHeight, defaultStyle })
 
   const nodeRef = useRef(null)
 
@@ -308,7 +310,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   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!')
@@ -407,7 +409,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
     wrapChildren(
-      props,
+      props.children,
       {
         hasVarDec,
         varContext: varContextRef.current,

package/lib/runtime/components/react/mpx-camera.tsx

@@ -28,7 +28,6 @@ interface CameraProps {
   'parent-width'?: number
   'parent-height'?: number
   'enable-var'?: boolean
-  'external-var-context'?: any
 }
 
 interface TakePhotoOptions {
@@ -81,7 +80,6 @@ const _camera = forwardRef<HandlerRef<any, CameraProps>, CameraProps>((props: Ca
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     'enable-var': enableVar,
-    'external-var-context': externalVarContext,
     style = {}
   } = props
   const styleObj = extendObject(
@@ -95,7 +93,6 @@ const _camera = forwardRef<HandlerRef<any, CameraProps>, CameraProps>((props: Ca
     setHeight
   } = useTransformStyle(styleObj, {
     enableVar,
-    externalVarContext,
     parentFontSize,
     parentWidth,
     parentHeight

package/lib/runtime/components/react/mpx-canvas/index.tsx

@@ -33,8 +33,6 @@ import { createImageData as canvasCreateImageData } from './ImageData'
 import { useConstructorsRegistry } from './constructorsRegistry'
 import Portal from '../mpx-portal'
 
-type WebViewInstance = WebView<{}>
-
 const stylesheet = StyleSheet.create({
   container: { overflow: 'hidden', flex: 0 },
   webview: {
@@ -57,7 +55,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
@@ -67,7 +64,7 @@ interface CanvasProps {
 }
 
 const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasProps>((props: CanvasProps = {}, ref): JSX.Element => {
-  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)
 
@@ -79,7 +76,6 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     setHeight
   } = useTransformStyle(extendObject({}, style, stylesheet.container), {
     enableVar,
-    externalVarContext,
     parentFontSize,
     parentWidth,
     parentHeight
@@ -270,7 +266,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     canvasComponent = createElement(View, innerProps, createElement(
       WebView,
       {
-        ref: (element: WebViewInstance | null) => {
+        ref: (element) => {
           if (canvasRef.current) {
             canvasRef.current.webview = element
           }
@@ -295,7 +291,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   }
 
   canvasComponent = createElement(View, innerProps, createElement(WebView, {
-    ref: (element: WebViewInstance | null) => {
+    ref: (element) => {
       if (canvasRef.current) {
         canvasRef.current.webview = element
       }

package/lib/runtime/components/react/mpx-canvas/utils.tsx

@@ -2,8 +2,6 @@ import { useEffect, useRef } from 'react'
 import { WebView } from 'react-native-webview'
 import Bus from './Bus'
 
-type WebViewInstance = WebView<{}>
-
 export const WEBVIEW_TARGET = '@@WEBVIEW_TARGET'
 
 export const constructors: Record<string, any> = {}
@@ -44,7 +42,9 @@ export interface WebviewMessage {
 }
 
 export interface CanvasInstance {
-  webview: WebViewInstance | null;
+  // react-native-webview@13.17+ 将 WebView 泛型默认值由 {} 改为 undefined，
+  // ref 回调推断出的 WebView<unknown> 无法赋给默认实参化后的类型，这里显式用 any 兼容各版本
+  webview: WebView<any> | null;
   bus: Bus | null;
   context2D: CanvasRenderingContext2D;
   getContext: (contextType: string) => CanvasRenderingContext2D | null;

package/lib/runtime/components/react/mpx-checkbox-group.tsx

@@ -28,7 +28,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
@@ -45,7 +44,6 @@ const CheckboxGroup = forwardRef<
   const {
     style = {},
     'enable-var': enableVar,
-    'external-var-context': externalVarContext,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight
@@ -66,8 +64,6 @@ const CheckboxGroup = forwardRef<
     flexWrap: 'wrap'
   }
 
-  const styleObj = extendObject({}, defaultStyle, style)
-
   const {
     hasPositionFixed,
     hasSelfPercent,
@@ -76,7 +72,7 @@ const CheckboxGroup = forwardRef<
     varContextRef,
     setWidth,
     setHeight
-  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight, defaultStyle })
 
   const nodeRef = useRef(null)
 
@@ -169,7 +165,7 @@ const CheckboxGroup = forwardRef<
       CheckboxGroupContext.Provider,
       { value: contextValue },
       wrapChildren(
-        props,
+        props.children,
         {
           hasVarDec,
           varContext: varContextRef.current

package/lib/runtime/components/react/mpx-checkbox.tsx

@@ -26,7 +26,7 @@ import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } 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'
 
@@ -42,7 +42,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
@@ -89,7 +89,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       color = '#09BB07',
       style = {},
       'enable-var': enableVar,
-      'external-var-context': externalVarContext,
+      'enable-text-pass-through': enableTextPassThrough,
       'parent-font-size': parentFontSize,
       'parent-width': parentWidth,
       'parent-height': parentHeight,
@@ -103,14 +103,12 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> } } | undefined
     let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined
 
-    const defaultStyle = extendObject(
+    const wrapperStyle = extendObject(
       {},
       styles.wrapper,
       disabled ? styles.wrapperDisabled : null
     )
 
-    const styleObj = extendObject({}, styles.container, style)
-
     const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
       if (disabled) return
       const checked = !isChecked
@@ -136,19 +134,19 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       varContextRef,
       setWidth,
       setHeight
-    } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+    } = 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!')
@@ -214,7 +212,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     const finalComponent = createElement(View, innerProps,
       createElement(
         View,
-        { style: defaultStyle },
+        { style: wrapperStyle },
         createElement(Icon, {
           type: 'success_no_circle',
           size: 18,
@@ -223,7 +221,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
         })
       ),
       wrapChildren(
-        props,
+        props.children,
         {
           hasVarDec,
           varContext: varContextRef.current,

package/lib/runtime/components/react/mpx-form.tsx

@@ -9,13 +9,13 @@ import { JSX, useRef, forwardRef, ReactNode, useMemo, createElement } from 'reac
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import { FormContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject, useTextPassThroughValue } from './utils'
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject, useTextPassThrough } from './utils'
 interface FormProps {
   style?: Record<string, any>
   children?: ReactNode
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
+  'enable-text-pass-through'?: boolean
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
@@ -32,7 +32,7 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
   const {
     style,
     'enable-var': enableVar,
-    'external-var-context': externalVarContext,
+    'enable-text-pass-through': enableTextPassThrough,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight
@@ -45,10 +45,10 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
     varContextRef,
     setWidth,
     setHeight
-  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight })
 
   const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
-  const textPassThrough = useTextPassThroughValue(textStyle, textProps)
+  const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough })
 
   const formRef = useRef(null)
   useNodesRef(props, ref, formRef, {
@@ -114,7 +114,7 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
     FormContext.Provider,
     { value: contextValue },
     wrapChildren(
-      props,
+      props.children,
       {
         hasVarDec,
         varContext: varContextRef.current,