@mpxjs/webpack-plugin 2.9.62 → 2.9.64

package/lib/index.js

@@ -1812,7 +1812,6 @@ try {
         }
 
         if (isWeb(mpx.mode)) {
-          const mpxStyleOptions = queryObj.mpxStyleOptions
           const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
           const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher')
           let cssLoaderIndex = -1
@@ -1837,8 +1836,7 @@ try {
             }
             if (loaderIndex > -1) {
               loaders.splice(loaderIndex + 1, 0, {
-                loader: styleCompilerPath,
-                options: (mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {}
+                loader: styleCompilerPath
               })
             }
           }

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

@@ -9,16 +9,20 @@ module.exports = function getSpec ({ warn, error }) {
     // React Native android 不支持的 CSS property
     android: /^(text-decoration-style|text-decoration-color|shadow-offset|shadow-opacity|shadow-radius)$/
   }
+  // var(xx)
+  const cssVariableExp = /var\(/
+  // calc(xx)
+  const calcExp = /calc\(/
   // 不支持的属性提示
-  const unsupportedPropError = ({ prop, mode }) => {
-    error(`Property [${prop}] is not supported in React Native ${mode} environment!`)
+  const unsupportedPropError = ({ prop, value, selector }, { mode }, isError = true) => {
+    const tips = isError ? error : warn
+    tips(`Property [${prop}] on ${selector} is not supported in ${mode} environment!`)
   }
   // prop 校验
-  const verifyProps = ({ prop, value }, { mode }, isError = true) => {
+  const verifyProps = ({ prop, value, selector }, { mode }, isError = true) => {
     prop = prop.trim()
-    const tips = isError ? error : warn
     if (unsupportedPropExp.test(prop) || unsupportedPropMode[mode].test(prop)) {
-      tips(`Property [${prop}] is not supported in React Native ${mode} environment!`)
+      unsupportedPropError({ prop, value, selector }, { mode }, isError)
       return false
     }
     return true
@@ -82,27 +86,36 @@ module.exports = function getSpec ({ warn, error }) {
     }
   }
   // 属性值校验
-  const verifyValues = ({ prop, value }, isError = true) => {
+  const verifyValues = ({ prop, value, selector }, isError = true) => {
     prop = prop.trim()
     value = value.trim()
-    const type = getValueType(prop)
+    const tips = isError ? error : warn
+    if (cssVariableExp.test(value) || calcExp.test(value)) return true
     const namedColor = ['transparent', 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen']
     const valueExp = {
-      number: /^(-?\d+(\.\d+)?)(rpx|px|%)?$/,
+      number: /^((-?\d+(\.\d+)?)(rpx|px|%|vw|vh)?|hairlineWidth)$/,
       color: new RegExp(('^(' + namedColor.join('|') + ')$') + '|(^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$)|^(rgb|rgba|hsl|hsla|hwb)\\(.+\\)$')
     }
-    const tips = isError ? error : warn
+    const type = getValueType(prop)
+    const tipsType = (type) => {
+      const info = {
+        [ValueType.number]: '2rpx,10%,30rpx',
+        [ValueType.color]: 'rgb,rgba,hsl,hsla,hwb,named color,#000000',
+        [ValueType.enum]: `${SUPPORTED_PROP_VAL_ARR[prop]?.join(',')}`
+      }
+      tips(`Value of ${prop} in ${selector} should be ${type}, eg ${info[type]}, received [${value}], please check again!`)
+    }
     switch (type) {
       case ValueType.number: {
         if (!valueExp.number.test(value)) {
-          tips(`The value type of [${prop}] only supports [Number] in React Native environment, eg 10rpx, 10px, 10%, 10, please check again`)
+          tipsType(type)
           return false
         }
         return true
       }
       case ValueType.color: {
         if (!valueExp.color.test(value)) {
-          tips(`The value type of [${prop}] only supports [Color] in React Native environment, eg #000, rgba(0,0,0,0), please check again`)
+          tipsType(type)
           return false
         }
         return true
@@ -111,7 +124,7 @@ module.exports = function getSpec ({ warn, error }) {
         const isIn = SUPPORTED_PROP_VAL_ARR[prop].includes(value)
         const isType = Object.keys(valueExp).some(item => valueExp[item].test(value) && SUPPORTED_PROP_VAL_ARR[prop].includes(ValueType[item]))
         if (!isIn && !isType) {
-          tips(`Property [${prop}] only support value [${SUPPORTED_PROP_VAL_ARR[prop]?.join(',')}] in React Native environment, the value [${value}] does not support!`)
+          tipsType(type)
           return false
         }
         return true
@@ -120,8 +133,8 @@ module.exports = function getSpec ({ warn, error }) {
     return true
   }
   // prop & value 校验：过滤的不合法的属性和属性值
-  const verification = ({ prop, value }, { mode }) => {
-    return verifyProps({ prop, value }, { mode }) && verifyValues({ prop, value }) && ({ prop, value })
+  const verification = ({ prop, value, selector }, { mode }) => {
+    return verifyProps({ prop, value, selector }, { mode }) && verifyValues({ prop, value, selector }) && ({ prop, value })
   }
 
   // 简写转换规则
@@ -148,7 +161,7 @@ module.exports = function getSpec ({ warn, error }) {
     'flex-flow': ['flexDirection', 'flexWrap'],
     'border-radius': ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius']
   }
-  const formatAbbreviation = ({ prop, value }, { mode }) => {
+  const formatAbbreviation = ({ prop, value, selector }, { mode }) => {
     const original = `${prop}:${value}`
     const props = AbbreviationMap[prop]
     const values = value.trim().split(/\s(?![^()]*\))/)
@@ -159,12 +172,12 @@ module.exports = function getSpec ({ warn, error }) {
     while (idx < values.length) {
       const prop = props[propsIdx]
       if (!prop) {
-        error(`the value of [${original}] has not enough props to assign in React Native environment, please check again`)
+        error(`Value of [${original}] in ${selector} has not enough props to assign, please check again!`)
         break
       }
       const value = values[idx]
       const newProp = hump2dash(prop.replace(/\..+/, ''))
-      if (!verifyProps({ prop: newProp, value }, { mode }, diff === 0)) {
+      if (!verifyProps({ prop: newProp, value, selector }, { mode }, diff === 0)) {
         // 有 ios or android 不支持的 prop，跳过 prop
         if (diff === 0) {
           propsIdx++
@@ -172,7 +185,7 @@ module.exports = function getSpec ({ warn, error }) {
         } else {
           propsIdx++
         }
-      } else if (!verifyValues({ prop: newProp, value }, diff === 0)) {
+      } else if (!verifyValues({ prop: newProp, value, selector }, diff === 0)) {
         // 值不合法 跳过 value
         if (diff === 0) {
           propsIdx++
@@ -212,7 +225,7 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   // margin padding
-  const formatMargins = ({ prop, value }) => {
+  const formatMargins = ({ prop, value, selector }) => {
     const values = value.trim().split(/\s(?![^()]*\))/)
     // format
     let suffix = []
@@ -231,7 +244,7 @@ module.exports = function getSpec ({ warn, error }) {
     return values.map((value, index) => {
       const newProp = `${prop}${suffix[index] || ''}`
       // validate
-      verifyValues({ prop: hump2dash(newProp), value }, false)
+      verifyValues({ prop: hump2dash(newProp), value, selector }, false)
       return {
         prop: newProp,
         value: value
@@ -240,8 +253,8 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   // line-height
-  const formatLineHeight = ({ prop, value }) => {
-    return verifyValues({ prop, value }) && ({
+  const formatLineHeight = ({ prop, value, selector }) => {
+    return verifyValues({ prop, value, selector }) && ({
       prop,
       value: /^\s*-?\d+(\.\d+)?\s*$/.test(value) ? `${Math.round(value * 100)}%` : value
     })
@@ -250,7 +263,7 @@ module.exports = function getSpec ({ warn, error }) {
   // background 相关属性的转换 Todo
   // 仅支持以下属性，不支持其他背景相关的属性
   // /^((?!(-color)).)*background((?!(-color)).)*$/ 包含background且不包含background-color
-  const checkBackgroundImage = ({ prop, value }, { mode }) => {
+  const checkBackgroundImage = ({ prop, value, selector }, { mode }) => {
     const bgPropMap = {
       image: 'background-image',
       color: 'background-color',
@@ -260,17 +273,18 @@ module.exports = function getSpec ({ warn, error }) {
       all: 'background'
     }
     const urlExp = /url\(["']?(.*?)["']?\)/
+    const linerExp = /linear-gradient\(["']?(.*?)["']?\)/
     switch (prop) {
       case bgPropMap.image: {
         // background-image 仅支持背景图
         const imgUrl = value.match(urlExp)?.[0]
-        if (/.*linear-gradient*./.test(value)) {
-          error(`<linear-gradient()> is not supported in React Native ${mode} environment!`)
-        }
+        const linerVal = value.match(linerExp)?.[0]
         if (imgUrl) {
           return { prop, value: imgUrl }
+        } else if (linerVal) {
+          return { prop, value: linerVal }
         } else {
-          error(`[${prop}] only support value <url()>`)
+          error(`Value of ${prop} in ${selector} selector only support value <url()> or <linear-gradient()>, received ${value}, please check again!`)
           return false
         }
       }
@@ -280,12 +294,12 @@ module.exports = function getSpec ({ warn, error }) {
         // 支持一个值:这个值指定图片的宽度，图片的高度隐式的为 auto
         // 支持两个值:第一个值指定图片的宽度，第二个值指定图片的高度
         if (value.includes(',')) { // commas are not allowed in values
-          error(`background size value[${value}] does not support commas in React Native ${mode} environment!`)
+          error(`Value of [${bgPropMap.size}] in ${selector} does not support commas, received [${value}], please check again!`)
           return false
         }
         const values = []
         value.trim().split(/\s(?![^()]*\))/).forEach(item => {
-          if (verifyValues({ prop, value: item })) {
+          if (verifyValues({ prop, value: item, selector })) {
             // 支持 number 值 / container cover auto 枚举
             values.push(item)
           }
@@ -296,14 +310,13 @@ module.exports = function getSpec ({ warn, error }) {
       case bgPropMap.position: {
         const values = []
         value.trim().split(/\s(?![^()]*\))/).forEach(item => {
-          if (verifyValues({ prop, value: item })) {
+          if (verifyValues({ prop, value: item, selector })) {
             // 支持 number 值 /  枚举, center与50%等价
             values.push(item === 'center' ? '50%' : item)
           } else {
-            error(`background position value[${value}] does not support in React Native ${mode} environment!`)
+            error(`Value of [${bgPropMap.size}] in ${selector} does not support commas, received [${value}], please check again!`)
           }
         })
-
         return { prop, value: values }
       }
       case bgPropMap.all: {
@@ -312,28 +325,29 @@ module.exports = function getSpec ({ warn, error }) {
         const values = value.trim().split(/\s(?![^()]*\))/)
         values.forEach(item => {
           const url = item.match(urlExp)?.[0]
-          if (/.*linear-gradient*./.test(item)) {
-            error(`<linear-gradient()> is not supported in React Native ${mode} environment!`)
-          } else if (url) {
+          const linerVal = item.match(linerExp)?.[0]
+          if (url) {
             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)) {
             bgMap.push({ prop: bgPropMap.color, value: item })
-          } else if (verifyValues({ prop: bgPropMap.repeat, value: item }, false)) {
+          } else if (verifyValues({ prop: bgPropMap.repeat, value: item, selector }, false)) {
             bgMap.push({ prop: bgPropMap.repeat, value: item })
           }
         })
         return bgMap.length ? bgMap : false
       }
     }
-    unsupportedPropError({ prop, mode })
+    unsupportedPropError({ prop, value, selector }, { mode })
     return false
   }
 
   // border-radius 缩写转换
-  const getBorderRadius = ({ prop, value }, { mode }) => {
+  const getBorderRadius = ({ prop, value, selector }, { mode }) => {
     const values = value.trim().split(/\s(?![^()]*\))/)
     if (values.length === 1) {
-      verifyValues({ prop, value }, false)
+      verifyValues({ prop, value, selector }, false)
       return { prop, value }
     } else {
       if (values.length === 2) {
@@ -346,7 +360,7 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   // transform 转换
-  const formatTransform = ({ prop, value }, { mode }) => {
+  const formatTransform = ({ prop, value, selector }, { mode }) => {
     if (Array.isArray(value)) return { prop, value }
     const values = value.trim().split(/\s(?![^()]*\))/)
     const transform = []
@@ -387,7 +401,7 @@ module.exports = function getSpec ({ warn, error }) {
               const xyz = ['X', 'Y', 'Z']
               transform.push(...vals.map((v, index) => {
                 if (key !== 'rotate' && index > 1) {
-                  unsupportedPropError({ prop: `${key}Z`, mode })
+                  unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
                 }
                 return { [`${key}${xyz[index] || ''}`]: v.trim() }
               }))
@@ -397,11 +411,11 @@ module.exports = function getSpec ({ warn, error }) {
           case 'scaleZ':
           default:
             // 不支持的属性处理
-            unsupportedPropError({ prop: key, mode })
+            unsupportedPropError({ prop, value, selector }, { mode })
             break
         }
       } else {
-        error(`Property [${prop}] is invalid, please check the value!`)
+        error(`Property [${prop}] is invalid in ${selector}, received [${value}], please check again!`)
       }
     })
     return {
@@ -414,19 +428,19 @@ module.exports = function getSpec ({ warn, error }) {
     return !isNaN(+value)
   }
 
-  const getIntegersFlex = ({ prop, value }) => {
+  const getIntegersFlex = ({ prop, value, selector }) => {
     if (isNumber(value) && value >= 0) {
       return { prop, value }
     } else {
-      error(`The value of ${prop} accepts any floating point value >= 0.`)
+      error(`Value of [${prop}] in ${selector} accepts any floating point value >= 0, received [${value}], please check again!`)
       return false
     }
   }
 
-  const formatFlex = ({ prop, value }, { mode }) => {
+  const formatFlex = ({ prop, value, selector }) => {
     let values = value.trim().split(/\s(?![^()]*\))/)
     if (values.length > 3) {
-      error('The value of prop [flex] supports up to three values')
+      error(`Value of [flex] in ${selector} supports up to three values, received [${value}], please check again!`)
       values = values.splice(0, 3)
     }
     const cssMap = []
@@ -441,7 +455,7 @@ module.exports = function getSpec ({ warn, error }) {
         // value=initial 则 flexShrink=1，其他场景都是0
         cssMap.push(...[{ prop: 'flexGrow', value: 0 }, { prop: 'flexShrink', value: +(values[0] === 'initial') }])
       } else {
-        error('When setting the value of flex to none or initial, only one value is supported.')
+        error(`Value of [${prop}] in ${selector} is invalid, When setting the value of flex to none or initial, only one value is supported.`)
       }
       return cssMap
     }
@@ -481,25 +495,25 @@ module.exports = function getSpec ({ warn, error }) {
     return cssMap
   }
 
-  const formatFontFamily = ({ prop, value }) => {
+  const formatFontFamily = ({ prop, value, selector }) => {
     // 去掉引号 取逗号分隔后的第一个
     const newVal = value.replace(/"|'/g, '').trim()
     const values = newVal.split(',').filter(i => i)
     if (!newVal || !values.length) {
-      error(`The value of prop [${prop}: ${value}] is invaild, please check again`)
+      error(`Value of [${prop}] is invalid in ${selector}, received [${value}], please check again!`)
       return false
     } else if (values.length > 1) {
-      warn(`The value of prop [${prop}] only supports one, and the first one is used by default`)
+      warn(`Value of [${prop}] only supports one in ${selector}, received [${value}], and the first one is used by default.`)
     }
     return { prop, value: values[0].trim() }
   }
 
-  const formatBoxShadow = ({ prop, value }, { mode }) => {
+  const formatBoxShadow = ({ prop, value, selector }, { mode }) => {
     value = value.trim()
     if (value === 'none') {
       return false
     }
-    const cssMap = formatAbbreviation({ prop, value }, { mode })
+    const cssMap = formatAbbreviation({ prop, value, selector }, { mode })
     if (mode === 'android') return cssMap
     // ios 阴影需要额外设置 shadowOpacity=1
     cssMap.push({

package/lib/react/processStyles.js

@@ -31,6 +31,7 @@ module.exports = function (styles, {
         scoped,
         extract: false
       }
+      // todo 建立新的request在内部导出classMap，便于样式模块复用
       loaderContext.importModule(JSON.parse(getRequestString('styles', style, extraOptions, i))).then((result) => {
         if (Array.isArray(result)) {
           result = result.map((item) => {

package/lib/react/processTemplate.js

@@ -113,13 +113,12 @@ module.exports = function (template, {
         try {
           const ignoreMap = Object.assign({
             createElement: true,
-            getComponent: true,
-            rootProps: true
+            getComponent: true
           }, meta.wxsModuleMap)
           const bindResult = bindThis.transform(rawCode, {
             ignoreMap
           })
-          output += `global.currentInject.render = function (createElement, getComponent, rootProps) {
+          output += `global.currentInject.render = function (createElement, getComponent) {
   return ${bindResult.code}
 };\n`
         } catch (e) {

package/lib/react/style-helper.js

@@ -2,8 +2,10 @@ const postcss = require('postcss')
 const selectorParser = require('postcss-selector-parser')
 const getRulesRunner = require('../platform/index')
 const dash2hump = require('../utils/hump-dash').dash2hump
-const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/
-const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
+const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh)\s*$/
+const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
+const hairlineRegExp = /^\s*hairlineWidth\s*$/
+const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
 function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
   const classMap = {}
@@ -15,11 +17,14 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
   function formatValue (value) {
     let matched
     let needStringify = true
-    if ((matched = pxRegExp.exec(value))) {
+    if ((matched = numberRegExp.exec(value))) {
       value = matched[1]
       needStringify = false
-    } else if ((matched = rpxRegExp.exec(value))) {
-      value = `this.__rpx(${matched[1]})`
+    } else if ((matched = unitRegExp.exec(value))) {
+      value = `global.__unit.${matched[2]}(${matched[1]})`
+      needStringify = false
+    } else if (hairlineRegExp.test(value)) {
+      value = 'global.__hairlineWidth'
       needStringify = false
     }
     return needStringify ? JSON.stringify(value) : value
@@ -38,13 +43,13 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
     const classMapValue = {}
     rule.walkDecls(({ prop, value }) => {
       if (cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
-      let newData = rulesRunner({ prop, value })
+      let newData = rulesRunner({ prop, value, selector: rule.selector })
       if (!newData) return
       if (!Array.isArray(newData)) {
         newData = [newData]
       }
       newData.forEach(item => {
-        prop = dash2hump(item.prop)
+        prop = varRegExp.test(item.prop) ? item.prop : dash2hump(item.prop)
         value = item.value
         if (Array.isArray(value)) {
           value = value.map(val => {

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

@@ -1,4 +1,4 @@
-import { createContext, Dispatch, MutableRefObject, SetStateAction } from 'react';
+import { createContext, Dispatch, MutableRefObject, SetStateAction } from 'react'
 import { NativeSyntheticEvent } from 'react-native'
 
 export type LabelContextValue = MutableRefObject<{
@@ -15,14 +15,14 @@ export interface GroupContextValue {
 }
 
 export interface FormFieldValue {
-  getValue: () => any;
-  resetValue: ({ newVal, type }: { newVal?: any; type?: string }) => void;
+  getValue: () => any
+  resetValue: ({ newVal, type }: { newVal?: any; type?: string }) => void
 }
 
 export interface FormContextValue {
-  formValuesMap: Map<string, FormFieldValue>;
-  submit: () => void;
-  reset: () => void;
+  formValuesMap: Map<string, FormFieldValue>
+  submit: () => void
+  reset: () => void
 }
 
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
@@ -35,4 +35,6 @@ export const RadioGroupContext = createContext<GroupContextValue | null>(null)
 
 export const LabelContext = createContext<LabelContextValue | null>(null)
 
-export const PickerContext = createContext(null)
+export const PickerContext = createContext(null)
+
+export const VarContext = createContext({})

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

@@ -5,3 +5,4 @@ export const CheckboxGroupContext = createContext(null);
 export const RadioGroupContext = createContext(null);
 export const LabelContext = createContext(null);
 export const PickerContext = createContext(null);
+export const VarContext = createContext({});

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

@@ -71,7 +71,7 @@ export const getCustomEvent = (type = '', oe = {}, { detail = {}, layoutRef }, p
         preventDefault: oe.preventDefault
     };
 };
-const useInnerProps = (props = {}, additionalProps = {}, removeProps = [], rawConfig) => {
+const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], rawConfig) => {
     const ref = useRef({
         startTimer: {
             bubble: null,
@@ -91,6 +91,17 @@ const useInnerProps = (props = {}, additionalProps = {}, removeProps = [], rawCo
     const propsRef = useRef({});
     const eventConfig = {};
     const config = rawConfig || { layoutRef: { current: {} }, disableTouch: false, disableTap: false };
+    const removeProps = [
+        'children',
+        'enable-background',
+        'enable-offset',
+        'enable-var',
+        'external-var-context',
+        'parent-font-size',
+        'parent-width',
+        'parent-height',
+        ...userRemoveProps
+    ];
     propsRef.current = { ...props, ...additionalProps };
     for (const key in eventConfigMap) {
         if (propsRef.current[key]) {