How to use traverseStaticChildren method in Playwright Internal

Best JavaScript code snippet using playwright-internal

main.js

Source:main.js Github

copy

Full Screen

...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];...

Full Screen

Full Screen

jquery-3.6.0.min.js

Source:jquery-3.6.0.min.js Github

copy

Full Screen

...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 }...

Full Screen

Full Screen

index.147aad71.js

Source:index.147aad71.js Github

copy

Full Screen

...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) {...

Full Screen

Full Screen

render.js

Source:render.js Github

copy

Full Screen

...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) => {...

Full Screen

Full Screen

note.js

Source:note.js Github

copy

Full Screen

...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 {...

Full Screen

Full Screen

createApp.js

Source:createApp.js Github

copy

Full Screen

...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 {...

Full Screen

Full Screen

renderer.js

Source:renderer.js Github

copy

Full Screen

...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) {...

Full Screen

Full Screen

stable_fragment.js

Source:stable_fragment.js Github

copy

Full Screen

...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...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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 {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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);

Full Screen

Full Screen

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful