'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var reactivity = require('@vue/reactivity'); var shared = require('@vue/shared'); const stack = []; function warn(msg, ...args) { // avoid props formatting or warn handler tracking deps that might be mutated // during patch, leading to infinite recursion. reactivity.pauseTracking(); const instance = stack.length ? stack[stack.length - 1].component : null; const appWarnHandler = instance && instance.appContext.config.warnHandler; const trace = getComponentTrace(); if (appWarnHandler) { callWithErrorHandling(appWarnHandler, instance, 11 /* APP_WARN_HANDLER */, [ msg + args.join(''), instance && instance.proxy, trace .map(({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`) .join('\n'), trace ]); } else { const warnArgs = [`[Vue warn]: ${msg}`, ...args]; /* istanbul ignore if */ if (trace.length && // avoid spamming console during tests !false) { warnArgs.push(`\n`, ...formatTrace(trace)); } console.warn(...warnArgs); } reactivity.resetTracking(); } function getComponentTrace() { let currentVNode = stack[stack.length - 1]; if (!currentVNode) { return []; } // we can't just use the stack because it will be incomplete during updates // that did not start from the root. Re-construct the parent chain using // instance parent pointers. const normalizedStack = []; while (currentVNode) { const last = normalizedStack[0]; if (last && last.vnode === currentVNode) { last.recurseCount++; } else { normalizedStack.push({ vnode: currentVNode, recurseCount: 0 }); } const parentInstance = currentVNode.component && currentVNode.component.parent; currentVNode = parentInstance && parentInstance.vnode; } return normalizedStack; } /* istanbul ignore next */ function formatTrace(trace) { const logs = []; trace.forEach((entry, i) => { logs.push(...(i === 0 ? [] : [`\n`]), ...formatTraceEntry(entry)); }); return logs; } function formatTraceEntry({ vnode, recurseCount }) { const postfix = recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``; const isRoot = vnode.component ? vnode.component.parent == null : false; const open = ` at <${formatComponentName(vnode.component, vnode.type, isRoot)}`; const close = `>` + postfix; return vnode.props ? [open, ...formatProps(vnode.props), close] : [open + close]; } /* istanbul ignore next */ function formatProps(props) { const res = []; const keys = Object.keys(props); keys.slice(0, 3).forEach(key => { res.push(...formatProp(key, props[key])); }); if (keys.length > 3) { res.push(` ...`); } return res; } /* istanbul ignore next */ function formatProp(key, value, raw) { if (shared.isString(value)) { value = JSON.stringify(value); return raw ? value : [`${key}=${value}`]; } else if (typeof value === 'number' || typeof value === 'boolean' || value == null) { return raw ? value : [`${key}=${value}`]; } else if (reactivity.isRef(value)) { value = formatProp(key, reactivity.toRaw(value.value), true); return raw ? value : [`${key}=Ref<`, value, `>`]; } else if (shared.isFunction(value)) { return [`${key}=fn${value.name ? `<${value.name}>` : ``}`]; } else { value = reactivity.toRaw(value); return raw ? value : [`${key}=`, value]; } } function callWithErrorHandling(fn, instance, type, args) { let res; try { res = args ? fn(...args) : fn(); } catch (err) { handleError(err, instance, type); } return res; } function callWithAsyncErrorHandling(fn, instance, type, args) { if (shared.isFunction(fn)) { const res = callWithErrorHandling(fn, instance, type, args); if (res && shared.isPromise(res)) { res.catch(err => { handleError(err, instance, type); }); } return res; } const values = []; for (let i = 0; i < fn.length; i++) { values.push(callWithAsyncErrorHandling(fn[i], instance, type, args)); } return values; } function handleError(err, instance, type, throwInDev = true) { const contextVNode = instance ? instance.vnode : null; if (instance) { let cur = instance.parent; // the exposed instance is the render proxy to keep it consistent with 2.x const exposedInstance = instance.proxy; // in production the hook receives only the error code const errorInfo = type; while (cur) { const errorCapturedHooks = cur.ec; if (errorCapturedHooks) { for (let i = 0; i < errorCapturedHooks.length; i++) { if (errorCapturedHooks[i](err, exposedInstance, errorInfo) === false) { return; } } } cur = cur.parent; } // app-level handling const appErrorHandler = instance.appContext.config.errorHandler; if (appErrorHandler) { callWithErrorHandling(appErrorHandler, null, 10 /* APP_ERROR_HANDLER */, [err, exposedInstance, errorInfo]); return; } } logError(err, type, contextVNode, throwInDev); } function logError(err, type, contextVNode, throwInDev = true) { { // recover in prod to reduce the impact on end-user console.error(err); } } let isFlushing = false; let isFlushPending = false; const queue = []; let flushIndex = 0; const pendingPreFlushCbs = []; let activePreFlushCbs = null; let preFlushIndex = 0; const pendingPostFlushCbs = []; let activePostFlushCbs = null; let postFlushIndex = 0; const resolvedPromise = Promise.resolve(); let currentFlushPromise = null; let currentPreFlushParentJob = null; const RECURSION_LIMIT = 100; function nextTick(fn) { const p = currentFlushPromise || resolvedPromise; return fn ? p.then(this ? fn.bind(this) : fn) : p; } function queueJob(job) { // the dedupe search uses the startIndex argument of Array.includes() // by default the search index includes the current job that is being run // so it cannot recursively trigger itself again. // if the job is a watch() callback, the search will start with a +1 index to // allow it recursively trigger itself - it is the user's responsibility to // ensure it doesn't end up in an infinite loop. if ((!queue.length || !queue.includes(job, isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex)) && job !== currentPreFlushParentJob) { queue.push(job); queueFlush(); } } function queueFlush() { if (!isFlushing && !isFlushPending) { isFlushPending = true; currentFlushPromise = resolvedPromise.then(flushJobs); } } function invalidateJob(job) { const i = queue.indexOf(job); if (i > -1) { queue.splice(i, 1); } } function queueCb(cb, activeQueue, pendingQueue, index) { if (!shared.isArray(cb)) { if (!activeQueue || !activeQueue.includes(cb, cb.allowRecurse ? index + 1 : index)) { pendingQueue.push(cb); } } else { // if cb is an array, it is a component lifecycle hook which can only be // triggered by a job, which is already deduped in the main queue, so // we can skip duplicate check here to improve perf pendingQueue.push(...cb); } queueFlush(); } function queuePreFlushCb(cb) { queueCb(cb, activePreFlushCbs, pendingPreFlushCbs, preFlushIndex); } function queuePostFlushCb(cb) { queueCb(cb, activePostFlushCbs, pendingPostFlushCbs, postFlushIndex); } function flushPreFlushCbs(seen, parentJob = null) { if (pendingPreFlushCbs.length) { currentPreFlushParentJob = parentJob; activePreFlushCbs = [...new Set(pendingPreFlushCbs)]; pendingPreFlushCbs.length = 0; for (preFlushIndex = 0; preFlushIndex < activePreFlushCbs.length; preFlushIndex++) { activePreFlushCbs[preFlushIndex](); } activePreFlushCbs = null; preFlushIndex = 0; currentPreFlushParentJob = null; // recursively flush until it drains flushPreFlushCbs(seen, parentJob); } } function flushPostFlushCbs(seen) { if (pendingPostFlushCbs.length) { const deduped = [...new Set(pendingPostFlushCbs)]; pendingPostFlushCbs.length = 0; // #1947 already has active queue, nested flushPostFlushCbs call if (activePostFlushCbs) { activePostFlushCbs.push(...deduped); return; } activePostFlushCbs = deduped; activePostFlushCbs.sort((a, b) => getId(a) - getId(b)); for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) { activePostFlushCbs[postFlushIndex](); } activePostFlushCbs = null; postFlushIndex = 0; } } const getId = (job) => job.id == null ? Infinity : job.id; function flushJobs(seen) { isFlushPending = false; isFlushing = true; flushPreFlushCbs(seen); // Sort queue before flush. // This ensures that: // 1. Components are updated from parent to child. (because parent is always // created before the child so its render effect will have smaller // priority number) // 2. If a component is unmounted during a parent component's update, // its update can be skipped. queue.sort((a, b) => getId(a) - getId(b)); try { for (flushIndex = 0; flushIndex < queue.length; flushIndex++) { const job = queue[flushIndex]; if (job) { if (false) ; callWithErrorHandling(job, null, 14 /* SCHEDULER */); } } } finally { flushIndex = 0; queue.length = 0; flushPostFlushCbs(); isFlushing = false; currentFlushPromise = null; // some postFlushCb queued jobs! // keep flushing until it drains. if (queue.length || pendingPostFlushCbs.length) { flushJobs(seen); } } } function checkRecursiveUpdates(seen, fn) { if (!seen.has(fn)) { seen.set(fn, 1); } else { const count = seen.get(fn); if (count > RECURSION_LIMIT) { throw new Error(`Maximum recursive updates exceeded. ` + `This means you have a reactive effect that is mutating its own ` + `dependencies and thus recursively triggering itself. Possible sources ` + `include component template, render function, updated hook or ` + `watcher source function.`); } else { seen.set(fn, count + 1); } } } exports.devtools = void 0; function setDevtoolsHook(hook) { exports.devtools = hook; } function emit(instance, event, ...rawArgs) { const props = instance.vnode.props || shared.EMPTY_OBJ; let args = rawArgs; const isModelListener = event.startsWith('update:'); // for v-model update:xxx events, apply modifiers on args const modelArg = isModelListener && event.slice(7); if (modelArg && modelArg in props) { const modifiersKey = `${modelArg === 'modelValue' ? 'model' : modelArg}Modifiers`; const { number, trim } = props[modifiersKey] || shared.EMPTY_OBJ; if (trim) { args = rawArgs.map(a => a.trim()); } else if (number) { args = rawArgs.map(shared.toNumber); } } // convert handler name to camelCase. See issue #2249 let handlerName = shared.toHandlerKey(shared.camelize(event)); let handler = props[handlerName]; // for v-model update:xxx events, also trigger kebab-case equivalent // for props passed via kebab-case if (!handler && isModelListener) { handlerName = shared.toHandlerKey(shared.hyphenate(event)); handler = props[handlerName]; } if (handler) { callWithAsyncErrorHandling(handler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args); } const onceHandler = props[handlerName + `Once`]; if (onceHandler) { if (!instance.emitted) { (instance.emitted = {})[handlerName] = true; } else if (instance.emitted[handlerName]) { return; } callWithAsyncErrorHandling(onceHandler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args); } } function normalizeEmitsOptions(comp, appContext, asMixin = false) { if (!appContext.deopt && comp.__emits !== undefined) { return comp.__emits; } const raw = comp.emits; let normalized = {}; // apply mixin/extends props let hasExtends = false; if (!shared.isFunction(comp)) { const extendEmits = (raw) => { hasExtends = true; shared.extend(normalized, normalizeEmitsOptions(raw, appContext, true)); }; if (!asMixin && appContext.mixins.length) { appContext.mixins.forEach(extendEmits); } if (comp.extends) { extendEmits(comp.extends); } if (comp.mixins) { comp.mixins.forEach(extendEmits); } } if (!raw && !hasExtends) { return (comp.__emits = null); } if (shared.isArray(raw)) { raw.forEach(key => (normalized[key] = null)); } else { shared.extend(normalized, raw); } return (comp.__emits = normalized); } // Check if an incoming prop key is a declared emit event listener. // e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are // both considered matched listeners. function isEmitListener(options, key) { if (!options || !shared.isOn(key)) { return false; } key = key.slice(2).replace(/Once$/, ''); return (shared.hasOwn(options, key[0].toLowerCase() + key.slice(1)) || shared.hasOwn(options, shared.hyphenate(key)) || shared.hasOwn(options, key)); } /** * mark the current rendering instance for asset resolution (e.g. * resolveComponent, resolveDirective) during render */ let currentRenderingInstance = null; function setCurrentRenderingInstance(instance) { currentRenderingInstance = instance; } /** * dev only flag to track whether $attrs was used during render. * If $attrs was used during render then the warning for failed attrs * fallthrough can be suppressed. */ let accessedAttrs = false; function markAttrsAccessed() { accessedAttrs = true; } function renderComponentRoot(instance) { const { type: Component, vnode, proxy, withProxy, props, propsOptions: [propsOptions], slots, attrs, emit, render, renderCache, data, setupState, ctx } = instance; let result; currentRenderingInstance = instance; try { let fallthroughAttrs; if (vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */) { // withProxy is a proxy with a different `has` trap only for // runtime-compiled render functions using `with` block. const proxyToUse = withProxy || proxy; result = normalizeVNode(render.call(proxyToUse, proxyToUse, renderCache, props, setupState, data, ctx)); fallthroughAttrs = attrs; } else { // functional const render = Component; // in dev, mark attrs accessed if optional props (attrs === props) if (false && attrs === props) ; result = normalizeVNode(render.length > 1 ? render(props, false ? { get attrs() { markAttrsAccessed(); return attrs; }, slots, emit } : { attrs, slots, emit }) : render(props, null /* we know it doesn't need it */)); fallthroughAttrs = Component.props ? attrs : getFunctionalFallthrough(attrs); } // attr merging // in dev mode, comments are preserved, and it's possible for a template // to have comments along side the root element which makes it a fragment let root = result; let setRoot = undefined; if (false && result.patchFlag > 0 && result.patchFlag & 2048 /* DEV_ROOT_FRAGMENT */) ; if (Component.inheritAttrs !== false && fallthroughAttrs) { const keys = Object.keys(fallthroughAttrs); const { shapeFlag } = root; if (keys.length) { if (shapeFlag & 1 /* ELEMENT */ || shapeFlag & 6 /* COMPONENT */) { if (propsOptions && keys.some(shared.isModelListener)) { // If a v-model listener (onUpdate:xxx) has a corresponding declared // prop, it indicates this component expects to handle v-model and // it should not fallthrough. // related: #1543, #1643, #1989 fallthroughAttrs = filterModelListeners(fallthroughAttrs, propsOptions); } root = cloneVNode(root, fallthroughAttrs); } else if (false && !accessedAttrs && root.type !== Comment) ; } } // inherit directives if (vnode.dirs) { if (false && !isElementRoot(root)) ; root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs; } // inherit transition data if (vnode.transition) { if (false && !isElementRoot(root)) ; root.transition = vnode.transition; } if (false && setRoot) ; else { result = root; } } catch (err) { handleError(err, instance, 1 /* RENDER_FUNCTION */); result = createVNode(Comment); } currentRenderingInstance = null; return result; } /** * dev only * In dev mode, template root level comments are rendered, which turns the * template into a fragment root, but we need to locate the single element * root for attrs and scope id processing. */ const getChildRoot = (vnode) => { const rawChildren = vnode.children; const dynamicChildren = vnode.dynamicChildren; const childRoot = filterSingleRoot(rawChildren); if (!childRoot) { return [vnode, undefined]; } const index = rawChildren.indexOf(childRoot); const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1; const setRoot = (updatedRoot) => { rawChildren[index] = updatedRoot; if (dynamicChildren) { if (dynamicIndex > -1) { dynamicChildren[dynamicIndex] = updatedRoot; } else if (updatedRoot.patchFlag > 0) { vnode.dynamicChildren = [...dynamicChildren, updatedRoot]; } } }; return [normalizeVNode(childRoot), setRoot]; }; function filterSingleRoot(children) { let singleRoot; for (let i = 0; i < children.length; i++) { const child = children[i]; if (isVNode(child)) { // ignore user comment if (child.type !== Comment || child.children === 'v-if') { if (singleRoot) { // has more than 1 non-comment child, return now return; } else { singleRoot = child; } } } else { return; } } return singleRoot; } const getFunctionalFallthrough = (attrs) => { let res; for (const key in attrs) { if (key === 'class' || key === 'style' || shared.isOn(key)) { (res || (res = {}))[key] = attrs[key]; } } return res; }; const filterModelListeners = (attrs, props) => { const res = {}; for (const key in attrs) { if (!shared.isModelListener(key) || !(key.slice(9) in props)) { res[key] = attrs[key]; } } return res; }; const isElementRoot = (vnode) => { return (vnode.shapeFlag & 6 /* COMPONENT */ || vnode.shapeFlag & 1 /* ELEMENT */ || vnode.type === Comment // potential v-if branch switch ); }; function shouldUpdateComponent(prevVNode, nextVNode, optimized) { const { props: prevProps, children: prevChildren, component } = prevVNode; const { props: nextProps, children: nextChildren, patchFlag } = nextVNode; const emits = component.emitsOptions; // force child update for runtime directive or transition on component vnode. if (nextVNode.dirs || nextVNode.transition) { return true; } if (optimized && patchFlag >= 0) { if (patchFlag & 1024 /* DYNAMIC_SLOTS */) { // slot content that references values that might have changed, // e.g. in a v-for return true; } if (patchFlag & 16 /* FULL_PROPS */) { if (!prevProps) { return !!nextProps; } // presence of this flag indicates props are always non-null return hasPropsChanged(prevProps, nextProps, emits); } else if (patchFlag & 8 /* PROPS */) { const dynamicProps = nextVNode.dynamicProps; for (let i = 0; i < dynamicProps.length; i++) { const key = dynamicProps[i]; if (nextProps[key] !== prevProps[key] && !isEmitListener(emits, key)) { return true; } } } } else { // this path is only taken by manually written render functions // so presence of any children leads to a forced update if (prevChildren || nextChildren) { if (!nextChildren || !nextChildren.$stable) { return true; } } if (prevProps === nextProps) { return false; } if (!prevProps) { return !!nextProps; } if (!nextProps) { return true; } return hasPropsChanged(prevProps, nextProps, emits); } return false; } function hasPropsChanged(prevProps, nextProps, emitsOptions) { const nextKeys = Object.keys(nextProps); if (nextKeys.length !== Object.keys(prevProps).length) { return true; } for (let i = 0; i < nextKeys.length; i++) { const key = nextKeys[i]; if (nextProps[key] !== prevProps[key] && !isEmitListener(emitsOptions, key)) { return true; } } return false; } function updateHOCHostEl({ vnode, parent }, el // HostNode ) { while (parent && parent.subTree === vnode) { (vnode = parent.vnode).el = el; parent = parent.parent; } } const isSuspense = (type) => type.__isSuspense; // Suspense exposes a component-like API, and is treated like a component // in the compiler, but internally it's a special built-in type that hooks // directly into the renderer. const SuspenseImpl = { // In order to make Suspense tree-shakable, we need to avoid importing it // directly in the renderer. The renderer checks for the __isSuspense flag // on a vnode's type and calls the `process` method, passing in renderer // internals. __isSuspense: true, process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, // platform-specific impl passed from renderer rendererInternals) { if (n1 == null) { mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, rendererInternals); } else { patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, rendererInternals); } }, hydrate: hydrateSuspense, create: createSuspenseBoundary }; // Force-casted public typing for h and TSX props inference const Suspense = (SuspenseImpl ); function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense, isSVG, optimized, rendererInternals) { const { p: patch, o: { createElement } } = rendererInternals; const hiddenContainer = createElement('div'); const suspense = (vnode.suspense = createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, optimized, rendererInternals)); // start mounting the content subtree in an off-dom container patch(null, (suspense.pendingBranch = vnode.ssContent), hiddenContainer, null, parentComponent, suspense, isSVG); // now check if we have encountered any async deps if (suspense.deps > 0) { // has async // mount the fallback tree patch(null, vnode.ssFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context isSVG); setActiveBranch(suspense, vnode.ssFallback); } else { // Suspense has no async deps. Just resolve. suspense.resolve(); } } function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, { p: patch, um: unmount, o: { createElement } }) { const suspense = (n2.suspense = n1.suspense); suspense.vnode = n2; n2.el = n1.el; const newBranch = n2.ssContent; const newFallback = n2.ssFallback; const { activeBranch, pendingBranch, isInFallback, isHydrating } = suspense; if (pendingBranch) { suspense.pendingBranch = newBranch; if (isSameVNodeType(newBranch, pendingBranch)) { // same root type but content may have changed. patch(pendingBranch, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG); if (suspense.deps <= 0) { suspense.resolve(); } else if (isInFallback) { patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context isSVG); setActiveBranch(suspense, newFallback); } } else { // toggled before pending tree is resolved suspense.pendingId++; if (isHydrating) { // if toggled before hydration is finished, the current DOM tree is // no longer valid. set it as the active branch so it will be unmounted // when resolved suspense.isHydrating = false; suspense.activeBranch = pendingBranch; } else { unmount(pendingBranch, parentComponent, suspense); } // increment pending ID. this is used to invalidate async callbacks // reset suspense state suspense.deps = 0; // discard effects from pending branch suspense.effects.length = 0; // discard previous container suspense.hiddenContainer = createElement('div'); if (isInFallback) { // already in fallback state patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG); if (suspense.deps <= 0) { suspense.resolve(); } else { patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context isSVG); setActiveBranch(suspense, newFallback); } } else if (activeBranch && isSameVNodeType(newBranch, activeBranch)) { // toggled "back" to current active branch patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG); // force resolve suspense.resolve(true); } else { // switched to a 3rd branch patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG); if (suspense.deps <= 0) { suspense.resolve(); } } } } else { if (activeBranch && isSameVNodeType(newBranch, activeBranch)) { // root did not change, just normal patch patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG); setActiveBranch(suspense, newBranch); } else { // root node toggled // invoke @pending event const onPending = n2.props && n2.props.onPending; if (shared.isFunction(onPending)) { onPending(); } // mount pending branch in off-dom container suspense.pendingBranch = newBranch; suspense.pendingId++; patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG); if (suspense.deps <= 0) { // incoming branch has no async deps, resolve now. suspense.resolve(); } else { const { timeout, pendingId } = suspense; if (timeout > 0) { setTimeout(() => { if (suspense.pendingId === pendingId) { suspense.fallback(newFallback); } }, timeout); } else if (timeout === 0) { suspense.fallback(newFallback); } } } } } function createSuspenseBoundary(vnode, parent, parentComponent, container, hiddenContainer, anchor, isSVG, optimized, rendererInternals, isHydrating = false) { const { p: patch, m: move, um: unmount, n: next, o: { parentNode, remove } } = rendererInternals; const timeout = shared.toNumber(vnode.props && vnode.props.timeout); const suspense = { vnode, parent, parentComponent, isSVG, container, hiddenContainer, anchor, deps: 0, pendingId: 0, timeout: typeof timeout === 'number' ? timeout : -1, activeBranch: null, pendingBranch: null, isInFallback: true, isHydrating, isUnmounted: false, effects: [], resolve(resume = false) { const { vnode, activeBranch, pendingBranch, pendingId, effects, parentComponent, container } = suspense; if (suspense.isHydrating) { suspense.isHydrating = false; } else if (!resume) { const delayEnter = activeBranch && pendingBranch.transition && pendingBranch.transition.mode === 'out-in'; if (delayEnter) { activeBranch.transition.afterLeave = () => { if (pendingId === suspense.pendingId) { move(pendingBranch, container, anchor, 0 /* ENTER */); } }; } // this is initial anchor on mount let { anchor } = suspense; // unmount current active tree if (activeBranch) { // if the fallback tree was mounted, it may have been moved // as part of a parent suspense. get the latest anchor for insertion anchor = next(activeBranch); unmount(activeBranch, parentComponent, suspense, true); } if (!delayEnter) { // move content from off-dom container to actual container move(pendingBranch, container, anchor, 0 /* ENTER */); } } setActiveBranch(suspense, pendingBranch); suspense.pendingBranch = null; suspense.isInFallback = false; // flush buffered effects // check if there is a pending parent suspense let parent = suspense.parent; let hasUnresolvedAncestor = false; while (parent) { if (parent.pendingBranch) { // found a pending parent suspense, merge buffered post jobs // into that parent parent.effects.push(...effects); hasUnresolvedAncestor = true; break; } parent = parent.parent; } // no pending parent suspense, flush all jobs if (!hasUnresolvedAncestor) { queuePostFlushCb(effects); } suspense.effects = []; // invoke @resolve event const onResolve = vnode.props && vnode.props.onResolve; if (shared.isFunction(onResolve)) { onResolve(); } }, fallback(fallbackVNode) { if (!suspense.pendingBranch) { return; } const { vnode, activeBranch, parentComponent, container, isSVG } = suspense; // invoke @fallback event const onFallback = vnode.props && vnode.props.onFallback; if (shared.isFunction(onFallback)) { onFallback(); } const anchor = next(activeBranch); const mountFallback = () => { if (!suspense.isInFallback) { return; } // mount the fallback tree patch(null, fallbackVNode, container, anchor, parentComponent, null, // fallback tree will not have suspense context isSVG); setActiveBranch(suspense, fallbackVNode); }; const delayEnter = fallbackVNode.transition && fallbackVNode.transition.mode === 'out-in'; if (delayEnter) { activeBranch.transition.afterLeave = mountFallback; } // unmount current active branch unmount(activeBranch, parentComponent, null, // no suspense so unmount hooks fire now true // shouldRemove ); suspense.isInFallback = true; if (!delayEnter) { mountFallback(); } }, move(container, anchor, type) { suspense.activeBranch && move(suspense.activeBranch, container, anchor, type); suspense.container = container; }, next() { return suspense.activeBranch && next(suspense.activeBranch); }, registerDep(instance, setupRenderEffect) { const isInPendingSuspense = !!suspense.pendingBranch; if (isInPendingSuspense) { suspense.deps++; } const hydratedEl = instance.vnode.el; instance .asyncDep.catch(err => { handleError(err, instance, 0 /* SETUP_FUNCTION */); }) .then(asyncSetupResult => { // retry when the setup() promise resolves. // component may have been unmounted before resolve. if (instance.isUnmounted || suspense.isUnmounted || suspense.pendingId !== instance.suspenseId) { return; } // retry from this component instance.asyncResolved = true; const { vnode } = instance; handleSetupResult(instance, asyncSetupResult, false); if (hydratedEl) { // vnode may have been replaced if an update happened before the // async dep is resolved. vnode.el = hydratedEl; } const placeholder = !hydratedEl && instance.subTree.el; setupRenderEffect(instance, vnode, // component may have been moved before resolve. // if this is not a hydration, instance.subTree will be the comment // placeholder. parentNode(hydratedEl || instance.subTree.el), // anchor will not be used if this is hydration, so only need to // consider the comment placeholder case. hydratedEl ? null : next(instance.subTree), suspense, isSVG, optimized); if (placeholder) { remove(placeholder); } updateHOCHostEl(instance, vnode.el); // only decrease deps count if suspense is not already resolved if (isInPendingSuspense && --suspense.deps === 0) { suspense.resolve(); } }); }, unmount(parentSuspense, doRemove) { suspense.isUnmounted = true; if (suspense.activeBranch) { unmount(suspense.activeBranch, parentComponent, parentSuspense, doRemove); } if (suspense.pendingBranch) { unmount(suspense.pendingBranch, parentComponent, parentSuspense, doRemove); } } }; return suspense; } function hydrateSuspense(node, vnode, parentComponent, parentSuspense, isSVG, optimized, rendererInternals, hydrateNode) { /* eslint-disable no-restricted-globals */ const suspense = (vnode.suspense = createSuspenseBoundary(vnode, parentSuspense, parentComponent, node.parentNode, document.createElement('div'), null, isSVG, optimized, rendererInternals, true /* hydrating */)); // there are two possible scenarios for server-rendered suspense: // - success: ssr content should be fully resolved // - failure: ssr content should be the fallback branch. // however, on the client we don't really know if it has failed or not // attempt to hydrate the DOM assuming it has succeeded, but we still // need to construct a suspense boundary first const result = hydrateNode(node, (suspense.pendingBranch = vnode.ssContent), parentComponent, suspense, optimized); if (suspense.deps === 0) { suspense.resolve(); } return result; /* eslint-enable no-restricted-globals */ } function normalizeSuspenseChildren(vnode) { const { shapeFlag, children } = vnode; let content; let fallback; if (shapeFlag & 32 /* SLOTS_CHILDREN */) { content = normalizeSuspenseSlot(children.default); fallback = normalizeSuspenseSlot(children.fallback); } else { content = normalizeSuspenseSlot(children); fallback = normalizeVNode(null); } return { content, fallback }; } function normalizeSuspenseSlot(s) { if (shared.isFunction(s)) { s = s(); } if (shared.isArray(s)) { const singleChild = filterSingleRoot(s); s = singleChild; } return normalizeVNode(s); } function queueEffectWithSuspense(fn, suspense) { if (suspense && suspense.pendingBranch) { if (shared.isArray(fn)) { suspense.effects.push(...fn); } else { suspense.effects.push(fn); } } else { queuePostFlushCb(fn); } } function setActiveBranch(suspense, branch) { suspense.activeBranch = branch; const { vnode, parentComponent } = suspense; const el = (vnode.el = branch.el); // in case suspense is the root node of a component, // recursively update the HOC el if (parentComponent && parentComponent.subTree === vnode) { parentComponent.vnode.el = el; updateHOCHostEl(parentComponent, el); } } let isRenderingCompiledSlot = 0; const setCompiledSlotRendering = (n) => (isRenderingCompiledSlot += n); /** * Compiler runtime helper for rendering `` * @private */ function renderSlot(slots, name, props = {}, // this is not a user-facing function, so the fallback is always generated by // the compiler and guaranteed to be a function returning an array fallback) { let slot = slots[name]; // a compiled slot disables block tracking by default to avoid manual // invocation interfering with template-based block tracking, but in // `renderSlot` we can be sure that it's template-based so we can force // enable it. isRenderingCompiledSlot++; openBlock(); const validSlotContent = slot && ensureValidVNode(slot(props)); const rendered = createBlock(Fragment, { key: props.key || `_${name}` }, validSlotContent || (fallback ? fallback() : []), validSlotContent && slots._ === 1 /* STABLE */ ? 64 /* STABLE_FRAGMENT */ : -2 /* BAIL */); isRenderingCompiledSlot--; return rendered; } function ensureValidVNode(vnodes) { return vnodes.some(child => { if (!isVNode(child)) return true; if (child.type === Comment) return false; if (child.type === Fragment && !ensureValidVNode(child.children)) return false; return true; }) ? vnodes : null; } /** * Wrap a slot function to memoize current rendering instance * @private */ function withCtx(fn, ctx = currentRenderingInstance) { if (!ctx) return fn; const renderFnWithContext = (...args) => { // If a user calls a compiled slot inside a template expression (#1745), it // can mess up block tracking, so by default we need to push a null block to // avoid that. This isn't necessary if rendering a compiled ``. if (!isRenderingCompiledSlot) { openBlock(true /* null block that disables tracking */); } const owner = currentRenderingInstance; setCurrentRenderingInstance(ctx); const res = fn(...args); setCurrentRenderingInstance(owner); if (!isRenderingCompiledSlot) { closeBlock(); } return res; }; renderFnWithContext._c = true; return renderFnWithContext; } // SFC scoped style ID management. let currentScopeId = null; const scopeIdStack = []; /** * @private */ function pushScopeId(id) { scopeIdStack.push((currentScopeId = id)); } /** * @private */ function popScopeId() { scopeIdStack.pop(); currentScopeId = scopeIdStack[scopeIdStack.length - 1] || null; } /** * @private */ function withScopeId(id) { return ((fn) => withCtx(function () { pushScopeId(id); const res = fn.apply(this, arguments); popScopeId(); return res; })); } function initProps(instance, rawProps, isStateful, // result of bitwise flag comparison isSSR = false) { const props = {}; const attrs = {}; shared.def(attrs, InternalObjectKey, 1); setFullProps(instance, rawProps, props, attrs); if (isStateful) { // stateful instance.props = isSSR ? props : reactivity.shallowReactive(props); } else { if (!instance.type.props) { // functional w/ optional props, props === attrs instance.props = attrs; } else { // functional w/ declared props instance.props = props; } } instance.attrs = attrs; } function updateProps(instance, rawProps, rawPrevProps, optimized) { const { props, attrs, vnode: { patchFlag } } = instance; const rawCurrentProps = reactivity.toRaw(props); const [options] = instance.propsOptions; if ( // always force full diff in dev // - #1942 if hmr is enabled with sfc component // - vite#872 non-sfc component used by sfc component (optimized || patchFlag > 0) && !(patchFlag & 16 /* FULL_PROPS */)) { if (patchFlag & 8 /* PROPS */) { // Compiler-generated props & no keys change, just set the updated // the props. const propsToUpdate = instance.vnode.dynamicProps; for (let i = 0; i < propsToUpdate.length; i++) { const key = propsToUpdate[i]; // PROPS flag guarantees rawProps to be non-null const value = rawProps[key]; if (options) { // attr / props separation was done on init and will be consistent // in this code path, so just check if attrs have it. if (shared.hasOwn(attrs, key)) { attrs[key] = value; } else { const camelizedKey = shared.camelize(key); props[camelizedKey] = resolvePropValue(options, rawCurrentProps, camelizedKey, value, instance); } } else { attrs[key] = value; } } } } else { // full props update. setFullProps(instance, rawProps, props, attrs); // in case of dynamic props, check if we need to delete keys from // the props object let kebabKey; for (const key in rawCurrentProps) { if (!rawProps || // for camelCase (!shared.hasOwn(rawProps, key) && // it's possible the original props was passed in as kebab-case // and converted to camelCase (#955) ((kebabKey = shared.hyphenate(key)) === key || !shared.hasOwn(rawProps, kebabKey)))) { if (options) { if (rawPrevProps && // for camelCase (rawPrevProps[key] !== undefined || // for kebab-case rawPrevProps[kebabKey] !== undefined)) { props[key] = resolvePropValue(options, rawProps || shared.EMPTY_OBJ, key, undefined, instance); } } else { delete props[key]; } } } // in the case of functional component w/o props declaration, props and // attrs point to the same object so it should already have been updated. if (attrs !== rawCurrentProps) { for (const key in attrs) { if (!rawProps || !shared.hasOwn(rawProps, key)) { delete attrs[key]; } } } } // trigger updates for $attrs in case it's used in component slots reactivity.trigger(instance, "set" /* SET */, '$attrs'); } function setFullProps(instance, rawProps, props, attrs) { const [options, needCastKeys] = instance.propsOptions; if (rawProps) { for (const key in rawProps) { const value = rawProps[key]; // key, ref are reserved and never passed down if (shared.isReservedProp(key)) { continue; } // prop option names are camelized during normalization, so to support // kebab -> camel conversion here we need to camelize the key. let camelKey; if (options && shared.hasOwn(options, (camelKey = shared.camelize(key)))) { props[camelKey] = value; } else if (!isEmitListener(instance.emitsOptions, key)) { // Any non-declared (either as a prop or an emitted event) props are put // into a separate `attrs` object for spreading. Make sure to preserve // original key casing attrs[key] = value; } } } if (needCastKeys) { const rawCurrentProps = reactivity.toRaw(props); for (let i = 0; i < needCastKeys.length; i++) { const key = needCastKeys[i]; props[key] = resolvePropValue(options, rawCurrentProps, key, rawCurrentProps[key], instance); } } } function resolvePropValue(options, props, key, value, instance) { const opt = options[key]; if (opt != null) { const hasDefault = shared.hasOwn(opt, 'default'); // default values if (hasDefault && value === undefined) { const defaultValue = opt.default; if (opt.type !== Function && shared.isFunction(defaultValue)) { setCurrentInstance(instance); value = defaultValue(props); setCurrentInstance(null); } else { value = defaultValue; } } // boolean casting if (opt[0 /* shouldCast */]) { if (!shared.hasOwn(props, key) && !hasDefault) { value = false; } else if (opt[1 /* shouldCastTrue */] && (value === '' || value === shared.hyphenate(key))) { value = true; } } } return value; } function normalizePropsOptions(comp, appContext, asMixin = false) { if (!appContext.deopt && comp.__props) { return comp.__props; } const raw = comp.props; const normalized = {}; const needCastKeys = []; // apply mixin/extends props let hasExtends = false; if (!shared.isFunction(comp)) { const extendProps = (raw) => { hasExtends = true; const [props, keys] = normalizePropsOptions(raw, appContext, true); shared.extend(normalized, props); if (keys) needCastKeys.push(...keys); }; if (!asMixin && appContext.mixins.length) { appContext.mixins.forEach(extendProps); } if (comp.extends) { extendProps(comp.extends); } if (comp.mixins) { comp.mixins.forEach(extendProps); } } if (!raw && !hasExtends) { return (comp.__props = shared.EMPTY_ARR); } if (shared.isArray(raw)) { for (let i = 0; i < raw.length; i++) { const normalizedKey = shared.camelize(raw[i]); if (validatePropName(normalizedKey)) { normalized[normalizedKey] = shared.EMPTY_OBJ; } } } else if (raw) { for (const key in raw) { const normalizedKey = shared.camelize(key); if (validatePropName(normalizedKey)) { const opt = raw[key]; const prop = (normalized[normalizedKey] = shared.isArray(opt) || shared.isFunction(opt) ? { type: opt } : opt); if (prop) { const booleanIndex = getTypeIndex(Boolean, prop.type); const stringIndex = getTypeIndex(String, prop.type); prop[0 /* shouldCast */] = booleanIndex > -1; prop[1 /* shouldCastTrue */] = stringIndex < 0 || booleanIndex < stringIndex; // if the prop needs boolean casting or default value if (booleanIndex > -1 || shared.hasOwn(prop, 'default')) { needCastKeys.push(normalizedKey); } } } } } return (comp.__props = [normalized, needCastKeys]); } function validatePropName(key) { if (key[0] !== '$') { return true; } return false; } // use function string name to check type constructors // so that it works across vms / iframes. function getType(ctor) { const match = ctor && ctor.toString().match(/^\s*function (\w+)/); return match ? match[1] : ''; } function isSameType(a, b) { return getType(a) === getType(b); } function getTypeIndex(type, expectedTypes) { if (shared.isArray(expectedTypes)) { for (let i = 0, len = expectedTypes.length; i < len; i++) { if (isSameType(expectedTypes[i], type)) { return i; } } } else if (shared.isFunction(expectedTypes)) { return isSameType(expectedTypes, type) ? 0 : -1; } return -1; } function injectHook(type, hook, target = currentInstance, prepend = false) { if (target) { const hooks = target[type] || (target[type] = []); // cache the error handling wrapper for injected hooks so the same hook // can be properly deduped by the scheduler. "__weh" stands for "with error // handling". const wrappedHook = hook.__weh || (hook.__weh = (...args) => { if (target.isUnmounted) { return; } // disable tracking inside all lifecycle hooks // since they can potentially be called inside effects. reactivity.pauseTracking(); // Set currentInstance during hook invocation. // This assumes the hook does not synchronously trigger other hooks, which // can only be false when the user does something really funky. setCurrentInstance(target); const res = callWithAsyncErrorHandling(hook, target, type, args); setCurrentInstance(null); reactivity.resetTracking(); return res; }); if (prepend) { hooks.unshift(wrappedHook); } else { hooks.push(wrappedHook); } return wrappedHook; } } const createHook = (lifecycle) => (hook, target = currentInstance) => // post-create lifecycle registrations are noops during SSR !isInSSRComponentSetup && injectHook(lifecycle, hook, target); const onBeforeMount = createHook("bm" /* BEFORE_MOUNT */); const onMounted = createHook("m" /* MOUNTED */); const onBeforeUpdate = createHook("bu" /* BEFORE_UPDATE */); const onUpdated = createHook("u" /* UPDATED */); const onBeforeUnmount = createHook("bum" /* BEFORE_UNMOUNT */); const onUnmounted = createHook("um" /* UNMOUNTED */); const onRenderTriggered = createHook("rtg" /* RENDER_TRIGGERED */); const onRenderTracked = createHook("rtc" /* RENDER_TRACKED */); const onErrorCaptured = (hook, target = currentInstance) => { injectHook("ec" /* ERROR_CAPTURED */, hook, target); }; // Simple effect. function watchEffect(effect, options) { return doWatch(effect, null, options); } // initial value for watchers to trigger on undefined initial values const INITIAL_WATCHER_VALUE = {}; // implementation function watch(source, cb, options) { return doWatch(source, cb, options); } function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = shared.EMPTY_OBJ, instance = currentInstance) { let getter; let forceTrigger = false; if (reactivity.isRef(source)) { getter = () => source.value; forceTrigger = !!source._shallow; } else if (reactivity.isReactive(source)) { getter = () => source; deep = true; } else if (shared.isArray(source)) { getter = () => source.map(s => { if (reactivity.isRef(s)) { return s.value; } else if (reactivity.isReactive(s)) { return traverse(s); } else if (shared.isFunction(s)) { return callWithErrorHandling(s, instance, 2 /* WATCH_GETTER */, [ instance && instance.proxy ]); } else ; }); } else if (shared.isFunction(source)) { if (cb) { // getter with cb getter = () => callWithErrorHandling(source, instance, 2 /* WATCH_GETTER */, [ instance && instance.proxy ]); } else { // no cb -> simple effect getter = () => { if (instance && instance.isUnmounted) { return; } if (cleanup) { cleanup(); } return callWithErrorHandling(source, instance, 3 /* WATCH_CALLBACK */, [onInvalidate]); }; } } else { getter = shared.NOOP; } if (cb && deep) { const baseGetter = getter; getter = () => traverse(baseGetter()); } let cleanup; const onInvalidate = (fn) => { cleanup = runner.options.onStop = () => { callWithErrorHandling(fn, instance, 4 /* WATCH_CLEANUP */); }; }; // in SSR there is no need to setup an actual effect, and it should be noop // unless it's eager if (isInSSRComponentSetup) { if (!cb) { getter(); } else if (immediate) { callWithAsyncErrorHandling(cb, instance, 3 /* WATCH_CALLBACK */, [ getter(), undefined, onInvalidate ]); } return shared.NOOP; } let oldValue = shared.isArray(source) ? [] : INITIAL_WATCHER_VALUE; const job = () => { if (!runner.active) { return; } if (cb) { // watch(source, cb) const newValue = runner(); if (deep || forceTrigger || shared.hasChanged(newValue, oldValue)) { // cleanup before running cb again if (cleanup) { cleanup(); } callWithAsyncErrorHandling(cb, instance, 3 /* WATCH_CALLBACK */, [ newValue, // pass undefined as the old value when it's changed for the first time oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue, onInvalidate ]); oldValue = newValue; } } else { // watchEffect runner(); } }; // important: mark the job as a watcher callback so that scheduler knows // it is allowed to self-trigger (#1727) job.allowRecurse = !!cb; let scheduler; if (flush === 'sync') { scheduler = job; } else if (flush === 'post') { scheduler = () => queuePostRenderEffect(job, instance && instance.suspense); } else { // default: 'pre' scheduler = () => { if (!instance || instance.isMounted) { queuePreFlushCb(job); } else { // with 'pre' option, the first call must happen before // the component is mounted so it is called synchronously. job(); } }; } const runner = reactivity.effect(getter, { lazy: true, onTrack, onTrigger, scheduler }); recordInstanceBoundEffect(runner, instance); // initial run if (cb) { if (immediate) { job(); } else { oldValue = runner(); } } else if (flush === 'post') { queuePostRenderEffect(runner, instance && instance.suspense); } else { runner(); } return () => { reactivity.stop(runner); if (instance) { shared.remove(instance.effects, runner); } }; } // this.$watch function instanceWatch(source, cb, options) { const publicThis = this.proxy; const getter = shared.isString(source) ? () => publicThis[source] : source.bind(publicThis); return doWatch(getter, cb.bind(publicThis), options, this); } function traverse(value, seen = new Set()) { if (!shared.isObject(value) || seen.has(value)) { return value; } seen.add(value); if (reactivity.isRef(value)) { traverse(value.value, seen); } else if (shared.isArray(value)) { for (let i = 0; i < value.length; i++) { traverse(value[i], seen); } } else if (shared.isSet(value) || shared.isMap(value)) { value.forEach((v) => { traverse(v, seen); }); } else { for (const key in value) { traverse(value[key], seen); } } return value; } function useTransitionState() { const state = { isMounted: false, isLeaving: false, isUnmounting: false, leavingVNodes: new Map() }; onMounted(() => { state.isMounted = true; }); onBeforeUnmount(() => { state.isUnmounting = true; }); return state; } const TransitionHookValidator = [Function, Array]; const BaseTransitionImpl = { name: `BaseTransition`, props: { mode: String, appear: Boolean, persisted: Boolean, // enter onBeforeEnter: TransitionHookValidator, onEnter: TransitionHookValidator, onAfterEnter: TransitionHookValidator, onEnterCancelled: TransitionHookValidator, // leave onBeforeLeave: TransitionHookValidator, onLeave: TransitionHookValidator, onAfterLeave: TransitionHookValidator, onLeaveCancelled: TransitionHookValidator, // appear onBeforeAppear: TransitionHookValidator, onAppear: TransitionHookValidator, onAfterAppear: TransitionHookValidator, onAppearCancelled: TransitionHookValidator }, setup(props, { slots }) { const instance = getCurrentInstance(); const state = useTransitionState(); let prevTransitionKey; return () => { const children = slots.default && getTransitionRawChildren(slots.default(), true); if (!children || !children.length) { return; } // there's no need to track reactivity for these props so use the raw // props for a bit better perf const rawProps = reactivity.toRaw(props); const { mode } = rawProps; // at this point children has a guaranteed length of 1. const child = children[0]; if (state.isLeaving) { return emptyPlaceholder(child); } // in the case of , we need to // compare the type of the kept-alive children. const innerChild = getKeepAliveChild(child); if (!innerChild) { return emptyPlaceholder(child); } const enterHooks = resolveTransitionHooks(innerChild, rawProps, state, instance); setTransitionHooks(innerChild, enterHooks); const oldChild = instance.subTree; const oldInnerChild = oldChild && getKeepAliveChild(oldChild); let transitionKeyChanged = false; const { getTransitionKey } = innerChild.type; if (getTransitionKey) { const key = getTransitionKey(); if (prevTransitionKey === undefined) { prevTransitionKey = key; } else if (key !== prevTransitionKey) { prevTransitionKey = key; transitionKeyChanged = true; } } // handle mode if (oldInnerChild && oldInnerChild.type !== Comment && (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) { const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance); // update old tree's hooks in case of dynamic transition setTransitionHooks(oldInnerChild, leavingHooks); // switching between different views if (mode === 'out-in') { state.isLeaving = true; // return placeholder node and queue update when leave finishes leavingHooks.afterLeave = () => { state.isLeaving = false; instance.update(); }; return emptyPlaceholder(child); } else if (mode === 'in-out') { leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => { const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild); leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild; // early removal callback el._leaveCb = () => { earlyRemove(); el._leaveCb = undefined; delete enterHooks.delayedLeave; }; enterHooks.delayedLeave = delayedLeave; }; } } return child; }; } }; // export the public type for h/tsx inference // also to avoid inline import() in generated d.ts files const BaseTransition = BaseTransitionImpl; function getLeavingNodesForType(state, vnode) { const { leavingVNodes } = state; let leavingVNodesCache = leavingVNodes.get(vnode.type); if (!leavingVNodesCache) { leavingVNodesCache = Object.create(null); leavingVNodes.set(vnode.type, leavingVNodesCache); } return leavingVNodesCache; } // The transition hooks are attached to the vnode as vnode.transition // and will be called at appropriate timing in the renderer. function resolveTransitionHooks(vnode, props, state, instance) { const { appear, mode, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, onBeforeAppear, onAppear, onAfterAppear, onAppearCancelled } = props; const key = String(vnode.key); const leavingVNodesCache = getLeavingNodesForType(state, vnode); const callHook = (hook, args) => { hook && callWithAsyncErrorHandling(hook, instance, 9 /* TRANSITION_HOOK */, args); }; const hooks = { mode, persisted, beforeEnter(el) { let hook = onBeforeEnter; if (!state.isMounted) { if (appear) { hook = onBeforeAppear || onBeforeEnter; } else { return; } } // for same element (v-show) if (el._leaveCb) { el._leaveCb(true /* cancelled */); } // for toggled element with same key (v-if) const leavingVNode = leavingVNodesCache[key]; if (leavingVNode && isSameVNodeType(vnode, leavingVNode) && leavingVNode.el._leaveCb) { // force early removal (not cancelled) leavingVNode.el._leaveCb(); } callHook(hook, [el]); }, enter(el) { let hook = onEnter; let afterHook = onAfterEnter; let cancelHook = onEnterCancelled; if (!state.isMounted) { if (appear) { hook = onAppear || onEnter; afterHook = onAfterAppear || onAfterEnter; cancelHook = onAppearCancelled || onEnterCancelled; } else { return; } } let called = false; const done = (el._enterCb = (cancelled) => { if (called) return; called = true; if (cancelled) { callHook(cancelHook, [el]); } else { callHook(afterHook, [el]); } if (hooks.delayedLeave) { hooks.delayedLeave(); } el._enterCb = undefined; }); if (hook) { hook(el, done); if (hook.length <= 1) { done(); } } else { done(); } }, leave(el, remove) { const key = String(vnode.key); if (el._enterCb) { el._enterCb(true /* cancelled */); } if (state.isUnmounting) { return remove(); } callHook(onBeforeLeave, [el]); let called = false; const done = (el._leaveCb = (cancelled) => { if (called) return; called = true; remove(); if (cancelled) { callHook(onLeaveCancelled, [el]); } else { callHook(onAfterLeave, [el]); } el._leaveCb = undefined; if (leavingVNodesCache[key] === vnode) { delete leavingVNodesCache[key]; } }); leavingVNodesCache[key] = vnode; if (onLeave) { onLeave(el, done); if (onLeave.length <= 1) { done(); } } else { done(); } }, clone(vnode) { return resolveTransitionHooks(vnode, props, state, instance); } }; return hooks; } // the placeholder really only handles one special case: KeepAlive // in the case of a KeepAlive in a leave phase we need to return a KeepAlive // placeholder with empty content to avoid the KeepAlive instance from being // unmounted. function emptyPlaceholder(vnode) { if (isKeepAlive(vnode)) { vnode = cloneVNode(vnode); vnode.children = null; return vnode; } } function getKeepAliveChild(vnode) { return isKeepAlive(vnode) ? vnode.children ? vnode.children[0] : undefined : vnode; } function setTransitionHooks(vnode, hooks) { if (vnode.shapeFlag & 6 /* COMPONENT */ && vnode.component) { setTransitionHooks(vnode.component.subTree, hooks); } else if (vnode.shapeFlag & 128 /* SUSPENSE */) { vnode.ssContent.transition = hooks.clone(vnode.ssContent); vnode.ssFallback.transition = hooks.clone(vnode.ssFallback); } else { vnode.transition = hooks; } } function getTransitionRawChildren(children, keepComment = false) { let ret = []; let keyedFragmentCount = 0; for (let i = 0; i < children.length; i++) { const child = children[i]; // handle fragment children case, e.g. v-for if (child.type === Fragment) { if (child.patchFlag & 128 /* KEYED_FRAGMENT */) keyedFragmentCount++; ret = ret.concat(getTransitionRawChildren(child.children, keepComment)); } // comment placeholders should be skipped, e.g. v-if else if (keepComment || child.type !== Comment) { ret.push(child); } } // #1126 if a transition children list contains multiple sub fragments, these // fragments will be merged into a flat children array. Since each v-for // fragment may contain different static bindings inside, we need to de-op // these children to force full diffs to ensure correct behavior. if (keyedFragmentCount > 1) { for (let i = 0; i < ret.length; i++) { ret[i].patchFlag = -2 /* BAIL */; } } return ret; } const isKeepAlive = (vnode) => vnode.type.__isKeepAlive; const KeepAliveImpl = { name: `KeepAlive`, // Marker for special handling inside the renderer. We are not using a === // check directly on KeepAlive in the renderer, because importing it directly // would prevent it from being tree-shaken. __isKeepAlive: true, props: { include: [String, RegExp, Array], exclude: [String, RegExp, Array], max: [String, Number] }, setup(props, { slots }) { const cache = new Map(); const keys = new Set(); let current = null; const instance = getCurrentInstance(); const parentSuspense = instance.suspense; // KeepAlive communicates with the instantiated renderer via the // ctx where the renderer passes in its internals, // and the KeepAlive instance exposes activate/deactivate implementations. // The whole point of this is to avoid importing KeepAlive directly in the // renderer to facilitate tree-shaking. const sharedContext = instance.ctx; const { renderer: { p: patch, m: move, um: _unmount, o: { createElement } } } = sharedContext; const storageContainer = createElement('div'); sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => { const instance = vnode.component; move(vnode, container, anchor, 0 /* ENTER */, parentSuspense); // in case props have changed patch(instance.vnode, vnode, container, anchor, instance, parentSuspense, isSVG, optimized); queuePostRenderEffect(() => { instance.isDeactivated = false; if (instance.a) { shared.invokeArrayFns(instance.a); } const vnodeHook = vnode.props && vnode.props.onVnodeMounted; if (vnodeHook) { invokeVNodeHook(vnodeHook, instance.parent, vnode); } }, parentSuspense); }; sharedContext.deactivate = (vnode) => { const instance = vnode.component; move(vnode, storageContainer, null, 1 /* LEAVE */, parentSuspense); queuePostRenderEffect(() => { if (instance.da) { shared.invokeArrayFns(instance.da); } const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted; if (vnodeHook) { invokeVNodeHook(vnodeHook, instance.parent, vnode); } instance.isDeactivated = true; }, parentSuspense); }; function unmount(vnode) { // reset the shapeFlag so it can be properly unmounted resetShapeFlag(vnode); _unmount(vnode, instance, parentSuspense); } function pruneCache(filter) { cache.forEach((vnode, key) => { const name = getComponentName(vnode.type); if (name && (!filter || !filter(name))) { pruneCacheEntry(key); } }); } function pruneCacheEntry(key) { const cached = cache.get(key); if (!current || cached.type !== current.type) { unmount(cached); } else if (current) { // current active instance should no longer be kept-alive. // we can't unmount it now but it might be later, so reset its flag now. resetShapeFlag(current); } cache.delete(key); keys.delete(key); } // prune cache on include/exclude prop change watch(() => [props.include, props.exclude], ([include, exclude]) => { include && pruneCache(name => matches(include, name)); exclude && pruneCache(name => !matches(exclude, name)); }, // prune post-render after `current` has been updated { flush: 'post', deep: true }); // cache sub tree after render let pendingCacheKey = null; const cacheSubtree = () => { // fix #1621, the pendingCacheKey could be 0 if (pendingCacheKey != null) { cache.set(pendingCacheKey, getInnerChild(instance.subTree)); } }; onMounted(cacheSubtree); onUpdated(cacheSubtree); onBeforeUnmount(() => { cache.forEach(cached => { const { subTree, suspense } = instance; const vnode = getInnerChild(subTree); if (cached.type === vnode.type) { // current instance will be unmounted as part of keep-alive's unmount resetShapeFlag(vnode); // but invoke its deactivated hook here const da = vnode.component.da; da && queuePostRenderEffect(da, suspense); return; } unmount(cached); }); }); return () => { pendingCacheKey = null; if (!slots.default) { return null; } const children = slots.default(); const rawVNode = children[0]; if (children.length > 1) { current = null; return children; } else if (!isVNode(rawVNode) || (!(rawVNode.shapeFlag & 4 /* STATEFUL_COMPONENT */) && !(rawVNode.shapeFlag & 128 /* SUSPENSE */))) { current = null; return rawVNode; } let vnode = getInnerChild(rawVNode); const comp = vnode.type; const name = getComponentName(comp); const { include, exclude, max } = props; if ((include && (!name || !matches(include, name))) || (exclude && name && matches(exclude, name))) { current = vnode; return rawVNode; } const key = vnode.key == null ? comp : vnode.key; const cachedVNode = cache.get(key); // clone vnode if it's reused because we are going to mutate it if (vnode.el) { vnode = cloneVNode(vnode); if (rawVNode.shapeFlag & 128 /* SUSPENSE */) { rawVNode.ssContent = vnode; } } // #1513 it's possible for the returned vnode to be cloned due to attr // fallthrough or scopeId, so the vnode here may not be the final vnode // that is mounted. Instead of caching it directly, we store the pending // key and cache `instance.subTree` (the normalized vnode) in // beforeMount/beforeUpdate hooks. pendingCacheKey = key; if (cachedVNode) { // copy over mounted state vnode.el = cachedVNode.el; vnode.component = cachedVNode.component; if (vnode.transition) { // recursively update transition hooks on subTree setTransitionHooks(vnode, vnode.transition); } // avoid vnode being mounted as fresh vnode.shapeFlag |= 512 /* COMPONENT_KEPT_ALIVE */; // make this key the freshest keys.delete(key); keys.add(key); } else { keys.add(key); // prune oldest entry if (max && keys.size > parseInt(max, 10)) { pruneCacheEntry(keys.values().next().value); } } // avoid vnode being unmounted vnode.shapeFlag |= 256 /* COMPONENT_SHOULD_KEEP_ALIVE */; current = vnode; return rawVNode; }; } }; // export the public type for h/tsx inference // also to avoid inline import() in generated d.ts files const KeepAlive = KeepAliveImpl; function matches(pattern, name) { if (shared.isArray(pattern)) { return pattern.some((p) => matches(p, name)); } else if (shared.isString(pattern)) { return pattern.split(',').indexOf(name) > -1; } else if (pattern.test) { return pattern.test(name); } /* istanbul ignore next */ return false; } function onActivated(hook, target) { registerKeepAliveHook(hook, "a" /* ACTIVATED */, target); } function onDeactivated(hook, target) { registerKeepAliveHook(hook, "da" /* DEACTIVATED */, target); } function registerKeepAliveHook(hook, type, target = currentInstance) { // cache the deactivate branch check wrapper for injected hooks so the same // hook can be properly deduped by the scheduler. "__wdc" stands for "with // deactivation check". const wrappedHook = hook.__wdc || (hook.__wdc = () => { // only fire the hook if the target instance is NOT in a deactivated branch. let current = target; while (current) { if (current.isDeactivated) { return; } current = current.parent; } hook(); }); injectHook(type, wrappedHook, target); // In addition to registering it on the target instance, we walk up the parent // chain and register it on all ancestor instances that are keep-alive roots. // This avoids the need to walk the entire component tree when invoking these // hooks, and more importantly, avoids the need to track child components in // arrays. if (target) { let current = target.parent; while (current && current.parent) { if (isKeepAlive(current.parent.vnode)) { injectToKeepAliveRoot(wrappedHook, type, target, current); } current = current.parent; } } } function injectToKeepAliveRoot(hook, type, target, keepAliveRoot) { // injectHook wraps the original for error handling, so make sure to remove // the wrapped version. const injected = injectHook(type, hook, keepAliveRoot, true /* prepend */); onUnmounted(() => { shared.remove(keepAliveRoot[type], injected); }, target); } function resetShapeFlag(vnode) { let shapeFlag = vnode.shapeFlag; if (shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) { shapeFlag -= 256 /* COMPONENT_SHOULD_KEEP_ALIVE */; } if (shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) { shapeFlag -= 512 /* COMPONENT_KEPT_ALIVE */; } vnode.shapeFlag = shapeFlag; } function getInnerChild(vnode) { return vnode.shapeFlag & 128 /* SUSPENSE */ ? vnode.ssContent : vnode; } const isInternalKey = (key) => key[0] === '_' || key === '$stable'; const normalizeSlotValue = (value) => shared.isArray(value) ? value.map(normalizeVNode) : [normalizeVNode(value)]; const normalizeSlot = (key, rawSlot, ctx) => withCtx((props) => { return normalizeSlotValue(rawSlot(props)); }, ctx); const normalizeObjectSlots = (rawSlots, slots) => { const ctx = rawSlots._ctx; for (const key in rawSlots) { if (isInternalKey(key)) continue; const value = rawSlots[key]; if (shared.isFunction(value)) { slots[key] = normalizeSlot(key, value, ctx); } else if (value != null) { const normalized = normalizeSlotValue(value); slots[key] = () => normalized; } } }; const normalizeVNodeSlots = (instance, children) => { const normalized = normalizeSlotValue(children); instance.slots.default = () => normalized; }; const initSlots = (instance, children) => { if (instance.vnode.shapeFlag & 32 /* SLOTS_CHILDREN */) { const type = children._; if (type) { instance.slots = children; // make compiler marker non-enumerable shared.def(children, '_', type); } else { normalizeObjectSlots(children, (instance.slots = {})); } } else { instance.slots = {}; if (children) { normalizeVNodeSlots(instance, children); } } shared.def(instance.slots, InternalObjectKey, 1); }; const updateSlots = (instance, children) => { const { vnode, slots } = instance; let needDeletionCheck = true; let deletionComparisonTarget = shared.EMPTY_OBJ; if (vnode.shapeFlag & 32 /* SLOTS_CHILDREN */) { const type = children._; if (type) { // compiled slots. if (type === 1 /* STABLE */) { // compiled AND stable. // no need to update, and skip stale slots removal. needDeletionCheck = false; } else { // compiled but dynamic (v-if/v-for on slots) - update slots, but skip // normalization. shared.extend(slots, children); } } else { needDeletionCheck = !children.$stable; normalizeObjectSlots(children, slots); } deletionComparisonTarget = children; } else if (children) { // non slot object children (direct value) passed to a component normalizeVNodeSlots(instance, children); deletionComparisonTarget = { default: 1 }; } // delete stale slots if (needDeletionCheck) { for (const key in slots) { if (!isInternalKey(key) && !(key in deletionComparisonTarget)) { delete slots[key]; } } } }; /** Runtime helper for applying directives to a vnode. Example usage: const comp = resolveComponent('comp') const foo = resolveDirective('foo') const bar = resolveDirective('bar') return withDirectives(h(comp), [ [foo, this.x], [bar, this.y] ]) */ /** * Adds directives to a VNode. */ function withDirectives(vnode, directives) { const internalInstance = currentRenderingInstance; if (internalInstance === null) { return vnode; } const instance = internalInstance.proxy; const bindings = vnode.dirs || (vnode.dirs = []); for (let i = 0; i < directives.length; i++) { let [dir, value, arg, modifiers = shared.EMPTY_OBJ] = directives[i]; if (shared.isFunction(dir)) { dir = { mounted: dir, updated: dir }; } bindings.push({ dir, instance, value, oldValue: void 0, arg, modifiers }); } return vnode; } function invokeDirectiveHook(vnode, prevVNode, instance, name) { const bindings = vnode.dirs; const oldBindings = prevVNode && prevVNode.dirs; for (let i = 0; i < bindings.length; i++) { const binding = bindings[i]; if (oldBindings) { binding.oldValue = oldBindings[i].value; } const hook = binding.dir[name]; if (hook) { callWithAsyncErrorHandling(hook, instance, 8 /* DIRECTIVE_HOOK */, [ vnode.el, binding, vnode, prevVNode ]); } } } function createAppContext() { return { app: null, config: { isNativeTag: shared.NO, performance: false, globalProperties: {}, optionMergeStrategies: {}, isCustomElement: shared.NO, errorHandler: undefined, warnHandler: undefined }, mixins: [], components: {}, directives: {}, provides: Object.create(null) }; } let uid = 0; function createAppAPI(render, hydrate) { return function createApp(rootComponent, rootProps = null) { if (rootProps != null && !shared.isObject(rootProps)) { rootProps = null; } const context = createAppContext(); const installedPlugins = new Set(); let isMounted = false; const app = (context.app = { _uid: uid++, _component: rootComponent, _props: rootProps, _container: null, _context: context, version, get config() { return context.config; }, set config(v) { }, use(plugin, ...options) { if (installedPlugins.has(plugin)) ; else if (plugin && shared.isFunction(plugin.install)) { installedPlugins.add(plugin); plugin.install(app, ...options); } else if (shared.isFunction(plugin)) { installedPlugins.add(plugin); plugin(app, ...options); } else ; return app; }, mixin(mixin) { { if (!context.mixins.includes(mixin)) { context.mixins.push(mixin); // global mixin with props/emits de-optimizes props/emits // normalization caching. if (mixin.props || mixin.emits) { context.deopt = true; } } } return app; }, component(name, component) { if (!component) { return context.components[name]; } context.components[name] = component; return app; }, directive(name, directive) { if (!directive) { return context.directives[name]; } context.directives[name] = directive; return app; }, mount(rootContainer, isHydrate) { if (!isMounted) { const vnode = createVNode(rootComponent, rootProps); // store app context on the root VNode. // this will be set on the root instance on initial mount. vnode.appContext = context; if (isHydrate && hydrate) { hydrate(vnode, rootContainer); } else { render(vnode, rootContainer); } isMounted = true; app._container = rootContainer; rootContainer.__vue_app__ = app; return vnode.component.proxy; } }, unmount() { if (isMounted) { render(null, app._container); delete app._container.__vue_app__; } }, provide(key, value) { // TypeScript doesn't allow symbols as index type // https://github.com/Microsoft/TypeScript/issues/24587 context.provides[key] = value; return app; } }); return app; }; } let hasMismatch = false; const isSVGContainer = (container) => /svg/.test(container.namespaceURI) && container.tagName !== 'foreignObject'; const isComment = (node) => node.nodeType === 8 /* COMMENT */; // Note: hydration is DOM-specific // But we have to place it in core due to tight coupling with core - splitting // it out creates a ton of unnecessary complexity. // Hydration also depends on some renderer internal logic which needs to be // passed in via arguments. function createHydrationFunctions(rendererInternals) { const { mt: mountComponent, p: patch, o: { patchProp, nextSibling, parentNode, remove, insert, createComment } } = rendererInternals; const hydrate = (vnode, container) => { hasMismatch = false; hydrateNode(container.firstChild, vnode, null, null); flushPostFlushCbs(); if (hasMismatch && !false) { // this error should show up in production console.error(`Hydration completed but contains mismatches.`); } }; const hydrateNode = (node, vnode, parentComponent, parentSuspense, optimized = false) => { const isFragmentStart = isComment(node) && node.data === '['; const onMismatch = () => handleMismatch(node, vnode, parentComponent, parentSuspense, isFragmentStart); const { type, ref, shapeFlag } = vnode; const domType = node.nodeType; vnode.el = node; let nextNode = null; switch (type) { case Text: if (domType !== 3 /* TEXT */) { nextNode = onMismatch(); } else { if (node.data !== vnode.children) { hasMismatch = true; node.data = vnode.children; } nextNode = nextSibling(node); } break; case Comment: if (domType !== 8 /* COMMENT */ || isFragmentStart) { nextNode = onMismatch(); } else { nextNode = nextSibling(node); } break; case Static: if (domType !== 1 /* ELEMENT */) { nextNode = onMismatch(); } else { // determine anchor, adopt content nextNode = node; // if the static vnode has its content stripped during build, // adopt it from the server-rendered HTML. const needToAdoptContent = !vnode.children.length; for (let i = 0; i < vnode.staticCount; i++) { if (needToAdoptContent) vnode.children += nextNode.outerHTML; if (i === vnode.staticCount - 1) { vnode.anchor = nextNode; } nextNode = nextSibling(nextNode); } return nextNode; } break; case Fragment: if (!isFragmentStart) { nextNode = onMismatch(); } else { nextNode = hydrateFragment(node, vnode, parentComponent, parentSuspense, optimized); } break; default: if (shapeFlag & 1 /* ELEMENT */) { if (domType !== 1 /* ELEMENT */ || vnode.type !== node.tagName.toLowerCase()) { nextNode = onMismatch(); } else { nextNode = hydrateElement(node, vnode, parentComponent, parentSuspense, optimized); } } else if (shapeFlag & 6 /* COMPONENT */) { // when setting up the render effect, if the initial vnode already // has .el set, the component will perform hydration instead of mount // on its sub-tree. const container = parentNode(node); const hydrateComponent = () => { mountComponent(vnode, container, null, parentComponent, parentSuspense, isSVGContainer(container), optimized); }; // async component const loadAsync = vnode.type.__asyncLoader; if (loadAsync) { loadAsync().then(hydrateComponent); } else { hydrateComponent(); } // component may be async, so in the case of fragments we cannot rely // on component's rendered output to determine the end of the fragment // instead, we do a lookahead to find the end anchor node. nextNode = isFragmentStart ? locateClosingAsyncAnchor(node) : nextSibling(node); } else if (shapeFlag & 64 /* TELEPORT */) { if (domType !== 8 /* COMMENT */) { nextNode = onMismatch(); } else { nextNode = vnode.type.hydrate(node, vnode, parentComponent, parentSuspense, optimized, rendererInternals, hydrateChildren); } } else if (shapeFlag & 128 /* SUSPENSE */) { nextNode = vnode.type.hydrate(node, vnode, parentComponent, parentSuspense, isSVGContainer(parentNode(node)), optimized, rendererInternals, hydrateNode); } else ; } if (ref != null) { setRef(ref, null, parentSuspense, vnode); } return nextNode; }; const hydrateElement = (el, vnode, parentComponent, parentSuspense, optimized) => { optimized = optimized || !!vnode.dynamicChildren; const { props, patchFlag, shapeFlag, dirs } = vnode; // skip props & children if this is hoisted static nodes if (patchFlag !== -1 /* HOISTED */) { if (dirs) { invokeDirectiveHook(vnode, null, parentComponent, 'created'); } // props if (props) { if (!optimized || (patchFlag & 16 /* FULL_PROPS */ || patchFlag & 32 /* HYDRATE_EVENTS */)) { for (const key in props) { if (!shared.isReservedProp(key) && shared.isOn(key)) { patchProp(el, key, null, props[key]); } } } else if (props.onClick) { // Fast path for click listeners (which is most often) to avoid // iterating through props. patchProp(el, 'onClick', null, props.onClick); } } // vnode / directive hooks let vnodeHooks; if ((vnodeHooks = props && props.onVnodeBeforeMount)) { invokeVNodeHook(vnodeHooks, parentComponent, vnode); } if (dirs) { invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount'); } if ((vnodeHooks = props && props.onVnodeMounted) || dirs) { queueEffectWithSuspense(() => { vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode); dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted'); }, parentSuspense); } // children if (shapeFlag & 16 /* ARRAY_CHILDREN */ && // skip if element has innerHTML / textContent !(props && (props.innerHTML || props.textContent))) { let next = hydrateChildren(el.firstChild, vnode, el, parentComponent, parentSuspense, optimized); while (next) { hasMismatch = true; // The SSRed DOM contains more nodes than it should. Remove them. const cur = next; next = next.nextSibling; remove(cur); } } else if (shapeFlag & 8 /* TEXT_CHILDREN */) { if (el.textContent !== vnode.children) { hasMismatch = true; el.textContent = vnode.children; } } } return el.nextSibling; }; const hydrateChildren = (node, parentVNode, container, parentComponent, parentSuspense, optimized) => { optimized = optimized || !!parentVNode.dynamicChildren; const children = parentVNode.children; const l = children.length; for (let i = 0; i < l; i++) { const vnode = optimized ? children[i] : (children[i] = normalizeVNode(children[i])); if (node) { node = hydrateNode(node, vnode, parentComponent, parentSuspense, optimized); } else { hasMismatch = true; // the SSRed DOM didn't contain enough nodes. Mount the missing ones. patch(null, vnode, container, null, parentComponent, parentSuspense, isSVGContainer(container)); } } return node; }; const hydrateFragment = (node, vnode, parentComponent, parentSuspense, optimized) => { const container = parentNode(node); const next = hydrateChildren(nextSibling(node), vnode, container, parentComponent, parentSuspense, optimized); if (next && isComment(next) && next.data === ']') { return nextSibling((vnode.anchor = next)); } else { // fragment didn't hydrate successfully, since we didn't get a end anchor // back. This should have led to node/children mismatch warnings. hasMismatch = true; // since the anchor is missing, we need to create one and insert it insert((vnode.anchor = createComment(`]`)), container, next); return next; } }; const handleMismatch = (node, vnode, parentComponent, parentSuspense, isFragment) => { hasMismatch = true; vnode.el = null; if (isFragment) { // remove excessive fragment nodes const end = locateClosingAsyncAnchor(node); while (true) { const next = nextSibling(node); if (next && next !== end) { remove(next); } else { break; } } } const next = nextSibling(node); const container = parentNode(node); remove(node); patch(null, vnode, container, next, parentComponent, parentSuspense, isSVGContainer(container)); return next; }; const locateClosingAsyncAnchor = (node) => { let match = 0; while (node) { node = nextSibling(node); if (node && isComment(node)) { if (node.data === '[') match++; if (node.data === ']') { if (match === 0) { return nextSibling(node); } else { match--; } } } } return node; }; return [hydrate, hydrateNode]; } // implementation, close to no-op function defineComponent(options) { return shared.isFunction(options) ? { setup: options, name: options.name } : options; } const isAsyncWrapper = (i) => !!i.type.__asyncLoader; function defineAsyncComponent(source) { if (shared.isFunction(source)) { source = { loader: source }; } const { loader, loadingComponent, errorComponent, delay = 200, timeout, // undefined = never times out suspensible = true, onError: userOnError } = source; let pendingRequest = null; let resolvedComp; let retries = 0; const retry = () => { retries++; pendingRequest = null; return load(); }; const load = () => { let thisRequest; return (pendingRequest || (thisRequest = pendingRequest = loader() .catch(err => { err = err instanceof Error ? err : new Error(String(err)); if (userOnError) { return new Promise((resolve, reject) => { const userRetry = () => resolve(retry()); const userFail = () => reject(err); userOnError(err, userRetry, userFail, retries + 1); }); } else { throw err; } }) .then((comp) => { if (thisRequest !== pendingRequest && pendingRequest) { return pendingRequest; } // interop module default if (comp && (comp.__esModule || comp[Symbol.toStringTag] === 'Module')) { comp = comp.default; } resolvedComp = comp; return comp; }))); }; return defineComponent({ __asyncLoader: load, name: 'AsyncComponentWrapper', setup() { const instance = currentInstance; // already resolved if (resolvedComp) { return () => createInnerComp(resolvedComp, instance); } const onError = (err) => { pendingRequest = null; handleError(err, instance, 13 /* ASYNC_COMPONENT_LOADER */, !errorComponent /* do not throw in dev if user provided error component */); }; // suspense-controlled or SSR. if ((suspensible && instance.suspense) || (isInSSRComponentSetup)) { return load() .then(comp => { return () => createInnerComp(comp, instance); }) .catch(err => { onError(err); return () => errorComponent ? createVNode(errorComponent, { error: err }) : null; }); } const loaded = reactivity.ref(false); const error = reactivity.ref(); const delayed = reactivity.ref(!!delay); if (delay) { setTimeout(() => { delayed.value = false; }, delay); } if (timeout != null) { setTimeout(() => { if (!loaded.value && !error.value) { const err = new Error(`Async component timed out after ${timeout}ms.`); onError(err); error.value = err; } }, timeout); } load() .then(() => { loaded.value = true; }) .catch(err => { onError(err); error.value = err; }); return () => { if (loaded.value && resolvedComp) { return createInnerComp(resolvedComp, instance); } else if (error.value && errorComponent) { return createVNode(errorComponent, { error: error.value }); } else if (loadingComponent && !delayed.value) { return createVNode(loadingComponent); } }; } }); } function createInnerComp(comp, { vnode: { ref, props, children } }) { const vnode = createVNode(comp, props, children); // ensure inner component inherits the async wrapper's ref owner vnode.ref = ref; return vnode; } const prodEffectOptions = { scheduler: queueJob, // #1801, #2043 component render effects should allow recursive updates allowRecurse: true }; const queuePostRenderEffect = queueEffectWithSuspense ; const setRef = (rawRef, oldRawRef, parentSuspense, vnode) => { if (shared.isArray(rawRef)) { rawRef.forEach((r, i) => setRef(r, oldRawRef && (shared.isArray(oldRawRef) ? oldRawRef[i] : oldRawRef), parentSuspense, vnode)); return; } let value; if (!vnode || isAsyncWrapper(vnode)) { value = null; } else { if (vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */) { value = vnode.component.exposed || vnode.component.proxy; } else { value = vnode.el; } } const { i: owner, r: ref } = rawRef; const oldRef = oldRawRef && oldRawRef.r; const refs = owner.refs === shared.EMPTY_OBJ ? (owner.refs = {}) : owner.refs; const setupState = owner.setupState; // unset old ref if (oldRef != null && oldRef !== ref) { if (shared.isString(oldRef)) { refs[oldRef] = null; if (shared.hasOwn(setupState, oldRef)) { setupState[oldRef] = null; } } else if (reactivity.isRef(oldRef)) { oldRef.value = null; } } if (shared.isString(ref)) { const doSet = () => { refs[ref] = value; if (shared.hasOwn(setupState, ref)) { setupState[ref] = value; } }; // #1789: for non-null values, set them after render // null values means this is unmount and it should not overwrite another // ref with the same key if (value) { doSet.id = -1; queuePostRenderEffect(doSet, parentSuspense); } else { doSet(); } } else if (reactivity.isRef(ref)) { const doSet = () => { ref.value = value; }; if (value) { doSet.id = -1; queuePostRenderEffect(doSet, parentSuspense); } else { doSet(); } } else if (shared.isFunction(ref)) { callWithErrorHandling(ref, owner, 12 /* FUNCTION_REF */, [value, refs]); } else ; }; /** * The createRenderer function accepts two generic arguments: * HostNode and HostElement, corresponding to Node and Element types in the * host environment. For example, for runtime-dom, HostNode would be the DOM * `Node` interface and HostElement would be the DOM `Element` interface. * * Custom renderers can pass in the platform specific types like this: * * ``` js * const { render, createApp } = createRenderer({ * patchProp, * ...nodeOps * }) * ``` */ function createRenderer(options) { return baseCreateRenderer(options); } // Separate API for creating hydration-enabled renderer. // Hydration logic is only used when calling this function, making it // tree-shakable. function createHydrationRenderer(options) { return baseCreateRenderer(options, createHydrationFunctions); } // implementation function baseCreateRenderer(options, createHydrationFns) { const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, forcePatchProp: hostForcePatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, setScopeId: hostSetScopeId = shared.NOOP, cloneNode: hostCloneNode, insertStaticContent: hostInsertStaticContent } = options; // Note: functions inside this closure should use `const xxx = () => {}` // style in order to prevent being inlined by minifiers. const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false) => { // patching & not same type, unmount old tree if (n1 && !isSameVNodeType(n1, n2)) { anchor = getNextHostNode(n1); unmount(n1, parentComponent, parentSuspense, true); n1 = null; } if (n2.patchFlag === -2 /* BAIL */) { optimized = false; n2.dynamicChildren = null; } const { type, ref, shapeFlag } = n2; switch (type) { case Text: processText(n1, n2, container, anchor); break; case Comment: processCommentNode(n1, n2, container, anchor); break; case Static: if (n1 == null) { mountStaticNode(n2, container, anchor, isSVG); } break; case Fragment: processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized); break; default: if (shapeFlag & 1 /* ELEMENT */) { processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized); } else if (shapeFlag & 6 /* COMPONENT */) { processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized); } else if (shapeFlag & 64 /* TELEPORT */) { type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals); } else if (shapeFlag & 128 /* SUSPENSE */) { type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals); } else ; } // set ref if (ref != null && parentComponent) { setRef(ref, n1 && n1.ref, parentSuspense, n2); } }; const processText = (n1, n2, container, anchor) => { if (n1 == null) { hostInsert((n2.el = hostCreateText(n2.children)), container, anchor); } else { const el = (n2.el = n1.el); if (n2.children !== n1.children) { hostSetText(el, n2.children); } } }; const processCommentNode = (n1, n2, container, anchor) => { if (n1 == null) { hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor); } else { // there's no support for dynamic comments n2.el = n1.el; } }; const mountStaticNode = (n2, container, anchor, isSVG) => { [n2.el, n2.anchor] = hostInsertStaticContent(n2.children, container, anchor, isSVG); }; const moveStaticNode = ({ el, anchor }, container, nextSibling) => { let next; while (el && el !== anchor) { next = hostNextSibling(el); hostInsert(el, container, nextSibling); el = next; } hostInsert(anchor, container, nextSibling); }; const removeStaticNode = ({ el, anchor }) => { let next; while (el && el !== anchor) { next = hostNextSibling(el); hostRemove(el); el = next; } hostRemove(anchor); }; const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => { isSVG = isSVG || n2.type === 'svg'; if (n1 == null) { mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized); } else { patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized); } }; const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => { let el; let vnodeHook; const { type, props, shapeFlag, transition, scopeId, patchFlag, dirs } = vnode; if (vnode.el && hostCloneNode !== undefined && patchFlag === -1 /* HOISTED */) { // If a vnode has non-null el, it means it's being reused. // Only static vnodes can be reused, so its mounted DOM nodes should be // exactly the same, and we can simply do a clone here. // only do this in production since cloned trees cannot be HMR updated. el = vnode.el = hostCloneNode(vnode.el); } else { el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is); // mount children first, since some props may rely on child content // being already rendered, e.g. `