@@ -255,13 +254,13 @@ describe('Vapor Mode hydration', () => {
},
)
expect(container.innerHTML).toMatchInlineSnapshot(
- `"
foo
"`,
+ `"
foo
"`,
)
data.value = 'bar'
await nextTick()
expect(container.innerHTML).toMatchInlineSnapshot(
- `"
bar
"`,
+ `"
bar
"`,
)
})
@@ -291,6 +290,56 @@ describe('Vapor Mode hydration', () => {
)
})
+ test('mixed component and element with anchor insertion', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+
+
+
+
+
+
+ `,
+ {
+ Child: `
{{ data }}`,
+ },
+ )
+ expect(container.innerHTML).toMatchInlineSnapshot(
+ `"
foofoo
"`,
+ )
+
+ data.value = 'bar'
+ await nextTick()
+ expect(container.innerHTML).toMatchInlineSnapshot(
+ `"
barbar
"`,
+ )
+ })
+
+ test.todo('mixed component and text with anchor insertion', async () => {
+ const { container, data } = await testHydration(
+ `
+
+
+
+ {{ data }}
+
+
+
+
+ `,
+ {
+ Child: `
{{ data }}`,
+ },
+ )
+ expect(container.innerHTML).toMatchInlineSnapshot(``)
+
+ data.value = 'bar'
+ await nextTick()
+ expect(container.innerHTML).toMatchInlineSnapshot(``)
+ })
+
test.todo('if')
test.todo('for')
diff --git a/packages/runtime-vapor/src/dom/hydration.ts b/packages/runtime-vapor/src/dom/hydration.ts
index 5c1cdde07..a3b0eecb4 100644
--- a/packages/runtime-vapor/src/dom/hydration.ts
+++ b/packages/runtime-vapor/src/dom/hydration.ts
@@ -75,45 +75,47 @@ function locateHydrationNodeImpl() {
// prepend / firstChild
if (insertionAnchor === 0) {
node = child(insertionParent!)
- } else {
+ } else if (insertionParent && insertionAnchor) {
// dynamic child anchor ``
if (insertionAnchor && isDynamicStart(insertionAnchor)) {
- const anchor = (insertionParent!.lds = insertionParent!.lds
+ const anchor = (insertionParent!.$lds = insertionParent!.$lds
? // continuous dynamic children, the next dynamic start must exist
- locateNextDynamicStart(insertionParent!.lds)!
+ locateNextDynamicStart(insertionParent!.$lds)!
: insertionAnchor)
node = anchor.nextSibling
} else {
node = insertionAnchor
- ? insertionAnchor.previousSibling
- : insertionParent
- ? insertionParent.lastChild
- : currentHydrationNode
- if (node && isComment(node, ']')) {
- // fragment backward search
- if (node.$fs) {
- // already cached matching fragment start
- node = node.$fs
- } else {
- let cur: Node | null = node
- let curFragEnd = node
- let fragDepth = 0
- node = null
- while (cur) {
- cur = cur.previousSibling
- if (cur) {
- if (isComment(cur, '[')) {
- curFragEnd.$fs = cur
- if (!fragDepth) {
- node = cur
- break
- } else {
- fragDepth--
- }
- } else if (isComment(cur, ']')) {
- curFragEnd = cur
- fragDepth++
+ }
+ } else {
+ node = insertionAnchor
+ ? insertionAnchor.previousSibling
+ : insertionParent
+ ? insertionParent.lastChild
+ : currentHydrationNode
+ if (node && isComment(node, ']')) {
+ // fragment backward search
+ if (node.$fs) {
+ // already cached matching fragment start
+ node = node.$fs
+ } else {
+ let cur: Node | null = node
+ let curFragEnd = node
+ let fragDepth = 0
+ node = null
+ while (cur) {
+ cur = cur.previousSibling
+ if (cur) {
+ if (isComment(cur, '[')) {
+ curFragEnd.$fs = cur
+ if (!fragDepth) {
+ node = cur
+ break
+ } else {
+ fragDepth--
}
+ } else if (isComment(cur, ']')) {
+ curFragEnd = cur
+ fragDepth++
}
}
}
diff --git a/packages/runtime-vapor/src/insertionState.ts b/packages/runtime-vapor/src/insertionState.ts
index 5004c4d97..8280b65c2 100644
--- a/packages/runtime-vapor/src/insertionState.ts
+++ b/packages/runtime-vapor/src/insertionState.ts
@@ -1,7 +1,7 @@
export let insertionParent:
| (ParentNode & {
// cached the last dynamic start anchor
- lds?: Anchor
+ $lds?: Anchor
})
| undefined
export let insertionAnchor: Node | 0 | undefined | null