@mpxjs/webpack-plugin 2.8.57 → 2.8.59

package/lib/index.js

@@ -173,12 +173,6 @@ class MpxWebpackPlugin {
     options.retryRequireAsync = options.retryRequireAsync || false
     options.enableAliRequireAsync = options.enableAliRequireAsync || false
     options.optimizeSize = options.optimizeSize || false
-    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
@@ -646,7 +640,6 @@ class MpxWebpackPlugin {
           enableRequireAsync: this.options.mode === 'wx' || (this.options.mode === 'ali' && this.options.enableAliRequireAsync),
           partialCompile: this.options.partialCompile,
           asyncSubpackageRules: this.options.asyncSubpackageRules,
-          proxyComponentEventsRules: this.options.proxyComponentEventsRules,
           pathHash: (resourcePath) => {
             if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
               return hash(path.relative(this.options.projectRoot, resourcePath))

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

@@ -96,6 +96,16 @@ function checkDelAndGetPath (path) {
       } else {
         delPath = current.parentPath
       }
+    } else if (t.isLogicalExpression(current.container)) { // case: a || ''
+      const key = current.key === 'left' ? 'right' : 'left'
+      if (t.isLiteral(current.parent[key])) {
+        delPath = current.parentPath
+      } else {
+        canDel = false
+        break
+      }
+    } else if (current.key === 'expression' && t.isExpressionStatement(current.parentPath)) { // dealRemove删除节点时需要
+      delPath = current.parentPath
     } else {
       break
     }
@@ -152,10 +162,6 @@ function checkPrefix (keys, key) {
 }
 
 function dealRemove (path, replace) {
-  while (path.key === 'expression' && t.isExpressionStatement(path.parentPath)) {
-    path = path.parentPath
-  }
-
   try {
     if (replace) {
       path.replaceWith(t.stringLiteral(''))
@@ -163,9 +169,7 @@ function dealRemove (path, replace) {
       t.validate(path, path.key, null)
       path.remove()
     }
-  } catch (e) {
-    console.error(e)
-  }
+  } catch (e) {}
 }
 
 module.exports = {
@@ -202,9 +206,23 @@ module.exports = {
       Identifier (path) {
         if (
           checkBindThis(path) &&
-          !path.scope.hasBinding(path.node.name) &&
           !ignoreMap[path.node.name]
         ) {
+          const scopeBinding = path.scope.hasBinding(path.node.name)
+          // 删除局部作用域的变量
+          if (scopeBinding) {
+            if (renderReduce) {
+              const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path)
+              if (canDel && !ignore) {
+                delPath.delInfo = {
+                  isLocal: true,
+                  canDel,
+                  replace
+                }
+              }
+            }
+            return
+          }
           const { last, keyPath } = calPropName(path)
           path.needBind = true
           if (needCollect) {
@@ -272,10 +290,14 @@ module.exports = {
       enter (path) {
         // 删除重复变量
         if (path.delInfo) {
-          const { keyPath, canDel, replace } = path.delInfo
+          const { keyPath, canDel, isLocal, replace } = path.delInfo
           delete path.delInfo
 
           if (canDel) {
+            if (isLocal) { // 局部作用域里的变量，可直接删除
+              dealRemove(path, replace)
+              return
+            }
             const data = bindingsMap.get(currentBlock)
             const { bindings, pBindings } = data
             const allBindings = Object.assign({}, pBindings, bindings)

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')
@@ -1750,68 +1751,105 @@ function processBuiltInComponents (el, meta) {
   }
 }
 
-function processRootViewEventHack (el, options, root) {
-  // 只处理组件根节点
-  if (!(options.isComponent && el === root && isRealNode(el))) {
-    return
-  }
-  const { proxyComponentEvents } = options
-  if (proxyComponentEvents) {
-    proxyComponentEvents.forEach((type) => {
-      addAttrs(el, [{
-        name: type,
-        value: '__proxyEvent'
-      }])
-    })
+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: /^id$/, action: 'clone' },
+    { condition: /^style$/, action: 'move' },
+    { condition: /^slot$/, action: 'move' }
+  ]
+  const processAppendAttrsRules = [
+    { name: 'class', value: `${MPX_ROOT_VIEW} host-${options.moduleId}` }
+  ]
+  const newElAttrs = []
+  const allAttrs = cloneAttrsList(el.attrsList)
+
+  function processClone (attr) {
+    newElAttrs.push(attr)
   }
-}
 
-function processRootViewStyleClassHack (el, options, root) {
-  // 处理组件根节点
-  if (options.isComponent && el === root && isRealNode(el)) {
-    const processor = ({ name, value, typeName }) => {
-      const sep = name === 'style' ? ';' : ' '
-      value = value ? `{{${typeName}||''}}${sep}${value}` : `{{${typeName}||''}}`
-      return [name, value]
-    }
+  function processMove (attr) {
+    getAndRemoveAttr(el, attr.name)
+    newElAttrs.push(attr)
+  }
 
-    ['style', 'class'].forEach((type) => {
-      const exp = getAndRemoveAttr(el, type).val
-      const typeName = type === 'class' ? 'className' : type
-      const [newName, newValue] = processor({
-        name: type,
-        value: 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: newName,
-          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)
+  const 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。其他跳过。
 function getVirtualHostRoot (options, meta) {
-  if (srcMode === 'wx' && options.isComponent) {
-    // 处理组件时
-    if (mode === 'wx' && options.hasVirtualHost) {
-      // wx组件注入virtualHost配置
-      !meta.options && (meta.options = {})
-      meta.options.virtualHost = true
-    }
-    if ((mode === 'ali' || mode === 'web') && !options.hasVirtualHost) {
-      // ali组件根节点实体化
-      const rootView = createASTElement('view', [
-        {
-          name: 'class',
-          value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
-        }
-      ])
-      processElement(rootView, rootView, options, meta)
-      return rootView
+  if (srcMode === 'wx') {
+    if (options.isComponent) {
+      if ((mode === 'wx') && options.hasVirtualHost) {
+        // wx组件注入virtualHost配置
+        !meta.options && (meta.options = {})
+        meta.options.virtualHost = true
+      }
+      if ((mode === 'web') && !options.hasVirtualHost) {
+        // ali组件根节点实体化
+        const rootView = createASTElement('view', [
+          {
+            name: 'class',
+            value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
+          },
+          {
+            name: 'v-on',
+            value: '$listeners'
+          }
+        ])
+        rootView.hasEvent = true
+        processElement(rootView, rootView, options, meta)
+        return rootView
+      }
+    }
+    if (options.isPage) {
+      if (mode === 'web') {
+        return createASTElement('div', [
+          {
+            name: 'class',
+            value: 'page'
+          }
+        ])
+      }
     }
   }
   return getTempNode()
@@ -1991,16 +2029,6 @@ function processMpxTagName (el) {
 }
 
 function processElement (el, root, options, meta) {
-  const transAli = mode === 'ali' && srcMode === 'wx'
-  const transWeb = mode === 'web' && srcMode === 'wx'
-  if (transAli) {
-    processRootViewStyleClassHack(el, options, root)
-    processRootViewEventHack(el, options, root)
-  }
-  if (transWeb) {
-    processRootViewEventHack(el, options, root)
-  }
-
   processAtMode(el)
   // 如果已经标记了这个元素要被清除，直接return跳过后续处理步骤
   if (el._atModeStatus === 'mismatch') {
@@ -2020,6 +2048,8 @@ function processElement (el, root, options, meta) {
 
   processInjectWxs(el, meta)
 
+  const transAli = mode === 'ali' && srcMode === 'wx'
+
   if (mode === 'web') {
     // 收集内建组件
     processBuiltInComponents(el, meta)
@@ -2071,7 +2101,11 @@ function closeElement (el, meta, options) {
   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

@@ -19,6 +19,7 @@ module.exports = function (raw) {
   const localSrcMode = queryObj.mode
   const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
   const componentsMap = mpx.componentsMap[packageName]
+  const pagesMap = mpx.pagesMap
   const wxsContentMap = mpx.wxsContentMap
   const renderOptimizeRules = mpx.renderOptimizeRules
   const usingComponents = queryObj.usingComponents || []
@@ -40,14 +41,6 @@ module.exports = function (raw) {
     )
   }
 
-  let proxyComponentEvents = null
-  for (const item of mpx.proxyComponentEventsRules) {
-    if (matchCondition(resourcePath, item)) {
-      const eventsRaw = item.events
-      proxyComponentEvents = Array.isArray(eventsRaw) ? eventsRaw : [eventsRaw]
-      break
-    }
-  }
   const { root: ast, meta } = compiler.parse(raw, {
     warn,
     error,
@@ -56,6 +49,7 @@ module.exports = function (raw) {
     hasComment,
     isNative,
     isComponent: !!componentsMap[resourcePath],
+    isPage: !!pagesMap[resourcePath],
     mode,
     env,
     srcMode: localSrcMode || globalSrcMode,
@@ -70,8 +64,7 @@ module.exports = function (raw) {
     checkUsingComponents: matchCondition(resourcePath, mpx.checkUsingComponentsRules),
     globalComponents: Object.keys(mpx.usingComponents),
     forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules),
-    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules),
-    proxyComponentEvents
+    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules)
   })
 
   if (meta.wxsContentMap) {

package/lib/web/processTemplate.js

@@ -23,7 +23,6 @@ module.exports = function (template, {
     decodeHTMLText,
     externalClasses,
     checkUsingComponents,
-    proxyComponentEventsRules,
     autoVirtualHostRules
   } = mpx
   const { resourcePath } = parseRequest(loaderContext.resource)
@@ -58,15 +57,6 @@ module.exports = function (template, {
       if (template.content) {
         const templateSrcMode = template.mode || srcMode
 
-        let proxyComponentEvents = null
-        for (const item of proxyComponentEventsRules) {
-          if (matchCondition(resourcePath, item)) {
-            const eventsRaw = item.events
-            proxyComponentEvents = Array.isArray(eventsRaw) ? eventsRaw : [eventsRaw]
-            break
-          }
-        }
-
         const { root, meta } = templateCompiler.parse(template.content, {
           warn: (msg) => {
             loaderContext.emitWarning(
@@ -82,6 +72,7 @@ module.exports = function (template, {
           hasComment,
           isNative,
           isComponent: ctorType === 'component',
+          isPage: ctorType === 'page',
           mode,
           srcMode: templateSrcMode,
           defs,
@@ -97,7 +88,6 @@ module.exports = function (template, {
           globalComponents: [],
           // web模式下实现抽象组件
           componentGenerics,
-          proxyComponentEvents,
           hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
         })
         if (meta.wxsModuleMap) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.57",
+  "version": "2.8.59",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -82,5 +82,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "f533e8035850c01d5e98fc748ee4d57f60ba9dba"
+  "gitHead": "4e014ea355bb2d659c6fd6a3040b6b88245da9e5"
 }