@mpxjs/webpack-plugin 2.8.39 → 2.8.40-test

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

@@ -19,9 +19,166 @@ dangerousKeys.split(',').forEach((key) => {
   dangerousKeyMap[key] = true
 })
 
+// 判断 Identifier 是否需要处理
+function checkBindThis (path) {
+  return !(t.isDeclaration(path.parent) && path.parentKey === 'id') &&
+    !(t.isFunction(path.parent) && path.listKey === 'params') &&
+    !(t.isMethod(path.parent) && path.parentKey === 'key' && !path.parent.computed) &&
+    !(t.isProperty(path.parent) && path.parentKey === 'key' && !path.parent.computed) &&
+    !(t.isMemberExpression(path.parent) && path.parentKey === 'property' && !path.parent.computed) &&
+    !t.isArrayPattern(path.parent) &&
+    !t.isObjectPattern(path.parent) &&
+    !hash[path.node.name]
+}
+
+// 计算访问路径
+function calPropName (path) {
+  let current = path.parentPath
+  let last = path
+  let keyPath = '' + path.node.name
+
+  while (current.isMemberExpression() && last.parentKey !== 'property') {
+    if (current.node.computed) {
+      if (t.isLiteral(current.node.property)) {
+        if (t.isStringLiteral(current.node.property)) {
+          if (dangerousKeyMap[current.node.property.value]) {
+            break
+          }
+          keyPath += `.${current.node.property.value}`
+        } else {
+          keyPath += `[${current.node.property.value}]`
+        }
+      } else {
+        break
+      }
+    } else {
+      if (dangerousKeyMap[current.node.property.name]) {
+        break
+      }
+      keyPath += `.${current.node.property.name}`
+    }
+    last = current
+    current = current.parentPath
+  }
+
+  return {
+    last,
+    keyPath
+  }
+}
+
+function checkDelAndGetPath (path) {
+  let current = path
+  let delPath = path
+  let canDel = true
+  let ignore = false
+  let replace = false
+
+  // 确定删除路径
+  while (!t.isBlockStatement(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) {
+        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
+      } 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
+    }
+
+    current = current.parentPath
+  }
+
+  // 确定是否可删除
+  while (!t.isBlockStatement(current) && canDel) {
+    const { key, container } = current
+    if (
+      t.isLogicalExpression(container) || // a && b
+      (t.isIfStatement(container) && key === 'test') // if (a) {}
+    ) {
+      canDel = false
+      break
+    }
+
+    if (t.isConditionalExpression(container)) {
+      if (key === 'test') canDel = false
+      else ignore = true
+      break
+    }
+
+    if (
+      t.isBinaryExpression(container) || // 运算 a + b
+      (key === 'value' && t.isObjectProperty(container) && canDel) // ({ name: a })
+    ) {
+      canDel = true
+      replace = true
+      // 不能break，case: if (a + b) {}
+    }
+
+    current = current.parentPath
+  }
+
+  return {
+    delPath,
+    canDel,
+    ignore,
+    replace
+  }
+}
+
+// 判断前缀是否存在(只判断前缀，全等的情况，会返回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
+  }
+  return false
+}
+
+function dealRemove (path, replace) {
+  try {
+    if (replace) {
+      path.replaceWith(t.stringLiteral(''))
+    } else {
+      t.validate(path, path.key, null)
+      path.remove()
+    }
+    delete path.needBind
+    delete path.collectInfo
+  } catch (e) {
+  }
+}
+
 module.exports = {
   transform (code, {
     needCollect = false,
+    renderReduce = false,
     ignoreMap = {}
   } = {}) {
     const ast = babylon.parse(code, {
@@ -30,10 +187,88 @@ module.exports = {
       ]
     })
 
+    let currentBlock = null
+    const bindingsMap = new Map()
+
     const propKeys = []
     let isProps = false
 
+    const collectVisitor = {
+      BlockStatement: {
+        enter (path) { // 收集作用域下所有变量(keyPath)
+          bindingsMap.set(path, {
+            parent: currentBlock,
+            bindings: {}
+          })
+          currentBlock = path
+        },
+        exit (path) {
+          currentBlock = bindingsMap.get(path).parent
+        }
+      },
+      Identifier (path) {
+        if (
+          checkBindThis(path) &&
+          !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) {
+            last.collectInfo = {
+              key: t.stringLiteral(keyPath),
+              isSimple: !/[[.]/.test(keyPath)
+            }
+          }
+
+          if (!renderReduce) return
+
+          const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path)
+          if (ignore) return
+
+          delPath.delInfo = {
+            keyPath,
+            canDel,
+            replace
+          }
+
+          const { bindings } = bindingsMap.get(currentBlock)
+          const target = bindings[keyPath] || []
+          target.push({
+            path: delPath,
+            canDel
+          })
+          bindings[keyPath] = target
+        }
+      }
+    }
+
     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
+        }
+      },
       // 标记收集props数据
       CallExpression: {
         enter (path) {
@@ -50,76 +285,72 @@ module.exports = {
         exit (path) {
           if (path.isProps) {
             // 移除无意义的__props调用
-            path.replaceWith(path.node.arguments[0])
+            const args = path.node.arguments[0]
+            path.replaceWith(args)
             isProps = false
             delete path.isProps
           }
         }
       },
-      Identifier (path) {
-        if (
-          !(t.isDeclaration(path.parent) && path.parentKey === 'id') &&
-          !(t.isFunction(path.parent) && path.listKey === 'params') &&
-          !(t.isMethod(path.parent) && path.parentKey === 'key' && !path.parent.computed) &&
-          !(t.isProperty(path.parent) && path.parentKey === 'key' && !path.parent.computed) &&
-          !(t.isMemberExpression(path.parent) && path.parentKey === 'property' && !path.parent.computed) &&
-          !t.isArrayPattern(path.parent) &&
-          !t.isObjectPattern(path.parent) &&
-          !hash[path.node.name]
-        ) {
-          let current
-          let last
-          if (!path.scope.hasBinding(path.node.name) && !ignoreMap[path.node.name]) {
-            // bind this
-            path.replaceWith(t.memberExpression(t.thisExpression(), path.node))
+      // enter 先于特定标识执行
+      enter (path) {
+        // 删除重复变量
+        if (path.delInfo) {
+          const { keyPath, canDel, isLocal, replace } = path.delInfo
+          delete path.delInfo
 
-            if (isProps) {
-              propKeys.push(path.node.property.name)
+          if (canDel) {
+            if (isLocal) { // 局部作用域里的变量，可直接删除
+              dealRemove(path, replace)
+              return
             }
+            const data = bindingsMap.get(currentBlock)
+            const { bindings, pBindings } = data
+            const allBindings = Object.assign({}, pBindings, bindings)
 
-            if (needCollect) {
-              // 找到访问路径
-              current = path.parentPath
-              last = path
-              let keyPath = '' + path.node.property.name
-              while (current.isMemberExpression() && last.parentKey !== 'property') {
-                if (current.node.computed) {
-                  if (t.isLiteral(current.node.property)) {
-                    if (t.isStringLiteral(current.node.property)) {
-                      if (dangerousKeyMap[current.node.property.value]) {
-                        break
-                      }
-                      keyPath += `.${current.node.property.value}`
-                    } else {
-                      keyPath += `[${current.node.property.value}]`
-                    }
-                  } else {
-                    break
-                  }
-                } else {
-                  if (dangerousKeyMap[current.node.property.name]) {
-                    break
-                  }
-                  keyPath += `.${current.node.property.name}`
+            // 优先判断前缀，再判断全等
+            if (checkPrefix(Object.keys(allBindings), keyPath) || pBindings[keyPath]) {
+              dealRemove(path, replace)
+            } else {
+              const currentBlockVars = bindings[keyPath]
+              if (currentBlockVars.length > 1) {
+                const index = currentBlockVars.findIndex(item => !item.canDel)
+                if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量，即可删除该变量
+                  dealRemove(path, replace)
                 }
-                last = current
-                current = current.parentPath
               }
-              last.collectPath = t.stringLiteral(keyPath)
             }
           }
         }
+
+        // bind this 将 a 转换成 this.a
+        if (path.needBind) {
+          const name = path.node.name
+          if (name) { // 确保path没有被删除 且 没有被替换成字符串
+            if (isProps) {
+              propKeys.push(name)
+            }
+            path.replaceWith(t.memberExpression(t.thisExpression(), path.node))
+          }
+          delete path.needBind
+        }
       },
       MemberExpression: {
         exit (path) {
-          if (path.collectPath) {
-            path.replaceWith(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('_c')), [path.collectPath, path.node]))
-            delete path.collectPath
+          if (path.collectInfo) {
+            const { isSimple, key } = path.collectInfo
+            const callee = isSimple ? t.identifier('_sc') : t.identifier('_c')
+            const replaceNode = renderReduce
+              ? t.callExpression(callee, [key])
+              : t.callExpression(callee, [key, path.node])
+            path.node && path.replaceWith(replaceNode)
+            delete path.collectInfo
           }
         }
       }
     }
 
+    traverse(ast, collectVisitor)
     traverse(ast, bindThisVisitor)
 
     return {

package/lib/template-compiler/compiler.js

@@ -10,40 +10,13 @@ const getRulesRunner = require('../platform/index')
 const addQuery = require('../utils/add-query')
 const transDynamicClassExpr = require('./trans-dynamic-class-expr')
 const dash2hump = require('../utils/hump-dash').dash2hump
-
-/**
- * Make a map and return a function for checking if a key
- * is in that map.
- */
-function makeMap (str, expectsLowerCase) {
-  const map = Object.create(null)
-  const list = str.split(',')
-  for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true
-  }
-  return expectsLowerCase
-    ? function (val) {
-      return map[val.toLowerCase()]
-    }
-    : function (val) {
-      return map[val]
-    }
-}
+const makeMap = require('../utils/make-map')
+const { isNonPhrasingTag } = require('../utils/dom-tag-config')
 
 const no = function () {
   return false
 }
 
-// HTML5 tags https://html.spec.whatwg.org/multipage/indices.html#elements-3
-// Phrasing Content https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
-const isNonPhrasingTag = makeMap(
-  'address,article,aside,base,blockquote,body,caption,col,colgroup,dd,' +
-  'details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,' +
-  'h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,' +
-  'optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,' +
-  'title,tr,track'
-)
-
 /*!
  * HTML Parser By John Resig (ejohn.org)
  * Modified by Juriy "kangax" Zaytsev
@@ -653,6 +626,9 @@ function parse (template, options) {
     srcMode,
     type: 'template',
     testKey: 'tag',
+    data: {
+      usingComponents: options.usingComponents
+    },
     warn: _warn,
     error: _error
   })
@@ -878,6 +854,7 @@ function moveBaseDirective (target, from, isDelete = true) {
 }
 
 function stringify (str) {
+  if (mode === 'web') str = str.replace(/'/g, '"')
   return JSON.stringify(str)
 }
 
@@ -988,7 +965,7 @@ function parseFuncStr2 (str) {
       if (subIndex) {
         const index1 = ret.index + subIndex
         const index2 = index1 + 6
-        args = args.substring(0, index1) + JSON.stringify(eventIdentifier) + args.substring(index2)
+        args = args.substring(0, index1) + stringify(eventIdentifier) + args.substring(index2)
       }
     }
     return {
@@ -1016,7 +993,7 @@ function stringifyWithResolveComputed (modelValue) {
       computedStack.push(char)
       if (computedStack.length === 1) {
         fragment += '.'
-        result.push(JSON.stringify(fragment))
+        result.push(stringify(fragment))
         fragment = ''
         continue
       }
@@ -1033,7 +1010,7 @@ function stringifyWithResolveComputed (modelValue) {
     fragment += char
   }
   if (fragment !== '') {
-    result.push(JSON.stringify(fragment))
+    result.push(stringify(fragment))
   }
   return result.join('+')
 }
@@ -1114,6 +1091,7 @@ function processBindEvent (el, options) {
   for (const type in eventConfigMap) {
     let needBind = false
     let { configs, rawName, proxy } = eventConfigMap[type]
+    delete eventConfigMap[type]
     if (proxy) {
       needBind = true
     } else if (configs.length > 1) {
@@ -1121,11 +1099,14 @@ function processBindEvent (el, options) {
     } else if (configs.length === 1) {
       needBind = !!configs[0].hasArgs
     }
+
+    const escapedType = dash2hump(type)
     // 排除特殊情况
-    if (needBind && !isValidIdentifierStr(type)) {
+    if (!isValidIdentifierStr(escapedType)) {
       warn$1(`EventName ${type} which need be framework proxy processed must be a valid identifier!`)
       needBind = false
     }
+
     if (needBind) {
       if (rawName) {
         // 清空原始事件绑定
@@ -1143,11 +1124,9 @@ function processBindEvent (el, options) {
           value: '__invoke'
         }
       ])
-      eventConfigMap[type] = configs.map((item) => {
+      eventConfigMap[escapedType] = configs.map((item) => {
         return item.expStr
       })
-    } else {
-      delete eventConfigMap[type]
     }
   }
 
@@ -1696,7 +1675,7 @@ function processWebExternalClassesHack (el, options) {
     options.externalClasses.forEach((className) => {
       const index = classNames.indexOf(className)
       if (index > -1) {
-        replacements.push(`$attrs[${JSON.stringify(className)}]`)
+        replacements.push(`$attrs[${stringify(className)}]`)
         classNames.splice(index, 1)
       }
     })
@@ -1730,13 +1709,13 @@ function processWebExternalClassesHack (el, options) {
         options.externalClasses.forEach((className) => {
           const index = classNames.indexOf(className)
           if (index > -1) {
-            replacements.push(`$attrs[${JSON.stringify(className)}]`)
+            replacements.push(`$attrs[${stringify(className)}]`)
             classNames.splice(index, 1)
           }
         })
 
         if (classNames.length) {
-          replacements.unshift(JSON.stringify(classNames.join(' ')))
+          replacements.unshift(stringify(classNames.join(' ')))
         }
 
         addAttrs(el, [{
@@ -1783,6 +1762,7 @@ function processAliAddComponentRootView (el, options) {
     { 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' }
   ]
@@ -1839,24 +1819,40 @@ function processAliAddComponentRootView (el, options) {
 
 // 有virtualHost情况wx组件注入virtualHost。无virtualHost阿里组件注入root-view。其他跳过。
 function getVirtualHostRoot (options, meta) {
-  if (options.isComponent) {
-    // 处理组件时
-    if (mode === 'wx' && options.hasVirtualHost) {
-      // wx组件注入virtualHost配置
-      !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 (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()
 }
@@ -2327,7 +2323,7 @@ function genFor (node) {
   node.forProcessed = true
   const index = node.for.index || 'index'
   const item = node.for.item || 'item'
-  return `this._i(${node.for.exp}, function(${item},${index}){\n${genNode(node)}});\n`
+  return `_i(${node.for.exp}, function(${item},${index}){\n${genNode(node)}});\n`
 }
 
 function genNode (node) {

package/lib/template-compiler/index.js

@@ -19,7 +19,9 @@ 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 optimizeRenderRules = mpx.optimizeRenderRules
   const usingComponents = queryObj.usingComponents || []
   const componentPlaceholder = queryObj.componentPlaceholder || []
   const hasComment = queryObj.hasComment
@@ -47,6 +49,7 @@ module.exports = function (raw) {
     hasComment,
     isNative,
     isComponent: !!componentsMap[resourcePath],
+    isPage: !!pagesMap[resourcePath],
     mode,
     env,
     srcMode: localSrcMode || globalSrcMode,
@@ -83,38 +86,43 @@ module.exports = function (raw) {
     return result
   }
 
-  const rawCode = `
+  resultSource += `
 global.currentInject = {
-  moduleId: ${JSON.stringify(moduleId)},
-  render: function () {
-    ${compiler.genNode(ast)}
-    this._r();
-  }
+  moduleId: ${JSON.stringify(moduleId)}
 };\n`
 
-  let bindResult
-
-  try {
-    bindResult = bindThis(rawCode, {
-      needCollect: true,
-      ignoreMap: meta.wxsModuleMap
-    })
-  } catch (e) {
-    error(`
+  const rawCode = compiler.genNode(ast)
+  if (rawCode) {
+    const renderCode = `
+global.currentInject.render = function (_i, _c, _r, _sc) {
+${rawCode}
+_r();
+};\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`
+      }
+    } catch (e) {
+      error(`
 Invalid render function generated by the template, please check!\n
 Template result:
 ${result}\n
 Error code:
-${rawCode}
+${renderCode}
 Error Detail:
 ${e.stack}`)
-    return result
-  }
-
-  resultSource += bindResult.code + '\n'
-
-  if ((mode === 'tt' || mode === 'swan') && bindResult.propKeys) {
-    resultSource += `global.currentInject.propKeys = ${JSON.stringify(bindResult.propKeys)};\n`
+      return result
+    }
   }
 
   if (meta.computed) {
@@ -131,6 +139,10 @@ global.currentInject.getRefsData = function () {
 };\n`
   }
 
+  if (meta.options) {
+    resultSource += `global.currentInject.injectOptions = ${JSON.stringify(meta.options)};` + '\n'
+  }
+
   this.emitFile(resourcePath, '', undefined, {
     skipEmit: true,
     extractedResultSource: resultSource