@mpxjs/webpack-plugin 2.7.42 → 2.7.45

package/lib/index.js

@@ -164,12 +164,6 @@ class MpxWebpackPlugin {
     }, options.nativeConfig)
     options.webConfig = options.webConfig || {}
     options.partialCompile = options.mode !== 'web' && options.partialCompile
-    let proxyComponentEventsRules = []
-    const proxyComponentEventsRulesRaw = options.proxyComponentEventsRules
-    if (proxyComponentEventsRulesRaw) {
-      proxyComponentEventsRules = Array.isArray(proxyComponentEventsRulesRaw) ? proxyComponentEventsRulesRaw : [proxyComponentEventsRulesRaw]
-    }
-    options.proxyComponentEventsRules = proxyComponentEventsRules
     this.options = options
     // Hack for buildDependencies
     const rawResolveBuildDependencies = FileSystemInfo.prototype.resolveBuildDependencies
@@ -574,7 +568,6 @@ class MpxWebpackPlugin {
           useRelativePath: this.options.useRelativePath,
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
-          proxyComponentEventsRules: this.options.proxyComponentEventsRules,
           pathHash: (resourcePath) => {
             if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
               return hash(path.relative(this.options.projectRoot, resourcePath))
@@ -819,12 +812,24 @@ class MpxWebpackPlugin {
             // 因为文件缓存的存在，前面hack identifier的行为对于从文件缓存中创建得到的module并不生效，因此需要在回调中进行二次hack处理
             if (err) return rawCallback(err)
             hackModuleIdentifier(module)
-            rawCallback(null, module)
+            return rawCallback(null, module)
           }
         }
         return rawAddModule.call(compilation, module, callback)
       }
 
+      // hack process https://github.com/webpack/webpack/issues/16045
+      const _handleModuleBuildAndDependenciesRaw = compilation._handleModuleBuildAndDependencies
+
+      compilation._handleModuleBuildAndDependencies = (originModule, module, recursive, callback) => {
+        const rawCallback = callback
+        callback = (err) => {
+          if (err) return rawCallback(err)
+          return rawCallback(null, module)
+        }
+        return _handleModuleBuildAndDependenciesRaw.call(compilation, originModule, module, recursive, callback)
+      }
+
       const rawEmitAsset = compilation.emitAsset
 
       compilation.emitAsset = (file, source, assetInfo) => {
@@ -957,7 +962,7 @@ class MpxWebpackPlugin {
           return true
         })
 
-        const requireAsyncHandler = (expr, members) => {
+        const requireAsyncHandler = (expr, members, args) => {
           if (members[0] === 'async') {
             let request = expr.arguments[0].value
             const range = expr.arguments[0].range
@@ -977,10 +982,10 @@ class MpxWebpackPlugin {
                 const dep = new CommonJsAsyncDependency(request, range)
                 parser.state.current.addDependency(dep)
               }
+              if (args) parser.walkExpressions(args)
               return true
             } else {
               compilation.errors.push(new Error(`The require async JS [${request}] need to declare subpackage name by root`))
-              return true
             }
           }
         }
