Skip to content

Commit

Permalink
fix(runtime-dom): fix static node content caching edge cases
Browse files Browse the repository at this point in the history
reverts fded1e8

fix #4023, #4031, #4037
  • Loading branch information
yyx990803 committed Jul 1, 2021
1 parent 347d901 commit ba89ca9
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 50 deletions.
4 changes: 2 additions & 2 deletions packages/runtime-core/src/hydration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,10 @@ export function createHydrationFunctions(
// if the static vnode has its content stripped during build,
// adopt it from the server-rendered HTML.
const needToAdoptContent = !(vnode.children as string).length
for (let i = 0; i < vnode.staticCount; i++) {
for (let i = 0; i < vnode.staticCount!; i++) {
if (needToAdoptContent)
vnode.children += (nextNode as Element).outerHTML
if (i === vnode.staticCount - 1) {
if (i === vnode.staticCount! - 1) {
vnode.anchor = nextNode
}
nextNode = nextSibling(nextNode)!
Expand Down
16 changes: 10 additions & 6 deletions packages/runtime-core/src/renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export interface RendererOptions<
parent: HostElement,
anchor: HostNode | null,
isSVG: boolean,
cached?: [HostNode, HostNode | null] | null
cached?: HostNode[] | null
): HostElement[]
}

Expand Down Expand Up @@ -633,16 +633,22 @@ function baseCreateRenderer(
) => {
// static nodes are only present when used with compiler-dom/runtime-dom
// which guarantees presence of hostInsertStaticContent.
;[n2.el, n2.anchor] = hostInsertStaticContent!(
const nodes = hostInsertStaticContent!(
n2.children as string,
container,
anchor,
isSVG,
// pass cached nodes if the static node is being mounted multiple times
// so that runtime-dom can simply cloneNode() instead of inserting new
// HTML
n2.el && [n2.el, n2.anchor]
n2.staticCache
)
// first mount - this is the orignal hoisted vnode. cache nodes.
if (!n2.el) {
n2.staticCache = nodes
}
n2.el = nodes[0]
n2.anchor = nodes[nodes.length - 1]
}

/**
Expand Down Expand Up @@ -686,16 +692,14 @@ function baseCreateRenderer(
hostInsert(anchor!, container, nextSibling)
}

const removeStaticNode = (vnode: VNode) => {
const removeStaticNode = ({ el, anchor }: VNode) => {
let next
let { el, anchor } = vnode
while (el && el !== anchor) {
next = hostNextSibling(el)
hostRemove(el)
el = next
}
hostRemove(anchor!)
vnode.el = vnode.anchor = null
}

const processElement = (
Expand Down
5 changes: 3 additions & 2 deletions packages/runtime-core/src/vnode.ts
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,8 @@ export interface VNode<
anchor: HostNode | null // fragment anchor
target: HostElement | null // teleport target
targetAnchor: HostNode | null // teleport target anchor
staticCount: number // number of elements contained in a static vnode
staticCount?: number // number of elements contained in a static vnode
staticCache?: HostNode[] // cache of parsed static nodes for faster repeated insertions

// suspense
suspense: SuspenseBoundary | null
Expand Down Expand Up @@ -439,7 +440,6 @@ function _createVNode(
anchor: null,
target: null,
targetAnchor: null,
staticCount: 0,
shapeFlag,
patchFlag,
dynamicProps,
Expand Down Expand Up @@ -521,6 +521,7 @@ export function cloneVNode<T, U>(
target: vnode.target,
targetAnchor: vnode.targetAnchor,
staticCount: vnode.staticCount,
staticCache: vnode.staticCache,
shapeFlag: vnode.shapeFlag,
// if the vnode is cloned with extra props, we can no longer assume its
// existing patch flag to be reliable and need to add the FULL_PROPS flag.
Expand Down
40 changes: 16 additions & 24 deletions packages/runtime-dom/__tests__/nodeOps.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,11 @@ describe('runtime-dom: node-ops', () => {
test('fresh insertion', () => {
const content = `<div>one</div><div>two</div>three`
const parent = document.createElement('div')
const [first, last] = nodeOps.insertStaticContent!(
content,
parent,
null,
false
)
const nodes = nodeOps.insertStaticContent!(content, parent, null, false)
expect(parent.innerHTML).toBe(content)
expect(first).toBe(parent.firstChild)
expect(last).toBe(parent.lastChild)
expect(nodes.length).toBe(3)
expect(nodes[0]).toBe(parent.firstChild)
expect(nodes[nodes.length - 1]).toBe(parent.lastChild)
})

test('fresh insertion with anchor', () => {
Expand All @@ -47,15 +43,13 @@ describe('runtime-dom: node-ops', () => {
const parent = document.createElement('div')
parent.innerHTML = existing
const anchor = parent.firstChild
const [first, last] = nodeOps.insertStaticContent!(
content,
parent,
anchor,
false
)
const nodes = nodeOps.insertStaticContent!(content, parent, anchor, false)
expect(parent.innerHTML).toBe(content + existing)
expect(first).toBe(parent.firstChild)
expect(last).toBe(parent.childNodes[parent.childNodes.length - 2])
expect(nodes.length).toBe(3)
expect(nodes[0]).toBe(parent.firstChild)
expect(nodes[nodes.length - 1]).toBe(
parent.childNodes[parent.childNodes.length - 2]
)
})

test('fresh insertion as svg', () => {
Expand Down Expand Up @@ -97,7 +91,7 @@ describe('runtime-dom: node-ops', () => {
const content = `<div>one</div><div>two</div>three`

const cacheParent = document.createElement('div')
const [cachedFirst, cachedLast] = nodeOps.insertStaticContent!(
const nodes = nodeOps.insertStaticContent!(
content,
cacheParent,
null,
Expand All @@ -106,20 +100,18 @@ describe('runtime-dom: node-ops', () => {

const parent = document.createElement('div')

const [first, last] = nodeOps.insertStaticContent!(
const clonedNodes = nodeOps.insertStaticContent!(
``,
parent,
null,
false,
[cachedFirst, cachedLast]
nodes
)

expect(parent.innerHTML).toBe(content)
expect(first).toBe(parent.firstChild)
expect(last).toBe(parent.lastChild)

expect(first).not.toBe(cachedFirst)
expect(last).not.toBe(cachedLast)
expect(clonedNodes[0]).toBe(parent.firstChild)
expect(clonedNodes[clonedNodes.length - 1]).toBe(parent.lastChild)
expect(clonedNodes[0]).not.toBe(nodes[0])
})
})
})
33 changes: 17 additions & 16 deletions packages/runtime-dom/src/nodeOps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -73,17 +73,15 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
// As long as the user only uses trusted templates, this is safe.
insertStaticContent(content, parent, anchor, isSVG, cached) {
if (cached) {
let [cachedFirst, cachedLast] = cached
let first, last
while (true) {
let node = cachedFirst.cloneNode(true)
if (!first) first = node
let first
let last
let i = 0
let l = cached.length
for (; i < l; i++) {
const node = cached[i].cloneNode(true)
if (i === 0) first = node
if (i === l - 1) last = node
parent.insertBefore(node, anchor)
if (cachedFirst === cachedLast) {
last = node
break
}
cachedFirst = cachedFirst.nextSibling!
}
return [first, last] as any
}
Expand Down Expand Up @@ -111,11 +109,14 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
} else {
parent.insertAdjacentHTML('beforeend', content)
}
return [
// first
before ? before.nextSibling : parent.firstChild,
// last
anchor ? anchor.previousSibling : parent.lastChild
]
let first = before ? before.nextSibling : parent.firstChild
const last = anchor ? anchor.previousSibling : parent.lastChild
const ret = []
while (first) {
ret.push(first)
if (first === last) break
first = first.nextSibling
}
return ret
}
}

0 comments on commit ba89ca9

Please sign in to comment.