@mpxjs/webpack-plugin 2.8.40-beta.0 → 2.8.40-test.2

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

@@ -3,6 +3,7 @@ const normalizeTest = require('../normalize-test')
 const changeKey = require('../change-key')
 const normalize = require('../../../utils/normalize')
 const { capitalToHyphen } = require('../../../utils/string')
+const { isOriginTag, isBuildInTag } = require('../../../utils/dom-tag-config')
 
 const mpxViewPath = normalize.lib('runtime/components/ali/mpx-view.mpx')
 const mpxTextPath = normalize.lib('runtime/components/ali/mpx-text.mpx')
@@ -70,6 +71,26 @@ module.exports = function getSpec ({ warn, error }) {
     return input
   }
 
+  // 校验输出支付宝 componentGenerics 配置的正确性
+  function aliComponentGenericsValidate (input) {
+    const componentGenerics = input.componentGenerics
+    if (componentGenerics && typeof componentGenerics === 'object') {
+      Object.keys(componentGenerics).forEach(key => {
+        if (!componentGenerics[key].default) {
+          error(`Ali environment componentGenerics need to specify a default custom component! please check the configuration of component ${key}`)
+        }
+      })
+    }
+    return input
+  }
+
+  function fillGlobalComponents (input, { globalComponents }) {
+    if (globalComponents) {
+      Object.assign(globalComponents, input.usingComponents)
+    }
+    return input
+  }
+
   // 处理 ali swan 的组件名大写字母转连字符：WordExample/wordExample -> word-example
   function componentNameCapitalToHyphen (type) {
     return function (input) {
@@ -105,10 +126,28 @@ module.exports = function getSpec ({ warn, error }) {
     }
   }
 
+  /**
+   * 将小程序代码中使用的与原生 HTML tag 或 内建组件 同名的组件进行转化，以解决与原生tag命名冲突问题。
+   */
+  function fixComponentName (type) {
+    return function (input) {
+      const usingComponents = input[type]
+      if (usingComponents) {
+        Object.keys(usingComponents).forEach(tag => {
+          if (isOriginTag(tag) || isBuildInTag(tag)) {
+            usingComponents[`mpx-com-${tag}`] = usingComponents[tag]
+            delete usingComponents[tag]
+          }
+        })
+      }
+      return input
+    }
+  }
+
   const componentRules = [
     {
       test: 'componentGenerics',
-      ali: deletePath(true)
+      ali: aliComponentGenericsValidate
     },
     {
       test: 'componentPlaceholder',
@@ -117,6 +156,10 @@ module.exports = function getSpec ({ warn, error }) {
       tt: deletePath(),
       jd: deletePath()
     },
+    {
+      test: 'usingComponents',
+      web: fixComponentName('usingComponents')
+    },
     {
       test: 'usingComponents',
       ali: componentNameCapitalToHyphen('usingComponents'),
@@ -217,7 +260,7 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   const spec = {
-    supportedModes: ['ali', 'swan', 'qq', 'tt', 'jd', 'qa', 'dd'],
+    supportedModes: ['ali', 'swan', 'qq', 'tt', 'jd', 'qa', 'dd', 'web'],
     normalizeTest,
     page: [
       ...windowRules,
@@ -318,6 +361,24 @@ module.exports = function getSpec ({ warn, error }) {
         tt: deletePath(),
         jd: deletePath(true)
       },
+      {
+        test: 'usingComponents',
+        web: fixComponentName('usingComponents')
+      },
+      {
+        test: 'usingComponents',
+        ali: componentNameCapitalToHyphen('usingComponents'),
+        swan: componentNameCapitalToHyphen('usingComponents')
+      },
+      {
+        test: 'usingComponents',
+        // todo ali 2.0已支持全局组件，待移除
+        ali: fillGlobalComponents,
+        qq: fillGlobalComponents,
+        swan: fillGlobalComponents,
+        tt: fillGlobalComponents,
+        jd: fillGlobalComponents
+      },
       {
         test: 'usingComponents',
         // todo ali 2.0已支持全局组件，待移除

package/lib/platform/run-rules.js

@@ -32,7 +32,7 @@ module.exports = function runRules (rules = [], input, options = {}) {
       if (result !== undefined) {
         input = result
       }
-      if (!waterfall) break
+      if (!(rule.waterfall || waterfall)) break
     }
   }
   return input

package/lib/platform/template/normalize-component-rules.js

@@ -8,56 +8,57 @@ const runRules = require('../run-rules')
 module.exports = function normalizeComponentRules (cfgs, spec) {
   return cfgs.map((cfg) => {
     const result = {}
-    if (cfg.test) {
-      result.test = cfg.test
-    }
+    if (cfg.test) result.test = cfg.test
+    if (cfg.waterfall) result.waterfall = cfg.waterfall
     const supportedModes = cfg.supportedModes || spec.supportedModes
     // 合并component-config中组件的event 与index中公共的event规则
     const eventRules = (cfg.event || []).concat(spec.event.rules)
     supportedModes.forEach((mode) => {
-      result[mode] = function (el, data) {
-        data = Object.assign({}, data, { el, eventRules })
-        const testKey = 'name'
-        let rAttrsList = []
-        const options = {
-          mode,
-          testKey,
-          data
-        }
-        el.attrsList.forEach((attr) => {
-          const meta = {}
-          let rAttr = runRules(spec.directive, attr, {
-            ...options,
-            meta
-          })
-          // 指令未匹配到时说明为props，因为目前所有的指令都需要转换
-          if (!meta.processed) {
-            rAttr = runRules(spec.preProps, rAttr, options)
-            rAttr = runRules(cfg.props, rAttr, options)
+      result[mode] = cfg.skipNormalize
+        ? cfg[mode]
+        : function (el, data) {
+          data = Object.assign({}, data, { el, eventRules })
+          const testKey = 'name'
+          let rAttrsList = []
+          const options = {
+            mode,
+            testKey,
+            data
+          }
+          el.attrsList.forEach((attr) => {
+            const meta = {}
+            let rAttr = runRules(spec.directive, attr, {
+              ...options,
+              meta
+            })
+            // 指令未匹配到时说明为props，因为目前所有的指令都需要转换
+            if (!meta.processed) {
+              rAttr = runRules(spec.preProps, rAttr, options)
+              rAttr = runRules(cfg.props, rAttr, options)
+              if (Array.isArray(rAttr)) {
+                rAttr = rAttr.map((attr) => {
+                  return runRules(spec.postProps, attr, options)
+                })
+              } else if (rAttr !== false) {
+                rAttr = runRules(spec.postProps, rAttr, options)
+              }
+            }
+            // 生成目标attrsList
             if (Array.isArray(rAttr)) {
-              rAttr = rAttr.map((attr) => {
-                return runRules(spec.postProps, attr, options)
-              })
+              rAttrsList = rAttrsList.concat(rAttr)
             } else if (rAttr !== false) {
-              rAttr = runRules(spec.postProps, rAttr, options)
+              rAttrsList.push(rAttr)
             }
+          })
+          el.attrsList = rAttrsList
+          el.attrsMap = require('../../template-compiler/compiler').makeAttrsMap(rAttrsList)
+          // 前置处理attrs,便于携带信息用于tag的处理
+          const rTag = cfg[mode] && cfg[mode].call(this, el.tag, data)
+          if (rTag) {
+            el.tag = rTag
           }
-          // 生成目标attrsList
-          if (Array.isArray(rAttr)) {
-            rAttrsList = rAttrsList.concat(rAttr)
-          } else if (rAttr !== false) {
-            rAttrsList.push(rAttr)
-          }
-        })
-        el.attrsList = rAttrsList
-        el.attrsMap = require('../../template-compiler/compiler').makeAttrsMap(rAttrsList)
-        // 前置处理attrs,便于携带信息用于tag的处理
-        const rTag = cfg[mode] && cfg[mode].call(this, el.tag, data)
-        if (rTag) {
-          el.tag = rTag
+          return el
         }
-        return el
-      }
     })
     return result
   })

package/lib/platform/template/wx/component-config/README.md

@@ -14,7 +14,7 @@ web的额外逻辑，因为小程序组件和web存在差异，比如事件相
 
 Mpx的转换一个重要原则是转不了的东西通过控制台打印提示用户，要求用户提供一份符合对应平台的代码通过条件编译支持。因此错误输出格式保持一致是有必要的。
 
-在 index.js 中，会汇总每个组件的转换规则函数，为了使错误信息标准化，一致化，错误打印函数的生成函数实现在index.js里。
+在 index.web.js 中，会汇总每个组件的转换规则函数，为了使错误信息标准化，一致化，错误打印函数的生成函数实现在index.js里。
 
 每个组件文件是一个方法，接受错误打印生成方法，根据组件名生成对应的错误打印方法。
 

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

@@ -1,5 +1,4 @@
-const templateCompiler = require('../../../../template-compiler/compiler')
-const parseMustache = templateCompiler.parseMustache
+const { parseMustache } = require('../../../../template-compiler/compiler')
 const normalize = require('../../../../utils/normalize')
 const TAG_NAME = 'component'
 

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

@@ -0,0 +1,21 @@
+const { isOriginTag, isBuildInTag } = require('../../../../utils/dom-tag-config')
+
+module.exports = function () {
+  return {
+    waterfall: true,
+    skipNormalize: true,
+    supportedModes: ['web'],
+    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
+    }
+  }
+}

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

@@ -1,14 +1,10 @@
 const { capitalToHyphen } = require('../../../../utils/string')
 
 module.exports = function () {
-  function convertTagName (name) {
-    return capitalToHyphen(name)
-  }
-
   return {
     // tag name contains capital letters
     test: /[A-Z]/,
-    ali: convertTagName,
-    swan: convertTagName
+    ali: capitalToHyphen,
+    swan: capitalToHyphen
   }
 }

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

@@ -8,7 +8,7 @@ const checkbox = require('./checkbox')
 const coverImage = require('./cover-image')
 const coverView = require('./cover-view')
 const form = require('./form')
-const HyphenTagName = require('./hypen-tag-name')
+const hyphenTagName = require('./hypen-tag-name')
 const icon = require('./icon')
 const image = require('./image')
 const input = require('./input')
@@ -33,12 +33,13 @@ const switchComponent = require('./switch')
 const template = require('./template')
 const text = require('./text')
 const textarea = require('./textarea')
-const Nonsupport = require('./unsupported')
+const unsupported = require('./unsupported')
 const video = require('./video')
 const view = require('./view')
 const webView = require('./web-view')
 const wxs = require('./wxs')
 const component = require('./component')
+const fixComponentName = require('./fix-component-name')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -79,7 +80,8 @@ module.exports = function getComponentConfigs ({ warn, error }) {
 
   // 转换规则只需以微信为基准配置微信和支付宝的差异部分，比如微信和支付宝都支持但是写法不一致，或者微信支持而支付宝不支持的部分(抛出错误或警告)
   return [
-    ...Nonsupport({ print }),
+    ...unsupported({ print }),
+    fixComponentName({ print }),
     ad({ print }),
     view({ print }),
     scrollView({ print }),
@@ -118,7 +120,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     camera({ print }),
     livePlayer({ print }),
     livePusher({ print }),
-    HyphenTagName({ print }),
+    hyphenTagName({ print }),
     component()
   ]
 }

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

@@ -41,18 +41,7 @@ module.exports = function ({ print }) {
     // 快应用通用事件有touchstart|touchmove|touchend|touchcancel|longpress|click|focus|blur
     event: [
       {
-        // 支付宝中的view组件额外支持了transitionEnd|animationStart|animationIteration|animationEnd，故在此声明了组件事件转换逻辑
         test: /^(transitionend|animationstart|animationiteration|animationend)$/,
-        //
-        ali (eventName) {
-          const eventMap = {
-            transitionend: 'transitionEnd',
-            animationstart: 'animationStart',
-            animationiteration: 'animationIteration',
-            animationend: 'animationEnd'
-          }
-          return eventMap[eventName]
-        },
         qa: qaEventLogError
       }
     ]

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

@@ -3,9 +3,7 @@ const JSON5 = require('json5')
 const getComponentConfigs = require('./component-config')
 const normalizeComponentRules = require('../normalize-component-rules')
 const isValidIdentifierStr = require('../../../utils/is-valid-identifier-str')
-const templateCompiler = require('../../../template-compiler/compiler')
-const parseMustache = templateCompiler.parseMustache
-const stringifyWithResolveComputed = templateCompiler.stringifyWithResolveComputed
+const { parseMustacheWithContext, stringifyWithResolveComputed } = require('../../../template-compiler/compiler')
 const normalize = require('../../../utils/normalize')
 
 module.exports = function getSpec ({ warn, error }) {
@@ -17,10 +15,10 @@ module.exports = function getSpec ({ warn, error }) {
     postProps: [
       {
         web ({ name, value }) {
-          const parsed = parseMustache(value)
+          const parsed = parseMustacheWithContext(value)
           if (parsed.hasBinding) {
             return {
-              name: name === 'animation' ? 'v-' + name : ':' + name,
+              name: name === 'animation' ? 'v-animation' : ':' + name,
               value: parsed.result
             }
           }
@@ -34,7 +32,7 @@ module.exports = function getSpec ({ warn, error }) {
         test: 'wx:for',
         swan (obj, data) {
           const attrsMap = data.el.attrsMap
-          const parsed = parseMustache(obj.value)
+          const parsed = parseMustacheWithContext(obj.value)
           let listName = parsed.result
           const el = data.el
 
@@ -48,7 +46,7 @@ module.exports = function getSpec ({ warn, error }) {
           }
 
           if (keyName) {
-            const parsed = parseMustache(keyName)
+            const parsed = parseMustacheWithContext(keyName)
             if (parsed.hasBinding) {
               // keyStr = ` trackBy ${parsed.result.slice(1, -1)}`
             } else if (keyName === '*this') {
@@ -78,7 +76,7 @@ module.exports = function getSpec ({ warn, error }) {
           }
         },
         web ({ value }, { el }) {
-          const parsed = parseMustache(value)
+          const parsed = parseMustacheWithContext(value)
           const attrsMap = el.attrsMap
           const itemName = attrsMap['wx:for-item'] || 'item'
           const indexName = attrsMap['wx:for-index'] || 'index'
@@ -190,17 +188,9 @@ module.exports = function getSpec ({ warn, error }) {
           }
           const styleBinding = []
           el.isStyleParsed = true
-          el.attrsList.forEach((item) => {
-            const parsed = parseMustache(item.value)
-            if (item.name === 'style') {
-              if (parsed.hasBinding || parsed.result.indexOf('rpx') > -1) {
-                styleBinding.push(parseMustache(item.value).result)
-              } else {
-                styleBinding.push(JSON.stringify(item.value))
-              }
-            } else if (item.name === 'wx:style') {
-              styleBinding.push(parseMustache(item.value).result)
-            }
+          el.attrsList.filter(item => this.test.test(item.name)).forEach((item) => {
+            const parsed = parseMustacheWithContext(item.value)
+            styleBinding.push(parsed.result)
           })
           return {
             name: ':style',
@@ -210,12 +200,20 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         // 样式类名绑定
-        test: /^wx:(class)$/,
-        web ({ value }) {
-          const parsed = parseMustache(value)
+        test: /^(class|wx:class)$/,
+        web ({ value }, { el }) {
+          if (el.isClassParsed) {
+            return false
+          }
+          const classBinding = []
+          el.isClassParsed = true
+          el.attrsList.filter(item => this.test.test(item.name)).forEach((item) => {
+            const parsed = parseMustacheWithContext(item.value)
+            classBinding.push(parsed.result)
+          })
           return {
             name: ':class',
-            value: parsed.result
+            value: `[${classBinding}]`
           }
         }
       },
@@ -266,7 +264,7 @@ module.exports = function getSpec ({ warn, error }) {
         },
         web ({ name, value }) {
           let dir = this.test.exec(name)[1]
-          const parsed = parseMustache(value)
+          const parsed = parseMustacheWithContext(value)
           if (dir === 'elif') {
             dir = 'else-if'
           }
@@ -295,18 +293,39 @@ module.exports = function getSpec ({ warn, error }) {
         },
         swan ({ name, value }, { eventRules }) {
           const match = this.test.exec(name)
+          const prefix = match[1]
           const eventName = match[2]
-          runRules(eventRules, eventName, { mode: 'swan' })
+          const modifierStr = match[3] || ''
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'swan' })
+          const rEventName = runRules(eventRules, eventName, { mode: 'swan' })
+          return {
+            name: rPrefix + rEventName + modifierStr,
+            value
+          }
         },
         qq ({ name, value }, { eventRules }) {
           const match = this.test.exec(name)
+          const prefix = match[1]
           const eventName = match[2]
-          runRules(eventRules, eventName, { mode: 'qq' })
+          const modifierStr = match[3] || ''
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'qq' })
+          const rEventName = runRules(eventRules, eventName, { mode: 'qq' })
+          return {
+            name: rPrefix + rEventName + modifierStr,
+            value
+          }
         },
         jd ({ name, value }, { eventRules }) {
           const match = this.test.exec(name)
+          const prefix = match[1]
           const eventName = match[2]
-          runRules(eventRules, eventName, { mode: 'jd' })
+          const modifierStr = match[3] || ''
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'jd' })
+          const rEventName = runRules(eventRules, eventName, { mode: 'jd' })
+          return {
+            name: rPrefix + rEventName + modifierStr,
+            value
+          }
         },
         // tt ({ name, value }, { eventRules }) {
         //   const match = this.test.exec(name)
@@ -322,15 +341,33 @@ module.exports = function getSpec ({ warn, error }) {
         // },
         tt ({ name, value }, { eventRules }) {
           const match = this.test.exec(name)
+          const prefix = match[1]
           const eventName = match[2]
-          runRules(eventRules, eventName, { mode: 'tt' })
+          const modifierStr = match[3] || ''
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'tt' })
+          const rEventName = runRules(eventRules, eventName, { mode: 'tt' })
+          return {
+            name: rPrefix + rEventName + modifierStr,
+            value
+          }
         },
         dd ({ name, value }, { eventRules }) {
           const match = this.test.exec(name)
+          const prefix = match[1]
           const eventName = match[2]
-          runRules(eventRules, eventName, { mode: 'dd' })
+          const modifierStr = match[3] || ''
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'dd' })
+          const rEventName = runRules(eventRules, eventName, { mode: 'dd' })
+          return {
+            name: rPrefix + rEventName + modifierStr,
+            value
+          }
         },
-        web ({ name, value }, { eventRules, el }) {
+        web ({ name, value }, { eventRules, el, usingComponents }) {
+          if (parseMustacheWithContext(value).hasBinding) {
+            error('Web environment does not support mustache binding in event props!')
+            return
+          }
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
@@ -338,10 +375,11 @@ module.exports = function getSpec ({ warn, error }) {
           const meta = {
             modifierStr
           }
+          const isComponent = usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
           // 记录event监听信息用于后续判断是否需要使用内置基础组件
           el.hasEvent = true
           const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'web', meta })
-          const rEventName = runRules(eventRules, eventName, { mode: 'web' })
+          const rEventName = runRules(eventRules, eventName, { mode: 'web', data: { isComponent } })
           return {
             name: rPrefix + rEventName + meta.modifierStr,
             value
@@ -411,7 +449,11 @@ module.exports = function getSpec ({ warn, error }) {
               touchcancel: 'touchCancel',
               tap: 'tap',
               longtap: 'longTap',
-              longpress: 'longTap'
+              longpress: 'longTap',
+              transitionend: 'transitionEnd',
+              animationstart: 'animationStart',
+              animationiteration: 'animationIteration',
+              animationend: 'animationEnd'
             }
             if (eventMap[eventName]) {
               return eventMap[eventName]
@@ -424,6 +466,16 @@ module.exports = function getSpec ({ warn, error }) {
               error(`Web environment does not support [${eventName}] event!`)
             }
           }
+        },
+        // 特殊web事件
+        {
+          test: /^click$/,
+          web (eventName, data) {
+            // 自定义组件根节点
+            if (data.isComponent) {
+              return '_' + eventName
+            }
+          }
         }
       ]
     }

package/lib/runtime/base.styl

@@ -48,11 +48,19 @@ span {
   white-space: pre-line;
 }
 
-html, body, .app {
+html, body, #app {
+  display: block;
   width: 100%;
   height: 100%;
 }
 
+page {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+
 .pull-down-loading {
   position: absolute;
   width: 100%;
@@ -120,8 +128,3 @@ html, body, .app {
   font-family "weui"
   src url('data:application/octet-stream;base64,AAEAAAALAIAAAwAwR1NVQrD+s+0AAAE4AAAAQk9TLzJAKEx+AAABfAAAAFZjbWFw65cFHQAAAhwAAAJQZ2x5ZvCRR/EAAASUAAAKtGhlYWQLKIN9AAAA4AAAADZoaGVhCCwD+gAAALwAAAAkaG10eEJo//8AAAHUAAAASGxvY2EYqhW6AAAEbAAAACZtYXhwASEAVQAAARgAAAAgbmFtZeNcHtgAAA9IAAAB5nBvc3T6bLhLAAARMAAAAOYAAQAAA+gAAABaA+j/////A+kAAQAAAAAAAAAAAAAAAAAAABIAAQAAAAEAACkCj3dfDzz1AAsD6AAAAADUER9XAAAAANQRH1f//wAAA+kD6gAAAAgAAgAAAAAAAAABAAAAEgBJAAUAAAAAAAIAAAAKAAoAAAD/AAAAAAAAAAEAAAAKAB4ALAABREZMVAAIAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAAAAQOwAZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6gHqEQPoAAAAWgPqAAAAAAABAAAAAAAAAAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+j//wPoAAAD6AAAAAAABQAAAAMAAAAsAAAABAAAAXQAAQAAAAAAbgADAAEAAAAsAAMACgAAAXQABABCAAAABAAEAAEAAOoR//8AAOoB//8AAAABAAQAAAABAAIAAwAEAAUABgAHAAgACQAKAAsADAANAA4ADwAQABEAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAANwAAAAAAAAAEQAA6gEAAOoBAAAAAQAA6gIAAOoCAAAAAgAA6gMAAOoDAAAAAwAA6gQAAOoEAAAABAAA6gUAAOoFAAAABQAA6gYAAOoGAAAABgAA6gcAAOoHAAAABwAA6ggAAOoIAAAACAAA6gkAAOoJAAAACQAA6goAAOoKAAAACgAA6gsAAOoLAAAACwAA6gwAAOoMAAAADAAA6g0AAOoNAAAADQAA6g4AAOoOAAAADgAA6g8AAOoPAAAADwAA6hAAAOoQAAAAEAAA6hEAAOoRAAAAEQAAAAAARgCMANIBJgF4AcQCMgJgAqgC/ANIA6YD/gROBKAE9AVaAAAAAgAAAAADrwOtABQAKQAAASIHBgcGFBcWFxYyNzY3NjQnJicmAyInJicmNDc2NzYyFxYXFhQHBgcGAfV4Z2Q7PDw7ZGfwZmQ7PDw7ZGZ4bl5bNjc3Nlte215bNjc3NlteA608O2Rn8GdjOzw8O2Nn8GdkOzz8rzc1W17bXlw1Nzc1XF7bXls1NwAAAAACAAAAAAOzA7MAFwAtAAABIgcGBwYVFBcWFxYzMjc2NzY1NCcmJyYTBwYiLwEmNjsBETQ2OwEyFhURMzIWAe52Z2Q7PT07ZGd2fGpmOz4+O2ZpIXYOKA52Dg0XXQsHJgcLXRcNA7M+O2ZqfHZnZDs9PTtkZ3Z9aWY7Pv3wmhISmhIaARcICwsI/ukaAAMAAAAAA+UD5QAXACMALAAAASIHBgcGFRQXFhcWMzI3Njc2NTQnJicmAxQrASI1AzQ7ATIHJyImNDYyFhQGAe6Ecm9BRERBb3KEiXZxQkREQnF1aQIxAwgCQgMBIxIZGSQZGQPkREJxdomEcm9BRERBb3KEinVxQkT9HQICAWICAjEZIxkZIxkAAAAAAwAAAAADsQPkABsAKgAzAAABBgcGBwYHBjcRFBcWFxYXNjc2NzY1ESQXJicmBzMyFhUDFAYrASInAzQ2EyImNDYyFhQGAfVBQTg7LDt/IEc+bF5sbF1tPUj+2KhQQVVvNAQGDAMCJgUBCwYeDxYWHhUVA+QPEg4SDhIpCv6tj3VkST4dHT5JZHWPAVNeNRkSGPwGBP7GAgMFAToEBv5AFR8VFR8VAAAAAgAAAAADsQPkABkALgAAAQYHBgc2BREUFxYXFhc2NzY3NjURJBcmJyYTAQYvASY/ATYyHwEWNjclNjIfARYB9VVVQk+v/tFHPmxebGxdbT1I/tGvT0JVo/7VBASKAwMSAQUBcQEFAgESAgUBEQQD4xMYEhk3YP6sjnVlSD8cHD9IZXWOAVRgNxkSGP62/tkDA48EBBkCAVYCAQHlAQIQBAAAAAACAAAAAAPkA+QAFwAtAAABIgcGBwYVFBcWFxYzMjc2NzY1NCcmJyYTAQYiLwEmPwE2Mh8BFjI3ATYyHwEWAe6Ecm9BQ0NCbnODiXVxQkREQnF1kf6gAQUBowMDFgEFAYUCBQEBQwIFARUEA+NEQnF1iYNzbkJDQ0FvcoSJdXFCRP6j/qUBAagEBR4CAWYBAQENAgIVBAAAAAQAAAAAA68DrQAUACkAPwBDAAABIgcGBwYUFxYXFjI3Njc2NCcmJyYDIicmJyY0NzY3NjIXFhcWFAcGBwYTBQ4BLwEmBg8BBhYfARYyNwE+ASYiFzAfAQH1eGdkOzw8O2Rn8GZkOzw8O2RmeG5eWzY3NzZbXtteWzY3NzZbXmn+9gYSBmAGDwUDBQEGfQUQBgElBQELEBUBAQOtPDtkZ/BnYzs8PDtjZ/BnZDs8/K83NVte215cNTc3NVxe215bNTcCJt0FAQVJBQIGBAcRBoAGBQEhBQ8LBAEBAAABAAAAAAO7AzoAFwAAEy4BPwE+AR8BFjY3ATYWFycWFAcBBiInPQoGBwUHGgzLDCELAh0LHwsNCgr9uQoeCgGzCyEOCw0HCZMJAQoBvgkCCg0LHQv9sQsKAAAAAAIAAAAAA+UD5gAXACwAAAEiBwYHBhUUFxYXFjMyNzY3NjU0JyYnJhMHBi8BJicmNRM0NjsBMhYVExceAQHvhHJvQUNDQm5zg4l1cUJEREJxdVcQAwT6AwIEEAMCKwIDDsUCAQPlREJxdYmDc25CQ0NBb3KEiXVxQkT9VhwEAncCAgMGAXoCAwMC/q2FAgQAAAQAAAAAA68DrQADABgALQAzAAABMB8BAyIHBgcGFBcWFxYyNzY3NjQnJicmAyInJicmNDc2NzYyFxYXFhQHBgcGAyMVMzUjAuUBAfJ4Z2Q7PDw7ZGfwZmQ7PDw7ZGZ4bl5bNjc3Nlte215bNjc3NltemyT92QKDAQEBLDw7ZGfwZ2M7PDw7Y2fwZ2Q7PPyvNzVbXtteXDU3NzVcXtteWzU3AjH9JAAAAAMAAAAAA+QD5AAXACcAMAAAASIHBgcGFRQXFhcWMzI3Njc2NTQnJicmAzMyFhUDFAYrASImNQM0NhMiJjQ2MhYUBgHuhHJvQUNDQm5zg4l1cUJEREJxdZ42BAYMAwInAwMMBh8PFhYeFhYD40RCcXWJg3NuQkNDQW9yhIl1cUJE/vYGBf7AAgMDAgFABQb+NhYfFhYfFgAABAAAAAADwAPAAAgAEgAoAD0AAAEyNjQmIgYUFhcjFTMRIxUzNSMDIgcGBwYVFBYXFjMyNzY3NjU0Jy4BAyInJicmNDc2NzYyFxYXFhQHBgcGAfQYISEwISFRjzk5yTorhG5rPT99am+DdmhlPD4+PMyFbV5bNTc3NVte2l5bNTc3NVteAqAiLyIiLyI5Hf7EHBwCsT89a26Ed8w8Pj48ZWh2g29qffyjNzVbXtpeWzU3NzVbXtpeWzU3AAADAAAAAAOoA6gACwAgADUAAAEHJwcXBxc3FzcnNwMiBwYHBhQXFhcWMjc2NzY0JyYnJgMiJyYnJjQ3Njc2MhcWFxYUBwYHBgKOmpocmpocmpocmpq2dmZiOjs7OmJm7GZiOjs7OmJmdmtdWTQ2NjRZXdZdWTQ2NjRZXQKqmpocmpocmpocmpoBGTs6YmbsZmI6Ozs6YmbsZmI6O/zCNjRZXdZdWTQ2NjRZXdZdWTQ2AAMAAAAAA+kD6gAaAC8AMAAAAQYHBiMiJyYnJjQ3Njc2MhcWFxYVFAcGBwEHATI3Njc2NCcmJyYiBwYHBhQXFhcWMwKONUBCR21dWjU3NzVaXdpdWzU2GBcrASM5/eBXS0grKysrSEuuSkkqLCwqSUpXASMrFxg2NVtd2l1aNTc3NVpdbUdCQDX+3jkBGSsrSEuuSkkqLCwqSUquS0grKwAC//8AAAPoA+gAFAAwAAABIgcGBwYQFxYXFiA3Njc2ECcmJyYTFg4BIi8BBwYuATQ/AScmPgEWHwE3Nh4BBg8BAfSIdHFDRERDcXQBEHRxQ0REQ3F0SQoBFBsKoqgKGxMKqKIKARQbCqKoChsUAQqoA+hEQ3F0/vB0cUNERENxdAEQdHFDRP1jChsTCqiiCgEUGwqiqAobFAEKqKIKARQbCqIAAAIAAAAAA+QD5AAXADQAAAEiBwYHBhUUFxYXFjMyNzY3NjU0JyYnJhMUBiMFFxYUDwEGLwEuAT8BNh8BFhQPAQUyFh0BAe6Ecm9BQ0NCbnODiXVxQkREQnF1fwQC/pGDAQEVAwTsAgEC7AQEFAIBhAFwAgMD40RCcXWJg3NuQkNDQW9yhIl1cUJE/fYCAwuVAgQCFAQE0AIFAtEEBBQCBQGVCwMDJwAAAAUAAAAAA9QD0wAjACcANwBHAEgAAAERFAYjISImNREjIiY9ATQ2MyE1NDYzITIWHQEhMhYdARQGIyERIREHIgYVERQWOwEyNjURNCYjISIGFREUFjsBMjY1ETQmKwEDeyYb/XYbJkMJDQ0JAQYZEgEvExkBBgkNDQn9CQJc0QkNDQktCQ0NCf7sCQ0NCS0JDQ0JLQMi/TQbJiYbAswMCiwJDS4SGRkSLg0JLAoM/UwCtGsNCf5NCQ0NCQGzCQ0NCf5NCQ0NCQGzCQ0AAAAAEADGAAEAAAAAAAEABAAAAAEAAAAAAAIABwAEAAEAAAAAAAMABAALAAEAAAAAAAQABAAPAAEAAAAAAAUACwATAAEAAAAAAAYABAAeAAEAAAAAAAoAKwAiAAEAAAAAAAsAEwBNAAMAAQQJAAEACABgAAMAAQQJAAIADgBoAAMAAQQJAAMACAB2AAMAAQQJAAQACAB+AAMAAQQJAAUAFgCGAAMAAQQJAAYACACcAAMAAQQJAAoAVgCkAAMAAQQJAAsAJgD6d2V1aVJlZ3VsYXJ3ZXVpd2V1aVZlcnNpb24gMS4wd2V1aUdlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC5odHRwOi8vZm9udGVsbG8uY29tAHcAZQB1AGkAUgBlAGcAdQBsAGEAcgB3AGUAdQBpAHcAZQB1AGkAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAZQB1AGkARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETAAZjaXJjbGUIZG93bmxvYWQEaW5mbwxzYWZlX3N1Y2Nlc3MJc2FmZV93YXJuB3N1Y2Nlc3MOc3VjY2Vzcy1jaXJjbGURc3VjY2Vzcy1uby1jaXJjbGUHd2FpdGluZw53YWl0aW5nLWNpcmNsZQR3YXJuC2luZm8tY2lyY2xlBmNhbmNlbAZzZWFyY2gFY2xlYXIEYmFjawZkZWxldGUAAAAA') format('truetype')
 }
-
-.mpx-root-view {
-  display: inline
-  line-height: normal
-}

package/lib/runtime/components/web/filterTag.js

@@ -1,3 +1,12 @@
+const {
+  isRichTextTag,
+  isUnaryTag,
+  isSpace,
+  isContWidth,
+  isContHeight,
+  isContConRow
+} = require('../../../utils/dom-tag-config')
+
 // eslint-disable-next-line
 const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/ // useless escape
 const ncname = '[a-zA-Z_][\\w\\-\\.]*'
@@ -11,36 +20,6 @@ const comment = /^<!\--/
 const invalidAttributeRE = /[\s"'<>\/=]/
 let currentParent
 
-function makeMap (str, expectsLowerCase) {
-  const map = Object.create(null)
-  const list = str.split(',')
-  for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true
-  }
-  return expectsLowerCase
-    ? val => map[val.toLowerCase()]
-    : val => map[val]
-}
-
-const isRichTextTag = makeMap(
-  'a,abbr,address,article,aside,b,bdi,bdo,big,blockquote,br,caption,' +
-  'center,cite,code,col,colgroup,dd,del,div,dl,dt,em,fieldset,' +
-  'font,footer,h1,h2,h3,h4,h5,h6,header,hr,i,img,ins,label,legend,' +
-  'li,mark,nav,ol,p,pre,q,rt,ruby,s,section,small,span,strong,sub,sup,' +
-  'table,tbody,td,tfoot,th,thead,tr,tt,u,ul'
-)
-const isUnaryTag = makeMap(
-  'area,base,br,col,embed,frame,hr,img,input,isindex,keygen,' +
-  'link,meta,param,source,track,wbr'
-)
-const isSpace = makeMap('ensp,emsp,nbsp')
-
-const isContWidth = makeMap('col,colgroup,img,table,td,th,tr')
-
-const isContHeight = makeMap('img,td,th,tr')
-
-const isContConRow = makeMap('td,th,tr')
-
 function makeAttrsMap (attrs) {
   const map = {}
   for (let i = 0, l = attrs.length; i < l; i++) {