@vue/runtime-dom 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/runtime-dom v3.5.0-alpha.5
2
+ * @vue/runtime-dom 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$1("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$1(hook, component.appContext.app, component.uid, component, type, time);
@@ -3435,6 +3493,7 @@ const logMismatchError = () => {
3435
3493
  const isSVGContainer = (container) => container.namespaceURI.includes("svg") && container.tagName !== "foreignObject";
3436
3494
  const isMathMLContainer = (container) => container.namespaceURI.includes("MathML");
3437
3495
  const getContainerType = (container) => {
3496
+ if (container.nodeType !== 1) return void 0;
3438
3497
  if (isSVGContainer(container)) return "svg";
3439
3498
  if (isMathMLContainer(container)) return "mathml";
3440
3499
  return void 0;
@@ -3710,6 +3769,7 @@ Server rendered element contains more child nodes than client vdom.`
3710
3769
  }
3711
3770
  if (props) {
3712
3771
  {
3772
+ const isCustomElement = el.tagName.includes("-");
3713
3773
  for (const key in props) {
3714
3774
  if (// #11189 skip if this node has directives that have created hooks
3715
3775
  // as it could have mutated the DOM in any possible way
@@ -3717,7 +3777,7 @@ Server rendered element contains more child nodes than client vdom.`
3717
3777
  logMismatchError();
3718
3778
  }
3719
3779
  if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
3720
- key[0] === ".") {
3780
+ key[0] === "." || isCustomElement) {
3721
3781
  patchProp(el, key, null, props[key], void 0, parentComponent);
3722
3782
  }
3723
3783
  }
@@ -4042,24 +4102,19 @@ function isMismatchAllowed(el, allowedType) {
4042
4102
  }
4043
4103
  }
4044
4104
 
