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 f55c27a9c6e..78b576af5c7 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,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("", 20),
+ _createElementVNode("div", { key: "1" }, "1", -1 /* HOISTED */),
+ _createStaticVNode("", 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
index fbf5718e65e..7530a59fa4f 100644
--- 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(
+ `
${repeat(
+ `
`,
+ StringifyThresholds.NODE_COUNT,
+ )}
1
${repeat(
+ `
`,
+ StringifyThresholds.NODE_COUNT,
+ )}
`,
+ )
+
+ expect(code).toMatchSnapshot()
+ })
})
diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts
index 05535a2c312..bb3d26e817b 100644
--- 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
}