Skip to content

Commit 8b240da

Browse files
edison1105edison1105
committed
chore: remove the code related to handling full diff
_renderSlots only renders slots that have corresponding outlets, but not all slots in this._slots are rendered to the DOM tree. During a full diff, parent.insertBefore(node,anchor) will throw an error because the anchor is not in the DOM tree.
1 parent 01684ca commit 8b240da

File tree

5 files changed

+39
-304
lines changed

5 files changed

+39
-304
lines changed

‎packages/runtime-core/src/hydration.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -772,6 +772,13 @@ export function createHydrationFunctions(
772772
}
773773
}
774774

775+
const isTemplateNode = (node: Node): node is HTMLTemplateElement => {
776+
return (
777+
node.nodeType === DOMNodeTypes.ELEMENT &&
778+
(node as Element).tagName === 'TEMPLATE'
779+
)
780+
}
781+
775782
return [hydrate, hydrateNode]
776783
}
777784

@@ -986,10 +993,3 @@ function isMismatchAllowed(
986993
return allowedAttr.split(',').includes(MismatchTypeString[allowedType])
987994
}
988995
}
989-
990-
export const isTemplateNode = (node: Node): node is HTMLTemplateElement => {
991-
return (
992-
node.nodeType === DOMNodeTypes.ELEMENT &&
993-
(node as Element).tagName === 'TEMPLATE'
994-
)
995-
}

‎packages/runtime-core/src/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -382,7 +382,6 @@ export {
382382
normalizeClass,
383383
normalizeStyle,
384384
} from '@vue/shared'
385-
export { isTemplateNode } from './hydration'
386385

387386
// For test-utils
388387
export { transformVNodeArgs } from './vnode'

‎packages/runtime-core/src/renderer.ts‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -712,17 +712,6 @@ function baseCreateRenderer(
712712
transition!.beforeEnter(el)
713713
}
714714

