From 97fe2883dfa42a36401f9ad86096224b1567c087 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Wed, 24 Mar 2021 19:52:05 +0800
Subject: [PATCH] fix: stringifyStatic should remove attribute bindings with
 `null` value (#3475)

---
 .../transforms/stringifyStatic.spec.ts        | 22 +++++++++++++++++++
 .../src/transforms/stringifyStatic.ts         | 18 ++++++++-------
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
index 7918df9a610..612f4f0138a 100644
--- a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -294,4 +294,26 @@ describe('stringify static html', () => {
       })
     })
   })
+
+  test('should remove attribute for `null`', () => {
+    const { ast } = compileWithStringify(
+      `<div>${repeat(
+        `<span :title="null"></span>`,
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+      )}</div>`
+    )
+    expect(ast.hoists[0]).toMatchObject({
+      type: NodeTypes.JS_CALL_EXPRESSION,
+      callee: CREATE_STATIC,
+      arguments: [
+        JSON.stringify(
+          `${repeat(
+            `<span></span>`,
+            StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+          )}`
+        ),
+        '5'
+      ]
+    })
+  })
 })
diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts
index 7e4c66ad8cd..c3e8d9419b9 100644
--- a/packages/compiler-dom/src/transforms/stringifyStatic.ts
+++ b/packages/compiler-dom/src/transforms/stringifyStatic.ts
@@ -264,15 +264,17 @@ function stringifyElement(
     } else if (p.type === NodeTypes.DIRECTIVE && p.name === 'bind') {
       // constant v-bind, e.g. :foo="1"
       let evaluated = evaluateConstant(p.exp as SimpleExpressionNode)
-      const arg = p.arg && (p.arg as SimpleExpressionNode).content
-      if (arg === 'class') {
-        evaluated = normalizeClass(evaluated)
-      } else if (arg === 'style') {
-        evaluated = stringifyStyle(normalizeStyle(evaluated))
+      if (evaluated != null) {
+        const arg = p.arg && (p.arg as SimpleExpressionNode).content
+        if (arg === 'class') {
+          evaluated = normalizeClass(evaluated)
+        } else if (arg === 'style') {
+          evaluated = stringifyStyle(normalizeStyle(evaluated))
+        }
+        res += ` ${(p.arg as SimpleExpressionNode).content}="${escapeHtml(
+          evaluated
+        )}"`
       }
-      res += ` ${(p.arg as SimpleExpressionNode).content}="${escapeHtml(
-        evaluated
-      )}"`
     }
   }
   if (context.scopeId) {