vue 3.5.0-alpha.5 → 3.5.0-beta.1

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 v3.5.0-alpha.5
2
+ * vue v3.5.0-beta.1
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++) {
@@ -386,6 +390,7 @@ class EffectScope {
386
390
  * @internal
387
391
  */
388
392
  this.cleanups = [];
393
+ this._isPaused = false;
389
394
  this.parent = activeEffectScope;
390
395
  if (!detached && activeEffectScope) {
391
396
  this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
@@ -396,6 +401,37 @@ class EffectScope {
396
401
  get active() {
397
402
  return this._active;
398
403
  }
404
+ pause() {
405
+ if (this._active) {
406
+ this._isPaused = true;
407
+ if (this.scopes) {
408
+ for (let i = 0, l = this.scopes.length; i < l; i++) {
409
+ this.scopes[i].pause();
410
+ }
411
+ }
412
+ for (let i = 0, l = this.effects.length; i < l; i++) {
413
+ this.effects[i].pause();
414
+ }
415
+ }
416
+ }
417
+ /**
418
+ * Resumes the effect scope, including all child scopes and effects.
419
+ */
420
+ resume() {
421
+ if (this._active) {
422
+ if (this._isPaused) {
423
+ this._isPaused = false;
424
+ if (this.scopes) {
425
+ for (let i = 0, l = this.scopes.length; i < l; i++) {
426
+ this.scopes[i].resume();
427
+ }
428
+ }
429
+ for (let i = 0, l = this.effects.length; i < l; i++) {
430
+ this.effects[i].resume();
431
+ }
432
+ }
433
+ }
434
+ }
399
435
  run(fn) {
400
436
  if (this._active) {
401
437
  const currentEffectScope = activeEffectScope;
@@ -466,6 +502,7 @@ function onScopeDispose(fn, failSilently = false) {
466
502
  }
467
503
 
468
504
  let activeSub;
505
+ const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
469
506
  class ReactiveEffect {
470
507
  constructor(fn) {
471
508
  this.fn = fn;
@@ -494,6 +531,18 @@ class ReactiveEffect {
494
531
  activeEffectScope.effects.push(this);
495
532
  }
496
533
  }
534
+ pause() {
535
+ this.flags |= 128;
536
+ }
537
+ resume() {
538
+ if (this.flags & 128) {
539
+ this.flags &= ~128;
540
+ if (pausedQueueEffects.has(this)) {
541
+ pausedQueueEffects.delete(this);
542
+ this.trigger();
543
+ }
544
+ }
545
+ }
497
546
  /**
498
547
  * @internal
499
548
  */
@@ -547,7 +596,9 @@ class ReactiveEffect {
547
596
  }
548
597
  }
549
598
  trigger() {
550
- if (this.scheduler) {
599
+ if (this.flags & 128) {
600
+ pausedQueueEffects.add(this);
601
+ } else if (this.scheduler) {
551
602
  this.scheduler();
552
603
  } else {
553
604
  this.runIfDirty();
@@ -867,9 +918,15 @@ function addSub(link) {
867
918
  link.dep.subs = link;
868
919
  }
869
920
  const targetMap = /* @__PURE__ */ new WeakMap();
870
- const ITERATE_KEY = Symbol("Object iterate" );
871
- const MAP_KEY_ITERATE_KEY = Symbol("Map keys iterate" );
872
- const ARRAY_ITERATE_KEY = Symbol("Array iterate" );
921
+ const ITERATE_KEY = Symbol(
922
+ "Object iterate"
923
+ );
924
+ const MAP_KEY_ITERATE_KEY = Symbol(
925
+ "Map keys iterate"
926
+ );
927
+ const ARRAY_ITERATE_KEY = Symbol(
928
+ "Array iterate"
929
+ );
873
930
  function track(target, type, key) {
874
931
  if (shouldTrack && activeSub) {
875
932
  let depsMap = targetMap.get(target);
@@ -1159,7 +1216,7 @@ class BaseReactiveHandler {
1159
1216
  return isShallow2;
1160
1217
  } else if (key === "__v_raw") {
1161
1218
  if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
1162
- // this means the reciever is a user proxy of the reactive proxy
1219
+ // this means the receiver is a user proxy of the reactive proxy
1163
1220
  Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
1164
1221
  return target;
1165
1222
  }
@@ -1283,9 +1340,7 @@ class ReadonlyReactiveHandler extends BaseReactiveHandler {
1283
1340
  }
1284
1341
  const mutableHandlers = /* @__PURE__ */ new MutableReactiveHandler();
1285
1342
  const readonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler();
1286
- const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(
1287
- true
1288
- );
1343
+ const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(true);
1289
1344
  const shallowReadonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler(true);
1290
1345
 
1291
1346
  const toShallow = (value) => value;
@@ -1780,13 +1835,14 @@ function proxyRefs(objectWithRefs) {
1780
1835
  class CustomRefImpl {
1781
1836
  constructor(factory) {
1782
1837
  this["__v_isRef"] = true;
1838
+ this._value = void 0;
1783
1839
  const dep = this.dep = new Dep();
1784
1840
  const { get, set } = factory(dep.track.bind(dep), dep.trigger.bind(dep));
1785
1841
  this._get = get;
1786
1842
  this._set = set;
1787
1843
  }
1788
1844
  get value() {
1789
- return this._get();
1845
+ return this._value = this._get();
1790
1846
  }
1791
1847
  set value(newVal) {
1792
1848
  this._set(newVal);
@@ -1811,10 +1867,11 @@ class ObjectRefImpl {
1811
1867
  this._key = _key;
1812
1868
  this._defaultValue = _defaultValue;
1813
1869
  this["__v_isRef"] = true;
1870
+ this._value = void 0;
1814
1871
  }
1815
1872
  get value() {
1816
1873
  const val = this._object[this._key];
1817
- return val === void 0 ? this._defaultValue : val;
1874
+ return this._value = val === void 0 ? this._defaultValue : val;
1818
1875
  }
1819
1876
  set value(newVal) {
1820
1877
  this._object[this._key] = newVal;
@@ -1828,9 +1885,10 @@ class GetterRefImpl {
1828
1885
  this._getter = _getter;
1829
1886
  this["__v_isRef"] = true;
1830
1887
  this["__v_isReadonly"] = true;
1888
+ this._value = void 0;
1831
1889
  }
1832
1890
  get value() {
1833
- return this._getter();
1891
+ return this._value = this._getter();
1834
1892
  }
1835
1893
  }
1836
1894
  function toRef(source, key, defaultValue) {
@@ -1864,7 +1922,8 @@ class ComputedRefImpl {
1864
1922
  /**
1865
1923
  * @internal
1866
1924
  */
1867
- this["__v_isRef"] = true;
1925
+ this.__v_isRef = true;
1926
+ // TODO isolatedDeclarations "__v_isReadonly"
1868
1927
  // A computed is also a subscriber that tracks other deps
1869
1928
  /**
1870
1929
  * @internal
@@ -2489,6 +2548,9 @@ function reload(id, newComp) {
2489
2548
  "[HMR] Root or manually mounted instance modified. Full reload required."
2490
2549
  );
2491
2550
  }
2551
+ if (instance.root.ce && instance !== instance.root) {
2552
+ instance.root.ce._removeChildStyle(oldComp);
2553
+ }
2492
2554
  }
2493
2555
  queuePostFlushCb(() => {
2494
2556
  hmrDirtyComponents.clear();
@@ -2568,9 +2630,7 @@ function devtoolsInitApp(app, version) {
2568
2630
  function devtoolsUnmountApp(app) {
2569
2631
  emit$1("app:unmount" /* APP_UNMOUNT */, app);
2570
2632
  }
2571
- const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook(
2572
- "component:added" /* COMPONENT_ADDED */
2573
- );
2633
+ const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook("component:added" /* COMPONENT_ADDED */);
2574
2634
  const devtoolsComponentUpdated = /* @__PURE__ */ createDevtoolsComponentHook("component:updated" /* COMPONENT_UPDATED */);
2575
2635
  const _devtoolsComponentRemoved = /* @__PURE__ */ createDevtoolsComponentHook(
2576
2636
  "component:removed" /* COMPONENT_REMOVED */
@@ -2594,12 +2654,8 @@ function createDevtoolsComponentHook(hook) {
2594
2654
  );
2595
2655
  };
2596
2656
  }
2597
- const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook(
2598
- "perf:start" /* PERFORMANCE_START */
2599
- );
2600
- const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook(
2601
- "perf:end" /* PERFORMANCE_END */
2602
- );
2657
+ const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:start" /* PERFORMANCE_START */);
2658
+ const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:end" /* PERFORMANCE_END */);
2603
2659
  function createDevtoolsPerformanceHook(hook) {
2604
2660
  return (component, type, time) => {
2605
2661
  emit$1(hook, component.appContext.app, component.uid, component, type, time);
@@ -3777,6 +3833,7 @@ Server rendered element contains more child nodes than client vdom.`
3777
3833
  }
3778
3834
  if (props) {
3779
3835
  {
3836
+ const isCustomElement = el.tagName.includes("-");
3780
3837
  for (const key in props) {
3781
3838
  if (// #11189 skip if this node has directives that have created hooks
3782
3839
  // as it could have mutated the DOM in any possible way
@@ -3784,7 +3841,7 @@ Server rendered element contains more child nodes than client vdom.`
3784
3841
  logMismatchError();
3785
3842
  }
3786
3843
  if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
3787
- key[0] === ".") {
3844
+ key[0] === "." || isCustomElement) {
3788
3845
  patchProp(el, key, null, props[key], void 0, parentComponent);
3789
3846
  }
3790
3847
  }
@@ -4109,24 +4166,19 @@ function isMismatchAllowed(el, allowedType) {
4109
4166
  }
4110
4167
  }
4111
4168
 
4112
- const hydrateOnIdle = () => (hydrate) => {
4113
- const id = requestIdleCallback(hydrate);
4169
+ const hydrateOnIdle = (timeout = 1e4) => (hydrate) => {
4170
+ const id = requestIdleCallback(hydrate, { timeout });
4114
4171
  return () => cancelIdleCallback(id);
4115
4172
  };
4116
- const hydrateOnVisible = (margin = 0) => (hydrate, forEach) => {
4117
- const ob = new IntersectionObserver(
4118
- (entries) => {
4119
- for (const e of entries) {
4120
- if (!e.isIntersecting) continue;
4121
- ob.disconnect();
4122
- hydrate();
4123
- break;
4124
- }
4125
- },
4126
- {
4127
- rootMargin: isString(margin) ? margin : margin + "px"
4173
+ const hydrateOnVisible = (opts) => (hydrate, forEach) => {
4174
+ const ob = new IntersectionObserver((entries) => {
4175
+ for (const e of entries) {
4176
+ if (!e.isIntersecting) continue;
4177
+ ob.disconnect();
4178
+ hydrate();
4179
+ break;
4128
4180
  }
4129
- );
4181
+ }, opts);
4130
4182
  forEach((el) => ob.observe(el));
4131
4183
  return () => ob.disconnect();
4132
4184
  };
@@ -4441,7 +4493,7 @@ const KeepAliveImpl = {
4441
4493
  }
4442
4494
  function pruneCacheEntry(key) {
4443
4495
  const cached = cache.get(key);
4444
- if (!current || !isSameVNodeType(cached, current)) {
4496
+ if (cached && (!current || !isSameVNodeType(cached, current))) {
4445
4497
  unmount(cached);
4446
4498
  } else if (current) {
4447
4499
  resetShapeFlag(current);
@@ -4503,6 +4555,10 @@ const KeepAliveImpl = {
4503
4555
  return rawVNode;
4504
4556
  }
4505
4557
  let vnode = getInnerChild(rawVNode);
4558
+ if (vnode.type === Comment) {
4559
+ current = null;
4560
+ return vnode;
4561
+ }
4506
4562
  const comp = vnode.type;
4507
4563
  const name = getComponentName(
4508
4564
  isAsyncWrapper(vnode) ? vnode.type.__asyncResolved || {} : comp
@@ -4632,17 +4688,19 @@ const createHook = (lifecycle) => (hook, target = currentInstance) => {
4632
4688
  };
4633
4689
  const onBeforeMount = createHook("bm");
4634
4690
  const onMounted = createHook("m");
4635
- const onBeforeUpdate = createHook("bu");
4691
+ const onBeforeUpdate = createHook(
4692
+ "bu"
4693
+ );
4636
4694
  const onUpdated = createHook("u");
4637
- const onBeforeUnmount = createHook("bum");
4638
- const onUnmounted = createHook("um");
4639
- const onServerPrefetch = createHook("sp");
4640
- const onRenderTriggered = createHook(
4641
- "rtg"
4695
+ const onBeforeUnmount = createHook(
4696
+ "bum"
4642
4697
  );
4643
- const onRenderTracked = createHook(
4644
- "rtc"
4698
+ const onUnmounted = createHook("um");
4699
+ const onServerPrefetch = createHook(
4700
+ "sp"
4645
4701
  );
4702
+ const onRenderTriggered = createHook("rtg");
4703
+ const onRenderTracked = createHook("rtc");
4646
4704
  function onErrorCaptured(hook, target = currentInstance) {
4647
4705
  injectHook("ec", hook, target);
4648
4706
  }
@@ -4769,9 +4827,14 @@ function createSlots(slots, dynamicSlots) {
4769
4827
  }
4770
4828
 
4771
4829
  function renderSlot(slots, name, props = {}, fallback, noSlotted) {
4772
- if (currentRenderingInstance.isCE || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.isCE) {
4830
+ if (currentRenderingInstance.ce || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.ce) {
4773
4831
  if (name !== "default") props.name = name;
4774
- return createVNode("slot", props, fallback && fallback());
4832
+ return openBlock(), createBlock(
4833
+ Fragment,
4834
+ null,
4835
+ [createVNode("slot", props, fallback && fallback())],
4836
+ 64
4837
+ );
4775
4838
  }
4776
4839
  let slot = slots[name];
4777
4840
  if (slot && slot.length > 1) {
@@ -4844,6 +4907,7 @@ const publicPropertiesMap = (
4844
4907
  $refs: (i) => shallowReadonly(i.refs) ,
4845
4908
  $parent: (i) => getPublicInstance(i.parent),
4846
4909
  $root: (i) => getPublicInstance(i.root),
4910
+ $host: (i) => i.ce,
4847
4911
  $emit: (i) => i.emit,
4848
4912
  $options: (i) => resolveMergedOptions(i) ,
4849
4913
  $forceUpdate: (i) => i.f || (i.f = () => {
@@ -4995,29 +5059,25 @@ const PublicInstanceProxyHandlers = {
4995
5059
  return Reflect.ownKeys(target);
4996
5060
  };
4997
5061
  }
4998
- const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend(
4999
- {},
5000
- PublicInstanceProxyHandlers,
5001
- {
5002
- get(target, key) {
5003
- if (key === Symbol.unscopables) {
5004
- return;
5005
- }
5006
- return PublicInstanceProxyHandlers.get(target, key, target);
5007
- },
5008
- has(_, key) {
5009
- const has = key[0] !== "_" && !isGloballyAllowed(key);
5010
- if (!has && PublicInstanceProxyHandlers.has(_, key)) {
5011
- warn$1(
5012
- `Property ${JSON.stringify(
5013
- key
5014
- )} should not start with _ which is a reserved prefix for Vue internals.`
5015
- );
5016
- }
5017
- return has;
5062
+ const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend({}, PublicInstanceProxyHandlers, {
5063
+ get(target, key) {
5064
+ if (key === Symbol.unscopables) {
5065
+ return;
5066
+ }
5067
+ return PublicInstanceProxyHandlers.get(target, key, target);
5068
+ },
5069
+ has(_, key) {
5070
+ const has = key[0] !== "_" && !isGloballyAllowed(key);
5071
+ if (!has && PublicInstanceProxyHandlers.has(_, key)) {
5072
+ warn$1(
5073
+ `Property ${JSON.stringify(
5074
+ key
5075
+ )} should not start with _ which is a reserved prefix for Vue internals.`
5076
+ );
5018
5077
  }
5078
+ return has;
5019
5079
  }
5020
- );
5080
+ });
5021
5081
  function createDevRenderContext(instance) {
5022
5082
  const target = {};
5023
5083
  Object.defineProperty(target, `_`, {
@@ -5719,7 +5779,7 @@ function createAppAPI(render, hydrate) {
5719
5779
  If you want to mount another app on the same host container, you need to unmount the previous app by calling \`app.unmount()\` first.`
5720
5780
  );
5721
5781
  }
5722
- const vnode = createVNode(rootComponent, rootProps);
5782
+ const vnode = app._ceVNode || createVNode(rootComponent, rootProps);
5723
5783
  vnode.appContext = context;
5724
5784
  if (namespace === true) {
5725
5785
  namespace = "svg";
@@ -5821,7 +5881,7 @@ function provide(key, value) {
5821
5881
  function inject(key, defaultValue, treatDefaultAsFactory = false) {
5822
5882
  const instance = currentInstance || currentRenderingInstance;
5823
5883
  if (instance || currentApp) {
5824
- const provides = instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : currentApp._context.provides;
5884
+ const provides = currentApp ? currentApp._context.provides : instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : void 0;
5825
5885
  if (provides && key in provides) {
5826
5886
  return provides[key];
5827
5887
  } else if (arguments.length > 1) {
@@ -6026,6 +6086,9 @@ function resolvePropValue(options, props, key, value, instance, isAbsent) {
6026
6086
  } else {
6027
6087
  value = defaultValue;
6028
6088
  }
6089
+ if (instance.ce) {
6090
+ instance.ce._setProp(key, value);
6091
+ }
6029
6092
  }
6030
6093
  if (opt[0 /* shouldCast */]) {
6031
6094
  if (isAbsent && !hasDefault) {
@@ -7024,8 +7087,8 @@ function baseCreateRenderer(options, createHydrationFns) {
7024
7087
  const componentUpdateFn = () => {
7025
7088
  if (!instance.isMounted) {
7026
7089
  let vnodeHook;
7027
- const { el, props, type } = initialVNode;
7028
- const { bm, m, parent } = instance;
7090
+ const { el, props } = initialVNode;
7091
+ const { bm, m, parent, root, type } = instance;
7029
7092
  const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);
7030
7093
  toggleRecurse(instance, false);
7031
7094
  if (bm) {
@@ -7068,6 +7131,9 @@ function baseCreateRenderer(options, createHydrationFns) {
7068
7131
  hydrateSubTree();
7069
7132
  }
7070
7133
  } else {
7134
+ if (root.ce) {
7135
+ root.ce._injectChildStyle(type);
7136
+ }
7071
7137
  {
7072
7138
  startMeasure(instance, `render`);
7073
7139
  }
@@ -7741,13 +7807,13 @@ function baseCreateRenderer(options, createHydrationFns) {
7741
7807
  namespace
7742
7808
  );
7743
7809
  }
7810
+ container._vnode = vnode;
7744
7811
  if (!isFlushing) {
7745
7812
  isFlushing = true;
7746
7813
  flushPreFlushCbs();
7747
7814
  flushPostFlushCbs();
7748
7815
  isFlushing = false;
7749
7816
  }
7750
- container._vnode = vnode;
7751
7817
  };
7752
7818
  const internals = {
7753
7819
  p: patch,
@@ -7921,14 +7987,9 @@ function doWatch(source, cb, {
7921
7987
  const _cb = cb;
7922
7988
  cb = (...args) => {
7923
7989
  _cb(...args);
7924
- unwatch();
7990
+ watchHandle();
7925
7991
  };
7926
7992
  }
7927
- if (deep !== void 0 && typeof deep === "number") {
7928
- warn$1(
7929
- `watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.`
7930
- );
7931
- }
7932
7993
  if (!cb) {
7933
7994
  if (immediate !== void 0) {
7934
7995
  warn$1(
@@ -7954,10 +8015,12 @@ function doWatch(source, cb, {
7954
8015
  );
7955
8016
  };
7956
8017
  const instance = currentInstance;
7957
- const reactiveGetter = (source2) => deep === true ? source2 : (
7958
- // for deep: false, only traverse root-level properties
7959
- traverse(source2, deep === false ? 1 : void 0)
7960
- );
8018
+ const reactiveGetter = (source2) => {
8019
+ if (deep) return source2;
8020
+ if (isShallow(source2) || deep === false || deep === 0)
8021
+ return traverse(source2, 1);
8022
+ return traverse(source2);
8023
+ };
7961
8024
  let getter;
7962
8025
  let forceTrigger = false;
7963
8026
  let isMultiSource = false;
@@ -8003,7 +8066,8 @@ function doWatch(source, cb, {
8003
8066
  }
8004
8067
  if (cb && deep) {
8005
8068
  const baseGetter = getter;
8006
- getter = () => traverse(baseGetter());
8069
+ const depth = deep === true ? Infinity : deep;
8070
+ getter = () => traverse(baseGetter(), depth);
8007
8071
  }
8008
8072
  let cleanup;
8009
8073
  let onCleanup = (fn) => {
@@ -8028,7 +8092,12 @@ function doWatch(source, cb, {
8028
8092
  const ctx = useSSRContext();
8029
8093
  ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
8030
8094
  } else {
8031
- return NOOP;
8095
+ const watchHandle2 = () => {
8096
+ };
8097
+ watchHandle2.stop = NOOP;
8098
+ watchHandle2.resume = NOOP;
8099
+ watchHandle2.pause = NOOP;
8100
+ return watchHandle2;
8032
8101
  }
8033
8102
  }
8034
8103
  let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
@@ -8069,12 +8138,15 @@ function doWatch(source, cb, {
8069
8138
  }
8070
8139
  effect.scheduler = scheduler;
8071
8140
  const scope = getCurrentScope();
8072
- const unwatch = () => {
8141
+ const watchHandle = () => {
8073
8142
  effect.stop();
8074
8143
  if (scope) {
8075
8144
  remove(scope.effects, effect);
8076
8145
  }
8077
8146
  };
8147
+ watchHandle.pause = effect.pause.bind(effect);
8148
+ watchHandle.resume = effect.resume.bind(effect);
8149
+ watchHandle.stop = watchHandle;
8078
8150
  {
8079
8151
  effect.onTrack = onTrack;
8080
8152
  effect.onTrigger = onTrigger;
@@ -8093,8 +8165,8 @@ function doWatch(source, cb, {
8093
8165
  } else {
8094
8166
  effect.run();
8095
8167
  }
8096
- if (ssrCleanup) ssrCleanup.push(unwatch);
8097
- return unwatch;
8168
+ if (ssrCleanup) ssrCleanup.push(watchHandle);
8169
+ return watchHandle;
8098
8170
  }
8099
8171
  function instanceWatch(source, value, options) {
8100
8172
  const publicThis = this.proxy;
@@ -8184,7 +8256,8 @@ function useModel(props, name, options = EMPTY_OBJ) {
8184
8256
  return options.get ? options.get(localValue) : localValue;
8185
8257
  },
8186
8258
  set(value) {
8187
- if (!hasChanged(value, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
8259
+ const emittedValue = options.set ? options.set(value) : value;
8260
+ if (!hasChanged(emittedValue, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
8188
8261
  return;
8189
8262
  }
8190
8263
  const rawProps = i.vnode.props;
@@ -8193,7 +8266,6 @@ function useModel(props, name, options = EMPTY_OBJ) {
8193
8266
  localValue = value;
8194
8267
  trigger();
8195
8268
  }
8196
- const emittedValue = options.set ? options.set(value) : value;
8197
8269
  i.emit(`update:${name}`, emittedValue);
8198
8270
  if (hasChanged(value, emittedValue) && hasChanged(value, prevSetValue) && !hasChanged(emittedValue, prevEmittedValue)) {
8199
8271
  trigger();
@@ -8231,9 +8303,9 @@ function emit(instance, event, ...rawArgs) {
8231
8303
  } = instance;
8232
8304
  if (emitsOptions) {
8233
8305
  if (!(event in emitsOptions) && true) {
8234
- if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
8306
+ if (!propsOptions || !(toHandlerKey(camelize(event)) in propsOptions)) {
8235
8307
  warn$1(
8236
- `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.`
8308
+ `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(camelize(event))}" prop.`
8237
8309
  );
8238
8310
  }
8239
8311
  } else {
@@ -10057,11 +10129,16 @@ function useTemplateRef(key) {
10057
10129
  const r = shallowRef(null);
10058
10130
  if (i) {
10059
10131
  const refs = i.refs === EMPTY_OBJ ? i.refs = {} : i.refs;
10060
- Object.defineProperty(refs, key, {
10061
- enumerable: true,
10062
- get: () => r.value,
10063
- set: (val) => r.value = val
10064
- });
10132
+ let desc;
10133
+ if ((desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable) {
10134
+ warn$1(`useTemplateRef('${key}') already exists.`);
10135
+ } else {
10136
+ Object.defineProperty(refs, key, {
10137
+ enumerable: true,
10138
+ get: () => r.value,
10139
+ set: (val) => r.value = val
10140
+ });
10141
+ }
10065
10142
  } else {
10066
10143
  warn$1(
10067
10144
  `useTemplateRef() is called when there is no active component instance to be associated with.`
@@ -10295,7 +10372,7 @@ function isMemoSame(cached, memo) {
10295
10372
  return true;
10296
10373
  }
10297
10374
 
10298
- const version = "3.5.0-alpha.5";
10375
+ const version = "3.5.0-beta.1";
10299
10376
  const warn = warn$1 ;
10300
10377
  const ErrorTypeStrings = ErrorTypeStrings$1 ;
10301
10378
  const devtools = devtools$1 ;
@@ -10307,13 +10384,26 @@ const _ssrUtils = {
10307
10384
  setCurrentRenderingInstance,
10308
10385
  isVNode: isVNode,
10309
10386
  normalizeVNode,
10310
- getComponentPublicInstance
10387
+ getComponentPublicInstance,
10388
+ ensureValidVNode
10311
10389
  };
10312
10390
  const ssrUtils = _ssrUtils ;
10313
10391
  const resolveFilter = null;
10314
10392
  const compatUtils = null;
10315
10393
  const DeprecationTypes = null;
10316
10394
 
10395
+ let policy = void 0;
10396
+ const tt = typeof window !== "undefined" && window.trustedTypes;
10397
+ if (tt) {
10398
+ try {
10399
+ policy = /* @__PURE__ */ tt.createPolicy("vue", {
10400
+ createHTML: (val) => val
10401
+ });
10402
+ } catch (e) {
10403
+ warn(`Error creating trusted types policy: ${e}`);
10404
+ }
10405
+ }
10406
+ const unsafeToTrustedHTML = policy ? (val) => policy.createHTML(val) : (val) => val;
10317
10407
  const svgNS = "http://www.w3.org/2000/svg";
10318
10408
  const mathmlNS = "http://www.w3.org/1998/Math/MathML";
10319
10409
  const doc = typeof document !== "undefined" ? document : null;
@@ -10361,7 +10451,9 @@ const nodeOps = {
10361
10451
  if (start === end || !(start = start.nextSibling)) break;
10362
10452
  }
10363
10453
  } else {
10364
- templateContainer.innerHTML = namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content;
10454
+ templateContainer.innerHTML = unsafeToTrustedHTML(
10455
+ namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content
10456
+ );
10365
10457
  const template = templateContainer.content;
10366
10458
  if (namespace === "svg" || namespace === "mathml") {
10367
10459
  const wrapper = template.firstChild;
@@ -10731,11 +10823,17 @@ function useCssVars(getter) {
10731
10823
  }
10732
10824
  const setVars = () => {
10733
10825
  const vars = getter(instance.proxy);
10734
- setVarsOnVNode(instance.subTree, vars);
10826
+ if (instance.ce) {
10827
+ setVarsOnNode(instance.ce, vars);
10828
+ } else {
10829
+ setVarsOnVNode(instance.subTree, vars);
10830
+ }
10735
10831
  updateTeleports(vars);
10736
10832
  };
10737
- onMounted(() => {
10833
+ onBeforeMount(() => {
10738
10834
  watchPostEffect(setVars);
10835
+ });
10836
+ onMounted(() => {
10739
10837
  const ob = new MutationObserver(setVars);
10740
10838
  ob.observe(instance.subTree.el.parentNode, { childList: true });
10741
10839
  onUnmounted(() => ob.disconnect());
@@ -11088,16 +11186,24 @@ function shouldSetAsProp(el, key, value, isSVG) {
11088
11186
  if (isNativeOn(key) && isString(value)) {
11089
11187
  return false;
11090
11188
  }
11091
- return key in el;
11189
+ if (key in el) {
11190
+ return true;
11191
+ }
11192
+ if (el._isVueCE && (/[A-Z]/.test(key) || !isString(value))) {
11193
+ return true;
11194
+ }
11195
+ return false;
11092
11196
  }
11093
11197
 
11198
+ const REMOVAL = {};
11094
11199
  /*! #__NO_SIDE_EFFECTS__ */
11095
11200
  // @__NO_SIDE_EFFECTS__
11096
- function defineCustomElement(options, extraOptions, hydrate2) {
11201
+ function defineCustomElement(options, extraOptions, _createApp) {
11097
11202
  const Comp = defineComponent(options, extraOptions);
11203
+ if (isPlainObject(Comp)) extend(Comp, extraOptions);
11098
11204
  class VueCustomElement extends VueElement {
11099
11205
  constructor(initialProps) {
11100
- super(Comp, initialProps, hydrate2);
11206
+ super(Comp, initialProps, _createApp);
11101
11207
  }
11102
11208
  }
11103
11209
  VueCustomElement.def = Comp;
@@ -11105,47 +11211,88 @@ function defineCustomElement(options, extraOptions, hydrate2) {
11105
11211
  }
11106
11212
  /*! #__NO_SIDE_EFFECTS__ */
11107
11213
  const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
11108
- return /* @__PURE__ */ defineCustomElement(options, extraOptions, hydrate);
11214
+ return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
11109
11215
  };
11110
11216
  const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
11111
11217
  };
11112
11218
  class VueElement extends BaseClass {
11113
- constructor(_def, _props = {}, hydrate2) {
11219
+ constructor(_def, _props = {}, _createApp = createApp) {
11114
11220
  super();
11115
11221
  this._def = _def;
11116
11222
  this._props = _props;
11223
+ this._createApp = _createApp;
11224
+ this._isVueCE = true;
11117
11225
  /**
11118
11226
  * @internal
11119
11227
  */
11120
11228
  this._instance = null;
11229
+ /**
11230
+ * @internal
11231
+ */
11232
+ this._app = null;
11233
+ /**
11234
+ * @internal
11235
+ */
11236
+ this._nonce = this._def.nonce;
11121
11237
  this._connected = false;
11122
11238
  this._resolved = false;
11123
11239
  this._numberProps = null;
11240
+ this._styleChildren = /* @__PURE__ */ new WeakSet();
11124
11241
  this._ob = null;
11125
- if (this.shadowRoot && hydrate2) {
11126
- hydrate2(this._createVNode(), this.shadowRoot);
11242
+ if (this.shadowRoot && _createApp !== createApp) {
11243
+ this._root = this.shadowRoot;
11244
+ this._mount(_def);
11127
11245
  } else {
11128
11246
  if (this.shadowRoot) {
11129
11247
  warn(
11130
11248
  `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
11131
11249
  );
11132
11250
  }
11133
- this.attachShadow({ mode: "open" });
11251
+ if (_def.shadowRoot !== false) {
11252
+ this.attachShadow({ mode: "open" });
11253
+ this._root = this.shadowRoot;
11254
+ } else {
11255
+ this._root = this;
11256
+ }
11134
11257
  if (!this._def.__asyncLoader) {
11135
11258
  this._resolveProps(this._def);
11136
11259
  }
11137
11260
  }
11138
11261
  }
11139
11262
  connectedCallback() {
11263
+ if (!this.shadowRoot) {
11264
+ this._parseSlots();
11265
+ }
11140
11266
  this._connected = true;
11267
+ let parent = this;
11268
+ while (parent = parent && (parent.parentNode || parent.host)) {
11269
+ if (parent instanceof VueElement) {
11270
+ this._parent = parent;
11271
+ break;
11272
+ }
11273
+ }
11141
11274
  if (!this._instance) {
11142
11275
  if (this._resolved) {
11276
+ this._setParent();
11143
11277
  this._update();
11144
11278
  } else {
11145
- this._resolveDef();
11279
+ if (parent && parent._pendingResolve) {
11280
+ this._pendingResolve = parent._pendingResolve.then(() => {
11281
+ this._pendingResolve = void 0;
11282
+ this._resolveDef();
11283
+ });
11284
+ } else {
11285
+ this._resolveDef();
11286
+ }
11146
11287
  }
11147
11288
  }
11148
11289
  }
11290
+ _setParent(parent = this._parent) {
11291
+ if (parent) {
11292
+ this._instance.parent = parent._instance;
11293
+ this._instance.provides = parent._instance.provides;
11294
+ }
11295
+ }
11149
11296
  disconnectedCallback() {
11150
11297
  this._connected = false;
11151
11298
  nextTick(() => {
@@ -11154,8 +11301,9 @@ class VueElement extends BaseClass {
11154
11301
  this._ob.disconnect();
11155
11302
  this._ob = null;
11156
11303
  }
11157
- render(null, this.shadowRoot);
11158
- this._instance = null;
11304
+ this._app && this._app.unmount();
11305
+ this._instance.ce = void 0;
11306
+ this._app = this._instance = null;
11159
11307
  }
11160
11308
  });
11161
11309
  }
@@ -11163,7 +11311,9 @@ class VueElement extends BaseClass {
11163
11311
  * resolve inner component definition (handle possible async component)
11164
11312
  */
11165
11313
  _resolveDef() {
11166
- this._resolved = true;
11314
+ if (this._pendingResolve) {
11315
+ return;
11316
+ }
11167
11317
  for (let i = 0; i < this.attributes.length; i++) {
11168
11318
  this._setAttr(this.attributes[i].name);
11169
11319
  }
@@ -11174,6 +11324,8 @@ class VueElement extends BaseClass {
11174
11324
  });
11175
11325
  this._ob.observe(this, { attributes: true });
11176
11326
  const resolve = (def, isAsync = false) => {
11327
+ this._resolved = true;
11328
+ this._pendingResolve = void 0;
11177
11329
  const { props, styles } = def;
11178
11330
  let numberProps;
11179
11331
  if (props && !isArray(props)) {
@@ -11191,22 +11343,53 @@ class VueElement extends BaseClass {
11191
11343
  if (isAsync) {
11192
11344
  this._resolveProps(def);
11193
11345
  }
11194
- this._applyStyles(styles);
11195
- this._update();
11346
+ if (this.shadowRoot) {
11347
+ this._applyStyles(styles);
11348
+ } else if (styles) {
11349
+ warn(
11350
+ "Custom element style injection is not supported when using shadowRoot: false"
11351
+ );
11352
+ }
11353
+ this._mount(def);
11196
11354
  };
11197
11355
  const asyncDef = this._def.__asyncLoader;
11198
11356
  if (asyncDef) {
11199
- asyncDef().then((def) => resolve(def, true));
11357
+ this._pendingResolve = asyncDef().then(
11358
+ (def) => resolve(this._def = def, true)
11359
+ );
11200
11360
  } else {
11201
11361
  resolve(this._def);
11202
11362
  }
11203
11363
  }
11364
+ _mount(def) {
11365
+ if (!def.name) {
11366
+ def.name = "VueElement";
11367
+ }
11368
+ this._app = this._createApp(def);
11369
+ if (def.configureApp) {
11370
+ def.configureApp(this._app);
11371
+ }
11372
+ this._app._ceVNode = this._createVNode();
11373
+ this._app.mount(this._root);
11374
+ const exposed = this._instance && this._instance.exposed;
11375
+ if (!exposed) return;
11376
+ for (const key in exposed) {
11377
+ if (!hasOwn(this, key)) {
11378
+ Object.defineProperty(this, key, {
11379
+ // unwrap ref to be consistent with public instance behavior
11380
+ get: () => unref(exposed[key])
11381
+ });
11382
+ } else {
11383
+ warn(`Exposed property "${key}" already exists on custom element.`);
11384
+ }
11385
+ }
11386
+ }
11204
11387
  _resolveProps(def) {
11205
11388
  const { props } = def;
11206
11389
  const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
11207
11390
  for (const key of Object.keys(this)) {
11208
11391
  if (key[0] !== "_" && declaredPropKeys.includes(key)) {
11209
- this._setProp(key, this[key], true, false);
11392
+ this._setProp(key, this[key]);
11210
11393
  }
11211
11394
  }
11212
11395
  for (const key of declaredPropKeys.map(camelize)) {
@@ -11215,18 +11398,20 @@ class VueElement extends BaseClass {
11215
11398
  return this._getProp(key);
11216
11399
  },
11217
11400
  set(val) {
11218
- this._setProp(key, val);
11401
+ this._setProp(key, val, true, true);
11219
11402
  }
11220
11403
  });
11221
11404
  }
11222
11405
  }
11223
11406
  _setAttr(key) {
11224
- let value = this.hasAttribute(key) ? this.getAttribute(key) : void 0;
11407
+ if (key.startsWith("data-v-")) return;
11408
+ const has = this.hasAttribute(key);
11409
+ let value = has ? this.getAttribute(key) : REMOVAL;
11225
11410
  const camelKey = camelize(key);
11226
- if (this._numberProps && this._numberProps[camelKey]) {
11411
+ if (has && this._numberProps && this._numberProps[camelKey]) {
11227
11412
  value = toNumber(value);
11228
11413
  }
11229
- this._setProp(camelKey, value, false);
11414
+ this._setProp(camelKey, value, false, true);
11230
11415
  }
11231
11416
  /**
11232
11417
  * @internal
@@ -11237,9 +11422,13 @@ class VueElement extends BaseClass {
11237
11422
  /**
11238
11423
  * @internal
11239
11424
  */
11240
- _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
11425
+ _setProp(key, val, shouldReflect = true, shouldUpdate = false) {
11241
11426
  if (val !== this._props[key]) {
11242
- this._props[key] = val;
11427
+ if (val === REMOVAL) {
11428
+ delete this._props[key];
11429
+ } else {
11430
+ this._props[key] = val;
11431
+ }
11243
11432
  if (shouldUpdate && this._instance) {
11244
11433
  this._update();
11245
11434
  }
@@ -11255,18 +11444,22 @@ class VueElement extends BaseClass {
11255
11444
  }
11256
11445
  }
11257
11446
  _update() {
11258
- render(this._createVNode(), this.shadowRoot);
11447
+ render(this._createVNode(), this._root);
11259
11448
  }
11260
11449
  _createVNode() {
11261
- const vnode = createVNode(this._def, extend({}, this._props));
11450
+ const baseProps = {};
11451
+ if (!this.shadowRoot) {
11452
+ baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
11453
+ }
11454
+ const vnode = createVNode(this._def, extend(baseProps, this._props));
11262
11455
  if (!this._instance) {
11263
11456
  vnode.ce = (instance) => {
11264
11457
  this._instance = instance;
11265
- instance.isCE = true;
11458
+ instance.ce = this;
11266
11459
  {
11267
11460
  instance.ceReload = (newStyles) => {
11268
11461
  if (this._styles) {
11269
- this._styles.forEach((s) => this.shadowRoot.removeChild(s));
11462
+ this._styles.forEach((s) => this._root.removeChild(s));
11270
11463
  this._styles.length = 0;
11271
11464
  }
11272
11465
  this._applyStyles(newStyles);
@@ -11276,9 +11469,10 @@ class VueElement extends BaseClass {
11276
11469
  }
11277
11470
  const dispatch = (event, args) => {
11278
11471
  this.dispatchEvent(
11279
- new CustomEvent(event, {
11280
- detail: args
11281
- })
11472
+ new CustomEvent(
11473
+ event,
11474
+ isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
11475
+ )
11282
11476
  );
11283
11477
  };
11284
11478
  instance.emit = (event, ...args) => {
@@ -11287,31 +11481,127 @@ class VueElement extends BaseClass {
11287
11481
  dispatch(hyphenate(event), args);
11288
11482
  }
11289
11483
  };
11290
- let parent = this;
11291
- while (parent = parent && (parent.parentNode || parent.host)) {
11292
- if (parent instanceof VueElement) {
11293
- instance.parent = parent._instance;
11294
- instance.provides = parent._instance.provides;
11295
- break;
11296
- }
11297
- }
11484
+ this._setParent();
11298
11485
  };
11299
11486
  }
11300
11487
  return vnode;
11301
11488
  }
11302
- _applyStyles(styles) {
11303
- if (styles) {
11304
- styles.forEach((css) => {
11305
- const s = document.createElement("style");
11306
- s.textContent = css;
11307
- this.shadowRoot.appendChild(s);
11308
- {
11489
+ _applyStyles(styles, owner) {
11490
+ if (!styles) return;
11491
+ if (owner) {
11492
+ if (owner === this._def || this._styleChildren.has(owner)) {
11493
+ return;
11494
+ }
11495
+ this._styleChildren.add(owner);
11496
+ }
11497
+ const nonce = this._nonce;
11498
+ for (let i = styles.length - 1; i >= 0; i--) {
11499
+ const s = document.createElement("style");
11500
+ if (nonce) s.setAttribute("nonce", nonce);
11501
+ s.textContent = styles[i];
11502
+ this.shadowRoot.prepend(s);
11503
+ {
11504
+ if (owner) {
11505
+ if (owner.__hmrId) {
11506
+ if (!this._childStyles) this._childStyles = /* @__PURE__ */ new Map();
11507
+ let entry = this._childStyles.get(owner.__hmrId);
11508
+ if (!entry) {
11509
+ this._childStyles.set(owner.__hmrId, entry = []);
11510
+ }
11511
+ entry.push(s);
11512
+ }
11513
+ } else {
11309
11514
  (this._styles || (this._styles = [])).push(s);
11310
11515
  }
11311
- });
11516
+ }
11517
+ }
11518
+ }
11519
+ /**
11520
+ * Only called when shaddowRoot is false
11521
+ */
11522
+ _parseSlots() {
11523
+ const slots = this._slots = {};
11524
+ let n;
11525
+ while (n = this.firstChild) {
11526
+ const slotName = n.nodeType === 1 && n.getAttribute("slot") || "default";
11527
+ (slots[slotName] || (slots[slotName] = [])).push(n);
11528
+ this.removeChild(n);
11529
+ }
11530
+ }
11531
+ /**
11532
+ * Only called when shaddowRoot is false
11533
+ */
11534
+ _renderSlots() {
11535
+ const outlets = this.querySelectorAll("slot");
11536
+ const scopeId = this._instance.type.__scopeId;
11537
+ for (let i = 0; i < outlets.length; i++) {
11538
+ const o = outlets[i];
11539
+ const slotName = o.getAttribute("name") || "default";
11540
+ const content = this._slots[slotName];
11541
+ const parent = o.parentNode;
11542
+ if (content) {
11543
+ for (const n of content) {
11544
+ if (scopeId && n.nodeType === 1) {
11545
+ const id = scopeId + "-s";
11546
+ const walker = document.createTreeWalker(n, 1);
11547
+ n.setAttribute(id, "");
11548
+ let child;
11549
+ while (child = walker.nextNode()) {
11550
+ child.setAttribute(id, "");
11551
+ }
11552
+ }
11553
+ parent.insertBefore(n, o);
11554
+ }
11555
+ } else {
11556
+ while (o.firstChild) parent.insertBefore(o.firstChild, o);
11557
+ }
11558
+ parent.removeChild(o);
11559
+ }
11560
+ }
11561
+ /**
11562
+ * @internal
11563
+ */
11564
+ _injectChildStyle(comp) {
11565
+ this._applyStyles(comp.styles, comp);
11566
+ }
11567
+ /**
11568
+ * @internal
11569
+ */
11570
+ _removeChildStyle(comp) {
11571
+ {
11572
+ this._styleChildren.delete(comp);
11573
+ if (this._childStyles && comp.__hmrId) {
11574
+ const oldStyles = this._childStyles.get(comp.__hmrId);
11575
+ if (oldStyles) {
11576
+ oldStyles.forEach((s) => this._root.removeChild(s));
11577
+ oldStyles.length = 0;
11578
+ }
11579
+ }
11312
11580
  }
11313
11581
  }
11314
11582
  }
11583
+ function useHost(caller) {
11584
+ const instance = getCurrentInstance();
11585
+ const el = instance && instance.ce;
11586
+ if (el) {
11587
+ return el;
11588
+ } else {
11589
+ if (!instance) {
11590
+ warn(
11591
+ `${caller || "useHost"} called without an active component instance.`
11592
+ );
11593
+ } else {
11594
+ warn(
11595
+ `${caller || "useHost"} can only be used in components defined via defineCustomElement.`
11596
+ );
11597
+ }
11598
+ }
11599
+ return null;
11600
+ }
11601
+ function useShadowRoot() {
11602
+ const el = useHost("useShadowRoot") ;
11603
+ return el && el.shadowRoot;
11604
+ }
11315
11605
 
11316
11606
  function useCssModule(name = "$style") {
11317
11607
  {
@@ -11825,7 +12115,9 @@ const createApp = (...args) => {
11825
12115
  if (!isFunction(component) && !component.render && !component.template) {
11826
12116
  component.template = container.innerHTML;
11827
12117
  }
11828
- container.innerHTML = "";
12118
+ if (container.nodeType === 1) {
12119
+ container.textContent = "";
12120
+ }
11829
12121
  const proxy = mount(container, false, resolveRootNamespace(container));
11830
12122
  if (container instanceof Element) {
11831
12123
  container.removeAttribute("v-cloak");
@@ -12059,9 +12351,11 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
12059
12351
  useAttrs: useAttrs,
12060
12352
  useCssModule: useCssModule,
12061
12353
  useCssVars: useCssVars,
12354
+ useHost: useHost,
12062
12355
  useId: useId,
12063
12356
  useModel: useModel,
12064
12357
  useSSRContext: useSSRContext,
12358
+ useShadowRoot: useShadowRoot,
12065
12359
  useSlots: useSlots,
12066
12360
  useTemplateRef: useTemplateRef,
12067
12361
  useTransitionState: useTransitionState,
@@ -12103,36 +12397,70 @@ const FRAGMENT = Symbol(`Fragment` );
12103
12397
  const TELEPORT = Symbol(`Teleport` );
12104
12398
  const SUSPENSE = Symbol(`Suspense` );
12105
12399
  const KEEP_ALIVE = Symbol(`KeepAlive` );
12106
- const BASE_TRANSITION = Symbol(`BaseTransition` );
12400
+ const BASE_TRANSITION = Symbol(
12401
+ `BaseTransition`
12402
+ );
12107
12403
  const OPEN_BLOCK = Symbol(`openBlock` );
12108
12404
  const CREATE_BLOCK = Symbol(`createBlock` );
12109
- const CREATE_ELEMENT_BLOCK = Symbol(`createElementBlock` );
12405
+ const CREATE_ELEMENT_BLOCK = Symbol(
12406
+ `createElementBlock`
12407
+ );
12110
12408
  const CREATE_VNODE = Symbol(`createVNode` );
12111
- const CREATE_ELEMENT_VNODE = Symbol(`createElementVNode` );
12112
- const CREATE_COMMENT = Symbol(`createCommentVNode` );
12113
- const CREATE_TEXT = Symbol(`createTextVNode` );
12114
- const CREATE_STATIC = Symbol(`createStaticVNode` );
12115
- const RESOLVE_COMPONENT = Symbol(`resolveComponent` );
12409
+ const CREATE_ELEMENT_VNODE = Symbol(
12410
+ `createElementVNode`
12411
+ );
12412
+ const CREATE_COMMENT = Symbol(
12413
+ `createCommentVNode`
12414
+ );
12415
+ const CREATE_TEXT = Symbol(
12416
+ `createTextVNode`
12417
+ );
12418
+ const CREATE_STATIC = Symbol(
12419
+ `createStaticVNode`
12420
+ );
12421
+ const RESOLVE_COMPONENT = Symbol(
12422
+ `resolveComponent`
12423
+ );
12116
12424
  const RESOLVE_DYNAMIC_COMPONENT = Symbol(
12117
12425
  `resolveDynamicComponent`
12118
12426
  );
12119
- const RESOLVE_DIRECTIVE = Symbol(`resolveDirective` );
12120
- const RESOLVE_FILTER = Symbol(`resolveFilter` );
12121
- const WITH_DIRECTIVES = Symbol(`withDirectives` );
12427
+ const RESOLVE_DIRECTIVE = Symbol(
12428
+ `resolveDirective`
12429
+ );
12430
+ const RESOLVE_FILTER = Symbol(
12431
+ `resolveFilter`
12432
+ );
12433
+ const WITH_DIRECTIVES = Symbol(
12434
+ `withDirectives`
12435
+ );
12122
12436
  const RENDER_LIST = Symbol(`renderList` );
12123
12437
  const RENDER_SLOT = Symbol(`renderSlot` );
12124
12438
  const CREATE_SLOTS = Symbol(`createSlots` );
12125
- const TO_DISPLAY_STRING = Symbol(`toDisplayString` );
12439
+ const TO_DISPLAY_STRING = Symbol(
12440
+ `toDisplayString`
12441
+ );
12126
12442
  const MERGE_PROPS = Symbol(`mergeProps` );
12127
- const NORMALIZE_CLASS = Symbol(`normalizeClass` );
12128
- const NORMALIZE_STYLE = Symbol(`normalizeStyle` );
12129
- const NORMALIZE_PROPS = Symbol(`normalizeProps` );
12130
- const GUARD_REACTIVE_PROPS = Symbol(`guardReactiveProps` );
12443
+ const NORMALIZE_CLASS = Symbol(
12444
+ `normalizeClass`
12445
+ );
12446
+ const NORMALIZE_STYLE = Symbol(
12447
+ `normalizeStyle`
12448
+ );
12449
+ const NORMALIZE_PROPS = Symbol(
12450
+ `normalizeProps`
12451
+ );
12452
+ const GUARD_REACTIVE_PROPS = Symbol(
12453
+ `guardReactiveProps`
12454
+ );
12131
12455
  const TO_HANDLERS = Symbol(`toHandlers` );
12132
12456
  const CAMELIZE = Symbol(`camelize` );
12133
12457
  const CAPITALIZE = Symbol(`capitalize` );
12134
- const TO_HANDLER_KEY = Symbol(`toHandlerKey` );
12135
- const SET_BLOCK_TRACKING = Symbol(`setBlockTracking` );
12458
+ const TO_HANDLER_KEY = Symbol(
12459
+ `toHandlerKey`
12460
+ );
12461
+ const SET_BLOCK_TRACKING = Symbol(
12462
+ `setBlockTracking`
12463
+ );
12136
12464
  const PUSH_SCOPE_ID = Symbol(`pushScopeId` );
12137
12465
  const POP_SCOPE_ID = Symbol(`popScopeId` );
12138
12466
  const WITH_CTX = Symbol(`withCtx` );
@@ -16186,7 +16514,7 @@ function resolveComponentType(node, context, ssr = false) {
16186
16514
  } else {
16187
16515
  exp = isProp.exp;
16188
16516
  if (!exp) {
16189
- exp = createSimpleExpression(`is`, false, isProp.loc);
16517
+ exp = createSimpleExpression(`is`, false, isProp.arg.loc);
16190
16518
  }
16191
16519
  }
16192
16520
  if (exp) {
@@ -16982,15 +17310,27 @@ function baseCompile(source, options = {}) {
16982
17310
  const noopDirectiveTransform = () => ({ props: [] });
16983
17311
 
16984
17312
  const V_MODEL_RADIO = Symbol(`vModelRadio` );
16985
- const V_MODEL_CHECKBOX = Symbol(`vModelCheckbox` );
17313
+ const V_MODEL_CHECKBOX = Symbol(
17314
+ `vModelCheckbox`
17315
+ );
16986
17316
  const V_MODEL_TEXT = Symbol(`vModelText` );
16987
- const V_MODEL_SELECT = Symbol(`vModelSelect` );
16988
- const V_MODEL_DYNAMIC = Symbol(`vModelDynamic` );
16989
- const V_ON_WITH_MODIFIERS = Symbol(`vOnModifiersGuard` );
16990
- const V_ON_WITH_KEYS = Symbol(`vOnKeysGuard` );
17317
+ const V_MODEL_SELECT = Symbol(
17318
+ `vModelSelect`
17319
+ );
17320
+ const V_MODEL_DYNAMIC = Symbol(
17321
+ `vModelDynamic`
17322
+ );
17323
+ const V_ON_WITH_MODIFIERS = Symbol(
17324
+ `vOnModifiersGuard`
17325
+ );
17326
+ const V_ON_WITH_KEYS = Symbol(
17327
+ `vOnKeysGuard`
17328
+ );
16991
17329
  const V_SHOW = Symbol(`vShow` );
16992
17330
  const TRANSITION = Symbol(`Transition` );
16993
- const TRANSITION_GROUP = Symbol(`TransitionGroup` );
17331
+ const TRANSITION_GROUP = Symbol(
17332
+ `TransitionGroup`
17333
+ );
16994
17334
  registerRuntimeHelpers({
16995
17335
  [V_MODEL_RADIO]: `vModelRadio`,
16996
17336
  [V_MODEL_CHECKBOX]: `vModelCheckbox`,
@@ -17675,4 +18015,4 @@ ${codeFrame}` : message);
17675
18015
  }
17676
18016
  registerRuntimeCompiler(compileToFunction);
17677
18017
 
17678
- 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, compileToFunction as compile, 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 };
18018
+ 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, compileToFunction as compile, 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 };