@mpxjs/webpack-plugin 2.8.32 → 2.8.34

package/lib/json-compiler/helper.js

@@ -94,7 +94,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
       aliasPath = page.path
       page = page.src
     }
-    if (!isUrlRequest(page)) return callback(null, page)
+    if (!isUrlRequest(page)) return callback(null, page, { key: page })
     if (resolveMode === 'native') {
       page = urlToRequest(page)
     }

package/lib/json-compiler/index.js

@@ -5,7 +5,6 @@ const parseComponent = require('../parser')
 const config = require('../config')
 const parseRequest = require('../utils/parse-request')
 const evalJSONJS = require('../utils/eval-json-js')
-const fixUsingComponent = require('../utils/fix-using-component')
 const getRulesRunner = require('../platform/index')
 const addQuery = require('../utils/add-query')
 const getJSONContent = require('../utils/get-json-content')
@@ -143,9 +142,18 @@ module.exports = function (content) {
     }
   }
 
-  if (json.usingComponents) {
-    // todo 迁移到rulesRunner中进行
-    fixUsingComponent(json.usingComponents, mode, emitWarning)
+  // 校验异步组件占位符 componentPlaceholder 不为空
+  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配置，必填项
@@ -163,7 +171,6 @@ module.exports = function (content) {
 
   const rulesRunnerOptions = {
     mode,
-    mpx,
     srcMode,
     type: 'json',
     waterfall: true,
@@ -173,15 +180,9 @@ module.exports = function (content) {
   if (!isApp) {
     rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
     // polyfill global usingComponents
-    // todo 传入rulesRunner中进行按平台转换
     rulesRunnerOptions.data = {
       globalComponents: mpx.usingComponents
     }
-  } else {
-    // 保存全局注册组件
-    if (json.usingComponents) {
-      this._module.addPresentationalDependency(new RecordGlobalComponentsDependency(json.usingComponents, this.context))
-    }
   }
 
   const rulesRunner = getRulesRunner(rulesRunnerOptions)
@@ -190,6 +191,11 @@ module.exports = function (content) {
     rulesRunner(json)
   }
 
+  if (isApp && json.usingComponents) {
+    // 在 rulesRunner 运行后保存全局注册组件
+    this._module.addPresentationalDependency(new RecordGlobalComponentsDependency(json.usingComponents, this.context))
+  }
+
   const processComponents = (components, context, callback) => {
     if (components) {
       async.eachOf(components, (component, name, callback) => {

package/lib/loader.js

@@ -4,7 +4,6 @@ const createHelpers = require('./helpers')
 const loaderUtils = require('loader-utils')
 const parseRequest = require('./utils/parse-request')
 const { matchCondition } = require('./utils/match-condition')
-const fixUsingComponent = require('./utils/fix-using-component')
 const addQuery = require('./utils/add-query')
 const async = require('async')
 const processJSON = require('./web/processJSON')
@@ -21,6 +20,7 @@ const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDepen
 const tsWatchRunLoaderFilter = require('./utils/ts-loader-watch-run-loader-filter')
 const { MPX_APP_MODULE_ID } = require('./utils/const')
 const path = require('path')
+const getRulesRunner = require('./platform')
 
 module.exports = function (content) {
   this.cacheable()
@@ -50,6 +50,19 @@ module.exports = function (content) {
   const localSrcMode = queryObj.mode
   const srcMode = localSrcMode || globalSrcMode
   const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
+  const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
+
+  const emitWarning = (msg) => {
+    this.emitWarning(
+      new Error('[mpx-loader][' + this.resource + ']: ' + msg)
+    )
+  }
+
+  const emitError = (msg) => {
+    this.emitError(
+      new Error('[mpx-loader][' + this.resource + ']: ' + msg)
+    )
+  }
 
   let ctorType = 'app'
   if (pagesMap[resourcePath]) {
@@ -111,10 +124,28 @@ module.exports = function (content) {
       let componentGenerics = {}
 
       if (parts.json && parts.json.content) {
+        const rulesRunnerOptions = {
+          mode,
+          srcMode,
+          type: 'json',
+          waterfall: true,
+          warn: emitWarning,
+          error: emitError
+        }
+        if (!isApp) {
+          rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
+          // polyfill global usingComponents
+          // 预读json时无需注入polyfill全局组件
+          // rulesRunnerOptions.data = {
+          //   globalComponents: mpx.usingComponents
+          // }
+        }
+
         try {
           const ret = JSON5.parse(parts.json.content)
           if (ret.usingComponents) {
-            fixUsingComponent(ret.usingComponents, mode)
+            const rulesRunner = getRulesRunner(rulesRunnerOptions)
+            if (rulesRunner) rulesRunner(ret)
             usingComponents = usingComponents.concat(Object.keys(ret.usingComponents))
           }
           if (ret.componentPlaceholder) {

package/lib/native-loader.js

@@ -6,8 +6,8 @@ const createHelpers = require('./helpers')
 const getJSONContent = require('./utils/get-json-content')
 const async = require('async')
 const { matchCondition } = require('./utils/match-condition')
-const fixUsingComponent = require('./utils/fix-using-component')
 const { JSON_JS_EXT } = require('./utils/const')
+const getRulesRunner = require('./platform')
 
 module.exports = function (content) {
   this.cacheable()
@@ -89,6 +89,18 @@ module.exports = function (content) {
     })
   }
 
+  const emitWarning = (msg) => {
+    this.emitWarning(
+      new Error('[native-loader][' + this.resource + ']: ' + msg)
+    )
+  }
+
+  const emitError = (msg) => {
+    this.emitError(
+      new Error('[native-loader][' + this.resource + ']: ' + msg)
+    )
+  }
+
   // 先读取json获取usingComponents信息
   async.waterfall([
     (callback) => {
@@ -125,9 +137,26 @@ module.exports = function (content) {
       } catch (e) {
         return callback(e)
       }
+      const rulesRunnerOptions = {
+        mode,
+        srcMode,
+        type: 'json',
+        waterfall: true,
+        warn: emitWarning,
+        error: emitError
+      }
+      if (!isApp) {
+        rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
+        // polyfill global usingComponents
+        // 预读json时无需注入polyfill全局组件
+        // rulesRunnerOptions.data = {
+        //   globalComponents: mpx.usingComponents
+        // }
+      }
       let usingComponents = Object.keys(mpx.usingComponents)
       if (json.usingComponents) {
-        fixUsingComponent(json.usingComponents, mode)
+        const rulesRunner = getRulesRunner(rulesRunnerOptions)
+        if (rulesRunner) rulesRunner(json)
         usingComponents = usingComponents.concat(Object.keys(json.usingComponents))
       }
       const {

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

@@ -2,6 +2,7 @@ const runRules = require('../../run-rules')
 const normalizeTest = require('../normalize-test')
 const changeKey = require('../change-key')
 const normalize = require('../../../utils/normalize')
+const { capitalToHyphen } = require('../../../utils/string')
 
 const mpxViewPath = normalize.lib('runtime/components/ali/mpx-view.mpx')
 const mpxTextPath = normalize.lib('runtime/components/ali/mpx-text.mpx')
@@ -35,6 +36,7 @@ module.exports = function getSpec ({ warn, error }) {
   /**
    * @desc 在app.mpx里配置usingComponents作为全局组件
    */
+
   function addGlobalComponents (input, { globalComponents }) {
     if (globalComponents) {
       input.usingComponents = Object.assign({}, globalComponents, input.usingComponents)
@@ -44,6 +46,8 @@ module.exports = function getSpec ({ warn, error }) {
 
   // 处理支付宝 componentPlaceholder 不支持 view、text 原生标签
   function aliComponentPlaceholderFallback (input) {
+    // 处理 驼峰转连字符
+    input = componentNameCapitalToHyphen('componentPlaceholder')(input)
     const componentPlaceholder = input.componentPlaceholder
     const usingComponents = input.usingComponents || (input.usingComponents = {})
     for (const cph in componentPlaceholder) {
@@ -66,95 +70,161 @@ module.exports = function getSpec ({ warn, error }) {
     return input
   }
 
-  const spec = {
-    supportedModes: ['ali', 'swan', 'qq', 'tt', 'jd', 'qa', 'dd'],
-    normalizeTest,
-    page: [
-      {
-        test: 'navigationBarTitleText',
-        ali (input) {
-          return changeKey(input, this.test, 'defaultTitle')
-        }
-      },
-      {
-        test: 'enablePullDownRefresh',
-        ali (input) {
-          input = changeKey(input, this.test, 'pullRefresh')
-          if (input.pullRefresh) {
-            input.allowsBounceVertical = 'YES'
+  // 处理 ali swan 的组件名大写字母转连字符：WordExample/wordExample -> word-example
+  function componentNameCapitalToHyphen (type) {
+    return function (input) {
+      // 百度和支付宝不支持大写组件标签名，统一转成带“-”和小写的形式。百度自带标签不会有带大写的情况
+      // 后续可能需要考虑这些平台支持 componentGenerics 后的转换 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/generics.html
+      const obj = input[type]
+      if (obj) {
+        Object.entries(obj).forEach(([k, v]) => {
+          const keyNeed = /[A-Z]/g.test(k)
+          const valueNeed = /[A-Z]/g.test(v)
+
+          let newK
+          let newV
+
+          if (keyNeed) {
+            newK = capitalToHyphen(k)
+            if (obj[newK]) {
+              warn && warn(`Component name "${newK}" already exists, so component "${k}" can't be converted automatically and it isn't supported in ali/swan environment!`)
+            } else {
+              obj[newK] = v
+              delete obj[k]
+            }
           }
-          return input
-        },
-        jd: deletePath()
-      },
-      {
-        test: 'navigationBarBackgroundColor',
-        ali (input) {
-          return changeKey(input, this.test, 'titleBarColor')
+
+          // componentPlaceholder 的 value 也需要转换
+          if (type === 'componentPlaceholder' && valueNeed) {
+            newV = capitalToHyphen(v)
+            obj[newK || k] = newV
+          }
+        })
+      }
+      return input
+    }
+  }
+
+  const componentRules = [
+    {
+      test: 'componentGenerics',
+      ali: deletePath(true)
+    },
+    {
+      test: 'componentPlaceholder',
+      ali: aliComponentPlaceholderFallback,
+      swan: deletePath(),
+      tt: deletePath(),
+      jd: deletePath()
+    },
+    {
+      test: 'usingComponents',
+      ali: componentNameCapitalToHyphen('usingComponents'),
+      swan: componentNameCapitalToHyphen('usingComponents')
+    },
+    {
+      // todo ali 2.0已支持全局组件，待移除
+      ali: addGlobalComponents,
+      swan: addGlobalComponents,
+      qq: addGlobalComponents,
+      tt: addGlobalComponents,
+      jd: addGlobalComponents
+    }
+  ]
+
+  const windowRules = [
+    {
+      test: 'navigationBarTitleText',
+      ali (input) {
+        return changeKey(input, this.test, 'defaultTitle')
+      }
+    },
+    {
+      test: 'enablePullDownRefresh',
+      ali (input) {
+        input = changeKey(input, this.test, 'pullRefresh')
+        if (input.pullRefresh) {
+          input.allowsBounceVertical = 'YES'
         }
+        return input
       },
-      {
-        test: 'disableSwipeBack',
-        ali: deletePath(),
-        qq: deletePath(),
-        jd: deletePath(),
-        swan: deletePath()
-      },
-      {
-        test: 'onReachBottomDistance',
-        qq: deletePath(),
-        jd: deletePath()
-      },
-      {
-        test: 'disableScroll',
-        ali: deletePath(),
-        qq: deletePath(),
-        jd: deletePath()
-      },
-      {
-        test: 'backgroundColorTop|backgroundColorBottom',
-        ali: deletePath(),
-        swan: deletePath()
-      },
-      {
-        test: 'navigationBarTextStyle|navigationStyle|backgroundTextStyle',
-        ali: deletePath()
-      },
-      {
-        test: 'pageOrientation',
-        ali: deletePath(),
-        swan: deletePath(),
-        tt: deletePath(),
-        jd: deletePath()
-      },
-      {
-        test: 'componentPlaceholder',
-        ali: aliComponentPlaceholderFallback
-      },
-      {
-        ali: addGlobalComponents,
-        swan: addGlobalComponents,
-        qq: addGlobalComponents,
-        tt: addGlobalComponents,
-        jd: addGlobalComponents
+      jd: deletePath()
+    },
+    {
+      test: 'navigationBarBackgroundColor',
+      ali (input) {
+        return changeKey(input, this.test, 'titleBarColor')
       }
-    ],
-    component: [
-      {
-        test: 'componentGenerics',
-        ali: deletePath(true)
-      },
-      {
-        test: 'componentPlaceholder',
-        ali: aliComponentPlaceholderFallback
-      },
-      {
-        ali: addGlobalComponents,
-        swan: addGlobalComponents,
-        qq: addGlobalComponents,
-        tt: addGlobalComponents
+    },
+    {
+      test: 'disableSwipeBack',
+      ali: deletePath(),
+      qq: deletePath(),
+      jd: deletePath(),
+      swan: deletePath()
+    },
+    {
+      test: 'onReachBottomDistance',
+      qq: deletePath(),
+      jd: deletePath()
+    },
+    {
+      test: 'disableScroll',
+      ali: deletePath(),
+      qq: deletePath(),
+      jd: deletePath()
+    },
+    {
+      test: 'backgroundColorTop|backgroundColorBottom',
+      ali: deletePath(),
+      swan: deletePath()
+    },
+    {
+      test: 'navigationBarTextStyle|navigationStyle|backgroundTextStyle',
+      ali: deletePath()
+    },
+    {
+      test: 'pageOrientation',
+      ali: deletePath(),
+      swan: deletePath(),
+      tt: deletePath(),
+      jd: deletePath()
+    }
+  ]
+
+  const getTabBarRule = () => (input, { mode }) => {
+    input.tabBar = runRules(spec.tabBar, input.tabBar, {
+      mode,
+      normalizeTest,
+      waterfall: true,
+      data: {
+        pathArr: ['tabBar']
+      }
+    })
+    return input
+  }
+
+  const getWindowRule = () => (input, { mode }) => {
+    input.window = runRules(spec.window, input.window, {
+      mode,
+      normalizeTest,
+      waterfall: true,
+      data: {
+        pathArr: ['window']
       }
+    })
+    return input
+  }
+
+  const spec = {
+    supportedModes: ['ali', 'swan', 'qq', 'tt', 'jd', 'qa', 'dd'],
+    normalizeTest,
+    page: [
+      ...windowRules,
+      ...componentRules
     ],
+    component: componentRules,
+    window: windowRules,
     tabBar: {
       list: [
         {
@@ -250,6 +320,7 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'usingComponents',
+        // todo ali 2.0已支持全局组件，待移除
         ali: deletePath({ noLog: true }),
         qq: deletePath({ noLog: true }),
         swan: deletePath({ noLog: true }),
@@ -288,114 +359,19 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'tabBar',
-        ali (input) {
-          input.tabBar = runRules(spec.tabBar, input.tabBar, {
-            mode: 'ali',
-            normalizeTest,
-            waterfall: true,
-            data: {
-              pathArr: ['tabBar']
-            }
-          })
-        },
-        qq (input) {
-          input.tabBar = runRules(spec.tabBar, input.tabBar, {
-            mode: 'qq',
-            normalizeTest,
-            waterfall: true,
-            data: {
-              pathArr: ['tabBar']
-            }
-          })
-        },
-        swan (input) {
-          input.tabBar = runRules(spec.tabBar, input.tabBar, {
-            mode: 'swan',
-            normalizeTest,
-            waterfall: true,
-            data: {
-              pathArr: ['tabBar']
-            }
-          })
-        },
-        tt (input) {
-          input.tabBar = runRules(spec.tabBar, input.tabBar, {
-            mode: 'tt',
-            normalizeTest,
-            waterfall: true,
-            data: {
-              pathArr: ['tabBar']
-            }
-          })
-        },
-        jd (input) {
-          input.tabBar = runRules(spec.tabBar, input.tabBar, {
-            mode: 'jd',
-            normalizeTest,
-            waterfall: true,
-            data: {
-              pathArr: ['tabBar']
-            }
-          })
-        }
+        ali: getTabBarRule(),
+        qq: getTabBarRule(),
+        swan: getTabBarRule(),
+        tt: getTabBarRule(),
+        jd: getTabBarRule()
       },
       {
         test: 'window',
-        ali (input) {
-          input.window = runRules(spec.page, input.window, {
-            mode: 'ali',
-            normalizeTest,
-            waterfall: true,
-            data: {
-              pathArr: ['window']
-            }
-          })
-          return input
-        },
-        qq (input) {
-          input.window = runRules(spec.page, input.window, {
-            mode: 'qq',
-            normalizeTest,
-            waterfall: true,
-            data: {
-              pathArr: ['window']
-            }
-          })
-          return input
-        },
-        swan (input) {
-          input.window = runRules(spec.page, input.window, {
-            mode: 'swan',
-            normalizeTest,
-            waterfall: true,
-            data: {
-              pathArr: ['window']
-            }
-          })
-          return input
-        },
-        tt (input) {
-          input.window = runRules(spec.page, input.window, {
-            mode: 'tt',
-            normalizeTest,
-            waterfall: true,
-            data: {
-              pathArr: ['window']
-            }
-          })
-          return input
-        },
-        jd (input) {
-          input.window = runRules(spec.page, input.window, {
-            mode: 'jd',
-            normalizeTest,
-            waterfall: true,
-            data: {
-              pathArr: ['window']
-            }
-          })
-          return input
-        }
+        ali: getWindowRule(),
+        qq: getWindowRule(),
+        swan: getWindowRule(),
+        tt: getWindowRule(),
+        jd: getWindowRule()
       }
     ]
   }

package/lib/runtime/optionProcessor.js

@@ -147,6 +147,7 @@ export default function processOption (
               global.__mpxRouter.needRemove = stack.filter((item) => {
                 if (tabBarMap[item.path.slice(1)]) {
                   tabItem = item
+                  tabItem.path = to.path
                   return false
                 }
                 return true

package/lib/web/processScript.js

@@ -132,7 +132,7 @@ module.exports = function (script, {
           const i18nObj = Object.assign({}, i18n)
           content += `  import VueI18n from 'vue-i18n'
   import { createI18n } from 'vue-i18n-bridge'
-  
+
   Vue.use(VueI18n , { bridge: true })\n`
           const requestObj = {}
           const i18nKeys = ['messages', 'dateTimeFormats', 'numberFormats']
@@ -206,6 +206,7 @@ module.exports = function (script, {
 
       content += `  global.currentModuleId = ${JSON.stringify(moduleId)}\n`
       content += `  global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
+      content += `  global.currentInject = ${JSON.stringify({ moduleId })}\n`
       if (!isProduction) {
         content += `  global.currentResource = ${JSON.stringify(loaderContext.resourcePath)}\n`
       }

package/lib/wxml/loader.js

@@ -6,8 +6,10 @@ const createHelpers = require('../helpers')
 const isUrlRequest = require('../utils/is-url-request')
 const parseRequest = require('../utils/parse-request')
 
-function randomIdent () {
-  return 'xxxHTMLLINKxxx' + Math.random() + Math.random() + 'xxx'
+let count = 0
+
+function countIdent () {
+  return `__HTMLLINK__${count++}__`
 }
 
 module.exports = function (content) {
@@ -57,7 +59,7 @@ module.exports = function (content) {
 
     let ident
     do {
-      ident = randomIdent()
+      ident = countIdent()
     } while (data[ident])
     data[ident] = link
     const x = content.pop()
@@ -71,7 +73,7 @@ module.exports = function (content) {
 
   const exportsString = 'module.exports = '
 
-  return exportsString + content.replace(/xxxHTMLLINKxxx[0-9.]+xxx/g, (match) => {
+  return exportsString + content.replace(/__HTMLLINK__\d+__/g, (match) => {
     if (!data[match]) return match
 
     const link = data[match]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.32",
+  "version": "2.8.34",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -73,7 +73,7 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "scripts": {
-    "test": "echo \"Error: run tests from root\" && exit 1"
+    "test": "jest"
   },
   "devDependencies": {
     "@types/babel-traverse": "^6.25.4",
@@ -82,5 +82,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "76bc52fa3cb4d7c9071d2fb154e23434e7fcb184"
+  "gitHead": "7943c0a8c559299c4d59a2b27ee4abc543c58f13"
 }

package/lib/utils/fix-swan-relative.js

@@ -1,6 +0,0 @@
-module.exports = function (path) {
-  if (/^\.\./.test(path)) {
-    return './' + path
-  }
-  return path
-}

package/lib/utils/fix-using-component.js

@@ -1,23 +0,0 @@
-const { capitalToHyphen } = require('./string')
-
-module.exports = function (usingComponents, mode, warn) {
-  // 百度和支付宝不支持大写组件标签名，统一转成带“-”和小写的形式。百度自带标签不会有带大写的情况
-  // 后续可能需要考虑这些平台支持 componentGenerics 后的转换 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/generics.html
-  const usingDashMode = ['ali', 'swan'] // 使用连字符标签名的mode
-  if (usingComponents) {
-    if (usingDashMode.includes(mode)) {
-      Object.keys(usingComponents).forEach(k => {
-        const newK = capitalToHyphen(k)
-        if (newK !== k) {
-          if (usingComponents[newK]) {
-            warn && warn(`Component name "${newK}" already exists, so component "${k}" can't be converted automatically and it isn't supported in ali/swan environment!`)
-          } else {
-            usingComponents[newK] = usingComponents[k]
-            delete usingComponents[k]
-          }
-        }
-      })
-    }
-  }
-  return usingComponents
-}