@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(!!(process.env.NODE_ENV !== "production") ? "Object iterate" : "");
804
- const MAP_KEY_ITERATE_KEY = Symbol(!!(process.env.NODE_ENV !== "production") ? "Map keys iterate" : "");
805
- const ARRAY_ITERATE_KEY = Symbol(!!(process.env.NODE_ENV !== "production") ? "Array iterate" : "");
851
+ const ITERATE_KEY = Symbol(
852
+ !!(process.env.NODE_ENV !== "production") ? "Object iterate" : ""
853
+ );
854
+ const MAP_KEY_ITERATE_KEY = Symbol(
855
+ !!(process.env.NODE_ENV !== "production") ? "Map keys iterate" : ""
856
+ );
857
+ const ARRAY_ITERATE_KEY = Symbol(
858
+ !!(process.env.NODE_ENV !== "production") ? "Array iterate" : ""
859
+ );
806
860
  function track(target, type, key) {
807
861
  if (shouldTrack && activeSub) {
808
862
  let depsMap = targetMap.get(target);
@@ -927,26 +981,26 @@ const arrayInstrumentations = {
927
981
  });
928
982
  },
929
983
  every(fn, thisArg) {
930
- return apply(this, "every", fn, thisArg);
984
+ return apply(this, "every", fn, thisArg, void 0, arguments);
931
985
  },
932
986
  filter(fn, thisArg) {
933
- return apply(this, "filter", fn, thisArg, (v) => v.map(toReactive));
987
+ return apply(this, "filter", fn, thisArg, (v) => v.map(toReactive), arguments);
934
988
  },
935
989
  find(fn, thisArg) {
936
- return apply(this, "find", fn, thisArg, toReactive);
990
+ return apply(this, "find", fn, thisArg, toReactive, arguments);
937
991
  },
938
992
  findIndex(fn, thisArg) {
939
- return apply(this, "findIndex", fn, thisArg);
993
+ return apply(this, "findIndex", fn, thisArg, void 0, arguments);
940
994
  },
941
995
  findLast(fn, thisArg) {
942
- return apply(this, "findLast", fn, thisArg, toReactive);
996
+ return apply(this, "findLast", fn, thisArg, toReactive, arguments);
943
997
  },
944
998
  findLastIndex(fn, thisArg) {
945
- return apply(this, "findLastIndex", fn, thisArg);
999
+ return apply(this, "findLastIndex", fn, thisArg, void 0, arguments);
946
1000
  },
947
1001
  // flat, flatMap could benefit from ARRAY_ITERATE but are not straight-forward to implement
948
1002
  forEach(fn, thisArg) {
949
- return apply(this, "forEach", fn, thisArg);
1003
+ return apply(this, "forEach", fn, thisArg, void 0, arguments);
950
1004
  },
