@mpxjs/webpack-plugin 2.6.105 → 2.6.107

package/lib/extractor.js

@@ -23,9 +23,9 @@ module.exports = function (content) {
   const mpx = mainCompilation.__mpx__
 
   const pagesMap = mpx.pagesMap
+  const getOutputPath = mpx.getOutputPath
 
   const extract = mpx.extract
-  const pathHash = mpx.pathHash
   const extractedMap = mpx.extractedMap
   const mode = mpx.mode
   const typeExtMap = config[mode].typeExtMap
@@ -50,8 +50,7 @@ module.exports = function (content) {
     if (filename) {
       return filename + typeExtMap[type]
     } else {
-      const resourceName = path.parse(resourcePath).name
-      const outputPath = path.join(type, resourceName + pathHash(resourcePath) + typeExtMap[type])
+      const outputPath = getOutputPath(resourcePath, type, { ext: typeExtMap[type] })
       return mpx.getPackageInfo({
         resource: resourceRaw,
         outputPath,

package/lib/index.js

@@ -124,6 +124,7 @@ class MpxWebpackPlugin {
     options.forceUsePageCtor = options.forceUsePageCtor || false
     options.postcssInlineConfig = options.postcssInlineConfig || {}
     options.transRpxRules = options.transRpxRules || null
+    options.webConfig = options.webConfig || {}
     options.auditResource = options.auditResource || false
     options.decodeHTMLText = options.decodeHTMLText || false
     options.nativeOptions = Object.assign({
@@ -142,6 +143,7 @@ class MpxWebpackPlugin {
     options.fileConditionRules = options.fileConditionRules || {
       include: () => true
     }
+    options.customOutputPath = options.customOutputPath || null
     this.options = options
   }
 
@@ -438,6 +440,7 @@ class MpxWebpackPlugin {
           autoScopeRules: this.options.autoScopeRules,
           autoVirtualHostRules: this.options.autoVirtualHostRules,
           transRpxRules: this.options.transRpxRules,
+          webConfig: this.options.webConfig,
           postcssInlineConfig: this.options.postcssInlineConfig,
           decodeHTMLText: this.options.decodeHTMLText,
           // native文件专用相关配置
@@ -484,6 +487,15 @@ class MpxWebpackPlugin {
             }
             return hash(hashPath)
           },
+          getOutputPath: (resourcePath, type, { ext = '', conflictPath = '' } = {}) => {
+            const name = path.parse(resourcePath).name
+            const hash = mpx.pathHash(resourcePath)
+            const customOutputPath = this.options.customOutputPath
+            if (conflictPath) return conflictPath.replace(/(\.[^\\/]+)?$/, match => hash + match)
+            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext)
+            if (type === 'component' || type === 'page') return path.join(type + 's', name + hash, 'index' + ext)
+            return path.join(type, name + hash + ext)
+          },
           extract: (content, file, index, sideEffects) => {
             index = index === -1 ? 0 : index
             additionalAssets[file] = additionalAssets[file] || []
@@ -549,6 +561,13 @@ class MpxWebpackPlugin {
               if (currentResourceMap[resourcePath] === outputPath) {
                 alreadyOutputed = true
               } else {
+                for (let key in currentResourceMap) {
+                  if (currentResourceMap[key] === outputPath && key !== resourcePath) {
+                    outputPath = toPosix(path.join(packageRoot, mpx.getOutputPath(resourcePath, resourceType, { conflictPath: outputPath })))
+                    warn && warn(new Error(`Current ${resourceType} [${resourcePath}] is registered with a conflict outputPath [${currentResourceMap[key]}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`))
+                    break
+                  }
+                }
                 currentResourceMap[resourcePath] = outputPath
               }
             } else if (!currentResourceMap[resourcePath]) {

package/lib/json-compiler/index.js

@@ -26,6 +26,7 @@ module.exports = function (raw = '{}') {
   const options = loaderUtils.getOptions(this) || {}
   const mainCompilation = getMainCompilation(this._compilation)
   const mpx = mainCompilation.__mpx__
+  const getOutputPath = mpx.getOutputPath
 
   const emitWarning = (msg) => {
     this.emitWarning(
@@ -297,8 +298,7 @@ module.exports = function (raw = '{}') {
           let relativePath = path.relative(root, resourceName)
           outputPath = path.join('components', name + pathHash(root), relativePath)
         } else {
-          let componentName = parsed.name
-          outputPath = path.join('components', componentName + pathHash(resourcePath), componentName)
+          outputPath = getOutputPath(resourcePath, 'component')
         }
       }
       const { packageRoot, outputPath: componentPath, alreadyOutputed } = mpx.getPackageInfo({
@@ -515,10 +515,10 @@ module.exports = function (raw = '{}') {
       callback()
     }
 
-    const getPageName = (resourcePath, ext) => {
-      const baseName = path.basename(resourcePath, ext)
-      return path.join('pages', baseName + pathHash(resourcePath), baseName)
-    }
+    // const getPageName = (resourcePath, ext) => {
+    //   const baseName = path.basename(resourcePath, ext)
+    //   return path.join('pages', baseName + pathHash(resourcePath), baseName)
+    // }
 
     const processPages = (pages, srcRoot = '', tarRoot = '', context, callback) => {
       if (pages) {
@@ -552,18 +552,18 @@ module.exports = function (raw = '{}') {
               const relative = path.relative(context, resourcePath)
               if (/^\./.test(relative)) {
                 // 如果当前page不存在于context中，对其进行重命名
-                pageName = toPosix(path.join(tarRoot, getPageName(resourcePath, ext)))
+                pageName = getOutputPath(resourcePath, 'page')
                 emitWarning(`Current page [${resourcePath}] is not in current pages directory [${context}], the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
               } else {
                 pageName = toPosix(path.join(tarRoot, /^(.*?)(\.[^.]*)?$/.exec(relative)[1]))
                 // 如果当前page与已有page存在命名冲突，也进行重命名
-                for (let key in pagesMap) {
-                  if (pagesMap[key] === pageName && key !== resourcePath) {
-                    const pageNameRaw = pageName
-                    pageName = toPosix(path.join(tarRoot, getPageName(resourcePath, ext)))
-                    emitWarning(`Current page [${resourcePath}] is registered with a conflict page path [${pageNameRaw}] which is already existed in system, the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
-                    break
-                  }
+              }
+              for (let key in pagesMap) {
+                if (pagesMap[key] === pageName && key !== resourcePath) {
+                  const pageNameRaw = pageName
+                  pageName = getOutputPath(resourcePath, 'page', { conflictPath: pageNameRaw })
+                  emitWarning(`Current page [${resourcePath}] is registered with a conflict page path [${pageNameRaw}] which is already existed in system, the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
+                  break
                 }
               }
             }

package/lib/loader.js

@@ -38,6 +38,7 @@ module.exports = function (content) {
   const localSrcMode = queryObj.mode
   const srcMode = localSrcMode || globalSrcMode
   const vueContentCache = mpx.vueContentCache
+  const webRouteMode = mpx.webConfig.routeMode || 'hash'
   const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
 
   // 支持资源query传入page或component支持页面/组件单独编译
@@ -244,6 +245,7 @@ module.exports = function (content) {
               i18n,
               componentGenerics,
               projectRoot,
+              webRouteMode,
               jsonConfig: jsonRes.jsonObj,
               componentId: queryObj.componentId || '',
               tabBarMap: jsonRes.tabBarMap,

package/lib/plugin-loader.js

@@ -54,6 +54,7 @@ module.exports = function (source) {
   const context = this.context
   const packageName = 'main'
   const pagesMap = mpx.pagesMap
+  const getOutputPath = mpx.getOutputPath
   const componentsMap = mpx.componentsMap[packageName]
   const getEntryNode = mpx.getEntryNode
   const resolveMode = mpx.resolveMode
@@ -191,8 +192,7 @@ module.exports = function (source) {
             let relativePath = path.relative(root, resourceName)
             outputPath = path.join('components', name + pathHash(root), relativePath)
           } else {
-            let componentName = parsed.name
-            outputPath = path.join('components', componentName + pathHash(resourcePath), componentName)
+            outputPath = getOutputPath(resourcePath, 'component')
           }
           const componentPath = toPosix(outputPath)
           pluginEntry.publicComponents[name] = componentPath

package/lib/runtime/components/web/mpx-keep-alive.vue

@@ -1,5 +1,6 @@
 <script>
   import { inBrowser } from '../../../utils/env'
+
   function isDef (v) {
     return v !== undefined && v !== null
   }
@@ -30,7 +31,7 @@
 
   function getVnodeKey (vnode) {
     if (vnode && vnode.componentOptions) {
-      return vnode.key || vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? ('::' + (vnode.componentOptions.tag)) : '')
+      return vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? ('::' + (vnode.componentOptions.tag)) : '')
     }
   }
 
@@ -73,6 +74,8 @@
             const current = stack[i - 1]
             if (current.vnode && current.vnodeKey === vnodeKey && current.vnode.componentInstance) {
               vnode.componentInstance = current.vnode.componentInstance
+              // 避免组件实例复用但是vnode.key不一致带来的bad case
+              vnode.key = current.vnode.key
               break
             }
           }

package/lib/runtime/components/web/mpx-tab-bar-container.vue

@@ -15,7 +15,7 @@
     'mpx-tab-bar': tabBarPagesMap['mpx-tab-bar']
   }
   tabBar.list.forEach(({ pagePath }) => {
-    const name = pagePath.replace('/', '-')
+    const name = pagePath.replace(/\//g, '-')
     const page = tabBarPagesMap[pagePath]
     if (page) {
       components[name] = page
@@ -39,7 +39,7 @@
       currentComponent () {
         const index = this.currentIndex
         const tabItem = tabBar.list[index]
-        return tabItem.pagePath.replace('/', '-')
+        return tabItem.pagePath.replace(/\//g, '-')
       }
     },
     watch: {

package/lib/runtime/optionProcessor.js

@@ -12,6 +12,7 @@ export default function processOption (
   componentGenerics,
   genericsInfo,
   mixin,
+  webRouteMode,
   Vue,
   VueRouter,
   i18n
@@ -122,6 +123,7 @@ export default function processOption (
         })
       }
       global.__mpxRouter = option.router = new VueRouter({
+        mode: webRouteMode,
         routes: routes
       })
       global.__mpxRouter.stack = []

package/lib/template-compiler/bind-this.js

@@ -1,7 +1,7 @@
-const babylon = require('babylon')
-const traverse = require('babel-traverse').default
-const t = require('babel-types')
-const generate = require('babel-generator').default
+const babylon = require('@babel/parser')
+const traverse = require('@babel/traverse').default
+const t = require('@babel/types')
+const generate = require('@babel/generator').default
 
 let names = 'Infinity,undefined,NaN,isFinite,isNaN,' +
   'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +

package/lib/template-compiler/trans-dynamic-class-expr.js

@@ -1,6 +1,6 @@
-const babylon = require('babylon')
-const t = require('babel-types')
-const generate = require('babel-generator').default
+const babylon = require('@babel/parser')
+const t = require('@babel/types')
+const generate = require('@babel/generator').default
 const dash2hump = require('../utils/hump-dash').dash2hump
 
 module.exports = function transDynamicClassExpr (expr) {

package/lib/web/processScript.js

@@ -39,6 +39,7 @@ module.exports = function (script, options, callback) {
   const genericsInfo = options.genericsInfo
   const componentGenerics = options.componentGenerics
   const forceDisableBuiltInLoader = options.forceDisableBuiltInLoader
+  const webRouteMode = options.webRouteMode
 
   const emitWarning = (msg) => {
     loaderContext.emitWarning(
@@ -254,7 +255,8 @@ module.exports = function (script, options, callback) {
     ${JSON.stringify(tabBarMap)},
     ${JSON.stringify(componentGenerics)},
     ${JSON.stringify(genericsInfo)},
-    getWxsMixin(wxsModules)`
+    getWxsMixin(wxsModules),
+    ${JSON.stringify(webRouteMode)}`
 
       if (ctorType === 'app') {
         content += `,

package/lib/wxs/wxs-loader.js

@@ -17,6 +17,7 @@ module.exports = function () {
   const assetsInfo = mpx.assetsInfo
   const mode = mpx.mode
   const wxsMap = mpx.wxsMap
+  const getOutputPath = mpx.getOutputPath
   const rootName = mainCompilation._preparedEntrypoints[0].name
   let { resourcePath, queryObj } = parseRequest(this.resource)
   const { resourcePath: issuerResourcePath, queryObj: issuerQueryObj } = parseRequest(queryObj.issuerResource || this._module.issuer.resource)
@@ -36,9 +37,9 @@ module.exports = function () {
   if (wxsModule) {
     resourcePath = `${resourcePath}~${wxsModule}`
   }
-
-  const name = path.parse(resourcePath).name + mpx.pathHash(resourcePath)
-  let filename = path.join(/^\.([^.]+)/.exec(config[mode].wxs.ext)[1], `${name}${config[mode].wxs.ext}`)
+  const packageRoot = queryObj.packageRoot || ''
+  const ext = config[mode].wxs.ext
+  let filename = toPosix(path.join(packageRoot, getOutputPath(resourcePath, ext.slice(1), { ext })))
 
   filename = mpx.getPackageInfo({
     resource: this.resource,

package/lib/wxs/wxs-pre-loader.js

@@ -1,7 +1,7 @@
-const babylon = require('babylon')
-const traverse = require('babel-traverse').default
-const t = require('babel-types')
-const generate = require('babel-generator').default
+const babylon = require('@babel/parser')
+const traverse = require('@babel/traverse').default
+const t = require('@babel/types')
+const generate = require('@babel/generator').default
 const getMainCompilation = require('../utils/get-main-compilation')
 const parseRequest = require('../utils/parse-request')
 const isEmptyObject = require('../utils/is-empty-object')

package/lib/wxss/processCss.js

@@ -3,37 +3,37 @@
   Author Tobias Koppers @sokra
   Modified by @hiyuki
 */
-var formatCodeFrame = require('babel-code-frame')
-var Tokenizer = require('css-selector-tokenizer')
-var postcss = require('postcss')
-var loaderUtils = require('loader-utils')
-var assign = require('object-assign')
-var getLocalIdent = require('./getLocalIdent')
+const formatCodeFrame = require('@babel/code-frame')
+const Tokenizer = require('css-selector-tokenizer')
+const postcss = require('postcss')
+const loaderUtils = require('loader-utils')
+const assign = require('object-assign')
+const getLocalIdent = require('./getLocalIdent')
 
-var icssUtils = require('icss-utils')
-var localByDefault = require('postcss-modules-local-by-default')
-var extractImports = require('postcss-modules-extract-imports')
-var modulesScope = require('postcss-modules-scope')
-var modulesValues = require('postcss-modules-values')
-var valueParser = require('postcss-value-parser')
-var isUrlRequest = require('../utils/is-url-request')
+const icssUtils = require('icss-utils')
+const localByDefault = require('postcss-modules-local-by-default')
+const extractImports = require('postcss-modules-extract-imports')
+const modulesScope = require('postcss-modules-scope')
+const modulesValues = require('postcss-modules-values')
+const valueParser = require('postcss-value-parser')
+const isUrlRequest = require('../utils/is-url-request')
 
-var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
+const parserPlugin = postcss.plugin('css-loader-parser', function (options) {
   return function (css) {
-    var imports = {}
-    var exports = {}
-    var importItems = []
-    var urlItems = []
+    const imports = {}
+    let exports = {}
+    const importItems = []
+    const urlItems = []
 
     function replaceImportsInString (str) {
       if (options.import) {
-        var tokens = valueParser(str)
+        const tokens = valueParser(str)
         tokens.walk(function (node) {
           if (node.type !== 'word') {
             return
           }
-          var token = node.value
-          var importIndex = imports['$' + token]
+          const token = node.value
+          const importIndex = imports['$' + token]
           if (typeof importIndex === 'number') {
             node.value = '___CSS_LOADER_IMPORT___' + importIndex + '___'
           }
@@ -45,8 +45,8 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
 
     if (options.import) {
       css.walkAtRules(/^import$/i, function (rule) {
-        var values = Tokenizer.parseValues(rule.params)
-        var url = values.nodes[0].nodes[0]
+        const values = Tokenizer.parseValues(rule.params)
+        let url = values.nodes[0].nodes[0]
         if (url && url.type === 'url') {
           url = url.url
         } else if (url && url.type === 'string') {
@@ -56,7 +56,7 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
           return
         }
         values.nodes[0].nodes.shift()
-        var mediaQuery = Tokenizer.stringifyValues(values)
+        const mediaQuery = Tokenizer.stringifyValues(values)
 
         if (isUrlRequest(url, options.root)) {
           url = loaderUtils.urlToRequest(url, options.root)
@@ -70,10 +70,10 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
       })
     }
 
-    var icss = icssUtils.extractICSS(css)
+    const icss = icssUtils.extractICSS(css)
     exports = icss.icssExports
     Object.keys(icss.icssImports).forEach(function (key) {
-      var url = loaderUtils.parseString(key)
+      const url = loaderUtils.parseString(key)
       Object.keys(icss.icssImports[key]).forEach(function (prop) {
         imports['$' + prop] = importItems.length
         importItems.push({
@@ -101,7 +101,7 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
           item.nodes.forEach(processNode)
           break
         case 'item':
-          var importIndex = imports['$' + item.name]
+          const importIndex = imports['$' + item.name]
           if (typeof importIndex === 'number') {
             item.name = '___CSS_LOADER_IMPORT___' + importIndex + '___'
           }
@@ -112,7 +112,7 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
             item.stringType = ''
             delete item.innerSpacingBefore
             delete item.innerSpacingAfter
-            var url = item.url
+            const url = item.url
             item.url = '___CSS_LOADER_URL___' + urlItems.length + '___'
             urlItems.push({
               url: url
@@ -123,7 +123,7 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
     }
 
     css.walkDecls(function (decl) {
-      var values = Tokenizer.parseValues(decl.value)
+      const values = Tokenizer.parseValues(decl.value)
       values.nodes.forEach(function (value) {
         value.nodes.forEach(processNode)
       })
@@ -142,17 +142,17 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
 })
 
 module.exports = function processCss (inputSource, inputMap, options, callback) {
-  var query = options.query
-  var root = query.root && query.root.length > 0 ? query.root.replace(/\/$/, '') : query.root
-  var context = query.context
-  var localIdentName = query.localIdentName || '[hash:base64]'
-  var localIdentRegExp = query.localIdentRegExp
-  var forceMinimize = query.minimize
-  var minimize = typeof forceMinimize !== 'undefined' ? !!forceMinimize : options.minimize
+  const query = options.query
+  const root = query.root && query.root.length > 0 ? query.root.replace(/\/$/, '') : query.root
+  const context = query.context
+  const localIdentName = query.localIdentName || '[hash:base64]'
+  const localIdentRegExp = query.localIdentRegExp
+  const forceMinimize = query.minimize
+  const minimize = typeof forceMinimize !== 'undefined' ? !!forceMinimize : options.minimize
 
-  var customGetLocalIdent = query.getLocalIdent || getLocalIdent
+  const customGetLocalIdent = query.getLocalIdent || getLocalIdent
 
-  var parserOptions = {
+  const parserOptions = {
     root: root,
     mode: options.mode,
     url: query.url !== false,
@@ -160,7 +160,7 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
     resolve: options.resolve
   }
 
-  var pipeline = postcss([
+  const pipeline = postcss([
     modulesValues,
     localByDefault({
       mode: options.mode,
@@ -192,8 +192,8 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
   ])
 
   if (minimize) {
-    var cssnano = require('cssnano')
-    var minimizeOptions = assign({}, query.minimize);
+    const cssnano = require('cssnano')
+    const minimizeOptions = assign({}, query.minimize);
     ['zindex', 'normalizeUrl', 'discardUnused', 'mergeIdents', 'reduceIdents', 'autoprefixer', 'svgo'].forEach(function (name) {
       if (typeof minimizeOptions[name] === 'undefined') {
         minimizeOptions[name] = false
@@ -226,7 +226,7 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
     })
   }).catch(function (err) {
     if (err.name === 'CssSyntaxError') {
-      var wrappedError = new CSSLoaderError(
+      const wrappedError = new CSSLoaderError(
         'Syntax Error',
         err.reason,
         err.line != null && err.column != null
@@ -242,7 +242,7 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
 }
 
 function formatMessage (message, loc, source) {
-  var formatted = message
+  let formatted = message
   if (loc) {
     formatted = formatted +
       ' (' + loc.line + ':' + loc.column + ')'
@@ -260,7 +260,7 @@ function CSSLoaderError (name, message, loc, source, error) {
   this.name = name
   this.error = error
   this.message = formatMessage(message, loc, source)
-  this.hideStack = true
+  this.message = formatMessage(message, loc, source)
 }
 
 CSSLoaderError.prototype = Object.create(Error.prototype)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.6.105",
+  "version": "2.6.107",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -15,6 +15,11 @@
     "lib"
   ],
   "dependencies": {
+    "@babel/code-frame": "^7.16.0",
+    "@babel/generator": "^7.16.0",
+    "@babel/parser": "^7.16.2",
+    "@babel/traverse": "^7.16.0",
+    "@babel/types": "^7.16.0",
     "@better-scroll/core": "^2.2.1",
     "@better-scroll/movable": "^2.2.1",
     "@better-scroll/observe-dom": "^2.2.1",
@@ -24,11 +29,6 @@
     "@better-scroll/zoom": "^2.2.1",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
-    "babel-code-frame": "^6.26.0",
-    "babel-generator": "^6.26.1",
-    "babel-traverse": "^6.26.0",
-    "babel-types": "^6.26.0",
-    "babylon": "^6.18.0",
     "consolidate": "^0.15.1",
     "css": "^2.2.1",
     "css-selector-tokenizer": "^0.7.0",
@@ -81,5 +81,5 @@
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4"
   },
-  "gitHead": "499f344f87d78f90acdf7110182a71f96f3bf0de"
+  "gitHead": "c5821595c58c2908d56de41e68f1462b949bf646"
 }