@vue/runtime-core 3.4.0-alpha.4 → 3.4.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -322,13 +322,16 @@ function queuePostFlushCb(cb) {
322
322
  }
323
323
  queueFlush();
324
324
  }
325
- function flushPreFlushCbs(seen, i = isFlushing ? flushIndex + 1 : 0) {
325
+ function flushPreFlushCbs(instance, seen, i = isFlushing ? flushIndex + 1 : 0) {
326
326
  {
327
327
  seen = seen || /* @__PURE__ */ new Map();
328
328
  }
329
329
  for (; i < queue.length; i++) {
330
330
  const cb = queue[i];
331
331
  if (cb && cb.pre) {
332
+ if (instance && cb.id !== instance.uid) {
333
+ continue;
334
+ }
332
335
  if (checkRecursiveUpdates(seen, cb)) {
333
336
  continue;
334
337
  }
@@ -1088,9 +1091,17 @@ function hasPropsChanged(prevProps, nextProps, emitsOptions) {
1088
1091
  return false;
1089
1092
  }
1090
1093
  function updateHOCHostEl({ vnode, parent }, el) {
1091
- while (parent && parent.subTree === vnode) {
1092
- (vnode = parent.vnode).el = el;
1093
- parent = parent.parent;
1094
+ while (parent) {
1095
+ const root = parent.subTree;
1096
+ if (root.suspense && root.suspense.activeBranch === vnode) {
1097
+ root.el = vnode.el;
1098
+ }
1099
+ if (root === vnode) {
1100
+ (vnode = parent.vnode).el = el;
1101
+ parent = parent.parent;
1102
+ } else {
1103
+ break;
1104
+ }
1094
1105
  }
1095
1106
  }
1096
1107
 
@@ -1150,6 +1161,7 @@ function resolve(registry, name) {
1150
1161
  }
1151
1162
 
1152
1163
  const isSuspense = (type) => type.__isSuspense;
1164
+ let suspenseId = 0;
1153
1165
  const SuspenseImpl = {
1154
1166
  name: "Suspense",
1155
1167
  // In order to make Suspense tree-shakable, we need to avoid importing it
@@ -1157,7 +1169,7 @@ const SuspenseImpl = {
1157
1169
  // on a vnode's type and calls the `process` method, passing in renderer
1158
1170
  // internals.
1159
1171
  __isSuspense: true,
1160
- process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals) {
1172
+ process(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals) {
1161
1173
  if (n1 == null) {
1162
1174
  mountSuspense(
1163
1175
  n2,
@@ -1165,7 +1177,7 @@ const SuspenseImpl = {
1165
1177
  anchor,
1166
1178
  parentComponent,
1167
1179
  parentSuspense,
1168
- isSVG,
1180
+ namespace,
1169
1181
  slotScopeIds,
1170
1182
  optimized,
1171
1183
  rendererInternals
@@ -1177,7 +1189,7 @@ const SuspenseImpl = {
1177
1189
  container,
1178
1190
  anchor,
1179
1191
  parentComponent,
1180
- isSVG,
1192
+ namespace,
1181
1193
  slotScopeIds,
1182
1194
  optimized,
1183
1195
  rendererInternals
@@ -1195,7 +1207,7 @@ function triggerEvent(vnode, name) {
1195
1207
  eventListener();
1196
1208
  }
1197
1209
  }
1198
- function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals) {
1210
+ function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals) {
1199
1211
  const {
1200
1212
  p: patch,
1201
1213
  o: { createElement }
@@ -1208,7 +1220,7 @@ function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense
1208
1220
  container,
1209
1221
  hiddenContainer,
1210
1222
  anchor,
1211
- isSVG,
1223
+ namespace,
1212
1224
  slotScopeIds,
1213
1225
  optimized,
1214
1226
  rendererInternals
@@ -1220,7 +1232,7 @@ function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense
1220
1232
  null,
1221
1233
  parentComponent,
1222
1234
  suspense,
1223
- isSVG,
1235
+ namespace,
1224
1236
  slotScopeIds
1225
1237
  );
1226
1238
  if (suspense.deps > 0) {
@@ -1234,7 +1246,7 @@ function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense
1234
1246
  parentComponent,
1235
1247
  null,
1236
1248
  // fallback tree will not have suspense context
1237
- isSVG,
1249
+ namespace,
1238
1250
  slotScopeIds
1239
1251
  );
1240
1252
  setActiveBranch(suspense, vnode.ssFallback);
@@ -1242,7 +1254,7 @@ function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense
1242
1254
  suspense.resolve(false, true);
1243
1255
  }
1244
1256
  }
1245
- function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotScopeIds, optimized, { p: patch, um: unmount, o: { createElement } }) {
1257
+ function patchSuspense(n1, n2, container, anchor, parentComponent, namespace, slotScopeIds, optimized, { p: patch, um: unmount, o: { createElement } }) {
1246
1258
  const suspense = n2.suspense = n1.suspense;
1247
1259
  suspense.vnode = n2;
1248
1260
  n2.el = n1.el;
@@ -1259,29 +1271,31 @@ function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotSc
1259
1271
  null,
1260
1272
  parentComponent,
1261
1273
  suspense,
1262
- isSVG,
1274
+ namespace,
1263
1275
  slotScopeIds,
1264
1276
  optimized
1265
1277
  );
1266
1278
  if (suspense.deps <= 0) {
1267
1279
  suspense.resolve();
1268
1280
  } else if (isInFallback) {
1269
- patch(
1270
- activeBranch,
1271
- newFallback,
1272
- container,
1273
- anchor,
1274
- parentComponent,
1275
- null,
1276
- // fallback tree will not have suspense context
1277
- isSVG,
1278
- slotScopeIds,
1279
- optimized
1280
- );
1281
- setActiveBranch(suspense, newFallback);
1281
+ if (!isHydrating) {
1282
+ patch(
1283
+ activeBranch,
1284
+ newFallback,
1285
+ container,
1286
+ anchor,
1287
+ parentComponent,
1288
+ null,
1289
+ // fallback tree will not have suspense context
1290
+ namespace,
1291
+ slotScopeIds,
1292
+ optimized
1293
+ );
1294
+ setActiveBranch(suspense, newFallback);
1295
+ }
1282
1296
  }
1283
1297
  } else {
1284
- suspense.pendingId++;
1298
+ suspense.pendingId = suspenseId++;
1285
1299
  if (isHydrating) {
1286
1300
  suspense.isHydrating = false;
1287
1301
  suspense.activeBranch = pendingBranch;
@@ -1299,7 +1313,7 @@ function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotSc
1299
1313
  null,
1300
1314
  parentComponent,
1301
1315
  suspense,
1302
- isSVG,
1316
+ namespace,
1303
1317
  slotScopeIds,
1304
1318
  optimized
1305
1319
  );
@@ -1314,7 +1328,7 @@ function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotSc
1314
1328
  parentComponent,
1315
1329
  null,
1316
1330
  // fallback tree will not have suspense context
1317
- isSVG,
1331
+ namespace,
1318
1332
  slotScopeIds,
1319
1333
  optimized
1320
1334
  );
@@ -1328,7 +1342,7 @@ function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotSc
1328
1342
  anchor,
1329
1343
  parentComponent,
1330
1344
  suspense,
1331
- isSVG,
1345
+ namespace,
1332
1346
  slotScopeIds,
1333
1347
  optimized
1334
1348
  );
@@ -1341,7 +1355,7 @@ function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotSc
1341
1355
  null,
1342
1356
  parentComponent,
1343
1357
  suspense,
1344
- isSVG,
1358
+ namespace,
1345
1359
  slotScopeIds,
1346
1360
  optimized
1347
1361
  );
@@ -1359,7 +1373,7 @@ function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotSc
1359
1373
  anchor,
1360
1374
  parentComponent,
1361
1375
  suspense,
1362
- isSVG,
1376
+ namespace,
1363
1377
  slotScopeIds,
1364
1378
  optimized
1365
1379
  );
@@ -1367,7 +1381,11 @@ function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotSc
1367
1381
  } else {
1368
1382
  triggerEvent(n2, "onPending");
1369
1383
  suspense.pendingBranch = newBranch;
1370
- suspense.pendingId++;
1384
+ if (newBranch.shapeFlag & 512) {
1385
+ suspense.pendingId = newBranch.component.suspenseId;
1386
+ } else {
1387
+ suspense.pendingId = suspenseId++;
1388
+ }
1371
1389
  patch(
1372
1390
  null,
1373
1391
  newBranch,
@@ -1375,7 +1393,7 @@ function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotSc
1375
1393
  null,
1376
1394
  parentComponent,
1377
1395
  suspense,
1378
- isSVG,
1396
+ namespace,
1379
1397
  slotScopeIds,
1380
1398
  optimized
1381
1399
  );
@@ -1397,7 +1415,7 @@ function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotSc
1397
1415
  }
1398
1416
  }
1399
1417
  let hasWarned = false;
1400
- function createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, slotScopeIds, optimized, rendererInternals, isHydrating = false) {
1418
+ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, namespace, slotScopeIds, optimized, rendererInternals, isHydrating = false) {
1401
1419
  if (!hasWarned) {
1402
1420
  hasWarned = true;
1403
1421
  console[console.info ? "info" : "log"](
@@ -1427,7 +1445,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
1427
1445
  vnode,
1428
1446
  parent: parentSuspense,
1429
1447
  parentComponent,
1430
- isSVG,
1448
+ namespace,
1431
1449
  container,
1432
1450
  hiddenContainer,
1433
1451
  anchor,
@@ -1436,7 +1454,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
1436
1454
  timeout: typeof timeout === "number" ? timeout : -1,
1437
1455
  activeBranch: null,
1438
1456
  pendingBranch: null,
1439
- isInFallback: true,
1457
+ isInFallback: !isHydrating,
1440
1458
  isHydrating,
1441
1459
  isUnmounted: false,
1442
1460
  effects: [],
@@ -1520,8 +1538,9 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
1520
1538
  if (!suspense.pendingBranch) {
1521
1539
  return;
1522
1540
  }
1523
- const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, isSVG: isSVG2 } = suspense;
1541
+ const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, namespace: namespace2 } = suspense;
1524
1542
  triggerEvent(vnode2, "onFallback");
1543
+ const anchor2 = next(activeBranch);
1525
1544
  const mountFallback = () => {
1526
1545
  if (!suspense.isInFallback) {
1527
1546
  return;
@@ -1530,11 +1549,11 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
1530
1549
  null,
1531
1550
  fallbackVNode,
1532
1551
  container2,
1533
- next(activeBranch),
1552
+ anchor2,
1534
1553
  parentComponent2,
1535
1554
  null,
1536
1555
  // fallback tree will not have suspense context
1537
- isSVG2,
1556
+ namespace2,
1538
1557
  slotScopeIds,
1539
1558
  optimized
1540
1559
  );
@@ -1597,7 +1616,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
1597
1616
  // consider the comment placeholder case.
1598
1617
  hydratedEl ? null : next(instance.subTree),
1599
1618
  suspense,
1600
- isSVG,
1619
+ namespace,
1601
1620
  optimized
1602
1621
  );
1603
1622
  if (placeholder) {
@@ -1634,7 +1653,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
1634
1653
  };
1635
1654
  return suspense;
1636
1655
  }
1637
- function hydrateSuspense(node, vnode, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals, hydrateNode) {
1656
+ function hydrateSuspense(node, vnode, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals, hydrateNode) {
1638
1657
  const suspense = vnode.suspense = createSuspenseBoundary(
1639
1658
  vnode,
1640
1659
  parentSuspense,
@@ -1642,7 +1661,7 @@ function hydrateSuspense(node, vnode, parentComponent, parentSuspense, isSVG, sl
1642
1661
  node.parentNode,
1643
1662
  document.createElement("div"),
1644
1663
  null,
1645
- isSVG,
1664
+ namespace,
1646
1665
  slotScopeIds,
1647
1666
  optimized,
1648
1667
  rendererInternals,
@@ -2557,7 +2576,7 @@ const KeepAliveImpl = {
2557
2576
  }
2558
2577
  } = sharedContext;
2559
2578
  const storageContainer = createElement("div");
2560
- sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
2579
+ sharedContext.activate = (vnode, container, anchor, namespace, optimized) => {
2561
2580
  const instance2 = vnode.component;
2562
2581
  move(vnode, container, anchor, 0, parentSuspense);
2563
2582
  patch(
@@ -2567,7 +2586,7 @@ const KeepAliveImpl = {
2567
2586
  anchor,
2568
2587
  instance2,
2569
2588
  parentSuspense,
2570
- isSVG,
2589
+ namespace,
2571
2590
  vnode.slotScopeIds,
2572
2591
  optimized
2573
2592
  );
@@ -3233,7 +3252,7 @@ function useSlots() {
3233
3252
  function useAttrs() {
3234
3253
  return getContext().attrs;
3235
3254
  }
3236
- function useModel(props, name, options) {
3255
+ function useModel(props, name) {
3237
3256
  const i = getCurrentInstance();
3238
3257
  if (!i) {
3239
3258
  warn(`useModel() called without active instance.`);
@@ -3243,29 +3262,24 @@ function useModel(props, name, options) {
3243
3262
  warn(`useModel() called with prop "${name}" which is not declared.`);
3244
3263
  return reactivity.ref();
3245
3264
  }
3246
- if (options && options.local) {
3247
- const proxy = reactivity.ref(props[name]);
3248
- watch(
3249
- () => props[name],
3250
- (v) => proxy.value = v
3251
- );
3252
- watch(proxy, (value) => {
3253
- if (value !== props[name]) {
3254
- i.emit(`update:${name}`, value);
3255
- }
3256
- });
3257
- return proxy;
3258
- } else {
3259
- return {
3260
- __v_isRef: true,
3261
- get value() {
3262
- return props[name];
3263
- },
3264
- set value(value) {
3265
- i.emit(`update:${name}`, value);
3265
+ let localValue;
3266
+ watchSyncEffect(() => {
3267
+ localValue = props[name];
3268
+ });
3269
+ return reactivity.customRef((track, trigger) => ({
3270
+ get() {
3271
+ track();
3272
+ return localValue;
3273
+ },
3274
+ set(value) {
3275
+ const rawProps = i.vnode.props;
3276
+ if (!(rawProps && name in rawProps) && shared.hasChanged(value, localValue)) {
3277
+ localValue = value;
3278
+ trigger();
3266
3279
  }
3267
- };
3268
- }
3280
+ i.emit(`update:${name}`, value);
3281
+ }
3282
+ }));
3269
3283
  }
3270
3284
  function getContext() {
3271
3285
  const i = getCurrentInstance();
@@ -3859,7 +3873,7 @@ function createAppAPI(render, hydrate) {
3859
3873
  context.directives[name] = directive;
3860
3874
  return app;
3861
3875
  },
3862
- mount(rootContainer, isHydrate, isSVG) {
3876
+ mount(rootContainer, isHydrate, namespace) {
3863
3877
  if (!isMounted) {
3864
3878
  if (rootContainer.__vue_app__) {
3865
3879
  warn(
@@ -3869,15 +3883,24 @@ function createAppAPI(render, hydrate) {
3869
3883
  }
3870
3884
  const vnode = createVNode(rootComponent, rootProps);
3871
3885
  vnode.appContext = context;
3886
+ if (namespace === true) {
3887
+ namespace = "svg";
3888
+ } else if (namespace === false) {
3889
+ namespace = void 0;
3890
+ }
3872
3891
  {
3873
3892
  context.reload = () => {
3874
- render(cloneVNode(vnode), rootContainer, isSVG);
3893
+ render(
3894
+ cloneVNode(vnode),
3895
+ rootContainer,
3896
+ namespace
3897
+ );
3875
3898
  };
3876
3899
  }
3877
3900
  if (isHydrate && hydrate) {
3878
3901
  hydrate(vnode, rootContainer);
3879
3902
  } else {
3880
- render(vnode, rootContainer, isSVG);
3903
+ render(vnode, rootContainer, namespace);
3881
3904
  }
3882
3905
  isMounted = true;
3883
3906
  app._container = rootContainer;
@@ -4267,11 +4290,12 @@ function validateProps(rawProps, props, instance) {
4267
4290
  key,
4268
4291
  resolvedValues[key],
4269
4292
  opt,
4293
+ reactivity.shallowReadonly(resolvedValues) ,
4270
4294
  !shared.hasOwn(rawProps, key) && !shared.hasOwn(rawProps, shared.hyphenate(key))
4271
4295
  );
4272
4296
  }
4273
4297
  }
4274
- function validateProp(name, value, prop, isAbsent) {
4298
+ function validateProp(name, value, prop, props, isAbsent) {
4275
4299
  const { type, required, validator, skipCheck } = prop;
4276
4300
  if (required && isAbsent) {
4277
4301
  warn('Missing required prop: "' + name + '"');
@@ -4294,7 +4318,7 @@ function validateProp(name, value, prop, isAbsent) {
4294
4318
  return;
4295
4319
  }
4296
4320
  }
4297
- if (validator && !validator(value)) {
4321
+ if (validator && !validator(value, props)) {
4298
4322
  warn('Invalid prop: custom validator check failed for prop "' + name + '".');
4299
4323
  }
4300
4324
  }
@@ -4550,7 +4574,15 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
4550
4574
  }
4551
4575
 
4552
4576
  let hasMismatch = false;
4553
- const isSVGContainer = (container) => /svg/.test(container.namespaceURI) && container.tagName !== "foreignObject";
4577
+ const isSVGContainer = (container) => container.namespaceURI.includes("svg") && container.tagName !== "foreignObject";
4578
+ const isMathMLContainer = (container) => container.namespaceURI.includes("MathML");
4579
+ const getContainerType = (container) => {
4580
+ if (isSVGContainer(container))
4581
+ return "svg";
4582
+ if (isMathMLContainer(container))
4583
+ return "mathml";
4584
+ return void 0;
4585
+ };
4554
4586
  const isComment = (node) => node.nodeType === 8 /* COMMENT */;
4555
4587
  function createHydrationFunctions(rendererInternals) {
4556
4588
  const {
@@ -4629,11 +4661,13 @@ function createHydrationFunctions(rendererInternals) {
4629
4661
  if (node.data !== vnode.children) {
4630
4662
  hasMismatch = true;
4631
4663
  warn(
4632
- `Hydration text mismatch:
4633
- - Server rendered: ${JSON.stringify(
4664
+ `Hydration text mismatch in`,
4665
+ node.parentNode,
4666
+ `
4667
+ - rendered on server: ${JSON.stringify(
4634
4668
  node.data
4635
4669
  )}
4636
- - Client rendered: ${JSON.stringify(vnode.children)}`
4670
+ - expected on client: ${JSON.stringify(vnode.children)}`
4637
4671
  );
4638
4672
  node.data = vnode.children;
4639
4673
  }
@@ -4719,7 +4753,7 @@ function createHydrationFunctions(rendererInternals) {
4719
4753
  null,
4720
4754
  parentComponent,
4721
4755
  parentSuspense,
4722
- isSVGContainer(container),
4756
+ getContainerType(container),
4723
4757
  optimized
4724
4758
  );
4725
4759
  if (isAsyncWrapper(vnode)) {
@@ -4754,7 +4788,7 @@ function createHydrationFunctions(rendererInternals) {
4754
4788
  vnode,
4755
4789
  parentComponent,
4756
4790
  parentSuspense,
4757
- isSVGContainer(parentNode(node)),
4791
+ getContainerType(parentNode(node)),
4758
4792
  slotScopeIds,
4759
4793
  optimized,
4760
4794
  rendererInternals,
@@ -4777,38 +4811,6 @@ function createHydrationFunctions(rendererInternals) {
4777
4811
  if (dirs) {
4778
4812
  invokeDirectiveHook(vnode, null, parentComponent, "created");
4779
4813
  }
4780
- if (props) {
4781
- if (forcePatch || !optimized || patchFlag & (16 | 32)) {
4782
- for (const key in props) {
4783
- if (forcePatch && (key.endsWith("value") || key === "indeterminate") || shared.isOn(key) && !shared.isReservedProp(key) || // force hydrate v-bind with .prop modifiers
4784
- key[0] === ".") {
4785
- patchProp(
4786
- el,
4787
- key,
4788
- null,
4789
- props[key],
4790
- false,
4791
- void 0,
4792
- parentComponent
4793
- );
4794
- }
4795
- }
4796
- } else if (props.onClick) {
4797
- patchProp(
4798
- el,
4799
- "onClick",
4800
- null,
4801
- props.onClick,
4802
- false,
4803
- void 0,
4804
- parentComponent
4805
- );
4806
- }
4807
- }
4808
- let vnodeHooks;
4809
- if (vnodeHooks = props && props.onVnodeBeforeMount) {
4810
- invokeVNodeHook(vnodeHooks, parentComponent, vnode);
4811
- }
4812
4814
  let needCallTransitionHooks = false;
4813
4815
  if (isTemplateNode(el)) {
4814
4816
  needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
@@ -4819,16 +4821,6 @@ function createHydrationFunctions(rendererInternals) {
4819
4821
  replaceNode(content, el, parentComponent);
4820
4822
  vnode.el = el = content;
4821
4823
  }
4822
- if (dirs) {
4823
- invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
4824
- }
4825
- if ((vnodeHooks = props && props.onVnodeMounted) || dirs || needCallTransitionHooks) {
4826
- queueEffectWithSuspense(() => {
4827
- vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode);
4828
- needCallTransitionHooks && transition.enter(el);
4829
- dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
4830
- }, parentSuspense);
4831
- }
4832
4824
  if (shapeFlag & 16 && // skip if element has innerHTML / textContent
4833
4825
  !(props && (props.innerHTML || props.textContent))) {
4834
4826
  let next = hydrateChildren(
@@ -4845,7 +4837,10 @@ function createHydrationFunctions(rendererInternals) {
4845
4837
  hasMismatch = true;
4846
4838
  if (!hasWarned) {
4847
4839
  warn(
4848
- `Hydration children mismatch in <${vnode.type}>: server rendered element contains more child nodes than client vdom.`
4840
+ `Hydration children mismatch on`,
4841
+ el,
4842
+ `
4843
+ Server rendered element contains more child nodes than client vdom.`
4849
4844
  );
4850
4845
  hasWarned = true;
4851
4846
  }
@@ -4857,13 +4852,50 @@ function createHydrationFunctions(rendererInternals) {
4857
4852
  if (el.textContent !== vnode.children) {
4858
4853
  hasMismatch = true;
4859
4854
  warn(
4860
- `Hydration text content mismatch in <${vnode.type}>:
4861
- - Server rendered: ${el.textContent}
4862
- - Client rendered: ${vnode.children}`
4855
+ `Hydration text content mismatch on`,
4856
+ el,
4857
+ `
4858
+ - rendered on server: ${el.textContent}
4859
+ - expected on client: ${vnode.children}`
4863
4860
  );
4864
4861
  el.textContent = vnode.children;
4865
4862
  }
4866
4863
  }
4864
+ if (props) {
4865
+ {
4866
+ for (const key in props) {
4867
+ if (propHasMismatch(el, key, props[key])) {
4868
+ hasMismatch = true;
4869
+ }
4870
+ if (forcePatch && (key.endsWith("value") || key === "indeterminate") || shared.isOn(key) && !shared.isReservedProp(key) || // force hydrate v-bind with .prop modifiers
4871
+ key[0] === ".") {
4872
+ patchProp(
4873
+ el,
4874
+ key,
4875
+ null,
4876
+ props[key],
4877
+ void 0,
4878
+ void 0,
4879
+ parentComponent
4880
+ );
4881
+ }
4882
+ }
4883
+ }
4884
+ }
4885
+ let vnodeHooks;
4886
+ if (vnodeHooks = props && props.onVnodeBeforeMount) {
4887
+ invokeVNodeHook(vnodeHooks, parentComponent, vnode);
4888
+ }
4889
+ if (dirs) {
4890
+ invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
4891
+ }
4892
+ if ((vnodeHooks = props && props.onVnodeMounted) || dirs || needCallTransitionHooks) {
4893
+ queueEffectWithSuspense(() => {
4894
+ vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode);
4895
+ needCallTransitionHooks && transition.enter(el);
4896
+ dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
4897
+ }, parentSuspense);
4898
+ }
4867
4899
  }
4868
4900
  return el.nextSibling;
4869
4901
  };
@@ -4889,7 +4921,10 @@ function createHydrationFunctions(rendererInternals) {
4889
4921
  hasMismatch = true;
4890
4922
  if (!hasWarned) {
4891
4923
  warn(
4892
- `Hydration children mismatch in <${container.tagName.toLowerCase()}>: server rendered element contains fewer child nodes than client vdom.`
4924
+ `Hydration children mismatch on`,
4925
+ container,
4926
+ `
4927
+ Server rendered element contains fewer child nodes than client vdom.`
4893
4928
  );
4894
4929
  hasWarned = true;
4895
4930
  }
@@ -4900,7 +4935,7 @@ function createHydrationFunctions(rendererInternals) {
4900
4935
  null,
4901
4936
  parentComponent,
4902
4937
  parentSuspense,
4903
- isSVGContainer(container),
4938
+ getContainerType(container),
4904
4939
  slotScopeIds
4905
4940
  );
4906
4941
  }
@@ -4934,12 +4969,12 @@ function createHydrationFunctions(rendererInternals) {
4934
4969
  hasMismatch = true;
4935
4970
  warn(
4936
4971
  `Hydration node mismatch:
4937
- - Client vnode:`,
4938
- vnode.type,
4939
- `
4940
- - Server rendered DOM:`,
4972
+ - rendered on server:`,
4941
4973
  node,
4942
- node.nodeType === 3 /* TEXT */ ? `(text)` : isComment(node) && node.data === "[" ? `(start of fragment)` : ``
4974
+ node.nodeType === 3 /* TEXT */ ? `(text)` : isComment(node) && node.data === "[" ? `(start of fragment)` : ``,
4975
+ `
4976
+ - expected on client:`,
4977
+ vnode.type
4943
4978
  );
4944
4979
  vnode.el = null;
4945
4980
  if (isFragment) {
@@ -4963,7 +4998,7 @@ function createHydrationFunctions(rendererInternals) {
4963
4998
  next,
4964
4999
  parentComponent,
4965
5000
  parentSuspense,
4966
- isSVGContainer(container),
5001
+ getContainerType(container),
4967
5002
  slotScopeIds
4968
5003
  );
4969
5004
  return next;
@@ -5004,6 +5039,46 @@ function createHydrationFunctions(rendererInternals) {
5004
5039
  };
5005
5040
  return [hydrate, hydrateNode];
5006
5041
  }
5042
+ function propHasMismatch(el, key, clientValue) {
5043
+ let mismatchType;
5044
+ let mismatchKey;
5045
+ let actual;
5046
+ let expected;
5047
+ if (key === "class") {
5048
+ actual = el.className;
5049
+ expected = shared.normalizeClass(clientValue);
5050
+ if (actual !== expected) {
5051
+ mismatchType = mismatchKey = `class`;
5052
+ }
5053
+ } else if (key === "style") {
5054
+ actual = el.getAttribute("style");
5055
+ expected = shared.isString(clientValue) ? clientValue : shared.stringifyStyle(shared.normalizeStyle(clientValue));
5056
+ if (actual !== expected) {
5057
+ mismatchType = mismatchKey = "style";
5058
+ }
5059
+ } else if (el instanceof SVGElement && shared.isKnownSvgAttr(key) || el instanceof HTMLElement && (shared.isBooleanAttr(key) || shared.isKnownHtmlAttr(key))) {
5060
+ actual = el.hasAttribute(key) && el.getAttribute(key);
5061
+ expected = shared.isBooleanAttr(key) ? shared.includeBooleanAttr(clientValue) ? "" : false : clientValue == null ? false : String(clientValue);
5062
+ if (actual !== expected) {
5063
+ mismatchType = `attribute`;
5064
+ mismatchKey = key;
5065
+ }
5066
+ }
5067
+ if (mismatchType) {
5068
+ const format = (v) => v === false ? `(not rendered)` : `${mismatchKey}="${v}"`;
5069
+ warn(
5070
+ `Hydration ${mismatchType} mismatch on`,
5071
+ el,
5072
+ `
5073
+ - rendered on server: ${format(actual)}
5074
+ - expected on client: ${format(expected)}
5075
+ Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
5076
+ You should fix the source of the mismatch.`
5077
+ );
5078
+ return true;
5079
+ }
5080
+ return false;
5081
+ }
5007
5082
 
5008
5083
  let supported;
5009
5084
  let perf;
@@ -5072,7 +5147,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5072
5147
  setScopeId: hostSetScopeId = shared.NOOP,
5073
5148
  insertStaticContent: hostInsertStaticContent
5074
5149
  } = options;
5075
- const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, slotScopeIds = null, optimized = isHmrUpdating ? false : !!n2.dynamicChildren) => {
5150
+ const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, namespace = void 0, slotScopeIds = null, optimized = isHmrUpdating ? false : !!n2.dynamicChildren) => {
5076
5151
  if (n1 === n2) {
5077
5152
  return;
5078
5153
  }
@@ -5095,9 +5170,9 @@ function baseCreateRenderer(options, createHydrationFns) {
5095
5170
  break;
5096
5171
  case Static:
5097
5172
  if (n1 == null) {
5098
- mountStaticNode(n2, container, anchor, isSVG);
5173
+ mountStaticNode(n2, container, anchor, namespace);
5099
5174
  } else {
5100
- patchStaticNode(n1, n2, container, isSVG);
5175
+ patchStaticNode(n1, n2, container, namespace);
5101
5176
  }
5102
5177
  break;
5103
5178
  case Fragment:
@@ -5108,7 +5183,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5108
5183
  anchor,
5109
5184
  parentComponent,
5110
5185
  parentSuspense,
5111
- isSVG,
5186
+ namespace,
5112
5187
  slotScopeIds,
5113
5188
  optimized
5114
5189
  );
@@ -5122,7 +5197,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5122
5197
  anchor,
5123
5198
  parentComponent,
5124
5199
  parentSuspense,
5125
- isSVG,
5200
+ namespace,
5126
5201
  slotScopeIds,
5127
5202
  optimized
5128
5203
  );
@@ -5134,7 +5209,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5134
5209
  anchor,
5135
5210
  parentComponent,
5136
5211
  parentSuspense,
5137
- isSVG,
5212
+ namespace,
5138
5213
  slotScopeIds,
5139
5214
  optimized
5140
5215
  );
@@ -5146,7 +5221,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5146
5221
  anchor,
5147
5222
  parentComponent,
5148
5223
  parentSuspense,
5149
- isSVG,
5224
+ namespace,
5150
5225
  slotScopeIds,
5151
5226
  optimized,
5152
5227
  internals
@@ -5159,7 +5234,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5159
5234
  anchor,
5160
5235
  parentComponent,
5161
5236
  parentSuspense,
5162
- isSVG,
5237
+ namespace,
5163
5238
  slotScopeIds,
5164
5239
  optimized,
5165
5240
  internals
@@ -5197,17 +5272,17 @@ function baseCreateRenderer(options, createHydrationFns) {
5197
5272
  n2.el = n1.el;
5198
5273
  }
5199
5274
  };
5200
- const mountStaticNode = (n2, container, anchor, isSVG) => {
5275
+ const mountStaticNode = (n2, container, anchor, namespace) => {
5201
5276
  [n2.el, n2.anchor] = hostInsertStaticContent(
5202
5277
  n2.children,
5203
5278
  container,
5204
5279
  anchor,
5205
- isSVG,
5280
+ namespace,
5206
5281
  n2.el,
5207
5282
  n2.anchor
5208
5283
  );
5209
5284
  };
5210
- const patchStaticNode = (n1, n2, container, isSVG) => {
5285
+ const patchStaticNode = (n1, n2, container, namespace) => {
5211
5286
  if (n2.children !== n1.children) {
5212
5287
  const anchor = hostNextSibling(n1.anchor);
5213
5288
  removeStaticNode(n1);
@@ -5215,7 +5290,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5215
5290
  n2.children,
5216
5291
  container,
5217
5292
  anchor,
5218
- isSVG
5293
+ namespace
5219
5294
  );
5220
5295
  } else {
5221
5296
  n2.el = n1.el;
@@ -5240,8 +5315,12 @@ function baseCreateRenderer(options, createHydrationFns) {
5240
5315
  }
5241
5316
  hostRemove(anchor);
5242
5317
  };
5243
- const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
5244
- isSVG = isSVG || n2.type === "svg";
5318
+ const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
5319
+ if (n2.type === "svg") {
5320
+ namespace = "svg";
5321
+ } else if (n2.type === "math") {
5322
+ namespace = "mathml";
5323
+ }
5245
5324
  if (n1 == null) {
5246
5325
  mountElement(
5247
5326
  n2,
@@ -5249,7 +5328,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5249
5328
  anchor,
5250
5329
  parentComponent,
5251
5330
  parentSuspense,
5252
- isSVG,
5331
+ namespace,
5253
5332
  slotScopeIds,
5254
5333
  optimized
5255
5334
  );
@@ -5259,19 +5338,19 @@ function baseCreateRenderer(options, createHydrationFns) {
5259
5338
  n2,
5260
5339
  parentComponent,
5261
5340
  parentSuspense,
5262
- isSVG,
5341
+ namespace,
5263
5342
  slotScopeIds,
5264
5343
  optimized
5265
5344
  );
5266
5345
  }
5267
5346
  };
5268
- const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
5347
+ const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
5269
5348
  let el;
5270
5349
  let vnodeHook;
5271
- const { type, props, shapeFlag, transition, dirs } = vnode;
5350
+ const { props, shapeFlag, transition, dirs } = vnode;
5272
5351
  el = vnode.el = hostCreateElement(
5273
5352
  vnode.type,
5274
- isSVG,
5353
+ namespace,
5275
5354
  props && props.is,
5276
5355
  props
5277
5356
  );
@@ -5284,7 +5363,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5284
5363
  null,
5285
5364
  parentComponent,
5286
5365
  parentSuspense,
5287
- isSVG && type !== "foreignObject",
5366
+ resolveChildrenNamespace(vnode, namespace),
5288
5367
  slotScopeIds,
5289
5368
  optimized
5290
5369
  );
@@ -5301,7 +5380,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5301
5380
  key,
5302
5381
  null,
5303
5382
  props[key],
5304
- isSVG,
5383
+ namespace,
5305
5384
  vnode.children,
5306
5385
  parentComponent,
5307
5386
  parentSuspense,
@@ -5310,7 +5389,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5310
5389
  }
5311
5390
  }
5312
5391
  if ("value" in props) {
5313
- hostPatchProp(el, "value", null, props.value);
5392
+ hostPatchProp(el, "value", null, props.value, namespace);
5314
5393
  }
5315
5394
  if (vnodeHook = props.onVnodeBeforeMount) {
5316
5395
  invokeVNodeHook(vnodeHook, parentComponent, vnode);
@@ -5368,7 +5447,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5368
5447
  }
5369
5448
  }
5370
5449
  };
5371
- const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, start = 0) => {
5450
+ const mountChildren = (children, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, start = 0) => {
5372
5451
  for (let i = start; i < children.length; i++) {
5373
5452
  const child = children[i] = optimized ? cloneIfMounted(children[i]) : normalizeVNode(children[i]);
5374
5453
  patch(
@@ -5378,13 +5457,13 @@ function baseCreateRenderer(options, createHydrationFns) {
5378
5457
  anchor,
5379
5458
  parentComponent,
5380
5459
  parentSuspense,
5381
- isSVG,
5460
+ namespace,
5382
5461
  slotScopeIds,
5383
5462
  optimized
5384
5463
  );
5385
5464
  }
5386
5465
  };
5387
- const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
5466
+ const patchElement = (n1, n2, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
5388
5467
  const el = n2.el = n1.el;
5389
5468
  let { patchFlag, dynamicChildren, dirs } = n2;
5390
5469
  patchFlag |= n1.patchFlag & 16;
@@ -5404,7 +5483,6 @@ function baseCreateRenderer(options, createHydrationFns) {
5404
5483
  optimized = false;
5405
5484
  dynamicChildren = null;
5406
5485
  }
5407
- const areChildrenSVG = isSVG && n2.type !== "foreignObject";
5408
5486
  if (dynamicChildren) {
5409
5487
  patchBlockChildren(
5410
5488
  n1.dynamicChildren,
@@ -5412,7 +5490,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5412
5490
  el,
5413
5491
  parentComponent,
5414
5492
  parentSuspense,
5415
- areChildrenSVG,
5493
+ resolveChildrenNamespace(n2, namespace),
5416
5494
  slotScopeIds
5417
5495
  );
5418
5496
  {
@@ -5426,7 +5504,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5426
5504
  null,
5427
5505
  parentComponent,
5428
5506
  parentSuspense,
5429
- areChildrenSVG,
5507
+ resolveChildrenNamespace(n2, namespace),
5430
5508
  slotScopeIds,
5431
5509
  false
5432
5510
  );
@@ -5440,16 +5518,16 @@ function baseCreateRenderer(options, createHydrationFns) {
5440
5518
  newProps,
5441
5519
  parentComponent,
5442
5520
  parentSuspense,
5443
- isSVG
5521
+ namespace
5444
5522
  );
5445
5523
  } else {
5446
5524
  if (patchFlag & 2) {
5447
5525
  if (oldProps.class !== newProps.class) {
5448
- hostPatchProp(el, "class", null, newProps.class, isSVG);
5526
+ hostPatchProp(el, "class", null, newProps.class, namespace);
5449
5527
  }
5450
5528
  }
5451
5529
  if (patchFlag & 4) {
5452
- hostPatchProp(el, "style", oldProps.style, newProps.style, isSVG);
5530
+ hostPatchProp(el, "style", oldProps.style, newProps.style, namespace);
5453
5531
  }
5454
5532
  if (patchFlag & 8) {
5455
5533
  const propsToUpdate = n2.dynamicProps;
@@ -5463,7 +5541,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5463
5541
  key,
5464
5542
  prev,
5465
5543
  next,
5466
- isSVG,
5544
+ namespace,
5467
5545
  n1.children,
5468
5546
  parentComponent,
5469
5547
  parentSuspense,
@@ -5486,7 +5564,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5486
5564
  newProps,
5487
5565
  parentComponent,
5488
5566
  parentSuspense,
5489
- isSVG
5567
+ namespace
5490
5568
  );
5491
5569
  }
5492
5570
  if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {
@@ -5496,7 +5574,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5496
5574
  }, parentSuspense);
5497
5575
  }
5498
5576
  };
5499
- const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG, slotScopeIds) => {
5577
+ const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, namespace, slotScopeIds) => {
5500
5578
  for (let i = 0; i < newChildren.length; i++) {
5501
5579
  const oldVNode = oldChildren[i];
5502
5580
  const newVNode = newChildren[i];
@@ -5521,13 +5599,13 @@ function baseCreateRenderer(options, createHydrationFns) {
5521
5599
  null,
5522
5600
  parentComponent,
5523
5601
  parentSuspense,
5524
- isSVG,
5602
+ namespace,
5525
5603
  slotScopeIds,
5526
5604
  true
5527
5605
  );
5528
5606
  }
5529
5607
  };
5530
- const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {
5608
+ const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, namespace) => {
5531
5609
  if (oldProps !== newProps) {
5532
5610
  if (oldProps !== shared.EMPTY_OBJ) {
5533
5611
  for (const key in oldProps) {
@@ -5537,7 +5615,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5537
5615
  key,
5538
5616
  oldProps[key],
5539
5617
  null,
5540
- isSVG,
5618
+ namespace,
5541
5619
  vnode.children,
5542
5620
  parentComponent,
5543
5621
  parentSuspense,
@@ -5557,7 +5635,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5557
5635
  key,
5558
5636
  prev,
5559
5637
  next,
5560
- isSVG,
5638
+ namespace,
5561
5639
  vnode.children,
5562
5640
  parentComponent,
5563
5641
  parentSuspense,
@@ -5566,11 +5644,11 @@ function baseCreateRenderer(options, createHydrationFns) {
5566
5644
  }
5567
5645
  }
5568
5646
  if ("value" in newProps) {
5569
- hostPatchProp(el, "value", oldProps.value, newProps.value);
5647
+ hostPatchProp(el, "value", oldProps.value, newProps.value, namespace);
5570
5648
  }
5571
5649
  }
5572
5650
  };
5573
- const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
5651
+ const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
5574
5652
  const fragmentStartAnchor = n2.el = n1 ? n1.el : hostCreateText("");
5575
5653
  const fragmentEndAnchor = n2.anchor = n1 ? n1.anchor : hostCreateText("");
5576
5654
  let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2;
@@ -5594,7 +5672,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5594
5672
  fragmentEndAnchor,
5595
5673
  parentComponent,
5596
5674
  parentSuspense,
5597
- isSVG,
5675
+ namespace,
5598
5676
  slotScopeIds,
5599
5677
  optimized
5600
5678
  );
@@ -5608,7 +5686,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5608
5686
  container,
5609
5687
  parentComponent,
5610
5688
  parentSuspense,
5611
- isSVG,
5689
+ namespace,
5612
5690
  slotScopeIds
5613
5691
  );
5614
5692
  {
@@ -5622,14 +5700,14 @@ function baseCreateRenderer(options, createHydrationFns) {
5622
5700
  fragmentEndAnchor,
5623
5701
  parentComponent,
5624
5702
  parentSuspense,
5625
- isSVG,
5703
+ namespace,
5626
5704
  slotScopeIds,
5627
5705
  optimized
5628
5706
  );
5629
5707
  }
5630
5708
  }
5631
5709
  };
5632
- const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
5710
+ const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
5633
5711
  n2.slotScopeIds = slotScopeIds;
5634
5712
  if (n1 == null) {
5635
5713
  if (n2.shapeFlag & 512) {
@@ -5637,7 +5715,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5637
5715
  n2,
5638
5716
  container,
5639
5717
  anchor,
5640
- isSVG,
5718
+ namespace,
5641
5719
  optimized
5642
5720
  );
5643
5721
  } else {
@@ -5647,7 +5725,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5647
5725
  anchor,
5648
5726
  parentComponent,
5649
5727
  parentSuspense,
5650
- isSVG,
5728
+ namespace,
5651
5729
  optimized
5652
5730
  );
5653
5731
  }
@@ -5655,7 +5733,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5655
5733
  updateComponent(n1, n2, optimized);
5656
5734
  }
5657
5735
  };
5658
- const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {
5736
+ const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, namespace, optimized) => {
5659
5737
  const instance = (initialVNode.component = createComponentInstance(
5660
5738
  initialVNode,
5661
5739
  parentComponent,
@@ -5686,17 +5764,17 @@ function baseCreateRenderer(options, createHydrationFns) {
5686
5764
  const placeholder = instance.subTree = createVNode(Comment);
5687
5765
  processCommentNode(null, placeholder, container, anchor);
5688
5766
  }
5689
- return;
5767
+ } else {
5768
+ setupRenderEffect(
5769
+ instance,
5770
+ initialVNode,
5771
+ container,
5772
+ anchor,
5773
+ parentSuspense,
5774
+ namespace,
5775
+ optimized
5776
+ );
5690
5777
  }
5691
- setupRenderEffect(
5692
- instance,
5693
- initialVNode,
5694
- container,
5695
- anchor,
5696
- parentSuspense,
5697
- isSVG,
5698
- optimized
5699
- );
5700
5778
  {
5701
5779
  popWarningContext();
5702
5780
  endMeasure(instance, `mount`);
@@ -5725,7 +5803,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5725
5803
  instance.vnode = n2;
5726
5804
  }
5727
5805
  };
5728
- const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {
5806
+ const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, namespace, optimized) => {
5729
5807
  const componentUpdateFn = () => {
5730
5808
  if (!instance.isMounted) {
5731
5809
  let vnodeHook;
@@ -5792,7 +5870,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5792
5870
  anchor,
5793
5871
  instance,
5794
5872
  parentSuspense,
5795
- isSVG
5873
+ namespace
5796
5874
  );
5797
5875
  {
5798
5876
  endMeasure(instance, `patch`);
@@ -5819,6 +5897,21 @@ function baseCreateRenderer(options, createHydrationFns) {
5819
5897
  initialVNode = container = anchor = null;
5820
5898
  } else {
5821
5899
  let { next, bu, u, parent, vnode } = instance;
5900
+ {
5901
+ const nonHydratedAsyncRoot = locateNonHydratedAsyncRoot(instance);
5902
+ if (nonHydratedAsyncRoot) {
5903
+ if (next) {
5904
+ next.el = vnode.el;
5905
+ updateComponentPreRender(instance, next, optimized);
5906
+ }
5907
+ nonHydratedAsyncRoot.asyncDep.then(() => {
5908
+ if (!instance.isUnmounted) {
5909
+ componentUpdateFn();
5910
+ }
5911
+ });
5912
+ return;
5913
+ }
5914
+ }
5822
5915
  let originNext = next;
5823
5916
  let vnodeHook;
5824
5917
  {
@@ -5859,7 +5952,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5859
5952
  getNextHostNode(prevTree),
5860
5953
  instance,
5861
5954
  parentSuspense,
5862
- isSVG
5955
+ namespace
5863
5956
  );
5864
5957
  {
5865
5958
  endMeasure(instance, `patch`);
@@ -5914,10 +6007,10 @@ function baseCreateRenderer(options, createHydrationFns) {
5914
6007
  updateProps(instance, nextVNode.props, prevProps, optimized);
5915
6008
  updateSlots(instance, nextVNode.children, optimized);
5916
6009
  reactivity.pauseTracking();
5917
- flushPreFlushCbs();
6010
+ flushPreFlushCbs(instance);
5918
6011
  reactivity.resetTracking();
5919
6012
  };
5920
- const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized = false) => {
6013
+ const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized = false) => {
5921
6014
  const c1 = n1 && n1.children;
5922
6015
  const prevShapeFlag = n1 ? n1.shapeFlag : 0;
5923
6016
  const c2 = n2.children;
@@ -5931,7 +6024,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5931
6024
  anchor,
5932
6025
  parentComponent,
5933
6026
  parentSuspense,
5934
- isSVG,
6027
+ namespace,
5935
6028
  slotScopeIds,
5936
6029
  optimized
5937
6030
  );
@@ -5944,7 +6037,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5944
6037
  anchor,
5945
6038
  parentComponent,
5946
6039
  parentSuspense,
5947
- isSVG,
6040
+ namespace,
5948
6041
  slotScopeIds,
5949
6042
  optimized
5950
6043
  );
@@ -5968,7 +6061,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5968
6061
  anchor,
5969
6062
  parentComponent,
5970
6063
  parentSuspense,
5971
- isSVG,
6064
+ namespace,
5972
6065
  slotScopeIds,
5973
6066
  optimized
5974
6067
  );
@@ -5986,7 +6079,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5986
6079
  anchor,
5987
6080
  parentComponent,
5988
6081
  parentSuspense,
5989
- isSVG,
6082
+ namespace,
5990
6083
  slotScopeIds,
5991
6084
  optimized
5992
6085
  );
@@ -5994,7 +6087,7 @@ function baseCreateRenderer(options, createHydrationFns) {
5994
6087
  }
5995
6088
  }
5996
6089
  };
5997
- const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
6090
+ const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
5998
6091
  c1 = c1 || shared.EMPTY_ARR;
5999
6092
  c2 = c2 || shared.EMPTY_ARR;
6000
6093
  const oldLength = c1.length;
@@ -6010,7 +6103,7 @@ function baseCreateRenderer(options, createHydrationFns) {
6010
6103
  null,
6011
6104
  parentComponent,
6012
6105
  parentSuspense,
6013
- isSVG,
6106
+ namespace,
6014
6107
  slotScopeIds,
6015
6108
  optimized
6016
6109
  );
@@ -6031,14 +6124,14 @@ function baseCreateRenderer(options, createHydrationFns) {
6031
6124
  anchor,
6032
6125
  parentComponent,
6033
6126
  parentSuspense,
6034
- isSVG,
6127
+ namespace,
6035
6128
  slotScopeIds,
6036
6129
  optimized,
6037
6130
  commonLength
6038
6131
  );
6039
6132
  }
6040
6133
  };
6041
- const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
6134
+ const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
6042
6135
  let i = 0;
6043
6136
  const l2 = c2.length;
6044
6137
  let e1 = c1.length - 1;
@@ -6054,7 +6147,7 @@ function baseCreateRenderer(options, createHydrationFns) {
6054
6147
  null,
6055
6148
  parentComponent,
6056
6149
  parentSuspense,
6057
- isSVG,
6150
+ namespace,
6058
6151
  slotScopeIds,
6059
6152
  optimized
6060
6153
  );
@@ -6074,7 +6167,7 @@ function baseCreateRenderer(options, createHydrationFns) {
6074
6167
  null,
6075
6168
  parentComponent,
6076
6169
  parentSuspense,
6077
- isSVG,
6170
+ namespace,
6078
6171
  slotScopeIds,
6079
6172
  optimized
6080
6173
  );
@@ -6096,7 +6189,7 @@ function baseCreateRenderer(options, createHydrationFns) {
6096
6189
  anchor,
6097
6190
  parentComponent,
6098
6191
  parentSuspense,
6099
- isSVG,
6192
+ namespace,
6100
6193
  slotScopeIds,
6101
6194
  optimized
6102
6195
  );
@@ -6166,7 +6259,7 @@ function baseCreateRenderer(options, createHydrationFns) {
6166
6259
  null,
6167
6260
  parentComponent,
6168
6261
  parentSuspense,
6169
- isSVG,
6262
+ namespace,
6170
6263
  slotScopeIds,
6171
6264
  optimized
6172
6265
  );
@@ -6187,7 +6280,7 @@ function baseCreateRenderer(options, createHydrationFns) {
6187
6280
  anchor,
6188
6281
  parentComponent,
6189
6282
  parentSuspense,
6190
- isSVG,
6283
+ namespace,
6191
6284
  slotScopeIds,
6192
6285
  optimized
6193
6286
  );
@@ -6408,13 +6501,21 @@ function baseCreateRenderer(options, createHydrationFns) {
6408
6501
  }
6409
6502
  return hostNextSibling(vnode.anchor || vnode.el);
6410
6503
  };
6411
- const render = (vnode, container, isSVG) => {
6504
+ const render = (vnode, container, namespace) => {
6412
6505
  if (vnode == null) {
6413
6506
  if (container._vnode) {
6414
6507
  unmount(container._vnode, null, null, true);
6415
6508
  }
6416
6509
  } else {
6417
- patch(container._vnode || null, vnode, container, null, null, null, isSVG);
6510
+ patch(
6511
+ container._vnode || null,
6512
+ vnode,
6513
+ container,
6514
+ null,
6515
+ null,
6516
+ null,
6517
+ namespace
6518
+ );
6418
6519
  }
6419
6520
  flushPreFlushCbs();
6420
6521
  flushPostFlushCbs();
@@ -6445,6 +6546,9 @@ function baseCreateRenderer(options, createHydrationFns) {
6445
6546
  createApp: createAppAPI(render, hydrate)
6446
6547
  };
6447
6548
  }
6549
+ function resolveChildrenNamespace({ type, props }, currentNamespace) {
6550
+ return currentNamespace === "svg" && type === "foreignObject" || currentNamespace === "mathml" && type === "annotation-xml" && props && props.encoding && props.encoding.includes("html") ? void 0 : currentNamespace;
6551
+ }
6448
6552
  function toggleRecurse({ effect, update }, allowed) {
6449
6553
  effect.allowRecurse = update.allowRecurse = allowed;
6450
6554
  }
@@ -6515,10 +6619,21 @@ function getSequence(arr) {
6515
6619
  }
6516
6620
  return result;
6517
6621
  }
6622
+ function locateNonHydratedAsyncRoot(instance) {
6623
+ const subComponent = instance.subTree.component;
6624
+ if (subComponent) {
6625
+ if (subComponent.asyncDep && !subComponent.asyncResolved) {
6626
+ return subComponent;
6627
+ } else {
6628
+ return locateNonHydratedAsyncRoot(subComponent);
6629
+ }
6630
+ }
6631
+ }
6518
6632
 
6519
6633
  const isTeleport = (type) => type.__isTeleport;
6520
6634
  const isTeleportDisabled = (props) => props && (props.disabled || props.disabled === "");
6521
6635
  const isTargetSVG = (target) => typeof SVGElement !== "undefined" && target instanceof SVGElement;
6636
+ const isTargetMathML = (target) => typeof MathMLElement === "function" && target instanceof MathMLElement;
6522
6637
  const resolveTarget = (props, select) => {
6523
6638
  const targetSelector = props && props.to;
6524
6639
  if (shared.isString(targetSelector)) {
@@ -6546,7 +6661,7 @@ const resolveTarget = (props, select) => {
6546
6661
  const TeleportImpl = {
6547
6662
  name: "Teleport",
6548
6663
  __isTeleport: true,
6549
- process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals) {
6664
+ process(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, internals) {
6550
6665
  const {
6551
6666
  mc: mountChildren,
6552
6667
  pc: patchChildren,
@@ -6568,7 +6683,11 @@ const TeleportImpl = {
6568
6683
  const targetAnchor = n2.targetAnchor = createText("");
6569
6684
  if (target) {
6570
6685
  insert(targetAnchor, target);
6571
- isSVG = isSVG || isTargetSVG(target);
6686
+ if (namespace === "svg" || isTargetSVG(target)) {
6687
+ namespace = "svg";
6688
+ } else if (namespace === "mathml" || isTargetMathML(target)) {
6689
+ namespace = "mathml";
6690
+ }
6572
6691
  } else if (!disabled) {
6573
6692
  warn("Invalid Teleport target on mount:", target, `(${typeof target})`);
6574
6693
  }
@@ -6580,7 +6699,7 @@ const TeleportImpl = {
6580
6699
  anchor2,
6581
6700
  parentComponent,
6582
6701
  parentSuspense,
6583
- isSVG,
6702
+ namespace,
6584
6703
  slotScopeIds,
6585
6704
  optimized
6586
6705
  );
@@ -6599,7 +6718,11 @@ const TeleportImpl = {
6599
6718
  const wasDisabled = isTeleportDisabled(n1.props);
6600
6719
  const currentContainer = wasDisabled ? container : target;
6601
6720
  const currentAnchor = wasDisabled ? mainAnchor : targetAnchor;
6602
- isSVG = isSVG || isTargetSVG(target);
6721
+ if (namespace === "svg" || isTargetSVG(target)) {
6722
+ namespace = "svg";
6723
+ } else if (namespace === "mathml" || isTargetMathML(target)) {
6724
+ namespace = "mathml";
6725
+ }
6603
6726
  if (dynamicChildren) {
6604
6727
  patchBlockChildren(
6605
6728
  n1.dynamicChildren,
@@ -6607,7 +6730,7 @@ const TeleportImpl = {
6607
6730
  currentContainer,
6608
6731
  parentComponent,
6609
6732
  parentSuspense,
6610
- isSVG,
6733
+ namespace,
6611
6734
  slotScopeIds
6612
6735
  );
6613
6736
  traverseStaticChildren(n1, n2, true);
@@ -6619,7 +6742,7 @@ const TeleportImpl = {
6619
6742
  currentAnchor,
6620
6743
  parentComponent,
6621
6744
  parentSuspense,
6622
- isSVG,
6745
+ namespace,
6623
6746
  slotScopeIds,
6624
6747
  false
6625
6748
  );
@@ -7242,20 +7365,29 @@ function createComponentInstance(vnode, parent, suspense) {
7242
7365
  let currentInstance = null;
7243
7366
  const getCurrentInstance = () => currentInstance || currentRenderingInstance;
7244
7367
  let internalSetCurrentInstance;
7245
- let globalCurrentInstanceSetters;
7246
- let settersKey = "__VUE_INSTANCE_SETTERS__";
7368
+ let setInSSRSetupState;
7247
7369
  {
7248
- if (!(globalCurrentInstanceSetters = shared.getGlobalThis()[settersKey])) {
7249
- globalCurrentInstanceSetters = shared.getGlobalThis()[settersKey] = [];
7250
- }
7251
- globalCurrentInstanceSetters.push((i) => currentInstance = i);
7252
- internalSetCurrentInstance = (instance) => {
7253
- if (globalCurrentInstanceSetters.length > 1) {
7254
- globalCurrentInstanceSetters.forEach((s) => s(instance));
7255
- } else {
7256
- globalCurrentInstanceSetters[0](instance);
7257
- }
7370
+ const g = shared.getGlobalThis();
7371
+ const registerGlobalSetter = (key, setter) => {
7372
+ let setters;
7373
+ if (!(setters = g[key]))
7374
+ setters = g[key] = [];
7375
+ setters.push(setter);
7376
+ return (v) => {
7377
+ if (setters.length > 1)
7378
+ setters.forEach((set) => set(v));
7379
+ else
7380
+ setters[0](v);
7381
+ };
7258
7382
  };
7383
+ internalSetCurrentInstance = registerGlobalSetter(
7384
+ `__VUE_INSTANCE_SETTERS__`,
7385
+ (v) => currentInstance = v
7386
+ );
7387
+ setInSSRSetupState = registerGlobalSetter(
7388
+ `__VUE_SSR_SETTERS__`,
7389
+ (v) => isInSSRComponentSetup = v
7390
+ );
7259
7391
  }
7260
7392
  const setCurrentInstance = (instance) => {
7261
7393
  internalSetCurrentInstance(instance);
@@ -7279,13 +7411,13 @@ function isStatefulComponent(instance) {
7279
7411
  }
7280
7412
  let isInSSRComponentSetup = false;
7281
7413
  function setupComponent(instance, isSSR = false) {
7282
- isInSSRComponentSetup = isSSR;
7414
+ isSSR && setInSSRSetupState(isSSR);
7283
7415
  const { props, children } = instance.vnode;
7284
7416
  const isStateful = isStatefulComponent(instance);
7285
7417
  initProps(instance, props, isStateful, isSSR);
7286
7418
  initSlots(instance, children);
7287
7419
  const setupResult = isStateful ? setupStatefulComponent(instance, isSSR) : void 0;
7288
- isInSSRComponentSetup = false;
7420
+ isSSR && setInSSRSetupState(false);
7289
7421
  return setupResult;
7290
7422
  }
7291
7423
  function setupStatefulComponent(instance, isSSR) {
@@ -7803,7 +7935,7 @@ function isMemoSame(cached, memo) {
7803
7935
  return true;
7804
7936
  }
7805
7937
 
7806
- const version = "3.4.0-alpha.4";
7938
+ const version = "3.4.0-beta.2";
7807
7939
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
7808
7940
  const _ssrUtils = {
7809
7941
  createComponentInstance,