@mpxjs/webpack-plugin 2.8.39 → 2.8.40-test

package/lib/json-compiler/index.js

@@ -38,6 +38,7 @@ module.exports = function (content) {
   const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
   const srcMode = localSrcMode || globalSrcMode
+  const projectRoot = mpx.projectRoot
 
   const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
   const publicPath = this._compilation.outputOptions.publicPath || ''
@@ -55,6 +56,25 @@ module.exports = function (content) {
     )
   }
 
+  const fillInComponentPlaceholder = (name, placeholder, placeholderEntry) => {
+    const componentPlaceholder = json.componentPlaceholder || {}
+    if (componentPlaceholder[name]) return
+    componentPlaceholder[name] = placeholder
+    json.componentPlaceholder = componentPlaceholder
+    if (placeholderEntry && !json.usingComponents[placeholder]) json.usingComponents[placeholder] = placeholderEntry
+  }
+  const normalizePlaceholder = (placeholder) => {
+    if (typeof placeholder === 'string') {
+      placeholder = {
+        name: placeholder
+      }
+    }
+    if (!placeholder.name) {
+      emitError('The asyncSubpackageRules configuration format of @mpxjs/webpack-plugin a is incorrect')
+    }
+    return placeholder
+  }
+
   const {
     isUrlRequest,
     urlToRequest,
@@ -134,6 +154,9 @@ module.exports = function (content) {
       if (!json.usingComponents) {
         json.usingComponents = {}
       }
+      if (!json.component && mode === 'swan') {
+        json.component = true
+      }
     }
   } else if (componentsMap[resourcePath]) {
     // component
@@ -142,22 +165,6 @@ module.exports = function (content) {
     }
   }
 
