@mpxjs/webpack-plugin 2.9.18 → 2.9.19-react.0

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

@@ -10,6 +10,10 @@ module.exports = function ({ print }) {
   const jdEventLog = print({ platform: 'jd', tag: TAG_NAME, isError: false, type: 'event' })
   const jdPropLog = print({ platform: 'jd', tag: TAG_NAME, isError: false })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
+  const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
+  const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
+  const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
+  const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
 
   return {
     test: TAG_NAME,
@@ -17,6 +21,14 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-swiper'
     },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-swiper'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-swiper'
+    },
     props: [
       {
         test: /^(display-multiple-items|skip-hidden-item-layout|easing-function)$/,
@@ -45,6 +57,11 @@ module.exports = function ({ print }) {
       {
         test: /^(snap-to-edge|easing-function)$/,
         qa: qaPropLog
+      },
+      {
+        test: /^(display-multiple-items|snap-to-edge|easing-function)$/,
+        ios: iosPropLog,
+        android: androidPropLog
       }
     ],
     event: [
@@ -61,7 +78,14 @@ module.exports = function ({ print }) {
       {
         test: /^(transition)$/,
         swan: baiduEventLog,
-        jd: jdEventLog
+        jd: jdEventLog,
+        ios: iosEventLog,
+        android: androidEventLog
+      },
+      {
+        test: /^(animationfinish)$/,
+        ios: iosEventLog,
+        android: androidEventLog
       }
     ]
   }

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

@@ -6,6 +6,8 @@ module.exports = function ({ print }) {
   const aliPropLog = print({ platform: 'ali', tag: TAG_NAME, isError: false })
   const ttPropLog = print({ platform: 'bytedance', tag: TAG_NAME, isError: false })
   const qqPropLog = print({ platform: 'qq', tag: TAG_NAME, isError: false })
+  const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
+  const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
 
   return {
     test: TAG_NAME,
@@ -20,6 +22,14 @@ module.exports = function ({ print }) {
         return 'span'
       }
     },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-text'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-text'
+    },
     props: [
       {
         test: /^(decode|user-select)$/,
@@ -32,6 +42,11 @@ module.exports = function ({ print }) {
         qq: qqPropLog,
         qa: qaPropLog
       },
+      {
+        test: /^(space|decode)$/,
+        ios: iosPropLog,
+        android: androidPropLog
+      },
       {
         test: /^(selectable|space|decode|use-built-in)$/,
         web (prop, { el }) {

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

@@ -14,6 +14,12 @@ 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' })
 
   return {
     test: TAG_NAME,
@@ -22,6 +28,14 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-textarea'
     },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-textarea'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-textarea'
+    },
     props: [
       {
         test: /^(auto-focus|fixed|cursor-spacing|cursor|show-confirm-bar|selection-start|selection-end|adjust-position|hold-keyboard|disable-default-padding|confirm-type)$/,
@@ -47,6 +61,26 @@ module.exports = function ({ print }) {
       {
         test: /^(fixed|cursor-spacing|show-confirm-bar|adjust-position|hold-keyboard|auto-height)$/,
         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 })
+          }
+        }
+      },
+      {
+        test: /^(placeholder-style|placeholder-class|cursor-spacing|always-embed|adjust-position|hold-keyboard|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
+        ios: iosPropLog,
+        android: androidPropLog
       }
     ],
     event: [
@@ -71,6 +105,11 @@ module.exports = function ({ print }) {
       {
         test: /^(linechange|keyboardheightchange)$/,
         tt: ttEventLog
+      },
+      {
+        test: /^keyboard.+$/,
+        ios: iosEventLog,
+        android: androidEventLog
       }
     ]
   }

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

@@ -10,6 +10,10 @@ const TT_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'cover-image', 'cover-view'
 const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher', 'live-player', 'rich-text', 'audio', 'video', 'camera']
 // 快应用不支持的标签集合
 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 = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image',
+  'checkbox', 'checkbox-group', 'radio', 'radio-group', 'switch', 'movable-area', 'movable-view', 'icon', 'progress', 'rich-text', 'form', 'label', 'picker', 'picker-view', 'picker-view-column', 'slider',
+  'audio', 'camera', 'video', 'canvas', 'cover-image', 'cover-view', 'match-media', 'page-container', 'root-portal', 'editor', 'keyboard-accessory', 'navigator', 'map']
 
 /**
  * @param {function(object): function} print
@@ -22,6 +26,8 @@ module.exports = function ({ print }) {
   const ttUnsupportedTagError = print({ platform: 'bytedance', isError: true, type: 'tag' })
   const jdUnsupportedTagError = print({ platform: 'jd', isError: true, type: 'tag' })
   const qaUnsupportedTagError = print({ platform: 'qa', isError: true, type: 'tag' })
+  const iosUnsupportedTagError = print({ platform: 'ios', isError: true, type: 'tag' })
+  const androidUnsupportedTagError = print({ platform: 'android', isError: true, type: 'tag' })
 
   const aliUnsupportedExp = new RegExp('^(' + ALI_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
   const baiduUnsupportedExp = new RegExp('^(' + BAIDU_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
@@ -29,6 +35,8 @@ module.exports = function ({ print }) {
   const ttUnsupportedExp = new RegExp('^(' + TT_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
   const jdUnsupportedExp = new RegExp('^(' + JD_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
   const qaUnsupportedExp = new RegExp('^(' + QA_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
+  const iosUnsupportedExp = new RegExp('^(' + RN_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
+  const androidUnsupportedExp = new RegExp('^(' + RN_UNSUPPORTED_TAG_NAME_ARR.join('|') + ')$')
 
   return [
     {
@@ -60,6 +68,16 @@ module.exports = function ({ print }) {
       supportedModes: ['qa'],
       test: qaUnsupportedExp,
       qa: qaUnsupportedTagError
+    },
+    {
+      supportedModes: ['ios'],
+      test: iosUnsupportedExp,
+      ios: iosUnsupportedTagError
+    },
+    {
+      supportedModes: ['android'],
+      test: androidUnsupportedExp,
+      android: androidUnsupportedTagError
     }
   ]
 }

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

@@ -3,6 +3,8 @@ const TAG_NAME = 'view'
 module.exports = function ({ print }) {
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const qaEventLogError = print({ platform: 'qa', tag: TAG_NAME, isError: false, type: 'event' })
+  const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
+  const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
 
   return {
     // 匹配标签名，可传递正则
@@ -21,6 +23,14 @@ module.exports = function ({ print }) {
         return 'div'
       }
     },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-view'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-view'
+    },
     qa (tag) {
       return 'div'
     },
@@ -33,6 +43,10 @@ module.exports = function ({ print }) {
           el.isBuiltIn = true
         },
         qa: qaPropLog
+      }, {
+        test: /^(hover-stop-propagation)$/,
+        android: androidPropLog,
+        ios: iosPropLog
       }
     ],
     // 组件事件中的差异部分

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

@@ -8,7 +8,7 @@ const normalize = require('../../../utils/normalize')
 
 module.exports = function getSpec ({ warn, error }) {
   const spec = {
-    supportedModes: ['ali', 'swan', 'qq', 'tt', 'web', 'qa', 'jd', 'dd'],
+    supportedModes: ['ali', 'swan', 'qq', 'tt', 'web', 'qa', 'jd', 'dd', 'ios', 'android'],
     // props预处理
     preProps: [],
     // props后处理
@@ -393,6 +393,36 @@ module.exports = function getSpec ({ warn, error }) {
             name: rPrefix + rEventName + meta.modifierStr,
             value
           }
+        },
+        ios ({ name, value }, { eventRules, el }) {
+          const match = this.test.exec(name)
+          const prefix = match[1]
+          const eventName = match[2]
+          const modifierStr = match[3] || ''
+          const meta = {
+            modifierStr
+          }
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ios' })
+          const rEventName = runRules(eventRules, eventName, { mode: 'ios', data: { el } })
+          return {
+            name: rPrefix + rEventName + meta.modifierStr,
+            value
+          }
+        },
+        android ({ name, value }, { eventRules, el }) {
+          const match = this.test.exec(name)
+          const prefix = match[1]
+          const eventName = match[2]
+          const modifierStr = match[3] || ''
+          const meta = {
+            modifierStr
+          }
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'android' })
+          const rEventName = runRules(eventRules, eventName, { mode: 'android', data: { el } })
+          return {
+            name: rPrefix + rEventName + meta.modifierStr,
+            value
+          }
         }
       },
       // 无障碍
@@ -444,6 +474,28 @@ module.exports = function getSpec ({ warn, error }) {
             meta.modifierStr = tempModifierStr ? '.' + tempModifierStr : ''
             return '@'
           }
+          // ios (prefix) {
+          //   const prefixMap = {
+          //     bind: 'on',
+          //     catch: 'catch'
+          //   }
+          //   if (!prefixMap[prefix]) {
+          //     error(`React native environment does not support [${prefix}] event handling!`)
+          //     return
+          //   }
+          //   return prefixMap[prefix]
+          // },
+          // android (prefix) {
+          //   const prefixMap = {
+          //     bind: 'on',
+          //     catch: 'catch'
+          //   }
+          //   if (!prefixMap[prefix]) {
+          //     error(`React native environment does not support [${prefix}] event handling!`)
+          //     return
+          //   }
+          //   return prefixMap[prefix]
+          // }
         }
       ],
       rules: [
@@ -474,14 +526,46 @@ module.exports = function getSpec ({ warn, error }) {
             if (eventName === 'touchforcechange') {
               error(`Web environment does not support [${eventName}] event!`)
             }
+          },
+          ios (eventName) {
+            const eventMap = {
+              tap: 'tap',
+              longtap: 'longpress',
+              longpress: 'longpress',
+              touchstart: 'touchstart',
+              touchmove: 'touchmove',
+              touchend: 'touchend',
+              touchcancel: 'touchcancel'
+            }
+            if (eventMap[eventName]) {
+              return eventMap[eventName]
+            } else {
+              error(`React native environment does not support [${eventName}] event!`)
+            }
+          },
+          android (eventName) {
+            const eventMap = {
+              tap: 'tap',
+              longtap: 'longpress',
+              longpress: 'longpress',
+              touchstart: 'touchstart',
+              touchmove: 'touchmove',
+              touchend: 'touchend',
+              touchcancel: 'touchcancel'
+            }
+            if (eventMap[eventName]) {
+              return eventMap[eventName]
+            } else {
+              error(`React native environment does not support [${eventName}] event!`)
+            }
           }
         },
-        // 特殊web事件
+        // web event escape
         {
           test: /^click$/,
-          web (eventName, data) {
+          web (eventName, { isComponent }) {
             // 自定义组件根节点
-            if (data.isComponent) {
+            if (isComponent) {
               return '_' + eventName
             }
           }

package/lib/react/index.js

@@ -0,0 +1,92 @@
+const async = require('async')
+const processJSON = require('./processJSON')
+const processTemplate = require('./processTemplate')
+const processStyles = require('./processStyles')
+const processScript = require('./processScript')
+const RecordVueContentDependency = require('../dependencies/RecordVueContentDependency')
+
+module.exports = function ({
+  parts,
+  loaderContext,
+  pagesMap,
+  componentsMap,
+  queryObj,
+  ctorType,
+  srcMode,
+  moduleId,
+  isProduction,
+  hasScoped,
+  hasComment,
+  isNative,
+  usingComponents,
+  componentGenerics,
+  autoScope,
+  callback
+}) {
+  const mpx = loaderContext.getMpx()
+  // 通过RecordVueContentDependency和vueContentCache确保子request不再重复生成vueContent
+  const cacheContent = mpx.vueContentCache.get(loaderContext.resourcePath)
+  if (cacheContent) return callback(null, cacheContent)
+  let output = ''
+  return async.waterfall([
+    (callback) => {
+      async.parallel([
+        (callback) => {
+          processTemplate(parts.template, {
+            loaderContext,
+            hasScoped,
+            hasComment,
+            isNative,
+            srcMode,
+            moduleId,
+            ctorType,
+            usingComponents,
+            componentGenerics
+          }, callback)
+        },
+        (callback) => {
+          processStyles(parts.styles, {
+            loaderContext,
+            srcMode,
+            ctorType,
+            autoScope,
+            moduleId
+          }, callback)
+        },
+        (callback) => {
+          processJSON(parts.json, {
+            loaderContext,
+            pagesMap,
+            componentsMap
+          }, callback)
+        }
+      ], (err, res) => {
+        callback(err, res)
+      })
+    },
+    ([templateRes, stylesRes, jsonRes], callback) => {
+      output += templateRes.output
+      output += stylesRes.output
+      output += jsonRes.output
+      processScript(parts.script, {
+        loaderContext,
+        ctorType,
+        srcMode,
+        moduleId,
+        isProduction,
+        componentGenerics,
+        jsonConfig: jsonRes.jsonObj,
+        outputPath: queryObj.outputPath || '',
+        builtInComponentsMap: templateRes.builtInComponentsMap,
+        genericsInfo: templateRes.genericsInfo,
+        wxsModuleMap: templateRes.wxsModuleMap,
+        localComponentsMap: jsonRes.localComponentsMap
+      }, callback)
+    }
+  ], (err, scriptRes) => {
+    if (err) return callback(err)
+    output += scriptRes.output
+    loaderContext._module.addPresentationalDependency(new RecordVueContentDependency(loaderContext.resourcePath, output))
+    callback(null, output)
+  })
+}