715-
// For custom element with shadowRoot: false, the anchor node may be moved
716-
// to the slot container. In this case, it need to use the anchor's parent
717-
// node as the actual container.
718-
if (
719-
container._isVueCE &&
720-
container._def.shadowRoot === false &&
721-
anchor &&
722-
anchor.$parentNode
723-
) {
724-
container = anchor.$parentNode
725-
}
726715
hostInsert(el, container, anchor)
727716
if (
728717
(vnodeHook = props && props.onVnodeMounted) ||
@@ -978,7 +967,7 @@ function baseCreateRenderer(
978967
!isSameVNodeType(oldVNode, newVNode) ||
979968
// - In the case of a component, it could contain anything.
980969
oldVNode.shapeFlag & (ShapeFlags.COMPONENT | ShapeFlags.TELEPORT))
981-
? hostParentNode(oldVNode.el)!
970+
? hostParentNode(oldVNode.el) || oldVNode.el.$parentNode
982971
: // In other cases, the parent container is not actually used so we
983972
// just pass the block element here to avoid a DOM parentNode call.
984973
fallbackContainer

‎packages/runtime-dom/__tests__/customElement.spec.ts‎

Lines changed: 5 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -1029,10 +1029,7 @@ describe('defineCustomElement', () => {
10291029
toggle.value = false
10301030
await nextTick()
10311031
expect(e.innerHTML).toBe(
1032-
`<span>default</span>text` +
1033-
`<template name="named"></template>` +
1034-
`<!---->` +
1035-
`<div>fallback</div>`,
1032+
`<span>default</span>text` + `<!---->` + `<div>fallback</div>`,
10361033
)
10371034
})
10381035

@@ -1215,7 +1212,7 @@ describe('defineCustomElement', () => {
12151212
app.mount(container)
12161213
expect(container.innerHTML).toBe(
12171214
`<ce-shadow-root-false-optimized data-v-app="">` +
1218-
`<!--v-if--><template name="default"></template>` +
1215+
`<!--v-if-->` +
12191216
`</ce-shadow-root-false-optimized>`,
12201217
)
12211218

@@ -1231,7 +1228,7 @@ describe('defineCustomElement', () => {
12311228
await nextTick()
12321229
expect(container.innerHTML).toBe(
12331230
`<ce-shadow-root-false-optimized data-v-app="">` +
1234-
`<!--v-if--><template name="default"></template>` +
1231+
`<!--v-if-->` +
12351232
`</ce-shadow-root-false-optimized>`,
12361233
)
12371234

@@ -1244,93 +1241,6 @@ describe('defineCustomElement', () => {
12441241
)
12451242
})
12461243

1247-
test('update slotted v-if nodes w/ shadowRoot false', async () => {
1248-
const E = defineCustomElement(
1249-
defineComponent({
1250-
props: {
1251-
isShown: { type: Boolean, required: true },
1252-
},
1253-
render() {
1254-
return this.isShown
1255-
? h('div', { key: 0 }, [renderSlot(this.$slots, 'default')])
1256-
: createCommentVNode('v-if')
1257-
},
1258-
}),
1259-
{ shadowRoot: false },
1260-
)
1261-
customElements.define('ce-shadow-root-false', E)
1262-
1263-
const Comp = defineComponent({
1264-
props: {
1265-
isShown: { type: Boolean, required: true },
1266-
},
1267-
render() {
1268-
return h('ce-shadow-root-false', { 'is-shown': this.isShown }, [
1269-
renderSlot(this.$slots, 'default'),
1270-
])
1271-
},
1272-
})
1273-
1274-
const isShown = ref(false)
1275-
const count = ref(0)
1276-
1277-
function click() {
1278-
isShown.value = !isShown.value
1279-
count.value++
1280-
}
1281-
1282-
const App = {
1283-
render() {
1284-
return h(
1285-
Comp,
1286-
{ isShown: isShown.value },
1287-
{
1288-
default: () => [
1289-
h('div', null, String(isShown.value)),
1290-
count.value > 1
1291-
? h('div', { key: 0 }, 'hi')
1292-
: createCommentVNode('v-if', true),
1293-
],
1294-
},
1295-
)
1296-
},
1297-
}
1298-
const container = document.createElement('div')
1299-
document.body.appendChild(container)
1300-
1301-
const app = createApp(App)
1302-
app.mount(container)
1303-
expect(container.innerHTML).toBe(
1304-
`<ce-shadow-root-false data-v-app="">` +
1305-
`<!--v-if--><template name="default"></template>` +
1306-
`</ce-shadow-root-false>`,
1307-
)
1308-
1309-
click()
1310-
await nextTick()
1311-
expect(container.innerHTML).toBe(
1312-
`<ce-shadow-root-false data-v-app="" is-shown="">` +
1313-
`<div><div>true</div><!--v-if--></div>` +
1314-
`</ce-shadow-root-false>`,
1315-
)
1316-
1317-
click()
1318-
await nextTick()
1319-
expect(container.innerHTML).toBe(
1320-
`<ce-shadow-root-false data-v-app="">` +
1321-
`<!--v-if--><template name="default"></template>` +
1322-
`</ce-shadow-root-false>`,
1323-
)
1324-
1325-
click()
1326-
await nextTick()
1327-
expect(container.innerHTML).toBe(
1328-
`<ce-shadow-root-false data-v-app="" is-shown="">` +
1329-
`<div><div>true</div><div>hi</div></div>` +
1330-
`</ce-shadow-root-false>`,
1331-
)
1332-
})
1333-
13341244
// #13234
13351245
test('switch between slotted and fallback nodes w/ shadowRoot false (optimized mode)', async () => {
13361246
const E = defineCustomElement(
@@ -1400,7 +1310,7 @@ describe('defineCustomElement', () => {
14001310
app.mount(container)
14011311
expect(container.innerHTML).toBe(
14021312
`<ce-with-fallback-shadow-root-false-optimized data-v-app="">` +
1403-
`fallback<template name="default"></template>` +
1313+
`fallback` +
14041314
`</ce-with-fallback-shadow-root-false-optimized>`,
14051315
)
14061316

@@ -1416,87 +1326,10 @@ describe('defineCustomElement', () => {
14161326
await nextTick()
14171327
expect(container.innerHTML).toBe(
14181328
`<ce-with-fallback-shadow-root-false-optimized data-v-app="">` +
1419-
`<!--v-if-->fallback` +
1329+
`fallback<!--v-if-->` +
14201330
`</ce-with-fallback-shadow-root-false-optimized>`,
14211331
)
14221332
})
1423-
1424-
test('switch between slotted and fallback nodes w/ shadowRoot false', async () => {
1425-
const E = defineCustomElement(
1426-
defineComponent({
1427-
render() {
1428-
return renderSlot(this.$slots, 'foo', {}, () => [
1429-
createTextVNode('fallback'),
1430-
])
1431-
},
1432-
}),
1433-
{ shadowRoot: false },
1434-
)
1435-
customElements.define('ce-with-fallback-shadow-root-false', E)
1436-
1437-
const Comp = defineComponent({
1438-
render() {
1439-
return h('ce-with-fallback-shadow-root-false', null, [
1440-
this.$slots.foo
1441-
? h('div', { key: 0, slot: 'foo' }, [
1442-
renderSlot(this.$slots, 'foo'),
1443-
])
1444-
: createCommentVNode('v-if', true),
1445-
renderSlot(this.$slots, 'default'),
1446-
])
1447-
},
1448-
})
1449-
1450-
const isShown = ref(false)
1451-
const App = defineComponent({
1452-
components: { Comp },
1453-
render() {
1454-
return h(
1455-
Comp,
1456-
null,
1457-
createSlots(
1458-
{ _: 2 /* DYNAMIC */ } as any,
1459-
[
1460-
isShown.value
1461-
? {
1462-
name: 'foo',
1463-
fn: withCtx(() => [createTextVNode('foo')]),
1464-
key: '0',
1465-
}
1466-
: undefined,
1467-
] as any,
1468-
),
1469-
)
1470-
},
1471-
})
1472-
1473-
const container = document.createElement('div')
1474-
document.body.appendChild(container)
1475-
1476-
const app = createApp(App)
1477-
app.mount(container)
1478-
expect(container.innerHTML).toBe(
1479-
`<ce-with-fallback-shadow-root-false data-v-app="">` +
1480-
`fallback<template name="default"></template>` +
1481-
`</ce-with-fallback-shadow-root-false>`,
1482-
)
1483-
1484-
isShown.value = true
1485-
await nextTick()
1486-
expect(container.innerHTML).toBe(
1487-
`<ce-with-fallback-shadow-root-false data-v-app="">` +
1488-
`<div slot="foo">foo</div>` +
1489-
`</ce-with-fallback-shadow-root-false>`,
1490-
)
1491-
1492-
// isShown.value = false
1493-
// await nextTick()
1494-
// expect(container.innerHTML).toBe(
1495-
// `<ce-with-fallback-shadow-root-false data-v-app="">` +
1496-
// `<!--v-if-->fallback` +
1497-
// `</ce-with-fallback-shadow-root-false>`,
1498-
// )
1499-
})
15001333
})
15011334

15021335
describe('helpers', () => {

0 commit comments

Comments
 (0)