-  // 校验异步组件占位符 componentPlaceholder 不为空
-  if (mpx.enableRequireAsync) {
-    const { usingComponents, componentPlaceholder = {} } = json
-    if (usingComponents) {
-      for (const compName in usingComponents) {
-        const compPath = usingComponents[compName]
-        if (!/\?root=/g.test(compPath)) continue
-        const compPlaceholder = componentPlaceholder[compName]
-        if (!compPlaceholder) {
-          const errMsg = `componentPlaceholder of "${compName}" doesn't exist! \n\r`
-          emitError(errMsg)
-        }
-      }
-    }
-  }
-
   // 快应用补全json配置，必填项
   if (mode === 'qa' && isApp) {
     const defaultConf = {
@@ -177,14 +184,14 @@ module.exports = function (content) {
     type: 'json',
     waterfall: true,
     warn: emitWarning,
-    error: emitError
+    error: emitError,
+    data: {
+      // polyfill global usingComponents & record globalComponents
+      globalComponents: mpx.usingComponents
+    }
   }
   if (!isApp) {
     rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
-    // polyfill global usingComponents
-    rulesRunnerOptions.data = {
-      globalComponents: mpx.usingComponents
-    }
   }
 
   const rulesRunner = getRulesRunner(rulesRunnerOptions)
@@ -193,22 +200,47 @@ module.exports = function (content) {
     rulesRunner(json)
   }
 
-  if (isApp && json.usingComponents) {
+  if (isApp) {
+    Object.assign(mpx.usingComponents, json.usingComponents)
     // 在 rulesRunner 运行后保存全局注册组件
-    this._module.addPresentationalDependency(new RecordGlobalComponentsDependency(json.usingComponents, this.context))
+    // todo 其余地方在使用mpx.usingComponents时存在缓存问题，要规避该问题需要在所有使用mpx.usingComponents的loader中添加app resourcePath作为fileDependency，但对于缓存有效率影响巨大
+    // todo 需要考虑一种精准控制缓存的方式，仅在全局组件发生变更时才使相关使用方的缓存失效，例如按需在相关模块上动态添加request query？
+    this._module.addPresentationalDependency(new RecordGlobalComponentsDependency(mpx.usingComponents, this.context))
   }
 
   const processComponents = (components, context, callback) => {
     if (components) {
       async.eachOf(components, (component, name, callback) => {
-        processComponent(component, context, { relativePath }, (err, entry) => {
+        processComponent(component, context, { relativePath }, (err, entry, root, placeholder) => {
           if (err === RESOLVE_IGNORED_ERR) {
             delete components[name]
             return callback()
           }
           if (err) return callback(err)
           components[name] = entry
-          callback()
+          if (root) {
+            if (placeholder) {
+              placeholder = normalizePlaceholder(placeholder)
+              if (placeholder.resource) {
+                processComponent(placeholder.resource, projectRoot, { relativePath }, (err, entry) => {
+                  if (err) return callback(err)
+                  fillInComponentPlaceholder(name, placeholder.name, entry)
+                  callback()
+                })
+              } else {
+                fillInComponentPlaceholder(name, placeholder.name)
+                callback()
+              }
+            } else {
+              if (!json.componentPlaceholder || !json.componentPlaceholder[name]) {
+                const errMsg = `componentPlaceholder of "${name}" doesn't exist! \n\r`
+                emitError(errMsg)
+              }
+              callback()
+            }
+          } else {
+            callback()
+          }
         })
       }, callback)
     } else {
@@ -221,14 +253,20 @@ module.exports = function (content) {
     const localPages = []
     const subPackagesCfg = {}
     const pageKeySet = new Set()
-
+    const defaultPagePath = require.resolve('../runtime/components/wx/default-page.mpx')
     const processPages = (pages, context, tarRoot = '', callback) => {
       if (pages) {
+        const pagesCache = []
         async.each(pages, (page, callback) => {
-          processPage(page, context, tarRoot, (err, entry, { isFirst, key } = {}) => {
+          processPage(page, context, tarRoot, (err, entry, { isFirst, key, resource } = {}) => {
             if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
             if (pageKeySet.has(key)) return callback()
+            if (resource.startsWith(defaultPagePath)) {
+              pagesCache.push(entry)
+              return callback()
+            }
             pageKeySet.add(key)
+
             if (tarRoot && subPackagesCfg) {
               subPackagesCfg[tarRoot].pages.push(entry)
             } else {
@@ -241,7 +279,18 @@ module.exports = function (content) {
             }
             callback()
           })
-        }, callback)
+        }, () => {
+          if (tarRoot && subPackagesCfg) {
+            if (!subPackagesCfg[tarRoot].pages.length && pagesCache[0]) {
+              subPackagesCfg[tarRoot].pages.push(pagesCache[0])
+            }
+          } else {
+            if (!localPages.length && pagesCache[0]) {
+              localPages.push(pagesCache[0])
+            }
+          }
+          callback()
+        })
       } else {
         callback()
       }

package/lib/loader.js

@@ -120,7 +120,6 @@ module.exports = function (content) {
 
       let usingComponents = [].concat(Object.keys(mpx.usingComponents))
       let componentPlaceholder = []
-
       let componentGenerics = {}
 
       if (parts.json && parts.json.content) {
@@ -134,18 +133,12 @@ module.exports = function (content) {
         }
         if (!isApp) {
           rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
-          // polyfill global usingComponents
-          // 预读json时无需注入polyfill全局组件
-          // rulesRunnerOptions.data = {
-          //   globalComponents: mpx.usingComponents
-          // }
         }
-
+        const rulesRunner = getRulesRunner(rulesRunnerOptions)
         try {
           const ret = JSON5.parse(parts.json.content)
+          if (rulesRunner) rulesRunner(ret)
           if (ret.usingComponents) {
-            const rulesRunner = getRulesRunner(rulesRunnerOptions)
-            if (rulesRunner) rulesRunner(ret)
             usingComponents = usingComponents.concat(Object.keys(ret.usingComponents))
           }
           if (ret.componentPlaceholder) {
@@ -287,7 +280,7 @@ module.exports = function (content) {
       let ctor = 'App'
       if (ctorType === 'page') {
         // swan也默认使用Page构造器
-        if (mpx.forceUsePageCtor || mode === 'ali' || mode === 'swan') {
+        if (mpx.forceUsePageCtor || mode === 'ali') {
           ctor = 'Page'
         } else {
           ctor = 'Component'

package/lib/native-loader.js

@@ -8,7 +8,7 @@ const async = require('async')
 const { matchCondition } = require('./utils/match-condition')
 const { JSON_JS_EXT } = require('./utils/const')
 const getRulesRunner = require('./platform')
-
+// todo native-loader考虑与mpx-loader或加强复用，原生组件约等于4个区块都为src的.mpx文件
 module.exports = function (content) {
   this.cacheable()
 
@@ -44,6 +44,8 @@ module.exports = function (content) {
     scss: '.scss'
   }
 
+  const TS_EXT = '.ts'
+
   let useJSONJS = false
   let cssLang = ''
   const hasScoped = (queryObj.scoped || autoScope) && mode === 'ali'
@@ -54,7 +56,7 @@ module.exports = function (content) {
     this.resolve(parsed.dir, resourceName + extName, callback)
   }
 
-  function checkCSSLangFiles (callback) {
+  function checkCSSLangFile (callback) {
     const langs = mpx.nativeConfig.cssLangs || ['less', 'stylus', 'scss', 'sass']
     const results = []
     async.eachOf(langs, function (lang, i, callback) {
@@ -89,6 +91,15 @@ module.exports = function (content) {
     })
   }
 
+  function checkTSFile (callback) {
+    checkFileExists(TS_EXT, (err, result) => {
+      if (!err && result) {
+        typeResourceMap.script = result
+      }
+      callback()
+    })
+  }
+
   const emitWarning = (msg) => {
     this.emitWarning(
       new Error('[native-loader][' + this.resource + ']: ' + msg)
@@ -105,15 +116,16 @@ module.exports = function (content) {
   async.waterfall([
     (callback) => {
       async.parallel([
-        checkCSSLangFiles,
-        checkJSONJSFile
+        checkCSSLangFile,
+        checkJSONJSFile,
+        checkTSFile
       ], (err) => {
         callback(err)
       })
     },
     (callback) => {
       async.forEachOf(typeExtMap, (ext, key, callback) => {
-        // 检测到jsonjs或cssLang时跳过对应类型文件检测
+        // 对应资源存在预处理类型文件时跳过对应的标准文件检测
         if (typeResourceMap[key]) {
           return callback()
         }
@@ -137,6 +149,7 @@ module.exports = function (content) {
       } catch (e) {
         return callback(e)
       }
+      let usingComponents = Object.keys(mpx.usingComponents)
       const rulesRunnerOptions = {
         mode,
         srcMode,
@@ -147,16 +160,10 @@ module.exports = function (content) {
       }
       if (!isApp) {
         rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
-        // polyfill global usingComponents
-        // 预读json时无需注入polyfill全局组件
-        // rulesRunnerOptions.data = {
-        //   globalComponents: mpx.usingComponents
-        // }
       }
-      let usingComponents = Object.keys(mpx.usingComponents)
+      const rulesRunner = getRulesRunner(rulesRunnerOptions)
+      if (rulesRunner) rulesRunner(json)
       if (json.usingComponents) {
-        const rulesRunner = getRulesRunner(rulesRunnerOptions)
-        if (rulesRunner) rulesRunner(json)
         usingComponents = usingComponents.concat(Object.keys(json.usingComponents))
       }
       const {
@@ -207,7 +214,7 @@ module.exports = function (content) {
       let ctorType = 'app'
       if (pagesMap[resourcePath]) {
         ctorType = 'page'
-        if (mpx.forceUsePageCtor || mode === 'ali' || mode === 'swan') {
+        if (mpx.forceUsePageCtor || mode === 'ali') {
           ctor = 'Page'
         } else {
           ctor = 'Component'

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,30 @@ module.exports = function getSpec ({ warn, error }) {
     }
   }
 
+  /**
+   * 将小程序代码中使用的与原生 HTML tag 或 内建组件 同名的组件进行转化，以解决与原生tag命名冲突问题。
+   * @param {string} type usingComponents
+   * @returns input
+   */
+  function webHTMLTagProcesser (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 +158,10 @@ module.exports = function getSpec ({ warn, error }) {
       tt: deletePath(),
       jd: deletePath()
     },
+    {
+      test: 'usingComponents',
+      web: webHTMLTagProcesser('usingComponents')
+    },
     {
       test: 'usingComponents',
       ali: componentNameCapitalToHyphen('usingComponents'),
@@ -217,7 +262,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 +363,24 @@ module.exports = function getSpec ({ warn, error }) {
         tt: deletePath(),
         jd: deletePath(true)
       },
+      {
+        test: 'usingComponents',
+        web: webHTMLTagProcesser('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,8 @@ module.exports = function runRules (rules = [], input, options = {}) {
       if (result !== undefined) {
         input = result
       }
-      if (!waterfall) break
+      // rule 内外 waterfall 均为 false 时跳过
+      if (!rule.waterfall && !waterfall) break
     }
   }
   return input

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

@@ -11,6 +11,8 @@ module.exports = function normalizeComponentRules (cfgs, spec) {
     if (cfg.test) {
       result.test = cfg.test
     }
+    // 透传 waterfall 信息
+    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)

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/fix-html-tag.js

@@ -0,0 +1,17 @@
+const { isOriginTag, isBuildInTag } = require('../../../../utils/dom-tag-config')
+
+module.exports = function () {
+  return {
+    waterfall: true,
+    test: (input) => isOriginTag(input) || isBuildInTag(input),
+    // 处理原生tag
+    web (tag, data = {}) {
+      // @see packages/webpack-plugin/lib/platform/json/wx/index.js webHTMLTagProcesser
+      const newTag = `mpx-com-${tag}`
+      const usingComponents = data.usingComponents || []
+      // 存在同名组件，则返回新tag
+      if (usingComponents.includes(newTag)) return newTag
+      return tag
+    }
+  }
+}

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')
@@ -39,6 +39,7 @@ const view = require('./view')
 const webView = require('./web-view')
 const wxs = require('./wxs')
 const component = require('./component')
+const fixHTMLTag = require('./fix-html-tag')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -79,6 +80,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
 
   // 转换规则只需以微信为基准配置微信和支付宝的差异部分，比如微信和支付宝都支持但是写法不一致，或者微信支持而支付宝不支持的部分(抛出错误或警告)
   return [
+    fixHTMLTag(),
     ...Nonsupport({ print }),
     ad({ print }),
     view({ 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
       }
     ]