fix(compiler-dom): fix stringify static edge for partially eligible c…

…hunks in cached parent close #11879 close #11890
vuejs · Sep 13, 2024 · 1d99d61 · 1d99d61
1 parent 7571f20
commit 1d99d61
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 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
@@ -1,5 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`stringify static html > eligible content (elements > 20) + non-eligible content 1`] = `
+"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
+    _createStaticVNode("<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>", 20),
+    _createElementVNode("div", { key: "1" }, "1", -1 /* HOISTED */),
+    _createStaticVNode("<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>", 20)
+  ])))
+}"
+`;
+
 exports[`stringify static html > escape 1`] = `
 "const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, 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
@@ -451,4 +451,18 @@ describe('stringify static html', () => {
     expect(ast.cached).toMatchObject([cachedArrayBailedMatcher()])
     expect(code).toMatchSnapshot()
   })
+
+  test('eligible content (elements > 20) + non-eligible content', () => {
+    const { code } = compileWithStringify(
+      `<div>${repeat(
+        `<span/>`,
+        StringifyThresholds.NODE_COUNT,
+      )}<div key="1">1</div>${repeat(
+        `<span/>`,
+        StringifyThresholds.NODE_COUNT,
+      )}</div>`,
+    )
+
+    expect(code).toMatchSnapshot()
+  })
 })
diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts
@@ -16,8 +16,6 @@ import {
   type TemplateChildNode,
   type TextCallNode,
   type TransformContext,
-  type VNodeCall,
-  createArrayExpression,
   createCallExpression,
   isStaticArgOf,
 } from '@vue/compiler-core'
@@ -106,15 +104,23 @@ export const stringifyStatic: HoistTransform = (children, context, parent) => {
         String(currentChunk.length),
       ])
 
+      const deleteCount = currentChunk.length - 1
+
       if (isParentCached) {
-        ;((parent.codegenNode as VNodeCall).children as CacheExpression).value =
-          createArrayExpression([staticCall])
+        // if the parent is cached, then `children` is also the value of the
+        // CacheExpression. Just replace the corresponding range in the cached
+        // list with staticCall.
+        children.splice(
+          currentIndex - currentChunk.length,
+          currentChunk.length,
+          // @ts-expect-error
+          staticCall,
+        )
       } else {
         // replace the first node's hoisted expression with the static vnode call
         ;(currentChunk[0].codegenNode as CacheExpression).value = staticCall
         if (currentChunk.length > 1) {
           // remove merged nodes from children
-          const deleteCount = currentChunk.length - 1
           children.splice(currentIndex - currentChunk.length + 1, deleteCount)
           // also adjust index for the remaining cache items
           const cacheIndex = context.cached.indexOf(
@@ -128,9 +134,9 @@ export const stringifyStatic: HoistTransform = (children, context, parent) => {
             }
             context.cached.splice(cacheIndex - deleteCount + 1, deleteCount)
           }
-          return deleteCount
         }
       }
+      return deleteCount
     }
     return 0
   }