@mpxjs/webpack-plugin 2.9.29 → 2.9.31

package/lib/dependencies/CommonJsExtractDependency.js

@@ -7,6 +7,11 @@ class CommonJsExtractDependency extends ModuleDependency {
     this.range = range
   }
 
+  updateHash (hash, context) {
+    hash.update(this.weak + '')
+    super.updateHash(hash, context)
+  }
+
   get type () {
     return 'mpx cjs extract'
   }

package/lib/dependencies/ImportDependencyTemplate.js

@@ -27,7 +27,8 @@ class ImportDependencyTemplate extends (
       message: 'import()',
       runtimeRequirements
     })
-    content = content.replace(/(__webpack_require__\.t\.bind\(.+, )(\d+)(\))/, (_, p1, p2, p3) => {
+    // replace fakeType by 9 to fix require.async to commonjs2 module like 'module.exports = function(){...}'
+    content = content.replace(/(__webpack_require__\.t\.bind\(.+,\s*)(\d+)(\s*\))/, (_, p1, p2, p3) => {
       return p1 + '9' + p3
     })
     source.replace(dep.range[0], dep.range[1] - 1, content)

package/lib/index.js

@@ -302,7 +302,7 @@ class MpxWebpackPlugin {
         warnings.push(`webpack options: MpxWebpackPlugin accept options.output.filename to be ${outputFilename} only, custom options.output.filename will be ignored!`)
       }
       compiler.options.output.filename = compiler.options.output.chunkFilename = outputFilename
-      if (this.options.optimizeSize) {
+      if (this.options.optimizeSize && isProductionLikeMode(compiler.options)) {
         compiler.options.optimization.chunkIds = 'total-size'
         compiler.options.optimization.moduleIds = 'natural'
         compiler.options.optimization.mangleExports = 'size'
@@ -964,17 +964,20 @@ class MpxWebpackPlugin {
       })
 
       compilation.hooks.finishModules.tap('MpxWebpackPlugin', (modules) => {
-        // 移除extractor抽取后的空模块
-        for (const module of modules) {
-          if (module.buildInfo.isEmpty) {
-            for (const connection of moduleGraph.getIncomingConnections(module)) {
-              if (connection.dependency.type === 'mpx cjs extract') {
-                connection.weak = true
-                connection.dependency.weak = true
+        // 移除extractor抽取后的空模块，只有生产模式且optimizeSize设置为true时开启
+        if (this.options.optimizeSize && isProductionLikeMode(compiler.options)) {
+          for (const module of modules) {
+            if (module.buildInfo.isEmpty) {
+              for (const connection of moduleGraph.getIncomingConnections(module)) {
+                if (connection.dependency.type === 'mpx cjs extract') {
+                  connection.weak = true
+                  connection.dependency.weak = true
+                }
               }
             }
           }
         }
+
         // 自动使用分包配置修改splitChunksPlugin配置
         if (splitChunksPlugin) {
           let needInit = false

package/lib/loader.js

@@ -83,7 +83,7 @@ module.exports = function (content) {
   const loaderContext = this
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const filePath = this.resourcePath
-  const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : 'm' + mpx.pathHash(filePath)
+  const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : mpx.pathHash(filePath)
 
   const parts = parseComponent(content, {
     filePath,

package/lib/native-loader.js

@@ -188,7 +188,7 @@ module.exports = function (content) {
         if (appName) this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
       }
 
-      const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : 'm' + mpx.pathHash(filePath)
+      const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : mpx.pathHash(filePath)
 
       if (ctorType !== 'app') {
         rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'

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

@@ -252,7 +252,7 @@
           this.lastY = y
         }, 30, {
           leading: true,
-          trailing: false
+          trailing: true
         }))
         this.bs.on('scrollEnd', () => {
           this.currentX = -this.bs.x

package/lib/runtime/components/web/mpx-swiper.vue

@@ -205,6 +205,7 @@
           momentum: false,
           bounce: false,
           probeType: 3,
+          bindToWrapper: true,
           stopPropagation: true
         }
         const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions)

package/lib/runtime/optionProcessor.js

@@ -308,7 +308,9 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
   }
 
   if (App.onAppInit) {
+    global.__mpxAppInit = true
     Object.assign(option, App.onAppInit() || {})
+    global.__mpxAppInit = false
   }
 
   if (isBrowser && global.__mpxPinia) {

package/lib/runtime/stringify.wxs

@@ -137,7 +137,7 @@ function stringifyDynamicClass (value) {
   }
 
   if (typeof value === 'string') {
-    return mpEscape(value)
+    return value
   } else {
     return ''
   }
@@ -245,7 +245,7 @@ module.exports = {
     if (typeof staticClass !== 'string') {
       return console.log('Template attr class must be a string!')
     }
-    return concat(staticClass, stringifyDynamicClass(dynamicClass))
+    return concat(staticClass, mpEscape(stringifyDynamicClass(dynamicClass)))
   },
   stringifyStyle: function (staticStyle, dynamicStyle) {
     var normalizedDynamicStyle = normalizeDynamicStyle(dynamicStyle)

package/lib/style-compiler/index.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const postcss = require('postcss')
 const loadPostcssConfig = require('./load-postcss-config')
-const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
+const { MPX_ROOT_VIEW } = require('../utils/const')
 const rpx = require('./plugins/rpx')
 const vw = require('./plugins/vw')
 const pluginCondStrip = require('./plugins/conditional-strip')
@@ -15,7 +15,7 @@ module.exports = function (css, map) {
   const cb = this.async()
   const { resourcePath, queryObj } = parseRequest(this.resource)
   const mpx = this.getMpx()
-  const id = queryObj.moduleId || queryObj.mid || 'm' + mpx.pathHash(resourcePath)
+  const id = queryObj.moduleId || queryObj.mid || mpx.pathHash(resourcePath)
   const appInfo = mpx.appInfo
   const defs = mpx.defs
   const mode = mpx.mode
@@ -90,7 +90,7 @@ module.exports = function (css, map) {
       .then(result => {
         // ali环境添加全局样式抹平root差异
         if ((mode === 'ali' || mode === 'web') && isApp) {
-          result.css += `\n.${MPX_ROOT_VIEW} { display: initial }\n.${MPX_APP_MODULE_ID} { line-height: normal }`
+          result.css += `\n.${MPX_ROOT_VIEW} { display: initial }\npage { line-height: normal }`
         }
 
         for (const warning of result.warnings()) {

package/lib/template-compiler/compiler.js

@@ -2182,7 +2182,7 @@ function postProcessComponentIs (el) {
     }
     let range = []
     if (el.attrsMap.range) {
-      range = getAndRemoveAttr(el, 'range').val.split(',')
+      range = getAndRemoveAttr(el, 'range').val.split(',').map(item => item.trim())
     }
     el.components.forEach(function (component) {
       if (range.length > 0 && !range.includes(component)) return

package/lib/template-compiler/index.js

@@ -27,7 +27,7 @@ module.exports = function (raw) {
   const hasComment = queryObj.hasComment
   const isNative = queryObj.isNative
   const hasScoped = queryObj.hasScoped
-  const moduleId = queryObj.moduleId || 'm' + mpx.pathHash(resourcePath)
+  const moduleId = queryObj.moduleId || mpx.pathHash(resourcePath)
 
   let optimizeRenderLevel = 0
   for (const rule of optimizeRenderRules) {

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

@@ -2,6 +2,34 @@ const babylon = require('@babel/parser')
 const t = require('@babel/types')
 const traverse = require('@babel/traverse').default
 const generate = require('@babel/generator').default
+const escapeReg = /[()[\]{}#!.:,%'"+$]/g
+const escapeMap = {
+  '(': '_pl_',
+  ')': '_pr_',
+  '[': '_bl_',
+  ']': '_br_',
+  '{': '_cl_',
+  '}': '_cr_',
+  '#': '_h_',
+  '!': '_i_',
+  '/': '_s_',
+  '.': '_d_',
+  ':': '_c_',
+  ',': '_2c_',
+  '%': '_p_',
+  "'": '_q_',
+  '"': '_dq_',
+  '+': '_a_',
+  $: '_si_'
+}
+
+function mpEscape (str) {
+  return str.replace(escapeReg, function (match) {
+    if (escapeMap[match]) return escapeMap[match]
+    // unknown escaped
+    return '_u_'
+  })
+}
 
 module.exports = function transDynamicClassExpr (expr, { error } = {}) {
   try {
@@ -14,13 +42,10 @@ module.exports = function transDynamicClassExpr (expr, { error } = {}) {
       ObjectExpression (path) {
         path.node.properties.forEach((property) => {
           if (t.isObjectProperty(property) && !property.computed) {
-            const propertyName = property.key.name || property.key.value
+            let propertyName = property.key.name || property.key.value
+            propertyName = mpEscape(propertyName)
             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')
-              }
+              property.key = t.identifier(propertyName.replace(/-/g, '$$') + 'MpxDash')
             } else {
               property.key = t.identifier(propertyName)
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.29",
+  "version": "2.9.31",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -82,5 +82,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "62469adf246993e5ca7fd1c0a49cc70faa585c45"
+  "gitHead": "f0fba8b8505519b4c877d9171cd2496da2c97d2d"
 }