@mpxjs/webpack-plugin 2.9.13 → 2.9.15

package/lib/index.js

@@ -9,7 +9,6 @@ const NullFactory = require('webpack/lib/NullFactory')
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
 const CommonJsAsyncDependency = require('./dependencies/CommonJsAsyncDependency')
 const CommonJsExtractDependency = require('./dependencies/CommonJsExtractDependency')
-const harmonySpecifierTag = require('webpack/lib/dependencies/HarmonyImportDependencyParserPlugin').harmonySpecifierTag
 const NormalModule = require('webpack/lib/NormalModule')
 const EntryPlugin = require('webpack/lib/EntryPlugin')
 const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
@@ -170,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
@@ -1331,58 +1330,6 @@ class MpxWebpackPlugin {
               })
             }
           }
-
-          // 为跨平台api调用注入srcMode参数指导api运行时转换
-          const apiBlackListMap = [
-            'createApp',
-            'createPage',
-            'createComponent',
-            'createStore',
-            'createStoreWithThis',
-            'mixin',
-            'injectMixins',
-            'toPureObject',
-            'observable',
-            'watch',
-            'use',
-            'set',
-            'remove',
-            'delete',
-            'setConvertRule',
-            'getMixin',
-            'getComputed',
-            'implement'
-          ].reduce((map, api) => {
-            map[api] = true
-            return map
-          }, {})
-
-          const injectSrcModeForTransApi = (expr, members) => {
-            // members为空数组时，callee并不是memberExpression
-            if (!members.length) return
-            const callee = expr.callee
-            const args = expr.arguments
-            const name = callee.object.name
-            const { queryObj, resourcePath } = parseRequest(parser.state.module.resource)
-            const localSrcMode = queryObj.mode
-            const globalSrcMode = mpx.srcMode
-            const srcMode = localSrcMode || globalSrcMode
-
-            if (srcMode === globalSrcMode || apiBlackListMap[callee.property.name || callee.property.value] || (name !== 'mpx' && name !== 'wx') || (name === 'wx' && !matchCondition(resourcePath, this.options.transMpxRules))) return
-
-            const srcModeString = `__mpx_src_mode_${srcMode}__`
-            const dep = new InjectDependency({
-              content: args.length
-                ? `, ${JSON.stringify(srcModeString)}`
-                : JSON.stringify(srcModeString),
-              index: expr.end - 1
-            })
-            parser.state.current.addPresentationalDependency(dep)
-          }
-
-          parser.hooks.callMemberChain.for(harmonySpecifierTag).tap('MpxWebpackPlugin', injectSrcModeForTransApi)
-          parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
-          parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
         }
       }
       normalModuleFactory.hooks.parser.for('javascript/auto').tap('MpxWebpackPlugin', normalModuleFactoryParserCallback)

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

@@ -4,8 +4,8 @@
 
 <script>
   import { getCustomEvent } from './getInnerListeners'
-  import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy/src/web/api/index'
-
+  import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
+  const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab })
   const eventLoad = 'load'
   const eventError = 'error'
   const eventMessage = 'message'
