@mpxjs/webpack-plugin 2.8.49 → 2.8.51

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

@@ -19,9 +19,159 @@ 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: this._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 {
+      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) {
+  while (path.key === 'expression' && t.isExpressionStatement(path.parentPath)) {
+    path = path.parentPath
+  }
+
+  try {
+    if (replace) {
+      path.replaceWith(t.stringLiteral(''))
+    } else {
+      t.validate(path, path.key, null)
+      path.remove()
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
 module.exports = {
   transform (code, {
     needCollect = false,
+    renderReduce = false,
     ignoreMap = {}
   } = {}) {
     const ast = babylon.parse(code, {
@@ -30,10 +180,71 @@ 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) &&
+          !path.scope.hasBinding(path.node.name) &&
+          !ignoreMap[path.node.name]
+        ) {
+          const { last, keyPath } = calPropName(path)
+          path.needBind = true
+          if (needCollect) {
+            last.collectPath = t.stringLiteral(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 +261,65 @@ 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, replace } = path.delInfo
+          delete path.delInfo
 
-            if (isProps) {
-              propKeys.push(path.node.property.name)
-            }
+          if (canDel) {
+            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)
+              return
+            } 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)
+                  return
                 }
-                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]))
+            path.node && path.replaceWith(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('_c')), [path.collectPath, path.node]))
             delete path.collectPath
           }
         }
       }
     }
 
+    traverse(ast, collectVisitor)
     traverse(ast, bindThisVisitor)
 
     return {

package/lib/template-compiler/compiler.js

@@ -3,47 +3,19 @@ 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')
 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 +625,9 @@ function parse (template, options) {
     srcMode,
     type: 'template',
     testKey: 'tag',
+    data: {
+      usingComponents: options.usingComponents
+    },
     warn: _warn,
     error: _error
   })
@@ -1775,67 +1750,47 @@ function processBuiltInComponents (el, meta) {
   }
 }
 
-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}` }
-  ]
-  const newElAttrs = []
-  const allAttrs = cloneAttrsList(el.attrsList)
-
-  function processClone (attr) {
-    newElAttrs.push(attr)
-  }
-
-  function processMove (attr) {
-    getAndRemoveAttr(el, attr.name)
-    newElAttrs.push(attr)
+function processRootViewEventHack (el, options, root) {
+  // 只处理组件根节点
+  if (!(options.isComponent && el === root && isRealNode(el))) {
+    return
   }
-
-  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
-      })
+  const { proxyComponentEvents } = options
+  if (proxyComponentEvents) {
+    proxyComponentEvents.forEach((type) => {
+      addAttrs(el, [{
+        name: type,
+        value: '__proxyEvent'
+      }])
     })
   }
+}
 
-  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)
-        }
+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]
+    }
+
+    ['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
+      })
+      if (newValue !== undefined) {
+        addAttrs(el, [{
+          name: newName,
+          value: newValue
+        }])
       }
     })
-  })
-
-  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。其他跳过。
@@ -1847,17 +1802,18 @@ 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' || 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
+    }
   }
   return getTempNode()
 }
@@ -2036,6 +1992,16 @@ 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') {
@@ -2055,8 +2021,6 @@ function processElement (el, root, options, meta) {
 
   processInjectWxs(el, meta)
 
-  const transAli = mode === 'ali' && srcMode === 'wx'
-
   if (mode === 'web') {
     // 收集内建组件
     processBuiltInComponents(el, meta)
@@ -2108,11 +2072,7 @@ function closeElement (el, meta, options) {
   postProcessWxs(el, meta)
 
   if (!pass) {
-    if (isComponentNode(el, options) && !options.hasVirtualHost && mode === 'ali') {
-      el = processAliAddComponentRootView(el, options)
-    } else {
-      el = postProcessComponentIs(el)
-    }
+    el = postProcessComponentIs(el)
   }
   postProcessFor(el)
   postProcessIf(el)

package/lib/template-compiler/index.js

@@ -20,6 +20,7 @@ module.exports = function (raw) {
   const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
   const componentsMap = mpx.componentsMap[packageName]
   const wxsContentMap = mpx.wxsContentMap
+  const renderOptimizeRules = mpx.renderOptimizeRules
   const usingComponents = queryObj.usingComponents || []
   const componentPlaceholder = queryObj.componentPlaceholder || []
   const hasComment = queryObj.hasComment
@@ -39,6 +40,14 @@ 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,
@@ -61,7 +70,8 @@ module.exports = function (raw) {
     checkUsingComponents: matchCondition(resourcePath, mpx.checkUsingComponentsRules),
     globalComponents: Object.keys(mpx.usingComponents),
     forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules),
-    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules)
+    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules),
+    proxyComponentEvents
   })
 
   if (meta.wxsContentMap) {
@@ -97,6 +107,7 @@ global.currentInject = {
   try {
     bindResult = bindThis(rawCode, {
       needCollect: true,
+      renderReduce: matchCondition(resourcePath, renderOptimizeRules),
       ignoreMap: meta.wxsModuleMap
     })
   } catch (e) {
@@ -131,6 +142,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