From 22618ec9ec39b37765354da6c236f751725b6f0b Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Tue, 30 Apr 2024 17:59:59 +0100
Subject: [PATCH 1/2] fix(compiler-dom): restrict createStaticVNode usage with
 option elements

close #6568
---
 .../stringifyStatic.spec.ts.snap              | 32 +++++++++++++
 .../transforms/stringifyStatic.spec.ts        | 47 +++++++++++++++++++
 .../src/transforms/stringifyStatic.ts         | 13 +++++
 3 files changed, 92 insertions(+)

diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
index 33fb37a58f9..57d880a03f6 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
@@ -1,5 +1,24 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`stringify static html > should bail for <option> elements with number values 1`] = `
+"const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("select", null, [
+  /*#__PURE__*/_createElementVNode("option", { value: 1 }),
+  /*#__PURE__*/_createElementVNode("option", { value: 1 }),
+  /*#__PURE__*/_createElementVNode("option", { value: 1 }),
+  /*#__PURE__*/_createElementVNode("option", { value: 1 }),
+  /*#__PURE__*/_createElementVNode("option", { value: 1 })
+], -1 /* HOISTED */)
+const _hoisted_2 = [
+  _hoisted_1
+]
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+}"
+`;
+
 exports[`stringify static html > should bail on bindings that are hoisted but not stringifiable 1`] = `
 "const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
@@ -20,6 +39,19 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`stringify static html > should work for <option> elements with string values 1`] = `
+"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<select><option value=\\"1\\"></option><option value=\\"1\\"></option><option value=\\"1\\"></option><option value=\\"1\\"></option><option value=\\"1\\"></option></select>", 1)
+const _hoisted_2 = [
+  _hoisted_1
+]
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+}"
+`;
+
 exports[`stringify static html > should work with bindings that are non-static but stringifiable 1`] = `
 "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, 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
index b0eb515c254..67267c13dee 100644
--- a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -485,4 +485,51 @@ describe('stringify static html', () => {
     expect(code).toMatch(`<code>text1</code>`)
     expect(code).toMatchSnapshot()
   })
+
+  test('should work for <option> elements with string values', () => {
+    const { ast, code } = compileWithStringify(
+      `<div><select>${repeat(
+        `<option value="1" />`,
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</select></div>`,
+    )
+    // should be optimized now
+    expect(ast.hoists).toMatchObject([
+      {
+        type: NodeTypes.JS_CALL_EXPRESSION,
+        callee: CREATE_STATIC,
+        arguments: [
+          JSON.stringify(
+            `<select>${repeat(
+              `<option value="1"></option>`,
+              StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+            )}</select>`,
+          ),
+          '1',
+        ],
+      },
+      {
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
+    ])
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should bail for <option> elements with number values', () => {
+    const { ast, code } = compileWithStringify(
+      `<div><select>${repeat(
+        `<option :value="1" />`,
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</select></div>`,
+    )
+    expect(ast.hoists).toMatchObject([
+      {
+        type: NodeTypes.VNODE_CALL,
+      },
+      {
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
+    ])
+    expect(code).toMatchSnapshot()
+  })
 })
diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts
index a5ff770f4e8..5accb18283a 100644
--- a/packages/compiler-dom/src/transforms/stringifyStatic.ts
+++ b/packages/compiler-dom/src/transforms/stringifyStatic.ts
@@ -225,6 +225,19 @@ function analyzeNode(node: StringifiableNode): [number, number] | false {
         ) {
           return bail()
         }
+        if (
+          p.arg &&
+          p.arg.isStatic &&
+          p.exp &&
+          p.exp.ast &&
+          p.exp.ast.type !== 'StringLiteral' &&
+          node.ns === Namespaces.HTML
+        ) {
+          // <option :value="1"> cannot be safely stringified
+          if (node.tag === 'option' && p.arg.content === 'value') {
+            return bail()
+          }
+        }
       }
     }
     for (let i = 0; i < node.children.length; i++) {

From 8a9c50eeb6775edefd89421f57d20931b4b00eea Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Wed, 1 May 2024 08:56:01 -0700
Subject: [PATCH 2/2] refactor: use isStaticArgOf

---
 .../src/transforms/stringifyStatic.ts             | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts
index 5accb18283a..7d740798ebb 100644
--- a/packages/compiler-dom/src/transforms/stringifyStatic.ts
+++ b/packages/compiler-dom/src/transforms/stringifyStatic.ts
@@ -17,6 +17,7 @@ import {
   type TextCallNode,
   type TransformContext,
   createCallExpression,
+  isStaticArgOf,
 } from '@vue/compiler-core'
 import {
   escapeHtml,
@@ -200,6 +201,7 @@ function analyzeNode(node: StringifiableNode): [number, number] | false {
   // probably only need to check for most common case
   // i.e. non-phrasing-content tags inside `<p>`
   function walk(node: ElementNode): boolean {
+    const isOptionTag = node.tag === 'option' && node.ns === Namespaces.HTML
     for (let i = 0; i < node.props.length; i++) {
       const p = node.props[i]
       // bail on non-attr bindings
@@ -225,18 +227,15 @@ function analyzeNode(node: StringifiableNode): [number, number] | false {
         ) {
           return bail()
         }
+        // <option :value="1"> cannot be safely stringified
         if (
-          p.arg &&
-          p.arg.isStatic &&
+          isOptionTag &&
+          isStaticArgOf(p.arg, 'value') &&
           p.exp &&
           p.exp.ast &&
-          p.exp.ast.type !== 'StringLiteral' &&
-          node.ns === Namespaces.HTML
+          p.exp.ast.type !== 'StringLiteral'
         ) {
-          // <option :value="1"> cannot be safely stringified
-          if (node.tag === 'option' && p.arg.content === 'value') {
-            return bail()
-          }
+          return bail()
         }
       }
     }