@mpxjs/webpack-plugin 2.9.14 → 2.9.15

package/lib/index.js

@@ -169,7 +169,7 @@ class MpxWebpackPlugin {
     options.webConfig = options.webConfig || {}
     options.partialCompile = options.mode !== 'web' && options.partialCompile
     options.asyncSubpackageRules = options.asyncSubpackageRules || []
-    options.optimizeRenderRules = options.optimizeRenderRules || {}
+    options.optimizeRenderRules = options.optimizeRenderRules ? (Array.isArray(options.optimizeRenderRules) ? options.optimizeRenderRules : [options.optimizeRenderRules]) : []
     options.retryRequireAsync = options.retryRequireAsync || false
     options.enableAliRequireAsync = options.enableAliRequireAsync || false
     options.optimizeSize = options.optimizeSize || false

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

@@ -102,7 +102,7 @@
         let asyncCallback = null
         switch (data.type) {
           case 'postMessage':
-            this.messageList.push(value)
+            this.messageList.push(value.data || value)
             asyncCallback = Promise.resolve({
               errMsg: 'invokeWebappApi:ok'
             })

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

@@ -32,7 +32,7 @@ function checkBindThis (path) {
 }
 
 // 计算访问路径
-function calPropName (path) {
+function getCollectPath (path) {
   let current = path.parentPath
   let last = path
   let keyPath = '' + path.node.name
@@ -75,7 +75,7 @@ function checkDelAndGetPath (path) {
   let replace = false
 
   // 确定删除路径
-  while (!t.isBlockStatement(current)) {
+  while (!t.isBlockStatement(current) && !t.isProgram(current)) {
     // case: !!a
     if (t.isUnaryExpression(current.parent) && current.key === 'argument') {
       delPath = current.parentPath
@@ -113,7 +113,7 @@ function checkDelAndGetPath (path) {
   }
 
   // 确定是否可删除
-  while (!t.isBlockStatement(current) && canDel) {
+  while (!t.isBlockStatement(current) && !t.isProgram(current)) {
     const { key, listKey, parent } = current
 
     if (t.isIfStatement(parent) && key === 'test') {
@@ -121,12 +121,12 @@ function checkDelAndGetPath (path) {
       break
     }
 
-    if (listKey === 'arguments' && t.isCallExpression(parent)) {
+    if (t.isCallExpression(parent) && listKey === 'arguments') {
       canDel = false
       break
     }
 
-    if (parent.computed && t.isMemberExpression(parent)) {
+    if (t.isMemberExpression(parent) && parent.computed) {
       if (key === 'property') {
         replace = true
       } else {
@@ -155,7 +155,7 @@ function checkDelAndGetPath (path) {
       replace = true // 不能break，case: if (a + b) {}
     }
 
-    if (key === 'value' && t.isObjectProperty(parent)) { // ({ name: a })
+    if (t.isObjectProperty(parent) && key === 'value') { // ({ name: a })
       replace = true
     }
 
@@ -172,15 +172,16 @@ function checkDelAndGetPath (path) {
 
 // 判断前缀是否存在(只判断前缀，全等的情况，会返回false)
 function checkPrefix (keys, key) {
-  for (let i = 0; i < keys.length; i++) {
-    const str = keys[i]
-    if (key === str) continue
-    // 确保判断当前标识是完整的单词
-    if (key.startsWith(str) && (key[str.length] === '.' || key[str.length] === '[')) return true
+  for (const item of keys) {
+    if (checkBIsPrefixOfA(key, item)) return true
   }
   return false
 }
 
+function checkBIsPrefixOfA (a, b) {
+  return a.startsWith(b) && (a[b.length] === '.' || a[b.length] === '[')
+}
+
 function dealRemove (path, replace) {
   try {
     if (replace) {
@@ -195,10 +196,75 @@ function dealRemove (path, replace) {
     }
     delete path.needBind
     delete path.collectInfo
-  } catch (e) {}
+  } catch (e) {
+  }
+}
+
+function isSimpleKey (key) {
+  return !/[[.]/.test(key)
 }
 
 module.exports = {
+  transformSimple (code, {
+    ignoreMap = {}
+  }) {
+    const ast = babylon.parse(code, {
+      plugins: [
+        'objectRestSpread'
+      ]
+    })
+    const collectKeySet = new Set()
+    const propKeySet = new Set()
+    let isProps = false
+    const visitor = {
+      // 标记收集props数据
+      CallExpression: {
+        enter (path) {
+          const callee = path.node.callee
+          if (
+            t.isMemberExpression(callee) &&
+            t.isThisExpression(callee.object) &&
+            (callee.property.name === '_p' || callee.property.value === '_p')
+          ) {
+            isProps = true
+            path.isProps = true
+          }
+        },
+        exit (path) {
+          if (path.isProps) {
+            isProps = false
+            delete path.isProps
+          }
+        }
+      },
+      Identifier (path) {
+        if (
+          checkBindThis(path) &&
+          !ignoreMap[path.node.name] &&
+          !path.scope.hasBinding(path.node.name)
+        ) {
+          if (isProps) {
+            propKeySet.add(path.node.name)
+          }
+          const { keyPath } = getCollectPath(path)
+          collectKeySet.add(keyPath)
+        }
+      }
+    }
+    traverse(ast, visitor)
+    const collectKeys = [...collectKeySet]
+    const pCollectKeys = collectKeys.filter((keyA) => {
+      return collectKeys.every((keyB) => {
+        return !checkBIsPrefixOfA(keyA, keyB)
+      })
+    })
+    return {
+      code: pCollectKeys.map((key) => {
+        return isSimpleKey(key) ? `_sc(${JSON.stringify(key)});` : `_c(${JSON.stringify(key)});`
+      }).join('\n'),
+      propKeys: [...propKeySet]
+    }
+  },
   transform (code, {
     needCollect = false,
     renderReduce = false,
@@ -213,22 +279,25 @@ module.exports = {
     let currentBlock = null
     const bindingsMap = new Map()
 
-    const propKeys = []
+    const propKeySet = new Set()
     let isProps = false
 
-    const collectVisitor = {
-      BlockStatement: {
-        enter (path) { // 收集作用域下所有变量(keyPath)
-          bindingsMap.set(path, {
-            parent: currentBlock,
-            bindings: {}
-          })
-          currentBlock = path
-        },
-        exit (path) {
-          currentBlock = bindingsMap.get(path).parent
-        }
+    const blockCollectVisitor = {
+      enter (path) { // 收集作用域下所有变量(keyPath)
+        bindingsMap.set(path, {
+          parent: currentBlock,
+          bindings: {}
+        })
+        currentBlock = path
       },
+      exit (path) {
+        currentBlock = bindingsMap.get(path).parent
+      }
+    }
+
+    const collectVisitor = {
+      Program: blockCollectVisitor,
+      BlockStatement: blockCollectVisitor,
       Identifier (path) {
         if (
           checkBindThis(path) &&
@@ -248,12 +317,12 @@ module.exports = {
             }
             return
           }
-          const { last, keyPath } = calPropName(path)
           path.needBind = true
+          const { last, keyPath } = getCollectPath(path)
           if (needCollect) {
             last.collectInfo = {
               key: t.stringLiteral(keyPath),
-              isSimple: !/[[.]/.test(keyPath)
+              isSimple: isSimpleKey(keyPath)
             }
           }
 
@@ -281,18 +350,21 @@ module.exports = {
       }
     }
 
-    const bindThisVisitor = {
-      BlockStatement: {
-        enter (path) {
-          const scope = bindingsMap.get(path)
-          const parentScope = bindingsMap.get(scope.parent)
-          scope.pBindings = parentScope ? Object.assign({}, parentScope.bindings, parentScope.pBindings) : {}
-          currentBlock = path
-        },
-        exit (path) {
-          currentBlock = bindingsMap.get(path).parent
-        }
+    const blockBindVisitor = {
+      enter (path) {
+        const scope = bindingsMap.get(path)
+        const parentScope = bindingsMap.get(scope.parent)
+        scope.pBindings = parentScope ? Object.assign({}, parentScope.bindings, parentScope.pBindings) : {}
+        currentBlock = path
       },
+      exit (path) {
+        currentBlock = bindingsMap.get(path).parent
+      }
+    }
+
+    const bindVisitor = {
+      Program: blockBindVisitor,
+      BlockStatement: blockBindVisitor,
       // 标记收集props数据
       CallExpression: {
         enter (path) {
@@ -350,7 +422,7 @@ module.exports = {
           const name = path.node.name
           if (name) { // 确保path没有被删除 且 没有被替换成字符串
             if (isProps) {
-              propKeys.push(name)
+              propKeySet.add(name)
             }
             path.replaceWith(t.memberExpression(t.thisExpression(), path.node))
           }
@@ -373,11 +445,11 @@ module.exports = {
     }
 
     traverse(ast, collectVisitor)
-    traverse(ast, bindThisVisitor)
+    traverse(ast, bindVisitor)
 
     return {
       code: generate(ast).code,
-      propKeys
+      propKeys: [...propKeySet]
     }
   }
 }

package/lib/template-compiler/compiler.js

@@ -1933,12 +1933,17 @@ function postProcessTemplate (el) {
 
 const isValidMode = makeMap('wx,ali,swan,tt,qq,web,qa,jd,dd,tenon,noMode')
 
+function isValidModeP (i) {
+  return isValidMode(i[0] === '_' ? i.slice(1) : i)
+}
+
 const wrapRE = /^\((.*)\)$/
 
 function processAtMode (el) {
-  if (el.parent && el.parent._atModeStatus) {
-    el._atModeStatus = el.parent._atModeStatus
-  }
+  // 父节点的atMode匹配状态不应该影响子节点，atMode的影响范围应该限制在当前节点本身
+  // if (el.parent && el.parent._atModeStatus) {
+  //   el._atModeStatus = el.parent._atModeStatus
+  // }
 
   const attrsListClone = cloneAttrsList(el.attrsList)
   attrsListClone.forEach(item => {
@@ -1972,24 +1977,31 @@ function processAtMode (el) {
 
     const modeArr = [...conditionMap.keys()]
 
-    if (modeArr.every(i => isValidMode(i))) {
+    if (modeArr.every(i => isValidModeP(i))) {
       const attrValue = getAndRemoveAttr(el, attrName).val
       const replacedAttrName = attrArr.join('@')
       const processedAttr = { name: replacedAttrName, value: attrValue }
 
-      for (const [defineMode, defineEnvArr] of conditionMap.entries()) {
+      for (let [defineMode, defineEnvArr] of conditionMap.entries()) {
+        const isImplicitMode = defineMode[0] === '_'
+        if (isImplicitMode) defineMode = defineMode.slice(1)
         if (defineMode === 'noMode' || defineMode === mode) {
           // 命中 env 规则(没有定义env 或者定义的envArr包含当前env)
           if (!defineEnvArr.length || defineEnvArr.includes(env)) {
-            el._atModeStatus = ''
             if (!replacedAttrName) {
-              // 若defineMode 为 noMode，则不论是element，还是attr，都需要经过规则转换
-              if (defineMode !== 'noMode') {
+              if (defineMode === 'noMode' || isImplicitMode) {
+                // 若defineMode 为 noMode 或 implicitMode，则 element 都需要进行规则转换
+              } else {
                 el._atModeStatus = 'match'
               }
             } else {
-              // 如果命中了指定的mode，则先存在el上，等跑完转换后再挂回去
-              el.noTransAttrs ? el.noTransAttrs.push(processedAttr) : el.noTransAttrs = [processedAttr]
+              if (defineMode === 'noMode' || isImplicitMode) {
+                // 若defineMode 为 noMode 或 implicitMode，则直接将 attr 挂载回 el，进行规则转换
+                addAttrs(el, [processedAttr])
+              } else {
+                // 如果命中了指定的mode，且当前 mode 不为 noMode 或 implicitMode，则把不需要转换的 attrs 暂存在 noTransAttrs 上，等规则转换后再挂载回去
+                el.noTransAttrs ? el.noTransAttrs.push(processedAttr) : el.noTransAttrs = [processedAttr]
+              }
             }
             // 命中mode，命中env，完成匹配，直接退出
             break

package/lib/template-compiler/index.js

@@ -1,5 +1,5 @@
 const compiler = require('./compiler')
-const bindThis = require('./bind-this').transform
+const bindThis = require('./bind-this')
 const parseRequest = require('../utils/parse-request')
 const { matchCondition } = require('../utils/match-condition')
 const loaderUtils = require('loader-utils')
@@ -29,6 +29,13 @@ module.exports = function (raw) {
   const hasScoped = queryObj.hasScoped
   const moduleId = queryObj.moduleId || 'm' + mpx.pathHash(resourcePath)
 
+  let optimizeRenderLevel = 0
+  for (const rule of optimizeRenderRules) {
+    if (matchCondition(resourcePath, rule)) {
+      optimizeRenderLevel = rule.level || 1
+      break
+    }
+  }
   const warn = (msg) => {
     this.emitWarning(
       new Error('[template compiler][' + this.resource + ']: ' + msg)
@@ -93,22 +100,27 @@ global.currentInject = {
 
   const rawCode = compiler.genNode(ast)
   if (rawCode) {
-    const renderCode = `
+    try {
+      const ignoreMap = Object.assign({
+        _i: true,
+        _c: true,
+        _sc: true,
+        _r: true
+      }, meta.wxsModuleMap)
+      const bindResult = optimizeRenderLevel === 2
+        ? bindThis.transformSimple(rawCode, {
+          ignoreMap
+        })
+        : bindThis.transform(rawCode, {
+          needCollect: true,
+          renderReduce: optimizeRenderLevel === 1,
+          ignoreMap
+        })
+      resultSource += `
 global.currentInject.render = function (_i, _c, _r, _sc) {
-${rawCode}
-_r();
+${bindResult.code}
+_r(${optimizeRenderLevel === 2 ? 'true' : ''});
 };\n`
-    try {
-      const bindResult = bindThis(renderCode, {
-        needCollect: true,
-        renderReduce: matchCondition(resourcePath, optimizeRenderRules),
-        ignoreMap: Object.assign({
-          _i: true,
-          _c: true,
-          _r: true
-        }, meta.wxsModuleMap)
-      })
-      resultSource += bindResult.code
       if ((mode === 'tt' || mode === 'swan') && bindResult.propKeys) {
         resultSource += `global.currentInject.propKeys = ${JSON.stringify(bindResult.propKeys)};\n`
       }
@@ -118,7 +130,7 @@ Invalid render function generated by the template, please check!\n
 Template result:
 ${result}\n
 Error code:
-${renderCode}
+${rawCode}
 Error Detail:
 ${e.stack}`)
       return result
@@ -126,7 +138,7 @@ ${e.stack}`)
   }
 
   if (meta.computed) {
-    resultSource += bindThis(`
+    resultSource += bindThis.transform(`
 global.currentInject.injectComputed = {
   ${meta.computed.join(',')}
 };`).code + '\n'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.14",
+  "version": "2.9.15",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -83,5 +83,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "e8ab845a544d2db0619a6a7d6c04d9d384d1a6ca"
+  "gitHead": "f3dcf3425dc3e0ad2378b2f35ca020aa9cdd1fb2"
 }