@mpxjs/webpack-plugin 2.7.2 → 2.7.6

package/lib/dependencies/DynamicEntryDependency.js

@@ -117,8 +117,11 @@ class DynamicEntryDependency extends NullDependency {
 
 DynamicEntryDependency.Template = class DynamicEntryDependencyTemplate {
   apply (dep, source) {
-    const { resultPath, range, key } = dep
-    if (resultPath) {
+    const { resultPath, range, key, outputPath } = dep
+    if (outputPath === 'custom-tab-bar/index') {
+      // replace with true for custom-tab-bar
+      source.replace(range[0], range[1] - 1, 'true')
+    } else if (resultPath) {
       source.replace(range[0], range[1] - 1, JSON.stringify(resultPath))
     } else {
       const replaceRange = `mpx_replace_path_${key}`

package/lib/extractor.js

@@ -16,7 +16,7 @@ module.exports.pitch = async function (remainingRequest) {
   const type = queryObj.type
   const index = queryObj.index || 0
   const isStatic = queryObj.isStatic
-  const issuerFile = queryObj.issuerFile
+  const issuerResource = queryObj.issuerResource
   const fromImport = queryObj.fromImport
   const needBabel = queryObj.needBabel
 
@@ -82,7 +82,8 @@ module.exports.pitch = async function (remainingRequest) {
       // styles为static就两种情况，一种是.mpx中使用src引用样式，第二种为css-loader中处理@import
       // 为了支持持久化缓存，.mpx中使用src引用样式对issueFile asset产生的副作用迁移到ExtractDependency中处理
       case 'styles':
-        if (issuerFile) {
+        if (issuerResource) {
+          const issuerFile = mpx.getExtractedFile(issuerResource)
           let relativePath = toPosix(path.relative(path.dirname(issuerFile), file))
           relativePath = fixRelative(relativePath, mode)
           if (fromImport) {
@@ -92,7 +93,8 @@ module.exports.pitch = async function (remainingRequest) {
               skipEmit: true,
               extractedInfo: {
                 content: `@import "${relativePath}";\n`,
-                index: -1
+                index,
+                pre: true
               }
             })
           }

package/lib/index.js

@@ -279,7 +279,7 @@ class MpxWebpackPlugin {
 
     const addModePlugin = new AddModePlugin('before-file', this.options.mode, this.options.fileConditionRules, 'file')
     const addEnvPlugin = new AddEnvPlugin('before-file', this.options.env, this.options.fileConditionRules, 'file')
-    const packageEntryPlugin = new PackageEntryPlugin('before-described-relative', this.options.miniNpmPackages, 'resolve')
+    const packageEntryPlugin = new PackageEntryPlugin('before-file', this.options.miniNpmPackages, 'file')
     if (Array.isArray(compiler.options.resolve.plugins)) {
       compiler.options.resolve.plugins.push(addModePlugin)
     } else {
@@ -838,6 +838,23 @@ class MpxWebpackPlugin {
         mpx.assetsModulesMap.set(filename, modules)
       })
 
+      const fillExtractedAssetsMap = (assetsMap, { index, content }, filename) => {
+        if (assetsMap.has(index)) {
+          if (assetsMap.get(index) !== content) {
+            compilation.errors.push(new Error(`The extracted file [${filename}] is filled with same index [${index}] and different content:
+            old content: ${assetsMap.get(index)}
+            new content: ${content}
+            please check!`))
+          }
+        } else {
+          assetsMap.set(index, content)
+        }
+      }
+
+      const sortExtractedAssetsMap = (assetsMap) => {
+        return [...assetsMap.entries()].sort((a, b) => a[0] - b[0]).map(item => item[1])
+      }
+
       compilation.hooks.beforeModuleAssets.tap('MpxWebpackPlugin', () => {
         const extractedAssetsMap = new Map()
         for (const module of compilation.modules) {
@@ -846,19 +863,19 @@ class MpxWebpackPlugin {
             if (extractedInfo) {
               let extractedAssets = extractedAssetsMap.get(filename)
               if (!extractedAssets) {
-                extractedAssets = []
+                extractedAssets = [new Map(), new Map()]
                 extractedAssetsMap.set(filename, extractedAssets)
               }
-              extractedAssets.push(extractedInfo)
+              fillExtractedAssetsMap(extractedInfo.pre ? extractedAssets[0] : extractedAssets[1], extractedInfo, filename)
               compilation.hooks.moduleAsset.call(module, filename)
             }
           }
         }
 
-        for (const [filename, extractedAssets] of extractedAssetsMap) {
-          const sortedExtractedAssets = extractedAssets.sort((a, b) => a.index - b.index)
+        for (const [filename, [pre, normal]] of extractedAssetsMap) {
+          const sortedExtractedAssets = [...sortExtractedAssetsMap(pre), ...sortExtractedAssetsMap(normal)]
           const source = new ConcatSource()
-          sortedExtractedAssets.forEach(({ content }) => {
+          sortedExtractedAssets.forEach((content) => {
             if (content) {
               // 处理replace path
               if (/"mpx_replace_path_.*?"/.test(content)) {
@@ -1344,6 +1361,7 @@ try {
       const fs = compiler.intermediateFileSystem
       const cacheLocation = compiler.options.cache.cacheLocation
       return new Promise((resolve) => {
+        if (!cacheLocation) return resolve()
         if (typeof fs.rm === 'function') {
           fs.rm(cacheLocation, {
             recursive: true,

package/lib/json-compiler/index.js

@@ -474,11 +474,12 @@ module.exports = function (content) {
 
     const processCustomTabBar = (tabBar, context, callback) => {
       if (tabBar && tabBar.custom) {
-        processComponent('./custom-tab-bar/index', context, { outputPath: 'custom-tab-bar/index' }, (err) => {
+        processComponent('./custom-tab-bar/index', context, { outputPath: 'custom-tab-bar/index' }, (err, entry) => {
           if (err === RESOLVE_IGNORED_ERR) {
             delete tabBar.custom
             return callback()
           }
+          tabBar.custom = entry // hack for javascript parser call hook.
           callback(err)
         })
       } else {

package/lib/loader.js

@@ -290,7 +290,7 @@ module.exports = function (content) {
             ...style.src ? {
               ...queryObj,
               isStatic: true,
-              issuerFile: mpx.getExtractedFile(addQuery(this.resource, { type: 'styles' }, true))
+              issuerResource: addQuery(this.resource, { type: 'styles' }, true)
             } : null,
             moduleId,
             scoped

package/lib/resolver/PackageEntryPlugin.js

@@ -1,55 +1,42 @@
 const path = require('path')
-/**
- * @desc 获取小程序npm包资源入口目录
- */
-const getEntry = (name, miniprogram) => {
-  return path.join(name, miniprogram)
-}
+const toPosix = require('../utils/to-posix')
 
 module.exports = class PackageEntryPlugin {
-  constructor (source, miniNpmPackage, target) {
+  constructor (source, miniNpmPackages, target) {
     this.source = source
     this.target = target
-    this.miniNpmPackage = miniNpmPackage
+    this.miniNpmPackages = miniNpmPackages
   }
 
   /**
    * 判断是否需要更改innerRequest
    * 小程序发布npm包约束: package.json配置miniprogram 或默认 miniprogram_dist目录
-   * 0. 前提: request中含有package.json中name字段
    * 1. package.json中配置了miniprogram, 且request中不含miniprogram，尝试拼接
-   * 2. 用户配置miniNpmPackage说明是小程序npm包，如果package.json中没配置miniprogram字段，则尝试拼接默认miniprogram_dist目录
+   * 2. 用户配置miniNpmPackages说明是小程序npm包，如果package.json中没配置miniprogram字段，则尝试拼接默认miniprogram_dist目录
    */
   apply (resolver) {
     const target = resolver.ensureHook(this.target)
     resolver.getHook(this.source).tapAsync('PackagePlugin', (request, resolveContext, callback) => {
-      const innerRequest = request.request || request.path
-      if (!innerRequest || request.miniprogram) return callback()
+      if (request.miniprogram) return callback()
+      let { path: resourcePath, descriptionFileData, descriptionFileRoot } = request
+      if (request.miniprogram || !descriptionFileData) return callback()
+
+      let { name, miniprogram } = descriptionFileData
+      if (!miniprogram && this.miniNpmPackages.includes(name)) miniprogram = 'miniprogram_dist'
+      if (!miniprogram) return callback()
+
+      let relativePath = path.relative(descriptionFileRoot, resourcePath)
+      if (relativePath.startsWith(miniprogram)) return callback()
+
+      relativePath = path.join(miniprogram, relativePath)
 
-      const descriptionFileData = request.descriptionFileData || {}
-      const { name = '', miniprogram } = descriptionFileData
-      let newEntry = ''
-      // request.path和系统环境有关：windows和linux
-      let normalizedName = path.normalize(name)
-      if (innerRequest.indexOf(normalizedName) === -1) {
-        return callback()
-      }
-      if (miniprogram) {
-        newEntry = getEntry(normalizedName, miniprogram)
-      } else if (this.miniNpmPackage.includes(name)) {
-        newEntry = getEntry(normalizedName, 'miniprogram_dist')
-      }
+      const obj = Object.assign({}, request, {
+        path: path.join(descriptionFileRoot, relativePath),
+        relativePath: './' + toPosix(relativePath),
+        miniprogram: true
+      })
 
-      if (newEntry) {
-        const newRequest = innerRequest.replace(normalizedName, newEntry)
-        const obj = Object.assign({}, request, {
-          request: newRequest,
-          miniprogram: true
-        })
-        resolver.doResolve(target, obj, `change request ${innerRequest} to :` + newRequest, resolveContext, callback)
-      } else {
-        callback()
-      }
+      resolver.doResolve(target, obj, 'add miniprogram dist: ' + miniprogram, resolveContext, callback)
     })
   }
 }

package/lib/runtime/components/web/mpx-movable-view.vue

@@ -85,6 +85,10 @@
       animation: {
         type: Boolean,
         default: true
+      },
+      speed: {
+        type: Number,
+        default: 1000
       }
     },
     watch: {
@@ -96,7 +100,7 @@
         if (newVal < this.bs.maxScrollX) {
           newVal = this.bs.maxScrollX
         }
-        this.bs.scrollTo(newVal, this.bs.y)
+        this.bs.scrollTo(newVal, this.bs.y, this.speed)
       },
       y (newVal) {
         this.source = ''
@@ -106,7 +110,7 @@
         if (newVal < this.bs.maxScrollY) {
           newVal = this.bs.maxScrollY
         }
-        this.bs.scrollTo(this.bs.x, newVal)
+        this.bs.scrollTo(this.bs.x, newVal, this.speed)
       },
       scaleValue (newVal) {
         this.isZooming = true

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

@@ -1,29 +1,32 @@
 const babylon = require('@babel/parser')
 const t = require('@babel/types')
+const traverse = require('@babel/traverse').default
 const generate = require('@babel/generator').default
 
 module.exports = function transDynamicClassExpr (expr, { error } = {}) {
   try {
-    const ast = babylon.parseExpression(expr, {
+    const ast = babylon.parse(expr, {
       plugins: [
         'objectRestSpread'
       ]
     })
-    if (t.isObjectExpression(ast)) {
-      ast.properties.forEach((property) => {
-        if (t.isObjectProperty(property) && !property.computed) {
-          const propertyName = property.key.name || property.key.value
-          if (/-/.test(propertyName)) {
-            if (/\$/.test(propertyName)) {
-              error && error(`Dynamic classname [${propertyName}] is not supported, which includes [-] char and [$] char at the same time.`)
-            } else {
-              property.key = t.identifier(propertyName.replace(/-/g, '$$') + 'MpxDash')
+    traverse(ast, {
+      ObjectExpression (path) {
+        path.node.properties.forEach((property) => {
+          if (t.isObjectProperty(property) && !property.computed) {
+            const propertyName = property.key.name || property.key.value
+            if (/-/.test(propertyName)) {
+              if (/\$/.test(propertyName)) {
+                error && error(`Dynamic classname [${propertyName}] is not supported, which includes [-] char and [$] char at the same time.`)
+              } else {
+                property.key = t.identifier(propertyName.replace(/-/g, '$$') + 'MpxDash')
+              }
             }
           }
-        }
-      })
-    }
-    return generate(ast, {
+        })
+      }
+    })
+    return generate(ast.program.body[0].expression, {
       compact: true
     }).code
   } catch (e) {

package/lib/wxml/loader.js

@@ -99,7 +99,7 @@ module.exports = function (content) {
       case config[mode].wxs.tag:
         // 显式传递issuerResource避免模块缓存以及提供给wxs-loader计算相对路径
         extraOptions = {
-          issuerFile: mpx.getExtractedFile(this.resource),
+          issuerResource: this.resource,
           isStatic: true
         }
         requestString = getRequestString('wxs', { src, mode: localSrcMode }, extraOptions)

package/lib/wxs/WxsModuleIdsPlugin.js

@@ -1,7 +1,10 @@
 const {
   compareModulesByPreOrderIndexOrIdentifier
 } = require('webpack/lib/util/comparators')
-const { assignAscendingModuleIds } = require('webpack/lib/ids/IdHelpers')
+const {
+  assignAscendingModuleIds,
+  getUsedModuleIdsAndModules
+} = require('webpack/lib/ids/IdHelpers')
 
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../Module")} Module */
@@ -12,19 +15,13 @@ class WxsModuleIdsPlugin {
       name: 'WxsModuleIdsPlugin',
       // 放在最前面执行，确保生成的代码模块为数组形式，符合wxs规范
       stage: -1000
-    }, modules => {
-      const chunkGraph = compilation.chunkGraph
-      const modulesInNaturalOrder = Array.from(modules)
-        .filter(
-          m =>
-            m.needId &&
-            chunkGraph.getNumberOfModuleChunks(m) > 0 &&
-            chunkGraph.getModuleId(m) === null
-        )
-        .sort(
-          compareModulesByPreOrderIndexOrIdentifier(compilation.moduleGraph)
-        )
-      assignAscendingModuleIds(modulesInNaturalOrder, compilation)
+    }, () => {
+      const [usedIds, modulesInNaturalOrder] =
+        getUsedModuleIdsAndModules(compilation)
+      modulesInNaturalOrder.sort(
+        compareModulesByPreOrderIndexOrIdentifier(compilation.moduleGraph)
+      )
+      assignAscendingModuleIds(usedIds, modulesInNaturalOrder, compilation)
     })
   }
 }

package/lib/wxss/loader.js

@@ -65,7 +65,7 @@ module.exports = function (content, map) {
         alreadyImported[imp.url] = true
       }
       return true
-    }).map((imp) => {
+    }).map((imp, i) => {
       if (!isUrlRequest(imp.url, root, externals)) {
         return 'exports.push([module.id, ' +
           JSON.stringify('@import url(' + imp.url + ');') + ', ' +
@@ -73,9 +73,9 @@ module.exports = function (content, map) {
       } else {
         const requestString = getRequestString('styles', { src: imp.url }, {
           isStatic: true,
-          issuerFile: mpx.getExtractedFile(this.resource),
+          issuerResource: this.resource,
           fromImport: true
-        })
+        }, i)
         return 'exports.push([module.id, ' +
           JSON.stringify('@import "') +
           '+ require(' + requestString + ') +' +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.7.2",
+  "version": "2.7.6",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -80,5 +80,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "eef4ac033679bdc5cb51ed1ddca08bd1d54bfdd2"
+  "gitHead": "2005cbdd935b0f7a193d41e7bb3d12c4a5f62e96"
 }