@mpxjs/webpack-plugin 2.9.64 → 2.9.66

package/lib/config.js

@@ -1,3 +1,5 @@
+const { dash2hump } = require('./utils/hump-dash')
+
 const reactConfig = {
   event: {
     parseEvent (attr) {
@@ -70,7 +72,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -132,9 +138,7 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'on') {
-        return prefix + eventName.replace(/^./, (matched) => {
-          return matched.toUpperCase()
-        })
+        return dash2hump(prefix + '-' + eventName)
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -192,7 +196,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -249,7 +257,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -306,7 +318,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -377,7 +393,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -434,7 +454,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -491,7 +515,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',

package/lib/index.js

@@ -139,6 +139,7 @@ class MpxWebpackPlugin {
     options.writeMode = options.writeMode || 'changed'
     options.autoScopeRules = options.autoScopeRules || {}
     options.autoVirtualHostRules = options.autoVirtualHostRules || {}
+    options.customTextRules = options.customTextRules || {}
     options.forceDisableProxyCtor = options.forceDisableProxyCtor || false
     options.transMpxRules = options.transMpxRules || {
       include: () => true
@@ -173,6 +174,7 @@ class MpxWebpackPlugin {
     options.subpackageModulesRules = options.subpackageModulesRules || {}
     options.forceMainPackageRules = options.forceMainPackageRules || {}
     options.forceProxyEventRules = options.forceProxyEventRules || {}
+    options.disableRequireAsync = options.disableRequireAsync || false
     options.miniNpmPackages = options.miniNpmPackages || []
     options.fileConditionRules = options.fileConditionRules || {
       include: () => true
@@ -687,6 +689,7 @@ class MpxWebpackPlugin {
           projectName: this.options.projectName,
           autoScopeRules: this.options.autoScopeRules,
           autoVirtualHostRules: this.options.autoVirtualHostRules,
+          customTextRules: this.options.customTextRules,
           transRpxRules: this.options.transRpxRules,
           postcssInlineConfig: this.options.postcssInlineConfig,
           decodeHTMLText: this.options.decodeHTMLText,
@@ -708,7 +711,8 @@ class MpxWebpackPlugin {
           useRelativePath: this.options.useRelativePath,
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
-          supportRequireAsync: this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode),
+          // 若配置disableRequireAsync=true, 则全平台构建不支持异步分包
+          supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode)),
           partialCompileRules: this.options.partialCompileRules,
           collectDynamicEntryInfo: ({ resource, packageName, filename, entryType, hasAsync }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {

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

@@ -13,6 +13,7 @@ module.exports = function getSpec ({ warn, error }) {
   const cssVariableExp = /var\(/
   // calc(xx)
   const calcExp = /calc\(/
+  const envExp = /env\(/
   // 不支持的属性提示
   const unsupportedPropError = ({ prop, value, selector }, { mode }, isError = true) => {
     const tips = isError ? error : warn
@@ -85,15 +86,45 @@ module.exports = function getSpec ({ warn, error }) {
       if (rule[1].test(prop)) return rule[0]
     }
   }
+  // 多value解析
+  const parseValues = (str, char = ' ') => {
+    let stack = 0
+    let temp = ''
+    const result = []
+    for (let i = 0; i < str.length; i++) {
+      if (str[i] === '(') {
+        stack++
+      } else if (str[i] === ')') {
+        stack--
+      }
+      // 非括号内 或者 非分隔字符且非空
+      if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+        temp += str[i]
+      }
+      if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+        result.push(temp)
+        temp = ''
+      }
+    }
+    return result
+  }
+  // const getDefaultValueFromVar = (str) => {
+  //   const totalVarExp = /^var\((.+)\)$/
+  //   if (!totalVarExp.test(str)) return str
+  //   const newVal = parseValues((str.match(totalVarExp)?.[1] || ''), ',')
+  //   if (newVal.length <= 1) return ''
+  //   if (!totalVarExp.test(newVal[1])) return newVal[1]
+  //   return getDefaultValueFromVar(newVal[1])
+  // }
   // 属性值校验
   const verifyValues = ({ prop, value, selector }, isError = true) => {
     prop = prop.trim()
     value = value.trim()
     const tips = isError ? error : warn
-    if (cssVariableExp.test(value) || calcExp.test(value)) return true
+    if (cssVariableExp.test(value) || calcExp.test(value) || envExp.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|%|vw|vh)?|hairlineWidth)$/,
+      number: /^((-?(\d+(\.\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 type = getValueType(prop)
@@ -159,12 +190,16 @@ module.exports = function getSpec ({ warn, error }) {
     flex: ['flexGrow', 'flexShrink', 'flexBasis'],
     // flex-flow: <'flex-direction'> or flex-flow: <'flex-direction'> and <'flex-wrap'>
     'flex-flow': ['flexDirection', 'flexWrap'],
-    'border-radius': ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius']
+    'border-radius': ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'],
+    'border-width': ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],
+    'border-color': ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],
+    margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
+    padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft']
   }
   const formatAbbreviation = ({ prop, value, selector }, { mode }) => {
     const original = `${prop}:${value}`
     const props = AbbreviationMap[prop]
-    const values = value.trim().split(/\s(?![^()]*\))/)
+    const values = Array.isArray(value) ? value : parseValues(value)
     const cssMap = []
     let idx = 0
     let propsIdx = 0
@@ -172,7 +207,7 @@ module.exports = function getSpec ({ warn, error }) {
     while (idx < values.length) {
       const prop = props[propsIdx]
       if (!prop) {
-        error(`Value of [${original}] in ${selector} has not enough props to assign, please check again!`)
+        warn(`Value of [${original}] in ${selector} has not enough props to assign, please check again!`)
         break
       }
       const value = values[idx]
@@ -224,39 +259,27 @@ module.exports = function getSpec ({ warn, error }) {
     return cssMap
   }
 
-  // margin padding
-  const formatMargins = ({ prop, value, selector }) => {
-    const values = value.trim().split(/\s(?![^()]*\))/)
-    // format
-    let suffix = []
+  const formatCompositeVal = ({ prop, value, selector }, { mode }) => {
+    const values = parseValues(value).splice(0, 4)
     switch (values.length) {
-      // case 1:
+      case 1:
+        verifyValues({ prop, value, selector }, false)
+        return { prop, value }
       case 2:
-        suffix = ['Vertical', 'Horizontal']
+        values.push(...values)
         break
       case 3:
-        suffix = ['Top', 'Horizontal', 'Bottom']
-        break
-      case 4:
-        suffix = ['Top', 'Right', 'Bottom', 'Left']
+        values.push(values[1])
         break
     }
-    return values.map((value, index) => {
-      const newProp = `${prop}${suffix[index] || ''}`
-      // validate
-      verifyValues({ prop: hump2dash(newProp), value, selector }, false)
-      return {
-        prop: newProp,
-        value: value
-      }
-    })
+    return formatAbbreviation({ prop, value: values, selector }, { mode })
   }
 
   // line-height
   const formatLineHeight = ({ prop, value, selector }) => {
     return verifyValues({ prop, value, selector }) && ({
       prop,
-      value: /^\s*-?\d+(\.\d+)?\s*$/.test(value) ? `${Math.round(value * 100)}%` : value
+      value: /^\s*(-?(\d+(\.\d+)?|\.\d+))\s*$/.test(value) ? `${Math.round(value * 100)}%` : value
     })
   }
 
@@ -273,7 +296,7 @@ module.exports = function getSpec ({ warn, error }) {
       all: 'background'
     }
     const urlExp = /url\(["']?(.*?)["']?\)/
-    const linerExp = /linear-gradient\(["']?(.*?)["']?\)/
+    const linerExp = /linear-gradient\(.*\)\s*$/
     switch (prop) {
       case bgPropMap.image: {
         // background-image 仅支持背景图
@@ -293,12 +316,12 @@ module.exports = function getSpec ({ warn, error }) {
         // 不支持逗号分隔的多个值：设置多重背景!!!
         // 支持一个值:这个值指定图片的宽度，图片的高度隐式的为 auto
         // 支持两个值:第一个值指定图片的宽度，第二个值指定图片的高度
-        if (value.includes(',')) { // commas are not allowed in values
+        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 = []
-        value.trim().split(/\s(?![^()]*\))/).forEach(item => {
+        parseValues(value).forEach(item => {
           if (verifyValues({ prop, value: item, selector })) {
             // 支持 number 值 / container cover auto 枚举
             values.push(item)
@@ -309,7 +332,7 @@ module.exports = function getSpec ({ warn, error }) {
       }
       case bgPropMap.position: {
         const values = []
-        value.trim().split(/\s(?![^()]*\))/).forEach(item => {
+        parseValues(value).forEach(item => {
           if (verifyValues({ prop, value: item, selector })) {
             // 支持 number 值 /  枚举, center与50%等价
             values.push(item === 'center' ? '50%' : item)
@@ -322,7 +345,7 @@ module.exports = function getSpec ({ warn, error }) {
       case bgPropMap.all: {
         // background: 仅支持 background-image & background-color & background-repeat
         const bgMap = []
-        const values = value.trim().split(/\s(?![^()]*\))/)
+        const values = parseValues(value)
         values.forEach(item => {
           const url = item.match(urlExp)?.[0]
           const linerVal = item.match(linerExp)?.[0]
@@ -343,26 +366,10 @@ module.exports = function getSpec ({ warn, error }) {
     return false
   }
 
-  // border-radius 缩写转换
-  const getBorderRadius = ({ prop, value, selector }, { mode }) => {
-    const values = value.trim().split(/\s(?![^()]*\))/)
-    if (values.length === 1) {
-      verifyValues({ prop, value, selector }, false)
-      return { prop, value }
-    } else {
-      if (values.length === 2) {
-        values.push(...values)
-      } else if (values.length === 3) {
-        values.push(values[1])
-      }
-      return formatAbbreviation({ prop, value: values.join(' ') }, { mode })
-    }
-  }
-
   // transform 转换
   const formatTransform = ({ prop, value, selector }, { mode }) => {
     if (Array.isArray(value)) return { prop, value }
-    const values = value.trim().split(/\s(?![^()]*\))/)
+    const values = parseValues(value)
     const transform = []
     values.forEach(item => {
       const match = item.match(/([/\w]+)\(([^)]+)\)/)
@@ -398,6 +405,10 @@ module.exports = function getSpec ({ warn, error }) {
               // 2 个以上的值处理
               key = key.replace('3d', '')
               const vals = val.split(',').splice(0, key === 'rotate' ? 4 : 3)
+              // scale(.5) === scaleX(.5) scaleY(.5)
+              if (vals.length === 1 && key === 'scale') {
+                vals.push(vals[0])
+              }
               const xyz = ['X', 'Y', 'Z']
               transform.push(...vals.map((v, index) => {
                 if (key !== 'rotate' && index > 1) {
@@ -429,7 +440,7 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   const getIntegersFlex = ({ prop, value, selector }) => {
-    if (isNumber(value) && value >= 0) {
+    if ((isNumber(value) && value >= 0) || cssVariableExp.test(value)) {
       return { prop, value }
     } else {
       error(`Value of [${prop}] in ${selector} accepts any floating point value >= 0, received [${value}], please check again!`)
@@ -438,7 +449,7 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   const formatFlex = ({ prop, value, selector }) => {
-    let values = value.trim().split(/\s(?![^()]*\))/)
+    let values = parseValues(value)
     if (values.length > 3) {
       error(`Value of [flex] in ${selector} supports up to three values, received [${value}], please check again!`)
       values = values.splice(0, 3)
@@ -461,14 +472,14 @@ module.exports = function getSpec ({ warn, error }) {
     }
     // 最后一个值是flexBasis 的有效值（auto或者有单位百分比、px等）
     // flex 0 1 auto flex auto flex 1 auto flex 1 30px flex 1 10% flex 1 1 auto
-    if (!isNumber(lastOne)) {
+    if (!isNumber(lastOne) || !cssVariableExp.test(value)) {
       // 添加 grow 和 shrink
       // 在设置 flex basis 有效值的场景下，如果没有设置 grow 和 shrink，则默认为1
       // 单值 flex: 1 1 <flex-basis>
       // 双值 flex: <flex-grow> 1 <flex-basis>
       // 三值 flex: <flex-grow> <flex-shrink> <flex-basis>
       for (let i = 0; i < 2; i++) {
-        const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: isNumber(values[i]) ? values[i] : 1 })
+        const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: isNumber(values[i]) || cssVariableExp.test(value) ? values[i] : 1 })
         item && cssMap.push(item)
       }
       if (!isAuto) {
@@ -531,15 +542,10 @@ module.exports = function getSpec ({ warn, error }) {
         ios: checkBackgroundImage,
         android: checkBackgroundImage
       },
-      {
-        test: 'border-radius',
-        ios: getBorderRadius,
-        android: getBorderRadius
-      },
       { // margin padding 内外边距的处理
-        test: /^(margin|padding)$/,
-        ios: formatMargins,
-        android: formatMargins
+        test: /^(margin|padding|border-radius|border-width|border-color)$/,
+        ios: formatCompositeVal,
+        android: formatCompositeVal
       },
       { // line-height 换算
         test: 'line-height',

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

@@ -5,6 +5,7 @@ const normalizeComponentRules = require('../normalize-component-rules')
 const isValidIdentifierStr = require('../../../utils/is-valid-identifier-str')
 const { parseMustacheWithContext, stringifyWithResolveComputed } = require('../../../template-compiler/compiler')
 const normalize = require('../../../utils/normalize')
+const { dash2hump } = require('../../../utils/hump-dash')
 
 module.exports = function getSpec ({ warn, error }) {
   const spec = {
@@ -301,9 +302,7 @@ module.exports = function getSpec ({ warn, error }) {
           const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ali' })
           const rEventName = runRules(eventRules, eventName, { mode: 'ali' })
           return {
-            name: rPrefix + rEventName.replace(/^./, (matched) => {
-              return matched.toUpperCase()
-            }) + modifierStr,
+            name: dash2hump(rPrefix + '-' + rEventName) + modifierStr,
             value
           }
         },
@@ -312,8 +311,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'swan' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'swan' })
           const rEventName = runRules(eventRules, eventName, { mode: 'swan' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
@@ -324,8 +324,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'qq' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'qq' })
           const rEventName = runRules(eventRules, eventName, { mode: 'qq' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
@@ -336,8 +337,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'jd' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'jd' })
           const rEventName = runRules(eventRules, eventName, { mode: 'jd' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
@@ -360,8 +362,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'tt' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'tt' })
           const rEventName = runRules(eventRules, eventName, { mode: 'tt' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
@@ -372,8 +375,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'dd' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'dd' })
           const rEventName = runRules(eventRules, eventName, { mode: 'dd' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value

package/lib/react/processTemplate.js

@@ -27,7 +27,8 @@ module.exports = function (template, {
     decodeHTMLText,
     externalClasses,
     checkUsingComponents,
-    autoVirtualHostRules
+    autoVirtualHostRules,
+    customTextRules
   } = mpx
   const { resourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
@@ -84,7 +85,8 @@ module.exports = function (template, {
         globalComponents: [],
         // web模式下实现抽象组件
         componentGenerics,
-        hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
+        hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules),
+        isCustomText: matchCondition(resourcePath, customTextRules)
       })
 
       if (meta.wxsContentMap) {

package/lib/react/style-helper.js

@@ -20,11 +20,8 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
     if ((matched = numberRegExp.exec(value))) {
       value = matched[1]
       needStringify = false
-    } else if ((matched = unitRegExp.exec(value))) {
-      value = `global.__unit.${matched[2]}(${matched[1]})`
-      needStringify = false
-    } else if (hairlineRegExp.test(value)) {
-      value = 'global.__hairlineWidth'
+    } else if (unitRegExp.test(value) || hairlineRegExp.test(value)) {
+      value = `global.__formatValue(${JSON.stringify(value)})`
       needStringify = false
     }
     return needStringify ? JSON.stringify(value) : value

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

@@ -25,6 +25,12 @@ export interface FormContextValue {
   reset: () => void
 }
 
+export interface IntersectionObserver {
+  [key: number]: {
+    throttleMeasure: () => void
+  }
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -38,3 +44,5 @@ export const LabelContext = createContext<LabelContextValue | null>(null)
 export const PickerContext = createContext(null)
 
 export const VarContext = createContext({})
+
+export const IntersectionObserverContext = createContext<IntersectionObserver | null>(null)

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

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

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

@@ -179,7 +179,8 @@ const Button = forwardRef((buttonProps, ref) => {
         ...(applyHoverEffect && hoverStyle)
     };
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef } = useNodesRef(props, ref, { defaultStyle });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { defaultStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
     if (backgroundStyle) {

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

@@ -25,7 +25,8 @@ const CheckboxGroup = forwardRef((props, ref) => {
         ...style
     };
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef } = useNodesRef(props, ref, { defaultStyle });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { defaultStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const getSelectionValue = () => {
         const arr = [];

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

@@ -4,7 +4,7 @@
  * ✔ checked
  * ✔ color
  */
-import { useState, forwardRef, useEffect, useContext } from 'react';
+import { useState, useRef, forwardRef, useEffect, useContext } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
@@ -76,7 +76,8 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
         onChange(evt);
     };
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef } = useNodesRef(props, ref, {
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
         defaultStyle,
         change: onChange
     });

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

@@ -16,7 +16,8 @@ const _Form = forwardRef((fromProps, ref) => {
     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 { nodeRef: formRef } = useNodesRef(props, ref);
+    const formRef = useRef(null);
+    useNodesRef(props, ref, formRef);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef });
     const submit = () => {
         const { bindsubmit } = props;

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

@@ -3,7 +3,7 @@
  * ✔ size
  * ✔ color
  */
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { Image } from 'react-native';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef';
@@ -28,7 +28,8 @@ const Icon = forwardRef((props, ref) => {
         ...style
     };
     const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef } = useNodesRef(props, ref, { defaultStyle });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { defaultStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const innerProps = useInnerProps(props, {
         ref: nodeRef,

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

@@ -67,7 +67,8 @@ const Image = forwardRef((props, ref) => {
         ...style,
         overflow: 'hidden'
     };
-    const { nodeRef } = useNodesRef(props, ref, {
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
         defaultStyle
     });
     const onLayout = ({ nativeEvent: { layout: { width, height } } }) => {

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

@@ -79,7 +79,8 @@ const Input = forwardRef((props, ref) => {
         }
     };
     const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef } = useNodesRef(props, ref);
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
         if (inputValue !== value) {

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

@@ -19,7 +19,8 @@ const Label = forwardRef((labelProps, ref) => {
         ...style
     };
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef } = useNodesRef(props, ref, { defaultStyle });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { defaultStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
     if (backgroundStyle) {