@mpxjs/webpack-plugin 2.7.9 → 2.7.12

package/lib/dependencies/DynamicEntryDependency.js

@@ -95,7 +95,6 @@ class DynamicEntryDependency extends NullDependency {
     const { packageRoot, context } = this
     this.originEntryNode = mpx.getEntryNode(module)
     this.publicPath = compilation.outputOptions.publicPath || ''
-    this.applied = false
     if (context) this.resolver = compilation.resolverFactory.get('normal', module.resolveOptions)
     // 分包构建在需要在主包构建完成后在finishMake中处理，返回的资源路径先用key来占位，在合成extractedAssets时再进行最终替换
     if (packageRoot && mpx.currentPackageRoot !== packageRoot) {
@@ -113,8 +112,10 @@ class DynamicEntryDependency extends NullDependency {
 
   // hash会影响最终的codeGenerateResult是否走缓存，由于该dep中resultPath是动态变更的，需要将其更新到hash中，避免错误使用缓存
   updateHash (hash, context) {
-    const { resultPath } = this
+    const { resultPath, relativePath } = this
     if (resultPath) hash.update(resultPath)
+    // relativePath为MPX_CURRENT_CHUNK时，插入随机数hash使当前module的codeGeneration cache失效，以执行dep.apply动态获取当前module所属的chunk路径
+    if (relativePath === MPX_CURRENT_CHUNK) hash.update('' + Math.random())
     super.updateHash(hash, context)
   }
 
@@ -162,7 +163,6 @@ DynamicEntryDependency.Template = class DynamicEntryDependencyTemplate {
       const replaceRange = `mpx_replace_path_${key}`
       source.replace(range[0], range[1] - 1, JSON.stringify(replaceRange))
     }
-    dep.applied = true
   }
 }
 

package/lib/index.js

@@ -34,7 +34,7 @@ const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
-const matchCondition = require('./utils/match-condition')
+const { matchCondition } = require('./utils/match-condition')
 const { preProcessDefs } = require('./utils/index')
 const config = require('./config')
 const hash = require('hash-sum')
@@ -407,8 +407,7 @@ class MpxWebpackPlugin {
           async.each(deps, (dep, callback) => {
             dep.addEntry(compilation, (err, { resultPath }) => {
               if (err) return callback(err)
-              if (dep.applied) mpx.replacePathMap[dep.key] = resultPath
-              dep.resultPath = resultPath
+              dep.resultPath = mpx.replacePathMap[dep.key] = resultPath
               callback()
             })
           }, callback)
@@ -1301,10 +1300,11 @@ try {
               let insertBeforeIndex = -1
               const info = typeLoaderProcessInfo[type]
               loaders.forEach((loader, index) => {
-                if (loader.loader.includes(info[0])) {
+                const currentLoader = toPosix(loader.loader)
+                if (currentLoader.includes(info[0])) {
                   loader.loader = info[1]
                 }
-                if (loader.loader.includes(info[1])) {
+                if (currentLoader.includes(info[1])) {
                   insertBeforeIndex = index
                 }
               })
@@ -1344,13 +1344,13 @@ try {
 
         if (mpx.mode === 'web') {
           const mpxStyleOptions = queryObj.mpxStyleOptions
-          const firstLoader = (loaders[0] && loaders[0].loader) || ''
+          const firstLoader = toPosix(loaders[0] && loaders[0].loader) || ''
           const isPitcherRequest = firstLoader.includes('vue-loader/lib/loaders/pitcher')
           let cssLoaderIndex = -1
           let vueStyleLoaderIndex = -1
           let mpxStyleLoaderIndex = -1
           loaders.forEach((loader, index) => {
-            const currentLoader = loader.loader
+            const currentLoader = toPosix(loader.loader)
             if (currentLoader.includes('css-loader')) {
               cssLoaderIndex = index
             } else if (currentLoader.includes('vue-loader/lib/loaders/stylePostLoader')) {

package/lib/loader.js

@@ -3,7 +3,7 @@ const parseComponent = require('./parser')
 const createHelpers = require('./helpers')
 const loaderUtils = require('loader-utils')
 const parseRequest = require('./utils/parse-request')
-const matchCondition = require('./utils/match-condition')
+const { matchCondition } = require('./utils/match-condition')
 const fixUsingComponent = require('./utils/fix-using-component')
 const addQuery = require('./utils/add-query')
 const async = require('async')

package/lib/native-loader.js

@@ -5,7 +5,7 @@ const config = require('./config')
 const createHelpers = require('./helpers')
 const getJSONContent = require('./utils/get-json-content')
 const async = require('async')
-const matchCondition = require('./utils/match-condition')
+const { matchCondition } = require('./utils/match-condition')
 const fixUsingComponent = require('./utils/fix-using-component')
 const { JSON_JS_EXT } = require('./utils/const')
 

package/lib/resolver/AddEnvPlugin.js

@@ -2,7 +2,7 @@ const path = require('path')
 const stringifyQuery = require('../utils/stringify-query')
 const parseQuery = require('loader-utils').parseQuery
 const addInfix = require('../utils/add-infix')
-const matchCondition = require('../utils/match-condition')
+const { matchCondition } = require('../utils/match-condition')
 const { JSON_JS_EXT } = require('../utils/const')
 
 module.exports = class AddEnvPlugin {

package/lib/resolver/AddModePlugin.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const stringifyQuery = require('../utils/stringify-query')
 const parseQuery = require('loader-utils').parseQuery
-const matchCondition = require('../utils/match-condition')
+const { matchCondition } = require('../utils/match-condition')
 const addInfix = require('../utils/add-infix')
 const { JSON_JS_EXT } = require('../utils/const')
 

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

@@ -1,5 +1,5 @@
 <script>
-  import getInnerListeners from './getInnerListeners'
+  import getInnerListeners, { extendEvent } from './getInnerListeners'
 
   export default {
     name: 'mpx-image',
@@ -23,6 +23,13 @@
     beforeCreate () {
       this.image = new Image()
       this.image.onload = (e) => {
+        extendEvent(e, {
+          detail: {
+            width: this.image.width,
+            height: this.image.height
+          }
+        })
+        
         this.$emit('load', e)
       }
       this.image.onerror = (e) => {

package/lib/style-compiler/index.js

@@ -7,7 +7,7 @@ const vw = require('./plugins/vw')
 const pluginCondStrip = require('./plugins/conditional-strip')
 const scopeId = require('./plugins/scope-id')
 const transSpecial = require('./plugins/trans-special')
-const matchCondition = require('../utils/match-condition')
+const { matchCondition } = require('../utils/match-condition')
 const parseRequest = require('../utils/parse-request')
 
 module.exports = function (css, map) {

package/lib/template-compiler/compiler.js

@@ -3,6 +3,7 @@ const he = require('he')
 const config = require('../config')
 const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
 const normalize = require('../utils/normalize')
+const { normalizeCondition } = require('../utils/match-condition')
 const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
 const isEmptyObject = require('../utils/is-empty-object')
 const getRulesRunner = require('../platform/index')
@@ -10,7 +11,6 @@ const addQuery = require('../utils/add-query')
 const transDynamicClassExpr = require('./trans-dynamic-class-expr')
 const dash2hump = require('../utils/hump-dash').dash2hump
 const { inBrowser } = require('../utils/env')
-
 /**
  * Make a map and return a function for checking if a key
  * is in that map.
@@ -737,8 +737,10 @@ function parse (template, options) {
 
       currentParent.children.push(element)
       element.parent = currentParent
-
       processElement(element, root, options, meta)
+      if (isComponentNode(element, options) && mode === 'ali' && !options.hasVirtualHost) {
+        processAliAddComponentRootView(element, options, stack, currentParent)
+      }
       tagNames.add(element.tag)
 
       if (!unary) {
@@ -1800,36 +1802,70 @@ function processBuiltInComponents (el, meta) {
   }
 }
 
-function processAliStyleClassHack (el, options, root) {
-  let processor
-  // 处理组件标签
-  if (isComponentNode(el, options)) processor = ({ value, typeName }) => [typeName, value]
-  // 处理组件根节点
-  if (options.isComponent && el === root && isRealNode(el)) {
-    processor = ({ name, value, typeName }) => {
-      let sep = name === 'style' ? ';' : ' '
-      value = value ? `{{${typeName}||''}}${sep}${value}` : `{{${typeName}||''}}`
-      return [name, value]
+function processAliAddComponentRootView (el, options, stack, currentParent) {
+  const processAttrsConditions = [
+    { condition: /^(on|catch)Tap$/, action: 'clone' },
+    { condition: /^(on|catch)TouchStart$/, action: 'clone' },
+    { condition: /^(on|catch)TouchMove$/, action: 'clone' },
+    { condition: /^(on|catch)TouchEnd$/, action: 'clone' },
+    { condition: /^(on|catch)TouchCancel$/, action: 'clone' },
+    { condition: /^(on|catch)LongTap$/, action: 'clone' },
+    { condition: /^data-/, action: 'clone' },
+    { condition: 'style', action: 'move' },
+    { condition: 'class', action: 'append', value: `${MPX_ROOT_VIEW} host-${options.moduleId}` }
+  ]
+  let newElAttrs = []
+  let allAttrs = cloneAttrsList(el.attrsList)
+
+  function processClone (attr) {
+    newElAttrs.push(attr)
+  }
+
+  function processMove (attr) {
+    let movedAttr = getAndRemoveAttr(el, attr.name)
+    if (movedAttr.has) {
+      newElAttrs.push({
+        name: attr,
+        value: movedAttr.val
+      })
     }
   }
-  // 非上述两种不处理
-  if (!processor) return
-  // 处理style、class
-  ['style', 'class'].forEach((type) => {
-    let exp = getAndRemoveAttr(el, type).val
-    let typeName = 'mpx' + type.replace(/^./, (matched) => matched.toUpperCase())
-    let [newName, newValue] = processor({
-      name: type,
-      value: exp,
-      typeName
-    })
-    if (newValue !== undefined) {
-      addAttrs(el, [{
-        name: newName,
-        value: newValue
-      }])
+
+  function processAppend (attr, item) {
+    const getNeedAppendAttrValue = el.attrsMap[attr.name]
+    if (getNeedAppendAttrValue) {
+      item.value = getNeedAppendAttrValue + ' ' + item.value
     }
+    newElAttrs.push({
+      name: attr.name,
+      value: item.value
+    })
+  }
+
+  processAttrsConditions.forEach(item => {
+    const matcher = normalizeCondition(item.condition)
+    allAttrs.forEach((attr) => {
+      if (matcher(attr.name)) {
+        if (item.action === 'clone') {
+          processClone(attr)
+        } else if (item.action === 'move') {
+          processMove(attr)
+        } else if (item.action === 'append') {
+          processAppend(attr, item)
+        }
+      }
+    })
   })
+
+  // create new el
+  let componentWrapView = createASTElement('view', newElAttrs)
+  currentParent.children.pop()
+  currentParent.children.push(componentWrapView)
+  componentWrapView.parent = currentParent
+  componentWrapView.children.push(el)
+  el.parent = componentWrapView
+
+  el = componentWrapView
 }
 
 // 有virtualHost情况wx组件注入virtualHost。无virtualHost阿里组件注入root-view。其他跳过。
@@ -1841,17 +1877,17 @@ function getVirtualHostRoot (options, meta) {
       !meta.options && (meta.options = {})
       meta.options.virtualHost = true
     }
-    if (mode === 'ali' && !options.hasVirtualHost) {
-      // ali组件根节点实体化
-      let rootView = createASTElement('view', [
-        {
-          name: 'class',
-          value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
-        }
-      ])
-      processElement(rootView, rootView, options, meta)
-      return rootView
-    }
+    // if (mode === 'ali' && !options.hasVirtualHost) {
+    //   // ali组件根节点实体化
+    //   let rootView = createASTElement('view', [
+    //     {
+    //       name: 'class',
+    //       value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
+    //     }
+    //   ])
+    //   processElement(rootView, rootView, options, meta)
+    //   return rootView
+    // }
   }
   return getTempNode()
 }
@@ -2060,11 +2096,6 @@ function processElement (el, root, options, meta) {
     processShow(el, options, root)
   }
 
-  // 当mode为ali不管是不是跨平台都需要进行此处理，以保障ali当中的refs相关增强能力正常运行
-  if (mode === 'ali') {
-    processAliStyleClassHack(el, options, root)
-  }
-
   if (!pass) {
     processBindEvent(el, options)
     processComponentIs(el, options)

package/lib/template-compiler/index.js

@@ -1,7 +1,7 @@
 const compiler = require('./compiler')
 const bindThis = require('./bind-this').transform
 const parseRequest = require('../utils/parse-request')
-const matchCondition = require('../utils/match-condition')
+const { matchCondition } = require('../utils/match-condition')
 const loaderUtils = require('loader-utils')
 
 module.exports = function (raw) {

package/lib/utils/match-condition.js

@@ -45,4 +45,7 @@ const matchCondition = (resourcePath, condition = {}) => {
   return matched
 }
 
-module.exports = matchCondition
+module.exports = {
+  matchCondition,
+  normalizeCondition
+}

package/lib/web/processTemplate.js

@@ -2,8 +2,7 @@ const templateCompiler = require('../template-compiler/compiler')
 const genComponentTag = require('../utils/gen-component-tag')
 const addQuery = require('../utils/add-query')
 const parseRequest = require('../utils/parse-request')
-
-// const matchCondition = require('../utils/match-condition')
+// const { matchCondition } = require('../utils/match-condition')
 
 function calculateRootEleChild (arr) {
   if (!arr) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.7.9",
+  "version": "2.7.12",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -80,5 +80,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "43b560f84b8e40563c84ef1dc0e4a7d3b4730d93"
+  "gitHead": "5917df99372acfdca21ce770cb8bf8f780974311"
 }