Merge pull request #1357 from didi/feat-bind-this

fix 逻辑运算短路问题

packages/webpack-plugin/lib/template-compiler/bind-this.js

@@ -96,12 +96,11 @@ function checkDelAndGetPath (path) {
       } else {
         delPath = current.parentPath
       }
-    } else if (t.isLogicalExpression(current.container)) { // case: a || ''
+    } else if (t.isLogicalExpression(current.container)) { // 只处理case: a || '' or '123' || 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删除节点时需要
@@ -116,11 +115,23 @@ function checkDelAndGetPath (path) {
   // 确定是否可删除
   while (!t.isBlockStatement(current) && canDel) {
     const { key, container } = current
+    if (t.isIfStatement(container) && key === 'test') { // if (a) {}
+      canDel = false
+      break
+    }
+
+    if (t.isLogicalExpression(container)) { // case: a || ((b || c) && d)
+      ignore = true
+      break
+    }
+
+    // case: a ??= b
     if (
-      t.isLogicalExpression(container) || // a && b
-      (t.isIfStatement(container) && key === 'test') // if (a) {}
+      key === 'right' &&
+      t.isAssignmentExpression(container) &&
+      ['??=', '||=', '&&='].includes(container.operator)
     ) {
-      canDel = false
+      ignore = true
       break
     }
 
@@ -166,13 +177,16 @@ function dealRemove (path, replace) {
     if (replace) {
       path.replaceWith(t.stringLiteral(''))
     } else {
-      t.validate(path, path.key, null)
+      if (path.inList) {
+        t.validate(path.parent, path.key, [null])
+      } else {
+        t.validate(path.parent, path.key, null)
+      }
       path.remove()
     }
     delete path.needBind
     delete path.collectInfo
-  } catch (e) {
-  }
+  } catch (e) {}
 }
 
 module.exports = {

packages/webpack-plugin/test/platform/common/bind-this.spec.js

@@ -61,6 +61,7 @@ describe('render function simplify should correct', function () {
 global.currentInject.render = function (_i, _c, _r, _sc) {
   if (_sc("a")) {}
 
+  _sc("b");
   _sc("c");
 
   _sc("a") ? _sc("b") : _sc("c");
@@ -140,21 +141,88 @@ global.currentInject.render = function (_i, _c, _r, _sc) {
         obj4 || 123 || ''
         '456' || obj4 || ''
         '' || 123 || obj4
+        obj5 || 123 || ''
+        obj5
+
+        obj6
+        obj6 || (obj7 || '')
+        
+        a1;
+        b1;
+        c1;
+        a1 || b1 || c1;
+        
+        a2;
+        b2;
+        a2 || b2 || '';
+        
+        a3;
+        c3
+        a3 || ''
+        a3 || '' || c3
+        
+        a4
+        a4 || '' || ''
 
-        obj5 + 'rpx'
-        'height:' + obj5 + 'rpx'
-        'height' + ':' + obj5
+        obj8
+        obj8 + 'rpx'
+        'height:' + obj8 + 'rpx'
+        'height' + ':' + obj8
+        
+        obj9
+        obj10
+        obj11
+        obj12
+        obj9 || (obj10 || obj11 && obj12)
+        obj12 || ''
       }`
     const res = bindThis(input, { needCollect: true, renderReduce: true }).code
     const output = `
 global.currentInject.render = function (_i, _c, _r, _sc) {
   // 逻辑运算          
+  _sc("obj3") || '';
   _sc("obj3") && _c("obj3.b");
+
+  _sc("obj4");
   '' || 123 || _sc("obj4");
+  _sc("obj5") || 123 || '';
+  
+  _sc("obj6");
+  _sc("obj6") || _sc("obj7") || '';
+
+  _sc("a1");
+  _sc("b1");
+
+  _sc("c1");
 
-  _sc("obj5") + 'rpx';
+  _sc("a1") || _sc("b1") || _sc("c1");
+
+  _sc("a2");
+  _sc("b2");
+
+  _sc("a2") || _sc("b2") || '';
+
+  _sc("a3");
+  _sc("c3");
+
+  _sc("a3") || '' || _sc("c3");
+
+  _sc("a4");
+
+  _sc("obj8");
+  "" + 'rpx';
   'height:' + "" + 'rpx';
   'height' + ':' + "";
+  
+  _sc("obj9");
+
+  _sc("obj10");
+
+  _sc("obj11");
+
+  _sc("obj12");
+
+  _sc("obj9") || _sc("obj10") || _sc("obj11") && _sc("obj12");
 };`
     expect(trimBlankRow(res)).toBe(trimBlankRow(output))
   })
@@ -238,7 +306,7 @@ global.currentInject.render = function (_i, _c, _r, _sc) {
       }
     `
     const res = bindThis(input, { renderReduce: true })
-    const output = ['b', 'a', 'c', 'a', 'd', 'name', 'name2']
+    const output = ['a', 'b', 'a', 'c', 'a', 'd', 'name', 'name2']
     expect(res.propKeys.join('')).toBe(output.join(''))
   })
 
@@ -279,6 +347,7 @@ global.currentInject.render = function (_i, _c, _r, _sc) {
   this.name3[this.name2];
 
   this.name4 && this.name4.length;
+  this.name4['length'];
 
   this.name5;