@mpxjs/webpack-plugin 2.10.19 → 2.10.21

package/lib/react/style-helper.js

@@ -2,20 +2,24 @@ const postcss = require('postcss')
 const selectorParser = require('postcss-selector-parser')
 const { MPX_TAG_PAGE_SELECTOR } = require('../utils/const')
 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 hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
-function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueName, warn, error }) {
+function getClassMap ({ content, styles, filename, inputFileSystem, mode, srcMode, ctorType, formatValueName, warn, error }) {
   const classMap = ctorType === 'page'
       ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1, height: "'100%'" } }
       : {}
 
-  const root = postcss.parse(content, {
-    from: filename
-  })
+  styles = styles && styles.length
+    ? styles
+    : [{
+        content,
+        filename
+      }]
 
   function formatValue (value) {
     let needStringify = true
@@ -30,7 +34,7 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueN
       }
     }
     if (hairlineRegExp.test(value)) {
-      value = `${formatValueName}(${JSON.stringify(value)}, 'hairlineWidth')`
+      value = `${formatValueName}('hairlineWidth')`
       needStringify = false
     }
     return needStringify ? JSON.stringify(value) : value
@@ -67,99 +71,130 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueN
     }, {})
   }
 
-  const rulesRunner = getRulesRunner({
-    mode,
-    srcMode,
-    type: 'style',
-    testKey: 'prop',
-    warn,
-    error
-  })
-
-  // 目前所有 AtRule 只支持 @media，其他全部给出错误提示
-  root.walkAtRules(rule => {
-    if (rule.name !== 'media') {
-      warn(`Only @media rule is supported in react native mode temporarily, but got @${rule.name}`)
-      // 删除不支持的 AtRule，防止其影响后续解析
-      rule.remove()
+  styles.forEach((style) => {
+    const styleContent = style.content || ''
+    if (!styleContent.trim()) return
+    const styleFilename = style.filename || filename
+    const sourceMap = style.map
+    const diagnostic = {
+      file: styleFilename,
+      source: styleContent,
+      sourceMap,
+      inputFileSystem
     }
-  })
+    const reporter = createDiagnostic({
+      type: 'style',
+      mode,
+      srcMode,
+      warn,
+      error,
+      diagnostic
+    })
+    const root = postcss.parse(styleContent, {
+      from: styleFilename
+    })
+    const rulesRunner = getRulesRunner({
+      mode,
+      srcMode,
+      type: 'style',
+      testKey: 'prop',
+      warn,
+      error,
+      diagnostic
+    })
 
-  root.walkRules(rule => {
-    const classMapValue = {}
-    rule.walkDecls(({ prop, value }) => {
-      if (value === 'undefined' || cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
-      let newData = rulesRunner({ prop, value, selector: rule.selector })
-      if (!newData) return
-      if (!Array.isArray(newData)) {
-        newData = [newData]
-      }
-      newData.forEach(item => {
-        prop = varRegExp.test(item.prop) ? item.prop : dash2hump(item.prop)
-        value = item.value
-        if (Array.isArray(value)) {
-          value = value.map(val => {
-            if (typeof val === 'object') {
-              for (const key in val) {
-                val[key] = formatValue(val[key])
-              }
-              return val
-            } else {
-              return formatValue(val)
-            }
-          })
-        } else if (typeof value === 'object') {
-          for (const key in value) {
-            value[key] = formatValue(value[key])
+    // 目前所有 AtRule 只支持 @media，其他全部给出错误提示
+    root.walkAtRules(rule => {
+      if (rule.name !== 'media') {
+        reporter.warn(`Only @media rule is supported in react native mode temporarily, but got @${rule.name}`, {
+          node: rule,
+          sourceMap,
+          target: {
+            kind: 'css-atrule',
+            name: rule.name,
+            params: rule.params
           }
-        } else {
-          value = formatValue(value)
-        }
-        classMapValue[prop] = value
-      })
+        })
+        // 删除不支持的 AtRule，防止其影响后续解析
+        rule.remove()
+      }
     })
 
-    const classMapKeys = []
-    const options = getMediaOptions(rule.parent.params || '')
-    const isMedia = options.maxWidth || options.minWidth
-    selectorParser(selectors => {
-      selectors.each(selector => {
-        if (selector.nodes.length === 1 && selector.nodes[0].type === 'class') {
-          classMapKeys.push(selector.nodes[0].value)
-        } else {
-          error('Only single class selector is supported in react native mode temporarily.')
+    root.walkRules(rule => {
+      const classMapValue = {}
+      rule.walkDecls((decl) => {
+        let { prop, value } = decl
+        if (value === 'undefined' || cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
+        let newData = rulesRunner && rulesRunner({ prop, value, selector: rule.selector, decl, rule, sourceMap })
+        if (!newData) return
+        if (!Array.isArray(newData)) {
+          newData = [newData]
         }
-      })
-    }).processSync(rule.selector)
-
-    if (classMapKeys.length) {
-      classMapKeys.forEach((key) => {
-        if (Object.keys(classMapValue).length) {
-          let _default = classMap[key]?._default
-          let _media = classMap[key]?._media
-          if (isMedia) {
-            // 当前是媒体查询
-            _default = _default || {}
-            _media = _media || []
-            _media.push({
-              options,
-              value: classMapValue
+        newData.forEach(item => {
+          prop = varRegExp.test(item.prop) ? item.prop : dash2hump(item.prop)
+          value = item.value
+          if (Array.isArray(value)) {
+            value = value.map(val => {
+              if (typeof val === 'object') {
+                for (const key in val) {
+                  val[key] = formatValue(val[key])
+                }
+                return val
+              } else {
+                return formatValue(val)
+              }
             })
-            classMap[key] = {
-              _media,
-              _default
+          } else if (typeof value === 'object') {
+            for (const key in value) {
+              value[key] = formatValue(value[key])
             }
-          } else if (_default) {
-            // 已有媒体查询数据，此次非媒体查询
-            Object.assign(_default, classMapValue)
           } else {
-            // 无媒体查询
+            value = formatValue(value)
+          }
+          classMapValue[prop] = value
+        })
+      })
+
+      const classMapKeys = []
+      const options = getMediaOptions(rule.parent.params || '')
+      const isMedia = options.maxWidth || options.minWidth
+      selectorParser(selectors => {
+        selectors.each(selector => {
+          if (selector.nodes.length === 1 && selector.nodes[0].type === 'class') {
+            classMapKeys.push(selector.nodes[0].value)
+          } else {
+            reporter.error('Only single class selector is supported in react native mode temporarily.', {
+              node: rule,
+              sourceMap,
+              target: {
+                kind: 'selector',
+                value: rule.selector
+              }
+            })
+          }
+        })
+      }).processSync(rule.selector)
+
+      if (classMapKeys.length) {
+        classMapKeys.forEach((key) => {
+          if (Object.keys(classMapValue).length) {
+            // set css defalut value
             const val = classMap[key] || {}
             classMap[key] = Object.assign(val, classMapValue)
+
+            // set css media
+            if (isMedia) {
+              const _media = classMap[key]?._media || []
+              _media.push({
+                options,
+                value: classMapValue
+              })
+              classMap[key]._media = _media
+            }
           }
-        }
-      })
-    }
+        })
+      }
+    })
   })
   return classMap
 }

package/lib/react/template-loader.js

@@ -0,0 +1,161 @@
+const loaderUtils = require('loader-utils')
+const addQuery = require('../utils/add-query')
+const normalize = require('../utils/normalize')
+const parseRequest = require('../utils/parse-request')
+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
+  const mpx = loaderContext.getMpx()
+
+  const {
+    projectRoot,
+    externals,
+    mode,
+    srcMode,
+    env,
+    defs,
+    wxsContentMap,
+    decodeHTMLText,
+    externalClasses,
+    forceProxyEventRules,
+    getModuleId,
+    rnConfig
+  } = mpx
+
+  const { resourcePath, rawResourcePath, queryObj } = parseRequest(loaderContext.resource)
+  const moduleId = getModuleId(resourcePath)
+
+  const warn = (msg, loc) => {
+    loaderContext.emitWarning(
+      new Error('[Mpx template warning][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
+    )
+  }
+  const error = (msg, loc) => {
+    loaderContext.emitError(
+      new Error('[Mpx template error][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
+    )
+  }
+  const parseOptions = {
+    warn,
+    error,
+    mode,
+    srcMode: queryObj.srcMode || srcMode,
+    env,
+    defs,
+    decodeHTMLText,
+    externalClasses,
+    moduleId,
+    filePath: rawResourcePath,
+    forceProxyEvent: matchCondition(resourcePath, forceProxyEventRules),
+    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]
+    }
+  }
+
+  // Generate imports
+  const imports = []
+  if (meta.imports) {
+    const reactTemplateLoaderPath = normalize.lib('react/template-loader')
+    meta.imports.forEach((importSrc) => {
+      const request = loaderUtils.urlToRequest(importSrc, projectRoot)
+      imports.push(`require(${loaderUtils.stringifyRequest(loaderContext, `!!${reactTemplateLoaderPath}!${request}`)})`)
+    })
+  }
+
+  const builtInPaths = meta.builtInComponentsMap || {}
+  const builtInComponents = []
+  Object.keys(builtInPaths).forEach((componentName) => {
+    const componentRequest = loaderUtils.stringifyRequest(loaderContext, addQuery(builtInPaths[componentName], { isComponent: true }))
+    builtInComponents.push(`"${componentName}": function () { return getBuiltInBaseComponent(require(${componentRequest}), { __mpxBuiltIn: true }) }`)
+  })
+
+  // Generate local templates
+  let localTemplatesCode = 'var localTemplates = {\n'
+  if (meta.templates) {
+    Object.keys(meta.templates).forEach((name) => {
+      const template = meta.templates[name]
+      const templateCode = genTemplate(template)
+      if (templateCode) {
+        localTemplatesCode += `${JSON.stringify(name)}: ${templateCode},\n`
+      }
+    })
+  }
+  localTemplatesCode += '};'
+
+  try {
+    const ignoreMap = Object.assign({
+      createElement: true,
+      getComponent: true,
+      getTemplate: true
+    }, meta.wxsModuleMap, templateAssetsIgnoreMap)
+    const bindResult = bindThis.transform(localTemplatesCode, {
+      ignoreMap
+    })
+    localTemplatesCode = bindResult.code
+  } catch (e) {
+    loaderContext.emitError(
+      new Error(`[Mpx template error]: Invalid render function generated by the template, please check!\\n  Error code:\\n  ${localTemplatesCode}\\n  Error Detail:\\n  ${e.stack}`)
+    )
+  }
+
+  let wxsImports = ''
+  for (const module in meta.wxsModuleMap) {
+    const request = loaderUtils.urlToRequest(meta.wxsModuleMap[module], projectRoot)
+    wxsImports += `var ${module} = require(${loaderUtils.stringifyRequest(loaderContext, request)});\n`
+  }
+  const hasTemplateSource = imports.length || (meta.templates && Object.keys(meta.templates).length)
+  const templateHelpersCode = hasTemplateSource
+    ? `var templates = Object.assign({}, ${imports.join(', ') || '{}'});
+    Object.assign(templates, localTemplates);
+    function getTemplate(name) {
+      return templates[name] || function(){};
+    }`
+    : ''
+
+  const output = `
+    ${wxsImports}
+    ${templateAssetsCode}
+    var getBuiltInBaseComponent = require(${loaderUtils.stringifyRequest(loaderContext, normalize.lib('runtime/optionProcessorReact'))}).getComponent;
+    var builtInComponentsMap = {${builtInComponents.join(',')}};
+    ${localTemplatesCode}
+    ${templateHelpersCode}
+    function getBuiltInComponent(name) {
+      var getter = builtInComponentsMap[name];
+      return getter && getter();
+    }
+    function getTemplateComponent(name, getComponent) {
+      return getComponent(name) || getBuiltInComponent(name);
+    }
+    Object.keys(localTemplates).forEach(function (name) {
+      var template = localTemplates[name];
+      localTemplates[name] = function (createElement, getComponent) {
+        return template.call(this, createElement, function (componentName) {
+          return getTemplateComponent(componentName, getComponent);
+        });
+      };
+    });
+    module.exports = localTemplates;
+  `
+  return output
+}

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-async-suspense.jsx

@@ -124,7 +124,7 @@ const AsyncSuspense = ({ type, chunkName, moduleId, innerProps, getLoading, getF
     else if (status === 'error') {
         if (type === 'page') {
             const fallback = getFallback ? getFallback() : DefaultFallback;
-            return createElement(fallback, { onReload: reloadPage });
+            return createElement(fallback, { onReload: reloadPage, bindreload: reloadPage });
         }
         else {
             return getFallback ? createElement(getFallback(), innerProps) : null;

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);