@@ -95,32 +95,32 @@
       messageCallback (event) {
         const hostValidate = this.hostValidate(event.origin)
         const data = event.data
-        const value = data.payload
+        let value = data.payload
         if (!hostValidate) {
           return
         }
         let asyncCallback = null
         switch (data.type) {
           case 'postMessage':
-            this.messageList.push(value)
+            this.messageList.push(value.data || value)
             asyncCallback = Promise.resolve({
               errMsg: 'invokeWebappApi:ok'
             })
             break
           case 'navigateTo':
-            asyncCallback = navigateTo(value)
+            asyncCallback = navObj.navigateTo(value)
             break
           case 'navigateBack':
-            asyncCallback = value ? navigateBack(value) : navigateBack()
+            asyncCallback = navObj.navigateBack(value)
             break
           case 'redirectTo':
-            asyncCallback = redirectTo(value)
+            asyncCallback = navObj.redirectTo(value)
             break
           case 'switchTab':
-            asyncCallback = switchTab(value)
+            asyncCallback = navObj.switchTab(value)
             break
           case 'reLaunch':
-            asyncCallback = reLaunch(value)
+            asyncCallback = navObj.reLaunch(value)
             break
           case 'getLocation':
             const getLocation = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations.getLocation

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,28 +75,28 @@ 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
     } else if (t.isCallExpression(current.parent)) {
-      // case: String(a) || this._p(a)
       const args = current.node.arguments || current.parent.arguments || []
-      if (args.length === 1) {
+      if (args.length === 1) { // case: String(a) || this._p(a)
         delPath = current.parentPath
       } else {
-        // case: _i(a, function() {})
-        canDel = false
         break
       }
     } else if (t.isMemberExpression(current.parent)) { // case: String(a,'123').b.c
-      if (current.parent.computed && !t.isLiteral(current.parent.property)) { // case: a[b] or a.b[c.d]
-        canDel = false
-        break
+      if (current.parent.computed) { // case: a['b'] or a.b['c.d']
+        if (t.isLiteral(current.parent.property)) {
+          delPath = current.parentPath
+        } else { // case: a[b]
+          break
+        }
       } else {
         delPath = current.parentPath
       }
-    } else if (t.isLogicalExpression(current.container)) { // 只处理case: a || '' or '123' || a
+    } else if (t.isLogicalExpression(current.parent)) { // 只处理case: a || '' or '123' || a
       const key = current.key === 'left' ? 'right' : 'left'
       if (t.isLiteral(current.parent[key])) {
         delPath = current.parentPath
@@ -113,36 +113,50 @@ function checkDelAndGetPath (path) {
   }
 
   // 确定是否可删除
-  while (!t.isBlockStatement(current) && canDel) {
-    const { key, container } = current
-    if (t.isIfStatement(container) && key === 'test') { // if (a) {}
+  while (!t.isBlockStatement(current) && !t.isProgram(current)) {
+    const { key, listKey, parent } = current
+
+    if (t.isIfStatement(parent) && key === 'test') {
       canDel = false
       break
     }
 
-    if (t.isLogicalExpression(container)) { // case: a || ((b || c) && d)
+    if (t.isCallExpression(parent) && listKey === 'arguments') {
+      canDel = false
+      break
+    }
+
+    if (t.isMemberExpression(parent) && parent.computed) {
+      if (key === 'property') {
+        replace = true
+      } else {
+        canDel = false
+        break
+      }
+    }
+
+    if (t.isLogicalExpression(parent)) { // case: a || ((b || c) && d)
       canDel = false
       ignore = true
       break
     }
 
-    if (t.isConditionalExpression(container)) {
+    if (t.isConditionalExpression(parent)) {
       if (key === 'test') {
         canDel = false
         break
       } else {
         ignore = true
-        replace = true
+        replace = true // 继续往上找，判断是否存在if条件等
       }
     }
 
-    if (
-      t.isBinaryExpression(container) || // 运算 a + b
-      (key === 'value' && t.isObjectProperty(container) && canDel) // ({ name: a })
-    ) {
-      canDel = true
+    if (t.isBinaryExpression(parent)) { // 运算 a + b
+      replace = true // 不能break，case: if (a + b) {}
+    }
+
+    if (t.isObjectProperty(parent) && key === 'value') { // ({ name: a })
       replace = true
-      // 不能break，case: if (a + b) {}
     }
 
     current = current.parentPath
@@ -158,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) {
@@ -181,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,
@@ -199,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) &&
@@ -234,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)
             }
           }
 
@@ -267,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) {
@@ -336,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))
           }
@@ -359,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.13",
+  "version": "2.9.15",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -83,5 +83,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "2c67b32fe01ff15fc1b728f91b4b5652244c2f35"
+  "gitHead": "f3dcf3425dc3e0ad2378b2f35ca020aa9cdd1fb2"
 }