Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
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.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
