@mpxjs/webpack-plugin 2.9.69 → 2.9.70

package/lib/parser.js

@@ -14,7 +14,7 @@ module.exports = (content, { filePath, needMap, mode, env }) => {
   output = compiler.parseComponent(content, {
     mode,
     filePath,
-    pad: 'line',
+    // pad: 'line', // stylus编译遇到大量空行时会出现栈溢出，故注释掉
     env
   })
   if (needMap) {

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

@@ -156,7 +156,9 @@ module.exports = function getSpec ({ warn, error }) {
     },
     {
       test: 'usingComponents',
-      web: fixComponentName('usingComponents')
+      web: fixComponentName('usingComponents'),
+      ios: fixComponentName('usingComponents'),
+      android: fixComponentName('usingComponents')
     },
     {
       test: 'usingComponents',
@@ -256,12 +258,21 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   const spec = {
-    supportedModes: ['ali', 'swan', 'qq', 'tt', 'jd', 'qa', 'dd', 'web'],
-    normalizeTest,
-    page: [
-      ...windowRules,
-      ...componentRules
+    supportedModes: [
+      'ali',
+      'swan',
+      'qq',
+      'tt',
+      'jd',
+      'qa',
+      'dd',
+      'web',
+      'ios',
+      'android'
     ],
+
+    normalizeTest,
+    page: [...windowRules, ...componentRules],
     component: componentRules,
     window: windowRules,
     tabBar: {
@@ -297,7 +308,7 @@ module.exports = function getSpec ({ warn, error }) {
           ali (input) {
             const value = input.list
             delete input.list
-            input.items = value.map(item => {
+            input.items = value.map((item) => {
               return runRules(spec.tabBar.list, item, {
                 mode: 'ali',
                 normalizeTest,
@@ -361,7 +372,9 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'usingComponents',
-        web: fixComponentName('usingComponents')
+        web: fixComponentName('usingComponents'),
+        ios: fixComponentName('usingComponents'),
+        android: fixComponentName('usingComponents')
       },
       {
         test: 'usingComponents',

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

@@ -373,11 +373,12 @@ module.exports = function getSpec ({ warn, error }) {
 
   // transform 转换
   const formatTransform = ({ prop, value, selector }, { mode }) => {
-    if (Array.isArray(value)) return { prop, value }
+    // css var & 数组直接返回
+    if (Array.isArray(value) || cssVariableExp.test(value)) return { prop, value }
     const values = parseValues(value)
     const transform = []
     values.forEach(item => {
-      const match = item.match(/([/\w]+)\(([^)]+)\)/)
+      const match = item.match(/([/\w]+)\((.+)\)/)
       if (match && match.length >= 3) {
         let key = match[1]
         const val = match[2]
@@ -398,7 +399,7 @@ module.exports = function getSpec ({ warn, error }) {
             break
           case 'matrix':
           case 'matrix3d':
-            transform.push({ [key]: val.split(',').map(val => +val) })
+            transform.push({ [key]: parseValues(val, ',').map(val => +val) })
             break
           case 'translate':
           case 'scale':
@@ -406,23 +407,23 @@ module.exports = function getSpec ({ warn, error }) {
           case 'rotate3d': // x y z angle
           case 'translate3d': // x y 支持 z不支持
           case 'scale3d': // x y 支持 z不支持
-            {
-              // 2 个以上的值处理
-              key = key.replace('3d', '')
-              const vals = val.split(',', 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) {
-                  unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
-                }
-                return { [`${key}${xyz[index] || ''}`]: v.trim() }
-              }))
-              break
+          {
+            // 2 个以上的值处理
+            key = key.replace('3d', '')
+            const vals = parseValues(val, ',').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) {
+                unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
+              }
+              return { [`${key}${xyz[index] || ''}`]: v.trim() }
+            }))
+            break
+          }
           case 'translateZ':
           case 'scaleZ':
           default:
@@ -455,14 +456,17 @@ module.exports = function getSpec ({ warn, error }) {
 
   const formatFlex = ({ prop, value, selector }) => {
     let values = parseValues(value)
+    // 值大于3 去前三
     if (values.length > 3) {
-      error(`Value of [flex] in ${selector} supports up to three values, received [${value}], please check again!`)
+      warn(`Value of [flex] in ${selector} supports up to three values, received [${value}], please check again!`)
       values = values.splice(0, 3)
     }
     const cssMap = []
-    const lastOne = values[values.length - 1]
-    const isAuto = lastOne === 'auto'
-    // 枚举值 none initial
+    // 单个css var 直接设置 flex 属性
+    if (values.length === 1 && cssVariableExp.test(value)) {
+      return { prop, value }
+    }
+    // 包含枚举值 none initial
     if (values.includes('initial') || values.includes('none')) {
       // css flex: initial ===> flex: 0 1 ===> rn flex 0 1
       // css flex: none ===> css flex: 0 0 ===> rn flex 0 0
@@ -475,38 +479,31 @@ module.exports = function getSpec ({ warn, error }) {
       }
       return cssMap
     }
-    // 最后一个值是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) || !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]) || cssVariableExp.test(value) ? values[i] : 1 })
+    // 只有1-2个值且最后的值是flexBasis 的有效值（auto或者有单位百分比、px等）
+    // 在设置 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 < 3; i++) {
+      if (i < 2) {
+        // 添加 grow 和 shrink
+        const isValid = isNumber(values[0]) || cssVariableExp.test(values[0])
+        // 兜底 1
+        const val = isValid ? values[0] : 1
+        const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: val, selector })
         item && cssMap.push(item)
+        isValid && values.shift()
+      } else {
+        // 添加 flexBasis
+        // 有单位(百分比、px等) 的 value 赋值 flexBasis，auto 不处理，兜底 0
+        const val = values[0] || 0
+        if (val !== 'auto') {
+          cssMap.push({
+            prop: 'flexBasis',
+            value: val
+          })
+        }
       }
-      if (!isAuto) {
-        // 有单位(百分比、px等) 的 value 赋值 flexBasis，auto 不处理
-        cssMap.push({
-          prop: 'flexBasis',
-          value: lastOne
-        })
-      }
-      return cssMap
-    }
-    // 纯数值：value 按flex-grow flex-shrink flex-basis 顺序赋值
-    // 兜底 shrink & basis
-    if (values.length === 1) {
-      values.push(...[1, 0])
-    } else if (values.length === 2) {
-      values.push(0)
-    }
-    // 循环赋值
-    for (let i = 0; i < values.length; i++) {
-      const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: values[i] })
-      item && cssMap.push(item)
     }
     return cssMap
   }
@@ -514,7 +511,7 @@ module.exports = function getSpec ({ warn, error }) {
   const formatFontFamily = ({ prop, value, selector }) => {
     // 去掉引号 取逗号分隔后的第一个
     const newVal = value.replace(/"|'/g, '').trim()
-    const values = newVal.split(',').filter(i => i)
+    const values = parseValues(newVal, ',')
     if (!newVal || !values.length) {
       error(`Value of [${prop}] is invalid in ${selector}, received [${value}], please check again!`)
       return false

package/lib/platform/template/wx/component-config/fix-component-name.js

@@ -1,21 +1,24 @@
 const { isOriginTag, isBuildInTag } = require('../../../../utils/dom-tag-config')
 
 module.exports = function () {
+  const handleComponentTag = (el, data) => {
+    const newTag = `mpx-com-${el.tag}`
+    const usingComponents = data.usingComponents || []
+    // 当前组件名与原生tag或内建tag同名，对组件名进行转义
+    // json转义见：platform/json/wx/index.js fixComponentName
+    if (usingComponents.includes(newTag)) {
+      el.tag = newTag
+    }
+    return el
+  }
+
   return {
     waterfall: true,
     skipNormalize: true,
-    supportedModes: ['web'],
+    supportedModes: ['web', 'ios', 'android'],
     test: (input) => isOriginTag(input) || isBuildInTag(input),
-    // 输出web时对组件名进行转义避免与原生tag和内建tag冲突
-    web (el, data) {
-      const newTag = `mpx-com-${el.tag}`
-      const usingComponents = data.usingComponents || []
-      // 当前组件名与原生tag或内建tag同名，对组件名进行转义
-      // json转义见：platform/json/wx/index.js fixComponentName
-      if (usingComponents.includes(newTag)) {
-        el.tag = newTag
-      }
-      return el
-    }
+    web: handleComponentTag,
+    ios: handleComponentTag,
+    android: handleComponentTag
   }
 }

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

@@ -82,8 +82,8 @@ module.exports = function getComponentConfigs ({ warn, error }) {
 
   // 转换规则只需以微信为基准配置微信和支付宝的差异部分，比如微信和支付宝都支持但是写法不一致，或者微信支持而支付宝不支持的部分(抛出错误或警告)
   return [
-    ...unsupported({ print }),
     fixComponentName({ print }),
+    ...unsupported({ print }),
     ad({ print }),
     view({ print }),
     scrollView({ print }),

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

@@ -92,7 +92,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(placeholder-style|placeholder-class|cursor-spacing|always-embed|adjust-position|hold-keyboard|safe-password-.+)$/,
+        test: /^(placeholder-style|placeholder-class|cursor-spacing|always-embed|hold-keyboard|safe-password-.+)$/,
         ios: iosPropLog,
         android: androidPropLog
       }

package/lib/platform/template/wx/component-config/rich-text.js

@@ -12,6 +12,14 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-rich-text'
     },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-rich-text'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-rich-text'
+    },
     props: [
       {
         test: /^(space)$/,

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

@@ -31,7 +31,7 @@ module.exports = function ({ print }) {
     },
     props: [
       {
-        test: /^(display-multiple-items|skip-hidden-item-layout|easing-function)$/,
+        test: /^(display-multiple-items|skip-hidden-item-layout)$/,
         ali: aliPropLog
       },
       {

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

@@ -78,7 +78,7 @@ module.exports = function ({ print }) {
         }
       },
       {
-        test: /^(placeholder-style|placeholder-class|cursor-spacing|always-embed|adjust-position|hold-keyboard|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
+        test: /^(placeholder-style|placeholder-class|cursor-spacing|always-embed|hold-keyboard|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
         ios: iosPropLog,
         android: androidPropLog
       }

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

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

package/lib/react/processTemplate.js

@@ -119,6 +119,9 @@ module.exports = function (template, {
           }, meta.wxsModuleMap)
           const bindResult = bindThis.transform(rawCode, {
             ignoreMap
+            // customBindThis (path, t) {
+            //   path.replaceWith(t.callExpression(t.identifier('getValue'), [t.stringLiteral(path.node.name)]))
+            // }
           })
           output += `global.currentInject.render = function (createElement, getComponent) {
   return ${bindResult.code}

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

@@ -5,6 +5,8 @@ export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
 }>
 
+export type KeyboardAvoidContextValue = (enabled: boolean) => void
+
 export interface GroupValue {
   [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> }
 }
@@ -48,3 +50,5 @@ export const VarContext = createContext({})
 export const IntersectionObserverContext = createContext<IntersectionObserver | null>(null)
 
 export const RouteContext = createContext<number | null>(null)
+
+export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)

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

@@ -8,3 +8,4 @@ export const PickerContext = createContext(null);
 export const VarContext = createContext({});
 export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
+export const KeyboardAvoidContext = createContext(null);

package/lib/runtime/components/react/dist/event.config.js

@@ -1,27 +1,27 @@
 const eventConfigMap = {
-    bindtap: ['onTouchStart', 'onTouchMove', 'onTouchEnd'],
-    bindlongpress: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'],
-    bindtouchstart: ['onTouchStart'],
-    bindtouchmove: ['onTouchMove'],
-    bindtouchend: ['onTouchEnd'],
-    bindtouchcancel: ['onTouchCancel'],
-    catchtap: ['onTouchStart', 'onTouchMove', 'onTouchEnd'],
-    catchlongpress: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'],
-    catchtouchstart: ['onTouchStart'],
-    catchtouchmove: ['onTouchMove'],
-    catchtouchend: ['onTouchEnd'],
-    catchtouchcancel: ['onTouchCancel'],
-    'capture-bindtap': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'],
-    'capture-bindlongpress': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'],
-    'capture-bindtouchstart': ['onTouchStartCapture'],
-    'capture-bindtouchmove': ['onTouchMoveCapture'],
-    'capture-bindtouchend': ['onTouchEndCapture'],
-    'capture-bindtouchcancel': ['onTouchCancelCapture'],
-    'capture-catchtap': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'],
-    'capture-catchlongpress': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'],
-    'capture-catchtouchstart': ['onTouchStartCapture'],
-    'capture-catchtouchmove': ['onTouchMoveCapture'],
-    'capture-catchtouchend': ['onTouchEndCapture'],
-    'capture-catchtouchcancel': ['onTouchCancelCapture']
+    bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
+    bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
+    bindtouchstart: { bitFlag: '2', events: ['onTouchStart'] },
+    bindtouchmove: { bitFlag: '3', events: ['onTouchMove'] },
+    bindtouchend: { bitFlag: '4', events: ['onTouchEnd'] },
+    bindtouchcancel: { bitFlag: '5', events: ['onTouchCancel'] },
+    catchtap: { bitFlag: '6', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
+    catchlongpress: { bitFlag: '7', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
+    catchtouchstart: { bitFlag: '8', events: ['onTouchStart'] },
+    catchtouchmove: { bitFlag: '9', events: ['onTouchMove'] },
+    catchtouchend: { bitFlag: 'a', events: ['onTouchEnd'] },
+    catchtouchcancel: { bitFlag: 'b', events: ['onTouchCancel'] },
+    'capture-bindtap': { bitFlag: 'c', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
+    'capture-bindlongpress': { bitFlag: 'd', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
+    'capture-bindtouchstart': { bitFlag: 'e', events: ['onTouchStartCapture'] },
+    'capture-bindtouchmove': { bitFlag: 'f', events: ['onTouchMoveCapture'] },
+    'capture-bindtouchend': { bitFlag: 'g', events: ['onTouchEndCapture'] },
+    'capture-bindtouchcancel': { bitFlag: 'h', events: ['onTouchCancelCapture'] },
+    'capture-catchtap': { bitFlag: 'i', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
+    'capture-catchlongpress': { bitFlag: 'j', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
+    'capture-catchtouchstart': { bitFlag: 'k', events: ['onTouchStartCapture'] },
+    'capture-catchtouchmove': { bitFlag: 'l', events: ['onTouchMoveCapture'] },
+    'capture-catchtouchend': { bitFlag: 'm', events: ['onTouchEndCapture'] },
+    'capture-catchtouchcancel': { bitFlag: 'n', events: ['onTouchCancelCapture'] }
 };
 export default eventConfigMap;