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

render函数删除逻辑表达式和局部变量
didi · Nov 1, 2023 · e0e0589 · e0e0589
2 parents ec36a09 + 2c820d5
commit e0e0589
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 10 deletions.
diff --git a/packages/webpack-plugin/lib/template-compiler/bind-this.js b/packages/webpack-plugin/lib/template-compiler/bind-this.js
@@ -96,6 +96,16 @@ function checkDelAndGetPath (path) {
       } 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
     }
@@ -152,20 +162,14 @@ function checkPrefix (keys, key) {
 }
 
 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)
-  }
+  } catch (e) {}
 }
 
 module.exports = {
@@ -202,9 +206,23 @@ module.exports = {
       Identifier (path) {
         if (
           checkBindThis(path) &&
-          !path.scope.hasBinding(path.node.name) &&
           !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) {
@@ -272,10 +290,14 @@ module.exports = {
       enter (path) {
         // 删除重复变量
         if (path.delInfo) {
-          const { keyPath, canDel, replace } = path.delInfo
+          const { keyPath, canDel, isLocal, replace } = path.delInfo
           delete path.delInfo
 
           if (canDel) {
+            if (isLocal) { // 局部作用域里的变量，可直接删除
+              dealRemove(path, replace)
+              return
+            }
             const data = bindingsMap.get(currentBlock)
             const { bindings, pBindings } = data
             const allBindings = Object.assign({}, pBindings, bindings)

diff --git a/packages/webpack-plugin/test/platform/common/bind-this.spec.js b/packages/webpack-plugin/test/platform/common/bind-this.spec.js
@@ -644,7 +644,61 @@ global.currentInject = {
       }
     `
     const res = bindThis(input, { renderReduce: true })
-    const output = ['a', 'b', 'a', 'c', 'a', 'd', 'name', 'name2']
+    const output = ['b', 'a', 'c', 'a', 'd', 'name', 'name2']
     expect(res.propKeys.join('')).toBe(output.join(''))
   })
+
+  it('should logicalExpression is correct', function () {
+    const input = `
+      global.currentInject = {
+        render: function () {
+          a
+          a || ''
+          a && a.b
+          b
+          b || 123 || ''
+          '456' || b || ''
+          '' || 123 || b
+          b || a || ''
+        }
+      }
+    `
+    const res = bindThis(input, { needCollect: false, renderReduce: true }).code
+    const output = `
+global.currentInject = {
+  render: function () {
+    this.a && this.a.b;
+    '' || 123 || this.b;
+    this.b || this.a || '';
+  }
+};`
+    expect(trimBlankRow(res)).toBe(trimBlankRow(output))
+  })
+
+  it('should scope var is correct', function () {
+    const input = `
+      global.currentInject = {
+        render: function () {
+          this._i(list, function (item, index) {
+            item;
+            index;
+            item.a ? "" : item.b;
+            item.a || "";
+            item.a || item.b;
+          });
+        }
+      }
+    `
+    const res = bindThis(input, { needCollect: false, renderReduce: true }).code
+    const output = `
+global.currentInject = {
+  render: function () {
+    this._i(this.list, function (item, index) {
+      item.a ? "" : item.b;
+      item.a || item.b;
+    });
+  }
+};`
+    expect(trimBlankRow(res)).toBe(trimBlankRow(output))
+  })
 })