fix(compiler-dom): avoid stringify option with null value

vuejs · Oct 2, 2024 · 4eba15b · 4eba15b
1 parent 29de6f8
commit 4eba15b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
@@ -32,6 +32,23 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`stringify static html > should bail for <option> elements with null values 1`] = `
+"const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+ return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+ _createElementVNode("select", null, [
+ _createElementVNode("option", { value: null }),
+ _createElementVNode("option", { value: "1" }),
+ _createElementVNode("option", { value: "1" }),
+ _createElementVNode("option", { value: "1" }),
+ _createElementVNode("option", { value: "1" }),
+ _createElementVNode("option", { value: "1" })
+ ], -1 /* HOISTED */)
+ ])))
+}"
+`;
+
 exports[`stringify static html > should bail for <option> elements with number values 1`] = `
 "const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 

diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -470,6 +470,17 @@ describe('stringify static html', () => {
  expect(code).toMatchSnapshot()
  })
 
+ test('should bail for <option> elements with null values', () => {
+ const { ast, code } = compileWithStringify(
+ `<div><select><option :value="null" />${repeat(
+ `<option value="1" />`,
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+ )}</select></div>`,
+ )
+ expect(ast.cached).toMatchObject([cachedArrayBailedMatcher()])
+ expect(code).toMatchSnapshot()
+ })
+
  test('eligible content (elements > 20) + non-eligible content', () => {
  const { code } = compileWithStringify(
  `<div>${repeat(

diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts
@@ -261,8 +261,7 @@ function analyzeNode(node: StringifiableNode): [number, number] | false {
  isOptionTag &&
  isStaticArgOf(p.arg, 'value') &&
  p.exp &&
- p.exp.ast &&
- p.exp.ast.type !== 'StringLiteral'
+ !p.exp.isStatic
  ) {
  return bail()
  }