Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More

How to use popWarningContext method in Playwright Internal

Best JavaScript code snippet using playwright-internal

runtime-dom.esm-browser.js

Source:runtime-dom.esm-browser.js

...673let stack = [];674function pushWarningContext(vnode) {675    stack.push(vnode);676}677function popWarningContext() {678    stack.pop();679}680function warn(msg, ...args) {681    const instance = stack.length ? stack[stack.length - 1].component : null;682    const appWarnHandler = instance && instance.appContext.config.warnHandler;683    const trace = getComponentTrace();684    if (appWarnHandler) {685        appWarnHandler(msg + args.join(''), instance && instance.renderProxy, formatTrace(trace).join(''));686        return;687    }688    console.warn(`[Vue warn]: ${msg}`, ...args);689    // avoid spamming console during tests690    if (typeof process !== 'undefined' && process.env.NODE_ENV === 'test') {691        return;692    }693    if (!trace.length) {694        return;695    }696    if (trace.length > 1 && console.groupCollapsed) {697        console.groupCollapsed('at', ...formatTraceEntry(trace[0]));698        const logs = [];699        trace.slice(1).forEach((entry, i) => {700            if (i !== 0)701                logs.push('\n');702            logs.push(...formatTraceEntry(entry, i + 1));703        });704        console.log(...logs);705        console.groupEnd();706    }707    else {708        console.log(...formatTrace(trace));709    }710}711function getComponentTrace() {712    let currentVNode = stack[stack.length - 1];713    if (!currentVNode) {714        return [];715    }716    // we can't just use the stack because it will be incomplete during updates717    // that did not start from the root. Re-construct the parent chain using718    // instance parent pointers.719    const normalizedStack = [];720    while (currentVNode) {721        const last = normalizedStack[0];722        if (last && last.vnode === currentVNode) {723            last.recurseCount++;724        }725        else {726            normalizedStack.push({727                vnode: currentVNode,728                recurseCount: 0729            });730        }731        const parentInstance = currentVNode.component732            .parent;733        currentVNode = parentInstance && parentInstance.vnode;734    }735    return normalizedStack;736}737function formatTrace(trace) {738    const logs = [];739    trace.forEach((entry, i) => {740        const formatted = formatTraceEntry(entry, i);741        if (i === 0) {742            logs.push('at', ...formatted);743        }744        else {745            logs.push('\n', ...formatted);746        }747    });748    return logs;749}750function formatTraceEntry({ vnode, recurseCount }, depth = 0) {751    const padding = depth === 0 ? '' : ' '.repeat(depth * 2 + 1);752    const postfix = recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``;753    const open = padding + `<${formatComponentName(vnode)}`;754    const close = `>` + postfix;755    const rootLabel = vnode.component.parent == null ? `(Root)` : ``;756    return vnode.props757        ? [open, ...formatProps(vnode.props), close, rootLabel]758        : [open + close, rootLabel];759}760const classifyRE = /(?:^|[-_])(\w)/g;761const classify = (str) => str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '');762function formatComponentName(vnode, file) {763    const Component = vnode.type;764    let name = Component.displayName || Component.name;765    if (!name && file) {766        const match = file.match(/([^/\\]+)\.vue$/);767        if (match) {768            name = match[1];769        }770    }771    return name ? classify(name) : 'AnonymousComponent';772}773function formatProps(props) {774    const res = [];775    for (const key in props) {776        const value = props[key];777        if (isString(value)) {778            res.push(`${key}=${JSON.stringify(value)}`);779        }780        else {781            res.push(`${key}=`, toRaw(value));782        }783    }784    return res;785}786787const ErrorTypeStrings = {788    ["bc" /* BEFORE_CREATE */]: 'beforeCreate hook',789    ["c" /* CREATED */]: 'created hook',790    ["bm" /* BEFORE_MOUNT */]: 'beforeMount hook',791    ["m" /* MOUNTED */]: 'mounted hook',792    ["bu" /* BEFORE_UPDATE */]: 'beforeUpdate hook',793    ["u" /* UPDATED */]: 'updated',794    ["bum" /* BEFORE_UNMOUNT */]: 'beforeUnmount hook',795    ["um" /* UNMOUNTED */]: 'unmounted hook',796    ["a" /* ACTIVATED */]: 'activated hook',797    ["da" /* DEACTIVATED */]: 'deactivated hook',798    ["ec" /* ERROR_CAPTURED */]: 'errorCaptured hook',799    ["rtc" /* RENDER_TRACKED */]: 'renderTracked hook',800    ["rtg" /* RENDER_TRIGGERED */]: 'renderTriggered hook',801    [0 /* SETUP_FUNCTION */]: 'setup function',802    [1 /* RENDER_FUNCTION */]: 'render function',803    [2 /* WATCH_GETTER */]: 'watcher getter',804    [3 /* WATCH_CALLBACK */]: 'watcher callback',805    [4 /* WATCH_CLEANUP */]: 'watcher cleanup function',806    [5 /* NATIVE_EVENT_HANDLER */]: 'native event handler',807    [6 /* COMPONENT_EVENT_HANDLER */]: 'component event handler',808    [7 /* DIRECTIVE_HOOK */]: 'directive hook',809    [8 /* APP_ERROR_HANDLER */]: 'app errorHandler',810    [9 /* APP_WARN_HANDLER */]: 'app warnHandler',811    [10 /* SCHEDULER */]: 'scheduler flush. This is likely a Vue internals bug. ' +812        'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue'813};814function callWithErrorHandling(fn, instance, type, args) {815    let res;816    try {817        res = args ? fn(...args) : fn();818    }819    catch (err) {820        handleError(err, instance, type);821    }822    return res;823}824function callWithAsyncErrorHandling(fn, instance, type, args) {825    const res = callWithErrorHandling(fn, instance, type, args);826    if (res != null && !res._isVue && typeof res.then === 'function') {827        res.catch((err) => {828            handleError(err, instance, type);829        });830    }831    return res;832}833function handleError(err, instance, type) {834    const contextVNode = instance ? instance.vnode : null;835    if (instance) {836        let cur = instance.parent;837        // the exposed instance is the render proxy to keep it consistent with 2.x838        const exposedInstance = instance.renderProxy;839        // in production the hook receives only the error code840        const errorInfo =  ErrorTypeStrings[type] ;841        while (cur) {842            const errorCapturedHooks = cur.ec;843            if (errorCapturedHooks !== null) {844                for (let i = 0; i < errorCapturedHooks.length; i++) {845                    if (errorCapturedHooks[i](err, exposedInstance, errorInfo)) {846                        return;847                    }848                }849            }850            cur = cur.parent;851        }852        // app-level handling853        const appErrorHandler = instance.appContext.config.errorHandler;854        if (appErrorHandler) {855            callWithErrorHandling(appErrorHandler, null, 8 /* APP_ERROR_HANDLER */, [err, exposedInstance, errorInfo]);856            return;857        }858    }859    logError(err, type, contextVNode);860}861function logError(err, type, contextVNode) {862    // default behavior is crash in prod & test, recover in dev.863    // TODO we should probably make this configurable via `createApp`864    if (865        !(typeof process !== 'undefined' && process.env.NODE_ENV === 'test')) {866        const info = ErrorTypeStrings[type];867        if (contextVNode) {868            pushWarningContext(contextVNode);869        }870        warn(`Unhandled error${info ? ` during execution of ${info}` : ``}`);871        console.error(err);872        if (contextVNode) {873            popWarningContext();874        }875    }876    else {877        throw err;878    }879}880881const queue = [];882const postFlushCbs = [];883const p = Promise.resolve();884let isFlushing = false;885function nextTick(fn) {886    return fn ? p.then(fn) : p;887}888function queueJob(job) {889    if (queue.indexOf(job) === -1) {890        queue.push(job);891        if (!isFlushing) {892            nextTick(flushJobs);893        }894    }895}896function queuePostFlushCb(cb) {897    if (Array.isArray(cb)) {898        postFlushCbs.push.apply(postFlushCbs, cb);899    }900    else {901        postFlushCbs.push(cb);902    }903    if (!isFlushing) {904        nextTick(flushJobs);905    }906}907const dedupe = (cbs) => Array.from(new Set(cbs));908function flushPostFlushCbs() {909    if (postFlushCbs.length) {910        const cbs = dedupe(postFlushCbs);911        postFlushCbs.length = 0;912        for (let i = 0; i < cbs.length; i++) {913            cbs[i]();914        }915    }916}917const RECURSION_LIMIT = 100;918function flushJobs(seenJobs) {919    isFlushing = true;920    let job;921    {922        seenJobs = seenJobs || new Map();923    }924    while ((job = queue.shift())) {925        {926            const seen = seenJobs;927            if (!seen.has(job)) {928                seen.set(job, 1);929            }930            else {931                const count = seen.get(job);932                if (count > RECURSION_LIMIT) {933                    throw new Error('Maximum recursive updates exceeded. ' +934                        "You may have code that is mutating state in your component's " +935                        'render function or updated hook.');936                }937                else {938                    seen.set(job, count + 1);939                }940            }941        }942        try {943            job();944        }945        catch (err) {946            handleError(err, null, 10 /* SCHEDULER */);947        }948    }949    flushPostFlushCbs();950    isFlushing = false;951    // some postFlushCb queued jobs!952    // keep flushing until it drains.953    if (queue.length) {954        flushJobs(seenJobs);955    }956}957958const Fragment =  Symbol('Fragment') ;959const Text =  Symbol('Text') ;960const Comment =  Symbol('Empty') ;961const Portal =  Symbol('Portal') ;962const Suspense =  Symbol('Suspense') ;963// Since v-if and v-for are the two possible ways node structure can dynamically964// change, once we consider v-if branches and each v-for fragment a block, we965// can divide a template into nested blocks, and within each block the node966// structure would be stable. This allows us to skip most children diffing967// and only worry about the dynamic nodes (indicated by patch flags).968const blockStack = [];969// Open a block.970// This must be called before `createBlock`. It cannot be part of `createBlock`971// because the children of the block are evaluated before `createBlock` itself972// is called. The generated code typically looks like this:973//974//   function render() {975//     return (openBlock(),createBlock('div', null, [...]))976//   }977//978// disableTracking is true when creating a fragment block, since a fragment979// always diffs its children.980function openBlock(disableTracking) {981    blockStack.push(disableTracking ? null : []);982}983let shouldTrack$1 = true;984// Create a block root vnode. Takes the same exact arguments as `createVNode`.985// A block root keeps track of dynamic nodes within the block in the986// `dynamicChildren` array.987function createBlock(type, props, children, patchFlag, dynamicProps) {988    // avoid a block with optFlag tracking itself989    shouldTrack$1 = false;990    const vnode = createVNode(type, props, children, patchFlag, dynamicProps);991    shouldTrack$1 = true;992    const trackedNodes = blockStack.pop();993    vnode.dynamicChildren =994        trackedNodes && trackedNodes.length ? trackedNodes : EMPTY_ARR;995    // a block is always going to be patched996    trackDynamicNode(vnode);997    return vnode;998}999function isVNode(value) {1000    return value ? value._isVNode === true : false;1001}1002function createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null) {1003    // class & style normalization.1004    if (props !== null) {1005        // for reactive or proxy objects, we need to clone it to enable mutation.1006        if (isReactive(props) || SetupProxySymbol in props) {1007            props = extend({}, props);1008        }1009        // class normalization only needed if the vnode isn't generated by1010        // compiler-optimized code1011        if (props.class != null && !(patchFlag & 2 /* CLASS */)) {1012            props.class = normalizeClass(props.class);1013        }1014        let { style } = props;1015        if (style != null) {1016            // reactive state objects need to be cloned since they are likely to be1017            // mutated1018            if (isReactive(style) && !isArray(style)) {1019                style = extend({}, style);1020            }1021            props.style = normalizeStyle(style);1022        }1023    }1024    // encode the vnode type information into a bitmap1025    const shapeFlag = isString(type)1026        ? 1 /* ELEMENT */1027        : isObject(type)1028            ? 4 /* STATEFUL_COMPONENT */1029            : isFunction(type)1030                ? 2 /* FUNCTIONAL_COMPONENT */1031                : 0;1032    const vnode = {1033        _isVNode: true,1034        type,1035        props,1036        key: (props && props.key) || null,1037        ref: (props && props.ref) || null,1038        children: null,1039        component: null,1040        suspense: null,1041        el: null,1042        anchor: null,1043        target: null,1044        shapeFlag,1045        patchFlag,1046        dynamicProps,1047        dynamicChildren: null,1048        appContext: null1049    };1050    normalizeChildren(vnode, children);1051    // presence of a patch flag indicates this node needs patching on updates.1052    // component nodes also should always be patched, because even if the1053    // component doesn't need to update, it needs to persist the instance on to1054    // the next vnode so that it can be properly unmounted later.1055    if (shouldTrack$1 &&1056        (patchFlag ||1057            shapeFlag & 4 /* STATEFUL_COMPONENT */ ||1058            shapeFlag & 2 /* FUNCTIONAL_COMPONENT */)) {1059        trackDynamicNode(vnode);1060    }1061    return vnode;1062}1063function trackDynamicNode(vnode) {1064    const currentBlockDynamicNodes = blockStack[blockStack.length - 1];1065    if (currentBlockDynamicNodes != null) {1066        currentBlockDynamicNodes.push(vnode);1067    }1068}1069function cloneVNode(vnode) {1070    return {1071        _isVNode: true,1072        type: vnode.type,1073        props: vnode.props,1074        key: vnode.key,1075        ref: vnode.ref,1076        children: vnode.children,1077        target: vnode.target,1078        shapeFlag: vnode.shapeFlag,1079        patchFlag: vnode.patchFlag,1080        dynamicProps: vnode.dynamicProps,1081        dynamicChildren: vnode.dynamicChildren,1082        appContext: vnode.appContext,1083        // these should be set to null since they should only be present on1084        // mounted VNodes. If they are somehow not null, this means we have1085        // encountered an already-mounted vnode being used again.1086        component: null,1087        suspense: null,1088        el: null,1089        anchor: null1090    };1091}1092function normalizeVNode(child) {1093    if (child == null) {1094        // empty placeholder1095        return createVNode(Comment);1096    }1097    else if (isArray(child)) {1098        // fragment1099        return createVNode(Fragment, null, child);1100    }1101    else if (typeof child === 'object') {1102        // already vnode, this should be the most common since compiled templates1103        // always produce all-vnode children arrays1104        return child.el === null ? child : cloneVNode(child);1105    }1106    else {1107        // primitive types1108        return createVNode(Text, null, child + '');1109    }1110}1111function normalizeChildren(vnode, children) {1112    let type = 0;1113    if (children == null) {1114        children = null;1115    }1116    else if (isArray(children)) {1117        type = 16 /* ARRAY_CHILDREN */;1118    }1119    else if (typeof children === 'object') {1120        type = 32 /* SLOTS_CHILDREN */;1121    }1122    else if (isFunction(children)) {1123        children = { default: children };1124        type = 32 /* SLOTS_CHILDREN */;1125    }1126    else {1127        children = isString(children) ? children : children + '';1128        type = 8 /* TEXT_CHILDREN */;1129    }1130    vnode.children = children;1131    vnode.shapeFlag |= type;1132}1133function normalizeStyle(value) {1134    if (isArray(value)) {1135        const res = {};1136        for (let i = 0; i < value.length; i++) {1137            const normalized = normalizeStyle(value[i]);1138            if (normalized) {1139                for (const key in normalized) {1140                    res[key] = normalized[key];1141                }1142            }1143        }1144        return res;1145    }1146    else if (isObject(value)) {1147        return value;1148    }1149}1150function normalizeClass(value) {1151    let res = '';1152    if (isString(value)) {1153        res = value;1154    }1155    else if (isArray(value)) {1156        for (let i = 0; i < value.length; i++) {1157            res += normalizeClass(value[i]) + ' ';1158        }1159    }1160    else if (isObject(value)) {1161        for (const name in value) {1162            if (value[name]) {1163                res += name + ' ';1164            }1165        }1166    }1167    return res.trim();1168}1169const handlersRE = /^on|^vnode/;1170function mergeProps(...args) {1171    const ret = {};1172    extend(ret, args[0]);1173    for (let i = 1; i < args.length; i++) {1174        const toMerge = args[i];1175        for (const key in toMerge) {1176            if (key === 'class') {1177                ret.class = normalizeClass([ret.class, toMerge.class]);1178            }1179            else if (key === 'style') {1180                ret.style = normalizeStyle([ret.style, toMerge.style]);1181            }1182            else if (handlersRE.test(key)) {1183                // on*, vnode*1184                const existing = ret[key];1185                ret[key] = existing1186                    ? [].concat(existing, toMerge[key])1187                    : toMerge[key];1188            }1189            else {1190                ret[key] = toMerge[key];1191            }1192        }1193    }1194    return ret;1195}11961197function injectHook(type, hook, target) {1198    if (target) {1199        (target[type] || (target[type] = [])).push((...args) => {1200            if (target.isUnmounted) {1201                return;1202            }1203            // disable tracking inside all lifecycle hooks1204            // since they can potentially be called inside effects.1205            pauseTracking();1206            // Set currentInstance during hook invocation.1207            // This assumes the hook does not synchronously trigger other hooks, which1208            // can only be false when the user does something really funky.1209            setCurrentInstance(target);1210            const res = callWithAsyncErrorHandling(hook, target, type, args);1211            setCurrentInstance(null);1212            resumeTracking();1213            return res;1214        });1215    }1216    else {1217        const apiName = `on${capitalize(ErrorTypeStrings[type].replace(/ hook$/, ''))}`;1218        warn(`${apiName} is called when there is no active component instance to be ` +1219            `associated with. ` +1220            `Lifecycle injection APIs can only be used during execution of setup().` +1221            ( ` If you are using async setup(), make sure to register lifecycle ` +1222                    `hooks before the first await statement.`1223                ));1224    }1225}1226function onBeforeMount(hook, target = currentInstance) {1227    injectHook("bm" /* BEFORE_MOUNT */, hook, target);1228}1229function onMounted(hook, target = currentInstance) {1230    injectHook("m" /* MOUNTED */, hook, target);1231}1232function onBeforeUpdate(hook, target = currentInstance) {1233    injectHook("bu" /* BEFORE_UPDATE */, hook, target);1234}1235function onUpdated(hook, target = currentInstance) {1236    injectHook("u" /* UPDATED */, hook, target);1237}1238function onBeforeUnmount(hook, target = currentInstance) {1239    injectHook("bum" /* BEFORE_UNMOUNT */, hook, target);1240}1241function onUnmounted(hook, target = currentInstance) {1242    injectHook("um" /* UNMOUNTED */, hook, target);1243}1244function onRenderTriggered(hook, target = currentInstance) {1245    injectHook("rtg" /* RENDER_TRIGGERED */, hook, target);1246}1247function onRenderTracked(hook, target = currentInstance) {1248    injectHook("rtc" /* RENDER_TRACKED */, hook, target);1249}1250function onErrorCaptured(hook, target = currentInstance) {1251    injectHook("ec" /* ERROR_CAPTURED */, hook, target);1252}12531254// mark the current rendering instance for asset resolution (e.g.1255// resolveComponent, resolveDirective) during render1256let currentRenderingInstance = null;1257function renderComponentRoot(instance) {1258    const { type: Component, vnode, renderProxy, props, slots, attrs, emit } = instance;1259    let result;1260    currentRenderingInstance = instance;1261    try {1262        if (vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {1263            result = normalizeVNode(instance.render.call(renderProxy));1264        }1265        else {1266            // functional1267            const render = Component;1268            result = normalizeVNode(render.length > 11269                ? render(props, {1270                    attrs,1271                    slots,1272                    emit1273                })1274                : render(props, null));1275        }1276    }1277    catch (err) {1278        handleError(err, instance, 1 /* RENDER_FUNCTION */);1279        result = createVNode(Comment);1280    }1281    currentRenderingInstance = null;1282    return result;1283}1284function shouldUpdateComponent(prevVNode, nextVNode, optimized) {1285    const { props: prevProps, children: prevChildren } = prevVNode;1286    const { props: nextProps, children: nextChildren, patchFlag } = nextVNode;1287    if (patchFlag > 0) {1288        if (patchFlag & 256 /* DYNAMIC_SLOTS */) {1289            // slot content that references values that might have changed,1290            // e.g. in a v-for1291            return true;1292        }1293        if (patchFlag & 16 /* FULL_PROPS */) {1294            // presence of this flag indicates props are always non-null1295            return hasPropsChanged(prevProps, nextProps);1296        }1297        else if (patchFlag & 8 /* PROPS */) {1298            const dynamicProps = nextVNode.dynamicProps;1299            for (let i = 0; i < dynamicProps.length; i++) {1300                const key = dynamicProps[i];1301                if (nextProps[key] !== prevProps[key]) {1302                    return true;1303                }1304            }1305        }1306    }1307    else if (!optimized) {1308        // this path is only taken by manually written render functions1309        // so presence of any children leads to a forced update1310        if (prevChildren != null || nextChildren != null) {1311            return true;1312        }1313        if (prevProps === nextProps) {1314            return false;1315        }1316        if (prevProps === null) {1317            return nextProps !== null;1318        }1319        if (nextProps === null) {1320            return prevProps !== null;1321        }1322        return hasPropsChanged(prevProps, nextProps);1323    }1324    return false;1325}1326function hasPropsChanged(prevProps, nextProps) {1327    const nextKeys = Object.keys(nextProps);1328    if (nextKeys.length !== Object.keys(prevProps).length) {1329        return true;1330    }1331    for (let i = 0; i < nextKeys.length; i++) {1332        const key = nextKeys[i];1333        if (nextProps[key] !== prevProps[key]) {1334            return true;1335        }1336    }1337    return false;1338}13391340// resolve raw VNode data.1341// - filter out reserved keys (key, ref, slots)1342// - extract class and style into $attrs (to be merged onto child1343//   component root)1344// - for the rest:1345//   - if has declared props: put declared ones in `props`, the rest in `attrs`1346//   - else: everything goes in `props`.1347function resolveProps(instance, rawProps, _options) {1348    const hasDeclaredProps = _options != null;1349    const options = normalizePropsOptions(_options);1350    if (!rawProps && !hasDeclaredProps) {1351        return;1352    }1353    const props = {};1354    let attrs = void 0;1355    // update the instance propsProxy (passed to setup()) to trigger potential1356    // changes1357    const propsProxy = instance.propsProxy;1358    const setProp = propsProxy1359        ? (key, val) => {1360            props[key] = val;1361            propsProxy[key] = val;1362        }1363        : (key, val) => {1364            props[key] = val;1365        };1366    // allow mutation of propsProxy (which is readonly by default)1367    unlock();1368    if (rawProps != null) {1369        for (const key in rawProps) {1370            // key, ref are reserved1371            if (isReservedProp(key))1372                continue;1373            // any non-declared data are put into a separate `attrs` object1374            // for spreading1375            if (hasDeclaredProps && !hasOwn(options, key)) {1376                (attrs || (attrs = {}))[key] = rawProps[key];1377            }1378            else {1379                setProp(key, rawProps[key]);1380            }1381        }1382    }1383    // set default values, cast booleans & run validators1384    if (hasDeclaredProps) {1385        for (const key in options) {1386            let opt = options[key];1387            if (opt == null)1388                continue;1389            const isAbsent = !hasOwn(props, key);1390            const hasDefault = hasOwn(opt, 'default');1391            const currentValue = props[key];1392            // default values1393            if (hasDefault && currentValue === undefined) {1394                const defaultValue = opt.default;1395                setProp(key, isFunction(defaultValue) ? defaultValue() : defaultValue);1396            }1397            // boolean casting1398            if (opt["1" /* shouldCast */]) {1399                if (isAbsent && !hasDefault) {1400                    setProp(key, false);1401                }1402                else if (opt["2" /* shouldCastTrue */] &&1403                    (currentValue === '' || currentValue === hyphenate(key))) {1404                    setProp(key, true);1405                }1406            }1407            // runtime validation1408            if ( rawProps) {1409                validateProp(key, toRaw(rawProps[key]), opt, isAbsent);1410            }1411        }1412    }1413    else {1414        // if component has no declared props, $attrs === $props1415        attrs = props;1416    }1417    // in case of dynamic props, check if we need to delete keys from1418    // the props proxy1419    const { patchFlag } = instance.vnode;1420    if (propsProxy !== null &&1421        (patchFlag === 0 || patchFlag & 16 /* FULL_PROPS */)) {1422        const rawInitialProps = toRaw(propsProxy);1423        for (const key in rawInitialProps) {1424            if (!hasOwn(props, key)) {1425                delete propsProxy[key];1426            }1427        }1428    }1429    // lock readonly1430    lock();1431    instance.props =  readonly(props) ;1432    instance.attrs = options1433        ?  attrs != null1434            ? readonly(attrs)1435            : attrs1436        : instance.props;1437}1438const normalizationMap = new WeakMap();1439function normalizePropsOptions(raw) {1440    if (!raw) {1441        return null;1442    }1443    if (normalizationMap.has(raw)) {1444        return normalizationMap.get(raw);1445    }1446    const normalized = {};1447    normalizationMap.set(raw, normalized);1448    if (isArray(raw)) {1449        for (let i = 0; i < raw.length; i++) {1450            if ( !isString(raw[i])) {1451                warn(`props must be strings when using array syntax.`, raw[i]);1452            }1453            const normalizedKey = camelize(raw[i]);1454            if (normalizedKey[0] !== '$') {1455                normalized[normalizedKey] = EMPTY_OBJ;1456            }1457            else {1458                warn(`Invalid prop name: "${normalizedKey}" is a reserved property.`);1459            }1460        }1461    }1462    else {1463        if ( !isObject(raw)) {1464            warn(`invalid props options`, raw);1465        }1466        for (const key in raw) {1467            const normalizedKey = camelize(key);1468            if (normalizedKey[0] !== '$') {1469                const opt = raw[key];1470                const prop = (normalized[normalizedKey] =1471                    isArray(opt) || isFunction(opt) ? { type: opt } : opt);1472                if (prop != null) {1473                    const booleanIndex = getTypeIndex(Boolean, prop.type);1474                    const stringIndex = getTypeIndex(String, prop.type);1475                    prop["1" /* shouldCast */] = booleanIndex > -1;1476                    prop["2" /* shouldCastTrue */] = booleanIndex < stringIndex;1477                }1478            }1479            else {1480                warn(`Invalid prop name: "${normalizedKey}" is a reserved property.`);1481            }1482        }1483    }1484    return normalized;1485}1486// use function string name to check type constructors1487// so that it works across vms / iframes.1488function getType(ctor) {1489    const match = ctor && ctor.toString().match(/^\s*function (\w+)/);1490    return match ? match[1] : '';1491}1492function isSameType(a, b) {1493    return getType(a) === getType(b);1494}1495function getTypeIndex(type, expectedTypes) {1496    if (isArray(expectedTypes)) {1497        for (let i = 0, len = expectedTypes.length; i < len; i++) {1498            if (isSameType(expectedTypes[i], type)) {1499                return i;1500            }1501        }1502    }1503    else if (isObject(expectedTypes)) {1504        return isSameType(expectedTypes, type) ? 0 : -1;1505    }1506    return -1;1507}1508function validateProp(name, value, prop, isAbsent) {1509    const { type, required, validator } = prop;1510    // required!1511    if (required && isAbsent) {1512        warn('Missing required prop: "' + name + '"');1513        return;1514    }1515    // missing but optional1516    if (value == null && !prop.required) {1517        return;1518    }1519    // type check1520    if (type != null && type !== true) {1521        let isValid = false;1522        const types = isArray(type) ? type : [type];1523        const expectedTypes = [];1524        // value is valid as long as one of the specified types match1525        for (let i = 0; i < types.length && !isValid; i++) {1526            const { valid, expectedType } = assertType(value, types[i]);1527            expectedTypes.push(expectedType || '');1528            isValid = valid;1529        }1530        if (!isValid) {1531            warn(getInvalidTypeMessage(name, value, expectedTypes));1532            return;1533        }1534    }1535    // custom validator1536    if (validator && !validator(value)) {1537        warn('Invalid prop: custom validator check failed for prop "' + name + '".');1538    }1539}1540const simpleCheckRE = /^(String|Number|Boolean|Function|Symbol)$/;1541function assertType(value, type) {1542    let valid;1543    const expectedType = getType(type);1544    if (simpleCheckRE.test(expectedType)) {1545        const t = typeof value;1546        valid = t === expectedType.toLowerCase();1547        // for primitive wrapper objects1548        if (!valid && t === 'object') {1549            valid = value instanceof type;1550        }1551    }1552    else if (expectedType === 'Object') {1553        valid = toRawType(value) === 'Object';1554    }1555    else if (expectedType === 'Array') {1556        valid = isArray(value);1557    }1558    else {1559        valid = value instanceof type;1560    }1561    return {1562        valid,1563        expectedType1564    };1565}1566function getInvalidTypeMessage(name, value, expectedTypes) {1567    let message = `Invalid prop: type check failed for prop "${name}".` +1568        ` Expected ${expectedTypes.map(capitalize).join(', ')}`;1569    const expectedType = expectedTypes[0];1570    const receivedType = toRawType(value);1571    const expectedValue = styleValue(value, expectedType);1572    const receivedValue = styleValue(value, receivedType);1573    // check if we need to specify expected value1574    if (expectedTypes.length === 1 &&1575        isExplicable(expectedType) &&1576        !isBoolean(expectedType, receivedType)) {1577        message += ` with value ${expectedValue}`;1578    }1579    message += `, got ${receivedType} `;1580    // check if we need to specify received value1581    if (isExplicable(receivedType)) {1582        message += `with value ${receivedValue}.`;1583    }1584    return message;1585}1586function styleValue(value, type) {1587    if (type === 'String') {1588        return `"${value}"`;1589    }1590    else if (type === 'Number') {1591        return `${Number(value)}`;1592    }1593    else {1594        return `${value}`;1595    }1596}1597function toRawType(value) {1598    return toTypeString(value).slice(8, -1);1599}1600function isExplicable(type) {1601    const explicitTypes = ['string', 'number', 'boolean'];1602    return explicitTypes.some(elem => type.toLowerCase() === elem);1603}1604function isBoolean(...args) {1605    return args.some(elem => elem.toLowerCase() === 'boolean');1606}16071608const normalizeSlotValue = (value) => isArray(value)1609    ? value.map(normalizeVNode)1610    : [normalizeVNode(value)];1611const normalizeSlot = (key, rawSlot) => (props) => {1612    if ( currentInstance != null) {1613        warn(`Slot "${key}" invoked outside of the render function: ` +1614            `this will not track dependencies used in the slot. ` +1615            `Invoke the slot function inside the render function instead.`);1616    }1617    return normalizeSlotValue(rawSlot(props));1618};1619function resolveSlots(instance, children) {1620    let slots;1621    if (instance.vnode.shapeFlag & 32 /* SLOTS_CHILDREN */) {1622        if (children._compiled) {1623            // pre-normalized slots object generated by compiler1624            slots = children;1625        }1626        else {1627            slots = {};1628            for (const key in children) {1629                let value = children[key];1630                if (isFunction(value)) {1631                    slots[key] = normalizeSlot(key, value);1632                }1633                else if (value != null) {1634                    {1635                        warn(`Non-function value encountered for slot "${key}". ` +1636                            `Prefer function slots for better performance.`);1637                    }1638                    value = normalizeSlotValue(value);1639                    slots[key] = () => value;1640                }1641            }1642        }1643    }1644    else if (children !== null) {1645        // non slot object children (direct value) passed to a component1646        {1647            warn(`Non-function value encountered for default slot. ` +1648                `Prefer function slots for better performance.`);1649        }1650        const normalized = normalizeSlotValue(children);1651        slots = { default: () => normalized };1652    }1653    if (slots !== void 0) {1654        instance.slots = slots;1655    }1656}16571658/**1659Runtime helper for applying directives to a vnode. Example usage:16601661const comp = resolveComponent('comp')1662const foo = resolveDirective('foo')1663const bar = resolveDirective('bar')16641665return applyDirectives(h(comp), [1666  [foo, this.x],1667  [bar, this.y]1668])1669*/1670const valueCache = new WeakMap();1671function applyDirective(props, instance, directive, value, arg, modifiers) {1672    let valueCacheForDir = valueCache.get(directive);1673    if (!valueCacheForDir) {1674        valueCacheForDir = new WeakMap();1675        valueCache.set(directive, valueCacheForDir);1676    }1677    for (const key in directive) {1678        const hook = directive[key];1679        const hookKey = `vnode` + key[0].toUpperCase() + key.slice(1);1680        const vnodeHook = (vnode, prevVNode) => {1681            let oldValue;1682            if (prevVNode != null) {1683                oldValue = valueCacheForDir.get(prevVNode);1684                valueCacheForDir.delete(prevVNode);1685            }1686            valueCacheForDir.set(vnode, value);1687            hook(vnode.el, {1688                instance: instance.renderProxy,1689                value,1690                oldValue,1691                arg,1692                modifiers1693            }, vnode, prevVNode);1694        };1695        const existing = props[hookKey];1696        props[hookKey] = existing1697            ? [].concat(existing, vnodeHook)1698            : vnodeHook;1699    }1700}1701function applyDirectives(vnode, directives) {1702    const instance = currentRenderingInstance;1703    if (instance !== null) {1704        vnode = cloneVNode(vnode);1705        vnode.props = vnode.props != null ? extend({}, vnode.props) : {};1706        for (let i = 0; i < directives.length; i++) {1707            applyDirective(vnode.props, instance, ...directives[i]);1708        }1709    }1710    else {1711        warn(`applyDirectives can only be used inside render functions.`);1712    }1713    return vnode;1714}1715function invokeDirectiveHook(hook, instance, vnode, prevVNode = null) {1716    const args = [vnode, prevVNode];1717    if (isArray(hook)) {1718        for (let i = 0; i < hook.length; i++) {1719            callWithAsyncErrorHandling(hook[i], instance, 7 /* DIRECTIVE_HOOK */, args);1720        }1721    }1722    else if (isFunction(hook)) {1723        callWithAsyncErrorHandling(hook, instance, 7 /* DIRECTIVE_HOOK */, args);1724    }1725}17261727function createAppContext() {1728    return {1729        config: {1730            devtools: true,1731            performance: false,1732            errorHandler: undefined,1733            warnHandler: undefined1734        },1735        mixins: [],1736        components: {},1737        directives: {},1738        provides: {}1739    };1740}1741function createAppAPI(render) {1742    return function createApp() {1743        const context = createAppContext();1744        let isMounted = false;1745        const app = {1746            get config() {1747                return context.config;1748            },1749            set config(v) {1750                {1751                    warn(`app.config cannot be replaced. Modify individual options instead.`);1752                }1753            },1754            use(plugin) {1755                if (isFunction(plugin)) {1756                    plugin(app);1757                }1758                else if (isFunction(plugin.install)) {1759                    plugin.install(app);1760                }1761                else {1762                    warn(`A plugin must either be a function or an object with an "install" ` +1763                        `function.`);1764                }1765                return app;1766            },1767            mixin(mixin) {1768                context.mixins.push(mixin);1769                return app;1770            },1771            component(name, component) {1772                // TODO component name validation1773                if (!component) {1774                    return context.components[name];1775                }1776                else {1777                    context.components[name] = component;1778                    return app;1779                }1780            },1781            directive(name, directive) {1782                // TODO directive name validation1783                if (!directive) {1784                    return context.directives[name];1785                }1786                else {1787                    context.directives[name] = directive;1788                    return app;1789                }1790            },1791            mount(rootComponent, rootContainer, rootProps) {1792                if (!isMounted) {1793                    const vnode = createVNode(rootComponent, rootProps);1794                    // store app context on the root VNode.1795                    // this will be set on the root instance on initial mount.1796                    vnode.appContext = context;1797                    render(vnode, rootContainer);1798                    isMounted = true;1799                    return vnode.component.renderProxy;1800                }1801                else {1802                    warn(`App has already been mounted. Create a new app instance instead.`);1803                }1804            },1805            provide(key, value) {1806                if ( key in context.provides) {1807                    warn(`App already provides property with key "${key}". ` +1808                        `It will be overwritten with the new value.`);1809                }1810                context.provides[key] = value;1811            }1812        };1813        return app;1814    };1815}18161817function createSuspenseBoundary(vnode, parent, parentComponent, container, hiddenContainer, anchor, isSVG, optimized) {1818    return {1819        vnode,1820        parent,1821        parentComponent,1822        isSVG,1823        optimized,1824        container,1825        hiddenContainer,1826        anchor,1827        deps: 0,1828        subTree: null,1829        fallbackTree: null,1830        isResolved: false,1831        isUnmounted: false,1832        effects: []1833    };1834}1835function normalizeSuspenseChildren(vnode) {1836    const { shapeFlag, children } = vnode;1837    if (shapeFlag & PublicShapeFlags.SLOTS_CHILDREN) {1838        const { default: d, fallback } = children;1839        return {1840            content: normalizeVNode(isFunction(d) ? d() : d),1841            fallback: normalizeVNode(isFunction(fallback) ? fallback() : fallback)1842        };1843    }1844    else {1845        return {1846            content: normalizeVNode(children),1847            fallback: normalizeVNode(null)1848        };1849    }1850}18511852function createDevEffectOptions(instance) {1853    return {1854        scheduler: queueJob,1855        onTrack: instance.rtc ? e => invokeHooks(instance.rtc, e) : void 0,1856        onTrigger: instance.rtg ? e => invokeHooks(instance.rtg, e) : void 01857    };1858}1859function isSameType$1(n1, n2) {1860    return n1.type === n2.type && n1.key === n2.key;1861}1862function invokeHooks(hooks, arg) {1863    for (let i = 0; i < hooks.length; i++) {1864        hooks[i](arg);1865    }1866}1867function queuePostRenderEffect(fn, suspense) {1868    if (suspense !== null && !suspense.isResolved) {1869        if (isArray(fn)) {1870            suspense.effects.push(...fn);1871        }1872        else {1873            suspense.effects.push(fn);1874        }1875    }1876    else {1877        queuePostFlushCb(fn);1878    }1879}1880/**1881 * The createRenderer function accepts two generic arguments:1882 * HostNode and HostElement, corresponding to Node and Element types in the1883 * host environment. For example, for runtime-dom, HostNode would be the DOM1884 * `Node` interface and HostElement would be the DOM `Element` interface.1885 *1886 * Custom renderers can pass in the platform specific types like this:1887 *1888 * ``` js1889 * const { render, createApp } = createRenderer<Node, Element>({1890 *   patchProp,1891 *   ...nodeOps1892 * })1893 * ```1894 */1895function createRenderer(options) {1896    const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, querySelector: hostQuerySelector } = options;1897    function patch(n1, // null means this is a mount1898    n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false) {1899        // patching & not same type, unmount old tree1900        if (n1 != null && !isSameType$1(n1, n2)) {1901            anchor = getNextHostNode(n1);1902            unmount(n1, parentComponent, parentSuspense, true);1903            n1 = null;1904        }1905        const { type, shapeFlag } = n2;1906        switch (type) {1907            case Text:1908                processText(n1, n2, container, anchor);1909                break;1910            case Comment:1911                processCommentNode(n1, n2, container, anchor);1912                break;1913            case Fragment:1914                processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1915                break;1916            case Portal:1917                processPortal(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1918                break;1919            case Suspense:1920                {1921                    processSuspense(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1922                }1923                break;1924            default:1925                if (shapeFlag & 1 /* ELEMENT */) {1926                    processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1927                }1928                else if (shapeFlag & 6 /* COMPONENT */) {1929                    processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1930                }1931                else {1932                    warn('Invalid HostVNode type:', n2.type, `(${typeof n2.type})`);1933                }1934        }1935    }1936    function processText(n1, n2, container, anchor) {1937        if (n1 == null) {1938            hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);1939        }1940        else {1941            const el = (n2.el = n1.el);1942            if (n2.children !== n1.children) {1943                hostSetText(el, n2.children);1944            }1945        }1946    }1947    function processCommentNode(n1, n2, container, anchor) {1948        if (n1 == null) {1949            hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor);1950        }1951        else {1952            // there's no support for dynamic comments1953            n2.el = n1.el;1954        }1955    }1956    function processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1957        if (n1 == null) {1958            mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG);1959        }1960        else {1961            patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized);1962        }1963        if (n2.ref !== null && parentComponent !== null) {1964            setRef(n2.ref, n1 && n1.ref, parentComponent, n2.el);1965        }1966    }1967    function mountElement(vnode, container, anchor, parentComponent, parentSuspense, isSVG) {1968        const tag = vnode.type;1969        isSVG = isSVG || tag === 'svg';1970        const el = (vnode.el = hostCreateElement(tag, isSVG));1971        const { props, shapeFlag } = vnode;1972        if (props != null) {1973            for (const key in props) {1974                if (isReservedProp(key))1975                    continue;1976                hostPatchProp(el, key, props[key], null, isSVG);1977            }1978            if (props.vnodeBeforeMount != null) {1979                invokeDirectiveHook(props.vnodeBeforeMount, parentComponent, vnode);1980            }1981        }1982        if (shapeFlag & 8 /* TEXT_CHILDREN */) {1983            hostSetElementText(el, vnode.children);1984        }1985        else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1986            mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG);1987        }1988        hostInsert(el, container, anchor);1989        if (props != null && props.vnodeMounted != null) {1990            queuePostRenderEffect(() => {1991                invokeDirectiveHook(props.vnodeMounted, parentComponent, vnode);1992            }, parentSuspense);1993        }1994    }1995    function mountChildren(children, container, anchor, parentComponent, parentSuspense, isSVG, start = 0) {1996        for (let i = start; i < children.length; i++) {1997            const child = (children[i] = normalizeVNode(children[i]));1998            patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG);1999        }2000    }2001    function patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized) {2002        const el = (n2.el = n1.el);2003        const { patchFlag, dynamicChildren } = n2;2004        const oldProps = (n1 && n1.props) || EMPTY_OBJ;2005        const newProps = n2.props || EMPTY_OBJ;2006        if (newProps.vnodeBeforeUpdate != null) {2007            invokeDirectiveHook(newProps.vnodeBeforeUpdate, parentComponent, n2, n1);2008        }2009        if (patchFlag > 0) {2010            // the presence of a patchFlag means this element's render code was2011            // generated by the compiler and can take the fast path.2012            // in this path old node and new node are guaranteed to have the same shape2013            // (i.e. at the exact same position in the source template)2014            if (patchFlag & 16 /* FULL_PROPS */) {2015                // element props contain dynamic keys, full diff needed2016                patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2017            }2018            else {2019                // class2020                // this flag is matched when the element has dynamic class bindings.2021                if (patchFlag & 2 /* CLASS */) {2022                    if (oldProps.class !== newProps.class) {2023                        hostPatchProp(el, 'class', newProps.class, null, isSVG);2024                    }2025                }2026                // style2027                // this flag is matched when the element has dynamic style bindings2028                if (patchFlag & 4 /* STYLE */) {2029                    hostPatchProp(el, 'style', newProps.style, oldProps.style, isSVG);2030                }2031                // props2032                // This flag is matched when the element has dynamic prop/attr bindings2033                // other than class and style. The keys of dynamic prop/attrs are saved for2034                // faster iteration.2035                // Note dynamic keys like :[foo]="bar" will cause this optimization to2036                // bail out and go through a full diff because we need to unset the old key2037                if (patchFlag & 8 /* PROPS */) {2038                    // if the flag is present then dynamicProps must be non-null2039                    const propsToUpdate = n2.dynamicProps;2040                    for (let i = 0; i < propsToUpdate.length; i++) {2041                        const key = propsToUpdate[i];2042                        const prev = oldProps[key];2043                        const next = newProps[key];2044                        if (prev !== next) {2045                            hostPatchProp(el, key, next, prev, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);2046                        }2047                    }2048                }2049            }2050            // text2051            // This flag is matched when the element has only dynamic text children.2052            // this flag is terminal (i.e. skips children diffing).2053            if (patchFlag & 1 /* TEXT */) {2054                if (n1.children !== n2.children) {2055                    hostSetElementText(el, n2.children);2056                }2057                return; // terminal2058            }2059        }2060        else if (!optimized) {2061            // unoptimized, full diff2062            patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2063        }2064        if (dynamicChildren != null) {2065            // children fast path2066            const oldDynamicChildren = n1.dynamicChildren;2067            for (let i = 0; i < dynamicChildren.length; i++) {2068                patch(oldDynamicChildren[i], dynamicChildren[i], el, null, parentComponent, parentSuspense, isSVG, true);2069            }2070        }2071        else if (!optimized) {2072            // full diff2073            patchChildren(n1, n2, el, null, parentComponent, parentSuspense, isSVG);2074        }2075        if (newProps.vnodeUpdated != null) {2076            queuePostRenderEffect(() => {2077                invokeDirectiveHook(newProps.vnodeUpdated, parentComponent, n2, n1);2078            }, parentSuspense);2079        }2080    }2081    function patchProps(el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) {2082        if (oldProps !== newProps) {2083            for (const key in newProps) {2084                if (isReservedProp(key))2085                    continue;2086                const next = newProps[key];2087                const prev = oldProps[key];2088                if (next !== prev) {2089                    hostPatchProp(el, key, next, prev, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);2090                }2091            }2092            if (oldProps !== EMPTY_OBJ) {2093                for (const key in oldProps) {2094                    if (isReservedProp(key))2095                        continue;2096                    if (!(key in newProps)) {2097                        hostPatchProp(el, key, null, null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);2098                    }2099                }2100            }2101        }2102    }2103    function processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2104        const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateComment(''));2105        const fragmentEndAnchor = (n2.anchor = n12106            ? n1.anchor2107            : hostCreateComment(''));2108        if (n1 == null) {2109            hostInsert(fragmentStartAnchor, container, anchor);2110            hostInsert(fragmentEndAnchor, container, anchor);2111            // a fragment can only have array children2112            // since they are either generated by the compiler, or implicitly created2113            // from arrays.2114            mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG);2115        }2116        else {2117            patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);2118        }2119    }2120    function processPortal(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2121        const targetSelector = n2.props && n2.props.target;2122        const { patchFlag, shapeFlag, children } = n2;2123        if (n1 == null) {2124            const target = (n2.target = isString(targetSelector)2125                ? hostQuerySelector(targetSelector)2126                : null);2127            if (target != null) {2128                if (shapeFlag & 8 /* TEXT_CHILDREN */) {2129                    hostSetElementText(target, children);2130                }2131                else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {2132                    mountChildren(children, target, null, parentComponent, parentSuspense, isSVG);2133                }2134            }2135            else {2136                warn('Invalid Portal target on mount:', target, `(${typeof target})`);2137            }2138        }2139        else {2140            // update content2141            const target = (n2.target = n1.target);2142            if (patchFlag === 1 /* TEXT */) {2143                hostSetElementText(target, children);2144            }2145            else if (!optimized) {2146                patchChildren(n1, n2, target, null, parentComponent, parentSuspense, isSVG);2147            }2148            // target changed2149            if (targetSelector !== (n1.props && n1.props.target)) {2150                const nextTarget = (n2.target = isString(targetSelector)2151                    ? hostQuerySelector(targetSelector)2152                    : null);2153                if (nextTarget != null) {2154                    // move content2155                    if (shapeFlag & 8 /* TEXT_CHILDREN */) {2156                        hostSetElementText(target, '');2157                        hostSetElementText(nextTarget, children);2158                    }2159                    else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {2160                        for (let i = 0; i < children.length; i++) {2161                            move(children[i], nextTarget, null);2162                        }2163                    }2164                }2165                else {2166                    warn('Invalid Portal target on update:', target, `(${typeof target})`);2167                }2168            }2169        }2170        // insert an empty node as the placeholder for the portal2171        processCommentNode(n1, n2, container, anchor);2172    }2173    function processSuspense(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2174        if (n1 == null) {2175            mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2176        }2177        else {2178            patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized);2179        }2180    }2181    function mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2182        const hiddenContainer = hostCreateElement('div');2183        const suspense = (n2.suspense = createSuspenseBoundary(n2, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, optimized));2184        const { content, fallback } = normalizeSuspenseChildren(n2);2185        suspense.subTree = content;2186        suspense.fallbackTree = fallback;2187        // start mounting the content subtree in an off-dom container2188        patch(null, content, hiddenContainer, null, parentComponent, suspense, isSVG, optimized);2189        // now check if we have encountered any async deps2190        if (suspense.deps > 0) {2191            // mount the fallback tree2192            patch(null, fallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context2193            isSVG, optimized);2194            n2.el = fallback.el;2195        }2196        else {2197            // Suspense has no async deps. Just resolve.2198            resolveSuspense(suspense);2199        }2200    }2201    function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized) {2202        const suspense = (n2.suspense = n1.suspense);2203        suspense.vnode = n2;2204        const { content, fallback } = normalizeSuspenseChildren(n2);2205        const oldSubTree = suspense.subTree;2206        const oldFallbackTree = suspense.fallbackTree;2207        if (!suspense.isResolved) {2208            patch(oldSubTree, content, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);2209            if (suspense.deps > 0) {2210                // still pending. patch the fallback tree.2211                patch(oldFallbackTree, fallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context2212                isSVG, optimized);2213                n2.el = fallback.el;2214            }2215            // If deps somehow becomes 0 after the patch it means the patch caused an2216            // async dep component to unmount and removed its dep. It will cause the2217            // suspense to resolve and we don't need to do anything here.2218        }2219        else {2220            // just normal patch inner content as a fragment2221            patch(oldSubTree, content, container, anchor, parentComponent, suspense, isSVG, optimized);2222            n2.el = content.el;2223        }2224        suspense.subTree = content;2225        suspense.fallbackTree = fallback;2226    }2227    function resolveSuspense(suspense) {2228        {2229            if (suspense.isResolved) {2230                throw new Error(`resolveSuspense() is called on an already resolved suspense boundary.`);2231            }2232            if (suspense.isUnmounted) {2233                throw new Error(`resolveSuspense() is called on an already unmounted suspense boundary.`);2234            }2235        }2236        const { vnode, subTree, fallbackTree, effects, parentComponent, container } = suspense;2237        // this is initial anchor on mount2238        let { anchor } = suspense;2239        // unmount fallback tree2240        if (fallbackTree.el) {2241            // if the fallback tree was mounted, it may have been moved2242            // as part of a parent suspense. get the latest anchor for insertion2243            anchor = getNextHostNode(fallbackTree);2244            unmount(fallbackTree, parentComponent, suspense, true);2245        }2246        // move content from off-dom container to actual container2247        move(subTree, container, anchor);2248        const el = (vnode.el = subTree.el);2249        // suspense as the root node of a component...2250        if (parentComponent && parentComponent.subTree === vnode) {2251            parentComponent.vnode.el = el;2252            updateHOCHostEl(parentComponent, el);2253        }2254        // check if there is a pending parent suspense2255        let parent = suspense.parent;2256        let hasUnresolvedAncestor = false;2257        while (parent) {2258            if (!parent.isResolved) {2259                // found a pending parent suspense, merge buffered post jobs2260                // into that parent2261                parent.effects.push(...effects);2262                hasUnresolvedAncestor = true;2263                break;2264            }2265            parent = parent.parent;2266        }2267        // no pending parent suspense, flush all jobs2268        if (!hasUnresolvedAncestor) {2269            queuePostFlushCb(effects);2270        }2271        suspense.isResolved = true;2272        // invoke @resolve event2273        const onResolve = vnode.props && vnode.props.onResolve;2274        if (isFunction(onResolve)) {2275            onResolve();2276        }2277    }2278    function restartSuspense(suspense) {2279        suspense.isResolved = false;2280        const { vnode, subTree, fallbackTree, parentComponent, container, hiddenContainer, isSVG, optimized } = suspense;2281        // move content tree back to the off-dom container2282        const anchor = getNextHostNode(subTree);2283        move(subTree, hiddenContainer, null);2284        // remount the fallback tree2285        patch(null, fallbackTree, container, anchor, parentComponent, null, // fallback tree will not have suspense context2286        isSVG, optimized);2287        const el = (vnode.el = fallbackTree.el);2288        // suspense as the root node of a component...2289        if (parentComponent && parentComponent.subTree === vnode) {2290            parentComponent.vnode.el = el;2291            updateHOCHostEl(parentComponent, el);2292        }2293        // invoke @suspense event2294        const onSuspense = vnode.props && vnode.props.onSuspense;2295        if (isFunction(onSuspense)) {2296            onSuspense();2297        }2298    }2299    function processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2300        if (n1 == null) {2301            mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG);2302        }2303        else {2304            const instance = (n2.component = n1.component);2305            if (shouldUpdateComponent(n1, n2, optimized)) {2306                if (2307                    instance.asyncDep &&2308                    !instance.asyncResolved) {2309                    // async & still pending - just update props and slots2310                    // since the component's reactive effect for render isn't set-up yet2311                    {2312                        pushWarningContext(n2);2313                    }2314                    updateComponentPreRender(instance, n2);2315                    {2316                        popWarningContext();2317                    }2318                    return;2319                }2320                else {2321                    // normal update2322                    instance.next = n2;2323                    // instance.update is the reactive effect runner.2324                    instance.update();2325                }2326            }2327            else {2328                // no update needed. just copy over properties2329                n2.component = n1.component;2330                n2.el = n1.el;2331            }2332        }2333        if (n2.ref !== null && parentComponent !== null) {2334            setRef(n2.ref, n1 && n1.ref, parentComponent, n2.component.renderProxy);2335        }2336    }2337    function mountComponent(initialVNode, container, anchor, parentComponent, parentSuspense, isSVG) {2338        const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent));2339        {2340            pushWarningContext(initialVNode);2341        }2342        // resolve props and slots for setup context2343        const propsOptions = initialVNode.type.props;2344        resolveProps(instance, initialVNode.props, propsOptions);2345        resolveSlots(instance, initialVNode.children);2346        // setup stateful logic2347        if (initialVNode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {2348            setupStatefulComponent(instance, parentSuspense);2349        }2350        // setup() is async. This component relies on async logic to be resolved2351        // before proceeding2352        if ( instance.asyncDep) {2353            if (!parentSuspense) {2354                // TODO handle this properly2355                throw new Error('Async component without a suspense boundary!');2356            }2357            // parent suspense already resolved, need to re-suspense2358            // use queueJob so it's handled synchronously after patching the current2359            // suspense tree2360            if (parentSuspense.isResolved) {2361                queueJob(() => {2362                    restartSuspense(parentSuspense);2363                });2364            }2365            parentSuspense.deps++;2366            instance.asyncDep2367                .catch(err => {2368                handleError(err, instance, 0 /* SETUP_FUNCTION */);2369            })2370                .then(asyncSetupResult => {2371                // component may be unmounted before resolve2372                if (!instance.isUnmounted && !parentSuspense.isUnmounted) {2373                    retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG);2374                }2375            });2376            // give it a placeholder2377            const placeholder = (instance.subTree = createVNode(Comment));2378            processCommentNode(null, placeholder, container, anchor);2379            initialVNode.el = placeholder.el;2380            return;2381        }2382        setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG);2383        {2384            popWarningContext();2385        }2386    }2387    function retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG) {2388        parentSuspense.deps--;2389        // retry from this component2390        instance.asyncResolved = true;2391        const { vnode } = instance;2392        {2393            pushWarningContext(vnode);2394        }2395        handleSetupResult(instance, asyncSetupResult, parentSuspense);2396        setupRenderEffect(instance, parentSuspense, vnode,2397        // component may have been moved before resolve2398        hostParentNode(instance.subTree.el), getNextHostNode(instance.subTree), isSVG);2399        updateHOCHostEl(instance, vnode.el);2400        {2401            popWarningContext();2402        }2403        if (parentSuspense.deps === 0) {2404            resolveSuspense(parentSuspense);2405        }2406    }2407    function setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG) {2408        // create reactive effect for rendering2409        let mounted = false;2410        instance.update = effect(function componentEffect() {2411            if (!mounted) {2412                const subTree = (instance.subTree = renderComponentRoot(instance));2413                // beforeMount hook2414                if (instance.bm !== null) {2415                    invokeHooks(instance.bm);2416                }2417                patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);2418                initialVNode.el = subTree.el;2419                // mounted hook2420                if (instance.m !== null) {2421                    queuePostRenderEffect(instance.m, parentSuspense);2422                }2423                mounted = true;2424            }2425            else {2426                // updateComponent2427                // This is triggered by mutation of component's own state (next: null)2428                // OR parent calling processComponent (next: HostVNode)2429                const { next } = instance;2430                {2431                    pushWarningContext(next || instance.vnode);2432                }2433                if (next !== null) {2434                    updateComponentPreRender(instance, next);2435                }2436                const prevTree = instance.subTree;2437                const nextTree = (instance.subTree = renderComponentRoot(instance));2438                // beforeUpdate hook2439                if (instance.bu !== null) {2440                    invokeHooks(instance.bu);2441                }2442                // reset refs2443                // only needed if previous patch had refs2444                if (instance.refs !== EMPTY_OBJ) {2445                    instance.refs = {};2446                }2447                patch(prevTree, nextTree,2448                // parent may have changed if it's in a portal2449                hostParentNode(prevTree.el),2450                // anchor may have changed if it's in a fragment2451                getNextHostNode(prevTree), instance, parentSuspense, isSVG);2452                instance.vnode.el = nextTree.el;2453                if (next === null) {2454                    // self-triggered update. In case of HOC, update parent component2455                    // vnode el. HOC is indicated by parent instance's subTree pointing2456                    // to child component's vnode2457                    updateHOCHostEl(instance, nextTree.el);2458                }2459                // updated hook2460                if (instance.u !== null) {2461                    queuePostRenderEffect(instance.u, parentSuspense);2462                }2463                {2464                    popWarningContext();2465                }2466            }2467        },  createDevEffectOptions(instance) );2468    }2469    function updateComponentPreRender(instance, nextVNode) {2470        nextVNode.component = instance;2471        instance.vnode = nextVNode;2472        instance.next = null;2473        resolveProps(instance, nextVNode.props, nextVNode.type.props);2474        resolveSlots(instance, nextVNode.children);2475    }2476    function updateHOCHostEl({ vnode, parent }, el) {2477        while (parent && parent.subTree === vnode) {2478            (vnode = parent.vnode).el = el;
...

runtime-core.esm-bundler.js

Source:runtime-core.esm-bundler.js

...60let stack = [];61function pushWarningContext(vnode) {62    stack.push(vnode);63}64function popWarningContext() {65    stack.pop();66}67function warn(msg, ...args) {68    const instance = stack.length ? stack[stack.length - 1].component : null;69    const appWarnHandler = instance && instance.appContext.config.warnHandler;70    const trace = getComponentTrace();71    if (appWarnHandler) {72        appWarnHandler(msg + args.join(''), instance && instance.renderProxy, formatTrace(trace).join(''));73        return;74    }75    console.warn(`[Vue warn]: ${msg}`, ...args);76    // avoid spamming console during tests77    if (typeof process !== 'undefined' && process.env.NODE_ENV === 'test') {78        return;79    }80    if (!trace.length) {81        return;82    }83    if (trace.length > 1 && console.groupCollapsed) {84        console.groupCollapsed('at', ...formatTraceEntry(trace[0]));85        const logs = [];86        trace.slice(1).forEach((entry, i) => {87            if (i !== 0)88                logs.push('\n');89            logs.push(...formatTraceEntry(entry, i + 1));90        });91        console.log(...logs);92        console.groupEnd();93    }94    else {95        console.log(...formatTrace(trace));96    }97}98function getComponentTrace() {99    let currentVNode = stack[stack.length - 1];100    if (!currentVNode) {101        return [];102    }103    // we can't just use the stack because it will be incomplete during updates104    // that did not start from the root. Re-construct the parent chain using105    // instance parent pointers.106    const normalizedStack = [];107    while (currentVNode) {108        const last = normalizedStack[0];109        if (last && last.vnode === currentVNode) {110            last.recurseCount++;111        }112        else {113            normalizedStack.push({114                vnode: currentVNode,115                recurseCount: 0116            });117        }118        const parentInstance = currentVNode.component119            .parent;120        currentVNode = parentInstance && parentInstance.vnode;121    }122    return normalizedStack;123}124function formatTrace(trace) {125    const logs = [];126    trace.forEach((entry, i) => {127        const formatted = formatTraceEntry(entry, i);128        if (i === 0) {129            logs.push('at', ...formatted);130        }131        else {132            logs.push('\n', ...formatted);133        }134    });135    return logs;136}137function formatTraceEntry({ vnode, recurseCount }, depth = 0) {138    const padding = depth === 0 ? '' : ' '.repeat(depth * 2 + 1);139    const postfix = recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``;140    const open = padding + `<${formatComponentName(vnode)}`;141    const close = `>` + postfix;142    const rootLabel = vnode.component.parent == null ? `(Root)` : ``;143    return vnode.props144        ? [open, ...formatProps(vnode.props), close, rootLabel]145        : [open + close, rootLabel];146}147const classifyRE = /(?:^|[-_])(\w)/g;148const classify = (str) => str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '');149function formatComponentName(vnode, file) {150    const Component = vnode.type;151    let name = Component.displayName || Component.name;152    if (!name && file) {153        const match = file.match(/([^/\\]+)\.vue$/);154        if (match) {155            name = match[1];156        }157    }158    return name ? classify(name) : 'AnonymousComponent';159}160function formatProps(props) {161    const res = [];162    for (const key in props) {163        const value = props[key];164        if (isString(value)) {165            res.push(`${key}=${JSON.stringify(value)}`);166        }167        else {168            res.push(`${key}=`, toRaw(value));169        }170    }171    return res;172}173const ErrorTypeStrings = {174    ["bc" /* BEFORE_CREATE */]: 'beforeCreate hook',175    ["c" /* CREATED */]: 'created hook',176    ["bm" /* BEFORE_MOUNT */]: 'beforeMount hook',177    ["m" /* MOUNTED */]: 'mounted hook',178    ["bu" /* BEFORE_UPDATE */]: 'beforeUpdate hook',179    ["u" /* UPDATED */]: 'updated',180    ["bum" /* BEFORE_UNMOUNT */]: 'beforeUnmount hook',181    ["um" /* UNMOUNTED */]: 'unmounted hook',182    ["a" /* ACTIVATED */]: 'activated hook',183    ["da" /* DEACTIVATED */]: 'deactivated hook',184    ["ec" /* ERROR_CAPTURED */]: 'errorCaptured hook',185    ["rtc" /* RENDER_TRACKED */]: 'renderTracked hook',186    ["rtg" /* RENDER_TRIGGERED */]: 'renderTriggered hook',187    [0 /* SETUP_FUNCTION */]: 'setup function',188    [1 /* RENDER_FUNCTION */]: 'render function',189    [2 /* WATCH_GETTER */]: 'watcher getter',190    [3 /* WATCH_CALLBACK */]: 'watcher callback',191    [4 /* WATCH_CLEANUP */]: 'watcher cleanup function',192    [5 /* NATIVE_EVENT_HANDLER */]: 'native event handler',193    [6 /* COMPONENT_EVENT_HANDLER */]: 'component event handler',194    [7 /* DIRECTIVE_HOOK */]: 'directive hook',195    [8 /* APP_ERROR_HANDLER */]: 'app errorHandler',196    [9 /* APP_WARN_HANDLER */]: 'app warnHandler',197    [10 /* SCHEDULER */]: 'scheduler flush. This is likely a Vue internals bug. ' +198        'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue'199};200function callWithErrorHandling(fn, instance, type, args) {201    let res;202    try {203        res = args ? fn(...args) : fn();204    }205    catch (err) {206        handleError(err, instance, type);207    }208    return res;209}210function callWithAsyncErrorHandling(fn, instance, type, args) {211    const res = callWithErrorHandling(fn, instance, type, args);212    if (res != null && !res._isVue && typeof res.then === 'function') {213        res.catch((err) => {214            handleError(err, instance, type);215        });216    }217    return res;218}219function handleError(err, instance, type) {220    const contextVNode = instance ? instance.vnode : null;221    if (instance) {222        let cur = instance.parent;223        // the exposed instance is the render proxy to keep it consistent with 2.x224        const exposedInstance = instance.renderProxy;225        // in production the hook receives only the error code226        const errorInfo =  ErrorTypeStrings[type] ;227        while (cur) {228            const errorCapturedHooks = cur.ec;229            if (errorCapturedHooks !== null) {230                for (let i = 0; i < errorCapturedHooks.length; i++) {231                    if (errorCapturedHooks[i](err, exposedInstance, errorInfo)) {232                        return;233                    }234                }235            }236            cur = cur.parent;237        }238        // app-level handling239        const appErrorHandler = instance.appContext.config.errorHandler;240        if (appErrorHandler) {241            callWithErrorHandling(appErrorHandler, null, 8 /* APP_ERROR_HANDLER */, [err, exposedInstance, errorInfo]);242            return;243        }244    }245    logError(err, type, contextVNode);246}247function logError(err, type, contextVNode) {248    // default behavior is crash in prod & test, recover in dev.249    // TODO we should probably make this configurable via `createApp`250    if (251        !(typeof process !== 'undefined' && process.env.NODE_ENV === 'test')) {252        const info = ErrorTypeStrings[type];253        if (contextVNode) {254            pushWarningContext(contextVNode);255        }256        warn(`Unhandled error${info ? ` during execution of ${info}` : ``}`);257        console.error(err);258        if (contextVNode) {259            popWarningContext();260        }261    }262    else {263        throw err;264    }265}266const queue = [];267const postFlushCbs = [];268const p = Promise.resolve();269let isFlushing = false;270function nextTick(fn) {271    return fn ? p.then(fn) : p;272}273function queueJob(job) {274    if (queue.indexOf(job) === -1) {275        queue.push(job);276        if (!isFlushing) {277            nextTick(flushJobs);278        }279    }280}281function queuePostFlushCb(cb) {282    if (Array.isArray(cb)) {283        postFlushCbs.push.apply(postFlushCbs, cb);284    }285    else {286        postFlushCbs.push(cb);287    }288    if (!isFlushing) {289        nextTick(flushJobs);290    }291}292const dedupe = (cbs) => Array.from(new Set(cbs));293function flushPostFlushCbs() {294    if (postFlushCbs.length) {295        const cbs = dedupe(postFlushCbs);296        postFlushCbs.length = 0;297        for (let i = 0; i < cbs.length; i++) {298            cbs[i]();299        }300    }301}302const RECURSION_LIMIT = 100;303function flushJobs(seenJobs) {304    isFlushing = true;305    let job;306    {307        seenJobs = seenJobs || new Map();308    }309    while ((job = queue.shift())) {310        {311            const seen = seenJobs;312            if (!seen.has(job)) {313                seen.set(job, 1);314            }315            else {316                const count = seen.get(job);317                if (count > RECURSION_LIMIT) {318                    throw new Error('Maximum recursive updates exceeded. ' +319                        "You may have code that is mutating state in your component's " +320                        'render function or updated hook.');321                }322                else {323                    seen.set(job, count + 1);324                }325            }326        }327        try {328            job();329        }330        catch (err) {331            handleError(err, null, 10 /* SCHEDULER */);332        }333    }334    flushPostFlushCbs();335    isFlushing = false;336    // some postFlushCb queued jobs!337    // keep flushing until it drains.338    if (queue.length) {339        flushJobs(seenJobs);340    }341}342const Fragment =  Symbol('Fragment') ;343const Text =  Symbol('Text') ;344const Comment =  Symbol('Empty') ;345const Portal =  Symbol('Portal') ;346const Suspense =  Symbol('Suspense') ;347// Since v-if and v-for are the two possible ways node structure can dynamically348// change, once we consider v-if branches and each v-for fragment a block, we349// can divide a template into nested blocks, and within each block the node350// structure would be stable. This allows us to skip most children diffing351// and only worry about the dynamic nodes (indicated by patch flags).352const blockStack = [];353// Open a block.354// This must be called before `createBlock`. It cannot be part of `createBlock`355// because the children of the block are evaluated before `createBlock` itself356// is called. The generated code typically looks like this:357//358//   function render() {359//     return (openBlock(),createBlock('div', null, [...]))360//   }361//362// disableTracking is true when creating a fragment block, since a fragment363// always diffs its children.364function openBlock(disableTracking) {365    blockStack.push(disableTracking ? null : []);366}367let shouldTrack = true;368// Create a block root vnode. Takes the same exact arguments as `createVNode`.369// A block root keeps track of dynamic nodes within the block in the370// `dynamicChildren` array.371function createBlock(type, props, children, patchFlag, dynamicProps) {372    // avoid a block with optFlag tracking itself373    shouldTrack = false;374    const vnode = createVNode(type, props, children, patchFlag, dynamicProps);375    shouldTrack = true;376    const trackedNodes = blockStack.pop();377    vnode.dynamicChildren =378        trackedNodes && trackedNodes.length ? trackedNodes : EMPTY_ARR;379    // a block is always going to be patched380    trackDynamicNode(vnode);381    return vnode;382}383function isVNode(value) {384    return value ? value._isVNode === true : false;385}386function createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null) {387    // class & style normalization.388    if (props !== null) {389        // for reactive or proxy objects, we need to clone it to enable mutation.390        if (isReactive(props) || SetupProxySymbol in props) {391            props = extend({}, props);392        }393        // class normalization only needed if the vnode isn't generated by394        // compiler-optimized code395        if (props.class != null && !(patchFlag & 2 /* CLASS */)) {396            props.class = normalizeClass(props.class);397        }398        let { style } = props;399        if (style != null) {400            // reactive state objects need to be cloned since they are likely to be401            // mutated402            if (isReactive(style) && !isArray(style)) {403                style = extend({}, style);404            }405            props.style = normalizeStyle(style);406        }407    }408    // encode the vnode type information into a bitmap409    const shapeFlag = isString(type)410        ? 1 /* ELEMENT */411        : isObject(type)412            ? 4 /* STATEFUL_COMPONENT */413            : isFunction(type)414                ? 2 /* FUNCTIONAL_COMPONENT */415                : 0;416    const vnode = {417        _isVNode: true,418        type,419        props,420        key: (props && props.key) || null,421        ref: (props && props.ref) || null,422        children: null,423        component: null,424        suspense: null,425        el: null,426        anchor: null,427        target: null,428        shapeFlag,429        patchFlag,430        dynamicProps,431        dynamicChildren: null,432        appContext: null433    };434    normalizeChildren(vnode, children);435    // presence of a patch flag indicates this node needs patching on updates.436    // component nodes also should always be patched, because even if the437    // component doesn't need to update, it needs to persist the instance on to438    // the next vnode so that it can be properly unmounted later.439    if (shouldTrack &&440        (patchFlag ||441            shapeFlag & 4 /* STATEFUL_COMPONENT */ ||442            shapeFlag & 2 /* FUNCTIONAL_COMPONENT */)) {443        trackDynamicNode(vnode);444    }445    return vnode;446}447function trackDynamicNode(vnode) {448    const currentBlockDynamicNodes = blockStack[blockStack.length - 1];449    if (currentBlockDynamicNodes != null) {450        currentBlockDynamicNodes.push(vnode);451    }452}453function cloneVNode(vnode) {454    return {455        _isVNode: true,456        type: vnode.type,457        props: vnode.props,458        key: vnode.key,459        ref: vnode.ref,460        children: vnode.children,461        target: vnode.target,462        shapeFlag: vnode.shapeFlag,463        patchFlag: vnode.patchFlag,464        dynamicProps: vnode.dynamicProps,465        dynamicChildren: vnode.dynamicChildren,466        appContext: vnode.appContext,467        // these should be set to null since they should only be present on468        // mounted VNodes. If they are somehow not null, this means we have469        // encountered an already-mounted vnode being used again.470        component: null,471        suspense: null,472        el: null,473        anchor: null474    };475}476function normalizeVNode(child) {477    if (child == null) {478        // empty placeholder479        return createVNode(Comment);480    }481    else if (isArray(child)) {482        // fragment483        return createVNode(Fragment, null, child);484    }485    else if (typeof child === 'object') {486        // already vnode, this should be the most common since compiled templates487        // always produce all-vnode children arrays488        return child.el === null ? child : cloneVNode(child);489    }490    else {491        // primitive types492        return createVNode(Text, null, child + '');493    }494}495function normalizeChildren(vnode, children) {496    let type = 0;497    if (children == null) {498        children = null;499    }500    else if (isArray(children)) {501        type = 16 /* ARRAY_CHILDREN */;502    }503    else if (typeof children === 'object') {504        type = 32 /* SLOTS_CHILDREN */;505    }506    else if (isFunction(children)) {507        children = { default: children };508        type = 32 /* SLOTS_CHILDREN */;509    }510    else {511        children = isString(children) ? children : children + '';512        type = 8 /* TEXT_CHILDREN */;513    }514    vnode.children = children;515    vnode.shapeFlag |= type;516}517function normalizeStyle(value) {518    if (isArray(value)) {519        const res = {};520        for (let i = 0; i < value.length; i++) {521            const normalized = normalizeStyle(value[i]);522            if (normalized) {523                for (const key in normalized) {524                    res[key] = normalized[key];525                }526            }527        }528        return res;529    }530    else if (isObject(value)) {531        return value;532    }533}534function normalizeClass(value) {535    let res = '';536    if (isString(value)) {537        res = value;538    }539    else if (isArray(value)) {540        for (let i = 0; i < value.length; i++) {541            res += normalizeClass(value[i]) + ' ';542        }543    }544    else if (isObject(value)) {545        for (const name in value) {546            if (value[name]) {547                res += name + ' ';548            }549        }550    }551    return res.trim();552}553const handlersRE = /^on|^vnode/;554function mergeProps(...args) {555    const ret = {};556    extend(ret, args[0]);557    for (let i = 1; i < args.length; i++) {558        const toMerge = args[i];559        for (const key in toMerge) {560            if (key === 'class') {561                ret.class = normalizeClass([ret.class, toMerge.class]);562            }563            else if (key === 'style') {564                ret.style = normalizeStyle([ret.style, toMerge.style]);565            }566            else if (handlersRE.test(key)) {567                // on*, vnode*568                const existing = ret[key];569                ret[key] = existing570                    ? [].concat(existing, toMerge[key])571                    : toMerge[key];572            }573            else {574                ret[key] = toMerge[key];575            }576        }577    }578    return ret;579}580function injectHook(type, hook, target) {581    if (target) {582        (target[type] || (target[type] = [])).push((...args) => {583            if (target.isUnmounted) {584                return;585            }586            // disable tracking inside all lifecycle hooks587            // since they can potentially be called inside effects.588            pauseTracking();589            // Set currentInstance during hook invocation.590            // This assumes the hook does not synchronously trigger other hooks, which591            // can only be false when the user does something really funky.592            setCurrentInstance(target);593            const res = callWithAsyncErrorHandling(hook, target, type, args);594            setCurrentInstance(null);595            resumeTracking();596            return res;597        });598    }599    else {600        const apiName = `on${capitalize(ErrorTypeStrings[type].replace(/ hook$/, ''))}`;601        warn(`${apiName} is called when there is no active component instance to be ` +602            `associated with. ` +603            `Lifecycle injection APIs can only be used during execution of setup().` +604            ( ` If you are using async setup(), make sure to register lifecycle ` +605                    `hooks before the first await statement.`606                ));607    }608}609function onBeforeMount(hook, target = currentInstance) {610    injectHook("bm" /* BEFORE_MOUNT */, hook, target);611}612function onMounted(hook, target = currentInstance) {613    injectHook("m" /* MOUNTED */, hook, target);614}615function onBeforeUpdate(hook, target = currentInstance) {616    injectHook("bu" /* BEFORE_UPDATE */, hook, target);617}618function onUpdated(hook, target = currentInstance) {619    injectHook("u" /* UPDATED */, hook, target);620}621function onBeforeUnmount(hook, target = currentInstance) {622    injectHook("bum" /* BEFORE_UNMOUNT */, hook, target);623}624function onUnmounted(hook, target = currentInstance) {625    injectHook("um" /* UNMOUNTED */, hook, target);626}627function onRenderTriggered(hook, target = currentInstance) {628    injectHook("rtg" /* RENDER_TRIGGERED */, hook, target);629}630function onRenderTracked(hook, target = currentInstance) {631    injectHook("rtc" /* RENDER_TRACKED */, hook, target);632}633function onErrorCaptured(hook, target = currentInstance) {634    injectHook("ec" /* ERROR_CAPTURED */, hook, target);635}636// mark the current rendering instance for asset resolution (e.g.637// resolveComponent, resolveDirective) during render638let currentRenderingInstance = null;639function renderComponentRoot(instance) {640    const { type: Component, vnode, renderProxy, props, slots, attrs, emit } = instance;641    let result;642    currentRenderingInstance = instance;643    try {644        if (vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {645            result = normalizeVNode(instance.render.call(renderProxy));646        }647        else {648            // functional649            const render = Component;650            result = normalizeVNode(render.length > 1651                ? render(props, {652                    attrs,653                    slots,654                    emit655                })656                : render(props, null));657        }658    }659    catch (err) {660        handleError(err, instance, 1 /* RENDER_FUNCTION */);661        result = createVNode(Comment);662    }663    currentRenderingInstance = null;664    return result;665}666function shouldUpdateComponent(prevVNode, nextVNode, optimized) {667    const { props: prevProps, children: prevChildren } = prevVNode;668    const { props: nextProps, children: nextChildren, patchFlag } = nextVNode;669    if (patchFlag > 0) {670        if (patchFlag & 256 /* DYNAMIC_SLOTS */) {671            // slot content that references values that might have changed,672            // e.g. in a v-for673            return true;674        }675        if (patchFlag & 16 /* FULL_PROPS */) {676            // presence of this flag indicates props are always non-null677            return hasPropsChanged(prevProps, nextProps);678        }679        else if (patchFlag & 8 /* PROPS */) {680            const dynamicProps = nextVNode.dynamicProps;681            for (let i = 0; i < dynamicProps.length; i++) {682                const key = dynamicProps[i];683                if (nextProps[key] !== prevProps[key]) {684                    return true;685                }686            }687        }688    }689    else if (!optimized) {690        // this path is only taken by manually written render functions691        // so presence of any children leads to a forced update692        if (prevChildren != null || nextChildren != null) {693            return true;694        }695        if (prevProps === nextProps) {696            return false;697        }698        if (prevProps === null) {699            return nextProps !== null;700        }701        if (nextProps === null) {702            return prevProps !== null;703        }704        return hasPropsChanged(prevProps, nextProps);705    }706    return false;707}708function hasPropsChanged(prevProps, nextProps) {709    const nextKeys = Object.keys(nextProps);710    if (nextKeys.length !== Object.keys(prevProps).length) {711        return true;712    }713    for (let i = 0; i < nextKeys.length; i++) {714        const key = nextKeys[i];715        if (nextProps[key] !== prevProps[key]) {716            return true;717        }718    }719    return false;720}721// resolve raw VNode data.722// - filter out reserved keys (key, ref, slots)723// - extract class and style into $attrs (to be merged onto child724//   component root)725// - for the rest:726//   - if has declared props: put declared ones in `props`, the rest in `attrs`727//   - else: everything goes in `props`.728function resolveProps(instance, rawProps, _options) {729    const hasDeclaredProps = _options != null;730    const options = normalizePropsOptions(_options);731    if (!rawProps && !hasDeclaredProps) {732        return;733    }734    const props = {};735    let attrs = void 0;736    // update the instance propsProxy (passed to setup()) to trigger potential737    // changes738    const propsProxy = instance.propsProxy;739    const setProp = propsProxy740        ? (key, val) => {741            props[key] = val;742            propsProxy[key] = val;743        }744        : (key, val) => {745            props[key] = val;746        };747    // allow mutation of propsProxy (which is readonly by default)748    unlock();749    if (rawProps != null) {750        for (const key in rawProps) {751            // key, ref are reserved752            if (isReservedProp(key))753                continue;754            // any non-declared data are put into a separate `attrs` object755            // for spreading756            if (hasDeclaredProps && !hasOwn(options, key)) {757                (attrs || (attrs = {}))[key] = rawProps[key];758            }759            else {760                setProp(key, rawProps[key]);761            }762        }763    }764    // set default values, cast booleans & run validators765    if (hasDeclaredProps) {766        for (const key in options) {767            let opt = options[key];768            if (opt == null)769                continue;770            const isAbsent = !hasOwn(props, key);771            const hasDefault = hasOwn(opt, 'default');772            const currentValue = props[key];773            // default values774            if (hasDefault && currentValue === undefined) {775                const defaultValue = opt.default;776                setProp(key, isFunction(defaultValue) ? defaultValue() : defaultValue);777            }778            // boolean casting779            if (opt["1" /* shouldCast */]) {780                if (isAbsent && !hasDefault) {781                    setProp(key, false);782                }783                else if (opt["2" /* shouldCastTrue */] &&784                    (currentValue === '' || currentValue === hyphenate(key))) {785                    setProp(key, true);786                }787            }788            // runtime validation789            if ( rawProps) {790                validateProp(key, toRaw(rawProps[key]), opt, isAbsent);791            }792        }793    }794    else {795        // if component has no declared props, $attrs === $props796        attrs = props;797    }798    // in case of dynamic props, check if we need to delete keys from799    // the props proxy800    const { patchFlag } = instance.vnode;801    if (propsProxy !== null &&802        (patchFlag === 0 || patchFlag & 16 /* FULL_PROPS */)) {803        const rawInitialProps = toRaw(propsProxy);804        for (const key in rawInitialProps) {805            if (!hasOwn(props, key)) {806                delete propsProxy[key];807            }808        }809    }810    // lock readonly811    lock();812    instance.props =  readonly(props) ;813    instance.attrs = options814        ?  attrs != null815            ? readonly(attrs)816            : attrs817        : instance.props;818}819const normalizationMap = new WeakMap();820function normalizePropsOptions(raw) {821    if (!raw) {822        return null;823    }824    if (normalizationMap.has(raw)) {825        return normalizationMap.get(raw);826    }827    const normalized = {};828    normalizationMap.set(raw, normalized);829    if (isArray(raw)) {830        for (let i = 0; i < raw.length; i++) {831            if ( !isString(raw[i])) {832                warn(`props must be strings when using array syntax.`, raw[i]);833            }834            const normalizedKey = camelize(raw[i]);835            if (normalizedKey[0] !== '$') {836                normalized[normalizedKey] = EMPTY_OBJ;837            }838            else {839                warn(`Invalid prop name: "${normalizedKey}" is a reserved property.`);840            }841        }842    }843    else {844        if ( !isObject(raw)) {845            warn(`invalid props options`, raw);846        }847        for (const key in raw) {848            const normalizedKey = camelize(key);849            if (normalizedKey[0] !== '$') {850                const opt = raw[key];851                const prop = (normalized[normalizedKey] =852                    isArray(opt) || isFunction(opt) ? { type: opt } : opt);853                if (prop != null) {854                    const booleanIndex = getTypeIndex(Boolean, prop.type);855                    const stringIndex = getTypeIndex(String, prop.type);856                    prop["1" /* shouldCast */] = booleanIndex > -1;857                    prop["2" /* shouldCastTrue */] = booleanIndex < stringIndex;858                }859            }860            else {861                warn(`Invalid prop name: "${normalizedKey}" is a reserved property.`);862            }863        }864    }865    return normalized;866}867// use function string name to check type constructors868// so that it works across vms / iframes.869function getType(ctor) {870    const match = ctor && ctor.toString().match(/^\s*function (\w+)/);871    return match ? match[1] : '';872}873function isSameType(a, b) {874    return getType(a) === getType(b);875}876function getTypeIndex(type, expectedTypes) {877    if (isArray(expectedTypes)) {878        for (let i = 0, len = expectedTypes.length; i < len; i++) {879            if (isSameType(expectedTypes[i], type)) {880                return i;881            }882        }883    }884    else if (isObject(expectedTypes)) {885        return isSameType(expectedTypes, type) ? 0 : -1;886    }887    return -1;888}889function validateProp(name, value, prop, isAbsent) {890    const { type, required, validator } = prop;891    // required!892    if (required && isAbsent) {893        warn('Missing required prop: "' + name + '"');894        return;895    }896    // missing but optional897    if (value == null && !prop.required) {898        return;899    }900    // type check901    if (type != null && type !== true) {902        let isValid = false;903        const types = isArray(type) ? type : [type];904        const expectedTypes = [];905        // value is valid as long as one of the specified types match906        for (let i = 0; i < types.length && !isValid; i++) {907            const { valid, expectedType } = assertType(value, types[i]);908            expectedTypes.push(expectedType || '');909            isValid = valid;910        }911        if (!isValid) {912            warn(getInvalidTypeMessage(name, value, expectedTypes));913            return;914        }915    }916    // custom validator917    if (validator && !validator(value)) {918        warn('Invalid prop: custom validator check failed for prop "' + name + '".');919    }920}921const simpleCheckRE = /^(String|Number|Boolean|Function|Symbol)$/;922function assertType(value, type) {923    let valid;924    const expectedType = getType(type);925    if (simpleCheckRE.test(expectedType)) {926        const t = typeof value;927        valid = t === expectedType.toLowerCase();928        // for primitive wrapper objects929        if (!valid && t === 'object') {930            valid = value instanceof type;931        }932    }933    else if (expectedType === 'Object') {934        valid = toRawType(value) === 'Object';935    }936    else if (expectedType === 'Array') {937        valid = isArray(value);938    }939    else {940        valid = value instanceof type;941    }942    return {943        valid,944        expectedType945    };946}947function getInvalidTypeMessage(name, value, expectedTypes) {948    let message = `Invalid prop: type check failed for prop "${name}".` +949        ` Expected ${expectedTypes.map(capitalize).join(', ')}`;950    const expectedType = expectedTypes[0];951    const receivedType = toRawType(value);952    const expectedValue = styleValue(value, expectedType);953    const receivedValue = styleValue(value, receivedType);954    // check if we need to specify expected value955    if (expectedTypes.length === 1 &&956        isExplicable(expectedType) &&957        !isBoolean(expectedType, receivedType)) {958        message += ` with value ${expectedValue}`;959    }960    message += `, got ${receivedType} `;961    // check if we need to specify received value962    if (isExplicable(receivedType)) {963        message += `with value ${receivedValue}.`;964    }965    return message;966}967function styleValue(value, type) {968    if (type === 'String') {969        return `"${value}"`;970    }971    else if (type === 'Number') {972        return `${Number(value)}`;973    }974    else {975        return `${value}`;976    }977}978function toRawType(value) {979    return toTypeString(value).slice(8, -1);980}981function isExplicable(type) {982    const explicitTypes = ['string', 'number', 'boolean'];983    return explicitTypes.some(elem => type.toLowerCase() === elem);984}985function isBoolean(...args) {986    return args.some(elem => elem.toLowerCase() === 'boolean');987}988const normalizeSlotValue = (value) => isArray(value)989    ? value.map(normalizeVNode)990    : [normalizeVNode(value)];991const normalizeSlot = (key, rawSlot) => (props) => {992    if ( currentInstance != null) {993        warn(`Slot "${key}" invoked outside of the render function: ` +994            `this will not track dependencies used in the slot. ` +995            `Invoke the slot function inside the render function instead.`);996    }997    return normalizeSlotValue(rawSlot(props));998};999function resolveSlots(instance, children) {1000    let slots;1001    if (instance.vnode.shapeFlag & 32 /* SLOTS_CHILDREN */) {1002        if (children._compiled) {1003            // pre-normalized slots object generated by compiler1004            slots = children;1005        }1006        else {1007            slots = {};1008            for (const key in children) {1009                let value = children[key];1010                if (isFunction(value)) {1011                    slots[key] = normalizeSlot(key, value);1012                }1013                else if (value != null) {1014                    {1015                        warn(`Non-function value encountered for slot "${key}". ` +1016                            `Prefer function slots for better performance.`);1017                    }1018                    value = normalizeSlotValue(value);1019                    slots[key] = () => value;1020                }1021            }1022        }1023    }1024    else if (children !== null) {1025        // non slot object children (direct value) passed to a component1026        {1027            warn(`Non-function value encountered for default slot. ` +1028                `Prefer function slots for better performance.`);1029        }1030        const normalized = normalizeSlotValue(children);1031        slots = { default: () => normalized };1032    }1033    if (slots !== void 0) {1034        instance.slots = slots;1035    }1036}1037/**1038Runtime helper for applying directives to a vnode. Example usage:1039const comp = resolveComponent('comp')1040const foo = resolveDirective('foo')1041const bar = resolveDirective('bar')1042return applyDirectives(h(comp), [1043  [foo, this.x],1044  [bar, this.y]1045])1046*/1047const valueCache = new WeakMap();1048function applyDirective(props, instance, directive, value, arg, modifiers) {1049    let valueCacheForDir = valueCache.get(directive);1050    if (!valueCacheForDir) {1051        valueCacheForDir = new WeakMap();1052        valueCache.set(directive, valueCacheForDir);1053    }1054    for (const key in directive) {1055        const hook = directive[key];1056        const hookKey = `vnode` + key[0].toUpperCase() + key.slice(1);1057        const vnodeHook = (vnode, prevVNode) => {1058            let oldValue;1059            if (prevVNode != null) {1060                oldValue = valueCacheForDir.get(prevVNode);1061                valueCacheForDir.delete(prevVNode);1062            }1063            valueCacheForDir.set(vnode, value);1064            hook(vnode.el, {1065                instance: instance.renderProxy,1066                value,1067                oldValue,1068                arg,1069                modifiers1070            }, vnode, prevVNode);1071        };1072        const existing = props[hookKey];1073        props[hookKey] = existing1074            ? [].concat(existing, vnodeHook)1075            : vnodeHook;1076    }1077}1078function applyDirectives(vnode, directives) {1079    const instance = currentRenderingInstance;1080    if (instance !== null) {1081        vnode = cloneVNode(vnode);1082        vnode.props = vnode.props != null ? extend({}, vnode.props) : {};1083        for (let i = 0; i < directives.length; i++) {1084            applyDirective(vnode.props, instance, ...directives[i]);1085        }1086    }1087    else {1088        warn(`applyDirectives can only be used inside render functions.`);1089    }1090    return vnode;1091}1092function invokeDirectiveHook(hook, instance, vnode, prevVNode = null) {1093    const args = [vnode, prevVNode];1094    if (isArray(hook)) {1095        for (let i = 0; i < hook.length; i++) {1096            callWithAsyncErrorHandling(hook[i], instance, 7 /* DIRECTIVE_HOOK */, args);1097        }1098    }1099    else if (isFunction(hook)) {1100        callWithAsyncErrorHandling(hook, instance, 7 /* DIRECTIVE_HOOK */, args);1101    }1102}1103function createAppContext() {1104    return {1105        config: {1106            devtools: true,1107            performance: false,1108            errorHandler: undefined,1109            warnHandler: undefined1110        },1111        mixins: [],1112        components: {},1113        directives: {},1114        provides: {}1115    };1116}1117function createAppAPI(render) {1118    return function createApp() {1119        const context = createAppContext();1120        let isMounted = false;1121        const app = {1122            get config() {1123                return context.config;1124            },1125            set config(v) {1126                {1127                    warn(`app.config cannot be replaced. Modify individual options instead.`);1128                }1129            },1130            use(plugin) {1131                if (isFunction(plugin)) {1132                    plugin(app);1133                }1134                else if (isFunction(plugin.install)) {1135                    plugin.install(app);1136                }1137                else {1138                    warn(`A plugin must either be a function or an object with an "install" ` +1139                        `function.`);1140                }1141                return app;1142            },1143            mixin(mixin) {1144                context.mixins.push(mixin);1145                return app;1146            },1147            component(name, component) {1148                // TODO component name validation1149                if (!component) {1150                    return context.components[name];1151                }1152                else {1153                    context.components[name] = component;1154                    return app;1155                }1156            },1157            directive(name, directive) {1158                // TODO directive name validation1159                if (!directive) {1160                    return context.directives[name];1161                }1162                else {1163                    context.directives[name] = directive;1164                    return app;1165                }1166            },1167            mount(rootComponent, rootContainer, rootProps) {1168                if (!isMounted) {1169                    const vnode = createVNode(rootComponent, rootProps);1170                    // store app context on the root VNode.1171                    // this will be set on the root instance on initial mount.1172                    vnode.appContext = context;1173                    render(vnode, rootContainer);1174                    isMounted = true;1175                    return vnode.component.renderProxy;1176                }1177                else {1178                    warn(`App has already been mounted. Create a new app instance instead.`);1179                }1180            },1181            provide(key, value) {1182                if ( key in context.provides) {1183                    warn(`App already provides property with key "${key}". ` +1184                        `It will be overwritten with the new value.`);1185                }1186                context.provides[key] = value;1187            }1188        };1189        return app;1190    };1191}1192function createSuspenseBoundary(vnode, parent, parentComponent, container, hiddenContainer, anchor, isSVG, optimized) {1193    return {1194        vnode,1195        parent,1196        parentComponent,1197        isSVG,1198        optimized,1199        container,1200        hiddenContainer,1201        anchor,1202        deps: 0,1203        subTree: null,1204        fallbackTree: null,1205        isResolved: false,1206        isUnmounted: false,1207        effects: []1208    };1209}1210function normalizeSuspenseChildren(vnode) {1211    const { shapeFlag, children } = vnode;1212    if (shapeFlag & PublicShapeFlags.SLOTS_CHILDREN) {1213        const { default: d, fallback } = children;1214        return {1215            content: normalizeVNode(isFunction(d) ? d() : d),1216            fallback: normalizeVNode(isFunction(fallback) ? fallback() : fallback)1217        };1218    }1219    else {1220        return {1221            content: normalizeVNode(children),1222            fallback: normalizeVNode(null)1223        };1224    }1225}1226function createDevEffectOptions(instance) {1227    return {1228        scheduler: queueJob,1229        onTrack: instance.rtc ? e => invokeHooks(instance.rtc, e) : void 0,1230        onTrigger: instance.rtg ? e => invokeHooks(instance.rtg, e) : void 01231    };1232}1233function isSameType$1(n1, n2) {1234    return n1.type === n2.type && n1.key === n2.key;1235}1236function invokeHooks(hooks, arg) {1237    for (let i = 0; i < hooks.length; i++) {1238        hooks[i](arg);1239    }1240}1241function queuePostRenderEffect(fn, suspense) {1242    if (suspense !== null && !suspense.isResolved) {1243        if (isArray(fn)) {1244            suspense.effects.push(...fn);1245        }1246        else {1247            suspense.effects.push(fn);1248        }1249    }1250    else {1251        queuePostFlushCb(fn);1252    }1253}1254/**1255 * The createRenderer function accepts two generic arguments:1256 * HostNode and HostElement, corresponding to Node and Element types in the1257 * host environment. For example, for runtime-dom, HostNode would be the DOM1258 * `Node` interface and HostElement would be the DOM `Element` interface.1259 *1260 * Custom renderers can pass in the platform specific types like this:1261 *1262 * ``` js1263 * const { render, createApp } = createRenderer<Node, Element>({1264 *   patchProp,1265 *   ...nodeOps1266 * })1267 * ```1268 */1269function createRenderer(options) {1270    const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, querySelector: hostQuerySelector } = options;1271    function patch(n1, // null means this is a mount1272    n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false) {1273        // patching & not same type, unmount old tree1274        if (n1 != null && !isSameType$1(n1, n2)) {1275            anchor = getNextHostNode(n1);1276            unmount(n1, parentComponent, parentSuspense, true);1277            n1 = null;1278        }1279        const { type, shapeFlag } = n2;1280        switch (type) {1281            case Text:1282                processText(n1, n2, container, anchor);1283                break;1284            case Comment:1285                processCommentNode(n1, n2, container, anchor);1286                break;1287            case Fragment:1288                processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1289                break;1290            case Portal:1291                processPortal(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1292                break;1293            case Suspense:1294                {1295                    processSuspense(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1296                }1297                break;1298            default:1299                if (shapeFlag & 1 /* ELEMENT */) {1300                    processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1301                }1302                else if (shapeFlag & 6 /* COMPONENT */) {1303                    processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1304                }1305                else {1306                    warn('Invalid HostVNode type:', n2.type, `(${typeof n2.type})`);1307                }1308        }1309    }1310    function processText(n1, n2, container, anchor) {1311        if (n1 == null) {1312            hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);1313        }1314        else {1315            const el = (n2.el = n1.el);1316            if (n2.children !== n1.children) {1317                hostSetText(el, n2.children);1318            }1319        }1320    }1321    function processCommentNode(n1, n2, container, anchor) {1322        if (n1 == null) {1323            hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor);1324        }1325        else {1326            // there's no support for dynamic comments1327            n2.el = n1.el;1328        }1329    }1330    function processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1331        if (n1 == null) {1332            mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG);1333        }1334        else {1335            patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized);1336        }1337        if (n2.ref !== null && parentComponent !== null) {1338            setRef(n2.ref, n1 && n1.ref, parentComponent, n2.el);1339        }1340    }1341    function mountElement(vnode, container, anchor, parentComponent, parentSuspense, isSVG) {1342        const tag = vnode.type;1343        isSVG = isSVG || tag === 'svg';1344        const el = (vnode.el = hostCreateElement(tag, isSVG));1345        const { props, shapeFlag } = vnode;1346        if (props != null) {1347            for (const key in props) {1348                if (isReservedProp(key))1349                    continue;1350                hostPatchProp(el, key, props[key], null, isSVG);1351            }1352            if (props.vnodeBeforeMount != null) {1353                invokeDirectiveHook(props.vnodeBeforeMount, parentComponent, vnode);1354            }1355        }1356        if (shapeFlag & 8 /* TEXT_CHILDREN */) {1357            hostSetElementText(el, vnode.children);1358        }1359        else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1360            mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG);1361        }1362        hostInsert(el, container, anchor);1363        if (props != null && props.vnodeMounted != null) {1364            queuePostRenderEffect(() => {1365                invokeDirectiveHook(props.vnodeMounted, parentComponent, vnode);1366            }, parentSuspense);1367        }1368    }1369    function mountChildren(children, container, anchor, parentComponent, parentSuspense, isSVG, start = 0) {1370        for (let i = start; i < children.length; i++) {1371            const child = (children[i] = normalizeVNode(children[i]));1372            patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG);1373        }1374    }1375    function patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized) {1376        const el = (n2.el = n1.el);1377        const { patchFlag, dynamicChildren } = n2;1378        const oldProps = (n1 && n1.props) || EMPTY_OBJ;1379        const newProps = n2.props || EMPTY_OBJ;1380        if (newProps.vnodeBeforeUpdate != null) {1381            invokeDirectiveHook(newProps.vnodeBeforeUpdate, parentComponent, n2, n1);1382        }1383        if (patchFlag > 0) {1384            // the presence of a patchFlag means this element's render code was1385            // generated by the compiler and can take the fast path.1386            // in this path old node and new node are guaranteed to have the same shape1387            // (i.e. at the exact same position in the source template)1388            if (patchFlag & 16 /* FULL_PROPS */) {1389                // element props contain dynamic keys, full diff needed1390                patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);1391            }1392            else {1393                // class1394                // this flag is matched when the element has dynamic class bindings.1395                if (patchFlag & 2 /* CLASS */) {1396                    if (oldProps.class !== newProps.class) {1397                        hostPatchProp(el, 'class', newProps.class, null, isSVG);1398                    }1399                }1400                // style1401                // this flag is matched when the element has dynamic style bindings1402                if (patchFlag & 4 /* STYLE */) {1403                    hostPatchProp(el, 'style', newProps.style, oldProps.style, isSVG);1404                }1405                // props1406                // This flag is matched when the element has dynamic prop/attr bindings1407                // other than class and style. The keys of dynamic prop/attrs are saved for1408                // faster iteration.1409                // Note dynamic keys like :[foo]="bar" will cause this optimization to1410                // bail out and go through a full diff because we need to unset the old key1411                if (patchFlag & 8 /* PROPS */) {1412                    // if the flag is present then dynamicProps must be non-null1413                    const propsToUpdate = n2.dynamicProps;1414                    for (let i = 0; i < propsToUpdate.length; i++) {1415                        const key = propsToUpdate[i];1416                        const prev = oldProps[key];1417                        const next = newProps[key];1418                        if (prev !== next) {1419                            hostPatchProp(el, key, next, prev, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);1420                        }1421                    }1422                }1423            }1424            // text1425            // This flag is matched when the element has only dynamic text children.1426            // this flag is terminal (i.e. skips children diffing).1427            if (patchFlag & 1 /* TEXT */) {1428                if (n1.children !== n2.children) {1429                    hostSetElementText(el, n2.children);1430                }1431                return; // terminal1432            }1433        }1434        else if (!optimized) {1435            // unoptimized, full diff1436            patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);1437        }1438        if (dynamicChildren != null) {1439            // children fast path1440            const oldDynamicChildren = n1.dynamicChildren;1441            for (let i = 0; i < dynamicChildren.length; i++) {1442                patch(oldDynamicChildren[i], dynamicChildren[i], el, null, parentComponent, parentSuspense, isSVG, true);1443            }1444        }1445        else if (!optimized) {1446            // full diff1447            patchChildren(n1, n2, el, null, parentComponent, parentSuspense, isSVG);1448        }1449        if (newProps.vnodeUpdated != null) {1450            queuePostRenderEffect(() => {1451                invokeDirectiveHook(newProps.vnodeUpdated, parentComponent, n2, n1);1452            }, parentSuspense);1453        }1454    }1455    function patchProps(el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) {1456        if (oldProps !== newProps) {1457            for (const key in newProps) {1458                if (isReservedProp(key))1459                    continue;1460                const next = newProps[key];1461                const prev = oldProps[key];1462                if (next !== prev) {1463                    hostPatchProp(el, key, next, prev, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);1464                }1465            }1466            if (oldProps !== EMPTY_OBJ) {1467                for (const key in oldProps) {1468                    if (isReservedProp(key))1469                        continue;1470                    if (!(key in newProps)) {1471                        hostPatchProp(el, key, null, null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);1472                    }1473                }1474            }1475        }1476    }1477    function processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1478        const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateComment(''));1479        const fragmentEndAnchor = (n2.anchor = n11480            ? n1.anchor1481            : hostCreateComment(''));1482        if (n1 == null) {1483            hostInsert(fragmentStartAnchor, container, anchor);1484            hostInsert(fragmentEndAnchor, container, anchor);1485            // a fragment can only have array children1486            // since they are either generated by the compiler, or implicitly created1487            // from arrays.1488            mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG);1489        }1490        else {1491            patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);1492        }1493    }1494    function processPortal(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1495        const targetSelector = n2.props && n2.props.target;1496        const { patchFlag, shapeFlag, children } = n2;1497        if (n1 == null) {1498            const target = (n2.target = isString(targetSelector)1499                ? hostQuerySelector(targetSelector)1500                : null);1501            if (target != null) {1502                if (shapeFlag & 8 /* TEXT_CHILDREN */) {1503                    hostSetElementText(target, children);1504                }1505                else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1506                    mountChildren(children, target, null, parentComponent, parentSuspense, isSVG);1507                }1508            }1509            else {1510                warn('Invalid Portal target on mount:', target, `(${typeof target})`);1511            }1512        }1513        else {1514            // update content1515            const target = (n2.target = n1.target);1516            if (patchFlag === 1 /* TEXT */) {1517                hostSetElementText(target, children);1518            }1519            else if (!optimized) {1520                patchChildren(n1, n2, target, null, parentComponent, parentSuspense, isSVG);1521            }1522            // target changed1523            if (targetSelector !== (n1.props && n1.props.target)) {1524                const nextTarget = (n2.target = isString(targetSelector)1525                    ? hostQuerySelector(targetSelector)1526                    : null);1527                if (nextTarget != null) {1528                    // move content1529                    if (shapeFlag & 8 /* TEXT_CHILDREN */) {1530                        hostSetElementText(target, '');1531                        hostSetElementText(nextTarget, children);1532                    }1533                    else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1534                        for (let i = 0; i < children.length; i++) {1535                            move(children[i], nextTarget, null);1536                        }1537                    }1538                }1539                else {1540                    warn('Invalid Portal target on update:', target, `(${typeof target})`);1541                }1542            }1543        }1544        // insert an empty node as the placeholder for the portal1545        processCommentNode(n1, n2, container, anchor);1546    }1547    function processSuspense(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1548        if (n1 == null) {1549            mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1550        }1551        else {1552            patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized);1553        }1554    }1555    function mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1556        const hiddenContainer = hostCreateElement('div');1557        const suspense = (n2.suspense = createSuspenseBoundary(n2, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, optimized));1558        const { content, fallback } = normalizeSuspenseChildren(n2);1559        suspense.subTree = content;1560        suspense.fallbackTree = fallback;1561        // start mounting the content subtree in an off-dom container1562        patch(null, content, hiddenContainer, null, parentComponent, suspense, isSVG, optimized);1563        // now check if we have encountered any async deps1564        if (suspense.deps > 0) {1565            // mount the fallback tree1566            patch(null, fallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context1567            isSVG, optimized);1568            n2.el = fallback.el;1569        }1570        else {1571            // Suspense has no async deps. Just resolve.1572            resolveSuspense(suspense);1573        }1574    }1575    function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized) {1576        const suspense = (n2.suspense = n1.suspense);1577        suspense.vnode = n2;1578        const { content, fallback } = normalizeSuspenseChildren(n2);1579        const oldSubTree = suspense.subTree;1580        const oldFallbackTree = suspense.fallbackTree;1581        if (!suspense.isResolved) {1582            patch(oldSubTree, content, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);1583            if (suspense.deps > 0) {1584                // still pending. patch the fallback tree.1585                patch(oldFallbackTree, fallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context1586                isSVG, optimized);1587                n2.el = fallback.el;1588            }1589            // If deps somehow becomes 0 after the patch it means the patch caused an1590            // async dep component to unmount and removed its dep. It will cause the1591            // suspense to resolve and we don't need to do anything here.1592        }1593        else {1594            // just normal patch inner content as a fragment1595            patch(oldSubTree, content, container, anchor, parentComponent, suspense, isSVG, optimized);1596            n2.el = content.el;1597        }1598        suspense.subTree = content;1599        suspense.fallbackTree = fallback;1600    }1601    function resolveSuspense(suspense) {1602        {1603            if (suspense.isResolved) {1604                throw new Error(`resolveSuspense() is called on an already resolved suspense boundary.`);1605            }1606            if (suspense.isUnmounted) {1607                throw new Error(`resolveSuspense() is called on an already unmounted suspense boundary.`);1608            }1609        }1610        const { vnode, subTree, fallbackTree, effects, parentComponent, container } = suspense;1611        // this is initial anchor on mount1612        let { anchor } = suspense;1613        // unmount fallback tree1614        if (fallbackTree.el) {1615            // if the fallback tree was mounted, it may have been moved1616            // as part of a parent suspense. get the latest anchor for insertion1617            anchor = getNextHostNode(fallbackTree);1618            unmount(fallbackTree, parentComponent, suspense, true);1619        }1620        // move content from off-dom container to actual container1621        move(subTree, container, anchor);1622        const el = (vnode.el = subTree.el);1623        // suspense as the root node of a component...1624        if (parentComponent && parentComponent.subTree === vnode) {1625            parentComponent.vnode.el = el;1626            updateHOCHostEl(parentComponent, el);1627        }1628        // check if there is a pending parent suspense1629        let parent = suspense.parent;1630        let hasUnresolvedAncestor = false;1631        while (parent) {1632            if (!parent.isResolved) {1633                // found a pending parent suspense, merge buffered post jobs1634                // into that parent1635                parent.effects.push(...effects);1636                hasUnresolvedAncestor = true;1637                break;1638            }1639            parent = parent.parent;1640        }1641        // no pending parent suspense, flush all jobs1642        if (!hasUnresolvedAncestor) {1643            queuePostFlushCb(effects);1644        }1645        suspense.isResolved = true;1646        // invoke @resolve event1647        const onResolve = vnode.props && vnode.props.onResolve;1648        if (isFunction(onResolve)) {1649            onResolve();1650        }1651    }1652    function restartSuspense(suspense) {1653        suspense.isResolved = false;1654        const { vnode, subTree, fallbackTree, parentComponent, container, hiddenContainer, isSVG, optimized } = suspense;1655        // move content tree back to the off-dom container1656        const anchor = getNextHostNode(subTree);1657        move(subTree, hiddenContainer, null);1658        // remount the fallback tree1659        patch(null, fallbackTree, container, anchor, parentComponent, null, // fallback tree will not have suspense context1660        isSVG, optimized);1661        const el = (vnode.el = fallbackTree.el);1662        // suspense as the root node of a component...1663        if (parentComponent && parentComponent.subTree === vnode) {1664            parentComponent.vnode.el = el;1665            updateHOCHostEl(parentComponent, el);1666        }1667        // invoke @suspense event1668        const onSuspense = vnode.props && vnode.props.onSuspense;1669        if (isFunction(onSuspense)) {1670            onSuspense();1671        }1672    }1673    function processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1674        if (n1 == null) {1675            mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG);1676        }1677        else {1678            const instance = (n2.component = n1.component);1679            if (shouldUpdateComponent(n1, n2, optimized)) {1680                if (1681                    instance.asyncDep &&1682                    !instance.asyncResolved) {1683                    // async & still pending - just update props and slots1684                    // since the component's reactive effect for render isn't set-up yet1685                    {1686                        pushWarningContext(n2);1687                    }1688                    updateComponentPreRender(instance, n2);1689                    {1690                        popWarningContext();1691                    }1692                    return;1693                }1694                else {1695                    // normal update1696                    instance.next = n2;1697                    // instance.update is the reactive effect runner.1698                    instance.update();1699                }1700            }1701            else {1702                // no update needed. just copy over properties1703                n2.component = n1.component;1704                n2.el = n1.el;1705            }1706        }1707        if (n2.ref !== null && parentComponent !== null) {1708            setRef(n2.ref, n1 && n1.ref, parentComponent, n2.component.renderProxy);1709        }1710    }1711    function mountComponent(initialVNode, container, anchor, parentComponent, parentSuspense, isSVG) {1712        const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent));1713        {1714            pushWarningContext(initialVNode);1715        }1716        // resolve props and slots for setup context1717        const propsOptions = initialVNode.type.props;1718        resolveProps(instance, initialVNode.props, propsOptions);1719        resolveSlots(instance, initialVNode.children);1720        // setup stateful logic1721        if (initialVNode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {1722            setupStatefulComponent(instance, parentSuspense);1723        }1724        // setup() is async. This component relies on async logic to be resolved1725        // before proceeding1726        if ( instance.asyncDep) {1727            if (!parentSuspense) {1728                // TODO handle this properly1729                throw new Error('Async component without a suspense boundary!');1730            }1731            // parent suspense already resolved, need to re-suspense1732            // use queueJob so it's handled synchronously after patching the current1733            // suspense tree1734            if (parentSuspense.isResolved) {1735                queueJob(() => {1736                    restartSuspense(parentSuspense);1737                });1738            }1739            parentSuspense.deps++;1740            instance.asyncDep1741                .catch(err => {1742                handleError(err, instance, 0 /* SETUP_FUNCTION */);1743            })1744                .then(asyncSetupResult => {1745                // component may be unmounted before resolve1746                if (!instance.isUnmounted && !parentSuspense.isUnmounted) {1747                    retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG);1748                }1749            });1750            // give it a placeholder1751            const placeholder = (instance.subTree = createVNode(Comment));1752            processCommentNode(null, placeholder, container, anchor);1753            initialVNode.el = placeholder.el;1754            return;1755        }1756        setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG);1757        {1758            popWarningContext();1759        }1760    }1761    function retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG) {1762        parentSuspense.deps--;1763        // retry from this component1764        instance.asyncResolved = true;1765        const { vnode } = instance;1766        {1767            pushWarningContext(vnode);1768        }1769        handleSetupResult(instance, asyncSetupResult, parentSuspense);1770        setupRenderEffect(instance, parentSuspense, vnode, 1771        // component may have been moved before resolve1772        hostParentNode(instance.subTree.el), getNextHostNode(instance.subTree), isSVG);1773        updateHOCHostEl(instance, vnode.el);1774        {1775            popWarningContext();1776        }1777        if (parentSuspense.deps === 0) {1778            resolveSuspense(parentSuspense);1779        }1780    }1781    function setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG) {1782        // create reactive effect for rendering1783        let mounted = false;1784        instance.update = effect(function componentEffect() {1785            if (!mounted) {1786                const subTree = (instance.subTree = renderComponentRoot(instance));1787                // beforeMount hook1788                if (instance.bm !== null) {1789                    invokeHooks(instance.bm);1790                }1791                patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);1792                initialVNode.el = subTree.el;1793                // mounted hook1794                if (instance.m !== null) {1795                    queuePostRenderEffect(instance.m, parentSuspense);1796                }1797                mounted = true;1798            }1799            else {1800                // updateComponent1801                // This is triggered by mutation of component's own state (next: null)1802                // OR parent calling processComponent (next: HostVNode)1803                const { next } = instance;1804                {1805                    pushWarningContext(next || instance.vnode);1806                }1807                if (next !== null) {1808                    updateComponentPreRender(instance, next);1809                }1810                const prevTree = instance.subTree;1811                const nextTree = (instance.subTree = renderComponentRoot(instance));1812                // beforeUpdate hook1813                if (instance.bu !== null) {1814                    invokeHooks(instance.bu);1815                }1816                // reset refs1817                // only needed if previous patch had refs1818                if (instance.refs !== EMPTY_OBJ) {1819                    instance.refs = {};1820                }1821                patch(prevTree, nextTree, 1822                // parent may have changed if it's in a portal1823                hostParentNode(prevTree.el), 1824                // anchor may have changed if it's in a fragment1825                getNextHostNode(prevTree), instance, parentSuspense, isSVG);1826                instance.vnode.el = nextTree.el;1827                if (next === null) {1828                    // self-triggered update. In case of HOC, update parent component1829                    // vnode el. HOC is indicated by parent instance's subTree pointing1830                    // to child component's vnode1831                    updateHOCHostEl(instance, nextTree.el);1832                }1833                // updated hook1834                if (instance.u !== null) {1835                    queuePostRenderEffect(instance.u, parentSuspense);1836                }1837                {1838                    popWarningContext();1839                }1840            }1841        },  createDevEffectOptions(instance) );1842    }1843    function updateComponentPreRender(instance, nextVNode) {1844        nextVNode.component = instance;1845        instance.vnode = nextVNode;1846        instance.next = null;1847        resolveProps(instance, nextVNode.props, nextVNode.type.props);1848        resolveSlots(instance, nextVNode.children);1849    }1850    function updateHOCHostEl({ vnode, parent }, el) {1851        while (parent && parent.subTree === vnode) {1852            (vnode = parent.vnode).el = el;
...

createApp.js

Source:createApp.js

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

server-renderer.esm-bundler.js

Source:server-renderer.esm-bundler.js

...667const stack = [];668function pushWarningContext(vnode) {669    stack.push(vnode);670}671function popWarningContext() {672    stack.pop();673}674function warn(msg, ...args) {675    const instance = stack.length ? stack[stack.length - 1].component : null;676    const appWarnHandler = instance && instance.appContext.config.warnHandler;677    const trace = getComponentTrace();678    if (appWarnHandler) {679        callWithErrorHandling(appWarnHandler, instance, 11 /* APP_WARN_HANDLER */, [680            msg + args.join(''),681            instance && instance.proxy,682            trace683                .map(({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`)684                .join('\n'),685            trace686        ]);687    }688    else {689        const warnArgs = [`[Vue warn]: ${msg}`, ...args];690        /* istanbul ignore if */691        if (trace.length &&692            // avoid spamming console during tests693            !false) {694            warnArgs.push(`\n`, ...formatTrace(trace));695        }696        console.warn(...warnArgs);697    }698}699function getComponentTrace() {700    let currentVNode = stack[stack.length - 1];701    if (!currentVNode) {702        return [];703    }704    // we can't just use the stack because it will be incomplete during updates705    // that did not start from the root. Re-construct the parent chain using706    // instance parent pointers.707    const normalizedStack = [];708    while (currentVNode) {709        const last = normalizedStack[0];710        if (last && last.vnode === currentVNode) {711            last.recurseCount++;712        }713        else {714            normalizedStack.push({715                vnode: currentVNode,716                recurseCount: 0717            });718        }719        const parentInstance = currentVNode.component && currentVNode.component.parent;720        currentVNode = parentInstance && parentInstance.vnode;721    }722    return normalizedStack;723}724/* istanbul ignore next */725function formatTrace(trace) {726    const logs = [];727    trace.forEach((entry, i) => {728        logs.push(...(i === 0 ? [] : [`\n`]), ...formatTraceEntry(entry));729    });730    return logs;731}732function formatTraceEntry({ vnode, recurseCount }) {733    const postfix = recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``;734    const isRoot = vnode.component ? vnode.component.parent == null : false;735    const open = ` at <${formatComponentName(vnode.component, vnode.type, isRoot)}`;736    const close = `>` + postfix;737    return vnode.props738        ? [open, ...formatProps(vnode.props), close]739        : [open + close];740}741/* istanbul ignore next */742function formatProps(props) {743    const res = [];744    const keys = Object.keys(props);745    keys.slice(0, 3).forEach(key => {746        res.push(...formatProp(key, props[key]));747    });748    if (keys.length > 3) {749        res.push(` ...`);750    }751    return res;752}753/* istanbul ignore next */754function formatProp(key, value, raw) {755    if (isString(value)) {756        value = JSON.stringify(value);757        return raw ? value : [`${key}=${value}`];758    }759    else if (typeof value === 'number' ||760        typeof value === 'boolean' ||761        value == null) {762        return raw ? value : [`${key}=${value}`];763    }764    else if (isRef(value)) {765        value = formatProp(key, toRaw(value.value), true);766        return raw ? value : [`${key}=Ref<`, value, `>`];767    }768    else if (isFunction(value)) {769        return [`${key}=fn${value.name ? `<${value.name}>` : ``}`];770    }771    else {772        value = toRaw(value);773        return raw ? value : [`${key}=`, value];774    }775}776const ErrorTypeStrings = {777    ["sp" /* SERVER_PREFETCH */]: 'serverPrefetch hook',778    ["bc" /* BEFORE_CREATE */]: 'beforeCreate hook',779    ["c" /* CREATED */]: 'created hook',780    ["bm" /* BEFORE_MOUNT */]: 'beforeMount hook',781    ["m" /* MOUNTED */]: 'mounted hook',782    ["bu" /* BEFORE_UPDATE */]: 'beforeUpdate hook',783    ["u" /* UPDATED */]: 'updated',784    ["bum" /* BEFORE_UNMOUNT */]: 'beforeUnmount hook',785    ["um" /* UNMOUNTED */]: 'unmounted hook',786    ["a" /* ACTIVATED */]: 'activated hook',787    ["da" /* DEACTIVATED */]: 'deactivated hook',788    ["ec" /* ERROR_CAPTURED */]: 'errorCaptured hook',789    ["rtc" /* RENDER_TRACKED */]: 'renderTracked hook',790    ["rtg" /* RENDER_TRIGGERED */]: 'renderTriggered hook',791    [0 /* SETUP_FUNCTION */]: 'setup function',792    [1 /* RENDER_FUNCTION */]: 'render function',793    [2 /* WATCH_GETTER */]: 'watcher getter',794    [3 /* WATCH_CALLBACK */]: 'watcher callback',795    [4 /* WATCH_CLEANUP */]: 'watcher cleanup function',796    [5 /* NATIVE_EVENT_HANDLER */]: 'native event handler',797    [6 /* COMPONENT_EVENT_HANDLER */]: 'component event handler',798    [7 /* VNODE_HOOK */]: 'vnode hook',799    [8 /* DIRECTIVE_HOOK */]: 'directive hook',800    [9 /* TRANSITION_HOOK */]: 'transition hook',801    [10 /* APP_ERROR_HANDLER */]: 'app errorHandler',802    [11 /* APP_WARN_HANDLER */]: 'app warnHandler',803    [12 /* FUNCTION_REF */]: 'ref function',804    [13 /* ASYNC_COMPONENT_LOADER */]: 'async component loader',805    [14 /* SCHEDULER */]: 'scheduler flush. This is likely a Vue internals bug. ' +806        'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next'807};808function callWithErrorHandling(fn, instance, type, args) {809    let res;810    try {811        res = args ? fn(...args) : fn();812    }813    catch (err) {814        handleError(err, instance, type);815    }816    return res;817}818function handleError(err, instance, type, throwInDev = true) {819    const contextVNode = instance ? instance.vnode : null;820    if (instance) {821        let cur = instance.parent;822        // the exposed instance is the render proxy to keep it consistent with 2.x823        const exposedInstance = instance.proxy;824        // in production the hook receives only the error code825        const errorInfo = (process.env.NODE_ENV !== 'production') ? ErrorTypeStrings[type] : type;826        while (cur) {827            const errorCapturedHooks = cur.ec;828            if (errorCapturedHooks) {829                for (let i = 0; i < errorCapturedHooks.length; i++) {830                    if (errorCapturedHooks[i](err, exposedInstance, errorInfo) === false) {831                        return;832                    }833                }834            }835            cur = cur.parent;836        }837        // app-level handling838        const appErrorHandler = instance.appContext.config.errorHandler;839        if (appErrorHandler) {840            callWithErrorHandling(appErrorHandler, null, 10 /* APP_ERROR_HANDLER */, [err, exposedInstance, errorInfo]);841            return;842        }843    }844    logError(err, type, contextVNode, throwInDev);845}846function logError(err, type, contextVNode, throwInDev = true) {847    if ((process.env.NODE_ENV !== 'production')) {848        const info = ErrorTypeStrings[type];849        if (contextVNode) {850            pushWarningContext(contextVNode);851        }852        warn(`Unhandled error${info ? ` during execution of ${info}` : ``}`);853        if (contextVNode) {854            popWarningContext();855        }856        // crash in dev by default so it's more noticeable857        if (throwInDev) {858            throw err;859        }860        else {861            console.error(err);862        }863    }864    else {865        // recover in prod to reduce the impact on end-user866        console.error(err);867    }868}...

server-renderer.cjs.js

Source:server-renderer.cjs.js

...520const stack = [];521function pushWarningContext(vnode) {522    stack.push(vnode);523}524function popWarningContext() {525    stack.pop();526}527function warn(msg, ...args) {528    const instance = stack.length ? stack[stack.length - 1].component : null;529    const appWarnHandler = instance && instance.appContext.config.warnHandler;530    const trace = getComponentTrace();531    if (appWarnHandler) {532        callWithErrorHandling(appWarnHandler, instance, 11 /* APP_WARN_HANDLER */, [533            msg + args.join(''),534            instance && instance.proxy,535            trace536                .map(({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`)537                .join('\n'),538            trace539        ]);540    }541    else {542        const warnArgs = [`[Vue warn]: ${msg}`, ...args];543        /* istanbul ignore if */544        if (trace.length &&545            // avoid spamming console during tests546            !false) {547            warnArgs.push(`\n`, ...formatTrace(trace));548        }549        console.warn(...warnArgs);550    }551}552function getComponentTrace() {553    let currentVNode = stack[stack.length - 1];554    if (!currentVNode) {555        return [];556    }557    // we can't just use the stack because it will be incomplete during updates558    // that did not start from the root. Re-construct the parent chain using559    // instance parent pointers.560    const normalizedStack = [];561    while (currentVNode) {562        const last = normalizedStack[0];563        if (last && last.vnode === currentVNode) {564            last.recurseCount++;565        }566        else {567            normalizedStack.push({568                vnode: currentVNode,569                recurseCount: 0570            });571        }572        const parentInstance = currentVNode.component && currentVNode.component.parent;573        currentVNode = parentInstance && parentInstance.vnode;574    }575    return normalizedStack;576}577/* istanbul ignore next */578function formatTrace(trace) {579    const logs = [];580    trace.forEach((entry, i) => {581        logs.push(...(i === 0 ? [] : [`\n`]), ...formatTraceEntry(entry));582    });583    return logs;584}585function formatTraceEntry({ vnode, recurseCount }) {586    const postfix = recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``;587    const isRoot = vnode.component ? vnode.component.parent == null : false;588    const open = ` at <${formatComponentName(vnode.component, vnode.type, isRoot)}`;589    const close = `>` + postfix;590    return vnode.props591        ? [open, ...formatProps(vnode.props), close]592        : [open + close];593}594/* istanbul ignore next */595function formatProps(props) {596    const res = [];597    const keys = Object.keys(props);598    keys.slice(0, 3).forEach(key => {599        res.push(...formatProp(key, props[key]));600    });601    if (keys.length > 3) {602        res.push(` ...`);603    }604    return res;605}606/* istanbul ignore next */607function formatProp(key, value, raw) {608    if (shared.isString(value)) {609        value = JSON.stringify(value);610        return raw ? value : [`${key}=${value}`];611    }612    else if (typeof value === 'number' ||613        typeof value === 'boolean' ||614        value == null) {615        return raw ? value : [`${key}=${value}`];616    }617    else if (isRef(value)) {618        value = formatProp(key, toRaw(value.value), true);619        return raw ? value : [`${key}=Ref<`, value, `>`];620    }621    else if (shared.isFunction(value)) {622        return [`${key}=fn${value.name ? `<${value.name}>` : ``}`];623    }624    else {625        value = toRaw(value);626        return raw ? value : [`${key}=`, value];627    }628}629const ErrorTypeStrings = {630    ["bc" /* BEFORE_CREATE */]: 'beforeCreate hook',631    ["c" /* CREATED */]: 'created hook',632    ["bm" /* BEFORE_MOUNT */]: 'beforeMount hook',633    ["m" /* MOUNTED */]: 'mounted hook',634    ["bu" /* BEFORE_UPDATE */]: 'beforeUpdate hook',635    ["u" /* UPDATED */]: 'updated',636    ["bum" /* BEFORE_UNMOUNT */]: 'beforeUnmount hook',637    ["um" /* UNMOUNTED */]: 'unmounted hook',638    ["a" /* ACTIVATED */]: 'activated hook',639    ["da" /* DEACTIVATED */]: 'deactivated hook',640    ["ec" /* ERROR_CAPTURED */]: 'errorCaptured hook',641    ["rtc" /* RENDER_TRACKED */]: 'renderTracked hook',642    ["rtg" /* RENDER_TRIGGERED */]: 'renderTriggered hook',643    [0 /* SETUP_FUNCTION */]: 'setup function',644    [1 /* RENDER_FUNCTION */]: 'render function',645    [2 /* WATCH_GETTER */]: 'watcher getter',646    [3 /* WATCH_CALLBACK */]: 'watcher callback',647    [4 /* WATCH_CLEANUP */]: 'watcher cleanup function',648    [5 /* NATIVE_EVENT_HANDLER */]: 'native event handler',649    [6 /* COMPONENT_EVENT_HANDLER */]: 'component event handler',650    [7 /* VNODE_HOOK */]: 'vnode hook',651    [8 /* DIRECTIVE_HOOK */]: 'directive hook',652    [9 /* TRANSITION_HOOK */]: 'transition hook',653    [10 /* APP_ERROR_HANDLER */]: 'app errorHandler',654    [11 /* APP_WARN_HANDLER */]: 'app warnHandler',655    [12 /* FUNCTION_REF */]: 'ref function',656    [13 /* ASYNC_COMPONENT_LOADER */]: 'async component loader',657    [14 /* SCHEDULER */]: 'scheduler flush. This is likely a Vue internals bug. ' +658        'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next'659};660function callWithErrorHandling(fn, instance, type, args) {661    let res;662    try {663        res = args ? fn(...args) : fn();664    }665    catch (err) {666        handleError(err, instance, type);667    }668    return res;669}670function handleError(err, instance, type, throwInDev = true) {671    const contextVNode = instance ? instance.vnode : null;672    if (instance) {673        let cur = instance.parent;674        // the exposed instance is the render proxy to keep it consistent with 2.x675        const exposedInstance = instance.proxy;676        // in production the hook receives only the error code677        const errorInfo =  ErrorTypeStrings[type] ;678        while (cur) {679            const errorCapturedHooks = cur.ec;680            if (errorCapturedHooks) {681                for (let i = 0; i < errorCapturedHooks.length; i++) {682                    if (errorCapturedHooks[i](err, exposedInstance, errorInfo) === false) {683                        return;684                    }685                }686            }687            cur = cur.parent;688        }689        // app-level handling690        const appErrorHandler = instance.appContext.config.errorHandler;691        if (appErrorHandler) {692            callWithErrorHandling(appErrorHandler, null, 10 /* APP_ERROR_HANDLER */, [err, exposedInstance, errorInfo]);693            return;694        }695    }696    logError(err, type, contextVNode, throwInDev);697}698function logError(err, type, contextVNode, throwInDev = true) {699    {700        const info = ErrorTypeStrings[type];701        if (contextVNode) {702            pushWarningContext(contextVNode);703        }704        warn(`Unhandled error${info ? ` during execution of ${info}` : ``}`);705        if (contextVNode) {706            popWarningContext();707        }708        // crash in dev by default so it's more noticeable709        if (throwInDev) {710            throw err;711        }712        else {713            console.error(err);714        }715    }716}717const classifyRE = /(?:^|[-_])(\w)/g;718const classify = (str) => str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '');719function getComponentName(Component) {720    return shared.isFunction(Component)...

shouldComponentUpdate.js

Source:shouldComponentUpdate.js

...20                pushWarningContext(n2);21            }22            updateComponentPreRender(instance, n2, optimized);23            {24                popWarningContext();25            }26            return;27        }28        else {29            // normal update30            instance.next = n2;31            // in case the child component is also queued, remove it to avoid32            // double updating the same child component in the same flush.33            invalidateJob(instance.update);34            // instance.update is the reactive effect runner.35            instance.update();36        }37    }38    else {...

2.js

Source:2.js

...150            {151                devtoolsComponentUpdated(instance);152            }153            {154                popWarningContext();155            }156        }...

08-mountComponent.js

Source:08-mountComponent.js

...25    isSVG,26    optimized27  )28  if (__DEV__) {29    popWarningContext()30    endMeasure(instance, `mount`)31  }32}33==================34  //æè½½ç»ä»¶35  function mountComponent(vnode, container) {36    // åå»ºç»ä»¶å®ä¾ï¼å¶å®å°±æ¯ä¸ªå¯¹è±¡ï¼åå«ç»ä»¶çåç§å±æ§37    const instance = vnode.component = {38      vnode,39      type:vnode.tyope,40      props:vnode.props,41      setupState:{}, //ååºå¼ç¶æ42      slots:{},43      ctx:{},...

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.popWarningContext();7  await browser.close();8})();9    at CDPSession.send (C:\Users\pavank\Documents\playwright\playwright\lib\cdp.js:69:15)10    at CDPSession.send (C:\Users\pavank\Documents\playwright\playwright\lib\cdp.js:66:29)11    at CDPSession.send (C:\Users\pavank\Documents\playwright\playwright\lib\cdp.js:66:29)12    at CDPSession.send (C:\Users\pavank\Documents\playwright\playwright\lib\cdp.js:66:29)13    at CDPSession.send (C:\Users\pavank\Documents\playwright\playwright\lib\cdp.js:66:29)14    at CDPSession.send (C:\Users\pavank\Documents\playwright\playwright\lib\cdp.js:66:29)15    at CDPSession.send (C:\Users\pavank\Documents\playwright\playwright\lib\cdp.js:66:29)16    at CDPSession.send (C:\Users\pavank\Documents\playwright\playwright\lib\cdp.js:66:29)17    at CDPSession.send (C:\Users\pavank\Documents\playwright\playwright\lib\cdp.js:66:29)18    at CDPSession.send (C:\Users\pavank\Documents\playwright\playwright\lib\cdp.js:66:29)

Using AI Code Generation

1const { popWarningContext } = require('playwright/lib/utils/stackTrace');2popWarningContext();3const { popWarningContext } = require('playwright/lib/utils/stackTrace');4popWarningContext();5const { popWarningContext } = require('playwright/lib/utils/stackTrace');6popWarningContext();7const { popWarningContext } = require('playwright/lib/utils/stackTrace');8popWarningContext();9const { popWarningContext } = require('playwright/lib/utils/stackTrace');10popWarningContext();11const { popWarningContext } = require('playwright/lib/utils/stackTrace');12popWarningContext();13const { popWarningContext } = require('playwright/lib/utils/stackTrace');14popWarningContext();15const { popWarningContext } = require('playwright/lib/utils/stackTrace');16popWarningContext();17const { popWarningContext } = require('playwright/lib/utils/stackTrace');18popWarningContext();19const { popWarningContext } = require('playwright/lib/utils/stackTrace');20popWarningContext();21const { popWarningContext } = require('playwright/lib/utils/stackTrace');22popWarningContext();23const { popWarningContext } = require('playwright/lib/utils/stackTrace');24popWarningContext();25const { popWarningContext } = require('playwright/lib/utils/stackTrace');26popWarningContext();27const { popWarningContext } = require('playwright/lib/utils/stackTrace');28popWarningContext();29const { popWarningContext } =

Using AI Code Generation

1const { popWarningContext } = require('playwright/lib/server/chromium/crBrowser');2const { popWarningContext } = require('playwright/lib/server/chromium/crBrowser');3const { chromium } = require('playwright');4(async () => {5  const browser = await chromium.launch();6  const context = await browser.newContext();7  const page = await context.newPage();8  await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12  const browser = await chromium.launch({13  });14  const context = await browser.newContext();15  const page = await context.newPage();16  await browser.close();17})();

Using AI Code Generation

1const { popWarningContext } = require('playwright/lib/utils/stackTrace');2popWarningContext();3const { popWarningContext } = require('playwright/lib/utils/stackTrace');4popWarningContext();5const { popWarningContext } = require('playwright/lib/utils/stackTrace');6popWarningContext();7const { popWarningContext } = require('playwright/lib/utils/stackTrace');8popWarningContext();9const { popWarningContext } = require('playwright/lib/utils/stackTrace');10popWarningContext();11const { popWarningContext } = require('playwright/lib/utils/stackTrace');12popWarningContext();13const { popWarningContext } = require('playwright/lib/utils/stackTrace');14popWarningContext();15const { popWarningContext } = require('playwright/lib/utils/stackTrace');16popWarningContext();17const { popWarningContext } = require('playwright/lib/utils/stackTrace');18popWarningContext();19const { popWarningContext } = require('playwright/lib/utils/stackTrace');20popWarningContext();21const { popWarningContext } = require('playwright/lib/utils/stackTrace');22popWarningContext();23const { popWarningContext } = require('playwright/lib/utils/stackTrace');24popWarningContext();

Using AI Code Generation

1const { popWarningContext } = require("playwright/lib/utils/utils");2const { test } = require("@playwright/test");3test("test", async ({ page }) => {4  popWarningContext("page.goto");5});6const { popWarningContext } = require("playwright/lib/utils/utils");7const { test } = require("@playwright/test");8test("test", async ({ page }) => {9  popWarningContext("page.goto");10});11const { popWarningContext } = require("playwright/lib/utils/utils");12const { test } = require("@playwright/test");13test("test", async ({ page }) => {14  popWarningContext("page.goto");15});16const { popWarningContext } = require("playwright/lib/utils/utils");17const { test } = require("@playwright/test");18test("test", async ({ page }) => {19  popWarningContext("page.goto");20});21const { popWarningContext } = require("playwright/lib/utils/utils");22const { test } = require("@playwright/test");23test("test", async ({ page }) => {24  popWarningContext("page.goto");25});26const { popWarningContext } = require("playwright/lib/utils/utils");27const { test } = require("@playwright/test");28test("test", async ({ page }) => {29  popWarningContext("page.goto");30});31const { popWarningContext } = require("playwright

Using AI Code Generation

1const { popWarningContext } = require(‘./utils’);2const { page } = require(‘./playwright’);3const { test } = require(‘@playwright/test’);4test(‘test’, async ({}) => {5  await page.waitForSelector(‘text=Get started’);6  await page.click(‘text=Get started’);7  await page.waitForSelector(‘text=Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API’);8  await page.click(‘text=Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API’);9  await page.waitForSelector(‘text=Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.’);10  await page.click(‘text=Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.’);11  await page.waitForSelector(‘text=Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.’);12  await page.click(‘text=Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.’);13  await page.waitForSelector(‘text=Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.’);14  await page.click(‘text=Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.’);15  await page.waitForSelector(‘text=Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.’);16  await page.click(‘text=Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.’);17  await page.waitForSelector(‘text=Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.’);18  await page.click(‘text=Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.’);19  await page.waitForSelector(‘text=Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.’);20  await page.click(‘text=Playwright is built to

Using AI Code Generation

1const { popWarningContext } = require('playwright-core/lib/server/trace/recorder');2const { chromium } = require('playwright-core');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  await context.addInitScript(() => {7    console.warn('This is a warning');8  });9  const page = await context.newPage();10  const warning = popWarningContext();11  console.log(warning);12  await browser.close();13})();14const { popWarningContext } = require('playwright-core/lib/server/trace/recorder');15const { chromium } = require('playwright-core');16(async () => {17  const browser = await chromium.launch();18  const context = await browser.newContext();19  await context.addInitScript(() => {20    console.warn('This is a warning');21  });22  const page = await context.newPage();23  const warning = popWarningContext();24  if (warning) {25    console.log('There is a warning message');26  } else {27    console.log('There is no warning message');28  }29  await browser.close();30})();

Playwright tutorial

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

Chapters:

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

Run Playwright Internal automation tests on LambdaTest cloud grid

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

View sample repo

View Documentation Sign up Free

›

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

How to use popWarningContext method in Playwright Internal

Playwright tutorial

Chapters:

Run Playwright Internal automation tests on LambdaTest cloud grid

Try LambdaTest Now !!

Was this article helpful?