MCPcopy
hub / github.com/vuejs/core / hydrateChildren

Function hydrateChildren

packages/runtime-core/src/hydration.ts:569–646  ·  view source on GitHub ↗
(
    node: Node | null,
    parentVNode: VNode,
    container: Element,
    parentComponent: ComponentInternalInstance | null,
    parentSuspense: SuspenseBoundary | null,
    slotScopeIds: string[] | null,
    optimized: boolean,
  )

Source from the content-addressed store, hash-verified

567 }
568
569 const hydrateChildren = (
570 node: Node | null,
571 parentVNode: VNode,
572 container: Element,
573 parentComponent: ComponentInternalInstance | null,
574 parentSuspense: SuspenseBoundary | null,
575 slotScopeIds: string[] | null,
576 optimized: boolean,
577 ): Node | null => {
578 optimized = optimized || !!parentVNode.dynamicChildren
579 const children = parentVNode.children as VNode[]
580 const l = children.length
581 let hasCheckedMismatch = false
582 for (let i = 0; i < l; i++) {
583 const vnode = optimized
584 ? children[i]
585 : (children[i] = normalizeVNode(children[i]))
586 const isText = vnode.type === Text
587 if (node) {
588 if (isText && !optimized) {
589 // #7285 possible consecutive text vnodes from manual render fns or
590 // JSX-compiled fns, but on the client the browser parses only 1 text
591 // node.
592 // look ahead for next possible text vnode
593 if (i + 1 < l && normalizeVNode(children[i + 1]).type === Text) {
594 // create an extra TextNode on the client for the next vnode to
595 // adopt
596 insert(
597 createText(
598 (node as Text).data.slice((vnode.children as string).length),
599 ),
600 container,
601 nextSibling(node),
602 )
603 ;(node as Text).data = vnode.children as string
604 }
605 }
606 node = hydrateNode(
607 node,
608 vnode,
609 parentComponent,
610 parentSuspense,
611 slotScopeIds,
612 optimized,
613 )
614 } else if (isText && !vnode.children) {
615 // #7215 create a TextNode for empty text node
616 // because server rendered HTML won't contain a text node
617 insert((vnode.el = createText('')), container)
618 } else {
619 if (!hasCheckedMismatch) {
620 hasCheckedMismatch = true
621 if (!isMismatchAllowed(container, MismatchTypes.CHILDREN)) {
622 ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
623 warn(
624 `Hydration children mismatch on`,
625 container,
626 `\nServer rendered element contains fewer child nodes than client vdom.`,

Callers 4

hydrateElementFunction · 0.85
hydrateFragmentFunction · 0.85
hydrateDisabledTeleportFunction · 0.85
hydrateTeleportFunction · 0.85

Calls 10

normalizeVNodeFunction · 0.90
warnFunction · 0.90
insertFunction · 0.85
createTextFunction · 0.85
nextSiblingFunction · 0.85
hydrateNodeFunction · 0.85
isMismatchAllowedFunction · 0.85
logMismatchErrorFunction · 0.85
patchFunction · 0.85
getContainerTypeFunction · 0.85

Tested by

no test coverage detected