@vue/compat 3.5.0-alpha.5 → 3.5.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.
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @vue/compat v3.5.0-alpha.5
2
+ * @vue/compat v3.5.0-beta.2
3
3
  * (c) 2018-present Yuxi (Evan) You and Vue contributors
4
4
  * @license MIT
5
5
  **/
@@ -61,9 +61,11 @@ const cacheStringFunction = (fn) => {
61
61
  };
62
62
  };
63
63
  const camelizeRE = /-(\w)/g;
64
- const camelize = cacheStringFunction((str) => {
65
- return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
66
- });
64
+ const camelize = cacheStringFunction(
65
+ (str) => {
66
+ return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
67
+ }
68
+ );
67
69
  const hyphenateRE = /\B([A-Z])/g;
68
70
  const hyphenate = cacheStringFunction(
69
71
  (str) => str.replace(hyphenateRE, "-$1").toLowerCase()
@@ -71,10 +73,12 @@ const hyphenate = cacheStringFunction(
71
73
  const capitalize = cacheStringFunction((str) => {
72
74
  return str.charAt(0).toUpperCase() + str.slice(1);
73
75
  });
74
- const toHandlerKey = cacheStringFunction((str) => {
75
- const s = str ? `on${capitalize(str)}` : ``;
76
- return s;
77
- });
76
+ const toHandlerKey = cacheStringFunction(
77
+ (str) => {
78
+ const s = str ? `on${capitalize(str)}` : ``;
79
+ return s;
80
+ }
81
+ );
78
82
  const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
79
83
  const invokeArrayFns = (fns, ...arg) => {
80
84
  for (let i = 0; i < fns.length; i++) {
@@ -319,6 +323,7 @@ class EffectScope {
319
323
  * @internal
320
324
  */
321
325
  this.cleanups = [];
326
+ this._isPaused = false;
322
327
  this.parent = activeEffectScope;
323
328
  if (!detached && activeEffectScope) {
324
329
  this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
@@ -329,6 +334,37 @@ class EffectScope {
329
334
  get active() {
330
335
  return this._active;
331
336
  }
337
+ pause() {
338
+ if (this._active) {
339
+ this._isPaused = true;
340
+ if (this.scopes) {
341
+ for (let i = 0, l = this.scopes.length; i < l; i++) {
342
+ this.scopes[i].pause();
343
+ }
344
+ }
345
+ for (let i = 0, l = this.effects.length; i < l; i++) {
346
+ this.effects[i].pause();
347
+ }
348
+ }
349
+ }
350
+ /**
351
+ * Resumes the effect scope, including all child scopes and effects.
352
+ */
353
+ resume() {
354
+ if (this._active) {
355
+ if (this._isPaused) {
356
+ this._isPaused = false;
357
+ if (this.scopes) {
358
+ for (let i = 0, l = this.scopes.length; i < l; i++) {
359
+ this.scopes[i].resume();
360
+ }
361
+ }
362
+ for (let i = 0, l = this.effects.length; i < l; i++) {
363
+ this.effects[i].resume();
364
+ }
365
+ }
366
+ }
367
+ }
332
368
  run(fn) {
333
369
  if (this._active) {
334
370
  const currentEffectScope = activeEffectScope;
@@ -399,6 +435,7 @@ function onScopeDispose(fn, failSilently = false) {
399
435
  }
400
436
 
401
437
  let activeSub;
438
+ const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
402
439
  class ReactiveEffect {
403
440
  constructor(fn) {
404
441
  this.fn = fn;
@@ -427,6 +464,18 @@ class ReactiveEffect {
427
464
  activeEffectScope.effects.push(this);
428
465
  }
429
466
  }
467
+ pause() {
468
+ this.flags |= 64;
469
+ }
470
+ resume() {
471
+ if (this.flags & 64) {
472
+ this.flags &= ~64;
473
+ if (pausedQueueEffects.has(this)) {
474
+ pausedQueueEffects.delete(this);
475
+ this.trigger();
476
+ }
477
+ }
478
+ }
430
479
  /**
431
480
  * @internal
432
481
  */
@@ -434,9 +483,6 @@ class ReactiveEffect {
434
483
  if (this.flags & 2 && !(this.flags & 32)) {
435
484
  return;
436
485
  }
437
- if (this.flags & 64) {
438
- return this.trigger();
439
- }
440
486
  if (!(this.flags & 8)) {
441
487
  this.flags |= 8;
442
488
  this.nextEffect = batchedEffect;
@@ -480,7 +526,9 @@ class ReactiveEffect {
480
526
  }
481
527
  }
482
528
  trigger() {
483
- if (this.scheduler) {
529
+ if (this.flags & 64) {
530
+ pausedQueueEffects.add(this);
531
+ } else if (this.scheduler) {
484
532
  this.scheduler();
485
533
  } else {
486
534
  this.runIfDirty();
@@ -508,6 +556,7 @@ function endBatch() {
508
556
  batchDepth--;
509
557
  return;
510
558
  }
559
+ batchDepth--;
511
560
  let error;
512
561
  while (batchedEffect) {
513
562
  let e = batchedEffect;
@@ -526,7 +575,6 @@ function endBatch() {
526
575
  e = next;
527
576
  }
528
577
  }
529
- batchDepth--;
530
578
  if (error) throw error;
531
579
  }
532
580
  function prepareDeps(sub) {
@@ -800,9 +848,15 @@ function addSub(link) {
800
848
  link.dep.subs = link;
801
849
  }
802
850
  const targetMap = /* @__PURE__ */ new WeakMap();
803
- const ITERATE_KEY = Symbol("Object iterate" );
804
- const MAP_KEY_ITERATE_KEY = Symbol("Map keys iterate" );
805
- const ARRAY_ITERATE_KEY = Symbol("Array iterate" );
851
+ const ITERATE_KEY = Symbol(
852
+ "Object iterate"
853
+ );
854
+ const MAP_KEY_ITERATE_KEY = Symbol(
855
+ "Map keys iterate"
856
+ );
857
+ const ARRAY_ITERATE_KEY = Symbol(
858
+ "Array iterate"
859
+ );
806
860
  function track(target, type, key) {
807
861
  if (shouldTrack && activeSub) {
808
862
  let depsMap = targetMap.get(target);
@@ -923,26 +977,26 @@ const arrayInstrumentations = {
923
977
  });
924
978
  },
925
979
  every(fn, thisArg) {
926
- return apply(this, "every", fn, thisArg);
980
+ return apply(this, "every", fn, thisArg, void 0, arguments);
927
981
  },
928
982
  filter(fn, thisArg) {
929
- return apply(this, "filter", fn, thisArg, (v) => v.map(toReactive));
983
+ return apply(this, "filter", fn, thisArg, (v) => v.map(toReactive), arguments);
930
984
  },
931
985
  find(fn, thisArg) {
932
- return apply(this, "find", fn, thisArg, toReactive);
986
+ return apply(this, "find", fn, thisArg, toReactive, arguments);
933
987
  },
934
988
  findIndex(fn, thisArg) {
935
- return apply(this, "findIndex", fn, thisArg);
989
+ return apply(this, "findIndex", fn, thisArg, void 0, arguments);
936
990
  },
937
991
  findLast(fn, thisArg) {
938
- return apply(this, "findLast", fn, thisArg, toReactive);
992
+ return apply(this, "findLast", fn, thisArg, toReactive, arguments);
939
993
  },
940
994
  findLastIndex(fn, thisArg) {
941
- return apply(this, "findLastIndex", fn, thisArg);
995
+ return apply(this, "findLastIndex", fn, thisArg, void 0, arguments);
942
996
  },
943
997
  // flat, flatMap could benefit from ARRAY_ITERATE but are not straight-forward to implement
944
998
  forEach(fn, thisArg) {
945
- return apply(this, "forEach", fn, thisArg);
999
+ return apply(this, "forEach", fn, thisArg, void 0, arguments);
946
1000
  },
947
1001
  includes(...args) {
948
1002
  return searchProxy(this, "includes", args);
@@ -958,7 +1012,7 @@ const arrayInstrumentations = {
958
1012
  return searchProxy(this, "lastIndexOf", args);
959
1013
  },
960
1014
  map(fn, thisArg) {
961
- return apply(this, "map", fn, thisArg);
1015
+ return apply(this, "map", fn, thisArg, void 0, arguments);
962
1016
  },
963
1017
  pop() {
964
1018
  return noTracking(this, "pop");
@@ -977,7 +1031,7 @@ const arrayInstrumentations = {
977
1031
  },
978
1032
  // slice could use ARRAY_ITERATE but also seems to beg for range tracking
979
1033
  some(fn, thisArg) {
980
- return apply(this, "some", fn, thisArg);
1034
+ return apply(this, "some", fn, thisArg, void 0, arguments);
981
1035
  },
982
1036
  splice(...args) {
983
1037
  return noTracking(this, "splice", args);
@@ -1013,8 +1067,13 @@ function iterator(self, method, wrapValue) {
1013
1067
  }
1014
1068
  return iter;
1015
1069
  }
1016
- function apply(self, method, fn, thisArg, wrappedRetFn) {
1070
+ const arrayProto = Array.prototype;
1071
+ function apply(self, method, fn, thisArg, wrappedRetFn, args) {
1017
1072
  const arr = shallowReadArray(self);
1073
+ let methodFn;
1074
+ if ((methodFn = arr[method]) !== arrayProto[method]) {
1075
+ return methodFn.apply(arr, args);
1076
+ }
1018
1077
  let needsWrap = false;
1019
1078
  let wrappedFn = fn;
1020
1079
  if (arr !== self) {
@@ -1029,7 +1088,7 @@ function apply(self, method, fn, thisArg, wrappedRetFn) {
1029
1088
  };
1030
1089
  }
1031
1090
  }
1032
- const result = arr[method](wrappedFn, thisArg);
1091
+ const result = methodFn.call(arr, wrappedFn, thisArg);
1033
1092
  return needsWrap && wrappedRetFn ? wrappedRetFn(result) : result;
1034
1093
  }
1035
1094
  function reduce(self, method, fn, args) {
@@ -1092,7 +1151,7 @@ class BaseReactiveHandler {
1092
1151
  return isShallow2;
1093
1152
  } else if (key === "__v_raw") {
1094
1153
  if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
1095
- // this means the reciever is a user proxy of the reactive proxy
1154
+ // this means the receiver is a user proxy of the reactive proxy
1096
1155
  Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
1097
1156
  return target;
1098
1157
  }
@@ -1216,9 +1275,7 @@ class ReadonlyReactiveHandler extends BaseReactiveHandler {
1216
1275
  }
1217
1276
  const mutableHandlers = /* @__PURE__ */ new MutableReactiveHandler();
1218
1277
  const readonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler();
1219
- const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(
1220
- true
1221
- );
1278
+ const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(true);
1222
1279
  const shallowReadonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler(true);
1223
1280
 
1224
1281
  const toShallow = (value) => value;
@@ -1713,13 +1770,14 @@ function proxyRefs(objectWithRefs) {
1713
1770
  class CustomRefImpl {
1714
1771
  constructor(factory) {
1715
1772
  this["__v_isRef"] = true;
1773
+ this._value = void 0;
1716
1774
  const dep = this.dep = new Dep();
1717
1775
  const { get, set } = factory(dep.track.bind(dep), dep.trigger.bind(dep));
1718
1776
  this._get = get;
1719
1777
  this._set = set;
1720
1778
  }
1721
1779
  get value() {
1722
- return this._get();
1780
+ return this._value = this._get();
1723
1781
  }
1724
1782
  set value(newVal) {
1725
1783
  this._set(newVal);
@@ -1744,10 +1802,11 @@ class ObjectRefImpl {
1744
1802
  this._key = _key;
1745
1803
  this._defaultValue = _defaultValue;
1746
1804
  this["__v_isRef"] = true;
1805
+ this._value = void 0;
1747
1806
  }
1748
1807
  get value() {
1749
1808
  const val = this._object[this._key];
1750
- return val === void 0 ? this._defaultValue : val;
1809
+ return this._value = val === void 0 ? this._defaultValue : val;
1751
1810
  }
1752
1811
  set value(newVal) {
1753
1812
  this._object[this._key] = newVal;
@@ -1761,9 +1820,10 @@ class GetterRefImpl {
1761
1820
  this._getter = _getter;
1762
1821
  this["__v_isRef"] = true;
1763
1822
  this["__v_isReadonly"] = true;
1823
+ this._value = void 0;
1764
1824
  }
1765
1825
  get value() {
1766
- return this._getter();
1826
+ return this._value = this._getter();
1767
1827
  }
1768
1828
  }
1769
1829
  function toRef(source, key, defaultValue) {
@@ -1797,7 +1857,8 @@ class ComputedRefImpl {
1797
1857
  /**
1798
1858
  * @internal
1799
1859
  */
1800
- this["__v_isRef"] = true;
1860
+ this.__v_isRef = true;
1861
+ // TODO isolatedDeclarations "__v_isReadonly"
1801
1862
  // A computed is also a subscriber that tracks other deps
1802
1863
  /**
1803
1864
  * @internal
@@ -2422,6 +2483,9 @@ function reload(id, newComp) {
2422
2483
  "[HMR] Root or manually mounted instance modified. Full reload required."
2423
2484
  );
2424
2485
  }
2486
+ if (instance.root.ce && instance !== instance.root) {
2487
+ instance.root.ce._removeChildStyle(oldComp);
2488
+ }
2425
2489
  }
2426
2490
  queuePostFlushCb(() => {
2427
2491
  hmrDirtyComponents.clear();
@@ -2501,9 +2565,7 @@ function devtoolsInitApp(app, version) {
2501
2565
  function devtoolsUnmountApp(app) {
2502
2566
  emit$2("app:unmount" /* APP_UNMOUNT */, app);
2503
2567
  }
2504
- const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook(
2505
- "component:added" /* COMPONENT_ADDED */
2506
- );
2568
+ const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook("component:added" /* COMPONENT_ADDED */);
2507
2569
  const devtoolsComponentUpdated = /* @__PURE__ */ createDevtoolsComponentHook("component:updated" /* COMPONENT_UPDATED */);
2508
2570
  const _devtoolsComponentRemoved = /* @__PURE__ */ createDevtoolsComponentHook(
2509
2571
  "component:removed" /* COMPONENT_REMOVED */
@@ -2527,12 +2589,8 @@ function createDevtoolsComponentHook(hook) {
2527
2589
  );
2528
2590
  };
2529
2591
  }
2530
- const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook(
2531
- "perf:start" /* PERFORMANCE_START */
2532
- );
2533
- const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook(
2534
- "perf:end" /* PERFORMANCE_END */
2535
- );
2592
+ const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:start" /* PERFORMANCE_START */);
2593
+ const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:end" /* PERFORMANCE_END */);
2536
2594
  function createDevtoolsPerformanceHook(hook) {
2537
2595
  return (component, type, time) => {
2538
2596
  emit$2(hook, component.appContext.app, component.uid, component, type, time);
@@ -3966,6 +4024,7 @@ const logMismatchError = () => {
3966
4024
  const isSVGContainer = (container) => container.namespaceURI.includes("svg") && container.tagName !== "foreignObject";
3967
4025
  const isMathMLContainer = (container) => container.namespaceURI.includes("MathML");
3968
4026
  const getContainerType = (container) => {
4027
+ if (container.nodeType !== 1) return void 0;
3969
4028
  if (isSVGContainer(container)) return "svg";
3970
4029
  if (isMathMLContainer(container)) return "mathml";
3971
4030
  return void 0;
@@ -4241,6 +4300,7 @@ Server rendered element contains more child nodes than client vdom.`
4241
4300
  }
4242
4301
  if (props) {
4243
4302
  {
4303
+ const isCustomElement = el.tagName.includes("-");
4244
4304
  for (const key in props) {
4245
4305
  if (// #11189 skip if this node has directives that have created hooks
4246
4306
  // as it could have mutated the DOM in any possible way
@@ -4248,7 +4308,7 @@ Server rendered element contains more child nodes than client vdom.`
4248
4308
  logMismatchError();
4249
4309
  }
4250
4310
  if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
4251
- key[0] === ".") {
4311
+ key[0] === "." || isCustomElement) {
4252
4312
  patchProp(el, key, null, props[key], void 0, parentComponent);
4253
4313
  }
4254
4314
  }
@@ -4573,24 +4633,19 @@ function isMismatchAllowed(el, allowedType) {
4573
4633
  }
4574
4634
  }
4575
4635
 
4576
- const hydrateOnIdle = () => (hydrate) => {
4577
- const id = requestIdleCallback(hydrate);
4636
+ const hydrateOnIdle = (timeout = 1e4) => (hydrate) => {
4637
+ const id = requestIdleCallback(hydrate, { timeout });
4578
4638
  return () => cancelIdleCallback(id);
4579
4639
  };
4580
- const hydrateOnVisible = (margin = 0) => (hydrate, forEach) => {
4581
- const ob = new IntersectionObserver(
4582
- (entries) => {
4583
- for (const e of entries) {
4584
- if (!e.isIntersecting) continue;
4585
- ob.disconnect();
4586
- hydrate();
4587
- break;
4588
- }
4589
- },
4590
- {
4591
- rootMargin: isString(margin) ? margin : margin + "px"
4640
+ const hydrateOnVisible = (opts) => (hydrate, forEach) => {
4641
+ const ob = new IntersectionObserver((entries) => {
4642
+ for (const e of entries) {
4643
+ if (!e.isIntersecting) continue;
4644
+ ob.disconnect();
4645
+ hydrate();
4646
+ break;
4592
4647
  }
4593
- );
4648
+ }, opts);
4594
4649
  forEach((el) => ob.observe(el));
4595
4650
  return () => ob.disconnect();
4596
4651
  };
@@ -4898,14 +4953,14 @@ const KeepAliveImpl = {
4898
4953
  function pruneCache(filter) {
4899
4954
  cache.forEach((vnode, key) => {
4900
4955
  const name = getComponentName(vnode.type);
4901
- if (name && (!filter || !filter(name))) {
4956
+ if (name && !filter(name)) {
4902
4957
  pruneCacheEntry(key);
4903
4958
  }
4904
4959
  });
4905
4960
  }
4906
4961
  function pruneCacheEntry(key) {
4907
4962
  const cached = cache.get(key);
4908
- if (!current || !isSameVNodeType(cached, current)) {
4963
+ if (cached && (!current || !isSameVNodeType(cached, current))) {
4909
4964
  unmount(cached);
4910
4965
  } else if (current) {
4911
4966
  resetShapeFlag(current);
@@ -4967,6 +5022,10 @@ const KeepAliveImpl = {
4967
5022
  return rawVNode;
4968
5023
  }
4969
5024
  let vnode = getInnerChild(rawVNode);
5025
+ if (vnode.type === Comment) {
5026
+ current = null;
5027
+ return vnode;
5028
+ }
4970
5029
  const comp = vnode.type;
4971
5030
  const name = getComponentName(
4972
5031
  isAsyncWrapper(vnode) ? vnode.type.__asyncResolved || {} : comp
@@ -5016,6 +5075,7 @@ function matches(pattern, name) {
5016
5075
  } else if (isString(pattern)) {
5017
5076
  return pattern.split(",").includes(name);
5018
5077
  } else if (isRegExp(pattern)) {
5078
+ pattern.lastIndex = 0;
5019
5079
  return pattern.test(name);
5020
5080
  }
5021
5081
  return false;
@@ -5099,17 +5159,19 @@ const createHook = (lifecycle) => (hook, target = currentInstance) => {
5099
5159
  };
5100
5160
  const onBeforeMount = createHook("bm");
5101
5161
  const onMounted = createHook("m");
5102
- const onBeforeUpdate = createHook("bu");
5162
+ const onBeforeUpdate = createHook(
5163
+ "bu"
5164
+ );
5103
5165
  const onUpdated = createHook("u");
5104
- const onBeforeUnmount = createHook("bum");
5105
- const onUnmounted = createHook("um");
5106
- const onServerPrefetch = createHook("sp");
5107
- const onRenderTriggered = createHook(
5108
- "rtg"
5166
+ const onBeforeUnmount = createHook(
5167
+ "bum"
5109
5168
  );
5110
- const onRenderTracked = createHook(
5111
- "rtc"
5169
+ const onUnmounted = createHook("um");
5170
+ const onServerPrefetch = createHook(
5171
+ "sp"
5112
5172
  );
5173
+ const onRenderTriggered = createHook("rtg");
5174
+ const onRenderTracked = createHook("rtc");
5113
5175
  function onErrorCaptured(hook, target = currentInstance) {
5114
5176
  injectHook("ec", hook, target);
5115
5177
  }
@@ -5523,9 +5585,14 @@ function createSlots(slots, dynamicSlots) {
5523
5585
  }
5524
5586
 
5525
5587
  function renderSlot(slots, name, props = {}, fallback, noSlotted) {
5526
- if (currentRenderingInstance.isCE || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.isCE) {
5588
+ if (currentRenderingInstance.ce || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.ce) {
5527
5589
  if (name !== "default") props.name = name;
5528
- return createVNode("slot", props, fallback && fallback());
5590
+ return openBlock(), createBlock(
5591
+ Fragment,
5592
+ null,
5593
+ [createVNode("slot", props, fallback && fallback())],
5594
+ 64
5595
+ );
5529
5596
  }
5530
5597
  let slot = slots[name];
5531
5598
  if (slot && slot.length > 1) {
@@ -5827,6 +5894,7 @@ const publicPropertiesMap = (
5827
5894
  $refs: (i) => shallowReadonly(i.refs) ,
5828
5895
  $parent: (i) => getPublicInstance(i.parent),
5829
5896
  $root: (i) => getPublicInstance(i.root),
5897
+ $host: (i) => i.ce,
5830
5898
  $emit: (i) => i.emit,
5831
5899
  $options: (i) => resolveMergedOptions(i) ,
5832
5900
  $forceUpdate: (i) => i.f || (i.f = () => {
@@ -5987,29 +6055,25 @@ const PublicInstanceProxyHandlers = {
5987
6055
  return Reflect.ownKeys(target);
5988
6056
  };
5989
6057
  }
5990
- const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend(
5991
- {},
5992
- PublicInstanceProxyHandlers,
5993
- {
5994
- get(target, key) {
5995
- if (key === Symbol.unscopables) {
5996
- return;
5997
- }
5998
- return PublicInstanceProxyHandlers.get(target, key, target);
5999
- },
6000
- has(_, key) {
6001
- const has = key[0] !== "_" && !isGloballyAllowed(key);
6002
- if (!has && PublicInstanceProxyHandlers.has(_, key)) {
6003
- warn$1(
6004
- `Property ${JSON.stringify(
6005
- key
6006
- )} should not start with _ which is a reserved prefix for Vue internals.`
6007
- );
6008
- }
6009
- return has;
6058
+ const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend({}, PublicInstanceProxyHandlers, {
6059
+ get(target, key) {
6060
+ if (key === Symbol.unscopables) {
6061
+ return;
6010
6062
  }
6063
+ return PublicInstanceProxyHandlers.get(target, key, target);
6064
+ },
6065
+ has(_, key) {
6066
+ const has = key[0] !== "_" && !isGloballyAllowed(key);
6067
+ if (!has && PublicInstanceProxyHandlers.has(_, key)) {
6068
+ warn$1(
6069
+ `Property ${JSON.stringify(
6070
+ key
6071
+ )} should not start with _ which is a reserved prefix for Vue internals.`
6072
+ );
6073
+ }
6074
+ return has;
6011
6075
  }
6012
- );
6076
+ });
6013
6077
  function createDevRenderContext(instance) {
6014
6078
  const target = {};
6015
6079
  Object.defineProperty(target, `_`, {
@@ -6696,7 +6760,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
6696
6760
  return vm;
6697
6761
  }
6698
6762
  }
6699
- Vue.version = `2.6.14-compat:${"3.5.0-alpha.5"}`;
6763
+ Vue.version = `2.6.14-compat:${"3.5.0-beta.2"}`;
6700
6764
  Vue.config = singletonApp.config;
6701
6765
  Vue.use = (plugin, ...options) => {
6702
6766
  if (plugin && isFunction(plugin.install)) {
@@ -6969,7 +7033,7 @@ function installCompatMount(app, context, render) {
6969
7033
  /* skip options */
6970
7034
  );
6971
7035
  }
6972
- container.innerHTML = "";
7036
+ container.textContent = "";
6973
7037
  render(vnode, container, namespace);
6974
7038
  if (container instanceof Element) {
6975
7039
  container.removeAttribute("v-cloak");
@@ -7181,7 +7245,7 @@ function createAppAPI(render, hydrate) {
7181
7245
  If you want to mount another app on the same host container, you need to unmount the previous app by calling \`app.unmount()\` first.`
7182
7246
  );
7183
7247
  }
7184
- const vnode = createVNode(rootComponent, rootProps);
7248
+ const vnode = app._ceVNode || createVNode(rootComponent, rootProps);
7185
7249
  vnode.appContext = context;
7186
7250
  if (namespace === true) {
7187
7251
  namespace = "svg";
@@ -7286,7 +7350,7 @@ function provide(key, value) {
7286
7350
  function inject(key, defaultValue, treatDefaultAsFactory = false) {
7287
7351
  const instance = currentInstance || currentRenderingInstance;
7288
7352
  if (instance || currentApp) {
7289
- const provides = instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : currentApp._context.provides;
7353
+ const provides = currentApp ? currentApp._context.provides : instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : void 0;
7290
7354
  if (provides && key in provides) {
7291
7355
  return provides[key];
7292
7356
  } else if (arguments.length > 1) {
@@ -7560,6 +7624,9 @@ function resolvePropValue(options, props, key, value, instance, isAbsent) {
7560
7624
  } else {
7561
7625
  value = defaultValue;
7562
7626
  }
7627
+ if (instance.ce) {
7628
+ instance.ce._setProp(key, value);
7629
+ }
7563
7630
  }
7564
7631
  if (opt[0 /* shouldCast */]) {
7565
7632
  if (isAbsent && !hasDefault) {
@@ -8562,8 +8629,8 @@ function baseCreateRenderer(options, createHydrationFns) {
8562
8629
  const componentUpdateFn = () => {
8563
8630
  if (!instance.isMounted) {
8564
8631
  let vnodeHook;
8565
- const { el, props, type } = initialVNode;
8566
- const { bm, m, parent } = instance;
8632
+ const { el, props } = initialVNode;
8633
+ const { bm, m, parent, root, type } = instance;
8567
8634
  const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);
8568
8635
  toggleRecurse(instance, false);
8569
8636
  if (bm) {
@@ -8609,6 +8676,9 @@ function baseCreateRenderer(options, createHydrationFns) {
8609
8676
  hydrateSubTree();
8610
8677
  }
8611
8678
  } else {
8679
+ if (root.ce) {
8680
+ root.ce._injectChildStyle(type);
8681
+ }
8612
8682
  {
8613
8683
  startMeasure(instance, `render`);
8614
8684
  }
@@ -9312,13 +9382,13 @@ function baseCreateRenderer(options, createHydrationFns) {
9312
9382
  namespace
9313
9383
  );
9314
9384
  }
9385
+ container._vnode = vnode;
9315
9386
  if (!isFlushing) {
9316
9387
  isFlushing = true;
9317
9388
  flushPreFlushCbs();
9318
9389
  flushPostFlushCbs();
9319
9390
  isFlushing = false;
9320
9391
  }
9321
- container._vnode = vnode;
9322
9392
  };
9323
9393
  const internals = {
9324
9394
  p: patch,
@@ -9492,14 +9562,9 @@ function doWatch(source, cb, {
9492
9562
  const _cb = cb;
9493
9563
  cb = (...args) => {
9494
9564
  _cb(...args);
9495
- unwatch();
9565
+ watchHandle();
9496
9566
  };
9497
9567
  }
9498
- if (deep !== void 0 && typeof deep === "number") {
9499
- warn$1(
9500
- `watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.`
9501
- );
9502
- }
9503
9568
  if (!cb) {
9504
9569
  if (immediate !== void 0) {
9505
9570
  warn$1(
@@ -9525,10 +9590,12 @@ function doWatch(source, cb, {
9525
9590
  );
9526
9591
  };
9527
9592
  const instance = currentInstance;
9528
- const reactiveGetter = (source2) => deep === true ? source2 : (
9529
- // for deep: false, only traverse root-level properties
9530
- traverse(source2, deep === false ? 1 : void 0)
9531
- );
9593
+ const reactiveGetter = (source2) => {
9594
+ if (deep) return source2;
9595
+ if (isShallow(source2) || deep === false || deep === 0)
9596
+ return traverse(source2, 1);
9597
+ return traverse(source2);
9598
+ };
9532
9599
  let getter;
9533
9600
  let forceTrigger = false;
9534
9601
  let isMultiSource = false;
@@ -9584,7 +9651,8 @@ function doWatch(source, cb, {
9584
9651
  }
9585
9652
  if (cb && deep) {
9586
9653
  const baseGetter = getter;
9587
- getter = () => traverse(baseGetter());
9654
+ const depth = deep === true ? Infinity : deep;
9655
+ getter = () => traverse(baseGetter(), depth);
9588
9656
  }
9589
9657
  let cleanup;
9590
9658
  let onCleanup = (fn) => {
@@ -9609,7 +9677,12 @@ function doWatch(source, cb, {
9609
9677
  const ctx = useSSRContext();
9610
9678
  ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
9611
9679
  } else {
9612
- return NOOP;
9680
+ const watchHandle2 = () => {
9681
+ };
9682
+ watchHandle2.stop = NOOP;
9683
+ watchHandle2.resume = NOOP;
9684
+ watchHandle2.pause = NOOP;
9685
+ return watchHandle2;
9613
9686
  }
9614
9687
  }
9615
9688
  let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
@@ -9639,7 +9712,6 @@ function doWatch(source, cb, {
9639
9712
  const effect = new ReactiveEffect(getter);
9640
9713
  let scheduler;
9641
9714
  if (flush === "sync") {
9642
- effect.flags |= 64;
9643
9715
  scheduler = job;
9644
9716
  } else if (flush === "post") {
9645
9717
  scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
@@ -9650,12 +9722,15 @@ function doWatch(source, cb, {
9650
9722
  }
9651
9723
  effect.scheduler = scheduler;
9652
9724
  const scope = getCurrentScope();
9653
- const unwatch = () => {
9725
+ const watchHandle = () => {
9654
9726
  effect.stop();
9655
9727
  if (scope) {
9656
9728
  remove(scope.effects, effect);
9657
9729
  }
9658
9730
  };
9731
+ watchHandle.pause = effect.pause.bind(effect);
9732
+ watchHandle.resume = effect.resume.bind(effect);
9733
+ watchHandle.stop = watchHandle;
9659
9734
  {
9660
9735
  effect.onTrack = onTrack;
9661
9736
  effect.onTrigger = onTrigger;
@@ -9674,8 +9749,8 @@ function doWatch(source, cb, {
9674
9749
  } else {
9675
9750
  effect.run();
9676
9751
  }
9677
- if (ssrCleanup) ssrCleanup.push(unwatch);
9678
- return unwatch;
9752
+ if (ssrCleanup) ssrCleanup.push(watchHandle);
9753
+ return watchHandle;
9679
9754
  }
9680
9755
  function instanceWatch(source, value, options) {
9681
9756
  const publicThis = this.proxy;
@@ -9765,7 +9840,8 @@ function useModel(props, name, options = EMPTY_OBJ) {
9765
9840
  return options.get ? options.get(localValue) : localValue;
9766
9841
  },
9767
9842
  set(value) {
9768
- if (!hasChanged(value, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
9843
+ const emittedValue = options.set ? options.set(value) : value;
9844
+ if (!hasChanged(emittedValue, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
9769
9845
  return;
9770
9846
  }
9771
9847
  const rawProps = i.vnode.props;
@@ -9774,7 +9850,6 @@ function useModel(props, name, options = EMPTY_OBJ) {
9774
9850
  localValue = value;
9775
9851
  trigger();
9776
9852
  }
9777
- const emittedValue = options.set ? options.set(value) : value;
9778
9853
  i.emit(`update:${name}`, emittedValue);
9779
9854
  if (hasChanged(value, emittedValue) && hasChanged(value, prevSetValue) && !hasChanged(emittedValue, prevEmittedValue)) {
9780
9855
  trigger();
@@ -9812,9 +9887,9 @@ function emit(instance, event, ...rawArgs) {
9812
9887
  } = instance;
9813
9888
  if (emitsOptions) {
9814
9889
  if (!(event in emitsOptions) && !(event.startsWith("hook:") || event.startsWith(compatModelEventPrefix))) {
9815
- if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
9890
+ if (!propsOptions || !(toHandlerKey(camelize(event)) in propsOptions)) {
9816
9891
  warn$1(
9817
- `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.`
9892
+ `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(camelize(event))}" prop.`
9818
9893
  );
9819
9894
  }
9820
9895
  } else {
@@ -11745,11 +11820,16 @@ function useTemplateRef(key) {
11745
11820
  const r = shallowRef(null);
11746
11821
  if (i) {
11747
11822
  const refs = i.refs === EMPTY_OBJ ? i.refs = {} : i.refs;
11748
- Object.defineProperty(refs, key, {
11749
- enumerable: true,
11750
- get: () => r.value,
11751
- set: (val) => r.value = val
11752
- });
11823
+ let desc;
11824
+ if ((desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable) {
11825
+ warn$1(`useTemplateRef('${key}') already exists.`);
11826
+ } else {
11827
+ Object.defineProperty(refs, key, {
11828
+ enumerable: true,
11829
+ get: () => r.value,
11830
+ set: (val) => r.value = val
11831
+ });
11832
+ }
11753
11833
  } else {
11754
11834
  warn$1(
11755
11835
  `useTemplateRef() is called when there is no active component instance to be associated with.`
@@ -11983,7 +12063,7 @@ function isMemoSame(cached, memo) {
11983
12063
  return true;
11984
12064
  }
11985
12065
 
11986
- const version = "3.5.0-alpha.5";
12066
+ const version = "3.5.0-beta.2";
11987
12067
  const warn = warn$1 ;
11988
12068
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
11989
12069
  const devtools = devtools$1 ;
@@ -11995,7 +12075,8 @@ const _ssrUtils = {
11995
12075
  setCurrentRenderingInstance,
11996
12076
  isVNode: isVNode,
11997
12077
  normalizeVNode,
11998
- getComponentPublicInstance
12078
+ getComponentPublicInstance,
12079
+ ensureValidVNode
11999
12080
  };
12000
12081
  const ssrUtils = _ssrUtils ;
12001
12082
  const resolveFilter = resolveFilter$1 ;
@@ -12009,6 +12090,18 @@ const _compatUtils = {
12009
12090
  const compatUtils = _compatUtils ;
12010
12091
  const DeprecationTypes = DeprecationTypes$1 ;
12011
12092
 
12093
+ let policy = void 0;
12094
+ const tt = typeof window !== "undefined" && window.trustedTypes;
12095
+ if (tt) {
12096
+ try {
12097
+ policy = /* @__PURE__ */ tt.createPolicy("vue", {
12098
+ createHTML: (val) => val
12099
+ });
12100
+ } catch (e) {
12101
+ warn(`Error creating trusted types policy: ${e}`);
12102
+ }
12103
+ }
12104
+ const unsafeToTrustedHTML = policy ? (val) => policy.createHTML(val) : (val) => val;
12012
12105
  const svgNS = "http://www.w3.org/2000/svg";
12013
12106
  const mathmlNS = "http://www.w3.org/1998/Math/MathML";
12014
12107
  const doc = typeof document !== "undefined" ? document : null;
@@ -12056,7 +12149,9 @@ const nodeOps = {
12056
12149
  if (start === end || !(start = start.nextSibling)) break;
12057
12150
  }
12058
12151
  } else {
12059
- templateContainer.innerHTML = namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content;
12152
+ templateContainer.innerHTML = unsafeToTrustedHTML(
12153
+ namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content
12154
+ );
12060
12155
  const template = templateContainer.content;
12061
12156
  if (namespace === "svg" || namespace === "mathml") {
12062
12157
  const wrapper = template.firstChild;
@@ -12463,11 +12558,17 @@ function useCssVars(getter) {
12463
12558
  }
12464
12559
  const setVars = () => {
12465
12560
  const vars = getter(instance.proxy);
12466
- setVarsOnVNode(instance.subTree, vars);
12561
+ if (instance.ce) {
12562
+ setVarsOnNode(instance.ce, vars);
12563
+ } else {
12564
+ setVarsOnVNode(instance.subTree, vars);
12565
+ }
12467
12566
  updateTeleports(vars);
12468
12567
  };
12469
- onMounted(() => {
12568
+ onBeforeMount(() => {
12470
12569
  watchPostEffect(setVars);
12570
+ });
12571
+ onMounted(() => {
12471
12572
  const ob = new MutationObserver(setVars);
12472
12573
  ob.observe(instance.subTree.el.parentNode, { childList: true });
12473
12574
  onUnmounted(() => ob.disconnect());
@@ -12864,16 +12965,24 @@ function shouldSetAsProp(el, key, value, isSVG) {
12864
12965
  if (isNativeOn(key) && isString(value)) {
12865
12966
  return false;
12866
12967
  }
12867
- return key in el;
12968
+ if (key in el) {
12969
+ return true;
12970
+ }
12971
+ if (el._isVueCE && (/[A-Z]/.test(key) || !isString(value))) {
12972
+ return true;
12973
+ }
12974
+ return false;
12868
12975
  }
12869
12976
 
12977
+ const REMOVAL = {};
12870
12978
  /*! #__NO_SIDE_EFFECTS__ */
12871
12979
  // @__NO_SIDE_EFFECTS__
12872
- function defineCustomElement(options, extraOptions, hydrate2) {
12980
+ function defineCustomElement(options, extraOptions, _createApp) {
12873
12981
  const Comp = defineComponent(options, extraOptions);
12982
+ if (isPlainObject(Comp)) extend(Comp, extraOptions);
12874
12983
  class VueCustomElement extends VueElement {
12875
12984
  constructor(initialProps) {
12876
- super(Comp, initialProps, hydrate2);
12985
+ super(Comp, initialProps, _createApp);
12877
12986
  }
12878
12987
  }
12879
12988
  VueCustomElement.def = Comp;
@@ -12881,47 +12990,87 @@ function defineCustomElement(options, extraOptions, hydrate2) {
12881
12990
  }
12882
12991
  /*! #__NO_SIDE_EFFECTS__ */
12883
12992
  const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
12884
- return /* @__PURE__ */ defineCustomElement(options, extraOptions, hydrate);
12993
+ return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
12885
12994
  };
12886
12995
  const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
12887
12996
  };
12888
12997
  class VueElement extends BaseClass {
12889
- constructor(_def, _props = {}, hydrate2) {
12998
+ constructor(_def, _props = {}, _createApp = createApp) {
12890
12999
  super();
12891
13000
  this._def = _def;
12892
13001
  this._props = _props;
13002
+ this._createApp = _createApp;
13003
+ this._isVueCE = true;
12893
13004
  /**
12894
13005
  * @internal
12895
13006
  */
12896
13007
  this._instance = null;
13008
+ /**
13009
+ * @internal
13010
+ */
13011
+ this._app = null;
13012
+ /**
13013
+ * @internal
13014
+ */
13015
+ this._nonce = this._def.nonce;
12897
13016
  this._connected = false;
12898
13017
  this._resolved = false;
12899
13018
  this._numberProps = null;
13019
+ this._styleChildren = /* @__PURE__ */ new WeakSet();
12900
13020
  this._ob = null;
12901
- if (this.shadowRoot && hydrate2) {
12902
- hydrate2(this._createVNode(), this.shadowRoot);
13021
+ if (this.shadowRoot && _createApp !== createApp) {
13022
+ this._root = this.shadowRoot;
12903
13023
  } else {
12904
13024
  if (this.shadowRoot) {
12905
13025
  warn(
12906
13026
  `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
12907
13027
  );
12908
13028
  }
12909
- this.attachShadow({ mode: "open" });
12910
- if (!this._def.__asyncLoader) {
12911
- this._resolveProps(this._def);
13029
+ if (_def.shadowRoot !== false) {
13030
+ this.attachShadow({ mode: "open" });
13031
+ this._root = this.shadowRoot;
13032
+ } else {
13033
+ this._root = this;
12912
13034
  }
12913
13035
  }
13036
+ if (!this._def.__asyncLoader) {
13037
+ this._resolveProps(this._def);
13038
+ }
12914
13039
  }
12915
13040
  connectedCallback() {
13041
+ if (!this.shadowRoot) {
13042
+ this._parseSlots();
13043
+ }
12916
13044
  this._connected = true;
13045
+ let parent = this;
13046
+ while (parent = parent && (parent.parentNode || parent.host)) {
13047
+ if (parent instanceof VueElement) {
13048
+ this._parent = parent;
13049
+ break;
13050
+ }
13051
+ }
12917
13052
  if (!this._instance) {
12918
13053
  if (this._resolved) {
13054
+ this._setParent();
12919
13055
  this._update();
12920
13056
  } else {
12921
- this._resolveDef();
13057
+ if (parent && parent._pendingResolve) {
13058
+ this._pendingResolve = parent._pendingResolve.then(() => {
13059
+ this._pendingResolve = void 0;
13060
+ this._resolveDef();
13061
+ });
13062
+ } else {
13063
+ this._resolveDef();
13064
+ }
12922
13065
  }
12923
13066
  }
12924
13067
  }
13068
+ _setParent(parent = this._parent) {
13069
+ if (parent) {
13070
+ this._instance.parent = parent._instance;
13071
+ this._instance.provides = parent._instance.provides;
13072
+ }
13073
+ }
12925
13074
  disconnectedCallback() {
12926
13075
  this._connected = false;
12927
13076
  nextTick(() => {
@@ -12930,8 +13079,9 @@ class VueElement extends BaseClass {
12930
13079
  this._ob.disconnect();
12931
13080
  this._ob = null;
12932
13081
  }
12933
- render(null, this.shadowRoot);
12934
- this._instance = null;
13082
+ this._app && this._app.unmount();
13083
+ this._instance.ce = void 0;
13084
+ this._app = this._instance = null;
12935
13085
  }
12936
13086
  });
12937
13087
  }
@@ -12939,7 +13089,9 @@ class VueElement extends BaseClass {
12939
13089
  * resolve inner component definition (handle possible async component)
12940
13090
  */
12941
13091
  _resolveDef() {
12942
- this._resolved = true;
13092
+ if (this._pendingResolve) {
13093
+ return;
13094
+ }
12943
13095
  for (let i = 0; i < this.attributes.length; i++) {
12944
13096
  this._setAttr(this.attributes[i].name);
12945
13097
  }
@@ -12950,6 +13102,8 @@ class VueElement extends BaseClass {
12950
13102
  });
12951
13103
  this._ob.observe(this, { attributes: true });
12952
13104
  const resolve = (def, isAsync = false) => {
13105
+ this._resolved = true;
13106
+ this._pendingResolve = void 0;
12953
13107
  const { props, styles } = def;
12954
13108
  let numberProps;
12955
13109
  if (props && !isArray(props)) {
@@ -12967,22 +13121,53 @@ class VueElement extends BaseClass {
12967
13121
  if (isAsync) {
12968
13122
  this._resolveProps(def);
12969
13123
  }
12970
- this._applyStyles(styles);
12971
- this._update();
13124
+ if (this.shadowRoot) {
13125
+ this._applyStyles(styles);
13126
+ } else if (styles) {
13127
+ warn(
13128
+ "Custom element style injection is not supported when using shadowRoot: false"
13129
+ );
13130
+ }
13131
+ this._mount(def);
12972
13132
  };
12973
13133
  const asyncDef = this._def.__asyncLoader;
12974
13134
  if (asyncDef) {
12975
- asyncDef().then((def) => resolve(def, true));
13135
+ this._pendingResolve = asyncDef().then(
13136
+ (def) => resolve(this._def = def, true)
13137
+ );
12976
13138
  } else {
12977
13139
  resolve(this._def);
12978
13140
  }
12979
13141
  }
13142
+ _mount(def) {
13143
+ if (!def.name) {
13144
+ def.name = "VueElement";
13145
+ }
13146
+ this._app = this._createApp(def);
13147
+ if (def.configureApp) {
13148
+ def.configureApp(this._app);
13149
+ }
13150
+ this._app._ceVNode = this._createVNode();
13151
+ this._app.mount(this._root);
13152
+ const exposed = this._instance && this._instance.exposed;
13153
+ if (!exposed) return;
13154
+ for (const key in exposed) {
13155
+ if (!hasOwn(this, key)) {
13156
+ Object.defineProperty(this, key, {
13157
+ // unwrap ref to be consistent with public instance behavior
13158
+ get: () => unref(exposed[key])
13159
+ });
13160
+ } else {
13161
+ warn(`Exposed property "${key}" already exists on custom element.`);
13162
+ }
13163
+ }
13164
+ }
12980
13165
  _resolveProps(def) {
12981
13166
  const { props } = def;
12982
13167
  const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
12983
13168
  for (const key of Object.keys(this)) {
12984
13169
  if (key[0] !== "_" && declaredPropKeys.includes(key)) {
12985
- this._setProp(key, this[key], true, false);
13170
+ this._setProp(key, this[key]);
12986
13171
  }
12987
13172
  }
12988
13173
  for (const key of declaredPropKeys.map(camelize)) {
@@ -12991,18 +13176,20 @@ class VueElement extends BaseClass {
12991
13176
  return this._getProp(key);
12992
13177
  },
12993
13178
  set(val) {
12994
- this._setProp(key, val);
13179
+ this._setProp(key, val, true, true);
12995
13180
  }
12996
13181
  });
12997
13182
  }
12998
13183
  }
12999
13184
  _setAttr(key) {
13000
- let value = this.hasAttribute(key) ? this.getAttribute(key) : void 0;
13185
+ if (key.startsWith("data-v-")) return;
13186
+ const has = this.hasAttribute(key);
13187
+ let value = has ? this.getAttribute(key) : REMOVAL;
13001
13188
  const camelKey = camelize(key);
13002
- if (this._numberProps && this._numberProps[camelKey]) {
13189
+ if (has && this._numberProps && this._numberProps[camelKey]) {
13003
13190
  value = toNumber(value);
13004
13191
  }
13005
- this._setProp(camelKey, value, false);
13192
+ this._setProp(camelKey, value, false, true);
13006
13193
  }
13007
13194
  /**
13008
13195
  * @internal
@@ -13013,9 +13200,13 @@ class VueElement extends BaseClass {
13013
13200
  /**
13014
13201
  * @internal
13015
13202
  */
13016
- _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
13203
+ _setProp(key, val, shouldReflect = true, shouldUpdate = false) {
13017
13204
  if (val !== this._props[key]) {
13018
- this._props[key] = val;
13205
+ if (val === REMOVAL) {
13206
+ delete this._props[key];
13207
+ } else {
13208
+ this._props[key] = val;
13209
+ }
13019
13210
  if (shouldUpdate && this._instance) {
13020
13211
  this._update();
13021
13212
  }
@@ -13031,18 +13222,23 @@ class VueElement extends BaseClass {
13031
13222
  }
13032
13223
  }
13033
13224
  _update() {
13034
- render(this._createVNode(), this.shadowRoot);
13225
+ render(this._createVNode(), this._root);
13035
13226
  }
13036
13227
  _createVNode() {
13037
- const vnode = createVNode(this._def, extend({}, this._props));
13228
+ const baseProps = {};
13229
+ if (!this.shadowRoot) {
13230
+ baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
13231
+ }
13232
+ const vnode = createVNode(this._def, extend(baseProps, this._props));
13038
13233
  if (!this._instance) {
13039
13234
  vnode.ce = (instance) => {
13040
13235
  this._instance = instance;
13236
+ instance.ce = this;
13041
13237
  instance.isCE = true;
13042
13238
  {
13043
13239
  instance.ceReload = (newStyles) => {
13044
13240
  if (this._styles) {
13045
- this._styles.forEach((s) => this.shadowRoot.removeChild(s));
13241
+ this._styles.forEach((s) => this._root.removeChild(s));
13046
13242
  this._styles.length = 0;
13047
13243
  }
13048
13244
  this._applyStyles(newStyles);
@@ -13052,9 +13248,10 @@ class VueElement extends BaseClass {
13052
13248
  }
13053
13249
  const dispatch = (event, args) => {
13054
13250
  this.dispatchEvent(
13055
- new CustomEvent(event, {
13056
- detail: args
13057
- })
13251
+ new CustomEvent(
13252
+ event,
13253
+ isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
13254
+ )
13058
13255
  );
13059
13256
  };
13060
13257
  instance.emit = (event, ...args) => {
@@ -13063,31 +13260,127 @@ class VueElement extends BaseClass {
13063
13260
  dispatch(hyphenate(event), args);
13064
13261
  }
13065
13262
  };
13066
- let parent = this;
13067
- while (parent = parent && (parent.parentNode || parent.host)) {
13068
- if (parent instanceof VueElement) {
13069
- instance.parent = parent._instance;
13070
- instance.provides = parent._instance.provides;
13071
- break;
13072
- }
13073
- }
13263
+ this._setParent();
13074
13264
  };
13075
13265
  }
13076
13266
  return vnode;
13077
13267
  }
13078
- _applyStyles(styles) {
13079
- if (styles) {
13080
- styles.forEach((css) => {
13081
- const s = document.createElement("style");
13082
- s.textContent = css;
13083
- this.shadowRoot.appendChild(s);
13084
- {
13268
+ _applyStyles(styles, owner) {
13269
+ if (!styles) return;
13270
+ if (owner) {
13271
+ if (owner === this._def || this._styleChildren.has(owner)) {
13272
+ return;
13273
+ }
13274
+ this._styleChildren.add(owner);
13275
+ }
13276
+ const nonce = this._nonce;
13277
+ for (let i = styles.length - 1; i >= 0; i--) {
13278
+ const s = document.createElement("style");
13279
+ if (nonce) s.setAttribute("nonce", nonce);
13280
+ s.textContent = styles[i];
13281
+ this.shadowRoot.prepend(s);
13282
+ {
13283
+ if (owner) {
13284
+ if (owner.__hmrId) {
13285
+ if (!this._childStyles) this._childStyles = /* @__PURE__ */ new Map();
13286
+ let entry = this._childStyles.get(owner.__hmrId);
13287
+ if (!entry) {
13288
+ this._childStyles.set(owner.__hmrId, entry = []);
13289
+ }
13290
+ entry.push(s);
13291
+ }
13292
+ } else {
13085
13293
  (this._styles || (this._styles = [])).push(s);
13086
13294
  }
13087
- });
13295
+ }
13296
+ }
13297
+ }
13298
+ /**
13299
+ * Only called when shaddowRoot is false
13300
+ */
13301
+ _parseSlots() {
13302
+ const slots = this._slots = {};
13303
+ let n;
13304
+ while (n = this.firstChild) {
13305
+ const slotName = n.nodeType === 1 && n.getAttribute("slot") || "default";
13306
+ (slots[slotName] || (slots[slotName] = [])).push(n);
13307
+ this.removeChild(n);
13308
+ }
13309
+ }
13310
+ /**
13311
+ * Only called when shaddowRoot is false
13312
+ */
13313
+ _renderSlots() {
13314
+ const outlets = this.querySelectorAll("slot");
13315
+ const scopeId = this._instance.type.__scopeId;
13316
+ for (let i = 0; i < outlets.length; i++) {
13317
+ const o = outlets[i];
13318
+ const slotName = o.getAttribute("name") || "default";
13319
+ const content = this._slots[slotName];
13320
+ const parent = o.parentNode;
13321
+ if (content) {
13322
+ for (const n of content) {
13323
+ if (scopeId && n.nodeType === 1) {
13324
+ const id = scopeId + "-s";
13325
+ const walker = document.createTreeWalker(n, 1);
13326
+ n.setAttribute(id, "");
13327
+ let child;
13328
+ while (child = walker.nextNode()) {
13329
+ child.setAttribute(id, "");
13330
+ }
13331
+ }
13332
+ parent.insertBefore(n, o);
13333
+ }
13334
+ } else {
13335
+ while (o.firstChild) parent.insertBefore(o.firstChild, o);
13336
+ }
13337
+ parent.removeChild(o);
13338
+ }
13339
+ }
13340
+ /**
13341
+ * @internal
13342
+ */
13343
+ _injectChildStyle(comp) {
13344
+ this._applyStyles(comp.styles, comp);
13345
+ }
13346
+ /**
13347
+ * @internal
13348
+ */
13349
+ _removeChildStyle(comp) {
13350
+ {
13351
+ this._styleChildren.delete(comp);
13352
+ if (this._childStyles && comp.__hmrId) {
13353
+ const oldStyles = this._childStyles.get(comp.__hmrId);
13354
+ if (oldStyles) {
13355
+ oldStyles.forEach((s) => this._root.removeChild(s));
13356
+ oldStyles.length = 0;
13357
+ }
13358
+ }
13088
13359
  }
13089
13360
  }
13090
13361
  }
13362
+ function useHost(caller) {
13363
+ const instance = getCurrentInstance();
13364
+ const el = instance && instance.ce;
13365
+ if (el) {
13366
+ return el;
13367
+ } else {
13368
+ if (!instance) {
13369
+ warn(
13370
+ `${caller || "useHost"} called without an active component instance.`
13371
+ );
13372
+ } else {
13373
+ warn(
13374
+ `${caller || "useHost"} can only be used in components defined via defineCustomElement.`
13375
+ );
13376
+ }
13377
+ }
13378
+ return null;
13379
+ }
13380
+ function useShadowRoot() {
13381
+ const el = useHost("useShadowRoot") ;
13382
+ return el && el.shadowRoot;
13383
+ }
13091
13384
 
13092
13385
  function useCssModule(name = "$style") {
13093
13386
  {
@@ -13645,7 +13938,7 @@ const createApp = (...args) => {
13645
13938
  const component = app._component;
13646
13939
  if (!isFunction(component) && !component.render && !component.template) {
13647
13940
  component.template = container.innerHTML;
13648
- {
13941
+ if (container.nodeType === 1) {
13649
13942
  for (let i = 0; i < container.attributes.length; i++) {
13650
13943
  const attr = container.attributes[i];
13651
13944
  if (attr.name !== "v-cloak" && /^(v-|:|@)/.test(attr.name)) {
@@ -13658,7 +13951,9 @@ const createApp = (...args) => {
13658
13951
  }
13659
13952
  }
13660
13953
  }
13661
- container.innerHTML = "";
13954
+ if (container.nodeType === 1) {
13955
+ container.textContent = "";
13956
+ }
13662
13957
  const proxy = mount(container, false, resolveRootNamespace(container));
13663
13958
  if (container instanceof Element) {
13664
13959
  container.removeAttribute("v-cloak");
@@ -13892,9 +14187,11 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
13892
14187
  useAttrs: useAttrs,
13893
14188
  useCssModule: useCssModule,
13894
14189
  useCssVars: useCssVars,
14190
+ useHost: useHost,
13895
14191
  useId: useId,
13896
14192
  useModel: useModel,
13897
14193
  useSSRContext: useSSRContext,
14194
+ useShadowRoot: useShadowRoot,
13898
14195
  useSlots: useSlots,
13899
14196
  useTemplateRef: useTemplateRef,
13900
14197
  useTransitionState: useTransitionState,
@@ -13961,6 +14258,6 @@ Vue.compile = () => {
13961
14258
  }
13962
14259
  };
13963
14260
 
13964
- const { configureCompat } = Vue;
14261
+ const configureCompat = Vue.configureCompat;
13965
14262
 
13966
- export { BaseTransition, BaseTransitionPropsValidators, Comment, DeprecationTypes, EffectScope, ErrorCodes, ErrorTypeStrings, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, TrackOpTypes, Transition, TransitionGroup, TriggerOpTypes, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, computed, configureCompat, createApp, createBlock, createCommentVNode, createElementBlock, createBaseVNode as createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, Vue as default, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineModel, defineOptions, defineProps, defineSSRCustomElement, defineSlots, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hasInjectionContext, hydrate, hydrateOnIdle, hydrateOnInteraction, hydrateOnMediaQuery, hydrateOnVisible, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toValue, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useId, useModel, useSSRContext, useSlots, useTemplateRef, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId };
14263
+ export { BaseTransition, BaseTransitionPropsValidators, Comment, DeprecationTypes, EffectScope, ErrorCodes, ErrorTypeStrings, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, TrackOpTypes, Transition, TransitionGroup, TriggerOpTypes, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, computed, configureCompat, createApp, createBlock, createCommentVNode, createElementBlock, createBaseVNode as createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, Vue as default, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineModel, defineOptions, defineProps, defineSSRCustomElement, defineSlots, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hasInjectionContext, hydrate, hydrateOnIdle, hydrateOnInteraction, hydrateOnMediaQuery, hydrateOnVisible, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toValue, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useHost, useId, useModel, useSSRContext, useShadowRoot, useSlots, useTemplateRef, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId };