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

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

@@ -9,9 +9,9 @@ module.exports = function getSpec ({ warn, error }) {
     // React Native ios 不支持的 CSS property
     ios: /^(vertical-align)$/,
     // React Native android 不支持的 CSS property
-    android: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/,
+    android: /^(text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/,
     // TODO: rnoh 文档暂未找到 css 属性支持说明，暂时同步 android，同时需要注意此处校验是否有缺失，类似 will-change 之类属性
-    harmony: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/
+    harmony: /^(text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/
   }
   const isNum = (v) => !isNaN(+v)
   // var(xx)
@@ -31,11 +31,12 @@ module.exports = function getSpec ({ warn, error }) {
 
   // 不支持的属性提示
   const unsupportedPropError = ({ prop, value, selector }, { mode }, isError = true) => {
+    if (isError === silentVerify) return
     const tips = isError ? error : warn
     tips(`Property [${prop}] on ${selector} is not supported in ${mode} environment!`)
   }
   // prop 校验
-  const verifyProps = ({ prop, value, selector }, { mode }, isError = true) => {
+  const verifyProps = ({ prop, value, selector }, { mode, isError = true }) => {
     prop = prop.trim()
     if (unsupportedPropExp.test(prop) || unsupportedPropMode[mode].test(prop)) {
       unsupportedPropError({ prop, value, selector }, { mode }, isError)
@@ -87,6 +88,11 @@ module.exports = function getSpec ({ warn, error }) {
     'background-repeat': ['no-repeat'],
     width: ['auto', ValueType.length],
     height: ['auto', ValueType.length],
+    left: ['auto', ValueType.length],
+    right: ['auto', ValueType.length],
+    top: ['auto', ValueType.length],
+    bottom: ['auto', ValueType.length],
+    inset: ['auto', ValueType.length],
     'flex-basis': ['auto', ValueType.length],
     margin: ['auto', ValueType.length],
     'margin-top': ['auto', ValueType.length],
@@ -98,12 +104,16 @@ module.exports = function getSpec ({ warn, error }) {
     // outline-style 走 enum 校验；与 border-style 对齐，不支持 double / groove / ridge
     'outline-style': ['solid', 'dotted', 'dashed', 'none']
   }
+  const getSupportedPropValArr = (prop, mode) => {
+    if ((mode === 'android' || mode === 'harmony') && prop === 'text-decoration-style') return ['solid']
+    return SUPPORTED_PROP_VAL_ARR[prop]
+  }
   // 获取值类型
   const getValueType = (prop) => {
     const propValueTypeRules = [
       // 重要！！优先判断是不是枚举类型
       [ValueType.enum, new RegExp('^(' + Object.keys(SUPPORTED_PROP_VAL_ARR).join('|') + ')$')],
-      [ValueType.length, /^((gap|left|right|top|bottom)|(.+-(width|height|left|right|top|bottom|radius|spacing|size|gap|offset)))$/],
+      [ValueType.length, /^(gap|(.+-(width|height|left|right|top|bottom|radius|spacing|size|gap|offset)))$/],
       [ValueType.integer, /^((opacity|flex-grow|flex-shrink|z-index)|(.+-(index|opacity)))$/],
       [ValueType.color, /^(color|(.+-color))$/]
     ]
@@ -111,6 +121,7 @@ module.exports = function getSpec ({ warn, error }) {
       if (rule[1].test(prop)) return rule[0]
     }
   }
+  const getDashProp = (prop) => hump2dash(prop.replace(/\..+/, ''))
 
   // 从 CSS 变量中提取 fallback 值进行验证
   // 返回值：fallback 值 | null（没有 fallback）| undefined（循环引用）
@@ -135,7 +146,7 @@ module.exports = function getSpec ({ warn, error }) {
   // 返回值：
   // - 通过：返回 true
   // - 失败：返回 false
-  const verifyValues = ({ prop, value, selector }, isError = true) => {
+  const verifyValues = ({ prop, value, selector }, { isError = true, mode } = {}) => {
     prop = prop.trim()
     const rawValue = value.trim()
     const tips = isError === silentVerify ? () => { } : isError ? error : warn
@@ -165,9 +176,10 @@ module.exports = function getSpec ({ warn, error }) {
     // calc() / env() 跳过值校验，但保留 rawValue 输出
     if (calcExp.test(valueForVerify) || envExp.test(valueForVerify)) return true
     const type = getValueType(prop)
+    const supportedPropValArr = getSupportedPropValArr(prop, mode)
     const tipsType = (type) => {
       const example = type === ValueType.enum
-        ? SUPPORTED_PROP_VAL_ARR[prop]?.join(',')
+        ? supportedPropValArr?.join(',')
         : valueTypeExample[type]
       tips(`Value of ${prop} in ${selector} should be ${type}${example ? `, eg ${example}` : ''}, received [${rawValue}], please check again!`)
     }
@@ -199,14 +211,14 @@ module.exports = function getSpec ({ warn, error }) {
         // 输出仍保留 raw value，运行时由 RN `processFontVariant` 自行 `split(' ')` 归一为数组。
         if (prop === 'font-variant') {
           const tokens = parseValues(valueForVerify)
-          if (!tokens.length || !tokens.every(t => SUPPORTED_PROP_VAL_ARR[prop].includes(t))) {
+          if (!tokens.length || !tokens.every(t => supportedPropValArr.includes(t))) {
             tipsType(type)
             return false
           }
           return true
         }
-        const isIn = SUPPORTED_PROP_VAL_ARR[prop].includes(valueForVerify)
-        const isType = Object.keys(valueExp).some(item => valueExp[item].test(valueForVerify) && SUPPORTED_PROP_VAL_ARR[prop].includes(ValueType[item]))
+        const isIn = supportedPropValArr.includes(valueForVerify)
+        const isType = Object.keys(valueExp).some(item => supportedPropValArr.includes(ValueType[item]) && valueExp[item].test(valueForVerify))
         if (!isIn && !isType) {
           tipsType(type)
           return false
@@ -218,7 +230,7 @@ module.exports = function getSpec ({ warn, error }) {
   }
   // prop & value 校验：过滤的不合法的属性和属性值
   const verification = ({ prop, value, selector }, { mode }) => {
-    return verifyProps({ prop, value, selector }, { mode }) && verifyValues({ prop, value, selector }) && ({ prop, value })
+    return verifyProps({ prop, value, selector }, { mode }) && verifyValues({ prop, value, selector }, { mode }) && ({ prop, value })
   }
 
   // 简写转换规则
@@ -327,9 +339,9 @@ module.exports = function getSpec ({ warn, error }) {
   const getVerifiedProp = (props, value, selector, mode, used) => {
     return props.find(prop => {
       if (used[prop]) return false
-      const newProp = hump2dash(prop.replace(/\..+/, ''))
-      return verifyValues({ prop: newProp, value, selector }, silentVerify) &&
-        verifyProps({ prop: newProp, value, selector }, { mode }, false)
+      const newProp = getDashProp(prop)
+      return verifyValues({ prop: newProp, value, selector }, { mode, isError: silentVerify }) &&
+        verifyProps({ prop: newProp, value, selector }, { mode, isError: silentVerify })
     })
   }
 
@@ -348,7 +360,7 @@ module.exports = function getSpec ({ warn, error }) {
       return { prop, value: values[0] }
     }
     values.forEach(value => {
-      if (prop === 'text-decoration' && verifyValues({ prop: 'text-decoration-line', value, selector }, silentVerify)) {
+      if (prop === 'text-decoration' && verifyValues({ prop: 'text-decoration-line', value, selector }, { isError: silentVerify, mode })) {
         switch (value) {
           case 'underline':
             hasUnderline = true
@@ -364,7 +376,7 @@ module.exports = function getSpec ({ warn, error }) {
       }
       const matchedProp = getVerifiedProp(props, value, selector, mode, used)
       if (!matchedProp) {
-        warn(`Value of [${original}] in ${selector} is invalid, received [${value}], please check again!`)
+        warn(`Value of [${original}] in ${selector} contains unsupported value [${value}], please check again!`)
         return
       }
       used[matchedProp] = true
@@ -412,8 +424,8 @@ module.exports = function getSpec ({ warn, error }) {
         break
       }
       const value = values[idx]
-      const newProp = hump2dash(prop.replace(/\..+/, ''))
-      if (!verifyProps({ prop: newProp, value, selector }, { mode }, diff === 0)) {
+      const newProp = getDashProp(prop)
+      if (!verifyProps({ prop: newProp, value, selector }, { mode, isError: diff === 0 })) {
         // 有 ios or android 不支持的 prop，跳过 prop
         if (diff === 0) {
           propsIdx++
@@ -421,7 +433,7 @@ module.exports = function getSpec ({ warn, error }) {
         } else {
           propsIdx++
         }
-      } else if (!verifyValues({ prop: newProp, value, selector }, diff === 0)) {
+      } else if (!verifyValues({ prop: newProp, value, selector }, { isError: diff === 0, mode })) {
         // 值不合法 跳过 value
         if (diff === 0) {
           propsIdx++
@@ -440,20 +452,14 @@ module.exports = function getSpec ({ warn, error }) {
     return cssMap
   }
 
-  // 单值直接返回（RN 原生支持单值 DimensionValue）的属性：margin / padding / border-* 四值简写
-  // 不含 gap / inset：
-  // - inset：RN inset 长属性非稳定，单值透传会留下不可靠的 inset key，必须展开到 top/right/bottom/left
-  // - gap：RN gap / rowGap / columnGap 只接受 number；单值串虽然后续 style-helper formatValue 也会处理，
-  //   但展开到 rowGap / columnGap 与运行时 runtimeForceExpandCompositeMap 行为保持对齐，更可读
-  const compositeSingleValuePassthrough = (prop) => prop !== 'gap' && prop !== 'inset'
-
   const formatCompositeVal = ({ prop, value, selector }, { mode }) => {
     // 槽位数由 AbbreviationMap[prop].length 决定（gap=2，inset/margin/padding/border-*=4）
     const count = AbbreviationMap[prop].length
     const values = parseValues(value).splice(0, count)
-    // 单值短路：margin / padding 等 RN 原生支持单值，原样透传；gap / inset 单值也需展开，不走此捷径
-    if (values.length === 1 && compositeSingleValuePassthrough(prop)) {
-      verifyValues({ prop, value, selector }, false)
+    // 单值短路：margin / padding / inset / border-* 等 RN 原生支持单值 DimensionValue，原样透传；
+    // gap 单值仍需展开（RN gap / rowGap / columnGap 只接受 number，展开后与运行时 runtimeForceExpandCompositeMap 对齐）
+    if (values.length === 1 && prop !== 'gap') {
+      verifyValues({ prop, value, selector }, { isError: false })
       return { prop, value }
     }
     if (count === 2) {
@@ -461,7 +467,7 @@ module.exports = function getSpec ({ warn, error }) {
       if (values.length === 1) values.push(values[0])
     } else {
       switch (values.length) {
-        case 1: values.push(values[0], values[0], values[0]); break // 仅 inset 命中（margin/padding 已被上面短路）
+        // case 1 已被上面单值短路兜走（margin / padding / inset / border-* 四值简写均原样透传单值）
         case 2: values.push(...values); break
         case 3: values.push(values[1]); break
       }
@@ -569,12 +575,12 @@ module.exports = function getSpec ({ warn, error }) {
         let isSize = false
         const pushPositionOrSize = (item) => {
           if (isSize) {
-            if (verifyValues({ prop: bgPropMap.size, value: item, selector }, silentVerify)) {
+            if (verifyValues({ prop: bgPropMap.size, value: item, selector }, { isError: silentVerify, mode })) {
               sizeValues.push(item)
             } else {
               warn(`Value of [${bgPropMap.all}:${value}] in ${selector} does not support background-size token [${item}], please check again!`)
             }
-          } else if (verifyValues({ prop: bgPropMap.position, value: item, selector }, silentVerify)) {
+          } else if (verifyValues({ prop: bgPropMap.position, value: item, selector }, { isError: silentVerify, mode })) {
             positionValues.push(item)
           } else {
             warn(`Value of [${bgPropMap.all}:${value}] in ${selector} does not support background-position token [${item}], please check again!`)
@@ -593,7 +599,7 @@ module.exports = function getSpec ({ warn, error }) {
             })
             return true
           }
-          if (isSize || verifyValues({ prop: bgPropMap.position, value: item, selector }, silentVerify)) {
+          if (isSize || verifyValues({ prop: bgPropMap.position, value: item, selector }, { isError: silentVerify, mode })) {
             pushPositionOrSize(item)
             return true
           }
@@ -607,9 +613,9 @@ 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, selector }, silentVerify)) {
+          } else if (verifyValues({ prop: bgPropMap.color, value: item, selector }, { isError: silentVerify, mode })) {
             bgMap.push({ prop: bgPropMap.color, value: item })
-          } else if (verifyValues({ prop: bgPropMap.repeat, value: item, selector }, silentVerify)) {
+          } else if (verifyValues({ prop: bgPropMap.repeat, value: item, selector }, { isError: silentVerify, mode })) {
             bgMap.push({ prop: bgPropMap.repeat, value: item })
           } else if (!handlePositionSize(item)) {
             // 既不是 url / linear-gradient / color / repeat / position-size，也不是合法 position 起头的 token
@@ -876,8 +882,8 @@ module.exports = function getSpec ({ warn, error }) {
         tokens.splice(i + 1, 1)
       }
       const [sizePart, lhPart] = parseValues(t, '/')
-      if (verifyValues({ prop: 'font-weight', value: sizePart, selector }, silentVerify)) continue
-      if (verifyValues({ prop: 'font-size', value: sizePart, selector }, silentVerify)) {
+      if (verifyValues({ prop: 'font-weight', value: sizePart, selector }, { isError: silentVerify, mode })) continue
+      if (verifyValues({ prop: 'font-size', value: sizePart, selector }, { isError: silentVerify, mode })) {
         sizeIdx = i
         cssMap.push({ prop: 'fontSize', value: sizePart })
         if (lhPart) lineHeight = lhPart
@@ -893,13 +899,13 @@ module.exports = function getSpec ({ warn, error }) {
     for (let i = 0; i < sizeIdx; i++) {
       const t = tokens[i]
       if (t === 'normal') continue // 默认值跳过
-      if (verifyValues({ prop: 'font-style', value: t, selector }, silentVerify)) {
+      if (verifyValues({ prop: 'font-style', value: t, selector }, { isError: silentVerify, mode })) {
         cssMap.push({ prop: 'fontStyle', value: t })
       } else if (t === 'small-caps') {
         // CSS font 简写的 variant 槽位仅 <font-variant-css2>（normal | small-caps）；
         // 字符串透传，RN processFontVariant 会 split 归一为数组，与 font-variant 长属性同口径
         cssMap.push({ prop: 'fontVariant', value: t })
-      } else if (verifyValues({ prop: 'font-weight', value: t, selector }, silentVerify)) {
+      } else if (verifyValues({ prop: 'font-weight', value: t, selector }, { isError: silentVerify, mode })) {
         cssMap.push({ prop: 'fontWeight', value: t })
       } else {
         // font-stretch / 数字型 font-variant-numeric / system 关键字等 → 非必填槽位，warn 并忽略该 token、保留其余

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/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/dist/mpx-button.d.ts

@@ -56,7 +56,6 @@ export interface ButtonProps {
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
     'enable-text-pass-through'?: boolean;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     style?: ViewStyle & TextStyle & Record<string, any>;

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

@@ -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, 'enable-text-pass-through': enableTextPassThrough, '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';
@@ -175,7 +175,7 @@ const Button = forwardRef((buttonProps, ref) => {
     if (hasOwn(styleObj, 'padding')) {
         delete defaultStyle.paddingHorizontal;
     }
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, parentFontSize, parentWidth, parentHeight, defaultStyle });
+    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 });

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

@@ -18,7 +18,6 @@ interface CameraProps {
         type: string;
         data: string;
     }) => void;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     'enable-var'?: boolean;

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

@@ -12,14 +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, 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,
-        parentFontSize,
         parentWidth,
         parentHeight
     });
@@ -209,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);
             }
         };

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

@@ -17,7 +17,6 @@ interface CanvasProps {
     style?: Record<string, any>;
     originWhitelist?: Array<string>;
     'enable-var'?: boolean;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;

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

@@ -39,12 +39,11 @@ const stylesheet = StyleSheet.create({
     }
 });
 const _Canvas = forwardRef((props = {}, ref) => {
-    const { style = {}, originWhitelist = ['*'], 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, originWhitelist = ['*'], 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const [isLoaded, setIsLoaded] = useState(false);
     const nodeRef = useRef(null);
     const { normalStyle, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(extendObject({}, style, stylesheet.container), {
         enableVar,
-        parentFontSize,
         parentWidth,
         parentHeight
     });

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

@@ -9,7 +9,6 @@ export interface CheckboxGroupProps {
     style?: ViewStyle & Record<string, any>;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     children: ReactNode;

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

@@ -12,7 +12,7 @@ import Portal from './mpx-portal';
 const CheckboxGroup = forwardRef((props, ref) => {
     const propsRef = useRef({});
     propsRef.current = props;
-    const { style = {}, 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const formContext = useContext(FormContext);
     let formValuesMap;
     if (formContext) {
@@ -23,7 +23,7 @@ const CheckboxGroup = forwardRef((props, ref) => {
         flexDirection: 'row',
         flexWrap: 'wrap'
     };
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight, defaultStyle });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight, defaultStyle });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });

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

@@ -19,7 +19,6 @@ export interface CheckboxProps extends Selection {
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
     'enable-text-pass-through'?: boolean;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     children?: ReactNode;

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

@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
 });
 const Checkbox = forwardRef((checkboxProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(checkboxProps);
-    const { value = '', disabled = false, checked = false, color = '#09BB07', style = {}, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap, _onChange } = props;
+    const { value = '', disabled = false, checked = false, color = '#09BB07', style = {}, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap, _onChange } = props;
     const [isChecked, setIsChecked] = useState(!!checked);
     const groupContext = useContext(CheckboxGroupContext);
     let groupValue;
@@ -63,7 +63,7 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
         onChange(evt);
     };
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight, defaultStyle: styles.container });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight, defaultStyle: styles.container });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle,

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

@@ -13,7 +13,6 @@ interface FormProps {
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
     'enable-text-pass-through'?: boolean;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     bindsubmit?: (evt: {

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

@@ -12,8 +12,8 @@ import { FormContext } from './context';
 import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject, useTextPassThrough } from './utils';
 const _Form = forwardRef((fromProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(fromProps);
-    const { style, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight });
+    const { style, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight });
     const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
     const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
     const formRef = useRef(null);

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

@@ -9,7 +9,6 @@ export interface IconProps {
     style?: TextStyle & Record<string, any>;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
 }

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

@@ -30,11 +30,11 @@ const IconTypeMap = new Map([
     ['clear', Clear]
 ]);
 const Icon = forwardRef((props, ref) => {
-    const { type, size = 23, color, style = {}, 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { type, size = 23, color, style = {}, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const source = IconTypeMap.get(type);
     const defaultStyle = { width: ~~size, height: ~~size };
     const styleObj = extendObject({}, defaultStyle, style);
-    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });

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

@@ -8,7 +8,6 @@ export interface ImageProps {
     style?: ImageStyle & Record<string, any>;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     'enable-fast-image'?: boolean;