How to use traverseStaticChildren method in Playwright Internal

Best JavaScript code snippet using playwright-internal

main.js

Source:main.js

...3904    const areChildrenSVG = isSVG && n2.type !== "foreignObject";3905    if (dynamicChildren) {3906      patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG, slotScopeIds);3907      if (parentComponent && parentComponent.type.__hmrId) {3908        traverseStaticChildren(n1, n2);3909      }3910    } else if (!optimized) {3911      patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG, slotScopeIds, false);3912    }3913    if (patchFlag > 0) {3914      if (patchFlag & 16) {3915        patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);3916      } else {3917        if (patchFlag & 2) {3918          if (oldProps.class !== newProps.class) {3919            hostPatchProp(el, "class", null, newProps.class, isSVG);3920          }3921        }3922        if (patchFlag & 4) {3923          hostPatchProp(el, "style", oldProps.style, newProps.style, isSVG);3924        }3925        if (patchFlag & 8) {3926          const propsToUpdate = n2.dynamicProps;3927          for (let i = 0; i < propsToUpdate.length; i++) {3928            const key = propsToUpdate[i];3929            const prev = oldProps[key];3930            const next = newProps[key];3931            if (next !== prev || key === "value") {3932              hostPatchProp(el, key, prev, next, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);3933            }3934          }3935        }3936      }3937      if (patchFlag & 1) {3938        if (n1.children !== n2.children) {3939          hostSetElementText(el, n2.children);3940        }3941      }3942    } else if (!optimized && dynamicChildren == null) {3943      patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);3944    }3945    if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {3946      queuePostRenderEffect(() => {3947        vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);3948        dirs && invokeDirectiveHook(n2, n1, parentComponent, "updated");3949      }, parentSuspense);3950    }3951  };3952  const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG, slotScopeIds) => {3953    for (let i = 0; i < newChildren.length; i++) {3954      const oldVNode = oldChildren[i];3955      const newVNode = newChildren[i];3956      const container = oldVNode.el && (oldVNode.type === Fragment || !isSameVNodeType(oldVNode, newVNode) || oldVNode.shapeFlag & (6 | 64)) ? hostParentNode(oldVNode.el) : fallbackContainer;3957      patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, true);3958    }3959  };3960  const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {3961    if (oldProps !== newProps) {3962      for (const key in newProps) {3963        if (isReservedProp(key))3964          continue;3965        const next = newProps[key];3966        const prev = oldProps[key];3967        if (next !== prev && key !== "value") {3968          hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);3969        }3970      }3971      if (oldProps !== EMPTY_OBJ) {3972        for (const key in oldProps) {3973          if (!isReservedProp(key) && !(key in newProps)) {3974            hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);3975          }3976        }3977      }3978      if ("value" in newProps) {3979        hostPatchProp(el, "value", oldProps.value, newProps.value);3980      }3981    }3982  };3983  const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {3984    const fragmentStartAnchor = n2.el = n1 ? n1.el : hostCreateText("");3985    const fragmentEndAnchor = n2.anchor = n1 ? n1.anchor : hostCreateText("");3986    let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2;3987    if (isHmrUpdating) {3988      patchFlag = 0;3989      optimized = false;3990      dynamicChildren = null;3991    }3992    if (fragmentSlotScopeIds) {3993      slotScopeIds = slotScopeIds ? slotScopeIds.concat(fragmentSlotScopeIds) : fragmentSlotScopeIds;3994    }3995    if (n1 == null) {3996      hostInsert(fragmentStartAnchor, container, anchor);3997      hostInsert(fragmentEndAnchor, container, anchor);3998      mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);3999    } else {4000      if (patchFlag > 0 && patchFlag & 64 && dynamicChildren && n1.dynamicChildren) {4001        patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG, slotScopeIds);4002        if (parentComponent && parentComponent.type.__hmrId) {4003          traverseStaticChildren(n1, n2);4004        } else if (n2.key != null || parentComponent && n2 === parentComponent.subTree) {4005          traverseStaticChildren(n1, n2, true);4006        }4007      } else {4008        patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4009      }4010    }4011  };4012  const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {4013    n2.slotScopeIds = slotScopeIds;4014    if (n1 == null) {4015      if (n2.shapeFlag & 512) {4016        parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized);4017      } else {4018        mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);4019      }4020    } else {4021      updateComponent(n1, n2, optimized);4022    }4023  };4024  const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {4025    const instance = initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense);4026    if (instance.type.__hmrId) {4027      registerHMR(instance);4028    }4029    if (true) {4030      pushWarningContext(initialVNode);4031      startMeasure(instance, `mount`);4032    }4033    if (isKeepAlive(initialVNode)) {4034      instance.ctx.renderer = internals;4035    }4036    {4037      if (true) {4038        startMeasure(instance, `init`);4039      }4040      setupComponent(instance);4041      if (true) {4042        endMeasure(instance, `init`);4043      }4044    }4045    if (instance.asyncDep) {4046      parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect);4047      if (!initialVNode.el) {4048        const placeholder = instance.subTree = createVNode(Comment);4049        processCommentNode(null, placeholder, container, anchor);4050      }4051      return;4052    }4053    setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);4054    if (true) {4055      popWarningContext();4056      endMeasure(instance, `mount`);4057    }4058  };4059  const updateComponent = (n1, n2, optimized) => {4060    const instance = n2.component = n1.component;4061    if (shouldUpdateComponent(n1, n2, optimized)) {4062      if (instance.asyncDep && !instance.asyncResolved) {4063        if (true) {4064          pushWarningContext(n2);4065        }4066        updateComponentPreRender(instance, n2, optimized);4067        if (true) {4068          popWarningContext();4069        }4070        return;4071      } else {4072        instance.next = n2;4073        invalidateJob(instance.update);4074        instance.update();4075      }4076    } else {4077      n2.component = n1.component;4078      n2.el = n1.el;4079      instance.vnode = n2;4080    }4081  };4082  const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {4083    const componentUpdateFn = () => {4084      if (!instance.isMounted) {4085        let vnodeHook;4086        const { el, props } = initialVNode;4087        const { bm, m, parent } = instance;4088        const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);4089        toggleRecurse(instance, false);4090        if (bm) {4091          invokeArrayFns(bm);4092        }4093        if (!isAsyncWrapperVNode && (vnodeHook = props && props.onVnodeBeforeMount)) {4094          invokeVNodeHook(vnodeHook, parent, initialVNode);4095        }4096        toggleRecurse(instance, true);4097        if (el && hydrateNode) {4098          const hydrateSubTree = () => {4099            if (true) {4100              startMeasure(instance, `render`);4101            }4102            instance.subTree = renderComponentRoot(instance);4103            if (true) {4104              endMeasure(instance, `render`);4105            }4106            if (true) {4107              startMeasure(instance, `hydrate`);4108            }4109            hydrateNode(el, instance.subTree, instance, parentSuspense, null);4110            if (true) {4111              endMeasure(instance, `hydrate`);4112            }4113          };4114          if (isAsyncWrapperVNode) {4115            initialVNode.type.__asyncLoader().then(() => !instance.isUnmounted && hydrateSubTree());4116          } else {4117            hydrateSubTree();4118          }4119        } else {4120          if (true) {4121            startMeasure(instance, `render`);4122          }4123          const subTree = instance.subTree = renderComponentRoot(instance);4124          if (true) {4125            endMeasure(instance, `render`);4126          }4127          if (true) {4128            startMeasure(instance, `patch`);4129          }4130          patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);4131          if (true) {4132            endMeasure(instance, `patch`);4133          }4134          initialVNode.el = subTree.el;4135        }4136        if (m) {4137          queuePostRenderEffect(m, parentSuspense);4138        }4139        if (!isAsyncWrapperVNode && (vnodeHook = props && props.onVnodeMounted)) {4140          const scopedInitialVNode = initialVNode;4141          queuePostRenderEffect(() => invokeVNodeHook(vnodeHook, parent, scopedInitialVNode), parentSuspense);4142        }4143        if (initialVNode.shapeFlag & 256) {4144          instance.a && queuePostRenderEffect(instance.a, parentSuspense);4145        }4146        instance.isMounted = true;4147        if (true) {4148          devtoolsComponentAdded(instance);4149        }4150        initialVNode = container = anchor = null;4151      } else {4152        let { next, bu, u, parent, vnode } = instance;4153        let originNext = next;4154        let vnodeHook;4155        if (true) {4156          pushWarningContext(next || instance.vnode);4157        }4158        toggleRecurse(instance, false);4159        if (next) {4160          next.el = vnode.el;4161          updateComponentPreRender(instance, next, optimized);4162        } else {4163          next = vnode;4164        }4165        if (bu) {4166          invokeArrayFns(bu);4167        }4168        if (vnodeHook = next.props && next.props.onVnodeBeforeUpdate) {4169          invokeVNodeHook(vnodeHook, parent, next, vnode);4170        }4171        toggleRecurse(instance, true);4172        if (true) {4173          startMeasure(instance, `render`);4174        }4175        const nextTree = renderComponentRoot(instance);4176        if (true) {4177          endMeasure(instance, `render`);4178        }4179        const prevTree = instance.subTree;4180        instance.subTree = nextTree;4181        if (true) {4182          startMeasure(instance, `patch`);4183        }4184        patch(prevTree, nextTree, hostParentNode(prevTree.el), getNextHostNode(prevTree), instance, parentSuspense, isSVG);4185        if (true) {4186          endMeasure(instance, `patch`);4187        }4188        next.el = nextTree.el;4189        if (originNext === null) {4190          updateHOCHostEl(instance, nextTree.el);4191        }4192        if (u) {4193          queuePostRenderEffect(u, parentSuspense);4194        }4195        if (vnodeHook = next.props && next.props.onVnodeUpdated) {4196          queuePostRenderEffect(() => invokeVNodeHook(vnodeHook, parent, next, vnode), parentSuspense);4197        }4198        if (true) {4199          devtoolsComponentUpdated(instance);4200        }4201        if (true) {4202          popWarningContext();4203        }4204      }4205    };4206    const effect2 = instance.effect = new ReactiveEffect(componentUpdateFn, () => queueJob(instance.update), instance.scope);4207    const update = instance.update = effect2.run.bind(effect2);4208    update.id = instance.uid;4209    toggleRecurse(instance, true);4210    if (true) {4211      effect2.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;4212      effect2.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;4213      update.ownerInstance = instance;4214    }4215    update();4216  };4217  const updateComponentPreRender = (instance, nextVNode, optimized) => {4218    nextVNode.component = instance;4219    const prevProps = instance.vnode.props;4220    instance.vnode = nextVNode;4221    instance.next = null;4222    updateProps(instance, nextVNode.props, prevProps, optimized);4223    updateSlots(instance, nextVNode.children, optimized);4224    pauseTracking();4225    flushPreFlushCbs(void 0, instance.update);4226    resetTracking();4227  };4228  const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized = false) => {4229    const c1 = n1 && n1.children;4230    const prevShapeFlag = n1 ? n1.shapeFlag : 0;4231    const c2 = n2.children;4232    const { patchFlag, shapeFlag } = n2;4233    if (patchFlag > 0) {4234      if (patchFlag & 128) {4235        patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4236        return;4237      } else if (patchFlag & 256) {4238        patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4239        return;4240      }4241    }4242    if (shapeFlag & 8) {4243      if (prevShapeFlag & 16) {4244        unmountChildren(c1, parentComponent, parentSuspense);4245      }4246      if (c2 !== c1) {4247        hostSetElementText(container, c2);4248      }4249    } else {4250      if (prevShapeFlag & 16) {4251        if (shapeFlag & 16) {4252          patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4253        } else {4254          unmountChildren(c1, parentComponent, parentSuspense, true);4255        }4256      } else {4257        if (prevShapeFlag & 8) {4258          hostSetElementText(container, "");4259        }4260        if (shapeFlag & 16) {4261          mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4262        }4263      }4264    }4265  };4266  const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {4267    c1 = c1 || EMPTY_ARR;4268    c2 = c2 || EMPTY_ARR;4269    const oldLength = c1.length;4270    const newLength = c2.length;4271    const commonLength = Math.min(oldLength, newLength);4272    let i;4273    for (i = 0; i < commonLength; i++) {4274      const nextChild = c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]);4275      patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4276    }4277    if (oldLength > newLength) {4278      unmountChildren(c1, parentComponent, parentSuspense, true, false, commonLength);4279    } else {4280      mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, commonLength);4281    }4282  };4283  const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {4284    let i = 0;4285    const l2 = c2.length;4286    let e1 = c1.length - 1;4287    let e2 = l2 - 1;4288    while (i <= e1 && i <= e2) {4289      const n1 = c1[i];4290      const n2 = c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]);4291      if (isSameVNodeType(n1, n2)) {4292        patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4293      } else {4294        break;4295      }4296      i++;4297    }4298    while (i <= e1 && i <= e2) {4299      const n1 = c1[e1];4300      const n2 = c2[e2] = optimized ? cloneIfMounted(c2[e2]) : normalizeVNode(c2[e2]);4301      if (isSameVNodeType(n1, n2)) {4302        patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4303      } else {4304        break;4305      }4306      e1--;4307      e2--;4308    }4309    if (i > e1) {4310      if (i <= e2) {4311        const nextPos = e2 + 1;4312        const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;4313        while (i <= e2) {4314          patch(null, c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]), container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4315          i++;4316        }4317      }4318    } else if (i > e2) {4319      while (i <= e1) {4320        unmount(c1[i], parentComponent, parentSuspense, true);4321        i++;4322      }4323    } else {4324      const s1 = i;4325      const s2 = i;4326      const keyToNewIndexMap = new Map();4327      for (i = s2; i <= e2; i++) {4328        const nextChild = c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]);4329        if (nextChild.key != null) {4330          if (keyToNewIndexMap.has(nextChild.key)) {4331            warn2(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);4332          }4333          keyToNewIndexMap.set(nextChild.key, i);4334        }4335      }4336      let j;4337      let patched = 0;4338      const toBePatched = e2 - s2 + 1;4339      let moved = false;4340      let maxNewIndexSoFar = 0;4341      const newIndexToOldIndexMap = new Array(toBePatched);4342      for (i = 0; i < toBePatched; i++)4343        newIndexToOldIndexMap[i] = 0;4344      for (i = s1; i <= e1; i++) {4345        const prevChild = c1[i];4346        if (patched >= toBePatched) {4347          unmount(prevChild, parentComponent, parentSuspense, true);4348          continue;4349        }4350        let newIndex;4351        if (prevChild.key != null) {4352          newIndex = keyToNewIndexMap.get(prevChild.key);4353        } else {4354          for (j = s2; j <= e2; j++) {4355            if (newIndexToOldIndexMap[j - s2] === 0 && isSameVNodeType(prevChild, c2[j])) {4356              newIndex = j;4357              break;4358            }4359          }4360        }4361        if (newIndex === void 0) {4362          unmount(prevChild, parentComponent, parentSuspense, true);4363        } else {4364          newIndexToOldIndexMap[newIndex - s2] = i + 1;4365          if (newIndex >= maxNewIndexSoFar) {4366            maxNewIndexSoFar = newIndex;4367          } else {4368            moved = true;4369          }4370          patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4371          patched++;4372        }4373      }4374      const increasingNewIndexSequence = moved ? getSequence(newIndexToOldIndexMap) : EMPTY_ARR;4375      j = increasingNewIndexSequence.length - 1;4376      for (i = toBePatched - 1; i >= 0; i--) {4377        const nextIndex = s2 + i;4378        const nextChild = c2[nextIndex];4379        const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;4380        if (newIndexToOldIndexMap[i] === 0) {4381          patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4382        } else if (moved) {4383          if (j < 0 || i !== increasingNewIndexSequence[j]) {4384            move(nextChild, container, anchor, 2);4385          } else {4386            j--;4387          }4388        }4389      }4390    }4391  };4392  const move = (vnode, container, anchor, moveType, parentSuspense = null) => {4393    const { el, type, transition, children, shapeFlag } = vnode;4394    if (shapeFlag & 6) {4395      move(vnode.component.subTree, container, anchor, moveType);4396      return;4397    }4398    if (shapeFlag & 128) {4399      vnode.suspense.move(container, anchor, moveType);4400      return;4401    }4402    if (shapeFlag & 64) {4403      type.move(vnode, container, anchor, internals);4404      return;4405    }4406    if (type === Fragment) {4407      hostInsert(el, container, anchor);4408      for (let i = 0; i < children.length; i++) {4409        move(children[i], container, anchor, moveType);4410      }4411      hostInsert(vnode.anchor, container, anchor);4412      return;4413    }4414    if (type === Static) {4415      moveStaticNode(vnode, container, anchor);4416      return;4417    }4418    const needTransition = moveType !== 2 && shapeFlag & 1 && transition;4419    if (needTransition) {4420      if (moveType === 0) {4421        transition.beforeEnter(el);4422        hostInsert(el, container, anchor);4423        queuePostRenderEffect(() => transition.enter(el), parentSuspense);4424      } else {4425        const { leave, delayLeave, afterLeave } = transition;4426        const remove3 = () => hostInsert(el, container, anchor);4427        const performLeave = () => {4428          leave(el, () => {4429            remove3();4430            afterLeave && afterLeave();4431          });4432        };4433        if (delayLeave) {4434          delayLeave(el, remove3, performLeave);4435        } else {4436          performLeave();4437        }4438      }4439    } else {4440      hostInsert(el, container, anchor);4441    }4442  };4443  const unmount = (vnode, parentComponent, parentSuspense, doRemove = false, optimized = false) => {4444    const { type, props, ref: ref2, children, dynamicChildren, shapeFlag, patchFlag, dirs } = vnode;4445    if (ref2 != null) {4446      setRef(ref2, null, parentSuspense, vnode, true);4447    }4448    if (shapeFlag & 256) {4449      parentComponent.ctx.deactivate(vnode);4450      return;4451    }4452    const shouldInvokeDirs = shapeFlag & 1 && dirs;4453    const shouldInvokeVnodeHook = !isAsyncWrapper(vnode);4454    let vnodeHook;4455    if (shouldInvokeVnodeHook && (vnodeHook = props && props.onVnodeBeforeUnmount)) {4456      invokeVNodeHook(vnodeHook, parentComponent, vnode);4457    }4458    if (shapeFlag & 6) {4459      unmountComponent(vnode.component, parentSuspense, doRemove);4460    } else {4461      if (shapeFlag & 128) {4462        vnode.suspense.unmount(parentSuspense, doRemove);4463        return;4464      }4465      if (shouldInvokeDirs) {4466        invokeDirectiveHook(vnode, null, parentComponent, "beforeUnmount");4467      }4468      if (shapeFlag & 64) {4469        vnode.type.remove(vnode, parentComponent, parentSuspense, optimized, internals, doRemove);4470      } else if (dynamicChildren && (type !== Fragment || patchFlag > 0 && patchFlag & 64)) {4471        unmountChildren(dynamicChildren, parentComponent, parentSuspense, false, true);4472      } else if (type === Fragment && patchFlag & (128 | 256) || !optimized && shapeFlag & 16) {4473        unmountChildren(children, parentComponent, parentSuspense);4474      }4475      if (doRemove) {4476        remove2(vnode);4477      }4478    }4479    if (shouldInvokeVnodeHook && (vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) {4480      queuePostRenderEffect(() => {4481        vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);4482        shouldInvokeDirs && invokeDirectiveHook(vnode, null, parentComponent, "unmounted");4483      }, parentSuspense);4484    }4485  };4486  const remove2 = (vnode) => {4487    const { type, el, anchor, transition } = vnode;4488    if (type === Fragment) {4489      removeFragment(el, anchor);4490      return;4491    }4492    if (type === Static) {4493      removeStaticNode(vnode);4494      return;4495    }4496    const performRemove = () => {4497      hostRemove(el);4498      if (transition && !transition.persisted && transition.afterLeave) {4499        transition.afterLeave();4500      }4501    };4502    if (vnode.shapeFlag & 1 && transition && !transition.persisted) {4503      const { leave, delayLeave } = transition;4504      const performLeave = () => leave(el, performRemove);4505      if (delayLeave) {4506        delayLeave(vnode.el, performRemove, performLeave);4507      } else {4508        performLeave();4509      }4510    } else {4511      performRemove();4512    }4513  };4514  const removeFragment = (cur, end) => {4515    let next;4516    while (cur !== end) {4517      next = hostNextSibling(cur);4518      hostRemove(cur);4519      cur = next;4520    }4521    hostRemove(end);4522  };4523  const unmountComponent = (instance, parentSuspense, doRemove) => {4524    if (instance.type.__hmrId) {4525      unregisterHMR(instance);4526    }4527    const { bum, scope, update, subTree, um } = instance;4528    if (bum) {4529      invokeArrayFns(bum);4530    }4531    scope.stop();4532    if (update) {4533      update.active = false;4534      unmount(subTree, instance, parentSuspense, doRemove);4535    }4536    if (um) {4537      queuePostRenderEffect(um, parentSuspense);4538    }4539    queuePostRenderEffect(() => {4540      instance.isUnmounted = true;4541    }, parentSuspense);4542    if (parentSuspense && parentSuspense.pendingBranch && !parentSuspense.isUnmounted && instance.asyncDep && !instance.asyncResolved && instance.suspenseId === parentSuspense.pendingId) {4543      parentSuspense.deps--;4544      if (parentSuspense.deps === 0) {4545        parentSuspense.resolve();4546      }4547    }4548    if (true) {4549      devtoolsComponentRemoved(instance);4550    }4551  };4552  const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, optimized = false, start = 0) => {4553    for (let i = start; i < children.length; i++) {4554      unmount(children[i], parentComponent, parentSuspense, doRemove, optimized);4555    }4556  };4557  const getNextHostNode = (vnode) => {4558    if (vnode.shapeFlag & 6) {4559      return getNextHostNode(vnode.component.subTree);4560    }4561    if (vnode.shapeFlag & 128) {4562      return vnode.suspense.next();4563    }4564    return hostNextSibling(vnode.anchor || vnode.el);4565  };4566  const render3 = (vnode, container, isSVG) => {4567    if (vnode == null) {4568      if (container._vnode) {4569        unmount(container._vnode, null, null, true);4570      }4571    } else {4572      patch(container._vnode || null, vnode, container, null, null, null, isSVG);4573    }4574    flushPostFlushCbs();4575    container._vnode = vnode;4576  };4577  const internals = {4578    p: patch,4579    um: unmount,4580    m: move,4581    r: remove2,4582    mt: mountComponent,4583    mc: mountChildren,4584    pc: patchChildren,4585    pbc: patchBlockChildren,4586    n: getNextHostNode,4587    o: options4588  };4589  let hydrate;4590  let hydrateNode;4591  if (createHydrationFns) {4592    [hydrate, hydrateNode] = createHydrationFns(internals);4593  }4594  return {4595    render: render3,4596    hydrate,4597    createApp: createAppAPI(render3, hydrate)4598  };4599}4600function toggleRecurse({ effect: effect2, update }, allowed) {4601  effect2.allowRecurse = update.allowRecurse = allowed;4602}4603function traverseStaticChildren(n1, n2, shallow = false) {4604  const ch1 = n1.children;4605  const ch2 = n2.children;4606  if (isArray(ch1) && isArray(ch2)) {4607    for (let i = 0; i < ch1.length; i++) {4608      const c1 = ch1[i];4609      let c2 = ch2[i];4610      if (c2.shapeFlag & 1 && !c2.dynamicChildren) {4611        if (c2.patchFlag <= 0 || c2.patchFlag === 32) {4612          c2 = ch2[i] = cloneIfMounted(ch2[i]);4613          c2.el = c1.el;4614        }4615        if (!shallow)4616          traverseStaticChildren(c1, c2);4617      }4618      if (c2.type === Comment && !c2.el) {4619        c2.el = c1.el;4620      }4621    }4622  }4623}4624function getSequence(arr) {4625  const p2 = arr.slice();4626  const result = [0];4627  let i, j, u, v, c;4628  const len = arr.length;4629  for (i = 0; i < len; i++) {4630    const arrI = arr[i];...

jquery-3.6.0.min.js

Source:jquery-3.6.0.min.js

...1294        }1295      }, processFragment = (e, t, r, o, s, a, l, c, u) => {1296        const f = t.el = e ? e.el : i(""), p = t.anchor = e ? e.anchor : i("");1297        let {patchFlag: d, dynamicChildren: m, slotScopeIds: g} = t;1298        m && (u = !0), g && (c = c ? c.concat(g) : g), null == e ? (n(f, r, o), n(p, r, o), mountChildren(t.children, r, p, s, a, l, c, u)) : d > 0 && 64 & d && m && e.dynamicChildren ? (patchBlockChildren(e.dynamicChildren, m, r, s, a, l, c), (null != t.key || s && t === s.subTree) && traverseStaticChildren(e, t, !0)) : patchChildren(e, t, r, p, s, a, l, c, u)1299      }, processComponent = (e, t, n, r, o, s, a, i, l) => {1300        t.slotScopeIds = i, null == e ? 512 & t.shapeFlag ? o.ctx.activate(t, n, r, a, l) : mountComponent(t, n, r, o, s, a, l) : updateComponent(e, t, l)1301      }, mountComponent = (e, t, n, r, o, s, a) => {1302        const i = e.component = function createComponentInstance(e, t, n) {1303          const r = e.type, o = (t ? t.appContext : e.appContext) || Qe, s = {1304            uid: Je++,1305            vnode: e,1306            type: r,1307            parent: t,1308            appContext: o,1309            root: null,1310            next: null,1311            subTree: null,1312            update: null,1313            render: null,1314            proxy: null,1315            exposed: null,1316            withProxy: null,1317            effects: null,1318            provides: t ? t.provides : Object.create(o.provides),1319            accessCache: null,1320            renderCache: [],1321            components: null,1322            directives: null,1323            propsOptions: normalizePropsOptions(r, o),1324            emitsOptions: normalizeEmitsOptions(r, o),1325            emit: null,1326            emitted: null,1327            propsDefaults: g,1328            inheritAttrs: r.inheritAttrs,1329            ctx: g,1330            data: g,1331            props: g,1332            attrs: g,1333            slots: g,1334            refs: g,1335            setupState: g,1336            setupContext: null,1337            suspense: n,1338            suspenseId: n ? n.pendingId : 0,1339            asyncDep: null,1340            asyncResolved: !1,1341            isMounted: !1,1342            isUnmounted: !1,1343            isDeactivated: !1,1344            bc: null,1345            c: null,1346            bm: null,1347            m: null,1348            bu: null,1349            u: null,1350            um: null,1351            bum: null,1352            da: null,1353            a: null,1354            rtg: null,1355            rtc: null,1356            ec: null,1357            sp: null1358          };1359          return s.ctx = {_: s}, s.root = t ? t.root : s, s.emit = emit.bind(null, s), s1360        }(e, r, o);1361        if (isKeepAlive(e) && (i.ctx.renderer = R), function setupComponent(e, t = !1) {1362          Xe = t;1363          const {props: n, children: r} = e.vnode, o = isStatefulComponent(e);1364          initProps(e, n, o, t), ((e, t) => {1365            if (32 & e.vnode.shapeFlag) {1366              const n = t._;1367              n ? (e.slots = toRaw(t), def(t, "_", n)) : normalizeObjectSlots(t, e.slots = {})1368            } else e.slots = {}, t && normalizeVNodeSlots(e, t);1369            def(e.slots, Ue, 1)1370          })(e, r);1371          const s = o ? function setupStatefulComponent(e, t) {1372            const n = e.type;1373            e.accessCache = Object.create(null), e.proxy = function markRaw(e) {1374              return def(e, "__v_skip", !0), e1375            }(new Proxy(e.ctx, qe));1376            const {setup: r} = n;1377            if (r) {1378              const n = e.setupContext = r.length > 1 ? function createSetupContext(e) {1379                const expose = t => {1380                  e.exposed = proxyRefs(t)1381                };1382                return {attrs: e.attrs, slots: e.slots, emit: e.emit, expose}1383              }(e) : null;1384              Ye = e, pauseTracking();1385              const o = callWithErrorHandling(r, e, 0, [e.props, n]);1386              if (resetTracking(), Ye = null, isPromise(o)) {1387                if (t) return o.then((t => {1388                  handleSetupResult(e, t)1389                })).catch((t => {1390                  handleError(t, e, 0)1391                }));1392                e.asyncDep = o1393              } else handleSetupResult(e, o)1394            } else finishComponentSetup(e)1395          }(e, t) : void 0;1396          return Xe = !1, s1397        }(i), i.asyncDep) {1398          if (o && o.registerDep(i, setupRenderEffect), !e.el) {1399            const e = i.subTree = De(He);1400            processCommentNode(null, e, t, n)1401          }1402        } else setupRenderEffect(i, e, t, n, o, s, a)1403      }, updateComponent = (e, t, n) => {1404        const r = t.component = e.component;1405        if (function shouldUpdateComponent(e, t, n) {1406          const {props: r, children: o, component: s} = e, {props: a, children: i, patchFlag: l} = t, c = s.emitsOptions;1407          if (t.dirs || t.transition) return !0;1408          if (!(n && l >= 0)) return !(!o && !i || i && i.$stable) || r !== a && (r ? !a || hasPropsChanged(r, a, c) : !!a);1409          if (1024 & l) return !0;1410          if (16 & l) return r ? hasPropsChanged(r, a, c) : !!a;1411          if (8 & l) {1412            const e = t.dynamicProps;1413            for (let t = 0; t < e.length; t++) {1414              const n = e[t];1415              if (a[n] !== r[n] && !isEmitListener(c, n)) return !01416            }1417          }1418          return !11419        }(e, t, n)) {1420          if (r.asyncDep && !r.asyncResolved) return void updateComponentPreRender(r, t, n);1421          r.next = t, function invalidateJob(e) {1422            const t = le.indexOf(e);1423            t > ce && le.splice(t, 1)1424          }(r.update), r.update()1425        } else t.component = e.component, t.el = e.el, r.vnode = t1426      }, setupRenderEffect = (e, t, n, r, o, s, a) => {1427        e.update = effect((function componentEffect() {1428          if (e.isMounted) {1429            let t, {next: n, bu: r, u: i, parent: l, vnode: c} = e, u = n;1430            n ? (n.el = c.el, updateComponentPreRender(e, n, a)) : n = c, r && invokeArrayFns(r), (t = n.props && n.props.onVnodeBeforeUpdate) && invokeVNodeHook(t, l, n, c);1431            const p = renderComponentRoot(e), d = e.subTree;1432            e.subTree = p, patch(d, p, f(d.el), getNextHostNode(d), e, o, s), n.el = p.el, null === u && function updateHOCHostEl({1433                                                                                                                                    vnode: e,1434                                                                                                                                    parent: t1435                                                                                                                                  }, n) {1436              for (; t && t.subTree === e;) (e = t.vnode).el = n, t = t.parent1437            }(e, p.el), i && Me(i, o), (t = n.props && n.props.onVnodeUpdated) && Me((() => invokeVNodeHook(t, l, n, c)), o)1438          } else {1439            let a;1440            const {el: i, props: l} = t, {bm: c, m: u, parent: f} = e;1441            if (c && invokeArrayFns(c), (a = l && l.onVnodeBeforeMount) && invokeVNodeHook(a, f, t), i && _) {1442              const hydrateSubTree = () => {1443                e.subTree = renderComponentRoot(e), _(i, e.subTree, e, o, null)1444              };1445              isAsyncWrapper(t) ? t.type.__asyncLoader().then((() => !e.isUnmounted && hydrateSubTree())) : hydrateSubTree()1446            } else {1447              const a = e.subTree = renderComponentRoot(e);1448              patch(null, a, n, r, e, o, s), t.el = a.el1449            }1450            if (u && Me(u, o), a = l && l.onVnodeMounted) {1451              const e = t;1452              Me((() => invokeVNodeHook(a, f, e)), o)1453            }1454            256 & t.shapeFlag && e.a && Me(e.a, o), e.isMounted = !0, t = n = r = null1455          }1456        }), Ie)1457      }, updateComponentPreRender = (e, t, n) => {1458        t.component = e;1459        const r = e.vnode.props;1460        e.vnode = t, e.next = null, function updateProps(e, t, n, r) {1461          const {props: o, attrs: s, vnode: {patchFlag: a}} = e, i = toRaw(o), [l] = e.propsOptions;1462          let c = !1;1463          if (!(r || a > 0) || 16 & a) {1464            let r;1465            setFullProps(e, t, o, s) && (c = !0);1466            for (const s in i) t && (hasOwn(t, s) || (r = C(s)) !== s && hasOwn(t, r)) || (l ? !n || void 0 === n[s] && void 0 === n[r] || (o[s] = resolvePropValue(l, i, s, void 0, e, !0)) : delete o[s]);1467            if (s !== i) for (const e in s) t && hasOwn(t, e) || (delete s[e], c = !0)1468          } else if (8 & a) {1469            const n = e.vnode.dynamicProps;1470            for (let r = 0; r < n.length; r++) {1471              let a = n[r];1472              const u = t[a];1473              if (l) if (hasOwn(s, a)) u !== s[a] && (s[a] = u, c = !0); else {1474                const t = S(a);1475                o[t] = resolvePropValue(l, i, t, u, e, !1)1476              } else u !== s[a] && (s[a] = u, c = !0)1477            }1478          }1479          c && trigger(e, "set", "$attrs")1480        }(e, t.props, r, n), ((e, t, n) => {1481          const {vnode: r, slots: o} = e;1482          let s = !0, a = g;1483          if (32 & r.shapeFlag) {1484            const e = t._;1485            e ? n && 1 === e ? s = !1 : (b(o, t), n || 1 !== e || delete o._) : (s = !t.$stable, normalizeObjectSlots(t, o)), a = t1486          } else t && (normalizeVNodeSlots(e, t), a = {default: 1});1487          if (s) for (const i in o) isInternalKey(i) || i in a || delete o[i]1488        })(e, t.children, n), pauseTracking(), flushPreFlushCbs(void 0, e.update), resetTracking()1489      }, patchChildren = (e, t, n, r, o, s, a, i, l = !1) => {1490        const c = e && e.children, f = e ? e.shapeFlag : 0, p = t.children, {patchFlag: d, shapeFlag: m} = t;1491        if (d > 0) {1492          if (128 & d) return void patchKeyedChildren(c, p, n, r, o, s, a, i, l);1493          if (256 & d) return void patchUnkeyedChildren(c, p, n, r, o, s, a, i, l)1494        }1495        8 & m ? (16 & f && unmountChildren(c, o, s), p !== c && u(n, p)) : 16 & f ? 16 & m ? patchKeyedChildren(c, p, n, r, o, s, a, i, l) : unmountChildren(c, o, s, !0) : (8 & f && u(n, ""), 16 & m && mountChildren(p, n, r, o, s, a, i, l))1496      }, patchUnkeyedChildren = (e, t, n, r, o, s, a, i, l) => {1497        t = t || v;1498        const c = (e = e || v).length, u = t.length, f = Math.min(c, u);1499        let p;1500        for (p = 0; p < f; p++) {1501          const r = t[p] = l ? cloneIfMounted(t[p]) : normalizeVNode(t[p]);1502          patch(e[p], r, n, null, o, s, a, i, l)1503        }1504        c > u ? unmountChildren(e, o, s, !0, !1, f) : mountChildren(t, n, r, o, s, a, i, l, f)1505      }, patchKeyedChildren = (e, t, n, r, o, s, a, i, l) => {1506        let c = 0;1507        const u = t.length;1508        let f = e.length - 1, p = u - 1;1509        for (; c <= f && c <= p;) {1510          const r = e[c], u = t[c] = l ? cloneIfMounted(t[c]) : normalizeVNode(t[c]);1511          if (!isSameVNodeType(r, u)) break;1512          patch(r, u, n, null, o, s, a, i, l), c++1513        }1514        for (; c <= f && c <= p;) {1515          const r = e[f], c = t[p] = l ? cloneIfMounted(t[p]) : normalizeVNode(t[p]);1516          if (!isSameVNodeType(r, c)) break;1517          patch(r, c, n, null, o, s, a, i, l), f--, p--1518        }1519        if (c > f) {1520          if (c <= p) {1521            const e = p + 1, f = e < u ? t[e].el : r;1522            for (; c <= p;) patch(null, t[c] = l ? cloneIfMounted(t[c]) : normalizeVNode(t[c]), n, f, o, s, a, i, l), c++1523          }1524        } else if (c > p) for (; c <= f;) unmount(e[c], o, s, !0), c++; else {1525          const d = c, m = c, g = new Map;1526          for (c = m; c <= p; c++) {1527            const e = t[c] = l ? cloneIfMounted(t[c]) : normalizeVNode(t[c]);1528            null != e.key && g.set(e.key, c)1529          }1530          let y, b = 0;1531          const R = p - m + 1;1532          let w = !1, _ = 0;1533          const k = new Array(R);1534          for (c = 0; c < R; c++) k[c] = 0;1535          for (c = d; c <= f; c++) {1536            const r = e[c];1537            if (b >= R) {1538              unmount(r, o, s, !0);1539              continue1540            }1541            let u;1542            if (null != r.key) u = g.get(r.key); else for (y = m; y <= p; y++) if (0 === k[y - m] && isSameVNodeType(r, t[y])) {1543              u = y;1544              break1545            }1546            void 0 === u ? unmount(r, o, s, !0) : (k[u - m] = c + 1, u >= _ ? _ = u : w = !0, patch(r, t[u], n, null, o, s, a, i, l), b++)1547          }1548          const x = w ? function getSequence(e) {1549            const t = e.slice(), n = [0];1550            let r, o, s, a, i;1551            const l = e.length;1552            for (r = 0; r < l; r++) {1553              const l = e[r];1554              if (0 !== l) {1555                if (o = n[n.length - 1], e[o] < l) {1556                  t[r] = o, n.push(r);1557                  continue1558                }1559                for (s = 0, a = n.length - 1; s < a;) i = (s + a) / 2 | 0, e[n[i]] < l ? s = i + 1 : a = i;1560                l < e[n[s]] && (s > 0 && (t[r] = n[s - 1]), n[s] = r)1561              }1562            }1563            s = n.length, a = n[s - 1];1564            for (; s-- > 0;) n[s] = a, a = t[a];1565            return n1566          }(k) : v;1567          for (y = x.length - 1, c = R - 1; c >= 0; c--) {1568            const e = m + c, f = t[e], p = e + 1 < u ? t[e + 1].el : r;1569            0 === k[c] ? patch(null, f, n, p, o, s, a, i, l) : w && (y < 0 || c !== x[y] ? move(f, n, p, 2) : y--)1570          }1571        }1572      }, move = (e, t, r, o, s = null) => {1573        const {el: a, type: i, transition: l, children: c, shapeFlag: u} = e;1574        if (6 & u) return void move(e.component.subTree, t, r, o);1575        if (128 & u) return void e.suspense.move(t, r, o);1576        if (64 & u) return void i.move(e, t, r, R);1577        if (i === Le) {1578          n(a, t, r);1579          for (let e = 0; e < c.length; e++) move(c[e], t, r, o);1580          return void n(e.anchor, t, r)1581        }1582        if (i === Be) return void moveStaticNode(e, t, r);1583        if (2 !== o && 1 & u && l) if (0 === o) l.beforeEnter(a), n(a, t, r), Me((() => l.enter(a)), s); else {1584          const {leave: e, delayLeave: o, afterLeave: s} = l, remove3 = () => n(a, t, r), performLeave = () => {1585            e(a, (() => {1586              remove3(), s && s()1587            }))1588          };1589          o ? o(a, remove3, performLeave) : performLeave()1590        } else n(a, t, r)1591      }, unmount = (e, t, n, r = !1, o = !1) => {1592        const {type: s, props: a, ref: i, children: l, dynamicChildren: c, shapeFlag: u, patchFlag: f, dirs: p} = e;1593        if (null != i && setRef(i, null, n, e, !0), 256 & u) return void t.ctx.deactivate(e);1594        const d = 1 & u && p;1595        let m;1596        if ((m = a && a.onVnodeBeforeUnmount) && invokeVNodeHook(m, t, e), 6 & u) unmountComponent(e.component, n, r); else {1597          if (128 & u) return void e.suspense.unmount(n, r);1598          d && invokeDirectiveHook(e, null, t, "beforeUnmount"), 64 & u ? e.type.remove(e, t, n, o, R, r) : c && (s !== Le || f > 0 && 64 & f) ? unmountChildren(c, t, n, !1, !0) : (s === Le && (128 & f || 256 & f) || !o && 16 & u) && unmountChildren(l, t, n), r && remove2(e)1599        }1600        ((m = a && a.onVnodeUnmounted) || d) && Me((() => {1601          m && invokeVNodeHook(m, t, e), d && invokeDirectiveHook(e, null, t, "unmounted")1602        }), n)1603      }, remove2 = e => {1604        const {type: t, el: n, anchor: o, transition: s} = e;1605        if (t === Le) return void removeFragment(n, o);1606        if (t === Be) return void removeStaticNode(e);1607        const performRemove = () => {1608          r(n), s && !s.persisted && s.afterLeave && s.afterLeave()1609        };1610        if (1 & e.shapeFlag && s && !s.persisted) {1611          const {leave: t, delayLeave: r} = s, performLeave = () => t(n, performRemove);1612          r ? r(e.el, performRemove, performLeave) : performLeave()1613        } else performRemove()1614      }, removeFragment = (e, t) => {1615        let n;1616        for (; e !== t;) n = p(e), r(e), e = n;1617        r(t)1618      }, unmountComponent = (e, t, n) => {1619        const {bum: r, effects: o, update: s, subTree: a, um: i} = e;1620        if (r && invokeArrayFns(r), o) for (let l = 0; l < o.length; l++) stop(o[l]);1621        s && (stop(s), unmount(a, e, t, n)), i && Me(i, t), Me((() => {1622          e.isUnmounted = !01623        }), t), t && t.pendingBranch && !t.isUnmounted && e.asyncDep && !e.asyncResolved && e.suspenseId === t.pendingId && (t.deps--, 0 === t.deps && t.resolve())1624      }, unmountChildren = (e, t, n, r = !1, o = !1, s = 0) => {1625        for (let a = s; a < e.length; a++) unmount(e[a], t, n, r, o)1626      },1627      getNextHostNode = e => 6 & e.shapeFlag ? getNextHostNode(e.component.subTree) : 128 & e.shapeFlag ? e.suspense.next() : p(e.anchor || e.el),1628      render = (e, t, n) => {1629        null == e ? t._vnode && unmount(t._vnode, null, null, !0) : patch(t._vnode || null, e, t, null, null, null, n), flushPostFlushCbs(), t._vnode = e1630      }, R = {1631        p: patch,1632        um: unmount,1633        m: move,1634        r: remove2,1635        mt: mountComponent,1636        mc: mountChildren,1637        pc: patchChildren,1638        pbc: patchBlockChildren,1639        n: getNextHostNode,1640        o: e1641      };1642    let w, _;1643    t && ([w, _] = t(R));1644    return {render, hydrate: w, createApp: createAppAPI(render, w)}1645  }(e)1646}1647function invokeVNodeHook(e, t, n, r = null) {1648  callWithAsyncErrorHandling(e, t, 7, [n, r])1649}1650function traverseStaticChildren(e, t, n = !1) {1651  const r = e.children, o = t.children;1652  if (w(r) && w(o)) for (let s = 0; s < r.length; s++) {1653    const e = r[s];1654    let t = o[s];1655    1 & t.shapeFlag && !t.dynamicChildren && ((t.patchFlag <= 0 || 32 === t.patchFlag) && (t = o[s] = cloneIfMounted(o[s]), t.el = e.el), n || traverseStaticChildren(e, t))1656  }1657}1658function resolveComponent(e, t) {1659  return resolveAsset("components", e, !0, t) || e1660}1661const Fe = Symbol();1662function resolveAsset(e, t, n = !0, r = !1) {1663  const o = be || Ye;1664  if (o) {1665    const n = o.type;1666    if ("components" === e) {1667      const e = getComponentName(n);1668      if (e && (e === t || e === S(t) || e === A(S(t)))) return n1669    }...

index.147aad71.js

Source:index.147aad71.js

...2215    } else {2216      if (patchFlag > 0 && patchFlag & 64 && dynamicChildren) {2217        patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG);2218        if (n2.key != null || parentComponent && n2 === parentComponent.subTree) {2219          traverseStaticChildren(n1, n2, true);2220        }2221      } else {2222        patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);2223      }2224    }2225  };2226  const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2227    if (n1 == null) {2228      if (n2.shapeFlag & 512) {2229        parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized);2230      } else {2231        mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2232      }2233    } else {2234      updateComponent(n1, n2, optimized);2235    }2236  };2237  const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2238    const instance = initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense);2239    if (isKeepAlive(initialVNode)) {2240      instance.ctx.renderer = internals;2241    }2242    setupComponent(instance);2243    if (instance.asyncDep) {2244      parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect);2245      if (!initialVNode.el) {2246        const placeholder = instance.subTree = createVNode(Comment);2247        processCommentNode(null, placeholder, container, anchor);2248      }2249      return;2250    }2251    setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);2252  };2253  const updateComponent = (n1, n2, optimized) => {2254    const instance = n2.component = n1.component;2255    if (shouldUpdateComponent(n1, n2, optimized)) {2256      if (instance.asyncDep && !instance.asyncResolved) {2257        updateComponentPreRender(instance, n2, optimized);2258        return;2259      } else {2260        instance.next = n2;2261        invalidateJob(instance.update);2262        instance.update();2263      }2264    } else {2265      n2.component = n1.component;2266      n2.el = n1.el;2267      instance.vnode = n2;2268    }2269  };2270  const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {2271    instance.update = effect(function componentEffect() {2272      if (!instance.isMounted) {2273        let vnodeHook;2274        const {el, props} = initialVNode;2275        const {bm, m, parent} = instance;2276        if (bm) {2277          invokeArrayFns(bm);2278        }2279        if (vnodeHook = props && props.onVnodeBeforeMount) {2280          invokeVNodeHook(vnodeHook, parent, initialVNode);2281        }2282        const subTree = instance.subTree = renderComponentRoot(instance);2283        if (el && hydrateNode) {2284          hydrateNode(initialVNode.el, subTree, instance, parentSuspense);2285        } else {2286          patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);2287          initialVNode.el = subTree.el;2288        }2289        if (m) {2290          queuePostRenderEffect(m, parentSuspense);2291        }2292        if (vnodeHook = props && props.onVnodeMounted) {2293          queuePostRenderEffect(() => {2294            invokeVNodeHook(vnodeHook, parent, initialVNode);2295          }, parentSuspense);2296        }2297        const {a} = instance;2298        if (a && initialVNode.shapeFlag & 256) {2299          queuePostRenderEffect(a, parentSuspense);2300        }2301        instance.isMounted = true;2302      } else {2303        let {next, bu, u, parent, vnode} = instance;2304        let originNext = next;2305        let vnodeHook;2306        if (next) {2307          next.el = vnode.el;2308          updateComponentPreRender(instance, next, optimized);2309        } else {2310          next = vnode;2311        }2312        if (bu) {2313          invokeArrayFns(bu);2314        }2315        if (vnodeHook = next.props && next.props.onVnodeBeforeUpdate) {2316          invokeVNodeHook(vnodeHook, parent, next, vnode);2317        }2318        const nextTree = renderComponentRoot(instance);2319        const prevTree = instance.subTree;2320        instance.subTree = nextTree;2321        patch(prevTree, nextTree, hostParentNode(prevTree.el), getNextHostNode(prevTree), instance, parentSuspense, isSVG);2322        next.el = nextTree.el;2323        if (originNext === null) {2324          updateHOCHostEl(instance, nextTree.el);2325        }2326        if (u) {2327          queuePostRenderEffect(u, parentSuspense);2328        }2329        if (vnodeHook = next.props && next.props.onVnodeUpdated) {2330          queuePostRenderEffect(() => {2331            invokeVNodeHook(vnodeHook, parent, next, vnode);2332          }, parentSuspense);2333        }2334      }2335    }, prodEffectOptions);2336  };2337  const updateComponentPreRender = (instance, nextVNode, optimized) => {2338    nextVNode.component = instance;2339    const prevProps = instance.vnode.props;2340    instance.vnode = nextVNode;2341    instance.next = null;2342    updateProps(instance, nextVNode.props, prevProps, optimized);2343    updateSlots(instance, nextVNode.children);2344    flushPreFlushCbs(void 0, instance.update);2345  };2346  const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) => {2347    const c1 = n1 && n1.children;2348    const prevShapeFlag = n1 ? n1.shapeFlag : 0;2349    const c2 = n2.children;2350    const {patchFlag, shapeFlag} = n2;2351    if (patchFlag > 0) {2352      if (patchFlag & 128) {2353        patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2354        return;2355      } else if (patchFlag & 256) {2356        patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2357        return;2358      }2359    }2360    if (shapeFlag & 8) {2361      if (prevShapeFlag & 16) {2362        unmountChildren(c1, parentComponent, parentSuspense);2363      }2364      if (c2 !== c1) {2365        hostSetElementText(container, c2);2366      }2367    } else {2368      if (prevShapeFlag & 16) {2369        if (shapeFlag & 16) {2370          patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2371        } else {2372          unmountChildren(c1, parentComponent, parentSuspense, true);2373        }2374      } else {2375        if (prevShapeFlag & 8) {2376          hostSetElementText(container, "");2377        }2378        if (shapeFlag & 16) {2379          mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2380        }2381      }2382    }2383  };2384  const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2385    c1 = c1 || EMPTY_ARR;2386    c2 = c2 || EMPTY_ARR;2387    const oldLength = c1.length;2388    const newLength = c2.length;2389    const commonLength = Math.min(oldLength, newLength);2390    let i;2391    for (i = 0; i < commonLength; i++) {2392      const nextChild = c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]);2393      patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, optimized);2394    }2395    if (oldLength > newLength) {2396      unmountChildren(c1, parentComponent, parentSuspense, true, false, commonLength);2397    } else {2398      mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, commonLength);2399    }2400  };2401  const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) => {2402    let i = 0;2403    const l2 = c2.length;2404    let e1 = c1.length - 1;2405    let e2 = l2 - 1;2406    while (i <= e1 && i <= e2) {2407      const n1 = c1[i];2408      const n2 = c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]);2409      if (isSameVNodeType(n1, n2)) {2410        patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, optimized);2411      } else {2412        break;2413      }2414      i++;2415    }2416    while (i <= e1 && i <= e2) {2417      const n1 = c1[e1];2418      const n2 = c2[e2] = optimized ? cloneIfMounted(c2[e2]) : normalizeVNode(c2[e2]);2419      if (isSameVNodeType(n1, n2)) {2420        patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, optimized);2421      } else {2422        break;2423      }2424      e1--;2425      e2--;2426    }2427    if (i > e1) {2428      if (i <= e2) {2429        const nextPos = e2 + 1;2430        const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;2431        while (i <= e2) {2432          patch(null, c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]), container, anchor, parentComponent, parentSuspense, isSVG);2433          i++;2434        }2435      }2436    } else if (i > e2) {2437      while (i <= e1) {2438        unmount(c1[i], parentComponent, parentSuspense, true);2439        i++;2440      }2441    } else {2442      const s1 = i;2443      const s2 = i;2444      const keyToNewIndexMap = new Map();2445      for (i = s2; i <= e2; i++) {2446        const nextChild = c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]);2447        if (nextChild.key != null) {2448          keyToNewIndexMap.set(nextChild.key, i);2449        }2450      }2451      let j;2452      let patched = 0;2453      const toBePatched = e2 - s2 + 1;2454      let moved = false;2455      let maxNewIndexSoFar = 0;2456      const newIndexToOldIndexMap = new Array(toBePatched);2457      for (i = 0; i < toBePatched; i++)2458        newIndexToOldIndexMap[i] = 0;2459      for (i = s1; i <= e1; i++) {2460        const prevChild = c1[i];2461        if (patched >= toBePatched) {2462          unmount(prevChild, parentComponent, parentSuspense, true);2463          continue;2464        }2465        let newIndex;2466        if (prevChild.key != null) {2467          newIndex = keyToNewIndexMap.get(prevChild.key);2468        } else {2469          for (j = s2; j <= e2; j++) {2470            if (newIndexToOldIndexMap[j - s2] === 0 && isSameVNodeType(prevChild, c2[j])) {2471              newIndex = j;2472              break;2473            }2474          }2475        }2476        if (newIndex === void 0) {2477          unmount(prevChild, parentComponent, parentSuspense, true);2478        } else {2479          newIndexToOldIndexMap[newIndex - s2] = i + 1;2480          if (newIndex >= maxNewIndexSoFar) {2481            maxNewIndexSoFar = newIndex;2482          } else {2483            moved = true;2484          }2485          patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, optimized);2486          patched++;2487        }2488      }2489      const increasingNewIndexSequence = moved ? getSequence(newIndexToOldIndexMap) : EMPTY_ARR;2490      j = increasingNewIndexSequence.length - 1;2491      for (i = toBePatched - 1; i >= 0; i--) {2492        const nextIndex = s2 + i;2493        const nextChild = c2[nextIndex];2494        const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;2495        if (newIndexToOldIndexMap[i] === 0) {2496          patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG);2497        } else if (moved) {2498          if (j < 0 || i !== increasingNewIndexSequence[j]) {2499            move(nextChild, container, anchor, 2);2500          } else {2501            j--;2502          }2503        }2504      }2505    }2506  };2507  const move = (vnode, container, anchor, moveType, parentSuspense = null) => {2508    const {el, type, transition, children, shapeFlag} = vnode;2509    if (shapeFlag & 6) {2510      move(vnode.component.subTree, container, anchor, moveType);2511      return;2512    }2513    if (shapeFlag & 128) {2514      vnode.suspense.move(container, anchor, moveType);2515      return;2516    }2517    if (shapeFlag & 64) {2518      type.move(vnode, container, anchor, internals);2519      return;2520    }2521    if (type === Fragment) {2522      hostInsert(el, container, anchor);2523      for (let i = 0; i < children.length; i++) {2524        move(children[i], container, anchor, moveType);2525      }2526      hostInsert(vnode.anchor, container, anchor);2527      return;2528    }2529    const needTransition = moveType !== 2 && shapeFlag & 1 && transition;2530    if (needTransition) {2531      if (moveType === 0) {2532        transition.beforeEnter(el);2533        hostInsert(el, container, anchor);2534        queuePostRenderEffect(() => transition.enter(el), parentSuspense);2535      } else {2536        const {leave, delayLeave, afterLeave} = transition;2537        const remove3 = () => hostInsert(el, container, anchor);2538        const performLeave = () => {2539          leave(el, () => {2540            remove3();2541            afterLeave && afterLeave();2542          });2543        };2544        if (delayLeave) {2545          delayLeave(el, remove3, performLeave);2546        } else {2547          performLeave();2548        }2549      }2550    } else {2551      hostInsert(el, container, anchor);2552    }2553  };2554  const unmount = (vnode, parentComponent, parentSuspense, doRemove = false, optimized = false) => {2555    const {type, props, ref, children, dynamicChildren, shapeFlag, patchFlag, dirs} = vnode;2556    if (ref != null && parentComponent) {2557      setRef(ref, null, parentComponent, parentSuspense, null);2558    }2559    if (shapeFlag & 256) {2560      parentComponent.ctx.deactivate(vnode);2561      return;2562    }2563    const shouldInvokeDirs = shapeFlag & 1 && dirs;2564    let vnodeHook;2565    if (vnodeHook = props && props.onVnodeBeforeUnmount) {2566      invokeVNodeHook(vnodeHook, parentComponent, vnode);2567    }2568    if (shapeFlag & 6) {2569      unmountComponent(vnode.component, parentSuspense, doRemove);2570    } else {2571      if (shapeFlag & 128) {2572        vnode.suspense.unmount(parentSuspense, doRemove);2573        return;2574      }2575      if (shouldInvokeDirs) {2576        invokeDirectiveHook(vnode, null, parentComponent, "beforeUnmount");2577      }2578      if (dynamicChildren && (type !== Fragment || patchFlag > 0 && patchFlag & 64)) {2579        unmountChildren(dynamicChildren, parentComponent, parentSuspense, false, true);2580      } else if (type === Fragment && (patchFlag & 128 || patchFlag & 256) || !optimized && shapeFlag & 16) {2581        unmountChildren(children, parentComponent, parentSuspense);2582      }2583      if (shapeFlag & 64 && (doRemove || !isTeleportDisabled(vnode.props))) {2584        vnode.type.remove(vnode, internals);2585      }2586      if (doRemove) {2587        remove2(vnode);2588      }2589    }2590    if ((vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) {2591      queuePostRenderEffect(() => {2592        vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);2593        shouldInvokeDirs && invokeDirectiveHook(vnode, null, parentComponent, "unmounted");2594      }, parentSuspense);2595    }2596  };2597  const remove2 = (vnode) => {2598    const {type, el, anchor, transition} = vnode;2599    if (type === Fragment) {2600      removeFragment(el, anchor);2601      return;2602    }2603    const performRemove = () => {2604      hostRemove(el);2605      if (transition && !transition.persisted && transition.afterLeave) {2606        transition.afterLeave();2607      }2608    };2609    if (vnode.shapeFlag & 1 && transition && !transition.persisted) {2610      const {leave, delayLeave} = transition;2611      const performLeave = () => leave(el, performRemove);2612      if (delayLeave) {2613        delayLeave(vnode.el, performRemove, performLeave);2614      } else {2615        performLeave();2616      }2617    } else {2618      performRemove();2619    }2620  };2621  const removeFragment = (cur, end) => {2622    let next;2623    while (cur !== end) {2624      next = hostNextSibling(cur);2625      hostRemove(cur);2626      cur = next;2627    }2628    hostRemove(end);2629  };2630  const unmountComponent = (instance, parentSuspense, doRemove) => {2631    const {bum, effects, update, subTree, um} = instance;2632    if (bum) {2633      invokeArrayFns(bum);2634    }2635    if (effects) {2636      for (let i = 0; i < effects.length; i++) {2637        stop(effects[i]);2638      }2639    }2640    if (update) {2641      stop(update);2642      unmount(subTree, instance, parentSuspense, doRemove);2643    }2644    if (um) {2645      queuePostRenderEffect(um, parentSuspense);2646    }2647    queuePostRenderEffect(() => {2648      instance.isUnmounted = true;2649    }, parentSuspense);2650    if (parentSuspense && parentSuspense.pendingBranch && !parentSuspense.isUnmounted && instance.asyncDep && !instance.asyncResolved && instance.suspenseId === parentSuspense.pendingId) {2651      parentSuspense.deps--;2652      if (parentSuspense.deps === 0) {2653        parentSuspense.resolve();2654      }2655    }2656  };2657  const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, optimized = false, start = 0) => {2658    for (let i = start; i < children.length; i++) {2659      unmount(children[i], parentComponent, parentSuspense, doRemove, optimized);2660    }2661  };2662  const getNextHostNode = (vnode) => {2663    if (vnode.shapeFlag & 6) {2664      return getNextHostNode(vnode.component.subTree);2665    }2666    if (vnode.shapeFlag & 128) {2667      return vnode.suspense.next();2668    }2669    return hostNextSibling(vnode.anchor || vnode.el);2670  };2671  const render2 = (vnode, container) => {2672    if (vnode == null) {2673      if (container._vnode) {2674        unmount(container._vnode, null, null, true);2675      }2676    } else {2677      patch(container._vnode || null, vnode, container);2678    }2679    flushPostFlushCbs();2680    container._vnode = vnode;2681  };2682  const internals = {2683    p: patch,2684    um: unmount,2685    m: move,2686    r: remove2,2687    mt: mountComponent,2688    mc: mountChildren,2689    pc: patchChildren,2690    pbc: patchBlockChildren,2691    n: getNextHostNode,2692    o: options2693  };2694  let hydrate;2695  let hydrateNode;2696  if (createHydrationFns) {2697    [hydrate, hydrateNode] = createHydrationFns(internals);2698  }2699  return {2700    render: render2,2701    hydrate,2702    createApp: createAppAPI(render2, hydrate)2703  };2704}2705function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {2706  callWithAsyncErrorHandling(hook, instance, 7, [2707    vnode,2708    prevVNode2709  ]);2710}2711function traverseStaticChildren(n1, n2, shallow = false) {2712  const ch1 = n1.children;2713  const ch2 = n2.children;2714  if (isArray(ch1) && isArray(ch2)) {2715    for (let i = 0; i < ch1.length; i++) {2716      const c1 = ch1[i];2717      let c2 = ch2[i];2718      if (c2.shapeFlag & 1 && !c2.dynamicChildren) {2719        if (c2.patchFlag <= 0 || c2.patchFlag === 32) {2720          c2 = ch2[i] = cloneIfMounted(ch2[i]);2721          c2.el = c1.el;2722        }2723        if (!shallow)2724          traverseStaticChildren(c1, c2);2725      }2726    }2727  }2728}2729function getSequence(arr) {2730  const p2 = arr.slice();2731  const result = [0];2732  let i, j, u, v, c;2733  const len = arr.length;2734  for (i = 0; i < len; i++) {2735    const arrI = arr[i];2736    if (arrI !== 0) {2737      j = result[result.length - 1];2738      if (arr[j] < arrI) {...

render.js

Source:render.js

...567                    // a stable fragment (template root or <template v-for>) doesn't need to568                    // patch children order, but it may contain dynamicChildren.569                    patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG);570                    if ( parentComponent && parentComponent.type.__hmrId) {571                        traverseStaticChildren(n1, n2);572                    }573                    else if (574                    // #2080 if the stable fragment has a key, it's a <template v-for> that may575                    //  get moved around. Make sure all root level vnodes inherit el.576                    // #2134 or if it's a component root, it may also get moved around577                    // as the component is being moved.578                    n2.key != null ||579                        (parentComponent && n2 === parentComponent.subTree)) {580                        traverseStaticChildren(n1, n2, true /* shallow */);581                    }582                }583                else {584                    // keyed / unkeyed, or manual fragments.585                    // for keyed & unkeyed, since they are compiler generated from v-for,586                    // each child is guaranteed to be a block so the fragment will never587                    // have dynamicChildren.588                    patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);589                }590            }591        };592        const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {593            isSVG = isSVG || n2.type === 'svg';594            if (n1 == null) {595                mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);596            }597            else {598                patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized);599            }600        };601                const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {602                    let el;603                    let vnodeHook;604                    const { type, props, shapeFlag, transition, scopeId, patchFlag, dirs } = vnode;605                    {606                        el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is);607                        // mount children first, since some props may rely on child content608                        // being already rendered, e.g. `<select value>`609                        if (shapeFlag & 8 /* TEXT_CHILDREN */) {610                            hostSetElementText(el, vnode.children);611                        }612                        else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {613                            mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG && type !== 'foreignObject', optimized || !!vnode.dynamicChildren);614                        }615                        if (dirs) {616                            invokeDirectiveHook(vnode, null, parentComponent, 'created');617                        }618                        // props619                        if (props) {620                            for (const key in props) {621                                if (!isReservedProp(key)) {622                                    hostPatchProp(el, key, null, props[key], isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);623                                }624                            }625                            if ((vnodeHook = props.onVnodeBeforeMount)) {626                                invokeVNodeHook(vnodeHook, parentComponent, vnode);627                            }628                        }629                        // scopeId630                        setScopeId(el, scopeId, vnode, parentComponent);631                    }632                    {633                        Object.defineProperty(el, '__vnode', {634                            value: vnode,635                            enumerable: false636                        });637                        Object.defineProperty(el, '__vueParentComponent', {638                            value: parentComponent,639                            enumerable: false640                        });641                    }642                    if (dirs) {643                        invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount');644                    }645                    // #1583 For inside suspense + suspense not resolved case, enter hook should call when suspense resolved646                    // #1689 For inside suspense + suspense resolved case, just call it647                    const needCallTransitionHooks = (!parentSuspense || (parentSuspense && !parentSuspense.pendingBranch)) &&648                        transition &&649                        !transition.persisted;650                    if (needCallTransitionHooks) {651                        transition.beforeEnter(el);652                    }653                    hostInsert(el, container, anchor);654                    if ((vnodeHook = props && props.onVnodeMounted) ||655                        needCallTransitionHooks ||656                        dirs) {657                        queuePostRenderEffect(() => {658                            vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);659                            needCallTransitionHooks && transition.enter(el);660                            dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted');661                        }, parentSuspense);662                    }663                };664                const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, optimized) => {665                    const el = (n2.el = n1.el);666                    let { patchFlag, dynamicChildren, dirs } = n2;667                    // #1426 take the old vnode's patch flag into account since user may clone a668                    // compiler-generated vnode, which de-opts to FULL_PROPS669                    patchFlag |= n1.patchFlag & 16 /* FULL_PROPS */;670                    const oldProps = n1.props || EMPTY_OBJ;671                    const newProps = n2.props || EMPTY_OBJ;672                    let vnodeHook;673                    if ((vnodeHook = newProps.onVnodeBeforeUpdate)) {674                        invokeVNodeHook(vnodeHook, parentComponent, n2, n1);675                    }676                    if (dirs) {677                        invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate');678                    }679                    if ( isHmrUpdating) {680                        // HMR updated, force full diff681                        patchFlag = 0;682                        optimized = false;683                        dynamicChildren = null;684                    }685                    if (patchFlag > 0) {686                        // the presence of a patchFlag means this element's render code was687                        // generated by the compiler and can take the fast path.688                        // in this path old node and new node are guaranteed to have the same shape689                        // (i.e. at the exact same position in the source template)690                        if (patchFlag & 16 /* FULL_PROPS */) {691                            // element props contain dynamic keys, full diff needed692                            patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);693                        }694                        else {695                            // class696                            // this flag is matched when the element has dynamic class bindings.697                            if (patchFlag & 2 /* CLASS */) {698                                if (oldProps.class !== newProps.class) {699                                    hostPatchProp(el, 'class', null, newProps.class, isSVG);700                                }701                            }702                            // style703                            // this flag is matched when the element has dynamic style bindings704                            if (patchFlag & 4 /* STYLE */) {705                                hostPatchProp(el, 'style', oldProps.style, newProps.style, isSVG);706                            }707                            // props708                            // This flag is matched when the element has dynamic prop/attr bindings709                            // other than class and style. The keys of dynamic prop/attrs are saved for710                            // faster iteration.711                            // Note dynamic keys like :[foo]="bar" will cause this optimization to712                            // bail out and go through a full diff because we need to unset the old key713                            if (patchFlag & 8 /* PROPS */) {714                                // if the flag is present then dynamicProps must be non-null715                                const propsToUpdate = n2.dynamicProps;716                                for (let i = 0; i < propsToUpdate.length; i++) {717                                    const key = propsToUpdate[i];718                                    const prev = oldProps[key];719                                    const next = newProps[key];720                                    if (next !== prev ||721                                        (hostForcePatchProp && hostForcePatchProp(el, key))) {722                                        hostPatchProp(el, key, prev, next, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);723                                    }724                                }725                            }726                        }727                        // text728                        // This flag is matched when the element has only dynamic text children.729                        if (patchFlag & 1 /* TEXT */) {730                            if (n1.children !== n2.children) {731                                hostSetElementText(el, n2.children);732                            }733                        }734                    }735                    else if (!optimized && dynamicChildren == null) {736                        // unoptimized, full diff737                        patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);738                    }739                    const areChildrenSVG = isSVG && n2.type !== 'foreignObject';740                    if (dynamicChildren) {741                        patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG);742                        if ( parentComponent && parentComponent.type.__hmrId) {743                            traverseStaticChildren(n1, n2);744                        }745                    }746                    else if (!optimized) {747                        // full diff748                        patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG);749                    }750                    if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {751                        queuePostRenderEffect(() => {752                            vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);753                            dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated');754                        }, parentSuspense);755                    }756                };757        const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {...

note.js

Source:note.js

...621        const areChildrenSVG = isSVG && n2.type !== 'foreignObject';622        if (dynamicChildren) {623            patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG);624            if ( parentComponent && parentComponent.type.__hmrId) {625                traverseStaticChildren(n1, n2);626            }627        }628        else if (!optimized) {629            // full diff630            patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG);631        }632        if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {633            queuePostRenderEffect(() => {634                vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);635                dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated');636            }, parentSuspense);637        }638    };639    // The fast path for blocks.640    const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG) => {641        for (let i = 0; i < newChildren.length; i++) {642            const oldVNode = oldChildren[i];643            const newVNode = newChildren[i];644            // Determine the container (parent element) for the patch.645            const container = 646            // - In the case of a Fragment, we need to provide the actual parent647            // of the Fragment itself so it can move its children.648            oldVNode.type === Fragment ||649                // - In the case of different nodes, there is going to be a replacement650                // which also requires the correct parent container651                !isSameVNodeType(oldVNode, newVNode) ||652                // - In the case of a component, it could contain anything.653                oldVNode.shapeFlag & 6 /* COMPONENT */ ||654                oldVNode.shapeFlag & 64 /* TELEPORT */655                ? hostParentNode(oldVNode.el)656                : // In other cases, the parent container is not actually used so we657                    // just pass the block element here to avoid a DOM parentNode call.658                    fallbackContainer;659            patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, true);660        }661    };662    const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {663        if (oldProps !== newProps) {664            for (const key in newProps) {665                if (isReservedProp(key))666                    continue;667                const next = newProps[key];668                const prev = oldProps[key];669                if (next !== prev ||670                    (hostForcePatchProp && hostForcePatchProp(el, key))) {671                    hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);672                }673            }674            if (oldProps !== EMPTY_OBJ) {675                for (const key in oldProps) {676                    if (!isReservedProp(key) && !(key in newProps)) {677                        hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);678                    }679                }680            }681        }682    };683    const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {684        const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''));685        const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''));686        let { patchFlag, dynamicChildren } = n2;687        if (patchFlag > 0) {688            optimized = true;689        }690        if ( isHmrUpdating) {691            // HMR updated, force full diff692            patchFlag = 0;693            optimized = false;694            dynamicChildren = null;695        }696        if (n1 == null) {697            hostInsert(fragmentStartAnchor, container, anchor);698            hostInsert(fragmentEndAnchor, container, anchor);699            // a fragment can only have array children700            // since they are either generated by the compiler, or implicitly created701            // from arrays.702            mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);703        }704        else {705            if (patchFlag > 0 &&706                patchFlag & 64 /* STABLE_FRAGMENT */ &&707                dynamicChildren) {708                // a stable fragment (template root or <template v-for>) doesn't need to709                // patch children order, but it may contain dynamicChildren.710                patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG);711                if ( parentComponent && parentComponent.type.__hmrId) {712                    traverseStaticChildren(n1, n2);713                }714                else if (715                // #2080 if the stable fragment has a key, it's a <template v-for> that may716                //  get moved around. Make sure all root level vnodes inherit el.717                // #2134 or if it's a component root, it may also get moved around718                // as the component is being moved.719                n2.key != null ||720                    (parentComponent && n2 === parentComponent.subTree)) {721                    traverseStaticChildren(n1, n2, true /* shallow */);722                }723            }724            else {725                // keyed / unkeyed, or manual fragments.726                // for keyed & unkeyed, since they are compiler generated from v-for,727                // each child is guaranteed to be a block so the fragment will never728                // have dynamicChildren.729                patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);730            }731        }732    };733    const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {734        if (n1 == null) {735            if (n2.shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) {736                parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized);737            }738            else {739                mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);740            }741        }742        else {743            updateComponent(n1, n2, optimized);744        }745    };746    const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {747        const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense));748        if ( instance.type.__hmrId) {749            registerHMR(instance);750        }751        {752            pushWarningContext(initialVNode);753            startMeasure(instance, `mount`);754        }755        // inject renderer internals for keepAlive756        if (isKeepAlive(initialVNode)) {757            instance.ctx.renderer = internals;758        }759        // resolve props and slots for setup context760        {761            startMeasure(instance, `init`);762        }763        setupComponent(instance);764        {765            endMeasure(instance, `init`);766        }767        // setup() is async. This component relies on async logic to be resolved768        // before proceeding769        if ( instance.asyncDep) {770            parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect);771            // Give it a placeholder if this is not hydration772            // TODO handle self-defined fallback773            if (!initialVNode.el) {774                const placeholder = (instance.subTree = createVNode(Comment));775                processCommentNode(null, placeholder, container, anchor);776            }777            return;778        }779        setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);780        {781            popWarningContext();782            endMeasure(instance, `mount`);783        }784    };785    const updateComponent = (n1, n2, optimized) => {786        const instance = (n2.component = n1.component);787        if (shouldUpdateComponent(n1, n2, optimized)) {788            if (789                instance.asyncDep &&790                !instance.asyncResolved) {791                // async & still pending - just update props and slots792                // since the component's reactive effect for render isn't set-up yet793                {794                    pushWarningContext(n2);795                }796                updateComponentPreRender(instance, n2, optimized);797                {798                    popWarningContext();799                }800                return;801            }802            else {803                // normal update804                instance.next = n2;805                // in case the child component is also queued, remove it to avoid806                // double updating the same child component in the same flush.807                invalidateJob(instance.update);808                // instance.update is the reactive effect runner.809                instance.update();810            }811        }812        else {813            // no update needed. just copy over properties814            n2.component = n1.component;815            n2.el = n1.el;816            instance.vnode = n2;817        }818    };819    const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {820        // create reactive effect for rendering821        instance.update = effect(function componentEffect() {822            if (!instance.isMounted) {823                let vnodeHook;824                const { el, props } = initialVNode;825                const { bm, m, parent } = instance;826                // beforeMount hook827                if (bm) {828                    invokeArrayFns(bm);829                }830                // onVnodeBeforeMount831                if ((vnodeHook = props && props.onVnodeBeforeMount)) {832                    invokeVNodeHook(vnodeHook, parent, initialVNode);833                }834                // render835                {836                    startMeasure(instance, `render`);837                }838                const subTree = (instance.subTree = renderComponentRoot(instance));839                {840                    endMeasure(instance, `render`);841                }842                if (el && hydrateNode) {843                    {844                        startMeasure(instance, `hydrate`);845                    }846                    // vnode has adopted host node - perform hydration instead of mount.847                    hydrateNode(initialVNode.el, subTree, instance, parentSuspense);848                    {849                        endMeasure(instance, `hydrate`);850                    }851                }852                else {853                    {854                        startMeasure(instance, `patch`);855                    }856                    patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);857                    {858                        endMeasure(instance, `patch`);859                    }860                    initialVNode.el = subTree.el;861                }862                // mounted hook863                if (m) {864                    queuePostRenderEffect(m, parentSuspense);865                }866                // onVnodeMounted867                if ((vnodeHook = props && props.onVnodeMounted)) {868                    queuePostRenderEffect(() => {869                        invokeVNodeHook(vnodeHook, parent, initialVNode);870                    }, parentSuspense);871                }872                // activated hook for keep-alive roots.873                // #1742 activated hook must be accessed after first render874                // since the hook may be injected by a child keep-alive875                const { a } = instance;876                if (a &&877                    initialVNode.shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {878                    queuePostRenderEffect(a, parentSuspense);879                }880                instance.isMounted = true;881            }882            else {883                // updateComponent884                // This is triggered by mutation of component's own state (next: null)885                // OR parent calling processComponent (next: VNode)886                let { next, bu, u, parent, vnode } = instance;887                let originNext = next;888                let vnodeHook;889                {890                    pushWarningContext(next || instance.vnode);891                }892                if (next) {893                    updateComponentPreRender(instance, next, optimized);894                }895                else {896                    next = vnode;897                }898                next.el = vnode.el;899                // beforeUpdate hook900                if (bu) {901                    invokeArrayFns(bu);902                }903                // onVnodeBeforeUpdate904                if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {905                    invokeVNodeHook(vnodeHook, parent, next, vnode);906                }907                // render908                {909                    startMeasure(instance, `render`);910                }911                const nextTree = renderComponentRoot(instance);912                {913                    endMeasure(instance, `render`);914                }915                const prevTree = instance.subTree;916                instance.subTree = nextTree;917                // reset refs918                // only needed if previous patch had refs919                if (instance.refs !== EMPTY_OBJ) {920                    instance.refs = {};921                }922                {923                    startMeasure(instance, `patch`);924                }925                patch(prevTree, nextTree, 926                // parent may have changed if it's in a teleport927                hostParentNode(prevTree.el), 928                // anchor may have changed if it's in a fragment929                getNextHostNode(prevTree), instance, parentSuspense, isSVG);930                {931                    endMeasure(instance, `patch`);932                }933                next.el = nextTree.el;934                if (originNext === null) {935                    // self-triggered update. In case of HOC, update parent component936                    // vnode el. HOC is indicated by parent instance's subTree pointing937                    // to child component's vnode938                    updateHOCHostEl(instance, nextTree.el);939                }940                // updated hook941                if (u) {942                    queuePostRenderEffect(u, parentSuspense);943                }944                // onVnodeUpdated945                if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {946                    queuePostRenderEffect(() => {947                        invokeVNodeHook(vnodeHook, parent, next, vnode);948                    }, parentSuspense);949                }950                {951                    devtoolsComponentUpdated(instance);952                }953                {954                    popWarningContext();955                }956            }957        },  createDevEffectOptions(instance) );958    };959    const updateComponentPreRender = (instance, nextVNode, optimized) => {960        nextVNode.component = instance;961        const prevProps = instance.vnode.props;962        instance.vnode = nextVNode;963        instance.next = null;964        updateProps(instance, nextVNode.props, prevProps, optimized);965        updateSlots(instance, nextVNode.children);966        // props update may have triggered pre-flush watchers.967        // flush them before the render update.968        flushPreFlushCbs(undefined, instance.update);969    };970    const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) => {971        const c1 = n1 && n1.children;972        const prevShapeFlag = n1 ? n1.shapeFlag : 0;973        const c2 = n2.children;974        const { patchFlag, shapeFlag } = n2;975        // fast path976        if (patchFlag > 0) {977            if (patchFlag & 128 /* KEYED_FRAGMENT */) {978                // this could be either fully-keyed or mixed (some keyed some not)979                // presence of patchFlag means children are guaranteed to be arrays980                patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);981                return;982            }983            else if (patchFlag & 256 /* UNKEYED_FRAGMENT */) {984                // unkeyed985                patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);986                return;987            }988        }989        // children has 3 possibilities: text, array or no children.990        if (shapeFlag & 8 /* TEXT_CHILDREN */) {991            // text children fast path992            if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {993                unmountChildren(c1, parentComponent, parentSuspense);994            }995            if (c2 !== c1) {996                hostSetElementText(container, c2);997            }998        }999        else {1000            if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {1001                // prev children was array1002                if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1003                    // two arrays, cannot assume anything, do full diff1004                    patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1005                }1006                else {1007                    // no new children, just unmount old1008                    unmountChildren(c1, parentComponent, parentSuspense, true);1009                }1010            }1011            else {1012                // prev children was text OR null1013                // new children is array OR null1014                if (prevShapeFlag & 8 /* TEXT_CHILDREN */) {1015                    hostSetElementText(container, '');1016                }1017                // mount new if array1018                if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1019                    mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1020                }1021            }1022        }1023    };1024    const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {1025        c1 = c1 || EMPTY_ARR;1026        c2 = c2 || EMPTY_ARR;1027        const oldLength = c1.length;1028        const newLength = c2.length;1029        const commonLength = Math.min(oldLength, newLength);1030        let i;1031        for (i = 0; i < commonLength; i++) {1032            const nextChild = (c2[i] = optimized1033                ? cloneIfMounted(c2[i])1034                : normalizeVNode(c2[i]));1035            patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, optimized);1036        }1037        if (oldLength > newLength) {1038            // remove old1039            unmountChildren(c1, parentComponent, parentSuspense, true, commonLength);1040        }1041        else {1042            // mount new1043            mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, commonLength);1044        }1045    };1046    // can be all-keyed or mixed1047    const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) => {1048        let i = 0;1049        const l2 = c2.length;1050        let e1 = c1.length - 1; // prev ending index1051        let e2 = l2 - 1; // next ending index1052        // 1. sync from start1053        // (a b) c1054        // (a b) d e1055        while (i <= e1 && i <= e2) {1056            const n1 = c1[i];1057            const n2 = (c2[i] = optimized1058                ? cloneIfMounted(c2[i])1059                : normalizeVNode(c2[i]));1060            if (isSameVNodeType(n1, n2)) {1061                patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, optimized);1062            }1063            else {1064                break;1065            }1066            i++;1067        }1068        // 2. sync from end1069        // a (b c)1070        // d e (b c)1071        while (i <= e1 && i <= e2) {1072            const n1 = c1[e1];1073            const n2 = (c2[e2] = optimized1074                ? cloneIfMounted(c2[e2])1075                : normalizeVNode(c2[e2]));1076            if (isSameVNodeType(n1, n2)) {1077                patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, optimized);1078            }1079            else {1080                break;1081            }1082            e1--;1083            e2--;1084        }1085        // 3. common sequence + mount1086        // (a b)1087        // (a b) c1088        // i = 2, e1 = 1, e2 = 21089        // (a b)1090        // c (a b)1091        // i = 0, e1 = -1, e2 = 01092        if (i > e1) {1093            if (i <= e2) {1094                const nextPos = e2 + 1;1095                const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;1096                while (i <= e2) {1097                    patch(null, (c2[i] = optimized1098                        ? cloneIfMounted(c2[i])1099                        : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG);1100                    i++;1101                }1102            }1103        }1104        // 4. common sequence + unmount1105        // (a b) c1106        // (a b)1107        // i = 2, e1 = 2, e2 = 11108        // a (b c)1109        // (b c)1110        // i = 0, e1 = 0, e2 = -11111        else if (i > e2) {1112            while (i <= e1) {1113                unmount(c1[i], parentComponent, parentSuspense, true);1114                i++;1115            }1116        }1117        // 5. unknown sequence1118        // [i ... e1 + 1]: a b [c d e] f g1119        // [i ... e2 + 1]: a b [e d c h] f g1120        // i = 2, e1 = 4, e2 = 51121        else {1122            const s1 = i; // prev starting index1123            const s2 = i; // next starting index1124            // 5.1 build key:index map for newChildren1125            const keyToNewIndexMap = new Map();1126            for (i = s2; i <= e2; i++) {1127                const nextChild = (c2[i] = optimized1128                    ? cloneIfMounted(c2[i])1129                    : normalizeVNode(c2[i]));1130                if (nextChild.key != null) {1131                    if ( keyToNewIndexMap.has(nextChild.key)) {1132                        warn(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);1133                    }1134                    keyToNewIndexMap.set(nextChild.key, i);1135                }1136            }1137            // 5.2 loop through old children left to be patched and try to patch1138            // matching nodes & remove nodes that are no longer present1139            let j;1140            let patched = 0;1141            const toBePatched = e2 - s2 + 1;1142            let moved = false;1143            // used to track whether any node has moved1144            let maxNewIndexSoFar = 0;1145            // works as Map<newIndex, oldIndex>1146            // Note that oldIndex is offset by +11147            // and oldIndex = 0 is a special value indicating the new node has1148            // no corresponding old node.1149            // used for determining longest stable subsequence1150            const newIndexToOldIndexMap = new Array(toBePatched);1151            for (i = 0; i < toBePatched; i++)1152                newIndexToOldIndexMap[i] = 0;1153            for (i = s1; i <= e1; i++) {1154                const prevChild = c1[i];1155                if (patched >= toBePatched) {1156                    // all new children have been patched so this can only be a removal1157                    unmount(prevChild, parentComponent, parentSuspense, true);1158                    continue;1159                }1160                let newIndex;1161                if (prevChild.key != null) {1162                    newIndex = keyToNewIndexMap.get(prevChild.key);1163                }1164                else {1165                    // key-less node, try to locate a key-less node of the same type1166                    for (j = s2; j <= e2; j++) {1167                        if (newIndexToOldIndexMap[j - s2] === 0 &&1168                            isSameVNodeType(prevChild, c2[j])) {1169                            newIndex = j;1170                            break;1171                        }1172                    }1173                }1174                if (newIndex === undefined) {1175                    unmount(prevChild, parentComponent, parentSuspense, true);1176                }1177                else {1178                    newIndexToOldIndexMap[newIndex - s2] = i + 1;1179                    if (newIndex >= maxNewIndexSoFar) {1180                        maxNewIndexSoFar = newIndex;1181                    }1182                    else {1183                        moved = true;1184                    }1185                    patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, optimized);1186                    patched++;1187                }1188            }1189            // 5.3 move and mount1190            // generate longest stable subsequence only when nodes have moved1191            const increasingNewIndexSequence = moved1192                ? getSequence(newIndexToOldIndexMap)1193                : EMPTY_ARR;1194            j = increasingNewIndexSequence.length - 1;1195            // looping backwards so that we can use last patched node as anchor1196            for (i = toBePatched - 1; i >= 0; i--) {1197                const nextIndex = s2 + i;1198                const nextChild = c2[nextIndex];1199                const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;1200                if (newIndexToOldIndexMap[i] === 0) {1201                    // mount new1202                    patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG);1203                }1204                else if (moved) {1205                    // move if:1206                    // There is no stable subsequence (e.g. a reverse)1207                    // OR current node is not among the stable sequence1208                    if (j < 0 || i !== increasingNewIndexSequence[j]) {1209                        move(nextChild, container, anchor, 2 /* REORDER */);1210                    }1211                    else {1212                        j--;1213                    }1214                }1215            }1216        }1217    };1218    const move = (vnode, container, anchor, moveType, parentSuspense = null) => {1219        const { el, type, transition, children, shapeFlag } = vnode;1220        if (shapeFlag & 6 /* COMPONENT */) {1221            move(vnode.component.subTree, container, anchor, moveType);1222            return;1223        }1224        if ( shapeFlag & 128 /* SUSPENSE */) {1225            vnode.suspense.move(container, anchor, moveType);1226            return;1227        }1228        if (shapeFlag & 64 /* TELEPORT */) {1229            type.move(vnode, container, anchor, internals);1230            return;1231        }1232        if (type === Fragment) {1233            hostInsert(el, container, anchor);1234            for (let i = 0; i < children.length; i++) {1235                move(children[i], container, anchor, moveType);1236            }1237            hostInsert(vnode.anchor, container, anchor);1238            return;1239        }1240        // static node move can only happen when force updating HMR1241        if ( type === Static) {1242            moveStaticNode(vnode, container, anchor);1243            return;1244        }1245        // single nodes1246        const needTransition = moveType !== 2 /* REORDER */ &&1247            shapeFlag & 1 /* ELEMENT */ &&1248            transition;1249        if (needTransition) {1250            if (moveType === 0 /* ENTER */) {1251                transition.beforeEnter(el);1252                hostInsert(el, container, anchor);1253                queuePostRenderEffect(() => transition.enter(el), parentSuspense);1254            }1255            else {1256                const { leave, delayLeave, afterLeave } = transition;1257                const remove = () => hostInsert(el, container, anchor);1258                const performLeave = () => {1259                    leave(el, () => {1260                        remove();1261                        afterLeave && afterLeave();1262                    });1263                };1264                if (delayLeave) {1265                    delayLeave(el, remove, performLeave);1266                }1267                else {1268                    performLeave();1269                }1270            }1271        }1272        else {1273            hostInsert(el, container, anchor);1274        }1275    };1276    const unmount = (vnode, parentComponent, parentSuspense, doRemove = false) => {1277        const { type, props, ref, children, dynamicChildren, shapeFlag, patchFlag, dirs } = vnode;1278        // unset ref1279        if (ref != null && parentComponent) {1280            setRef(ref, null, parentComponent, parentSuspense, null);1281        }1282        if (shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {1283            parentComponent.ctx.deactivate(vnode);1284            return;1285        }1286        const shouldInvokeDirs = shapeFlag & 1 /* ELEMENT */ && dirs;1287        let vnodeHook;1288        if ((vnodeHook = props && props.onVnodeBeforeUnmount)) {1289            invokeVNodeHook(vnodeHook, parentComponent, vnode);1290        }1291        if (shapeFlag & 6 /* COMPONENT */) {1292            unmountComponent(vnode.component, parentSuspense, doRemove);1293        }1294        else {1295            if ( shapeFlag & 128 /* SUSPENSE */) {1296                vnode.suspense.unmount(parentSuspense, doRemove);1297                return;1298            }1299            if (shouldInvokeDirs) {1300                invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount');1301            }1302            if (dynamicChildren &&1303                // #1153: fast path should not be taken for non-stable (v-for) fragments1304                (type !== Fragment ||1305                    (patchFlag > 0 && patchFlag & 64 /* STABLE_FRAGMENT */))) {1306                // fast path for block nodes: only need to unmount dynamic children.1307                unmountChildren(dynamicChildren, parentComponent, parentSuspense);1308            }1309            else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1310                unmountChildren(children, parentComponent, parentSuspense);1311            }1312            // an unmounted teleport should always remove its children1313            if (shapeFlag & 64 /* TELEPORT */) {1314                vnode.type.remove(vnode, internals);1315            }1316            if (doRemove) {1317                remove(vnode);1318            }1319        }1320        if ((vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) {1321            queuePostRenderEffect(() => {1322                vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);1323                shouldInvokeDirs &&1324                    invokeDirectiveHook(vnode, null, parentComponent, 'unmounted');1325            }, parentSuspense);1326        }1327    };1328    const remove = vnode => {1329        const { type, el, anchor, transition } = vnode;1330        if (type === Fragment) {1331            removeFragment(el, anchor);1332            return;1333        }1334        if ( type === Static) {1335            removeStaticNode(vnode);1336            return;1337        }1338        const performRemove = () => {1339            hostRemove(el);1340            if (transition && !transition.persisted && transition.afterLeave) {1341                transition.afterLeave();1342            }1343        };1344        if (vnode.shapeFlag & 1 /* ELEMENT */ &&1345            transition &&1346            !transition.persisted) {1347            const { leave, delayLeave } = transition;1348            const performLeave = () => leave(el, performRemove);1349            if (delayLeave) {1350                delayLeave(vnode.el, performRemove, performLeave);1351            }1352            else {1353                performLeave();1354            }1355        }1356        else {1357            performRemove();1358        }1359    };1360    const removeFragment = (cur, end) => {1361        // For fragments, directly remove all contained DOM nodes.1362        // (fragment child nodes cannot have transition)1363        let next;1364        while (cur !== end) {1365            next = hostNextSibling(cur);1366            hostRemove(cur);1367            cur = next;1368        }1369        hostRemove(end);1370    };1371    const unmountComponent = (instance, parentSuspense, doRemove) => {1372        if ( instance.type.__hmrId) {1373            unregisterHMR(instance);1374        }1375        const { bum, effects, update, subTree, um } = instance;1376        // beforeUnmount hook1377        if (bum) {1378            invokeArrayFns(bum);1379        }1380        if (effects) {1381            for (let i = 0; i < effects.length; i++) {1382                stop(effects[i]);1383            }1384        }1385        // update may be null if a component is unmounted before its async1386        // setup has resolved.1387        if (update) {1388            stop(update);1389            unmount(subTree, instance, parentSuspense, doRemove);1390        }1391        // unmounted hook1392        if (um) {1393            queuePostRenderEffect(um, parentSuspense);1394        }1395        queuePostRenderEffect(() => {1396            instance.isUnmounted = true;1397        }, parentSuspense);1398        // A component with async dep inside a pending suspense is unmounted before1399        // its async dep resolves. This should remove the dep from the suspense, and1400        // cause the suspense to resolve immediately if that was the last dep.1401        if (1402            parentSuspense &&1403            parentSuspense.pendingBranch &&1404            !parentSuspense.isUnmounted &&1405            instance.asyncDep &&1406            !instance.asyncResolved &&1407            instance.suspenseId === parentSuspense.pendingId) {1408            parentSuspense.deps--;1409            if (parentSuspense.deps === 0) {1410                parentSuspense.resolve();1411            }1412        }1413        {1414            devtoolsComponentRemoved(instance);1415        }1416    };1417    const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, start = 0) => {1418        for (let i = start; i < children.length; i++) {1419            unmount(children[i], parentComponent, parentSuspense, doRemove);1420        }1421    };1422    const getNextHostNode = vnode => {1423        if (vnode.shapeFlag & 6 /* COMPONENT */) {1424            return getNextHostNode(vnode.component.subTree);1425        }1426        if ( vnode.shapeFlag & 128 /* SUSPENSE */) {1427            return vnode.suspense.next();1428        }1429        return hostNextSibling((vnode.anchor || vnode.el));1430    };1431    /**1432     * #11561433     * When a component is HMR-enabled, we need to make sure that all static nodes1434     * inside a block also inherit the DOM element from the previous tree so that1435     * HMR updates (which are full updates) can retrieve the element for patching.1436     *1437     * #20801438     * Inside keyed `template` fragment static children, if a fragment is moved,1439     * the children will always moved so that need inherit el form previous nodes1440     * to ensure correct moved position.1441     */1442    const traverseStaticChildren = (n1, n2, shallow = false) => {1443        const ch1 = n1.children;1444        const ch2 = n2.children;1445        if (isArray(ch1) && isArray(ch2)) {1446            for (let i = 0; i < ch1.length; i++) {1447                // this is only called in the optimized path so array children are1448                // guaranteed to be vnodes1449                const c1 = ch1[i];1450                const c2 = (ch2[i] = cloneIfMounted(ch2[i]));1451                if (c2.shapeFlag & 1 /* ELEMENT */ && !c2.dynamicChildren) {1452                    if (c2.patchFlag <= 0 || c2.patchFlag === 32 /* HYDRATE_EVENTS */) {1453                        c2.el = c1.el;1454                    }1455                    if (!shallow)1456                        traverseStaticChildren(c1, c2);1457                }1458                if ( c2.type === Comment) {1459                    c2.el = c1.el;1460                }1461            }1462        }1463    };1464    const render = (vnode, container) => {1465        if (vnode == null) {1466            if (container._vnode) {1467                unmount(container._vnode, null, null, true);1468            }1469        }1470        else {...

createApp.js

Source:createApp.js

...494        const areChildrenSVG = isSVG && n2.type !== 'foreignObject';495        if (dynamicChildren) {496            patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG);497            if ( parentComponent && parentComponent.type.__hmrId) {498                traverseStaticChildren(n1, n2);499            }500        }501        else if (!optimized) {502            // full diff503            patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG);504        }505        if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {506            queuePostRenderEffect(() => {507                vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);508                dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated');509            }, parentSuspense);510        }511    };512    // The fast path for blocks.513    const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG) => {514        for (let i = 0; i < newChildren.length; i++) {515            const oldVNode = oldChildren[i];516            const newVNode = newChildren[i];517            // Determine the container (parent element) for the patch.518            const container = 519            // - In the case of a Fragment, we need to provide the actual parent520            // of the Fragment itself so it can move its children.521            oldVNode.type === Fragment ||522                // - In the case of different nodes, there is going to be a replacement523                // which also requires the correct parent container524                !isSameVNodeType(oldVNode, newVNode) ||525                // - In the case of a component, it could contain anything.526                oldVNode.shapeFlag & 6 /* COMPONENT */ ||527                oldVNode.shapeFlag & 64 /* TELEPORT */528                ? hostParentNode(oldVNode.el)529                : // In other cases, the parent container is not actually used so we530                    // just pass the block element here to avoid a DOM parentNode call.531                    fallbackContainer;532            patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, true);533        }534    };535    const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {536        if (oldProps !== newProps) {537            for (const key in newProps) {538                if (isReservedProp(key))539                    continue;540                const next = newProps[key];541                const prev = oldProps[key];542                if (next !== prev ||543                    (hostForcePatchProp && hostForcePatchProp(el, key))) {544                    hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);545                }546            }547            if (oldProps !== EMPTY_OBJ) {548                for (const key in oldProps) {549                    if (!isReservedProp(key) && !(key in newProps)) {550                        hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);551                    }552                }553            }554        }555    };556    const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {557        const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''));558        const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''));559        let { patchFlag, dynamicChildren } = n2;560        if (patchFlag > 0) {561            optimized = true;562        }563        if ( isHmrUpdating) {564            // HMR updated, force full diff565            patchFlag = 0;566            optimized = false;567            dynamicChildren = null;568        }569        if (n1 == null) {570            hostInsert(fragmentStartAnchor, container, anchor);571            hostInsert(fragmentEndAnchor, container, anchor);572            // a fragment can only have array children573            // since they are either generated by the compiler, or implicitly created574            // from arrays.575            mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);576        }577        else {578            if (patchFlag > 0 &&579                patchFlag & 64 /* STABLE_FRAGMENT */ &&580                dynamicChildren) {581                // a stable fragment (template root or <template v-for>) doesn't need to582                // patch children order, but it may contain dynamicChildren.583                patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG);584                if ( parentComponent && parentComponent.type.__hmrId) {585                    traverseStaticChildren(n1, n2);586                }587                else if (588                // #2080 if the stable fragment has a key, it's a <template v-for> that may589                //  get moved around. Make sure all root level vnodes inherit el.590                // #2134 or if it's a component root, it may also get moved around591                // as the component is being moved.592                n2.key != null ||593                    (parentComponent && n2 === parentComponent.subTree)) {594                    traverseStaticChildren(n1, n2, true /* shallow */);595                }596            }597            else {598                // keyed / unkeyed, or manual fragments.599                // for keyed & unkeyed, since they are compiler generated from v-for,600                // each child is guaranteed to be a block so the fragment will never601                // have dynamicChildren.602                patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);603            }604        }605    };606    const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {607        if (n1 == null) {608            if (n2.shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) {609                parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized);610            }611            else {612                mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);613            }614        }615        else {616            updateComponent(n1, n2, optimized);617        }618    };619    const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {620        const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense));621        if ( instance.type.__hmrId) {622            registerHMR(instance);623        }624        {625            pushWarningContext(initialVNode);626            startMeasure(instance, `mount`);627        }628        // inject renderer internals for keepAlive629        if (isKeepAlive(initialVNode)) {630            instance.ctx.renderer = internals;631        }632        // resolve props and slots for setup context633        {634            startMeasure(instance, `init`);635        }636        setupComponent(instance);637        {638            endMeasure(instance, `init`);639        }640        // setup() is async. This component relies on async logic to be resolved641        // before proceeding642        if ( instance.asyncDep) {643            parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect);644            // Give it a placeholder if this is not hydration645            // TODO handle self-defined fallback646            if (!initialVNode.el) {647                const placeholder = (instance.subTree = createVNode(Comment));648                processCommentNode(null, placeholder, container, anchor);649            }650            return;651        }652        setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);653        {654            popWarningContext();655            endMeasure(instance, `mount`);656        }657    };658    const updateComponent = (n1, n2, optimized) => {659        const instance = (n2.component = n1.component);660        if (shouldUpdateComponent(n1, n2, optimized)) {661            if (662                instance.asyncDep &&663                !instance.asyncResolved) {664                // async & still pending - just update props and slots665                // since the component's reactive effect for render isn't set-up yet666                {667                    pushWarningContext(n2);668                }669                updateComponentPreRender(instance, n2, optimized);670                {671                    popWarningContext();672                }673                return;674            }675            else {676                // normal update677                instance.next = n2;678                // in case the child component is also queued, remove it to avoid679                // double updating the same child component in the same flush.680                invalidateJob(instance.update);681                // instance.update is the reactive effect runner.682                instance.update();683            }684        }685        else {686            // no update needed. just copy over properties687            n2.component = n1.component;688            n2.el = n1.el;689            instance.vnode = n2;690        }691    };692    const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {693        // create reactive effect for rendering694        instance.update = effect(function componentEffect() {695            if (!instance.isMounted) {696                let vnodeHook;697                const { el, props } = initialVNode;698                const { bm, m, parent } = instance;699                // beforeMount hook700                if (bm) {701                    invokeArrayFns(bm);702                }703                // onVnodeBeforeMount704                if ((vnodeHook = props && props.onVnodeBeforeMount)) {705                    invokeVNodeHook(vnodeHook, parent, initialVNode);706                }707                // render708                {709                    startMeasure(instance, `render`);710                }711                const subTree = (instance.subTree = renderComponentRoot(instance));712                {713                    endMeasure(instance, `render`);714                }715                if (el && hydrateNode) {716                    {717                        startMeasure(instance, `hydrate`);718                    }719                    // vnode has adopted host node - perform hydration instead of mount.720                    hydrateNode(initialVNode.el, subTree, instance, parentSuspense);721                    {722                        endMeasure(instance, `hydrate`);723                    }724                }725                else {726                    {727                        startMeasure(instance, `patch`);728                    }729                    patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);730                    {731                        endMeasure(instance, `patch`);732                    }733                    initialVNode.el = subTree.el;734                }735                // mounted hook736                if (m) {737                    queuePostRenderEffect(m, parentSuspense);738                }739                // onVnodeMounted740                if ((vnodeHook = props && props.onVnodeMounted)) {741                    queuePostRenderEffect(() => {742                        invokeVNodeHook(vnodeHook, parent, initialVNode);743                    }, parentSuspense);744                }745                // activated hook for keep-alive roots.746                // #1742 activated hook must be accessed after first render747                // since the hook may be injected by a child keep-alive748                const { a } = instance;749                if (a &&750                    initialVNode.shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {751                    queuePostRenderEffect(a, parentSuspense);752                }753                instance.isMounted = true;754            }755            else {756                // updateComponent757                // This is triggered by mutation of component's own state (next: null)758                // OR parent calling processComponent (next: VNode)759                let { next, bu, u, parent, vnode } = instance;760                let originNext = next;761                let vnodeHook;762                {763                    pushWarningContext(next || instance.vnode);764                }765                if (next) {766                    updateComponentPreRender(instance, next, optimized);767                }768                else {769                    next = vnode;770                }771                next.el = vnode.el;772                // beforeUpdate hook773                if (bu) {774                    invokeArrayFns(bu);775                }776                // onVnodeBeforeUpdate777                if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {778                    invokeVNodeHook(vnodeHook, parent, next, vnode);779                }780                // render781                {782                    startMeasure(instance, `render`);783                }784                const nextTree = renderComponentRoot(instance);785                {786                    endMeasure(instance, `render`);787                }788                const prevTree = instance.subTree;789                instance.subTree = nextTree;790                // reset refs791                // only needed if previous patch had refs792                if (instance.refs !== EMPTY_OBJ) {793                    instance.refs = {};794                }795                {796                    startMeasure(instance, `patch`);797                }798                patch(prevTree, nextTree, 799                // parent may have changed if it's in a teleport800                hostParentNode(prevTree.el), 801                // anchor may have changed if it's in a fragment802                getNextHostNode(prevTree), instance, parentSuspense, isSVG);803                {804                    endMeasure(instance, `patch`);805                }806                next.el = nextTree.el;807                if (originNext === null) {808                    // self-triggered update. In case of HOC, update parent component809                    // vnode el. HOC is indicated by parent instance's subTree pointing810                    // to child component's vnode811                    updateHOCHostEl(instance, nextTree.el);812                }813                // updated hook814                if (u) {815                    queuePostRenderEffect(u, parentSuspense);816                }817                // onVnodeUpdated818                if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {819                    queuePostRenderEffect(() => {820                        invokeVNodeHook(vnodeHook, parent, next, vnode);821                    }, parentSuspense);822                }823                {824                    devtoolsComponentUpdated(instance);825                }826                {827                    popWarningContext();828                }829            }830        },  createDevEffectOptions(instance) );831    };832    const updateComponentPreRender = (instance, nextVNode, optimized) => {833        nextVNode.component = instance;834        const prevProps = instance.vnode.props;835        instance.vnode = nextVNode;836        instance.next = null;837        updateProps(instance, nextVNode.props, prevProps, optimized);838        updateSlots(instance, nextVNode.children);839        // props update may have triggered pre-flush watchers.840        // flush them before the render update.841        flushPreFlushCbs(undefined, instance.update);842    };843    const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) => {844        const c1 = n1 && n1.children;845        const prevShapeFlag = n1 ? n1.shapeFlag : 0;846        const c2 = n2.children;847        const { patchFlag, shapeFlag } = n2;848        // fast path849        if (patchFlag > 0) {850            if (patchFlag & 128 /* KEYED_FRAGMENT */) {851                // this could be either fully-keyed or mixed (some keyed some not)852                // presence of patchFlag means children are guaranteed to be arrays853                patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);854                return;855            }856            else if (patchFlag & 256 /* UNKEYED_FRAGMENT */) {857                // unkeyed858                patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);859                return;860            }861        }862        // children has 3 possibilities: text, array or no children.863        if (shapeFlag & 8 /* TEXT_CHILDREN */) {864            // text children fast path865            if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {866                unmountChildren(c1, parentComponent, parentSuspense);867            }868            if (c2 !== c1) {869                hostSetElementText(container, c2);870            }871        }872        else {873            if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {874                // prev children was array875                if (shapeFlag & 16 /* ARRAY_CHILDREN */) {876                    // two arrays, cannot assume anything, do full diff877                    patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);878                }879                else {880                    // no new children, just unmount old881                    unmountChildren(c1, parentComponent, parentSuspense, true);882                }883            }884            else {885                // prev children was text OR null886                // new children is array OR null887                if (prevShapeFlag & 8 /* TEXT_CHILDREN */) {888                    hostSetElementText(container, '');889                }890                // mount new if array891                if (shapeFlag & 16 /* ARRAY_CHILDREN */) {892                    mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);893                }894            }895        }896    };897    const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {898        c1 = c1 || EMPTY_ARR;899        c2 = c2 || EMPTY_ARR;900        const oldLength = c1.length;901        const newLength = c2.length;902        const commonLength = Math.min(oldLength, newLength);903        let i;904        for (i = 0; i < commonLength; i++) {905            const nextChild = (c2[i] = optimized906                ? cloneIfMounted(c2[i])907                : normalizeVNode(c2[i]));908            patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, optimized);909        }910        if (oldLength > newLength) {911            // remove old912            unmountChildren(c1, parentComponent, parentSuspense, true, commonLength);913        }914        else {915            // mount new916            mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, commonLength);917        }918    };919    // can be all-keyed or mixed920    const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) => {921        let i = 0;922        const l2 = c2.length;923        let e1 = c1.length - 1; // prev ending index924        let e2 = l2 - 1; // next ending index925        // 1. sync from start926        // (a b) c927        // (a b) d e928        while (i <= e1 && i <= e2) {929            const n1 = c1[i];930            const n2 = (c2[i] = optimized931                ? cloneIfMounted(c2[i])932                : normalizeVNode(c2[i]));933            if (isSameVNodeType(n1, n2)) {934                patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, optimized);935            }936            else {937                break;938            }939            i++;940        }941        // 2. sync from end942        // a (b c)943        // d e (b c)944        while (i <= e1 && i <= e2) {945            const n1 = c1[e1];946            const n2 = (c2[e2] = optimized947                ? cloneIfMounted(c2[e2])948                : normalizeVNode(c2[e2]));949            if (isSameVNodeType(n1, n2)) {950                patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, optimized);951            }952            else {953                break;954            }955            e1--;956            e2--;957        }958        // 3. common sequence + mount959        // (a b)960        // (a b) c961        // i = 2, e1 = 1, e2 = 2962        // (a b)963        // c (a b)964        // i = 0, e1 = -1, e2 = 0965        if (i > e1) {966            if (i <= e2) {967                const nextPos = e2 + 1;968                const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;969                while (i <= e2) {970                    patch(null, (c2[i] = optimized971                        ? cloneIfMounted(c2[i])972                        : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG);973                    i++;974                }975            }976        }977        // 4. common sequence + unmount978        // (a b) c979        // (a b)980        // i = 2, e1 = 2, e2 = 1981        // a (b c)982        // (b c)983        // i = 0, e1 = 0, e2 = -1984        else if (i > e2) {985            while (i <= e1) {986                unmount(c1[i], parentComponent, parentSuspense, true);987                i++;988            }989        }990        // 5. unknown sequence991        // [i ... e1 + 1]: a b [c d e] f g992        // [i ... e2 + 1]: a b [e d c h] f g993        // i = 2, e1 = 4, e2 = 5994        else {995            const s1 = i; // prev starting index996            const s2 = i; // next starting index997            // 5.1 build key:index map for newChildren998            const keyToNewIndexMap = new Map();999            for (i = s2; i <= e2; i++) {1000                const nextChild = (c2[i] = optimized1001                    ? cloneIfMounted(c2[i])1002                    : normalizeVNode(c2[i]));1003                if (nextChild.key != null) {1004                    if ( keyToNewIndexMap.has(nextChild.key)) {1005                        warn(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);1006                    }1007                    keyToNewIndexMap.set(nextChild.key, i);1008                }1009            }1010            // 5.2 loop through old children left to be patched and try to patch1011            // matching nodes & remove nodes that are no longer present1012            let j;1013            let patched = 0;1014            const toBePatched = e2 - s2 + 1;1015            let moved = false;1016            // used to track whether any node has moved1017            let maxNewIndexSoFar = 0;1018            // works as Map<newIndex, oldIndex>1019            // Note that oldIndex is offset by +11020            // and oldIndex = 0 is a special value indicating the new node has1021            // no corresponding old node.1022            // used for determining longest stable subsequence1023            const newIndexToOldIndexMap = new Array(toBePatched);1024            for (i = 0; i < toBePatched; i++)1025                newIndexToOldIndexMap[i] = 0;1026            for (i = s1; i <= e1; i++) {1027                const prevChild = c1[i];1028                if (patched >= toBePatched) {1029                    // all new children have been patched so this can only be a removal1030                    unmount(prevChild, parentComponent, parentSuspense, true);1031                    continue;1032                }1033                let newIndex;1034                if (prevChild.key != null) {1035                    newIndex = keyToNewIndexMap.get(prevChild.key);1036                }1037                else {1038                    // key-less node, try to locate a key-less node of the same type1039                    for (j = s2; j <= e2; j++) {1040                        if (newIndexToOldIndexMap[j - s2] === 0 &&1041                            isSameVNodeType(prevChild, c2[j])) {1042                            newIndex = j;1043                            break;1044                        }1045                    }1046                }1047                if (newIndex === undefined) {1048                    unmount(prevChild, parentComponent, parentSuspense, true);1049                }1050                else {1051                    newIndexToOldIndexMap[newIndex - s2] = i + 1;1052                    if (newIndex >= maxNewIndexSoFar) {1053                        maxNewIndexSoFar = newIndex;1054                    }1055                    else {1056                        moved = true;1057                    }1058                    patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, optimized);1059                    patched++;1060                }1061            }1062            // 5.3 move and mount1063            // generate longest stable subsequence only when nodes have moved1064            const increasingNewIndexSequence = moved1065                ? getSequence(newIndexToOldIndexMap)1066                : EMPTY_ARR;1067            j = increasingNewIndexSequence.length - 1;1068            // looping backwards so that we can use last patched node as anchor1069            for (i = toBePatched - 1; i >= 0; i--) {1070                const nextIndex = s2 + i;1071                const nextChild = c2[nextIndex];1072                const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;1073                if (newIndexToOldIndexMap[i] === 0) {1074                    // mount new1075                    patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG);1076                }1077                else if (moved) {1078                    // move if:1079                    // There is no stable subsequence (e.g. a reverse)1080                    // OR current node is not among the stable sequence1081                    if (j < 0 || i !== increasingNewIndexSequence[j]) {1082                        move(nextChild, container, anchor, 2 /* REORDER */);1083                    }1084                    else {1085                        j--;1086                    }1087                }1088            }1089        }1090    };1091    const move = (vnode, container, anchor, moveType, parentSuspense = null) => {1092        const { el, type, transition, children, shapeFlag } = vnode;1093        if (shapeFlag & 6 /* COMPONENT */) {1094            move(vnode.component.subTree, container, anchor, moveType);1095            return;1096        }1097        if ( shapeFlag & 128 /* SUSPENSE */) {1098            vnode.suspense.move(container, anchor, moveType);1099            return;1100        }1101        if (shapeFlag & 64 /* TELEPORT */) {1102            type.move(vnode, container, anchor, internals);1103            return;1104        }1105        if (type === Fragment) {1106            hostInsert(el, container, anchor);1107            for (let i = 0; i < children.length; i++) {1108                move(children[i], container, anchor, moveType);1109            }1110            hostInsert(vnode.anchor, container, anchor);1111            return;1112        }1113        // static node move can only happen when force updating HMR1114        if ( type === Static) {1115            moveStaticNode(vnode, container, anchor);1116            return;1117        }1118        // single nodes1119        const needTransition = moveType !== 2 /* REORDER */ &&1120            shapeFlag & 1 /* ELEMENT */ &&1121            transition;1122        if (needTransition) {1123            if (moveType === 0 /* ENTER */) {1124                transition.beforeEnter(el);1125                hostInsert(el, container, anchor);1126                queuePostRenderEffect(() => transition.enter(el), parentSuspense);1127            }1128            else {1129                const { leave, delayLeave, afterLeave } = transition;1130                const remove = () => hostInsert(el, container, anchor);1131                const performLeave = () => {1132                    leave(el, () => {1133                        remove();1134                        afterLeave && afterLeave();1135                    });1136                };1137                if (delayLeave) {1138                    delayLeave(el, remove, performLeave);1139                }1140                else {1141                    performLeave();1142                }1143            }1144        }1145        else {1146            hostInsert(el, container, anchor);1147        }1148    };1149    const unmount = (vnode, parentComponent, parentSuspense, doRemove = false) => {1150        const { type, props, ref, children, dynamicChildren, shapeFlag, patchFlag, dirs } = vnode;1151        // unset ref1152        if (ref != null && parentComponent) {1153            setRef(ref, null, parentComponent, parentSuspense, null);1154        }1155        if (shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {1156            parentComponent.ctx.deactivate(vnode);1157            return;1158        }1159        const shouldInvokeDirs = shapeFlag & 1 /* ELEMENT */ && dirs;1160        let vnodeHook;1161        if ((vnodeHook = props && props.onVnodeBeforeUnmount)) {1162            invokeVNodeHook(vnodeHook, parentComponent, vnode);1163        }1164        if (shapeFlag & 6 /* COMPONENT */) {1165            unmountComponent(vnode.component, parentSuspense, doRemove);1166        }1167        else {1168            if ( shapeFlag & 128 /* SUSPENSE */) {1169                vnode.suspense.unmount(parentSuspense, doRemove);1170                return;1171            }1172            if (shouldInvokeDirs) {1173                invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount');1174            }1175            if (dynamicChildren &&1176                // #1153: fast path should not be taken for non-stable (v-for) fragments1177                (type !== Fragment ||1178                    (patchFlag > 0 && patchFlag & 64 /* STABLE_FRAGMENT */))) {1179                // fast path for block nodes: only need to unmount dynamic children.1180                unmountChildren(dynamicChildren, parentComponent, parentSuspense);1181            }1182            else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1183                unmountChildren(children, parentComponent, parentSuspense);1184            }1185            // an unmounted teleport should always remove its children1186            if (shapeFlag & 64 /* TELEPORT */) {1187                vnode.type.remove(vnode, internals);1188            }1189            if (doRemove) {1190                remove(vnode);1191            }1192        }1193        if ((vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) {1194            queuePostRenderEffect(() => {1195                vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);1196                shouldInvokeDirs &&1197                    invokeDirectiveHook(vnode, null, parentComponent, 'unmounted');1198            }, parentSuspense);1199        }1200    };1201    const remove = vnode => {1202        const { type, el, anchor, transition } = vnode;1203        if (type === Fragment) {1204            removeFragment(el, anchor);1205            return;1206        }1207        if ( type === Static) {1208            removeStaticNode(vnode);1209            return;1210        }1211        const performRemove = () => {1212            hostRemove(el);1213            if (transition && !transition.persisted && transition.afterLeave) {1214                transition.afterLeave();1215            }1216        };1217        if (vnode.shapeFlag & 1 /* ELEMENT */ &&1218            transition &&1219            !transition.persisted) {1220            const { leave, delayLeave } = transition;1221            const performLeave = () => leave(el, performRemove);1222            if (delayLeave) {1223                delayLeave(vnode.el, performRemove, performLeave);1224            }1225            else {1226                performLeave();1227            }1228        }1229        else {1230            performRemove();1231        }1232    };1233    const removeFragment = (cur, end) => {1234        // For fragments, directly remove all contained DOM nodes.1235        // (fragment child nodes cannot have transition)1236        let next;1237        while (cur !== end) {1238            next = hostNextSibling(cur);1239            hostRemove(cur);1240            cur = next;1241        }1242        hostRemove(end);1243    };1244    const unmountComponent = (instance, parentSuspense, doRemove) => {1245        if ( instance.type.__hmrId) {1246            unregisterHMR(instance);1247        }1248        const { bum, effects, update, subTree, um } = instance;1249        // beforeUnmount hook1250        if (bum) {1251            invokeArrayFns(bum);1252        }1253        if (effects) {1254            for (let i = 0; i < effects.length; i++) {1255                stop(effects[i]);1256            }1257        }1258        // update may be null if a component is unmounted before its async1259        // setup has resolved.1260        if (update) {1261            stop(update);1262            unmount(subTree, instance, parentSuspense, doRemove);1263        }1264        // unmounted hook1265        if (um) {1266            queuePostRenderEffect(um, parentSuspense);1267        }1268        queuePostRenderEffect(() => {1269            instance.isUnmounted = true;1270        }, parentSuspense);1271        // A component with async dep inside a pending suspense is unmounted before1272        // its async dep resolves. This should remove the dep from the suspense, and1273        // cause the suspense to resolve immediately if that was the last dep.1274        if (1275            parentSuspense &&1276            parentSuspense.pendingBranch &&1277            !parentSuspense.isUnmounted &&1278            instance.asyncDep &&1279            !instance.asyncResolved &&1280            instance.suspenseId === parentSuspense.pendingId) {1281            parentSuspense.deps--;1282            if (parentSuspense.deps === 0) {1283                parentSuspense.resolve();1284            }1285        }1286        {1287            devtoolsComponentRemoved(instance);1288        }1289    };1290    const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, start = 0) => {1291        for (let i = start; i < children.length; i++) {1292            unmount(children[i], parentComponent, parentSuspense, doRemove);1293        }1294    };1295    const getNextHostNode = vnode => {1296        if (vnode.shapeFlag & 6 /* COMPONENT */) {1297            return getNextHostNode(vnode.component.subTree);1298        }1299        if ( vnode.shapeFlag & 128 /* SUSPENSE */) {1300            return vnode.suspense.next();1301        }1302        return hostNextSibling((vnode.anchor || vnode.el));1303    };1304    /**1305     * #11561306     * When a component is HMR-enabled, we need to make sure that all static nodes1307     * inside a block also inherit the DOM element from the previous tree so that1308     * HMR updates (which are full updates) can retrieve the element for patching.1309     *1310     * #20801311     * Inside keyed `template` fragment static children, if a fragment is moved,1312     * the children will always moved so that need inherit el form previous nodes1313     * to ensure correct moved position.1314     */1315    const traverseStaticChildren = (n1, n2, shallow = false) => {1316        const ch1 = n1.children;1317        const ch2 = n2.children;1318        if (isArray(ch1) && isArray(ch2)) {1319            for (let i = 0; i < ch1.length; i++) {1320                // this is only called in the optimized path so array children are1321                // guaranteed to be vnodes1322                const c1 = ch1[i];1323                const c2 = (ch2[i] = cloneIfMounted(ch2[i]));1324                if (c2.shapeFlag & 1 /* ELEMENT */ && !c2.dynamicChildren) {1325                    if (c2.patchFlag <= 0 || c2.patchFlag === 32 /* HYDRATE_EVENTS */) {1326                        c2.el = c1.el;1327                    }1328                    if (!shallow)1329                        traverseStaticChildren(c1, c2);1330                }1331                if ( c2.type === Comment) {1332                    c2.el = c1.el;1333                }1334            }1335        }1336    };1337    const render = (vnode, container) => {1338        if (vnode == null) {1339            if (container._vnode) {1340                unmount(container._vnode, null, null, true);1341            }1342        }1343        else {...

renderer.js

Source:renderer.js

...608        if (609          n2.key != null ||610          (parentComponent && n2 === parentComponent.subTree)611        ) {612          traverseStaticChildren(n1, n2, true)613        }614      } else {615        patchChildren(616          n1,617          n2,618          container,619          fragmentEndAnchor,620          parentComponent,621          parentSuspense,622          isSVG,623          slotScopeIds624        )625      }626    }627  }628  const processComponent = (629    n1,630    n2,631    container,632    anchor,633    parentComponent,634    parentSuspense,635    isSVG,636    slotScopeIds637  ) => {638    n2.slotScopeIds = slotScopeIds639    if (n1 == null) {640      if (n2.shapeFlag & 512) {641        parentComponent.ctx.activate(n2, container, anchor, isSVG)642      } else {643        mountComponent(644          n2,645          container,646          anchor,647          parentComponent,648          parentSuspense,649          isSVG650        )651      }652    } else {653      updateComponent(n1, n2)654    }655  }656  const mountComponent = (657    initialVNode,658    container,659    anchor,660    parentComponent,661    parentSuspense,662    isSVG663  ) => {664    // åå»ºç»ä»¶å®ä¾665    const instance = (initialVNode.component = createComponentInstance(666      initialVNode,667      parentComponent,668      parentSuspense669    ))670    if (isKeepAlive(initialVNode)) {671      instance.ctx.renderer = internals672    }673    setupComponent(instance)674    if (instance.asyncDep) {675      parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect)676      if (!initialVNode.el) {677        const placeholder = (instance.subTree = createVNode(Comment))678        processCommentNode(null, placeholder, container, anchor)679      }680      return681    }682    setupRenderEffect(683      instance,684      initialVNode,685      container,686      anchor,687      parentSuspense,688      isSVG689    )690  }691  const updateComponent = (n1, n2) => {692    const instance = (n2.component = n1.component)693    if (shouldUpdateComponent(n1, n2)) {694      if (instance.asyncDep && !instance.asyncResolved) {695        updateComponentPreRender(instance, n2)696        return697      } else {698        instance.next = n2699        invalidateJob(instance.update)700        instance.update()701      }702    } else {703      n2.component = n1.component704      n2.el = n1.el705      instance.vnode = n2706    }707  }708  const setupRenderEffect = (709    instance,710    initialVNode,711    container,712    anchor,713    parentSuspense,714    isSVG715  ) => {716    // ç»ä»¶æ´æ°å½æ°717    const componentUpdateFn = () => {718      // ç»ä»¶æ¯å¦æè½½719      if (!instance.isMounted) {720        // åæ¬¡æè½½721        let vnodeHook722        const { props } = initialVNode723        const { bm, m, parent } = instance724        const isAsyncWrapperVNode = isAsyncWrapper(initialVNode)725        toggleRecurse(instance, false)726        if (bm) {727          invokeArrayFns(bm)728        }729        if (730          !isAsyncWrapperVNode &&731          (vnodeHook = props && props.onVnodeBeforeMount)732        ) {733          invokeVNodeHook(vnodeHook, parent, initialVNode)734        }735        toggleRecurse(instance, true)736        const subTree = (instance.subTree = renderComponentRoot(instance))737        patch(null, subTree, container, anchor, instance, parentSuspense, isSVG)738        initialVNode.el = subTree.el739        if (m) {740          queuePostRenderEffect(m, parentSuspense)741        }742        if (743          !isAsyncWrapperVNode &&744          (vnodeHook = props && props.onVnodeMounted)745        ) {746          const scopedInitialVNode = initialVNode747          queuePostRenderEffect(748            () => invokeVNodeHook(vnodeHook, parent, scopedInitialVNode),749            parentSuspense750          )751        }752        if (initialVNode.shapeFlag & 256) {753          instance.a && queuePostRenderEffect(instance.a, parentSuspense)754        }755        instance.isMounted = true756        initialVNode = container = anchor = null757      } else {758        // ç»ä»¶æ´æ°759        let { next, bu, u, parent, vnode } = instance760        let originNext = next761        let vnodeHook762        toggleRecurse(instance, false)763        if (next) {764          next.el = vnode.el765          updateComponentPreRender(instance, next)766        } else {767          next = vnode768        }769        if (bu) {770          invokeArrayFns(bu)771        }772        if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {773          invokeVNodeHook(vnodeHook, parent, next, vnode)774        }775        toggleRecurse(instance, true)776        const nextTree = renderComponentRoot(instance)777        const prevTree = instance.subTree778        instance.subTree = nextTree779        patch(780          prevTree,781          nextTree,782          hostParentNode(prevTree.el),783          getNextHostNode(prevTree),784          instance,785          parentSuspense,786          isSVG787        )788        next.el = nextTree.el789        if (originNext === null) {790          updateHOCHostEl(instance, nextTree.el)791        }792        if (u) {793          queuePostRenderEffect(u, parentSuspense)794        }795        if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {796          queuePostRenderEffect(797            () => invokeVNodeHook(vnodeHook, parent, next, vnode),798            parentSuspense799          )800        }801      }802    }803    const effect = (instance.effect = new ReactiveEffect(804      componentUpdateFn,805      () => queueJob(instance.update),806      instance.scope807    ))808    const update = (instance.update = effect.run.bind(effect))809    update.id = instance.uid810    toggleRecurse(instance, true)811    update()812  }813  const updateComponentPreRender = (instance, nextVNode) => {814    nextVNode.component = instance815    const prevProps = instance.vnode.props816    instance.vnode = nextVNode817    instance.next = null818    updateProps(instance, nextVNode.props, prevProps)819    updateSlots(instance, nextVNode.children)820    pauseTracking()821    flushPreFlushCbs(undefined, instance.update)822    resetTracking()823  }824  const patchChildren = (825    n1,826    n2,827    container,828    anchor,829    parentComponent,830    parentSuspense,831    isSVG,832    slotScopeIds833  ) => {834    const c1 = n1 && n1.children835    const prevShapeFlag = n1 ? n1.shapeFlag : 0836    const c2 = n2.children837    const { patchFlag, shapeFlag } = n2838    if (patchFlag > 0) {839      if (patchFlag & 128) {840        patchKeyedChildren(841          c1,842          c2,843          container,844          anchor,845          parentComponent,846          parentSuspense,847          isSVG,848          slotScopeIds849        )850        return851      } else if (patchFlag & 256) {852        patchUnkeyedChildren(853          c1,854          c2,855          container,856          anchor,857          parentComponent,858          parentSuspense,859          isSVG,860          slotScopeIds861        )862        return863      }864    }865    if (shapeFlag & 8) {866      if (prevShapeFlag & 16) {867        unmountChildren(c1, parentComponent, parentSuspense)868      }869      if (c2 !== c1) {870        hostSetElementText(container, c2)871      }872    } else {873      if (prevShapeFlag & 16) {874        if (shapeFlag & 16) {875          patchKeyedChildren(876            c1,877            c2,878            container,879            anchor,880            parentComponent,881            parentSuspense,882            isSVG,883            slotScopeIds884          )885        } else {886          unmountChildren(c1, parentComponent, parentSuspense, true)887        }888      } else {889        if (prevShapeFlag & 8) {890          hostSetElementText(container, '')891        }892        if (shapeFlag & 16) {893          mountChildren(894            c2,895            container,896            anchor,897            parentComponent,898            parentSuspense,899            isSVG,900            slotScopeIds901          )902        }903      }904    }905  }906  const patchUnkeyedChildren = (907    c1,908    c2,909    container,910    anchor,911    parentComponent,912    parentSuspense,913    isSVG,914    slotScopeIds915  ) => {916    c1 = c1 || EMPTY_ARR917    c2 = c2 || EMPTY_ARR918    const oldLength = c1.length919    const newLength = c2.length920    const commonLength = Math.min(oldLength, newLength)921    let i922    for (i = 0; i < commonLength; i++) {923      const nextChild = (c2[i] = normalizeVNode(c2[i]))924      patch(925        c1[i],926        nextChild,927        container,928        null,929        parentComponent,930        parentSuspense,931        isSVG,932        slotScopeIds933      )934    }935    if (oldLength > newLength) {936      unmountChildren(c1, parentComponent, parentSuspense, true, commonLength)937    } else {938      mountChildren(939        c2,940        container,941        anchor,942        parentComponent,943        parentSuspense,944        isSVG,945        slotScopeIds,946        commonLength947      )948    }949  }950  const patchKeyedChildren = (951    c1,952    c2,953    container,954    parentAnchor,955    parentComponent,956    parentSuspense,957    isSVG,958    slotScopeIds959  ) => {960    let i = 0961    const l2 = c2.length962    let e1 = c1.length - 1963    let e2 = l2 - 1964    while (i <= e1 && i <= e2) {965      const n1 = c1[i]966      const n2 = (c2[i] = normalizeVNode(c2[i]))967      if (isSameVNodeType(n1, n2)) {968        patch(969          n1,970          n2,971          container,972          null,973          parentComponent,974          parentSuspense,975          isSVG,976          slotScopeIds977        )978      } else {979        break980      }981      i++982    }983    while (i <= e1 && i <= e2) {984      const n1 = c1[e1]985      const n2 = (c2[e2] = normalizeVNode(c2[e2]))986      if (isSameVNodeType(n1, n2)) {987        patch(988          n1,989          n2,990          container,991          null,992          parentComponent,993          parentSuspense,994          isSVG,995          slotScopeIds996        )997      } else {998        break999      }1000      e1--1001      e2--1002    }1003    if (i > e1) {1004      if (i <= e2) {1005        const nextPos = e2 + 11006        const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor1007        while (i <= e2) {1008          patch(1009            null,1010            (c2[i] = normalizeVNode(c2[i])),1011            container,1012            anchor,1013            parentComponent,1014            parentSuspense,1015            isSVG,1016            slotScopeIds1017          )1018          i++1019        }1020      }1021    } else if (i > e2) {1022      while (i <= e1) {1023        unmount(c1[i], parentComponent, parentSuspense, true)1024        i++1025      }1026    } else {1027      const s1 = i1028      const s2 = i1029      const keyToNewIndexMap = new Map()1030      for (i = s2; i <= e2; i++) {1031        const nextChild = (c2[i] = normalizeVNode(c2[i]))1032        if (nextChild.key != null) {1033          keyToNewIndexMap.set(nextChild.key, i)1034        }1035      }1036      let j1037      let patched = 01038      const toBePatched = e2 - s2 + 11039      let moved = false1040      let maxNewIndexSoFar = 01041      const newIndexToOldIndexMap = new Array(toBePatched)1042      for (i = 0; i < toBePatched; i++) newIndexToOldIndexMap[i] = 01043      for (i = s1; i <= e1; i++) {1044        const prevChild = c1[i]1045        if (patched >= toBePatched) {1046          unmount(prevChild, parentComponent, parentSuspense, true)1047          continue1048        }1049        let newIndex1050        if (prevChild.key != null) {1051          newIndex = keyToNewIndexMap.get(prevChild.key)1052        } else {1053          for (j = s2; j <= e2; j++) {1054            if (1055              newIndexToOldIndexMap[j - s2] === 0 &&1056              isSameVNodeType(prevChild, c2[j])1057            ) {1058              newIndex = j1059              break1060            }1061          }1062        }1063        if (newIndex === undefined) {1064          unmount(prevChild, parentComponent, parentSuspense, true)1065        } else {1066          newIndexToOldIndexMap[newIndex - s2] = i + 11067          if (newIndex >= maxNewIndexSoFar) {1068            maxNewIndexSoFar = newIndex1069          } else {1070            moved = true1071          }1072          patch(1073            prevChild,1074            c2[newIndex],1075            container,1076            null,1077            parentComponent,1078            parentSuspense,1079            isSVG,1080            slotScopeIds1081          )1082          patched++1083        }1084      }1085      const increasingNewIndexSequence = moved1086        ? getSequence(newIndexToOldIndexMap)1087        : EMPTY_ARR1088      j = increasingNewIndexSequence.length - 11089      for (i = toBePatched - 1; i >= 0; i--) {1090        const nextIndex = s2 + i1091        const nextChild = c2[nextIndex]1092        const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor1093        if (newIndexToOldIndexMap[i] === 0) {1094          patch(1095            null,1096            nextChild,1097            container,1098            anchor,1099            parentComponent,1100            parentSuspense,1101            isSVG,1102            slotScopeIds1103          )1104        } else if (moved) {1105          if (j < 0 || i !== increasingNewIndexSequence[j]) {1106            move(nextChild, container, anchor, 2)1107          } else {1108            j--1109          }1110        }1111      }1112    }1113  }1114  const move = (vnode, container, anchor, moveType, parentSuspense = null) => {1115    const { el, type, transition, children, shapeFlag } = vnode1116    if (shapeFlag & 6) {1117      move(vnode.component.subTree, container, anchor, moveType)1118      return1119    }1120    if (shapeFlag & 128) {1121      vnode.suspense.move(container, anchor, moveType)1122      return1123    }1124    if (shapeFlag & 64) {1125      type.move(vnode, container, anchor, internals)1126      return1127    }1128    if (type === Fragment) {1129      hostInsert(el, container, anchor)1130      for (let i = 0; i < children.length; i++) {1131        move(children[i], container, anchor, moveType)1132      }1133      hostInsert(vnode.anchor, container, anchor)1134      return1135    }1136    if (type === Static) {1137      moveStaticNode(vnode, container, anchor)1138      return1139    }1140    const needTransition = moveType !== 2 && shapeFlag & 1 && transition1141    if (needTransition) {1142      if (moveType === 0) {1143        transition.beforeEnter(el)1144        hostInsert(el, container, anchor)1145        queuePostRenderEffect(() => transition.enter(el), parentSuspense)1146      } else {1147        const { leave, delayLeave, afterLeave } = transition1148        const remove = () => hostInsert(el, container, anchor)1149        const performLeave = () => {1150          leave(el, () => {1151            remove()1152            afterLeave && afterLeave()1153          })1154        }1155        if (delayLeave) {1156          delayLeave(el, remove, performLeave)1157        } else {1158          performLeave()1159        }1160      }1161    } else {1162      hostInsert(el, container, anchor)1163    }1164  }1165  const unmount = (1166    vnode,1167    parentComponent,1168    parentSuspense,1169    doRemove = false1170  ) => {1171    const {1172      type,1173      props,1174      ref,1175      children,1176      dynamicChildren,1177      shapeFlag,1178      patchFlag,1179      dirs1180    } = vnode1181    if (ref != null) {1182      setRef(ref, null, parentSuspense, vnode, true)1183    }1184    if (shapeFlag & 256) {1185      parentComponent.ctx.deactivate(vnode)1186      return1187    }1188    const shouldInvokeDirs = shapeFlag & 1 && dirs1189    const shouldInvokeVnodeHook = !isAsyncWrapper(vnode)1190    let vnodeHook1191    if (1192      shouldInvokeVnodeHook &&1193      (vnodeHook = props && props.onVnodeBeforeUnmount)1194    ) {1195      invokeVNodeHook(vnodeHook, parentComponent, vnode)1196    }1197    if (shapeFlag & 6) {1198      unmountComponent(vnode.component, parentSuspense, doRemove)1199    } else {1200      if (shapeFlag & 128) {1201        vnode.suspense.unmount(parentSuspense, doRemove)1202        return1203      }1204      if (shouldInvokeDirs) {1205        invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount')1206      }1207      if (shapeFlag & 64) {1208        vnode.type.remove(1209          vnode,1210          parentComponent,1211          parentSuspense,1212          internals,1213          doRemove1214        )1215      } else if (1216        dynamicChildren &&1217        (type !== Fragment || (patchFlag > 0 && patchFlag & 64))1218      ) {1219        unmountChildren(dynamicChildren, parentComponent, parentSuspense, false)1220      } else if (1221        (type === Fragment && patchFlag & (128 | 256)) ||1222        shapeFlag & 161223      ) {1224        unmountChildren(children, parentComponent, parentSuspense)1225      }1226      if (doRemove) {1227        remove(vnode)1228      }1229    }1230    if (1231      (shouldInvokeVnodeHook &&1232        (vnodeHook = props && props.onVnodeUnmounted)) ||1233      shouldInvokeDirs1234    ) {1235      queuePostRenderEffect(() => {1236        vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode)1237        shouldInvokeDirs &&1238          invokeDirectiveHook(vnode, null, parentComponent, 'unmounted')1239      }, parentSuspense)1240    }1241  }1242  const remove = vnode => {1243    const { type, el, anchor, transition } = vnode1244    if (type === Fragment) {1245      removeFragment(el, anchor)1246      return1247    }1248    if (type === Static) {1249      removeStaticNode(vnode)1250      return1251    }1252    const performRemove = () => {1253      hostRemove(el)1254      if (transition && !transition.persisted && transition.afterLeave) {1255        transition.afterLeave()1256      }1257    }1258    if (vnode.shapeFlag & 1 && transition && !transition.persisted) {1259      const { leave, delayLeave } = transition1260      const performLeave = () => leave(el, performRemove)1261      if (delayLeave) {1262        delayLeave(vnode.el, performRemove, performLeave)1263      } else {1264        performLeave()1265      }1266    } else {1267      performRemove()1268    }1269  }1270  const removeFragment = (cur, end) => {1271    let next1272    while (cur !== end) {1273      next = hostNextSibling(cur)1274      hostRemove(cur)1275      cur = next1276    }1277    hostRemove(end)1278  }1279  const unmountComponent = (instance, parentSuspense, doRemove) => {1280    const { bum, scope, update, subTree, um } = instance1281    if (bum) {1282      // console.log('bum:ç»ä»¶å¸è½½å')1283      invokeArrayFns(bum)1284    }1285    // æ¸é¤ååºå¼ææ1286    scope.stop()1287    if (update) {1288      update.active = false1289      unmount(subTree, instance, parentSuspense, doRemove)1290    }1291    if (um) {1292      queuePostRenderEffect(um, parentSuspense)1293    }1294    queuePostRenderEffect(() => {1295      instance.isUnmounted = true1296    }, parentSuspense)1297    if (1298      parentSuspense &&1299      parentSuspense.pendingBranch &&1300      !parentSuspense.isUnmounted &&1301      instance.asyncDep &&1302      !instance.asyncResolved &&1303      instance.suspenseId === parentSuspense.pendingId1304    ) {1305      parentSuspense.deps--1306      if (parentSuspense.deps === 0) {1307        parentSuspense.resolve()1308      }1309    }1310  }1311  const unmountChildren = (1312    children,1313    parentComponent,1314    parentSuspense,1315    doRemove = false,1316    start = 01317  ) => {1318    for (let i = start; i < children.length; i++) {1319      unmount(children[i], parentComponent, parentSuspense, doRemove)1320    }1321  }1322  const getNextHostNode = vnode => {1323    if (vnode.shapeFlag & 6) {1324      return getNextHostNode(vnode.component.subTree)1325    }1326    if (vnode.shapeFlag & 128) {1327      return vnode.suspense.next()1328    }1329    return hostNextSibling(vnode.anchor || vnode.el)1330  }1331  const render = (vnode, container, isSVG) => {1332    if (vnode == null) {1333      if (container._vnode) {1334        unmount(container._vnode, null, null, true)1335      }1336    } else {1337      patch(container._vnode || null, vnode, container, null, null, null, isSVG)1338    }1339    flushPostFlushCbs()1340    container._vnode = vnode1341  }1342  const internals = {1343    p: patch,1344    um: unmount,1345    m: move,1346    r: remove,1347    mt: mountComponent,1348    mc: mountChildren,1349    pc: patchChildren,1350    pbc: patchBlockChildren,1351    n: getNextHostNode,1352    o: options1353  }1354  return {1355    render,1356    createApp: createAppAPI(render)1357  }1358}1359function toggleRecurse ({ effect, update }, allowed) {1360  effect.allowRecurse = update.allowRecurse = allowed1361}1362export function traverseStaticChildren (n1, n2, shallow = false) {1363  const ch1 = n1.children1364  const ch2 = n2.children1365  if (isArray(ch1) && isArray(ch2)) {1366    for (let i = 0; i < ch1.length; i++) {1367      const c1 = ch1[i]1368      let c2 = ch2[i]1369      if (c2.shapeFlag & 1 && !c2.dynamicChildren) {1370        if (c2.patchFlag <= 0 || c2.patchFlag === 32) {1371          c2 = ch2[i] = cloneIfMounted(ch2[i])1372          c2.el = c1.el1373        }1374        if (!shallow) traverseStaticChildren(c1, c2)1375      }1376    }1377  }1378}1379function getSequence (arr) {1380  const p = arr.slice()1381  const result = [0]1382  let i, j, u, v, c1383  const len = arr.length1384  for (i = 0; i < len; i++) {1385    const arrI = arr[i]1386    if (arrI !== 0) {1387      j = result[result.length - 1]1388      if (arr[j] < arrI) {...

stable_fragment.js

Source:stable_fragment.js

...49            // a stable fragment (template root or <template v-for>) doesn't need to50            // patch children order, but it may contain dynamicChildren.51            patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG);52            if ( parentComponent && parentComponent.type.__hmrId) {53                traverseStaticChildren(n1, n2);54            }55            else if (56            // #2080 if the stable fragment has a key, it's a <template v-for> that may57            //  get moved around. Make sure all root level vnodes inherit el.58            // #2134 or if it's a component root, it may also get moved around59            // as the component is being moved.60            n2.key != null ||61                (parentComponent && n2 === parentComponent.subTree)) {62                traverseStaticChildren(n1, n2, true /* shallow */);63            }64        }65        else {66            // keyed / unkeyed, or manual fragments.67            // for keyed & unkeyed, since they are compiler generated from v-for,68            // each child is guaranteed to be a block so the fragment will never69            // have dynamicChildren.70            patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);71        }72    }73};74const unmount = (vnode, parentComponent, parentSuspense, doRemove = false) => {75    const { type, props, ref, children, dynamicChildren, shapeFlag, patchFlag, dirs } = vnode;76    // unset ref...

Using AI Code Generation

1const { traverseStaticChildren } = require('@playwright/test/lib/server/frames');2const { Frame } = require('@playwright/test/lib/server/frames');3const { Page } = require('@playwright/test/lib/server/page');4const { ElementHandle } = require('@playwright/test/lib/server/dom');5const { JSHandle } = require('@playwright/test/lib/server/jsHandle');6const { serializeResult } = require('@playwright/test/lib/server/serializers');7const { helper } = require('@playwright/test/lib/server/helper');8const { assert } = require('@playwright/test/lib/utils/utils');9const { ElementHandleChannel } = require('@playwright/test/lib/server/channels');10const { ElementHandleDispatcher } = require('@playwright/test/lib/server/dispatchers/elementHandlerDispatcher');11const { FrameDispatcher } = require('@playwright/test/lib/server/dispatchers/frameDispatcher');12const { PageDispatcher } = require('@playwright/test/lib/server/dispatchers/pageDispatcher');13const { FrameChannel } = require('@playwright/test/lib/server/channels');14const { PageChannel } = require('@playwright/test/lib/server/channels');15const { JSHandleChannel } = require('@playwright/test/lib/server/channels');16const { JSHandleDispatcher } = require('@playwright/test/lib/server/dispatchers/jsHandleDispatcher');17const { serializeAsCallArgument } = require('@playwright/test/lib/server/serializers');18const { parseEvaluationResultValue } = require('@playwright/test/lib/server/serializers');19const { DispatcherScope } = require('@playwright/test/lib/server/dispatchers/dispatcher');20const { DispatcherConnection } = require('@playwright/test/lib/server/dispatchers/dispatcher');21const { createGuid } = require('@playwright/test/lib/utils/utils');22const { ChannelOwner } = require('@playwright/test/lib/server/channelOwner');23const { Channel } = require('@playwright/test/lib/server/channelOwner');24const { createHandle } = require('@playwright/test/lib/server/frames');25const { createJSHandle } = require('@playwright/test/lib/server/frames');26const { CallMetadata } = require('@playwright/test/lib/server/frames');27const { parseSelector } = require('@playwright/test/lib/server/selectors');28const { parseSelectorV1 } = require('@playwright/test/lib/server/selectors');29const { parseSelectorV2 } = require('@playwright/test/lib/server/selectors');30const { parseSelector

Using AI Code Generation

1const { traverseStaticChildren } = require('playwright/lib/server/dom.js');2const { Page } = require('playwright/lib/server/page.js');3const { ElementHandle } = require('playwright/lib/server/dom.js');4const { JSHandle } = require('playwright/lib/server/jsHandle.js');5const { CDPSession } = require('playwright/lib/server/cdpsession.js');6const { Protocol } = require('playwright/lib/server/protocol.js');7const { assert } = require('playwright/lib/server/helper.js');8const { chromium } = require('playwright');9(async () => {10  const browser = await chromium.launch();11  const page = await browser.newPage();12  await page.screenshot({ path: 'google.png' });13  await browser.close();14})();15const { traverseStaticChildren } = require('playwright/lib/server/dom.js');16const { Page } = require('playwright/lib/server/page.js');17const { ElementHandle } = require('playwright/lib/server/dom.js');18const { JSHandle } = require('playwright/lib/server/jsHandle.js');19const { CDPSession } = require('playwright/lib/server/cdpsession.js');20const { Protocol } = require('playwright/lib/server/protocol.js');21const { assert } = require('playwright/lib/server/helper.js');22const { chromium } = require('playwright');23(async () => {24  const browser = await chromium.launch();25  const page = await browser.newPage();26  await page.screenshot({ path: 'google.png' });27  await browser.close();28})();29const { traverseStaticChildren } = require('playwright/lib/server/dom.js');30const { Page } = require('playwright/lib/server/page.js');31const { ElementHandle } = require('playwright/lib/server/dom.js');32const { JSHandle } = require('playwright/lib/server/jsHandle.js');33const { CDPSession } = require('playwright/lib/server/cdpsession.js');34const { Protocol } = require('playwright/lib/server/protocol.js');35const { assert } = require('playwright/lib/server/helper.js');36const { chromium } = require('playwright');

Using AI Code Generation

1const { traverseStaticChildren } = require('@playwright/test/lib/server/frames');2const { test } = require('@playwright/test');3test('test', async ({ page }) => {4  const children = traverseStaticChildren(page.mainFrame());5  console.log(children);6});

Using AI Code Generation

1const { traverseStaticChildren } = require('playwright/lib/server/frames');2const { Frame } = require('playwright/lib/server/chromium/crPage');3const { Page } = require('playwright/lib/server/page');4const page = await browser.newPage();5const frame = await page.mainFrame();6const elementHandle = await frame.$('input[name="q"]');7const element = await elementHandle.asElement();8const result = traverseStaticChildren(element, (node) => {9    if (node.nodeType === Node.ELEMENT_NODE) {10        if (node.nodeName === 'INPUT') {11            return true;12        }13    }14    return false;15});16console.log(result);17const { traverseStaticChildren } = require('playwright/lib/server/frames');18const { Frame } = require('playwright/lib/server/chromium/crPage');19const { Page } = require('playwright/lib/server/page');20const page = await browser.newPage();21const frame = await page.mainFrame();22const elementHandle = await frame.$('input[name="q"]');23const element = await elementHandle.asElement();24const result = traverseStaticChildren(element, (node) => {25    if (node.nodeType === Node.ELEMENT_NODE) {26        if (node.nodeName === 'INPUT') {27            return true;28        }29    }30    return false;31});32console.log(result);33const { traverseStaticChildren } = require('playwright/lib/server/frames');34const { Frame } = require('playwright/lib/server/chromium/crPage');35const { Page } = require('playwright/lib/server/page');36const page = await browser.newPage();37const frame = await page.mainFrame();38const elementHandle = await frame.$('input[name="q"]');39const element = await elementHandle.asElement();40const result = traverseStaticChildren(element, (node) => {41    if (node.nodeType === Node.ELEMENT_NODE) {42        if (node.nodeName === 'INPUT') {43            return true;44        }45    }46    return false;47});48console.log(result);49const { traverseStaticChildren } = require('playwright/lib/server/frames');50const { Frame } = require('playwright/lib/server/chromium/crPage');51const {

Using AI Code Generation

1const { traverseStaticChildren } = require('playwright/lib/server/dom.js');2const { parse } = require('playwright/lib/server/frames.js');3`;4const document = parse(html);5traverseStaticChildren(document.body, node => {6  if (node.nodeName === '#text')7    console.log(node.textContent);8});

Using AI Code Generation

1const { traverseStaticChildren } = require('playwright/lib/client/selectorEngine.js');2</div>`;3const root = document.createElement('div');4root.innerHTML = html;5document.body.appendChild(root);6const selector = 'div >> css=span';7const elements = traverseStaticChildren(document, selector);8console.log(elements.length);

Using AI Code Generation

1const { chromium } = require('playwright');2const { traverseStaticChildren } = require('playwright/lib/server/dom.js');3(async () => {4    const browser = await chromium.launch();5    const context = await browser.newContext();6    const page = await context.newPage();7    const root = await page._delegate._document;8    traverseStaticChildren(root, node => {9        console.log(node.nodeName);10    });11    await browser.close();12})();

Using AI Code Generation

1const {chromium, devices} = require('playwright');2const fs = require('fs');3(async () => {4  const browser = await chromium.launch({headless: false});5  const page = await browser.newPage();6  await page.waitForTimeout(3000);7  const result = await page.evaluate(() => {8    const traverseStaticChildren = window['playwright'].traverseStaticChildren;9    let result = [];10    traverseStaticChildren(document, node => {11      if (node.nodeType === Node.ELEMENT_NODE)12        result.push(node);13    });14    return result;15  });16  console.log(result);17  fs.writeFileSync('dom.json', JSON.stringify(result));18  await browser.close();19})();

Using AI Code Generation

1const { traverseStaticChildren } = require('playwright/lib/server/dom');2const { parseSelector } = require('playwright/lib/server/common/selectors');3const { ElementHandle } = require('playwright/lib/server/dom');4const { JSHandle } = require('playwright/lib/server/jsHandle');5const { Page } = require('playwright/lib/server/page');6const { Frame } = require('playwright/lib/server/frame');7const page = new Page(null, null, null, null);8const frame = new Frame(page, null, null, null, null);9const elementHandle = new ElementHandle(frame, null, null, null);10const jsHandle = new JSHandle(elementHandle, null);11const selector = parseSelector('div');12const result = traverseStaticChildren(jsHandle, selector);13console.log(result);14const { traverseStaticChildren } = require('playwright/lib/server/dom');15const { parseSelector } = require('playwright/lib/server/common/selectors');16const { ElementHandle } = require('playwright/lib/server/dom');17const { JSHandle } = require('playwright/lib/server/jsHandle');18const { Page } = require('playwright/lib/server/page');19const { Frame } = require('playwright/lib/server/frame');20const page = new Page(null, null, null, null);21const frame = new Frame(page, null, null, null, null);22const elementHandle = new ElementHandle(frame, null, null, null);23const jsHandle = new JSHandle(elementHandle, null);24const selector = parseSelector('div');25const result = traverseStaticChildren(jsHandle, selector);26console.log(result);

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.