@mpxjs/webpack-plugin 2.10.19 → 2.10.20

package/lib/platform/run-rules.js

@@ -15,19 +15,23 @@ function defaultNormalizeTest (rawTest, context) {
 }
 
 module.exports = function runRules (rules = [], input, options = {}) {
-  const { mode, testKey, normalizeTest, data = {}, meta = {}, waterfall } = options
+  const { mode, testKey, normalizeTest, data = {}, meta = {}, waterfall, diagnostic } = options
   rules = rules.rules || rules
   for (let i = 0; i < rules.length; i++) {
     const rule = rules[i]
     const tester = (normalizeTest || defaultNormalizeTest)(rule.test, rule)
     const testInput = testKey ? input[testKey] : input
     const processor = rule[mode]
-    // mode传入data中供processor使用
+    // mode 和 diagnostic 传入 data 中供 processor 内部使用
     Object.assign(data, {
-      mode
+      mode,
+      diagnostic
     })
-    if (tester(testInput, meta) && processor) {
-      const result = processor.call(rule, input, data, meta)
+    if (tester(testInput, meta, data) && processor) {
+      const runProcessor = () => processor.call(rule, input, data, meta)
+      const result = diagnostic && diagnostic.withContext
+        ? diagnostic.withContext({ mode, rule, input, data, meta, testKey, testInput }, runProcessor)
+        : runProcessor()
       meta.processed = true
       if (result !== undefined) {
         input = result

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

@@ -3,7 +3,7 @@ const { parseValues } = require('../../../utils/string')
 
 module.exports = function getSpec({ warn, error }) {
   // React Native 双端都不支持的 CSS property
-  const unsupportedPropExp = /^(white-space|text-overflow|animation|font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures|background-position|caret-color)$/
+  const unsupportedPropExp = /^(white-space|text-overflow|animation|font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures|caret-color|float|clear)$/
   const unsupportedPropMode = {
     // React Native ios 不支持的 CSS property
     ios: /^(vertical-align)$/,
@@ -50,7 +50,7 @@ module.exports = function getSpec({ warn, error }) {
     'flex-direction': ['row', 'row-reverse', 'column', 'column-reverse'],
     'flex-wrap': ['wrap', 'nowrap', 'wrap-reverse'],
     'pointer-events': ['auto', 'box-none', 'box-only', 'none'],
-    'vertical-align': ['auto', 'top', 'bottom', 'center'],
+    'vertical-align': ['auto', 'top', 'bottom', 'middle'],
     position: ['relative', 'absolute', 'fixed'],
     'font-variant': ['small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums'],
     'text-align': ['left', 'right', 'center', 'justify'],
@@ -421,8 +421,9 @@ module.exports = function getSpec({ warn, error }) {
     // css var & 数组直接返回
     if (Array.isArray(value) || cssVariableExp.test(value)) return { prop, value }
     const values = parseValues(value)
+    // Todo 2 RN下顺序不一致转换结果不一致，故这里不处理，动画前后transform排序不一致的问题，由业务调整写法
     // Todo transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
-    values.sort()
+    // values.sort()
     const transform = []
     values.forEach(item => {
       const match = item.match(/([/\w]+)\((.+)\)/)

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

@@ -20,17 +20,15 @@ module.exports = function normalizeComponentRules (cfgs, spec) {
           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
-            })
+            const options = {
+              mode,
+              testKey,
+              diagnostic: data.diagnostic,
+              data: Object.assign({}, data, { attr })
+            }
+            let rAttr = runRules(spec.directive, attr, Object.assign({}, options, { meta }))
             // 指令未匹配到时说明为props，因为目前所有的指令都需要转换
             if (!meta.processed) {
               rAttr = runRules(spec.preProps, rAttr, options)

package/lib/platform/template/wx/component-config/custom-built-in-component.js

@@ -0,0 +1,34 @@
+const CUSTOM_BUILTIN_MODES = ['web', 'ios', 'android', 'harmony']
+
+function testCustomBuiltInTag (tag, meta, data) {
+  const map = data && data.customBuiltInComponents
+  return !!(map && map[tag])
+}
+
+/**
+ * 命中后不再走后续常规 component-config（无 waterfall，run-rules 直接 break）。
+ * 从 runRules 的 data.customBuiltInComponents 读取配置；先写入 originalTag，再 mpx- 前缀。
+ */
+function applyCustomBuiltin (el, data) {
+  const map = data && data.customBuiltInComponents
+  if (!map || !map[el.tag]) return el
+  el.originalTag = el.tag
+  el.isBuiltIn = true
+  el.tag = 'mpx-' + el.originalTag
+  return el
+}
+
+/**
+ * @returns {object}
+ */
+module.exports = function customBuiltInComponent () {
+  return {
+    skipNormalize: true,
+    supportedModes: CUSTOM_BUILTIN_MODES,
+    test: testCustomBuiltInTag,
+    web: applyCustomBuiltin,
+    ios: applyCustomBuiltin,
+    android: applyCustomBuiltin,
+    harmony: applyCustomBuiltin
+  }
+}

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

@@ -39,12 +39,26 @@ const view = require('./view')
 const webView = require('./web-view')
 const label = require('./label')
 const wxs = require('./wxs')
-const component = require('./component')
 const fixComponentName = require('./fix-component-name')
+const customBuiltInComponent = require('./custom-built-in-component')
 const rootPortal = require('./root-portal')
 const stickyHeader = require('./sticky-header')
 const stickySection = require('./sticky-section')
 
+/**
+ * 未命中上方任一组件 test 的标签，仍须走 normalizeComponentRules 中的通用
+ * 指令 / 属性 / 事件链路（如 wx 源码输出 ali 时 bindtap → onTap）。
+ * 历史上在 template/wx/index.js 里通过 normalizeComponentRules(cfgs.concat({}), spec)
+ * 末尾塞入空对象，由 run-rules 对缺省 test 退化为恒 true；此处改为显式配置且必须排在最后。
+ */
+function defaultCatchAllComponentConfig () {
+  return {
+    test () {
+      return true
+    }
+  }
+}
+
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
    * universal print for detail component warn or error
@@ -85,6 +99,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
   // 转换规则只需以微信为基准配置微信和支付宝的差异部分，比如微信和支付宝都支持但是写法不一致，或者微信支持而支付宝不支持的部分(抛出错误或警告)
   return [
     fixComponentName({ print }),
+    customBuiltInComponent(),
     ...unsupported({ print }),
     ad({ print }),
     view({ print }),
@@ -126,9 +141,9 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     livePusher({ print }),
     hyphenTagName({ print }),
     label({ print }),
-    component(),
     rootPortal({ print }),
     stickyHeader({ print }),
-    stickySection({ print })
+    stickySection({ print }),
+    defaultCatchAllComponentConfig()
   ]
 }

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

@@ -92,12 +92,6 @@ module.exports = function ({ print }) {
           }
         }
       },
-      {
-        test: /^(password|auto-focus|focus|cursor|selection-start|selection-end|use-built-in)$/,
-        web (prop, { el }) {
-          el.isBuiltIn = true
-        }
-      },
       {
         test: /^(placeholder-style|placeholder-class|cursor-spacing|confirm-type|confirm-hold|adjust-position|hold-keyboard)$/,
         web: webPropLog
@@ -107,7 +101,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(always-embed|hold-keyboard|safe-password-.+)$/,
+        test: /^(always-embed|safe-password-.+)$/,
         ios: iosPropLog,
         android: androidPropLog,
         harmony: harmonyPropLog

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

@@ -33,10 +33,7 @@ module.exports = function ({ print }) {
     props: [
       {
         test: /^(out-of-bounds)$/,
-        ali: qaPropLog,
-        ios: iosPropLog,
-        android: androidPropLog,
-        harmony: harmonyPropLog
+        ali: qaPropLog
       },
       {
         test: /^(inertia)$/,
@@ -44,9 +41,6 @@ module.exports = function ({ print }) {
       },
       {
         test: /^(damping|friction)$/,
-        ios: iosPropLog,
-        android: androidPropLog,
-        harmony: harmonyPropLog,
         ks: ksPropLog
       },
       {

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

@@ -49,7 +49,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(space|decode)$/,
+        test: /^(space)$/,
         ios: iosPropLog,
         android: androidPropLog,
         harmony: harmonyPropLog

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

@@ -14,13 +14,10 @@ module.exports = function ({ print }) {
   const qqEventLog = print({ platform: 'qq', tag: TAG_NAME, isError: false, type: 'event' })
   const qqPropLog = print({ platform: 'qq', tag: TAG_NAME, isError: false })
   const baiduPropLog = print({ platform: 'baidu', tag: TAG_NAME, isError: false })
-  const iosValueLogError = print({ platform: 'ios', tag: TAG_NAME, isError: true, type: 'value' })
   const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
   const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
-  const androidValueLogError = print({ platform: 'android', tag: TAG_NAME, isError: true, type: 'value' })
   const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
-  const harmonyValueLogError = print({ platform: 'harmony', tag: TAG_NAME, isError: true, type: 'value' })
   const harmonyPropLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false })
   const harmonyEventLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false, type: 'event' })
   const ksPropLog = print({ platform: 'ks', tag: TAG_NAME, isError: false })
@@ -72,28 +69,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: 'confirm-type',
-        ios ({ name, value }) {
-          const notSupported = ['return']
-          if (notSupported.includes(value)) {
-            iosValueLogError({ name, value })
-          }
-        },
-        android ({ name, value }) {
-          const notSupported = ['return']
-          if (notSupported.includes(value)) {
-            androidValueLogError({ name, value })
-          }
-        },
-        harmony ({ name, value }) {
-          const notSupported = ['return']
-          if (notSupported.includes(value)) {
-            harmonyValueLogError({ name, value })
-          }
-        }
-      },
-      {
-        test: /^(always-embed|hold-keyboard|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
+        test: /^(always-embed|confirm-hold|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
         ios: iosPropLog,
         android: androidPropLog,
         harmony: harmonyPropLog

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

@@ -9,7 +9,7 @@ const { dash2hump } = require('../../../utils/hump-dash')
 
 module.exports = function getSpec ({ warn, error }) {
   function getRnDirectiveEventHandle (mode) {
-    return function ({ name, value }, { eventRules, el }) {
+    return function ({ name, value }, { eventRules, el, attr, diagnostic }) {
       const match = this.test.exec(name)
       const prefix = match[1]
       const eventName = match[2]
@@ -17,8 +17,9 @@ module.exports = function getSpec ({ warn, error }) {
       const meta = {
         modifierStr
       }
-      const rPrefix = runRules(spec.event.prefix, prefix, { mode })
-      const rEventName = runRules(eventRules, eventName, { mode, data: { el } })
+      const data = { el, attr }
+      const rPrefix = runRules(spec.event.prefix, prefix, { mode, data, diagnostic })
+      const rEventName = runRules(eventRules, eventName, { mode, data, diagnostic })
       return {
         name: rPrefix + rEventName + meta.modifierStr,
         value
@@ -68,7 +69,12 @@ module.exports = function getSpec ({ warn, error }) {
     // props后处理
     postProps: [
       {
-        web ({ name, value }) {
+        web (prop, data) {
+          const { name, value } = prop
+          // `<template is>` / `data` 留给 compiler 与 RN 一致的 parseMustache 路径；勿在此处转成 :is / :data
+          if (data.el && data.el.tag === 'template' && (name === 'is' || name === 'data')) {
+            return prop
+          }
           const parsed = parseMustacheWithContext(value)
           if (name.startsWith('data-')) {
             return {
@@ -119,14 +125,14 @@ module.exports = function getSpec ({ warn, error }) {
             }
           }
           if (el) {
-            const injectWxsProp = {
-              injectWxsPath: '~' + normalize.lib('runtime/swanHelper.wxs'),
+            const injectWxsInfo = {
+              injectWxsRequest: '~' + normalize.lib('runtime/swanHelper.wxs'),
               injectWxsModuleName: 'mpxSwanHelper'
             }
-            if (el.injectWxsProps && Array.isArray(el.injectWxsProps)) {
-              el.injectWxsProps.push(injectWxsProp)
+            if (el.injectWxsInfos && Array.isArray(el.injectWxsInfos)) {
+              el.injectWxsInfos.push(injectWxsInfo)
             } else {
-              el.injectWxsProps = [injectWxsProp]
+              el.injectWxsInfos = [injectWxsInfo]
             }
           }
           return {
@@ -354,13 +360,14 @@ module.exports = function getSpec ({ warn, error }) {
       // 事件
       {
         test: /^(bind|catch|capture-bind|capture-catch):?(.*?)(\..*)?$/,
-        ali ({ name, value }, { eventRules }) {
+        ali ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ali' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'ali' })
+          const data = { el, attr }
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ali', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'ali', data, diagnostic })
           return {
             name: rPrefix + dash2hump(rEventName.replace(/^./, (matched) => {
               return matched.toUpperCase()
@@ -368,85 +375,91 @@ module.exports = function getSpec ({ warn, error }) {
             value
           }
         },
-        swan ({ name, value }, { eventRules }) {
+        swan ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'swan' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'swan' })
+          const data = { el, attr }
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'swan', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'swan', data, diagnostic })
           if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
           }
         },
-        qq ({ name, value }, { eventRules }) {
+        qq ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'qq' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'qq' })
+          const data = { el, attr }
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'qq', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'qq', data, diagnostic })
           if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
           }
         },
-        jd ({ name, value }, { eventRules }) {
+        jd ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'jd' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'jd' })
+          const data = { el, attr }
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'jd', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'jd', data, diagnostic })
           if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
           }
         },
-        tt ({ name, value }, { eventRules }) {
+        tt ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'tt' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'tt' })
+          const data = { el, attr }
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'tt', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'tt', data, diagnostic })
           if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
           }
         },
-        ks ({ name, value }, { eventRules }) {
+        ks ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ks' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'ks' })
+          const data = { el, attr }
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ks', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'ks', data, diagnostic })
           if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
           }
         },
-        dd ({ name, value }, { eventRules }) {
+        dd ({ name, value }, { eventRules, el, attr, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'dd' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'dd' })
+          const data = { el, attr }
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'dd', data, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'dd', data, diagnostic })
           if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
           }
         },
-        web ({ name, value }, { eventRules, el, usingComponents }) {
+        web ({ name, value }, { eventRules, el, attr, usingComponents, diagnostic }) {
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]
@@ -455,8 +468,9 @@ module.exports = function getSpec ({ warn, error }) {
             modifierStr
           }
           const isComponent = usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'web', meta })
-          const rEventName = runRules(eventRules, eventName, { mode: 'web', data: { isComponent } })
+          const data = { el, attr, isComponent }
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'web', data, meta, diagnostic })
+          const rEventName = runRules(eventRules, eventName, { mode: 'web', data, diagnostic })
           return {
             name: rPrefix + rEventName + meta.modifierStr,
             value
@@ -590,6 +604,6 @@ module.exports = function getSpec ({ warn, error }) {
       ]
     }
   }
-  spec.rules = normalizeComponentRules(getComponentConfigs({ warn, error }).concat({}), spec)
+  spec.rules = normalizeComponentRules(getComponentConfigs({ warn, error }), spec)
   return spec
 }

package/lib/react/processJSON.js

@@ -37,15 +37,15 @@ module.exports = function (jsonContent, {
 
   const context = loaderContext.context
 
-  const emitWarning = (msg) => {
+  const emitWarning = (msg, loc) => {
     loaderContext.emitWarning(
-      new Error('[Mpx json warning][' + loaderContext.resource + ']: ' + msg)
+      new Error('[Mpx json warning][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
     )
   }
 
-  const emitError = (msg) => {
+  const emitError = (msg, loc) => {
     loaderContext.emitError(
-      new Error('[Mpx json error][' + loaderContext.resource + ']: ' + msg)
+      new Error('[Mpx json error][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
     )
   }
 
@@ -109,6 +109,9 @@ module.exports = function (jsonContent, {
       waterfall: true,
       warn: emitWarning,
       error: emitError,
+      diagnostic: {
+        file: loaderContext.resourcePath
+      },
       data: {
         // polyfill global usingComponents
         globalComponents: mpx.globalComponents

package/lib/react/processStyles.js

@@ -12,16 +12,17 @@ module.exports = function (styles, {
 }, callback) {
   const { getRequestString } = createHelpers(loaderContext)
   let content = ''
+  const styleResults = []
   let output = '/* styles */\n'
   if (styles.length) {
-    const warn = (msg) => {
+    const warn = (msg, loc) => {
       loaderContext.emitWarning(
-        new Error('[Mpx style warning][' + loaderContext.resource + ']: ' + msg)
+        new Error('[Mpx style warning][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
       )
     }
-    const error = (msg) => {
+    const error = (msg, loc) => {
       loaderContext.emitError(
-        new Error('[Mpx style error][' + loaderContext.resource + ']: ' + msg)
+        new Error('[Mpx style error][' + (loc || loaderContext.resourcePath) + ']: ' + msg)
       )
     }
     const { mode, srcMode } = loaderContext.getMpx()
@@ -35,11 +36,22 @@ module.exports = function (styles, {
       // todo 建立新的request在内部导出classMap，便于样式模块复用
       loaderContext.importModule(JSON.parse(getRequestString('styles', style, extraOptions, i))).then((result) => {
         if (Array.isArray(result)) {
-          result = result.map((item) => {
-            return item[1]
-          }).join('\n')
+          result.forEach((item) => {
+            const css = item[1]
+            styleResults.push({
+              content: css,
+              map: item[3],
+              filename: loaderContext.resourcePath
+            })
+            content += css.trim() + '\n'
+          })
+        } else {
+          styleResults.push({
+            content: result,
+            filename: loaderContext.resourcePath
+          })
+          content += result.trim() + '\n'
         }
-        content += result.trim() + '\n'
         callback()
       }).catch((e) => {
         callback(e)
@@ -55,7 +67,9 @@ module.exports = function (styles, {
         const formatValueName = '_f'
         const classMap = getClassMap({
           content,
+          styles: styleResults,
           filename: loaderContext.resourcePath,
+          inputFileSystem: loaderContext._compiler && loaderContext._compiler.inputFileSystem,
           mode,
           srcMode,
           ctorType,