951
1005
  includes(...args) {
952
1006
  return searchProxy(this, "includes", args);
@@ -962,7 +1016,7 @@ const arrayInstrumentations = {
962
1016
  return searchProxy(this, "lastIndexOf", args);
963
1017
  },
964
1018
  map(fn, thisArg) {
965
- return apply(this, "map", fn, thisArg);
1019
+ return apply(this, "map", fn, thisArg, void 0, arguments);
966
1020
  },
967
1021
  pop() {
968
1022
  return noTracking(this, "pop");
@@ -981,7 +1035,7 @@ const arrayInstrumentations = {
981
1035
  },
982
1036
  // slice could use ARRAY_ITERATE but also seems to beg for range tracking
983
1037
  some(fn, thisArg) {
984
- return apply(this, "some", fn, thisArg);
1038
+ return apply(this, "some", fn, thisArg, void 0, arguments);
985
1039
  },
986
1040
  splice(...args) {
987
1041
  return noTracking(this, "splice", args);
@@ -1017,8 +1071,13 @@ function iterator(self, method, wrapValue) {
1017
1071
  }
1018
1072
  return iter;
1019
1073
  }
1020
- function apply(self, method, fn, thisArg, wrappedRetFn) {
1074
+ const arrayProto = Array.prototype;
1075
+ function apply(self, method, fn, thisArg, wrappedRetFn, args) {
1021
1076
  const arr = shallowReadArray(self);
1077
+ let methodFn;
1078
+ if ((methodFn = arr[method]) !== arrayProto[method]) {
1079
+ return methodFn.apply(arr, args);
1080
+ }
1022
1081
  let needsWrap = false;
1023
1082
  let wrappedFn = fn;
1024
1083
  if (arr !== self) {
@@ -1033,7 +1092,7 @@ function apply(self, method, fn, thisArg, wrappedRetFn) {
1033
1092
  };
1034
1093
  }
1035
1094
  }
1036
- const result = arr[method](wrappedFn, thisArg);
1095
+ const result = methodFn.call(arr, wrappedFn, thisArg);
1037
1096
  return needsWrap && wrappedRetFn ? wrappedRetFn(result) : result;
1038
1097
  }
1039
1098
  function reduce(self, method, fn, args) {
@@ -1096,7 +1155,7 @@ class BaseReactiveHandler {
1096
1155
  return isShallow2;
1097
1156
  } else if (key === "__v_raw") {
1098
1157
  if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
1099
- // this means the reciever is a user proxy of the reactive proxy
1158
+ // this means the receiver is a user proxy of the reactive proxy
1100
1159
  Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
1101
1160
  return target;
1102
1161
  }
@@ -1220,9 +1279,7 @@ class ReadonlyReactiveHandler extends BaseReactiveHandler {
1220
1279
  }
1221
1280
  const mutableHandlers = /* @__PURE__ */ new MutableReactiveHandler();
1222
1281
  const readonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler();
1223
- const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(
1224
- true
1225
- );
1282
+ const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(true);
1226
1283
  const shallowReadonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler(true);
1227
1284
 
1228
1285
  const toShallow = (value) => value;
@@ -1723,13 +1780,14 @@ function proxyRefs(objectWithRefs) {
1723
1780
  class CustomRefImpl {
1724
1781
  constructor(factory) {
1725
1782
  this["__v_isRef"] = true;
1783
+ this._value = void 0;
1726
1784
  const dep = this.dep = new Dep();
1727
1785
  const { get, set } = factory(dep.track.bind(dep), dep.trigger.bind(dep));
1728
1786
  this._get = get;
1729
1787
  this._set = set;
1730
1788
  }
1731
1789
  get value() {
1732
- return this._get();
1790
+ return this._value = this._get();
1733
1791
  }
1734
1792
  set value(newVal) {
1735
1793
  this._set(newVal);
@@ -1754,10 +1812,11 @@ class ObjectRefImpl {
1754
1812
  this._key = _key;
1755
1813
  this._defaultValue = _defaultValue;
1756
1814
  this["__v_isRef"] = true;
1815
+ this._value = void 0;
1757
1816
  }
1758
1817
  get value() {
1759
1818
  const val = this._object[this._key];
1760
- return val === void 0 ? this._defaultValue : val;
1819
+ return this._value = val === void 0 ? this._defaultValue : val;
1761
1820
  }
1762
1821
  set value(newVal) {
1763
1822
  this._object[this._key] = newVal;
@@ -1771,9 +1830,10 @@ class GetterRefImpl {
1771
1830
  this._getter = _getter;
1772
1831
  this["__v_isRef"] = true;
1773
1832
  this["__v_isReadonly"] = true;
1833
+ this._value = void 0;
1774
1834
  }
1775
1835
  get value() {
1776
- return this._getter();
1836
+ return this._value = this._getter();
1777
1837
  }
1778
1838
  }
1779
1839
  function toRef(source, key, defaultValue) {
@@ -1807,7 +1867,8 @@ class ComputedRefImpl {
1807
1867
  /**
1808
1868
  * @internal
1809
1869
  */
1810
- this["__v_isRef"] = true;
1870
+ this.__v_isRef = true;
1871
+ // TODO isolatedDeclarations "__v_isReadonly"
1811
1872
  // A computed is also a subscriber that tracks other deps
1812
1873
  /**
1813
1874
  * @internal
@@ -2437,6 +2498,9 @@ function reload(id, newComp) {
2437
2498
  "[HMR] Root or manually mounted instance modified. Full reload required."
2438
2499
  );
2439
2500
  }
2501
+ if (instance.root.ce && instance !== instance.root) {
2502
+ instance.root.ce._removeChildStyle(oldComp);
2503
+ }
2440
2504
  }
2441
2505
  queuePostFlushCb(() => {
2442
2506
  hmrDirtyComponents.clear();
@@ -2516,9 +2580,7 @@ function devtoolsInitApp(app, version) {
2516
2580
  function devtoolsUnmountApp(app) {
2517
2581
  emit$2("app:unmount" /* APP_UNMOUNT */, app);
2518
2582
  }
2519
- const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook(
2520
- "component:added" /* COMPONENT_ADDED */
2521
- );
2583
+ const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook("component:added" /* COMPONENT_ADDED */);
2522
2584
  const devtoolsComponentUpdated = /* @__PURE__ */ createDevtoolsComponentHook("component:updated" /* COMPONENT_UPDATED */);
2523
2585
  const _devtoolsComponentRemoved = /* @__PURE__ */ createDevtoolsComponentHook(
2524
2586
  "component:removed" /* COMPONENT_REMOVED */
@@ -2542,12 +2604,8 @@ function createDevtoolsComponentHook(hook) {
2542
2604
  );
2543
2605
  };
2544
2606
  }
2545
- const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook(
2546
- "perf:start" /* PERFORMANCE_START */
2547
- );
2548
- const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook(
2549
- "perf:end" /* PERFORMANCE_END */
2550
- );
2607
+ const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:start" /* PERFORMANCE_START */);
2608
+ const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:end" /* PERFORMANCE_END */);
2551
2609
  function createDevtoolsPerformanceHook(hook) {
2552
2610
  return (component, type, time) => {
2553
2611
  emit$2(hook, component.appContext.app, component.uid, component, type, time);
@@ -3985,6 +4043,7 @@ const logMismatchError = () => {
3985
4043
  const isSVGContainer = (container) => container.namespaceURI.includes("svg") && container.tagName !== "foreignObject";
3986
4044
  const isMathMLContainer = (container) => container.namespaceURI.includes("MathML");
3987
4045
  const getContainerType = (container) => {
4046
+ if (container.nodeType !== 1) return void 0;
3988
4047
  if (isSVGContainer(container)) return "svg";
3989
4048
  if (isMathMLContainer(container)) return "mathml";
3990
4049
  return void 0;
@@ -4260,6 +4319,7 @@ Server rendered element contains more child nodes than client vdom.`
4260
4319
  }
4261
4320
  if (props) {
4262
4321
  if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ || forcePatch || !optimized || patchFlag & (16 | 32)) {
4322
+ const isCustomElement = el.tagName.includes("-");
4263
4323
  for (const key in props) {
4264
4324
  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && // #11189 skip if this node has directives that have created hooks
4265
4325
  // as it could have mutated the DOM in any possible way
@@ -4267,7 +4327,7 @@ Server rendered element contains more child nodes than client vdom.`
4267
4327
  logMismatchError();
4268
4328
  }
4269
4329
  if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
4270
- key[0] === ".") {
4330
+ key[0] === "." || isCustomElement) {
4271
4331
  patchProp(el, key, null, props[key], void 0, parentComponent);
4272
4332
  }
4273
4333
  }
@@ -4603,24 +4663,19 @@ function isMismatchAllowed(el, allowedType) {
4603
4663
  }
4604
4664
  }
4605
4665
 
4606
- const hydrateOnIdle = () => (hydrate) => {
4607
- const id = requestIdleCallback(hydrate);
4666
+ const hydrateOnIdle = (timeout = 1e4) => (hydrate) => {
4667
+ const id = requestIdleCallback(hydrate, { timeout });
4608
4668
  return () => cancelIdleCallback(id);
4609
4669
  };
4610
- const hydrateOnVisible = (margin = 0) => (hydrate, forEach) => {
4611
- const ob = new IntersectionObserver(
4612
- (entries) => {
4613
- for (const e of entries) {
4614
- if (!e.isIntersecting) continue;
4615
- ob.disconnect();
4616
- hydrate();
4617
- break;
4618
- }
4619
- },
4620
- {
4621
- rootMargin: isString(margin) ? margin : margin + "px"
4670
+ const hydrateOnVisible = (opts) => (hydrate, forEach) => {
4671
+ const ob = new IntersectionObserver((entries) => {
4672
+ for (const e of entries) {
4673
+ if (!e.isIntersecting) continue;
4674
+ ob.disconnect();
4675
+ hydrate();
4676
+ break;
4622
4677
  }
4623
- );
4678
+ }, opts);
4624
4679
  forEach((el) => ob.observe(el));
4625
4680
  return () => ob.disconnect();
4626
4681
  };
@@ -4928,14 +4983,14 @@ const KeepAliveImpl = {
4928
4983
  function pruneCache(filter) {
4929
4984
  cache.forEach((vnode, key) => {
4930
4985
  const name = getComponentName(vnode.type);
4931
- if (name && (!filter || !filter(name))) {
4986
+ if (name && !filter(name)) {
4932
4987
  pruneCacheEntry(key);
4933
4988
  }
4934
4989
  });
4935
4990
  }
4936
4991
  function pruneCacheEntry(key) {
4937
4992
  const cached = cache.get(key);
4938
- if (!current || !isSameVNodeType(cached, current)) {
4993
+ if (cached && (!current || !isSameVNodeType(cached, current))) {
4939
4994
  unmount(cached);
4940
4995
  } else if (current) {
4941
4996
  resetShapeFlag(current);
@@ -4997,6 +5052,10 @@ const KeepAliveImpl = {
4997
5052
  return rawVNode;
4998
5053
  }
4999
5054
  let vnode = getInnerChild(rawVNode);
5055
+ if (vnode.type === Comment) {
5056
+ current = null;
5057
+ return vnode;
5058
+ }
5000
5059
  const comp = vnode.type;
5001
5060
  const name = getComponentName(
5002
5061
  isAsyncWrapper(vnode) ? vnode.type.__asyncResolved || {} : comp
@@ -5046,6 +5105,7 @@ function matches(pattern, name) {
5046
5105
  } else if (isString(pattern)) {
5047
5106
  return pattern.split(",").includes(name);
5048
5107
  } else if (isRegExp(pattern)) {
5108
+ pattern.lastIndex = 0;
5049
5109
  return pattern.test(name);
5050
5110
  }
5051
5111
  return false;
@@ -5129,17 +5189,19 @@ const createHook = (lifecycle) => (hook, target = currentInstance) => {
5129
5189
  };
5130
5190
  const onBeforeMount = createHook("bm");
5131
5191
  const onMounted = createHook("m");
5132
- const onBeforeUpdate = createHook("bu");
5192
+ const onBeforeUpdate = createHook(
5193
+ "bu"
5194
+ );
5133
5195
  const onUpdated = createHook("u");
5134
- const onBeforeUnmount = createHook("bum");
5135
- const onUnmounted = createHook("um");
5136
- const onServerPrefetch = createHook("sp");
5137
- const onRenderTriggered = createHook(
5138
- "rtg"
5196
+ const onBeforeUnmount = createHook(
5197
+ "bum"
5139
5198
  );
5140
- const onRenderTracked = createHook(
5141
- "rtc"
5199
+ const onUnmounted = createHook("um");
5200
+ const onServerPrefetch = createHook(
5201
+ "sp"
5142
5202
  );
5203
+ const onRenderTriggered = createHook("rtg");
5204
+ const onRenderTracked = createHook("rtc");
5143
5205
  function onErrorCaptured(hook, target = currentInstance) {
5144
5206
  injectHook("ec", hook, target);
5145
5207
  }
@@ -5553,9 +5615,14 @@ function createSlots(slots, dynamicSlots) {
5553
5615
  }
5554
5616
 
5555
5617
  function renderSlot(slots, name, props = {}, fallback, noSlotted) {
5556
- if (currentRenderingInstance.isCE || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.isCE) {
5618
+ if (currentRenderingInstance.ce || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.ce) {
5557
5619
  if (name !== "default") props.name = name;
5558
- return createVNode("slot", props, fallback && fallback());
5620
+ return openBlock(), createBlock(
5621
+ Fragment,
5622
+ null,
5623
+ [createVNode("slot", props, fallback && fallback())],
5624
+ 64
5625
+ );
5559
5626
  }
5560
5627
  let slot = slots[name];
5561
5628
  if (!!(process.env.NODE_ENV !== "production") && slot && slot.length > 1) {
@@ -5857,6 +5924,7 @@ const publicPropertiesMap = (
5857
5924
  $refs: (i) => !!(process.env.NODE_ENV !== "production") ? shallowReadonly(i.refs) : i.refs,
5858
5925
  $parent: (i) => getPublicInstance(i.parent),
5859
5926
  $root: (i) => getPublicInstance(i.root),
5927
+ $host: (i) => i.ce,
5860
5928
  $emit: (i) => i.emit,
5861
5929
  $options: (i) => __VUE_OPTIONS_API__ ? resolveMergedOptions(i) : i.type,
5862
5930
  $forceUpdate: (i) => i.f || (i.f = () => {
@@ -6017,29 +6085,25 @@ if (!!(process.env.NODE_ENV !== "production") && true) {
6017
6085
  return Reflect.ownKeys(target);
6018
6086
  };
6019
6087
  }
6020
- const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend(
6021
- {},
6022
- PublicInstanceProxyHandlers,
6023
- {
6024
- get(target, key) {
6025
- if (key === Symbol.unscopables) {
6026
- return;
6027
- }
6028
- return PublicInstanceProxyHandlers.get(target, key, target);
6029
- },
6030
- has(_, key) {
6031
- const has = key[0] !== "_" && !isGloballyAllowed(key);
6032
- if (!!(process.env.NODE_ENV !== "production") && !has && PublicInstanceProxyHandlers.has(_, key)) {
6033
- warn$1(
6034
- `Property ${JSON.stringify(
6035
- key
6036
- )} should not start with _ which is a reserved prefix for Vue internals.`
6037
- );
6038
- }
6039
- return has;
6088
+ const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend({}, PublicInstanceProxyHandlers, {
6089
+ get(target, key) {
6090
+ if (key === Symbol.unscopables) {
6091
+ return;
6040
6092
  }
6093
+ return PublicInstanceProxyHandlers.get(target, key, target);
6094
+ },
6095
+ has(_, key) {
6096
+ const has = key[0] !== "_" && !isGloballyAllowed(key);
6097
+ if (!!(process.env.NODE_ENV !== "production") && !has && PublicInstanceProxyHandlers.has(_, key)) {
6098
+ warn$1(
6099
+ `Property ${JSON.stringify(
6100
+ key
6101
+ )} should not start with _ which is a reserved prefix for Vue internals.`
6102
+ );
6103
+ }
6104
+ return has;
6041
6105
  }
6042
- );
6106
+ });
6043
6107
  function createDevRenderContext(instance) {
6044
6108
  const target = {};
6045
6109
  Object.defineProperty(target, `_`, {
@@ -6728,7 +6792,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
6728
6792
  return vm;
6729
6793
  }
6730
6794
  }
6731
- Vue.version = `2.6.14-compat:${"3.5.0-alpha.5"}`;
6795
+ Vue.version = `2.6.14-compat:${"3.5.0-beta.2"}`;
6732
6796
  Vue.config = singletonApp.config;
6733
6797
  Vue.use = (plugin, ...options) => {
6734
6798
  if (plugin && isFunction(plugin.install)) {
@@ -7001,7 +7065,7 @@ function installCompatMount(app, context, render) {
7001
7065
  /* skip options */
7002
7066
  );
7003
7067
  }
7004
- container.innerHTML = "";
7068
+ container.textContent = "";
7005
7069
  render(vnode, container, namespace);
7006
7070
  if (container instanceof Element) {
7007
7071
  container.removeAttribute("v-cloak");
@@ -7215,7 +7279,7 @@ function createAppAPI(render, hydrate) {
7215
7279
  If you want to mount another app on the same host container, you need to unmount the previous app by calling \`app.unmount()\` first.`
7216
7280
  );
7217
7281
  }
7218
- const vnode = createVNode(rootComponent, rootProps);
7282
+ const vnode = app._ceVNode || createVNode(rootComponent, rootProps);
7219
7283
  vnode.appContext = context;
7220
7284
  if (namespace === true) {
7221
7285
  namespace = "svg";
@@ -7320,7 +7384,7 @@ function provide(key, value) {
7320
7384
  function inject(key, defaultValue, treatDefaultAsFactory = false) {
7321
7385
  const instance = currentInstance || currentRenderingInstance;
7322
7386
  if (instance || currentApp) {
7323
- const provides = instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : currentApp._context.provides;
7387
+ const provides = currentApp ? currentApp._context.provides : instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : void 0;
7324
7388
  if (provides && key in provides) {
7325
7389
  return provides[key];
7326
7390
  } else if (arguments.length > 1) {
@@ -7594,6 +7658,9 @@ function resolvePropValue(options, props, key, value, instance, isAbsent) {
7594
7658
  } else {
7595
7659
  value = defaultValue;
7596
7660
  }
7661
+ if (instance.ce) {
7662
+ instance.ce._setProp(key, value);
7663
+ }
7597
7664
  }
7598
7665
  if (opt[0 /* shouldCast */]) {
7599
7666
  if (isAbsent && !hasDefault) {
@@ -8634,8 +8701,8 @@ function baseCreateRenderer(options, createHydrationFns) {
8634
8701
  const componentUpdateFn = () => {
8635
8702
  if (!instance.isMounted) {
8636
8703
  let vnodeHook;
8637
- const { el, props, type } = initialVNode;
8638
- const { bm, m, parent } = instance;
8704
+ const { el, props } = initialVNode;
8705
+ const { bm, m, parent, root, type } = instance;
8639
8706
  const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);
8640
8707
  toggleRecurse(instance, false);
8641
8708
  if (bm) {
@@ -8681,6 +8748,9 @@ function baseCreateRenderer(options, createHydrationFns) {
8681
8748
  hydrateSubTree();
8682
8749
  }
8683
8750
  } else {
8751
+ if (root.ce) {
8752
+ root.ce._injectChildStyle(type);
8753
+ }
8684
8754
  if (!!(process.env.NODE_ENV !== "production")) {
8685
8755
  startMeasure(instance, `render`);
8686
8756
  }
@@ -9384,13 +9454,13 @@ function baseCreateRenderer(options, createHydrationFns) {
9384
9454
  namespace
9385
9455
  );
9386
9456
  }
9457
+ container._vnode = vnode;
9387
9458
  if (!isFlushing) {
9388
9459
  isFlushing = true;
9389
9460
  flushPreFlushCbs();
9390
9461
  flushPostFlushCbs();
9391
9462
  isFlushing = false;
9392
9463
  }
9393
- container._vnode = vnode;
9394
9464
  };
9395
9465
  const internals = {
9396
9466
  p: patch,
@@ -9564,14 +9634,9 @@ function doWatch(source, cb, {
9564
9634
  const _cb = cb;
9565
9635
  cb = (...args) => {
9566
9636
  _cb(...args);
9567
- unwatch();
9637
+ watchHandle();
9568
9638
  };
9569
9639
  }
9570
- if (!!(process.env.NODE_ENV !== "production") && deep !== void 0 && typeof deep === "number") {
9571
- warn$1(
9572
- `watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.`
9573
- );
9574
- }
9575
9640
  if (!!(process.env.NODE_ENV !== "production") && !cb) {
9576
9641
  if (immediate !== void 0) {
9577
9642
  warn$1(
@@ -9597,10 +9662,12 @@ function doWatch(source, cb, {
9597
9662
  );
9598
9663
  };
9599
9664
  const instance = currentInstance;
9600
- const reactiveGetter = (source2) => deep === true ? source2 : (
9601
- // for deep: false, only traverse root-level properties
9602
- traverse(source2, deep === false ? 1 : void 0)
9603
- );
9665
+ const reactiveGetter = (source2) => {
9666
+ if (deep) return source2;
9667
+ if (isShallow(source2) || deep === false || deep === 0)
9668
+ return traverse(source2, 1);
9669
+ return traverse(source2);
9670
+ };
9604
9671
  let getter;
9605
9672
  let forceTrigger = false;
9606
9673
  let isMultiSource = false;
@@ -9656,7 +9723,8 @@ function doWatch(source, cb, {
9656
9723
  }
9657
9724
  if (cb && deep) {
9658
9725
  const baseGetter = getter;
9659
- getter = () => traverse(baseGetter());
9726
+ const depth = deep === true ? Infinity : deep;
9727
+ getter = () => traverse(baseGetter(), depth);
9660
9728
  }
9661
9729
  let cleanup;
9662
9730
  let onCleanup = (fn) => {
@@ -9681,7 +9749,12 @@ function doWatch(source, cb, {
9681
9749
  const ctx = useSSRContext();
9682
9750
  ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
9683
9751
  } else {
9684
- return NOOP;
9752
+ const watchHandle2 = () => {
9753
+ };
9754
+ watchHandle2.stop = NOOP;
9755
+ watchHandle2.resume = NOOP;
9756
+ watchHandle2.pause = NOOP;
9757
+ return watchHandle2;
9685
9758
  }
9686
9759
  }
9687
9760
  let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
@@ -9711,7 +9784,6 @@ function doWatch(source, cb, {
9711
9784
  const effect = new ReactiveEffect(getter);
9712
9785
  let scheduler;
9713
9786
  if (flush === "sync") {
9714
- effect.flags |= 64;
9715
9787
  scheduler = job;
9716
9788
  } else if (flush === "post") {
9717
9789
  scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
@@ -9722,12 +9794,15 @@ function doWatch(source, cb, {
9722
9794
  }
9723
9795
  effect.scheduler = scheduler;
9724
9796
  const scope = getCurrentScope();
9725
- const unwatch = () => {
9797
+ const watchHandle = () => {
9726
9798
  effect.stop();
9727
9799
  if (scope) {
9728
9800
  remove(scope.effects, effect);
9729
9801
  }
9730
9802
  };
9803
+ watchHandle.pause = effect.pause.bind(effect);
9804
+ watchHandle.resume = effect.resume.bind(effect);
9805
+ watchHandle.stop = watchHandle;
9731
9806
  if (!!(process.env.NODE_ENV !== "production")) {
9732
9807
  effect.onTrack = onTrack;
9733
9808
  effect.onTrigger = onTrigger;
@@ -9746,8 +9821,8 @@ function doWatch(source, cb, {
9746
9821
  } else {
9747
9822
  effect.run();
9748
9823
  }
9749
- if (ssrCleanup) ssrCleanup.push(unwatch);
9750
- return unwatch;
9824
+ if (ssrCleanup) ssrCleanup.push(watchHandle);
9825
+ return watchHandle;
9751
9826
  }
9752
9827
  function instanceWatch(source, value, options) {
9753
9828
  const publicThis = this.proxy;
@@ -9837,7 +9912,8 @@ function useModel(props, name, options = EMPTY_OBJ) {
9837
9912
  return options.get ? options.get(localValue) : localValue;
9838
9913
  },
9839
9914
  set(value) {
9840
- if (!hasChanged(value, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
9915
+ const emittedValue = options.set ? options.set(value) : value;
9916
+ if (!hasChanged(emittedValue, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
9841
9917
  return;
9842
9918
  }
9843
9919
  const rawProps = i.vnode.props;
@@ -9846,7 +9922,6 @@ function useModel(props, name, options = EMPTY_OBJ) {
9846
9922
  localValue = value;
9847
9923
  trigger();
9848
9924
  }
9849
- const emittedValue = options.set ? options.set(value) : value;
9850
9925
  i.emit(`update:${name}`, emittedValue);
9851
9926
  if (hasChanged(value, emittedValue) && hasChanged(value, prevSetValue) && !hasChanged(emittedValue, prevEmittedValue)) {
9852
9927
  trigger();
@@ -9884,9 +9959,9 @@ function emit(instance, event, ...rawArgs) {
9884
9959
  } = instance;
9885
9960
  if (emitsOptions) {
9886
9961
  if (!(event in emitsOptions) && !(event.startsWith("hook:") || event.startsWith(compatModelEventPrefix))) {
9887
- if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
9962
+ if (!propsOptions || !(toHandlerKey(camelize(event)) in propsOptions)) {
9888
9963
  warn$1(
9889
- `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.`
9964
+ `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(camelize(event))}" prop.`
9890
9965
  );
9891
9966
  }
9892
9967
  } else {
@@ -11831,11 +11906,16 @@ function useTemplateRef(key) {
11831
11906
  const r = shallowRef(null);
11832
11907
  if (i) {
11833
11908
  const refs = i.refs === EMPTY_OBJ ? i.refs = {} : i.refs;
11834
- Object.defineProperty(refs, key, {
11835
- enumerable: true,
11836
- get: () => r.value,
11837
- set: (val) => r.value = val
11838
- });
11909
+ let desc;
11910
+ if (!!(process.env.NODE_ENV !== "production") && (desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable) {
11911
+ warn$1(`useTemplateRef('${key}') already exists.`);
11912
+ } else {
11913
+ Object.defineProperty(refs, key, {
11914
+ enumerable: true,
11915
+ get: () => r.value,
11916
+ set: (val) => r.value = val
11917
+ });
11918
+ }
11839
11919
  } else if (!!(process.env.NODE_ENV !== "production")) {
11840
11920
  warn$1(
11841
11921
  `useTemplateRef() is called when there is no active component instance to be associated with.`
@@ -12069,7 +12149,7 @@ function isMemoSame(cached, memo) {
12069
12149
  return true;
12070
12150
  }
12071
12151
 
12072
- const version = "3.5.0-alpha.5";
12152
+ const version = "3.5.0-beta.2";
12073
12153
  const warn = !!(process.env.NODE_ENV !== "production") ? warn$1 : NOOP;
12074
12154
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
12075
12155
  const devtools = !!(process.env.NODE_ENV !== "production") || true ? devtools$1 : void 0;
@@ -12081,7 +12161,8 @@ const _ssrUtils = {
12081
12161
  setCurrentRenderingInstance,
12082
12162
  isVNode: isVNode,
12083
12163
  normalizeVNode,
12084
- getComponentPublicInstance
12164
+ getComponentPublicInstance,
12165
+ ensureValidVNode
12085
12166
  };
12086
12167
  const ssrUtils = _ssrUtils ;
12087
12168
  const resolveFilter = resolveFilter$1 ;
@@ -12095,6 +12176,18 @@ const _compatUtils = {
12095
12176
  const compatUtils = _compatUtils ;
12096
12177
  const DeprecationTypes = DeprecationTypes$1 ;
12097
12178
 
12179
+ let policy = void 0;
12180
+ const tt = typeof window !== "undefined" && window.trustedTypes;
12181
+ if (tt) {
12182
+ try {
12183
+ policy = /* @__PURE__ */ tt.createPolicy("vue", {
12184
+ createHTML: (val) => val
12185
+ });
12186
+ } catch (e) {
12187
+ !!(process.env.NODE_ENV !== "production") && warn(`Error creating trusted types policy: ${e}`);
12188
+ }
12189
+ }
12190
+ const unsafeToTrustedHTML = policy ? (val) => policy.createHTML(val) : (val) => val;
12098
12191
  const svgNS = "http://www.w3.org/2000/svg";
12099
12192
  const mathmlNS = "http://www.w3.org/1998/Math/MathML";
12100
12193
  const doc = typeof document !== "undefined" ? document : null;
@@ -12142,7 +12235,9 @@ const nodeOps = {
12142
12235
  if (start === end || !(start = start.nextSibling)) break;
12143
12236
  }
12144
12237
  } else {
12145
- templateContainer.innerHTML = namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content;
12238
+ templateContainer.innerHTML = unsafeToTrustedHTML(
12239
+ namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content
12240
+ );
12146
12241
  const template = templateContainer.content;
12147
12242
  if (namespace === "svg" || namespace === "mathml") {
12148
12243
  const wrapper = template.firstChild;
@@ -12549,11 +12644,17 @@ function useCssVars(getter) {
12549
12644
  }
12550
12645
  const setVars = () => {
12551
12646
  const vars = getter(instance.proxy);
12552
- setVarsOnVNode(instance.subTree, vars);
12647
+ if (instance.ce) {
12648
+ setVarsOnNode(instance.ce, vars);
12649
+ } else {
12650
+ setVarsOnVNode(instance.subTree, vars);
12651
+ }
12553
12652
  updateTeleports(vars);
12554
12653
  };
12555
- onMounted(() => {
12654
+ onBeforeMount(() => {
12556
12655
  watchPostEffect(setVars);
12656
+ });
12657
+ onMounted(() => {
12557
12658
  const ob = new MutationObserver(setVars);
12558
12659
  ob.observe(instance.subTree.el.parentNode, { childList: true });
12559
12660
  onUnmounted(() => ob.disconnect());
@@ -12950,16 +13051,24 @@ function shouldSetAsProp(el, key, value, isSVG) {
12950
13051
  if (isNativeOn(key) && isString(value)) {
12951
13052
  return false;
12952
13053
  }
12953
- return key in el;
13054
+ if (key in el) {
13055
+ return true;
13056
+ }
13057
+ if (el._isVueCE && (/[A-Z]/.test(key) || !isString(value))) {
13058
+ return true;
13059
+ }
13060
+ return false;
12954
13061
  }
12955
13062
 
13063
+ const REMOVAL = {};
12956
13064
  /*! #__NO_SIDE_EFFECTS__ */
12957
13065
  // @__NO_SIDE_EFFECTS__
12958
- function defineCustomElement(options, extraOptions, hydrate2) {
13066
+ function defineCustomElement(options, extraOptions, _createApp) {
12959
13067
  const Comp = defineComponent(options, extraOptions);
13068
+ if (isPlainObject(Comp)) extend(Comp, extraOptions);
12960
13069
  class VueCustomElement extends VueElement {
12961
13070
  constructor(initialProps) {
12962
- super(Comp, initialProps, hydrate2);
13071
+ super(Comp, initialProps, _createApp);
12963
13072
  }
12964
13073
  }
12965
13074
  VueCustomElement.def = Comp;
@@ -12967,47 +13076,87 @@ function defineCustomElement(options, extraOptions, hydrate2) {
12967
13076
  }
12968
13077
  /*! #__NO_SIDE_EFFECTS__ */
12969
13078
  const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
12970
- return /* @__PURE__ */ defineCustomElement(options, extraOptions, hydrate);
13079
+ return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
12971
13080
  };
12972
13081
  const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
12973
13082
  };
12974
13083
  class VueElement extends BaseClass {
12975
- constructor(_def, _props = {}, hydrate2) {
13084
+ constructor(_def, _props = {}, _createApp = createApp) {
12976
13085
  super();
12977
13086
  this._def = _def;
12978
13087
  this._props = _props;
13088
+ this._createApp = _createApp;
13089
+ this._isVueCE = true;
12979
13090
  /**
12980
13091
  * @internal
12981
13092
  */
12982
13093
  this._instance = null;
13094
+ /**
13095
+ * @internal
13096
+ */
13097
+ this._app = null;
13098
+ /**
13099
+ * @internal
13100
+ */
13101
+ this._nonce = this._def.nonce;
12983
13102
  this._connected = false;
12984
13103
  this._resolved = false;
12985
13104
  this._numberProps = null;
13105
+ this._styleChildren = /* @__PURE__ */ new WeakSet();
12986
13106
  this._ob = null;
12987
- if (this.shadowRoot && hydrate2) {
12988
- hydrate2(this._createVNode(), this.shadowRoot);
13107
+ if (this.shadowRoot && _createApp !== createApp) {
13108
+ this._root = this.shadowRoot;
12989
13109
  } else {
12990
13110
  if (!!(process.env.NODE_ENV !== "production") && this.shadowRoot) {
12991
13111
  warn(
12992
13112
  `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
12993
13113
  );
12994
13114
  }
12995
- this.attachShadow({ mode: "open" });
12996
- if (!this._def.__asyncLoader) {
12997
- this._resolveProps(this._def);
13115
+ if (_def.shadowRoot !== false) {
13116
+ this.attachShadow({ mode: "open" });
13117
+ this._root = this.shadowRoot;
13118
+ } else {
13119
+ this._root = this;
12998
13120
  }
12999
13121
  }
13122
+ if (!this._def.__asyncLoader) {
13123
+ this._resolveProps(this._def);
13124
+ }
13000
13125
  }
13001
13126
  connectedCallback() {
13127
+ if (!this.shadowRoot) {
13128
+ this._parseSlots();
13129
+ }
13002
13130
  this._connected = true;
13131
+ let parent = this;
13132
+ while (parent = parent && (parent.parentNode || parent.host)) {
13133
+ if (parent instanceof VueElement) {
13134
+ this._parent = parent;
13135
+ break;
13136
+ }
13137
+ }
13003
13138
  if (!this._instance) {
13004
13139
  if (this._resolved) {
13140
+ this._setParent();
13005
13141
  this._update();
13006
13142
  } else {
13007
- this._resolveDef();
13143
+ if (parent && parent._pendingResolve) {
13144
+ this._pendingResolve = parent._pendingResolve.then(() => {
13145
+ this._pendingResolve = void 0;
13146
+ this._resolveDef();
13147
+ });
13148
+ } else {
13149
+ this._resolveDef();
13150
+ }
13008
13151
  }
13009
13152
  }
13010
13153
  }
13154
+ _setParent(parent = this._parent) {
13155
+ if (parent) {
13156
+ this._instance.parent = parent._instance;
13157
+ this._instance.provides = parent._instance.provides;
13158
+ }
13159
+ }
13011
13160
  disconnectedCallback() {
13012
13161
  this._connected = false;
13013
13162
  nextTick(() => {
@@ -13016,8 +13165,9 @@ class VueElement extends BaseClass {
13016
13165
  this._ob.disconnect();
13017
13166
  this._ob = null;
13018
13167
  }
13019
- render(null, this.shadowRoot);
13020
- this._instance = null;
13168
+ this._app && this._app.unmount();
13169
+ this._instance.ce = void 0;
13170
+ this._app = this._instance = null;
13021
13171
  }
13022
13172
  });
13023
13173
  }
@@ -13025,7 +13175,9 @@ class VueElement extends BaseClass {
13025
13175
  * resolve inner component definition (handle possible async component)
13026
13176
  */
13027
13177
  _resolveDef() {
13028
- this._resolved = true;
13178
+ if (this._pendingResolve) {
13179
+ return;
13180
+ }
13029
13181
  for (let i = 0; i < this.attributes.length; i++) {
13030
13182
  this._setAttr(this.attributes[i].name);
13031
13183
  }
@@ -13036,6 +13188,8 @@ class VueElement extends BaseClass {
13036
13188
  });
13037
13189
  this._ob.observe(this, { attributes: true });
13038
13190
  const resolve = (def, isAsync = false) => {
13191
+ this._resolved = true;
13192
+ this._pendingResolve = void 0;
13039
13193
  const { props, styles } = def;
13040
13194
  let numberProps;
13041
13195
  if (props && !isArray(props)) {
@@ -13053,22 +13207,53 @@ class VueElement extends BaseClass {
13053
13207
  if (isAsync) {
13054
13208
  this._resolveProps(def);
13055
13209
  }
13056
- this._applyStyles(styles);
13057
- this._update();
13210
+ if (this.shadowRoot) {
13211
+ this._applyStyles(styles);
13212
+ } else if (!!(process.env.NODE_ENV !== "production") && styles) {
13213
+ warn(
13214
+ "Custom element style injection is not supported when using shadowRoot: false"
13215
+ );
13216
+ }
13217
+ this._mount(def);
13058
13218
  };
13059
13219
  const asyncDef = this._def.__asyncLoader;
13060
13220
  if (asyncDef) {
13061
- asyncDef().then((def) => resolve(def, true));
13221
+ this._pendingResolve = asyncDef().then(
13222
+ (def) => resolve(this._def = def, true)
13223
+ );
13062
13224
  } else {
13063
13225
  resolve(this._def);
13064
13226
  }
13065
13227
  }
13228
+ _mount(def) {
13229
+ if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) && !def.name) {
13230
+ def.name = "VueElement";
13231
+ }
13232
+ this._app = this._createApp(def);
13233
+ if (def.configureApp) {
13234
+ def.configureApp(this._app);
13235
+ }
13236
+ this._app._ceVNode = this._createVNode();
13237
+ this._app.mount(this._root);
13238
+ const exposed = this._instance && this._instance.exposed;
13239
+ if (!exposed) return;
13240
+ for (const key in exposed) {
13241
+ if (!hasOwn(this, key)) {
13242
+ Object.defineProperty(this, key, {
13243
+ // unwrap ref to be consistent with public instance behavior
13244
+ get: () => unref(exposed[key])
13245
+ });
13246
+ } else if (!!(process.env.NODE_ENV !== "production")) {
13247
+ warn(`Exposed property "${key}" already exists on custom element.`);
13248
+ }
13249
+ }
13250
+ }
13066
13251
  _resolveProps(def) {
13067
13252
  const { props } = def;
13068
13253
  const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
13069
13254
  for (const key of Object.keys(this)) {
13070
13255
  if (key[0] !== "_" && declaredPropKeys.includes(key)) {
13071
- this._setProp(key, this[key], true, false);
13256
+ this._setProp(key, this[key]);
13072
13257
  }
13073
13258
  }
13074
13259
  for (const key of declaredPropKeys.map(camelize)) {
@@ -13077,18 +13262,20 @@ class VueElement extends BaseClass {
13077
13262
  return this._getProp(key);
13078
13263
  },
13079
13264
  set(val) {
13080
- this._setProp(key, val);
13265
+ this._setProp(key, val, true, true);
13081
13266
  }
13082
13267
  });
13083
13268
  }
13084
13269
  }
13085
13270
  _setAttr(key) {
13086
- let value = this.hasAttribute(key) ? this.getAttribute(key) : void 0;
13271
+ if (key.startsWith("data-v-")) return;
13272
+ const has = this.hasAttribute(key);
13273
+ let value = has ? this.getAttribute(key) : REMOVAL;
13087
13274
  const camelKey = camelize(key);
13088
- if (this._numberProps && this._numberProps[camelKey]) {
13275
+ if (has && this._numberProps && this._numberProps[camelKey]) {
13089
13276
  value = toNumber(value);
13090
13277
  }
13091
- this._setProp(camelKey, value, false);
13278
+ this._setProp(camelKey, value, false, true);
13092
13279
  }
13093
13280
  /**
13094
13281
  * @internal
@@ -13099,9 +13286,13 @@ class VueElement extends BaseClass {
13099
13286
  /**
13100
13287
  * @internal
13101
13288
  */
13102
- _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
13289
+ _setProp(key, val, shouldReflect = true, shouldUpdate = false) {
13103
13290
  if (val !== this._props[key]) {
13104
- this._props[key] = val;
13291
+ if (val === REMOVAL) {
13292
+ delete this._props[key];
13293
+ } else {
13294
+ this._props[key] = val;
13295
+ }
13105
13296
  if (shouldUpdate && this._instance) {
13106
13297
  this._update();
13107
13298
  }
@@ -13117,18 +13308,23 @@ class VueElement extends BaseClass {
13117
13308
  }
13118
13309
  }
13119
13310
  _update() {
13120
- render(this._createVNode(), this.shadowRoot);
13311
+ render(this._createVNode(), this._root);
13121
13312
  }
13122
13313
  _createVNode() {
13123
- const vnode = createVNode(this._def, extend({}, this._props));
13314
+ const baseProps = {};
13315
+ if (!this.shadowRoot) {
13316
+ baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
13317
+ }
13318
+ const vnode = createVNode(this._def, extend(baseProps, this._props));
13124
13319
  if (!this._instance) {
13125
13320
  vnode.ce = (instance) => {
13126
13321
  this._instance = instance;
13322
+ instance.ce = this;
13127
13323
  instance.isCE = true;
13128
13324
  if (!!(process.env.NODE_ENV !== "production")) {
13129
13325
  instance.ceReload = (newStyles) => {
13130
13326
  if (this._styles) {
13131
- this._styles.forEach((s) => this.shadowRoot.removeChild(s));
13327
+ this._styles.forEach((s) => this._root.removeChild(s));
13132
13328
  this._styles.length = 0;
13133
13329
  }
13134
13330
  this._applyStyles(newStyles);
@@ -13138,9 +13334,10 @@ class VueElement extends BaseClass {
13138
13334
  }
13139
13335
  const dispatch = (event, args) => {
13140
13336
  this.dispatchEvent(
13141
- new CustomEvent(event, {
13142
- detail: args
13143
- })
13337
+ new CustomEvent(
13338
+ event,
13339
+ isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
13340
+ )
13144
13341
  );
13145
13342
  };
13146
13343
  instance.emit = (event, ...args) => {
@@ -13149,31 +13346,127 @@ class VueElement extends BaseClass {
13149
13346
  dispatch(hyphenate(event), args);
13150
13347
  }
13151
13348
  };
13152
- let parent = this;
13153
- while (parent = parent && (parent.parentNode || parent.host)) {
13154
- if (parent instanceof VueElement) {
13155
- instance.parent = parent._instance;
13156
- instance.provides = parent._instance.provides;
13157
- break;
13158
- }
13159
- }
13349
+ this._setParent();
13160
13350
  };
13161
13351
  }
13162
13352
  return vnode;
13163
13353
  }
13164
- _applyStyles(styles) {
13165
- if (styles) {
13166
- styles.forEach((css) => {
13167
- const s = document.createElement("style");
13168
- s.textContent = css;
13169
- this.shadowRoot.appendChild(s);
13170
- if (!!(process.env.NODE_ENV !== "production")) {
13354
+ _applyStyles(styles, owner) {
13355
+ if (!styles) return;
13356
+ if (owner) {
13357
+ if (owner === this._def || this._styleChildren.has(owner)) {
13358
+ return;
13359
+ }
13360
+ this._styleChildren.add(owner);
13361
+ }
13362
+ const nonce = this._nonce;
13363
+ for (let i = styles.length - 1; i >= 0; i--) {
13364
+ const s = document.createElement("style");
13365
+ if (nonce) s.setAttribute("nonce", nonce);
13366
+ s.textContent = styles[i];
13367
+ this.shadowRoot.prepend(s);
13368
+ if (!!(process.env.NODE_ENV !== "production")) {
13369
+ if (owner) {
13370
+ if (owner.__hmrId) {
13371
+ if (!this._childStyles) this._childStyles = /* @__PURE__ */ new Map();
13372
+ let entry = this._childStyles.get(owner.__hmrId);
13373
+ if (!entry) {
13374
+ this._childStyles.set(owner.__hmrId, entry = []);
13375
+ }
13376
+ entry.push(s);
13377
+ }
13378
+ } else {
13171
13379
  (this._styles || (this._styles = [])).push(s);
13172
13380
  }
13173
- });
13381
+ }
13382
+ }
13383
+ }
13384
+ /**
13385
+ * Only called when shaddowRoot is false
13386
+ */
13387
+ _parseSlots() {
13388
+ const slots = this._slots = {};
13389
+ let n;
13390
+ while (n = this.firstChild) {
13391
+ const slotName = n.nodeType === 1 && n.getAttribute("slot") || "default";
13392
+ (slots[slotName] || (slots[slotName] = [])).push(n);
13393
+ this.removeChild(n);
13394
+ }
13395
+ }
13396
+ /**
13397
+ * Only called when shaddowRoot is false
13398
+ */
13399
+ _renderSlots() {
13400
+ const outlets = this.querySelectorAll("slot");
13401
+ const scopeId = this._instance.type.__scopeId;
13402
+ for (let i = 0; i < outlets.length; i++) {
13403
+ const o = outlets[i];
13404
+ const slotName = o.getAttribute("name") || "default";
13405
+ const content = this._slots[slotName];
13406
+ const parent = o.parentNode;
13407
+ if (content) {
13408
+ for (const n of content) {
13409
+ if (scopeId && n.nodeType === 1) {
13410
+ const id = scopeId + "-s";
13411
+ const walker = document.createTreeWalker(n, 1);
13412
+ n.setAttribute(id, "");
13413
+ let child;
13414
+ while (child = walker.nextNode()) {
13415
+ child.setAttribute(id, "");
13416
+ }
13417
+ }
13418
+ parent.insertBefore(n, o);
13419
+ }
13420
+ } else {
13421
+ while (o.firstChild) parent.insertBefore(o.firstChild, o);
13422
+ }
13423
+ parent.removeChild(o);
13424
+ }
13425
+ }
13426
+ /**
13427
+ * @internal
13428
+ */
13429
+ _injectChildStyle(comp) {
13430
+ this._applyStyles(comp.styles, comp);
13431
+ }
13432
+ /**
13433
+ * @internal
13434
+ */
13435
+ _removeChildStyle(comp) {
13436
+ if (!!(process.env.NODE_ENV !== "production")) {
13437
+ this._styleChildren.delete(comp);
13438
+ if (this._childStyles && comp.__hmrId) {
13439
+ const oldStyles = this._childStyles.get(comp.__hmrId);
13440
+ if (oldStyles) {
13441
+ oldStyles.forEach((s) => this._root.removeChild(s));
13442
+ oldStyles.length = 0;
13443
+ }
13444
+ }
13174
13445
  }
13175
13446
  }
13176
13447
  }
13448
+ function useHost(caller) {
13449
+ const instance = getCurrentInstance();
13450
+ const el = instance && instance.ce;
13451
+ if (el) {
13452
+ return el;
13453
+ } else if (!!(process.env.NODE_ENV !== "production")) {
13454
+ if (!instance) {
13455
+ warn(
13456
+ `${caller || "useHost"} called without an active component instance.`
13457
+ );
13458
+ } else {
13459
+ warn(
13460
+ `${caller || "useHost"} can only be used in components defined via defineCustomElement.`
13461
+ );
13462
+ }
13463
+ }
13464
+ return null;
13465
+ }
13466
+ function useShadowRoot() {
13467
+ const el = !!(process.env.NODE_ENV !== "production") ? useHost("useShadowRoot") : useHost();
13468
+ return el && el.shadowRoot;
13469
+ }
13177
13470
 
13178
13471
  function useCssModule(name = "$style") {
13179
13472
  {
@@ -13731,7 +14024,7 @@ const createApp = (...args) => {
13731
14024
  const component = app._component;
13732
14025
  if (!isFunction(component) && !component.render && !component.template) {
13733
14026
  component.template = container.innerHTML;
13734
- if (!!(process.env.NODE_ENV !== "production")) {
14027
+ if (!!(process.env.NODE_ENV !== "production") && container.nodeType === 1) {
13735
14028
  for (let i = 0; i < container.attributes.length; i++) {
13736
14029
  const attr = container.attributes[i];
13737
14030
  if (attr.name !== "v-cloak" && /^(v-|:|@)/.test(attr.name)) {
@@ -13744,7 +14037,9 @@ const createApp = (...args) => {
13744
14037
  }
13745
14038
  }
13746
14039
  }
13747
- container.innerHTML = "";
14040
+ if (container.nodeType === 1) {
14041
+ container.textContent = "";
14042
+ }
13748
14043
  const proxy = mount(container, false, resolveRootNamespace(container));
13749
14044
  if (container instanceof Element) {
13750
14045
  container.removeAttribute("v-cloak");
@@ -13978,9 +14273,11 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
13978
14273
  useAttrs: useAttrs,
13979
14274
  useCssModule: useCssModule,
13980
14275
  useCssVars: useCssVars,
14276
+ useHost: useHost,
13981
14277
  useId: useId,
13982
14278
  useModel: useModel,
13983
14279
  useSSRContext: useSSRContext,
14280
+ useShadowRoot: useShadowRoot,
13984
14281
  useSlots: useSlots,
13985
14282
  useTemplateRef: useTemplateRef,
13986
14283
  useTransitionState: useTransitionState,
@@ -14041,6 +14338,6 @@ Vue.compile = () => {
14041
14338
  }
14042
14339
  };
14043
14340
 
14044
- const { configureCompat } = Vue;
14341
+ const configureCompat = Vue.configureCompat;
14045
14342
 
14046
- 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 };
14343
+ 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 };