4045
- const hydrateOnIdle = () => (hydrate) => {
4046
- const id = requestIdleCallback(hydrate);
4105
+ const hydrateOnIdle = (timeout = 1e4) => (hydrate) => {
4106
+ const id = requestIdleCallback(hydrate, { timeout });
4047
4107
  return () => cancelIdleCallback(id);
4048
4108
  };
4049
- const hydrateOnVisible = (margin = 0) => (hydrate, forEach) => {
4050
- const ob = new IntersectionObserver(
4051
- (entries) => {
4052
- for (const e of entries) {
4053
- if (!e.isIntersecting) continue;
4054
- ob.disconnect();
4055
- hydrate();
4056
- break;
4057
- }
4058
- },
4059
- {
4060
- rootMargin: isString(margin) ? margin : margin + "px"
4109
+ const hydrateOnVisible = (opts) => (hydrate, forEach) => {
4110
+ const ob = new IntersectionObserver((entries) => {
4111
+ for (const e of entries) {
4112
+ if (!e.isIntersecting) continue;
4113
+ ob.disconnect();
4114
+ hydrate();
4115
+ break;
4061
4116
  }
4062
- );
4117
+ }, opts);
4063
4118
  forEach((el) => ob.observe(el));
4064
4119
  return () => ob.disconnect();
4065
4120
  };
@@ -4367,14 +4422,14 @@ const KeepAliveImpl = {
4367
4422
  function pruneCache(filter) {
4368
4423
  cache.forEach((vnode, key) => {
4369
4424
  const name = getComponentName(vnode.type);
4370
- if (name && (!filter || !filter(name))) {
4425
+ if (name && !filter(name)) {
4371
4426
  pruneCacheEntry(key);
4372
4427
  }
4373
4428
  });
4374
4429
  }
4375
4430
  function pruneCacheEntry(key) {
4376
4431
  const cached = cache.get(key);
4377
- if (!current || !isSameVNodeType(cached, current)) {
4432
+ if (cached && (!current || !isSameVNodeType(cached, current))) {
4378
4433
  unmount(cached);
4379
4434
  } else if (current) {
4380
4435
  resetShapeFlag(current);
@@ -4436,6 +4491,10 @@ const KeepAliveImpl = {
4436
4491
  return rawVNode;
4437
4492
  }
4438
4493
  let vnode = getInnerChild(rawVNode);
4494
+ if (vnode.type === Comment) {
4495
+ current = null;
4496
+ return vnode;
4497
+ }
4439
4498
  const comp = vnode.type;
4440
4499
  const name = getComponentName(
4441
4500
  isAsyncWrapper(vnode) ? vnode.type.__asyncResolved || {} : comp
@@ -4482,6 +4541,7 @@ function matches(pattern, name) {
4482
4541
  } else if (isString(pattern)) {
4483
4542
  return pattern.split(",").includes(name);
4484
4543
  } else if (isRegExp(pattern)) {
4544
+ pattern.lastIndex = 0;
4485
4545
  return pattern.test(name);
4486
4546
  }
4487
4547
  return false;
@@ -4565,17 +4625,19 @@ const createHook = (lifecycle) => (hook, target = currentInstance) => {
4565
4625
  };
4566
4626
  const onBeforeMount = createHook("bm");
4567
4627
  const onMounted = createHook("m");
4568
- const onBeforeUpdate = createHook("bu");
4628
+ const onBeforeUpdate = createHook(
4629
+ "bu"
4630
+ );
4569
4631
  const onUpdated = createHook("u");
4570
- const onBeforeUnmount = createHook("bum");
4571
- const onUnmounted = createHook("um");
4572
- const onServerPrefetch = createHook("sp");
4573
- const onRenderTriggered = createHook(
4574
- "rtg"
4632
+ const onBeforeUnmount = createHook(
4633
+ "bum"
4575
4634
  );
4576
- const onRenderTracked = createHook(
4577
- "rtc"
4635
+ const onUnmounted = createHook("um");
4636
+ const onServerPrefetch = createHook(
4637
+ "sp"
4578
4638
  );
4639
+ const onRenderTriggered = createHook("rtg");
4640
+ const onRenderTracked = createHook("rtc");
4579
4641
  function onErrorCaptured(hook, target = currentInstance) {
4580
4642
  injectHook("ec", hook, target);
4581
4643
  }
@@ -4702,9 +4764,14 @@ function createSlots(slots, dynamicSlots) {
4702
4764
  }
4703
4765
 
4704
4766
  function renderSlot(slots, name, props = {}, fallback, noSlotted) {
4705
- if (currentRenderingInstance.isCE || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.isCE) {
4767
+ if (currentRenderingInstance.ce || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.ce) {
4706
4768
  if (name !== "default") props.name = name;
4707
- return createVNode("slot", props, fallback && fallback());
4769
+ return openBlock(), createBlock(
4770
+ Fragment,
4771
+ null,
4772
+ [createVNode("slot", props, fallback && fallback())],
4773
+ 64
4774
+ );
4708
4775
  }
4709
4776
  let slot = slots[name];
4710
4777
  if (slot && slot.length > 1) {
@@ -4777,6 +4844,7 @@ const publicPropertiesMap = (
4777
4844
  $refs: (i) => shallowReadonly(i.refs) ,
4778
4845
  $parent: (i) => getPublicInstance(i.parent),
4779
4846
  $root: (i) => getPublicInstance(i.root),
4847
+ $host: (i) => i.ce,
4780
4848
  $emit: (i) => i.emit,
4781
4849
  $options: (i) => resolveMergedOptions(i) ,
4782
4850
  $forceUpdate: (i) => i.f || (i.f = () => {
@@ -4928,29 +4996,25 @@ const PublicInstanceProxyHandlers = {
4928
4996
  return Reflect.ownKeys(target);
4929
4997
  };
4930
4998
  }
4931
- const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend(
4932
- {},
4933
- PublicInstanceProxyHandlers,
4934
- {
4935
- get(target, key) {
4936
- if (key === Symbol.unscopables) {
4937
- return;
4938
- }
4939
- return PublicInstanceProxyHandlers.get(target, key, target);
4940
- },
4941
- has(_, key) {
4942
- const has = key[0] !== "_" && !isGloballyAllowed(key);
4943
- if (!has && PublicInstanceProxyHandlers.has(_, key)) {
4944
- warn$1(
4945
- `Property ${JSON.stringify(
4946
- key
4947
- )} should not start with _ which is a reserved prefix for Vue internals.`
4948
- );
4949
- }
4950
- return has;
4999
+ const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend({}, PublicInstanceProxyHandlers, {
5000
+ get(target, key) {
5001
+ if (key === Symbol.unscopables) {
5002
+ return;
5003
+ }
5004
+ return PublicInstanceProxyHandlers.get(target, key, target);
5005
+ },
5006
+ has(_, key) {
5007
+ const has = key[0] !== "_" && !isGloballyAllowed(key);
5008
+ if (!has && PublicInstanceProxyHandlers.has(_, key)) {
5009
+ warn$1(
5010
+ `Property ${JSON.stringify(
5011
+ key
5012
+ )} should not start with _ which is a reserved prefix for Vue internals.`
5013
+ );
4951
5014
  }
5015
+ return has;
4952
5016
  }
4953
- );
5017
+ });
4954
5018
  function createDevRenderContext(instance) {
4955
5019
  const target = {};
4956
5020
  Object.defineProperty(target, `_`, {
@@ -5652,7 +5716,7 @@ function createAppAPI(render, hydrate) {
5652
5716
  If you want to mount another app on the same host container, you need to unmount the previous app by calling \`app.unmount()\` first.`
5653
5717
  );
5654
5718
  }
5655
- const vnode = createVNode(rootComponent, rootProps);
5719
+ const vnode = app._ceVNode || createVNode(rootComponent, rootProps);
5656
5720
  vnode.appContext = context;
5657
5721
  if (namespace === true) {
5658
5722
  namespace = "svg";
@@ -5754,7 +5818,7 @@ function provide(key, value) {
5754
5818
  function inject(key, defaultValue, treatDefaultAsFactory = false) {
5755
5819
  const instance = currentInstance || currentRenderingInstance;
5756
5820
  if (instance || currentApp) {
5757
- const provides = instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : currentApp._context.provides;
5821
+ const provides = currentApp ? currentApp._context.provides : instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : void 0;
5758
5822
  if (provides && key in provides) {
5759
5823
  return provides[key];
5760
5824
  } else if (arguments.length > 1) {
@@ -5959,6 +6023,9 @@ function resolvePropValue(options, props, key, value, instance, isAbsent) {
5959
6023
  } else {
5960
6024
  value = defaultValue;
5961
6025
  }
6026
+ if (instance.ce) {
6027
+ instance.ce._setProp(key, value);
6028
+ }
5962
6029
  }
5963
6030
  if (opt[0 /* shouldCast */]) {
5964
6031
  if (isAbsent && !hasDefault) {
@@ -6957,8 +7024,8 @@ function baseCreateRenderer(options, createHydrationFns) {
6957
7024
  const componentUpdateFn = () => {
6958
7025
  if (!instance.isMounted) {
6959
7026
  let vnodeHook;
6960
- const { el, props, type } = initialVNode;
6961
- const { bm, m, parent } = instance;
7027
+ const { el, props } = initialVNode;
7028
+ const { bm, m, parent, root, type } = instance;
6962
7029
  const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);
6963
7030
  toggleRecurse(instance, false);
6964
7031
  if (bm) {
@@ -7001,6 +7068,9 @@ function baseCreateRenderer(options, createHydrationFns) {
7001
7068
  hydrateSubTree();
7002
7069
  }
7003
7070
  } else {
7071
+ if (root.ce) {
7072
+ root.ce._injectChildStyle(type);
7073
+ }
7004
7074
  {
7005
7075
  startMeasure(instance, `render`);
7006
7076
  }
@@ -7674,13 +7744,13 @@ function baseCreateRenderer(options, createHydrationFns) {
7674
7744
  namespace
7675
7745
  );
7676
7746
  }
7747
+ container._vnode = vnode;
7677
7748
  if (!isFlushing) {
7678
7749
  isFlushing = true;
7679
7750
  flushPreFlushCbs();
7680
7751
  flushPostFlushCbs();
7681
7752
  isFlushing = false;
7682
7753
  }
7683
- container._vnode = vnode;
7684
7754
  };
7685
7755
  const internals = {
7686
7756
  p: patch,
@@ -7854,14 +7924,9 @@ function doWatch(source, cb, {
7854
7924
  const _cb = cb;
7855
7925
  cb = (...args) => {
7856
7926
  _cb(...args);
7857
- unwatch();
7927
+ watchHandle();
7858
7928
  };
7859
7929
  }
7860
- if (deep !== void 0 && typeof deep === "number") {
7861
- warn$1(
7862
- `watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.`
7863
- );
7864
- }
7865
7930
  if (!cb) {
7866
7931
  if (immediate !== void 0) {
7867
7932
  warn$1(
@@ -7887,10 +7952,12 @@ function doWatch(source, cb, {
7887
7952
  );
7888
7953
  };
7889
7954
  const instance = currentInstance;
7890
- const reactiveGetter = (source2) => deep === true ? source2 : (
7891
- // for deep: false, only traverse root-level properties
7892
- traverse(source2, deep === false ? 1 : void 0)
7893
- );
7955
+ const reactiveGetter = (source2) => {
7956
+ if (deep) return source2;
7957
+ if (isShallow(source2) || deep === false || deep === 0)
7958
+ return traverse(source2, 1);
7959
+ return traverse(source2);
7960
+ };
7894
7961
  let getter;
7895
7962
  let forceTrigger = false;
7896
7963
  let isMultiSource = false;
@@ -7936,7 +8003,8 @@ function doWatch(source, cb, {
7936
8003
  }
7937
8004
  if (cb && deep) {
7938
8005
  const baseGetter = getter;
7939
- getter = () => traverse(baseGetter());
8006
+ const depth = deep === true ? Infinity : deep;
8007
+ getter = () => traverse(baseGetter(), depth);
7940
8008
  }
7941
8009
  let cleanup;
7942
8010
  let onCleanup = (fn) => {
@@ -7961,7 +8029,12 @@ function doWatch(source, cb, {
7961
8029
  const ctx = useSSRContext();
7962
8030
  ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
7963
8031
  } else {
7964
- return NOOP;
8032
+ const watchHandle2 = () => {
8033
+ };
8034
+ watchHandle2.stop = NOOP;
8035
+ watchHandle2.resume = NOOP;
8036
+ watchHandle2.pause = NOOP;
8037
+ return watchHandle2;
7965
8038
  }
7966
8039
  }
7967
8040
  let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
@@ -7991,7 +8064,6 @@ function doWatch(source, cb, {
7991
8064
  const effect = new ReactiveEffect(getter);
7992
8065
  let scheduler;
7993
8066
  if (flush === "sync") {
7994
- effect.flags |= 64;
7995
8067
  scheduler = job;
7996
8068
  } else if (flush === "post") {
7997
8069
  scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
@@ -8002,12 +8074,15 @@ function doWatch(source, cb, {
8002
8074
  }
8003
8075
  effect.scheduler = scheduler;
8004
8076
  const scope = getCurrentScope();
8005
- const unwatch = () => {
8077
+ const watchHandle = () => {
8006
8078
  effect.stop();
8007
8079
  if (scope) {
8008
8080
  remove(scope.effects, effect);
8009
8081
  }
8010
8082
  };
8083
+ watchHandle.pause = effect.pause.bind(effect);
8084
+ watchHandle.resume = effect.resume.bind(effect);
8085
+ watchHandle.stop = watchHandle;
8011
8086
  {
8012
8087
  effect.onTrack = onTrack;
8013
8088
  effect.onTrigger = onTrigger;
@@ -8026,8 +8101,8 @@ function doWatch(source, cb, {
8026
8101
  } else {
8027
8102
  effect.run();
8028
8103
  }
8029
- if (ssrCleanup) ssrCleanup.push(unwatch);
8030
- return unwatch;
8104
+ if (ssrCleanup) ssrCleanup.push(watchHandle);
8105
+ return watchHandle;
8031
8106
  }
8032
8107
  function instanceWatch(source, value, options) {
8033
8108
  const publicThis = this.proxy;
@@ -8117,7 +8192,8 @@ function useModel(props, name, options = EMPTY_OBJ) {
8117
8192
  return options.get ? options.get(localValue) : localValue;
8118
8193
  },
8119
8194
  set(value) {
8120
- if (!hasChanged(value, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
8195
+ const emittedValue = options.set ? options.set(value) : value;
8196
+ if (!hasChanged(emittedValue, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
8121
8197
  return;
8122
8198
  }
8123
8199
  const rawProps = i.vnode.props;
@@ -8126,7 +8202,6 @@ function useModel(props, name, options = EMPTY_OBJ) {
8126
8202
  localValue = value;
8127
8203
  trigger();
8128
8204
  }
8129
- const emittedValue = options.set ? options.set(value) : value;
8130
8205
  i.emit(`update:${name}`, emittedValue);
8131
8206
  if (hasChanged(value, emittedValue) && hasChanged(value, prevSetValue) && !hasChanged(emittedValue, prevEmittedValue)) {
8132
8207
  trigger();
@@ -8164,9 +8239,9 @@ function emit(instance, event, ...rawArgs) {
8164
8239
  } = instance;
8165
8240
  if (emitsOptions) {
8166
8241
  if (!(event in emitsOptions) && true) {
8167
- if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
8242
+ if (!propsOptions || !(toHandlerKey(camelize(event)) in propsOptions)) {
8168
8243
  warn$1(
8169
- `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.`
8244
+ `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(camelize(event))}" prop.`
8170
8245
  );
8171
8246
  }
8172
8247
  } else {
@@ -9990,11 +10065,16 @@ function useTemplateRef(key) {
9990
10065
  const r = shallowRef(null);
9991
10066
  if (i) {
9992
10067
  const refs = i.refs === EMPTY_OBJ ? i.refs = {} : i.refs;
9993
- Object.defineProperty(refs, key, {
9994
- enumerable: true,
9995
- get: () => r.value,
9996
- set: (val) => r.value = val
9997
- });
10068
+ let desc;
10069
+ if ((desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable) {
10070
+ warn$1(`useTemplateRef('${key}') already exists.`);
10071
+ } else {
10072
+ Object.defineProperty(refs, key, {
10073
+ enumerable: true,
10074
+ get: () => r.value,
10075
+ set: (val) => r.value = val
10076
+ });
10077
+ }
9998
10078
  } else {
9999
10079
  warn$1(
10000
10080
  `useTemplateRef() is called when there is no active component instance to be associated with.`
@@ -10228,7 +10308,7 @@ function isMemoSame(cached, memo) {
10228
10308
  return true;
10229
10309
  }
10230
10310
 
10231
- const version = "3.5.0-alpha.5";
10311
+ const version = "3.5.0-beta.2";
10232
10312
  const warn = warn$1 ;
10233
10313
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
10234
10314
  const devtools = devtools$1 ;
@@ -10240,13 +10320,26 @@ const _ssrUtils = {
10240
10320
  setCurrentRenderingInstance,
10241
10321
  isVNode: isVNode,
10242
10322
  normalizeVNode,
10243
- getComponentPublicInstance
10323
+ getComponentPublicInstance,
10324
+ ensureValidVNode
10244
10325
  };
10245
10326
  const ssrUtils = _ssrUtils ;
10246
10327
  const resolveFilter = null;
10247
10328
  const compatUtils = null;
10248
10329
  const DeprecationTypes = null;
10249
10330
 
10331
+ let policy = void 0;
10332
+ const tt = typeof window !== "undefined" && window.trustedTypes;
10333
+ if (tt) {
10334
+ try {
10335
+ policy = /* @__PURE__ */ tt.createPolicy("vue", {
10336
+ createHTML: (val) => val
10337
+ });
10338
+ } catch (e) {
10339
+ warn(`Error creating trusted types policy: ${e}`);
10340
+ }
10341
+ }
10342
+ const unsafeToTrustedHTML = policy ? (val) => policy.createHTML(val) : (val) => val;
10250
10343
  const svgNS = "http://www.w3.org/2000/svg";
10251
10344
  const mathmlNS = "http://www.w3.org/1998/Math/MathML";
10252
10345
  const doc = typeof document !== "undefined" ? document : null;
@@ -10294,7 +10387,9 @@ const nodeOps = {
10294
10387
  if (start === end || !(start = start.nextSibling)) break;
10295
10388
  }
10296
10389
  } else {
10297
- templateContainer.innerHTML = namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content;
10390
+ templateContainer.innerHTML = unsafeToTrustedHTML(
10391
+ namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content
10392
+ );
10298
10393
  const template = templateContainer.content;
10299
10394
  if (namespace === "svg" || namespace === "mathml") {
10300
10395
  const wrapper = template.firstChild;
@@ -10664,11 +10759,17 @@ function useCssVars(getter) {
10664
10759
  }
10665
10760
  const setVars = () => {
10666
10761
  const vars = getter(instance.proxy);
10667
- setVarsOnVNode(instance.subTree, vars);
10762
+ if (instance.ce) {
10763
+ setVarsOnNode(instance.ce, vars);
10764
+ } else {
10765
+ setVarsOnVNode(instance.subTree, vars);
10766
+ }
10668
10767
  updateTeleports(vars);
10669
10768
  };
10670
- onMounted(() => {
10769
+ onBeforeMount(() => {
10671
10770
  watchPostEffect(setVars);
10771
+ });
10772
+ onMounted(() => {
10672
10773
  const ob = new MutationObserver(setVars);
10673
10774
  ob.observe(instance.subTree.el.parentNode, { childList: true });
10674
10775
  onUnmounted(() => ob.disconnect());
@@ -11021,16 +11122,24 @@ function shouldSetAsProp(el, key, value, isSVG) {
11021
11122
  if (isNativeOn(key) && isString(value)) {
11022
11123
  return false;
11023
11124
  }
11024
- return key in el;
11125
+ if (key in el) {
11126
+ return true;
11127
+ }
11128
+ if (el._isVueCE && (/[A-Z]/.test(key) || !isString(value))) {
11129
+ return true;
11130
+ }
11131
+ return false;
11025
11132
  }
11026
11133
 
11134
+ const REMOVAL = {};
11027
11135
  /*! #__NO_SIDE_EFFECTS__ */
11028
11136
  // @__NO_SIDE_EFFECTS__
11029
- function defineCustomElement(options, extraOptions, hydrate2) {
11137
+ function defineCustomElement(options, extraOptions, _createApp) {
11030
11138
  const Comp = defineComponent(options, extraOptions);
11139
+ if (isPlainObject(Comp)) extend(Comp, extraOptions);
11031
11140
  class VueCustomElement extends VueElement {
11032
11141
  constructor(initialProps) {
11033
- super(Comp, initialProps, hydrate2);
11142
+ super(Comp, initialProps, _createApp);
11034
11143
  }
11035
11144
  }
11036
11145
  VueCustomElement.def = Comp;
@@ -11038,47 +11147,87 @@ function defineCustomElement(options, extraOptions, hydrate2) {
11038
11147
  }
11039
11148
  /*! #__NO_SIDE_EFFECTS__ */
11040
11149
  const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
11041
- return /* @__PURE__ */ defineCustomElement(options, extraOptions, hydrate);
11150
+ return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
11042
11151
  };
11043
11152
  const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
11044
11153
  };
11045
11154
  class VueElement extends BaseClass {
11046
- constructor(_def, _props = {}, hydrate2) {
11155
+ constructor(_def, _props = {}, _createApp = createApp) {
11047
11156
  super();
11048
11157
  this._def = _def;
11049
11158
  this._props = _props;
11159
+ this._createApp = _createApp;
11160
+ this._isVueCE = true;
11050
11161
  /**
11051
11162
  * @internal
11052
11163
  */
11053
11164
  this._instance = null;
11165
+ /**
11166
+ * @internal
11167
+ */
11168
+ this._app = null;
11169
+ /**
11170
+ * @internal
11171
+ */
11172
+ this._nonce = this._def.nonce;
11054
11173
  this._connected = false;
11055
11174
  this._resolved = false;
11056
11175
  this._numberProps = null;
11176
+ this._styleChildren = /* @__PURE__ */ new WeakSet();
11057
11177
  this._ob = null;
11058
- if (this.shadowRoot && hydrate2) {
11059
- hydrate2(this._createVNode(), this.shadowRoot);
11178
+ if (this.shadowRoot && _createApp !== createApp) {
11179
+ this._root = this.shadowRoot;
11060
11180
  } else {
11061
11181
  if (this.shadowRoot) {
11062
11182
  warn(
11063
11183
  `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
11064
11184
  );
11065
11185
  }
11066
- this.attachShadow({ mode: "open" });
11067
- if (!this._def.__asyncLoader) {
11068
- this._resolveProps(this._def);
11186
+ if (_def.shadowRoot !== false) {
11187
+ this.attachShadow({ mode: "open" });
11188
+ this._root = this.shadowRoot;
11189
+ } else {
11190
+ this._root = this;
11069
11191
  }
11070
11192
  }
11193
+ if (!this._def.__asyncLoader) {
11194
+ this._resolveProps(this._def);
11195
+ }
11071
11196
  }
11072
11197
  connectedCallback() {
11198
+ if (!this.shadowRoot) {
11199
+ this._parseSlots();
11200
+ }
11073
11201
  this._connected = true;
11202
+ let parent = this;
11203
+ while (parent = parent && (parent.parentNode || parent.host)) {
11204
+ if (parent instanceof VueElement) {
11205
+ this._parent = parent;
11206
+ break;
11207
+ }
11208
+ }
11074
11209
  if (!this._instance) {
11075
11210
  if (this._resolved) {
11211
+ this._setParent();
11076
11212
  this._update();
11077
11213
  } else {
11078
- this._resolveDef();
11214
+ if (parent && parent._pendingResolve) {
11215
+ this._pendingResolve = parent._pendingResolve.then(() => {
11216
+ this._pendingResolve = void 0;
11217
+ this._resolveDef();
11218
+ });
11219
+ } else {
11220
+ this._resolveDef();
11221
+ }
11079
11222
  }
11080
11223
  }
11081
11224
  }
11225
+ _setParent(parent = this._parent) {
11226
+ if (parent) {
11227
+ this._instance.parent = parent._instance;
11228
+ this._instance.provides = parent._instance.provides;
11229
+ }
11230
+ }
11082
11231
  disconnectedCallback() {
11083
11232
  this._connected = false;
11084
11233
  nextTick(() => {
@@ -11087,8 +11236,9 @@ class VueElement extends BaseClass {
11087
11236
  this._ob.disconnect();
11088
11237
  this._ob = null;
11089
11238
  }
11090
- render(null, this.shadowRoot);
11091
- this._instance = null;
11239
+ this._app && this._app.unmount();
11240
+ this._instance.ce = void 0;
11241
+ this._app = this._instance = null;
11092
11242
  }
11093
11243
  });
11094
11244
  }
@@ -11096,7 +11246,9 @@ class VueElement extends BaseClass {
11096
11246
  * resolve inner component definition (handle possible async component)
11097
11247
  */
11098
11248
  _resolveDef() {
11099
- this._resolved = true;
11249
+ if (this._pendingResolve) {
11250
+ return;
11251
+ }
11100
11252
  for (let i = 0; i < this.attributes.length; i++) {
11101
11253
  this._setAttr(this.attributes[i].name);
11102
11254
  }
@@ -11107,6 +11259,8 @@ class VueElement extends BaseClass {
11107
11259
  });
11108
11260
  this._ob.observe(this, { attributes: true });
11109
11261
  const resolve = (def, isAsync = false) => {
11262
+ this._resolved = true;
11263
+ this._pendingResolve = void 0;
11110
11264
  const { props, styles } = def;
11111
11265
  let numberProps;
11112
11266
  if (props && !isArray(props)) {
@@ -11124,22 +11278,53 @@ class VueElement extends BaseClass {
11124
11278
  if (isAsync) {
11125
11279
  this._resolveProps(def);
11126
11280
  }
11127
- this._applyStyles(styles);
11128
- this._update();
11281
+ if (this.shadowRoot) {
11282
+ this._applyStyles(styles);
11283
+ } else if (styles) {
11284
+ warn(
11285
+ "Custom element style injection is not supported when using shadowRoot: false"
11286
+ );
11287
+ }
11288
+ this._mount(def);
11129
11289
  };
11130
11290
  const asyncDef = this._def.__asyncLoader;
11131
11291
  if (asyncDef) {
11132
- asyncDef().then((def) => resolve(def, true));
11292
+ this._pendingResolve = asyncDef().then(
11293
+ (def) => resolve(this._def = def, true)
11294
+ );
11133
11295
  } else {
11134
11296
  resolve(this._def);
11135
11297
  }
11136
11298
  }
11299
+ _mount(def) {
11300
+ if (!def.name) {
11301
+ def.name = "VueElement";
11302
+ }
11303
+ this._app = this._createApp(def);
11304
+ if (def.configureApp) {
11305
+ def.configureApp(this._app);
11306
+ }
11307
+ this._app._ceVNode = this._createVNode();
11308
+ this._app.mount(this._root);
11309
+ const exposed = this._instance && this._instance.exposed;
11310
+ if (!exposed) return;
11311
+ for (const key in exposed) {
11312
+ if (!hasOwn(this, key)) {
11313
+ Object.defineProperty(this, key, {
11314
+ // unwrap ref to be consistent with public instance behavior
11315
+ get: () => unref(exposed[key])
11316
+ });
11317
+ } else {
11318
+ warn(`Exposed property "${key}" already exists on custom element.`);
11319
+ }
11320
+ }
11321
+ }
11137
11322
  _resolveProps(def) {
11138
11323
  const { props } = def;
11139
11324
  const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
11140
11325
  for (const key of Object.keys(this)) {
11141
11326
  if (key[0] !== "_" && declaredPropKeys.includes(key)) {
11142
- this._setProp(key, this[key], true, false);
11327
+ this._setProp(key, this[key]);
11143
11328
  }
11144
11329
  }
11145
11330
  for (const key of declaredPropKeys.map(camelize)) {
@@ -11148,18 +11333,20 @@ class VueElement extends BaseClass {
11148
11333
  return this._getProp(key);
11149
11334
  },
11150
11335
  set(val) {
11151
- this._setProp(key, val);
11336
+ this._setProp(key, val, true, true);
11152
11337
  }
11153
11338
  });
11154
11339
  }
11155
11340
  }
11156
11341
  _setAttr(key) {
11157
- let value = this.hasAttribute(key) ? this.getAttribute(key) : void 0;
11342
+ if (key.startsWith("data-v-")) return;
11343
+ const has = this.hasAttribute(key);
11344
+ let value = has ? this.getAttribute(key) : REMOVAL;
11158
11345
  const camelKey = camelize(key);
11159
- if (this._numberProps && this._numberProps[camelKey]) {
11346
+ if (has && this._numberProps && this._numberProps[camelKey]) {
11160
11347
  value = toNumber(value);
11161
11348
  }
11162
- this._setProp(camelKey, value, false);
11349
+ this._setProp(camelKey, value, false, true);
11163
11350
  }
11164
11351
  /**
11165
11352
  * @internal
@@ -11170,9 +11357,13 @@ class VueElement extends BaseClass {
11170
11357
  /**
11171
11358
  * @internal
11172
11359
  */
11173
- _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
11360
+ _setProp(key, val, shouldReflect = true, shouldUpdate = false) {
11174
11361
  if (val !== this._props[key]) {
11175
- this._props[key] = val;
11362
+ if (val === REMOVAL) {
11363
+ delete this._props[key];
11364
+ } else {
11365
+ this._props[key] = val;
11366
+ }
11176
11367
  if (shouldUpdate && this._instance) {
11177
11368
  this._update();
11178
11369
  }
@@ -11188,18 +11379,23 @@ class VueElement extends BaseClass {
11188
11379
  }
11189
11380
  }
11190
11381
  _update() {
11191
- render(this._createVNode(), this.shadowRoot);
11382
+ render(this._createVNode(), this._root);
11192
11383
  }
11193
11384
  _createVNode() {
11194
- const vnode = createVNode(this._def, extend({}, this._props));
11385
+ const baseProps = {};
11386
+ if (!this.shadowRoot) {
11387
+ baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
11388
+ }
11389
+ const vnode = createVNode(this._def, extend(baseProps, this._props));
11195
11390
  if (!this._instance) {
11196
11391
  vnode.ce = (instance) => {
11197
11392
  this._instance = instance;
11393
+ instance.ce = this;
11198
11394
  instance.isCE = true;
11199
11395
  {
11200
11396
  instance.ceReload = (newStyles) => {
11201
11397
  if (this._styles) {
11202
- this._styles.forEach((s) => this.shadowRoot.removeChild(s));
11398
+ this._styles.forEach((s) => this._root.removeChild(s));
11203
11399
  this._styles.length = 0;
11204
11400
  }
11205
11401
  this._applyStyles(newStyles);
@@ -11209,9 +11405,10 @@ class VueElement extends BaseClass {
11209
11405
  }
11210
11406
  const dispatch = (event, args) => {
11211
11407
  this.dispatchEvent(
11212
- new CustomEvent(event, {
11213
- detail: args
11214
- })
11408
+ new CustomEvent(
11409
+ event,
11410
+ isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
11411
+ )
11215
11412
  );
11216
11413
  };
11217
11414
  instance.emit = (event, ...args) => {
@@ -11220,31 +11417,127 @@ class VueElement extends BaseClass {
11220
11417
  dispatch(hyphenate(event), args);
11221
11418
  }
11222
11419
  };
11223
- let parent = this;
11224
- while (parent = parent && (parent.parentNode || parent.host)) {
11225
- if (parent instanceof VueElement) {
11226
- instance.parent = parent._instance;
11227
- instance.provides = parent._instance.provides;
11228
- break;
11229
- }
11230
- }
11420
+ this._setParent();
11231
11421
  };
11232
11422
  }
11233
11423
  return vnode;
11234
11424
  }
11235
- _applyStyles(styles) {
11236
- if (styles) {
11237
- styles.forEach((css) => {
11238
- const s = document.createElement("style");
11239
- s.textContent = css;
11240
- this.shadowRoot.appendChild(s);
11241
- {
11425
+ _applyStyles(styles, owner) {
11426
+ if (!styles) return;
11427
+ if (owner) {
11428
+ if (owner === this._def || this._styleChildren.has(owner)) {
11429
+ return;
11430
+ }
11431
+ this._styleChildren.add(owner);
11432
+ }
11433
+ const nonce = this._nonce;
11434
+ for (let i = styles.length - 1; i >= 0; i--) {
11435
+ const s = document.createElement("style");
11436
+ if (nonce) s.setAttribute("nonce", nonce);
11437
+ s.textContent = styles[i];
11438
+ this.shadowRoot.prepend(s);
11439
+ {
11440
+ if (owner) {
11441
+ if (owner.__hmrId) {
11442
+ if (!this._childStyles) this._childStyles = /* @__PURE__ */ new Map();
11443
+ let entry = this._childStyles.get(owner.__hmrId);
11444
+ if (!entry) {
11445
+ this._childStyles.set(owner.__hmrId, entry = []);
11446
+ }
11447
+ entry.push(s);
11448
+ }
11449
+ } else {
11242
11450
  (this._styles || (this._styles = [])).push(s);
11243
11451
  }
11244
- });
11452
+ }
11453
+ }
11454
+ }
11455
+ /**
11456
+ * Only called when shaddowRoot is false
11457
+ */
11458
+ _parseSlots() {
11459
+ const slots = this._slots = {};
11460
+ let n;
11461
+ while (n = this.firstChild) {
11462
+ const slotName = n.nodeType === 1 && n.getAttribute("slot") || "default";
11463
+ (slots[slotName] || (slots[slotName] = [])).push(n);
11464
+ this.removeChild(n);
11465
+ }
11466
+ }
11467
+ /**
11468
+ * Only called when shaddowRoot is false
11469
+ */
11470
+ _renderSlots() {
11471
+ const outlets = this.querySelectorAll("slot");
11472
+ const scopeId = this._instance.type.__scopeId;
11473
+ for (let i = 0; i < outlets.length; i++) {
11474
+ const o = outlets[i];
11475
+ const slotName = o.getAttribute("name") || "default";
11476
+ const content = this._slots[slotName];
11477
+ const parent = o.parentNode;
11478
+ if (content) {
11479
+ for (const n of content) {
11480
+ if (scopeId && n.nodeType === 1) {
11481
+ const id = scopeId + "-s";
11482
+ const walker = document.createTreeWalker(n, 1);
11483
+ n.setAttribute(id, "");
11484
+ let child;
11485
+ while (child = walker.nextNode()) {
11486
+ child.setAttribute(id, "");
11487
+ }
11488
+ }
11489
+ parent.insertBefore(n, o);
11490
+ }
11491
+ } else {
11492
+ while (o.firstChild) parent.insertBefore(o.firstChild, o);
11493
+ }
11494
+ parent.removeChild(o);
11495
+ }
11496
+ }
11497
+ /**
11498
+ * @internal
11499
+ */
11500
+ _injectChildStyle(comp) {
11501
+ this._applyStyles(comp.styles, comp);
11502
+ }
11503
+ /**
11504
+ * @internal
11505
+ */
11506
+ _removeChildStyle(comp) {
11507
+ {
11508
+ this._styleChildren.delete(comp);
11509
+ if (this._childStyles && comp.__hmrId) {
11510
+ const oldStyles = this._childStyles.get(comp.__hmrId);
11511
+ if (oldStyles) {
11512
+ oldStyles.forEach((s) => this._root.removeChild(s));
11513
+ oldStyles.length = 0;
11514
+ }
11515
+ }
11245
11516
  }
11246
11517
  }
11247
11518
  }
11519
+ function useHost(caller) {
11520
+ const instance = getCurrentInstance();
11521
+ const el = instance && instance.ce;
11522
+ if (el) {
11523
+ return el;
11524
+ } else {
11525
+ if (!instance) {
11526
+ warn(
11527
+ `${caller || "useHost"} called without an active component instance.`
11528
+ );
11529
+ } else {
11530
+ warn(
11531
+ `${caller || "useHost"} can only be used in components defined via defineCustomElement.`
11532
+ );
11533
+ }
11534
+ }
11535
+ return null;
11536
+ }
11537
+ function useShadowRoot() {
11538
+ const el = useHost("useShadowRoot") ;
11539
+ return el && el.shadowRoot;
11540
+ }
11248
11541
 
11249
11542
  function useCssModule(name = "$style") {
11250
11543
  {
@@ -11758,7 +12051,9 @@ const createApp = (...args) => {
11758
12051
  if (!isFunction(component) && !component.render && !component.template) {
11759
12052
  component.template = container.innerHTML;
11760
12053
  }
11761
- container.innerHTML = "";
12054
+ if (container.nodeType === 1) {
12055
+ container.textContent = "";
12056
+ }
11762
12057
  const proxy = mount(container, false, resolveRootNamespace(container));
11763
12058
  if (container instanceof Element) {
11764
12059
  container.removeAttribute("v-cloak");
@@ -11852,4 +12147,4 @@ const initDirectivesForSSR = () => {
11852
12147
  }
11853
12148
  } ;
11854
12149
 
11855
- 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, createApp, createBlock, createCommentVNode, createElementBlock, createBaseVNode as createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, 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 };
12150
+ 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, createApp, createBlock, createCommentVNode, createElementBlock, createBaseVNode as createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, 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 };