@mpxjs/webpack-plugin 2.10.20 → 2.10.21

package/lib/index.js

@@ -53,6 +53,7 @@ const { transSubpackage } = require('./utils/trans-async-sub-rules')
 const { matchCondition } = require('./utils/match-condition')
 const { getPartialCompileRules } = require('./utils/partial-compile-rules')
 const processDefs = require('./utils/process-defs')
+const { PERF_GROUPS, normalizePerfOptions } = require('./utils/normalize-perf-options')
 const config = require('./config')
 const hash = require('hash-sum')
 const nativeLoaderPath = normalize.lib('native-loader')
@@ -164,13 +165,24 @@ class MpxWebpackPlugin {
     options.transMpxRules = options.transMpxRules || {
       include: () => true
     }
+    // 归一化 perf 配置：{ enable, probes: [...] } → { enable, framework, user, ... }
+    // 分组未知 / typo 在此直接抛错，避免静默失效。
+    const perf = normalizePerfOptions(options.perf)
+    options.perf = perf
     // 通过默认defs配置实现mode及srcMode的注入，简化内部处理逻辑
     options.defs = Object.assign({}, options.defs, {
       __mpx_mode__: options.mode,
       __mpx_src_mode__: options.srcMode,
       __mpx_env__: options.env,
-      __mpx_dynamic_runtime__: options.dynamicRuntime
+      __mpx_dynamic_runtime__: options.dynamicRuntime,
+      // 总开关：@mpxjs/perf 包内部使用，决定 impl 是否进入 bundle。
+      __mpx_perf__: perf.enable
     })
+    // 分组开关：调用方点缀代码使用。开关粒度独立、产物 DCE 独立。
+    for (let i = 0; i < PERF_GROUPS.length; i++) {
+      const k = PERF_GROUPS[i]
+      options.defs[`__mpx_perf_${k}__`] = perf[k]
+    }
     // 批量指定源码mode
     options.modeRules = options.modeRules || {}
     options.generateBuildMap = options.generateBuildMap || false

package/lib/parser.js

@@ -14,7 +14,7 @@ module.exports = (content, { filePath, needMap, mode, env }) => {
   output = compiler.parseComponent(content, {
     mode,
     filePath,
-    pad: 'line',
+    pad: mode !== 'web' && 'line',
     env
   })
   if (needMap) {

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

@@ -17,6 +17,7 @@ module.exports = function getSpec({ warn, error }) {
   // calc(xx)
   const calcExp = /calc\(/
   const envExp = /env\(/
+  const silentVerify = 'silent'
   // 不支持的属性提示
   const unsupportedPropError = ({ prop, value, selector }, { mode }, isError = true) => {
     const tips = isError ? error : warn
@@ -118,7 +119,7 @@ module.exports = function getSpec({ warn, error }) {
   const verifyValues = ({ prop, value, selector }, isError = true) => {
     prop = prop.trim()
     const rawValue = value.trim()
-    const tips = isError ? error : warn
+    const tips = isError === silentVerify ? () => {} : isError ? error : warn
 
     // CSS 自定义属性（--xxx）是变量定义，不属于 RN 样式属性：
     // 不能按 `-height/-color` 等后缀推断类型去校验，否则会把变量定义错误过滤，导致运行时 var() 取值失败
@@ -340,6 +341,36 @@ module.exports = function getSpec({ warn, error }) {
     }
     const urlExp = /url\(["']?(.*?)["']?\)/
     const linearExp = /linear-gradient\(.*\)/
+    const formatBackgroundSize = (value) => {
+      // 不支持逗号分隔的多个值：设置多重背景!!!
+      // 支持一个值:这个值指定图片的宽度，图片的高度隐式的为 auto
+      // 支持两个值:第一个值指定图片的宽度，第二个值指定图片的高度
+      if (parseValues(value, ',').length > 1) { // commas are not allowed in values
+        error(`Value of [${bgPropMap.size}] in ${selector} does not support commas, received [${value}], please check again!`)
+        return false
+      }
+      const values = []
+      parseValues(value).forEach(item => {
+        if (verifyValues({ prop: bgPropMap.size, value: item, selector })) {
+          // 支持 number 值 / container cover auto 枚举
+          values.push(item)
+        }
+      })
+      // value 无有效值时返回false
+      return values.length === 0 ? false : { prop: bgPropMap.size, value: values }
+    }
+    const formatBackgroundPosition = (value) => {
+      const values = []
+      parseValues(value).forEach(item => {
+        if (verifyValues({ prop: bgPropMap.position, value: item, selector })) {
+          // 支持 number 值 /  枚举, center与50%等价
+          values.push(item === 'center' ? '50%' : item)
+        } else {
+          error(`Value of [${bgPropMap.size}] in ${selector} does not support commas, received [${value}], please check again!`)
+        }
+      })
+      return { prop: bgPropMap.position, value: values }
+    }
     switch (prop) {
       case bgPropMap.image: {
         // background-image 支持背景图/渐变/css var
@@ -352,37 +383,13 @@ module.exports = function getSpec({ warn, error }) {
       }
       case bgPropMap.size: {
         // background-size
-        // 不支持逗号分隔的多个值：设置多重背景!!!
-        // 支持一个值:这个值指定图片的宽度，图片的高度隐式的为 auto
-        // 支持两个值:第一个值指定图片的宽度，第二个值指定图片的高度
-        if (parseValues(value, ',').length > 1) { // commas are not allowed in values
-          error(`Value of [${bgPropMap.size}] in ${selector} does not support commas, received [${value}], please check again!`)
-          return false
-        }
-        const values = []
-        parseValues(value).forEach(item => {
-          if (verifyValues({ prop, value: item, selector })) {
-            // 支持 number 值 / container cover auto 枚举
-            values.push(item)
-          }
-        })
-        // value 无有效值时返回false
-        return values.length === 0 ? false : { prop, value: values }
+        return formatBackgroundSize(value)
       }
       case bgPropMap.position: {
-        const values = []
-        parseValues(value).forEach(item => {
-          if (verifyValues({ prop, value: item, selector })) {
-            // 支持 number 值 /  枚举, center与50%等价
-            values.push(item === 'center' ? '50%' : item)
-          } else {
-            error(`Value of [${bgPropMap.size}] in ${selector} does not support commas, received [${value}], please check again!`)
-          }
-        })
-        return { prop, value: values }
+        return formatBackgroundPosition(value)
       }
       case bgPropMap.all: {
-        // background: 仅支持 background-image & background-color & background-repeat
+        // background: 支持 image/color/repeat 与 position/size
         if (cssVariableExp.test(value)) {
           error(`Property [${bgPropMap.all}] in ${selector} is abbreviated property and does not support CSS var`)
           return false
@@ -395,6 +402,37 @@ module.exports = function getSpec({ warn, error }) {
           ]
         }
         const bgMap = []
+        const positionValues = []
+        const sizeValues = []
+        let isSize = false
+        const pushPositionOrSize = (item) => {
+          if (isSize) {
+            if (verifyValues({ prop: bgPropMap.size, value: item, selector }, silentVerify)) {
+              sizeValues.push(item)
+            }
+          } else if (verifyValues({ prop: bgPropMap.position, value: item, selector }, silentVerify)) {
+            positionValues.push(item)
+          }
+        }
+        const handlePositionSize = (item) => {
+          if (item === '/') {
+            isSize = true
+            return true
+          }
+          const parts = parseValues(item, '/')
+          if (parts.length > 1) {
+            parts.forEach((part, index) => {
+              if (index > 0) isSize = true
+              part && pushPositionOrSize(part)
+            })
+            return true
+          }
+          if (isSize || verifyValues({ prop: bgPropMap.position, value: item, selector }, silentVerify)) {
+            pushPositionOrSize(item)
+            return true
+          }
+          return false
+        }
         const values = parseValues(value)
         values.forEach(item => {
           const url = item.match(urlExp)?.[0]
@@ -403,12 +441,22 @@ module.exports = function getSpec({ warn, error }) {
             bgMap.push({ prop: bgPropMap.image, value: url })
           } else if (linerVal) {
             bgMap.push({ prop: bgPropMap.image, value: linerVal })
-          } else if (verifyValues({ prop: bgPropMap.color, value: item }, false)) {
+          } else if (verifyValues({ prop: bgPropMap.color, value: item, selector }, silentVerify)) {
             bgMap.push({ prop: bgPropMap.color, value: item })
-          } else if (verifyValues({ prop: bgPropMap.repeat, value: item, selector }, false)) {
+          } else if (verifyValues({ prop: bgPropMap.repeat, value: item, selector }, silentVerify)) {
             bgMap.push({ prop: bgPropMap.repeat, value: item })
+          } else {
+            handlePositionSize(item)
           }
         })
+        if (positionValues.length) {
+          const position = formatBackgroundPosition(positionValues.join(' '))
+          position && bgMap.push(position)
+        }
+        if (sizeValues.length) {
+          const size = formatBackgroundSize(sizeValues.join(' '))
+          size && bgMap.push(size)
+        }
         return bgMap.length ? bgMap : false
       }
     }

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

@@ -3,7 +3,8 @@ const TAG_NAME = 'block'
 module.exports = function () {
   return {
     test: TAG_NAME,
-    web () {
+    web (tag, data) {
+      data.el.isBlock = true
       return 'template'
     }
   }

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

@@ -13,7 +13,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'audio', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'audio', 'match-media', 'page-container', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print

package/lib/react/processTemplate.js

@@ -8,15 +8,10 @@ const bindThis = require('../template-compiler/bind-this')
 const isEmptyObject = require('../utils/is-empty-object')
 const dash2hump = require('../utils/hump-dash').dash2hump
 const addQuery = require('../utils/add-query')
+const isUrlRequestBase = require('../utils/is-url-request')
 
-function transformCode (code, wxsModuleMap, error) {
+function transformCode (code, ignoreMap, error) {
   try {
-    const ignoreMap = Object.assign({
-      createElement: true,
-      getComponent: true,
-      getTemplate: true
-    }, wxsModuleMap)
-
     const bindResult = bindThis.transform(code, {
       ignoreMap
     })
@@ -42,6 +37,7 @@ module.exports = function (template, {
   const mpx = loaderContext.getMpx()
   const {
     projectRoot,
+    externals,
     mode,
     env,
     defs,
@@ -113,9 +109,25 @@ module.exports = function (template, {
         forceProxyEvent: matchCondition(resourcePath, forceProxyEventRules),
         checkUsingComponents: matchCondition(resourcePath, checkUsingComponentsRules),
         isCustomText: matchCondition(resourcePath, customTextRules),
-        customBuiltInComponents: rnConfig && rnConfig.customBuiltInComponents
+        customBuiltInComponents: rnConfig && rnConfig.customBuiltInComponents,
+        isUrlRequest: (url) => isUrlRequestBase(url, projectRoot, externals)
       }
       const { root, meta } = templateCompiler.parse(template.content, parseOptions)
+      const templateAssetsIgnoreMap = {}
+      let templateAssetsCode = ''
+      if (meta.templateAssets) {
+        Object.keys(meta.templateAssets).forEach((name) => {
+          templateAssetsIgnoreMap[name] = true
+          const request = loaderUtils.urlToRequest(meta.templateAssets[name], projectRoot)
+          templateAssetsCode += `var ${name} = require(${loaderUtils.stringifyRequest(loaderContext, request)});\n`
+        })
+      }
+
+      const ignoreMap = Object.assign({
+        createElement: true,
+        getComponent: true,
+        getTemplate: true
+      }, meta.wxsModuleMap, templateAssetsIgnoreMap)
 
       if (meta.wxsContentMap) {
         for (const module in meta.wxsContentMap) {
@@ -142,7 +154,7 @@ module.exports = function (template, {
           }
         })
         localTemplatesCode += '};'
-        const transformedCode = transformCode(localTemplatesCode, meta.wxsModuleMap, error)
+        const transformedCode = transformCode(localTemplatesCode, ignoreMap, error)
         if (transformedCode) {
           output += transformedCode + '\n'
           templates.push('localTemplates')
@@ -163,6 +175,7 @@ module.exports = function (template, {
         const src = loaderUtils.urlToRequest(meta.wxsModuleMap[module], projectRoot)
         output += `var ${module} = require(${loaderUtils.stringifyRequest(loaderContext, src)});\n`
       }
+      output += templateAssetsCode
 
       const templateHelpersCode = templates.length
         ? `var templates = Object.assign({}, ${templates.join(', ')});
@@ -175,7 +188,7 @@ function getTemplate(name) {
 
       const rawCode = genNode(root, true)
       if (rawCode) {
-        const transformedCode = transformCode(rawCode, meta.wxsModuleMap, error)
+        const transformedCode = transformCode(rawCode, ignoreMap, error)
         if (transformedCode) {
           output += `global.currentInject.render = function (createElement, getComponent) {
   return ${transformedCode}

package/lib/react/style-helper.js

@@ -34,7 +34,7 @@ function getClassMap ({ content, styles, filename, inputFileSystem, mode, srcMod
       }
     }
     if (hairlineRegExp.test(value)) {
-      value = `${formatValueName}(${JSON.stringify(value)}, 'hairlineWidth')`
+      value = `${formatValueName}('hairlineWidth')`
       needStringify = false
     }
     return needStringify ? JSON.stringify(value) : value

package/lib/react/template-loader.js

@@ -6,6 +6,7 @@ const { matchCondition } = require('../utils/match-condition')
 const templateCompiler = require('../template-compiler/compiler')
 const { genTemplate } = require('../template-compiler/gen-node-react')
 const bindThis = require('../template-compiler/bind-this')
+const isUrlRequestBase = require('../utils/is-url-request')
 
 module.exports = function (content) {
   const loaderContext = this
@@ -13,6 +14,7 @@ module.exports = function (content) {
 
   const {
     projectRoot,
+    externals,
     mode,
     srcMode,
     env,
@@ -50,11 +52,21 @@ module.exports = function (content) {
     moduleId,
     filePath: rawResourcePath,
     forceProxyEvent: matchCondition(resourcePath, forceProxyEventRules),
-    customBuiltInComponents: rnConfig && rnConfig.customBuiltInComponents
+    customBuiltInComponents: rnConfig && rnConfig.customBuiltInComponents,
+    isUrlRequest: (url) => isUrlRequestBase(url, projectRoot, externals)
   }
 
   // Parse the template
   const { meta } = templateCompiler.parse(content, parseOptions)
+  const templateAssetsIgnoreMap = {}
+  let templateAssetsCode = ''
+  if (meta.templateAssets) {
+    Object.keys(meta.templateAssets).forEach((name) => {
+      templateAssetsIgnoreMap[name] = true
+      const request = loaderUtils.urlToRequest(meta.templateAssets[name], projectRoot)
+      templateAssetsCode += `var ${name} = require(${loaderUtils.stringifyRequest(loaderContext, request)});\n`
+    })
+  }
   if (meta.wxsContentMap && wxsContentMap) {
     for (const module in meta.wxsContentMap) {
       wxsContentMap[`${rawResourcePath}~${module}`] = meta.wxsContentMap[module]
@@ -96,7 +108,7 @@ module.exports = function (content) {
       createElement: true,
       getComponent: true,
       getTemplate: true
-    }, meta.wxsModuleMap)
+    }, meta.wxsModuleMap, templateAssetsIgnoreMap)
     const bindResult = bindThis.transform(localTemplatesCode, {
       ignoreMap
     })
@@ -123,6 +135,7 @@ module.exports = function (content) {
 
   const output = `
     ${wxsImports}
+    ${templateAssetsCode}
     var getBuiltInBaseComponent = require(${loaderUtils.stringifyRequest(loaderContext, normalize.lib('runtime/optionProcessorReact'))}).getComponent;
     var builtInComponentsMap = {${builtInComponents.join(',')}};
     ${localTemplatesCode}

package/lib/runtime/components/react/context.ts

@@ -1,5 +1,5 @@
 import { createContext, Dispatch, MutableRefObject, SetStateAction } from 'react'
-import type { NativeSyntheticEvent, Animated, ScaledSize } from 'react-native'
+import type { NativeSyntheticEvent, Animated, ScaledSize, TextStyle } from 'react-native'
 import { noop } from '@mpxjs/utils'
 
 export type LabelContextValue = MutableRefObject<{
@@ -70,6 +70,11 @@ export interface StickyContextValue {
   unregisterStickyHeader: Function
 }
 
+export interface TextPassThroughContextValue {
+  textStyle?: TextStyle
+  pendingTextProps?: Record<string, any>
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -84,6 +89,8 @@ export const PickerContext = createContext(null)
 
 export const VarContext = createContext({})
 
+export const TextPassThroughContext = createContext<TextPassThroughContextValue | null>(null)
+
 export const IntersectionObserverContext = createContext<IntersectionObserver | null>(null)
 
 export const RouteContext = createContext<RouteContextValue | null>(null)

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

@@ -1,5 +1,5 @@
 import { Dispatch, MutableRefObject, SetStateAction } from 'react';
-import type { NativeSyntheticEvent, Animated, ScaledSize } from 'react-native';
+import type { NativeSyntheticEvent, Animated, ScaledSize, TextStyle } from 'react-native';
 export type LabelContextValue = MutableRefObject<{
     triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void;
 }>;
@@ -62,6 +62,10 @@ export interface StickyContextValue {
     registerStickyHeader: Function;
     unregisterStickyHeader: Function;
 }
+export interface TextPassThroughContextValue {
+    textStyle?: TextStyle;
+    pendingTextProps?: Record<string, any>;
+}
 export declare const MovableAreaContext: import("react").Context<{
     width: number;
     height: number;
@@ -72,6 +76,7 @@ export declare const RadioGroupContext: import("react").Context<GroupContextValu
 export declare const LabelContext: import("react").Context<LabelContextValue | null>;
 export declare const PickerContext: import("react").Context<null>;
 export declare const VarContext: import("react").Context<{}>;
+export declare const TextPassThroughContext: import("react").Context<TextPassThroughContextValue | null>;
 export declare const IntersectionObserverContext: import("react").Context<IntersectionObserver | null>;
 export declare const RouteContext: import("react").Context<RouteContextValue | null>;
 export declare const SwiperContext: import("react").Context<{}>;

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

@@ -7,6 +7,7 @@ export const RadioGroupContext = createContext(null);
 export const LabelContext = createContext(null);
 export const PickerContext = createContext(null);
 export const VarContext = createContext({});
+export const TextPassThroughContext = createContext(null);
 export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
 export const SwiperContext = createContext({});

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

@@ -257,6 +257,7 @@ const useInnerProps = (props = {}, userRemoveProps = [], rawConfig) => {
         'parent-font-size',
         'parent-width',
         'parent-height',
+        'enable-text-pass-through',
         ...userRemoveProps,
         ...rawEventKeys
     ];

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

@@ -19,7 +19,7 @@
  * ✘ app-parameter
  * ✘ show-message-card
  * ✘ phone-number-no-quota-toast
- * ✘ bindgetuserinfo
+ * ✔ bindgetuserinfo
  * ✘ bindcontact
  * ✘ createliveactivity
  * ✘ bindgetphonenumber

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

@@ -19,7 +19,7 @@
  * ✘ app-parameter
  * ✘ show-message-card
  * ✘ phone-number-no-quota-toast
- * ✘ bindgetuserinfo
+ * ✔ bindgetuserinfo
  * ✘ bindcontact
  * ✘ createliveactivity
  * ✘ bindgetphonenumber
@@ -38,7 +38,7 @@ import { createElement, useEffect, useRef, forwardRef, useContext } from 'react'
 import { View, StyleSheet, Animated, Easing, useAnimatedValue } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { GestureDetector } from 'react-native-gesture-handler';
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils';
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover, useTextPassThroughValue } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { RouteContext, FormContext } from './context';
@@ -173,6 +173,7 @@ const Button = forwardRef((buttonProps, ref) => {
     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);
     if (backgroundStyle) {
         warn('Button does not support background image-related styles!');
     }
@@ -252,7 +253,8 @@ const Button = forwardRef((buttonProps, ref) => {
         'hover-start-time',
         'hover-stay-time',
         'open-type',
-        'form-type'
+        'form-type',
+        'bindgetuserinfo'
     ], {
         layoutRef,
         disableTap: disabled
@@ -260,8 +262,7 @@ const Button = forwardRef((buttonProps, ref) => {
     const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }), wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current,
-        textStyle,
-        textProps
+        textPassThrough
     }));
     const finalComponent = enableHover
         ? createElement(GestureDetector, { gesture: gesture }, baseButton)

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

@@ -246,6 +246,7 @@ const _camera = forwardRef((props, ref) => {
         'mode',
         'resolution',
         'frame-size',
+        'device-position',
         'bindinitdone',
         'bindstop',
         'flash',

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

@@ -60,7 +60,10 @@ const _Canvas = forwardRef((props = {}, ref) => {
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 })
-    }), [], {
+    }), [
+        'originWhitelist',
+        'binderror'
+    ], {
         layoutRef
     });
     const context2D = new CanvasRenderingContext2D(canvasRef.current);

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

@@ -62,7 +62,8 @@ const CheckboxGroup = forwardRef((props, ref) => {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle)
     }), [
-        'name'
+        'name',
+        'bindchange'
     ], {
         layoutRef
     });

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

@@ -10,7 +10,7 @@ import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import Icon from './mpx-icon';
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThroughValue } from './utils';
 import { CheckboxGroupContext, LabelContext } from './context';
 import Portal from './mpx-portal';
 const styles = StyleSheet.create({
@@ -72,6 +72,7 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const textPassThrough = useTextPassThroughValue(textStyle, textProps);
     if (backgroundStyle) {
         warn('Checkbox does not support background image-related styles!');
     }
@@ -90,7 +91,9 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
     }), [
         'value',
         'disabled',
-        'checked'
+        'checked',
+        'color',
+        '_onChange'
     ], {
         layoutRef
     });
@@ -123,8 +126,7 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
     })), wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current,
-        textStyle,
-        textProps
+        textPassThrough
     }));
     if (hasPositionFixed) {
         return createElement(Portal, null, finalComponent);

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

@@ -9,12 +9,13 @@ import { useRef, forwardRef, useMemo, createElement } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import { FormContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject } from './utils';
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject, useTextPassThroughValue } from './utils';
 const _Form = forwardRef((fromProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(fromProps);
     const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const textPassThrough = useTextPassThroughValue(textStyle, textProps);
     const formRef = useRef(null);
     useNodesRef(props, ref, formRef, {
         style: normalStyle
@@ -60,8 +61,7 @@ const _Form = forwardRef((fromProps, ref) => {
     return createElement(View, innerProps, createElement(FormContext.Provider, { value: contextValue }, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current,
-        textStyle,
-        textProps
+        textPassThrough
     })));
 });
 _Form.displayName = 'MpxForm';

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

@@ -42,7 +42,11 @@ const Icon = forwardRef((props, ref) => {
         ref: nodeRef,
         source,
         style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
-    }), [], {
+    }), [
+        'type',
+        'size',
+        'color'
+    ], {
         layoutRef
     });
     const finalComponent = createElement(Image, innerProps);

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { Image as RNImage, ImageStyle, NativeSyntheticEvent, ImageErrorEventData, ImageLoadEventData } from 'react-native';
+import { Image as RNImage, ImageStyle, NativeSyntheticEvent, ImageErrorEventData, ImageLoadEventData, ImageSourcePropType } from 'react-native';
 import { HandlerRef } from './useNodesRef';
 export type Mode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
 export interface ImageProps {
-    src?: string;
+    src?: string | ImageSourcePropType;
     mode?: Mode;
     style?: ImageStyle & Record<string, any>;
     'enable-offset'?: boolean;
@@ -13,6 +13,7 @@ export interface ImageProps {
     'parent-width'?: number;
     'parent-height'?: number;
     'enable-fast-image'?: boolean;
+    'is-svg'?: boolean;
     bindload?: (evt: NativeSyntheticEvent<ImageLoadEventData> | unknown) => void;
     binderror?: (evt: NativeSyntheticEvent<ImageErrorEventData> | unknown) => void;
 }