@@ -997,7 +1002,7 @@ class MpxWebpackPlugin {
           .tap({
             name: 'MpxWebpackPlugin',
             stage: -1000
-          }, (expr, calleeMembers, callExpr) => requireAsyncHandler(callExpr, calleeMembers))
+          }, (expr, calleeMembers, callExpr) => requireAsyncHandler(callExpr, calleeMembers, expr.arguments))
 
         // hack babel polyfill global
         parser.hooks.statementIf.tap('MpxWebpackPlugin', (expr) => {

package/lib/loader.js

@@ -126,11 +126,12 @@ module.exports = function (content) {
       if (mode === 'web') {
         if (ctorType === 'app' && !queryObj.isApp) {
           const request = addQuery(this.resource, { isApp: true })
+          const el = mpx.webConfig.el || '#app'
           output += `
       import App from ${stringifyRequest(request)}
       import Vue from 'vue'
       new Vue({
-        el: '#app',
+        el: '${el}',
         render: function(h){
           return h(App)
         }

package/lib/runtime/components/web/getInnerListeners.js

@@ -1,5 +1,5 @@
 import { isEmptyObject } from './util'
-const isTouchDevice = 'ontouchstart' in document.documentElement
+const isTouchDevice = document && ('ontouchstart' in document.documentElement)
 
 function processModel (listeners, context) {
   // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值

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')
-const { matchCondition } = require('../utils/match-condition')
 
 /**
  * Make a map and return a function for checking if a key
@@ -746,7 +746,7 @@ function parse (template, options) {
         stack.push(element)
       } else {
         element.unary = true
-        closeElement(element, meta)
+        closeElement(element, meta, options)
       }
     },
 
@@ -761,7 +761,7 @@ function parse (template, options) {
         // pop stack
         stack.pop()
         currentParent = stack[stack.length - 1]
-        closeElement(element, meta)
+        closeElement(element, meta, options)
       }
     },
 
@@ -1813,57 +1813,67 @@ function processBuiltInComponents (el, meta) {
   }
 }
 
-function processAliEventHack (el, options, root) {
-  // 只处理组件根节点
-  if (!(options.isComponent && el === root && isRealNode(el))) {
-    return
-  }
-  const { proxyComponentEventsRules } = options
-  let fallThroughEvents = ['onTap']
-  // 判断当前文件是否在范围中
-  const filePath = options.filePath
-  for (let item of proxyComponentEventsRules) {
-    const {
-      include,
-      exclude
-    } = item || {}
-
-    if (matchCondition(filePath, {
-      include,
-      exclude
-    })) {
-      const eventsRaw = item.events
-      const events = Array.isArray(eventsRaw) ? eventsRaw : [eventsRaw]
-      fallThroughEvents = Array.from(new Set(fallThroughEvents.concat(events)))
-      break
-    }
+function processAliAddComponentRootView (el, options) {
+  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: /^slot$/, action: 'move' }
+  ]
+  const processAppendAttrsRules = [
+    { name: 'class', value: `${MPX_ROOT_VIEW} host-${options.moduleId}` }
+  ]
+  let newElAttrs = []
+  let allAttrs = cloneAttrsList(el.attrsList)
+
+  function processClone (attr) {
+    newElAttrs.push(attr)
   }
 
-  fallThroughEvents.forEach((type) => {
-    addAttrs(el, [{
-      name: type,
-      value: '__proxyEvent'
-    }])
-  })
-}
+  function processMove (attr) {
+    getAndRemoveAttr(el, attr.name)
+    newElAttrs.push(attr)
+  }
 
-function processAliStyleClassHack (el, options, root) {
-  // 处理组件根节点
-  if (options.isComponent && el === root && isRealNode(el)) {
-    ['style', 'class'].forEach((type) => {
-      let exp = getAndRemoveAttr(el, type).val
-      let typeName = type === 'class' ? 'className' : type
-      let sep = type === 'style' ? ';' : ' '
-      let newValue = exp ? `{{${typeName}||''}}${sep}${exp}` : `{{${typeName}||''}}`
+  function processAppendRules (el) {
+    processAppendAttrsRules.forEach((rule) => {
+      const getNeedAppendAttrValue = el.attrsMap[rule.name]
+      const value = getNeedAppendAttrValue ? getNeedAppendAttrValue + ' ' + rule.value : rule.value
+      newElAttrs.push({
+        name: rule.name,
+        value
+      })
+    })
+  }
 
-      if (newValue !== undefined) {
-        addAttrs(el, [{
-          name: type,
-          value: newValue
-        }])
+  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)
+        }
       }
     })
+  })
+
+  processAppendRules(el)
+  let componentWrapView = createASTElement('view', newElAttrs)
+  moveBaseDirective(componentWrapView, el)
+  if (el.is && el.components) {
+    el = postProcessComponentIs(el)
   }
+
+  replaceNode(el, componentWrapView, true)
+  addChild(componentWrapView, el)
+  return componentWrapView
 }
 
 // 有virtualHost情况wx组件注入virtualHost。无virtualHost阿里组件注入root-view。其他跳过。
@@ -1875,36 +1885,36 @@ 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()
 }
 
 function processShow (el, options, root) {
+  // 开启 virtualhost 全部走 props 传递处理
+  // 未开启 virtualhost 直接绑定 display:none 到节点上
   let show = getAndRemoveAttr(el, config[mode].directive.show).val
   if (mode === 'swan') show = wrapMustache(show)
-  let processFlag = el.parent === root
-  // 当ali且未开启virtualHost时，mpxShow打到根节点上
-  if (mode === 'ali' && !options.hasVirtualHost) processFlag = el === root
-  if (options.isComponent && processFlag && isRealNode(el)) {
-    if (show !== undefined) {
-      show = `{{${parseMustache(show).result}&&mpxShow}}`
-    } else {
-      show = '{{mpxShow}}'
+
+  if (options.hasVirtualHost) {
+    if (options.isComponent && el.parent === root && isRealNode(el)) {
+      if (show !== undefined) {
+        show = `{{${parseMustache(show).result}&&mpxShow}}`
+      } else {
+        show = '{{mpxShow}}'
+      }
     }
-  }
-  if (show !== undefined) {
-    if (isComponentNode(el, options)) {
+    if (isComponentNode(el, options) && show !== undefined) {
       if (show === '') {
         show = '{{false}}'
       }
@@ -1913,6 +1923,14 @@ function processShow (el, options, root) {
         value: show
       }])
     } else {
+      processShowStyle()
+    }
+  } else {
+    processShowStyle()
+  }
+
+  function processShowStyle () {
+    if (show !== undefined) {
       const showExp = parseMustache(show).result
       let oldStyle = getAndRemoveAttr(el, 'style').val
       oldStyle = oldStyle ? oldStyle + ';' : ''
@@ -2094,11 +2112,6 @@ function processElement (el, root, options, meta) {
     processShow(el, options, root)
   }
 
-  if (transAli || (srcMode === 'ali' && mode === 'ali')) {
-    processAliStyleClassHack(el, options, root)
-    processAliEventHack(el, options, root)
-  }
-
   if (!pass) {
     processBindEvent(el, options)
     processComponentIs(el, options)
@@ -2107,7 +2120,7 @@ function processElement (el, root, options, meta) {
   processAttrs(el, options)
 }
 
-function closeElement (el, meta) {
+function closeElement (el, meta, options) {
   postProcessAtMode(el)
   if (mode === 'web') {
     postProcessWxs(el, meta)
@@ -2117,8 +2130,13 @@ function closeElement (el, meta) {
   }
   const pass = isNative || postProcessTemplate(el) || processingTemplate
   postProcessWxs(el, meta)
+
   if (!pass) {
-    el = postProcessComponentIs(el)
+    if (isComponentNode(el, options) && !options.hasVirtualHost && mode === 'ali') {
+      el = processAliAddComponentRootView(el, options)
+    } else {
+      el = postProcessComponentIs(el)
+    }
   }
   postProcessFor(el)
   postProcessIf(el)

package/lib/template-compiler/index.js

@@ -59,8 +59,7 @@ module.exports = function (raw) {
     checkUsingComponents: mpx.checkUsingComponents,
     globalComponents: Object.keys(mpx.usingComponents),
     forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules),
-    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules),
-    proxyComponentEventsRules: mpx.proxyComponentEventsRules
+    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules)
   })
 
   if (meta.wxsContentMap) {

package/lib/wxs/WxsTemplatePlugin.js

@@ -1,6 +1,49 @@
 const config = require('../config')
 const { ConcatSource } = require('webpack').sources
 const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
+const RuntimeGlobals = require('webpack/lib/RuntimeGlobals')
+const HelperRuntimeModule = require('webpack/lib/runtime/HelperRuntimeModule')
+const Template = require('webpack/lib/Template')
+
+class MakeNamespaceObjectRuntimeModule extends HelperRuntimeModule {
+  constructor () {
+    super('make namespace object')
+  }
+
+  generate () {
+    const { runtimeTemplate } = this.compilation
+    const fn = RuntimeGlobals.makeNamespaceObject
+    return Template.asString([
+      '// define __esModule on exports',
+      `${fn} = ${runtimeTemplate.basicFunction('exports', [
+        'exports.__esModule = true;'
+      ])};`
+    ])
+  }
+}
+
+class CompatGetDefaultExportRuntimeModule extends HelperRuntimeModule {
+  constructor () {
+    super('compat get default export')
+  }
+
+  generate () {
+    const { runtimeTemplate } = this.compilation
+    const fn = RuntimeGlobals.compatGetDefaultExport
+    return Template.asString([
+      '// getDefaultExport function for compatibility with non-harmony modules',
+      `${fn} = ${runtimeTemplate.basicFunction('module', [
+        'var getter = module && module.__esModule ?',
+        Template.indent([
+          `${runtimeTemplate.returningFunction('module.default')} :`,
+          `${runtimeTemplate.returningFunction('module')};`
+        ]),
+        'getter.a = getter();',
+        'return getter;'
+      ])};`
+    ])
+  }
+}
 
 module.exports = class WxsTemplatePlugin {
   constructor (options = { mode: 'wx' }) {
@@ -20,7 +63,34 @@ module.exports = class WxsTemplatePlugin {
       return new ConcatSource(prefix, source)
     })
 
-    // todo webpack5的新的代码生成模式下完美支持.d.r.n的成本较高，暂不处理，wxs暂时只支持wx源码形式
+    // __webpack_require__.r
+    compilation.hooks.runtimeRequirementInTree
+      .for(RuntimeGlobals.makeNamespaceObject)
+      .tap({
+        name: 'WxsTemplatePlugin',
+        stage: -1000
+      }, chunk => {
+        compilation.addRuntimeModule(
+          chunk,
+          new MakeNamespaceObjectRuntimeModule()
+        )
+        return true
+      })
+
+    // __webpack_require__.n
+    compilation.hooks.runtimeRequirementInTree
+      .for(RuntimeGlobals.compatGetDefaultExport)
+      .tap({
+        name: 'WxsTemplatePlugin',
+        stage: -1000
+      }, chunk => {
+        compilation.addRuntimeModule(
+          chunk,
+          new CompatGetDefaultExportRuntimeModule()
+        )
+        return true
+      })
+
     // mainTemplate.hooks.requireExtensions.tap(
     //   'WxsMainTemplatePlugin',
     //   () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.7.42",
+  "version": "2.7.45",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -80,5 +80,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "c93b582d76ccf1a0cd9ee073d12e436600e2f37d"
+  "gitHead": "ff14a937249fc63600157388d80650d6986d7cb8"
 }