@mpxjs/webpack-plugin 2.9.66 → 2.9.69-beta.0

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

@@ -201,6 +201,11 @@ module.exports = function getSpec ({ warn, error }) {
     const props = AbbreviationMap[prop]
     const values = Array.isArray(value) ? value : parseValues(value)
     const cssMap = []
+    // 复合属性不支持单个css var（css var可以接收单个值可以是复合值，复合值运行时不处理，这里前置提示一下）
+    if (values.length === 1 && cssVariableExp.test(value)) {
+      error(`Property ${prop} in ${selector} is abbreviated property and does not support a single CSS var`)
+      return cssMap
+    }
     let idx = 0
     let propsIdx = 0
     const diff = values.length - props.length
@@ -296,16 +301,12 @@ module.exports = function getSpec ({ warn, error }) {
       all: 'background'
     }
     const urlExp = /url\(["']?(.*?)["']?\)/
-    const linerExp = /linear-gradient\(.*\)\s*$/
+    const linearExp = /linear-gradient\(.*\)/
     switch (prop) {
       case bgPropMap.image: {
-        // background-image 仅支持背景图
-        const imgUrl = value.match(urlExp)?.[0]
-        const linerVal = value.match(linerExp)?.[0]
-        if (imgUrl) {
-          return { prop, value: imgUrl }
-        } else if (linerVal) {
-          return { prop, value: linerVal }
+        // background-image 支持背景图/渐变/css var
+        if (cssVariableExp.test(value) || urlExp.test(value) || linearExp.test(value)) {
+          return { prop, value }
         } else {
           error(`Value of ${prop} in ${selector} selector only support value <url()> or <linear-gradient()>, received ${value}, please check again!`)
           return false
@@ -344,11 +345,15 @@ module.exports = function getSpec ({ warn, error }) {
       }
       case bgPropMap.all: {
         // background: 仅支持 background-image & background-color & background-repeat
+        if (cssVariableExp.test(value)) {
+          error(`Property [${bgPropMap.all}] in ${selector} is abbreviated property and does not support CSS var`)
+          return false
+        }
         const bgMap = []
         const values = parseValues(value)
         values.forEach(item => {
           const url = item.match(urlExp)?.[0]
-          const linerVal = item.match(linerExp)?.[0]
+          const linerVal = item.match(linearExp)?.[0]
           if (url) {
             bgMap.push({ prop: bgPropMap.image, value: url })
           } else if (linerVal) {
@@ -368,7 +373,8 @@ 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) || calcExp.test(value)) return { prop, value }
     const values = parseValues(value)
     const transform = []
     values.forEach(item => {
@@ -393,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':
@@ -404,7 +410,7 @@ module.exports = function getSpec ({ warn, error }) {
             {
               // 2 个以上的值处理
               key = key.replace('3d', '')
-              const vals = val.split(',').splice(0, key === 'rotate' ? 4 : 3)
+              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])
@@ -450,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
@@ -470,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
   }
@@ -509,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/canvas.js

@@ -8,6 +8,14 @@ module.exports = function ({ print }) {
   const qaEventLog = print({ platform: 'qa', tag: TAG_NAME, isError: false, type: 'event' })
   return {
     test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-canvas'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-canvas'
+    },
     props: [
       {
         test: /^canvas-id$/,

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', 'canvas', '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/index.js

@@ -8,6 +8,7 @@ const RecordLoaderContentDependency = require('../dependencies/RecordLoaderConte
 
 module.exports = function ({
   parts,
+  jsonContent,
   loaderContext,
   pagesMap,
   componentsMap,
@@ -19,7 +20,7 @@ module.exports = function ({
   hasScoped,
   hasComment,
   isNative,
-  usingComponents,
+  usingComponentsInfo,
   componentGenerics,
   autoScope,
   callback
@@ -50,7 +51,7 @@ module.exports = function ({
             srcMode,
             moduleId,
             ctorType,
-            usingComponents,
+            usingComponentsInfo,
             componentGenerics
           }, callback)
         },
@@ -63,7 +64,7 @@ module.exports = function ({
           }, callback)
         },
         (callback) => {
-          processJSON(parts.json, {
+          processJSON(jsonContent, {
             loaderContext,
             ctorType,
             pagesMap,

package/lib/react/processJSON.js

@@ -12,9 +12,8 @@ const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
-const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalComponentsDependency')
 
-module.exports = function (json, {
+module.exports = function (jsonContent, {
   loaderContext,
   ctorType,
   pagesMap,
@@ -81,12 +80,11 @@ module.exports = function (json, {
   }
 
   const isApp = ctorType === 'app'
-  if (!json) {
+  if (!jsonContent) {
     return callback()
   }
-  // 由于json需要提前读取在template处理中使用，src的场景已经在loader中处理了，此处无需考虑json.src的场景
   try {
-    jsonObj = JSON5.parse(json.content)
+    jsonObj = JSON5.parse(jsonContent)
     // 处理runner
     const rulesRunnerOptions = {
       mode,
@@ -96,8 +94,8 @@ module.exports = function (json, {
       warn: emitWarning,
       error: emitError,
       data: {
-        // polyfill global usingComponents & record globalComponents
-        globalComponents: mpx.usingComponents
+        // polyfill global usingComponents
+        globalComponents: mpx.globalComponents
       }
     }
 
@@ -110,12 +108,6 @@ module.exports = function (json, {
     if (rulesRunner) {
       rulesRunner(jsonObj)
     }
-    if (isApp) {
-      // 收集全局组件
-      Object.assign(mpx.usingComponents, jsonObj.usingComponents)
-      // 在 rulesRunner 运行后保存全局注册组件
-      loaderContext._module.addPresentationalDependency(new RecordGlobalComponentsDependency(mpx.usingComponents, loaderContext.context))
-    }
   } catch (e) {
     return callback(e)
   }

package/lib/react/processMainScript.js

@@ -8,7 +8,7 @@ const {
 module.exports = function ({
   loaderContext
 }, callback) {
-  const { i18n, projectName } = loaderContext.getMpx()
+  const { i18n, rnConfig } = loaderContext.getMpx()
 
   let output = 'import { AppRegistry } from \'react-native\'\n'
 
@@ -16,8 +16,12 @@ module.exports = function ({
     output += buildI18n({ loaderContext })
   }
   // 此处可添加前置于App执行的语句
-  output += `var App = require(${stringifyRequest(loaderContext, addQuery(loaderContext.resource, { isApp: true }))}).default\n`
-  output += `AppRegistry.registerComponent(${JSON.stringify(projectName)}, () => App)\n`
+  output += `var app = require(${stringifyRequest(loaderContext, addQuery(loaderContext.resource, { isApp: true }))}).default\n`
+  if (rnConfig.projectName) {
+    output += `AppRegistry.registerComponent(${JSON.stringify(rnConfig.projectName)}, () => app)\n`
+  } else {
+    output += 'export default app\n'
+  }
 
   callback(null, {
     output

package/lib/react/processScript.js

@@ -24,16 +24,15 @@ module.exports = function (script, {
   if (ctorType === 'app') {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
-import { NavigationContainer, createNavigationContainerRef, StackActions } from '@react-navigation/native'
-import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { NavigationContainer, StackActions } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
 import { Provider } from '@ant-design/react-native'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 global.__navigationHelper = {
   NavigationContainer: NavigationContainer,
-  createNavigationContainerRef: createNavigationContainerRef,
-  createNativeStackNavigator: createNativeStackNavigator,
+  createStackNavigator: createStackNavigator,
   StackActions: StackActions,
   GestureHandlerRootView: GestureHandlerRootView,
   Provider: Provider,

package/lib/react/processStyles.js

@@ -56,13 +56,23 @@ module.exports = function (styles, {
           error
         })
         if (ctorType === 'app') {
-          output += `global.__getAppClassMap = function() {
-            return ${shallowStringify(classMap)};
+          output += `
+          let __appClassMap
+          global.__getAppClassMap = function() {
+            if(!__appClassMap) {
+              __appClassMap = ${shallowStringify(classMap)};
+            }
+            return __appClassMap;
           };\n`
         } else {
-          output += `global.currentInject.injectMethods = {
+          output += `
+          let __classMap
+          global.currentInject.injectMethods = {
             __getClassMap: function() {
-              return ${shallowStringify(classMap)};
+              if(!__classMap) {
+                __classMap = ${shallowStringify(classMap)};
+              }
+              return __classMap;
             }
           };\n`
         }

package/lib/react/processTemplate.js

@@ -14,7 +14,7 @@ module.exports = function (template, {
   srcMode,
   moduleId,
   ctorType,
-  usingComponents,
+  usingComponentsInfo,
   componentGenerics
 }, callback) {
   const mpx = loaderContext.getMpx()
@@ -64,7 +64,7 @@ module.exports = function (template, {
       const { root, meta } = templateCompiler.parse(template.content, {
         warn,
         error,
-        usingComponents,
+        usingComponentsInfo, // processTemplate中无其他地方使用，直接透传 string 类型
         hasComment,
         isNative,
         ctorType,
@@ -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/resolver/AddModePlugin.js

@@ -6,16 +6,17 @@ const addInfix = require('../utils/add-infix')
 const { JSON_JS_EXT } = require('../utils/const')
 
 module.exports = class AddModePlugin {
-  constructor (source, mode, fileConditionRules, target) {
+  constructor (source, mode, options, target) {
     this.source = source
     this.target = target
     this.mode = mode
-    this.fileConditionRules = fileConditionRules
+    this.options = options
   }
 
   apply (resolver) {
     const target = resolver.ensureHook(this.target)
-    const mode = this.mode
+    const { options = {}, mode } = this
+    const { defaultMode, fileConditionRules, implicitMode } = options
     resolver.getHook(this.source).tapAsync('AddModePlugin', (request, resolveContext, callback) => {
       if (request.mode || request.env) {
         return callback()
@@ -31,14 +32,26 @@ module.exports = class AddModePlugin {
         extname = path.extname(resourcePath)
       }
       // 当前资源没有后缀名或者路径不符合fileConditionRules规则时，直接返回
-      if (!extname || !matchCondition(resourcePath, this.fileConditionRules)) return callback()
+      if (!extname || !matchCondition(resourcePath, fileConditionRules)) return callback()
       const queryObj = parseQuery(request.query || '?')
-      queryObj.mode = mode
-      queryObj.infix = `${queryObj.infix || ''}.${mode}`
+      const queryInfix = queryObj.infix
+      if (!implicitMode) queryObj.mode = mode
+      queryObj.infix = `${queryInfix || ''}.${mode}`
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, mode, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, mode, extname)
-      resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, callback)
+      resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, (err, result) => {
+        if (defaultMode && !result) {
+          queryObj.infix = `${queryInfix || ''}.${defaultMode}`
+          obj.query = stringifyQuery(queryObj)
+          obj.path = addInfix(resourcePath, defaultMode, extname)
+          resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + defaultMode, resolveContext, (err, result) => {
+            callback(err, result)
+          })
+          return
+        }
+        callback(err, result)
+      })
     })
   }
 }

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>> }
 }
@@ -46,3 +48,7 @@ export const PickerContext = createContext(null)
 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

@@ -7,3 +7,5 @@ export const LabelContext = createContext(null);
 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;