@vue/compat 3.2.32 → 3.2.33

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.
@@ -534,10 +534,17 @@ class ReactiveEffect {
534
534
  activeEffect = this.parent;
535
535
  shouldTrack = lastShouldTrack;
536
536
  this.parent = undefined;
537
+ if (this.deferStop) {
538
+ this.stop();
539
+ }
537
540
  }
538
541
  }
539
542
  stop() {
540
- if (this.active) {
543
+ // stopped while running itself - defer the cleanup
544
+ if (activeEffect === this) {
545
+ this.deferStop = true;
546
+ }
547
+ else if (this.active) {
541
548
  cleanupEffect(this);
542
549
  if (this.onStop) {
543
550
  this.onStop();
@@ -720,7 +727,9 @@ function triggerEffects(dep, debuggerEventExtraInfo) {
720
727
  }
721
728
 
722
729
  const isNonTrackableKeys = /*#__PURE__*/ makeMap(`__proto__,__v_isRef,__isVue`);
723
- const builtInSymbols = new Set(Object.getOwnPropertyNames(Symbol)
730
+ const builtInSymbols = new Set(
731
+ /*#__PURE__*/
732
+ Object.getOwnPropertyNames(Symbol)
724
733
  .map(key => Symbol[key])
725
734
  .filter(isSymbol));
726
735
  const get = /*#__PURE__*/ createGetter();
@@ -872,13 +881,13 @@ const readonlyHandlers = {
872
881
  get: readonlyGet,
873
882
  set(target, key) {
874
883
  if ((process.env.NODE_ENV !== 'production')) {
875
- console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);
884
+ warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);
876
885
  }
877
886
  return true;
878
887
  },
879
888
  deleteProperty(target, key) {
880
889
  if ((process.env.NODE_ENV !== 'production')) {
881
- console.warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target);
890
+ warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target);
882
891
  }
883
892
  return true;
884
893
  }
@@ -1718,7 +1727,7 @@ let preFlushIndex = 0;
1718
1727
  const pendingPostFlushCbs = [];
1719
1728
  let activePostFlushCbs = null;
1720
1729
  let postFlushIndex = 0;
1721
- const resolvedPromise = Promise.resolve();
1730
+ const resolvedPromise = /*#__PURE__*/ Promise.resolve();
1722
1731
  let currentFlushPromise = null;
1723
1732
  let currentPreFlushParentJob = null;
1724
1733
  const RECURSION_LIMIT = 100;
@@ -2658,6 +2667,8 @@ function compatModelEmit(instance, event, args) {
2658
2667
  }
2659
2668
 
2660
2669
  function emit$2(instance, event, ...rawArgs) {
2670
+ if (instance.isUnmounted)
2671
+ return;
2661
2672
  const props = instance.vnode.props || EMPTY_OBJ;
2662
2673
  if ((process.env.NODE_ENV !== 'production')) {
2663
2674
  const { emitsOptions, propsOptions: [propsOptions] } = instance;
@@ -3997,10 +4008,24 @@ const BaseTransitionImpl = {
3997
4008
  if (!children || !children.length) {
3998
4009
  return;
3999
4010
  }
4000
- // warn multiple elements
4001
- if ((process.env.NODE_ENV !== 'production') && children.length > 1) {
4002
- warn$1('<transition> can only be used on a single element or component. Use ' +
4003
- '<transition-group> for lists.');
4011
+ let child = children[0];
4012
+ if (children.length > 1) {
4013
+ let hasFound = false;
4014
+ // locate first non-comment child
4015
+ for (const c of children) {
4016
+ if (c.type !== Comment) {
4017
+ if ((process.env.NODE_ENV !== 'production') && hasFound) {
4018
+ // warn more than one non-comment child
4019
+ warn$1('<transition> can only be used on a single element or component. ' +
4020
+ 'Use <transition-group> for lists.');
4021
+ break;
4022
+ }
4023
+ child = c;
4024
+ hasFound = true;
4025
+ if (!(process.env.NODE_ENV !== 'production'))
4026
+ break;
4027
+ }
4028
+ }
4004
4029
  }
4005
4030
  // there's no need to track reactivity for these props so use the raw
4006
4031
  // props for a bit better perf
@@ -4014,8 +4039,6 @@ const BaseTransitionImpl = {
4014
4039
  mode !== 'default') {
4015
4040
  warn$1(`invalid <transition> mode: ${mode}`);
4016
4041
  }
4017
- // at this point children has a guaranteed length of 1.
4018
- const child = children[0];
4019
4042
  if (state.isLeaving) {
4020
4043
  return emptyPlaceholder(child);
4021
4044
  }
@@ -6035,7 +6058,7 @@ function createCompatVue(createApp, createSingletonApp) {
6035
6058
  return vm;
6036
6059
  }
6037
6060
  }
6038
- Vue.version = `2.6.14-compat:${"3.2.32"}`;
6061
+ Vue.version = `2.6.14-compat:${"3.2.33"}`;
6039
6062
  Vue.config = singletonApp.config;
6040
6063
  Vue.use = (p, ...options) => {
6041
6064
  if (p && isFunction(p.install)) {
@@ -8250,7 +8273,23 @@ function baseCreateRenderer(options, createHydrationFns) {
8250
8273
  const remove = vnode => {
8251
8274
  const { type, el, anchor, transition } = vnode;
8252
8275
  if (type === Fragment) {
8253
- removeFragment(el, anchor);
8276
+ if ((process.env.NODE_ENV !== 'production') &&
8277
+ vnode.patchFlag > 0 &&
8278
+ vnode.patchFlag & 2048 /* DEV_ROOT_FRAGMENT */ &&
8279
+ transition &&
8280
+ !transition.persisted) {
8281
+ vnode.children.forEach(child => {
8282
+ if (child.type === Comment) {
8283
+ hostRemove(child.el);
8284
+ }
8285
+ else {
8286
+ remove(child);
8287
+ }
8288
+ });
8289
+ }
8290
+ else {
8291
+ removeFragment(el, anchor);
8292
+ }
8254
8293
  return;
8255
8294
  }
8256
8295
  if (type === Static) {
@@ -9648,7 +9687,10 @@ function renderSlot(slots, name, props = {},
9648
9687
  // this is not a user-facing function, so the fallback is always generated by
9649
9688
  // the compiler and guaranteed to be a function returning an array
9650
9689
  fallback, noSlotted) {
9651
- if (currentRenderingInstance.isCE) {
9690
+ if (currentRenderingInstance.isCE ||
9691
+ (currentRenderingInstance.parent &&
9692
+ isAsyncWrapper(currentRenderingInstance.parent) &&
9693
+ currentRenderingInstance.parent.isCE)) {
9652
9694
  return createVNode('slot', name === 'default' ? null : { name }, fallback && fallback());
9653
9695
  }
9654
9696
  let slot = slots[name];
@@ -9938,7 +9980,10 @@ const getPublicInstance = (i) => {
9938
9980
  return getExposeProxy(i) || i.proxy;
9939
9981
  return getPublicInstance(i.parent);
9940
9982
  };
9941
- const publicPropertiesMap = extend(Object.create(null), {
9983
+ const publicPropertiesMap =
9984
+ // Move PURE marker to new line to workaround compiler discarding it
9985
+ // due to type annotation
9986
+ /*#__PURE__*/ extend(Object.create(null), {
9942
9987
  $: i => i,
9943
9988
  $el: i => i.vnode.el,
9944
9989
  $data: i => i.data,
@@ -10052,7 +10097,9 @@ const PublicInstanceProxyHandlers = {
10052
10097
  }
10053
10098
  else {
10054
10099
  const val = globalProperties[key];
10055
- return isFunction(val) ? val.bind(instance.proxy) : val;
10100
+ return isFunction(val)
10101
+ ? Object.assign(val.bind(instance.proxy), val)
10102
+ : val;
10056
10103
  }
10057
10104
  }
10058
10105
  }
@@ -10122,7 +10169,7 @@ const PublicInstanceProxyHandlers = {
10122
10169
  defineProperty(target, key, descriptor) {
10123
10170
  if (descriptor.get != null) {
10124
10171
  // invalidate key cache of a getter based property #5417
10125
- target.$.accessCache[key] = 0;
10172
+ target._.accessCache[key] = 0;
10126
10173
  }
10127
10174
  else if (hasOwn(descriptor, 'value')) {
10128
10175
  this.set(target, key, descriptor.value, null);
@@ -10333,6 +10380,7 @@ function setupComponent(instance, isSSR = false) {
10333
10380
  return setupResult;
10334
10381
  }
10335
10382
  function setupStatefulComponent(instance, isSSR) {
10383
+ var _a;
10336
10384
  const Component = instance.type;
10337
10385
  if ((process.env.NODE_ENV !== 'production')) {
10338
10386
  if (Component.name) {
@@ -10390,6 +10438,13 @@ function setupStatefulComponent(instance, isSSR) {
10390
10438
  // async setup returned Promise.
10391
10439
  // bail here and wait for re-entry.
10392
10440
  instance.asyncDep = setupResult;
10441
+ if ((process.env.NODE_ENV !== 'production') && !instance.suspense) {
10442
+ const name = (_a = Component.name) !== null && _a !== void 0 ? _a : 'Anonymous';
10443
+ warn$1(`Component <${name}>: setup function returned a promise, but no ` +
10444
+ `<Suspense> boundary was found in the parent component tree. ` +
10445
+ `A component with async setup() must be nested in a <Suspense> ` +
10446
+ `in order to be rendered.`);
10447
+ }
10393
10448
  }
10394
10449
  }
10395
10450
  else {
@@ -11042,7 +11097,7 @@ function isMemoSame(cached, memo) {
11042
11097
  }
11043
11098
 
11044
11099
  // Core API ------------------------------------------------------------------
11045
- const version = "3.2.32";
11100
+ const version = "3.2.33";
11046
11101
  const _ssrUtils = {
11047
11102
  createComponentInstance,
11048
11103
  setupComponent,
@@ -11074,7 +11129,7 @@ const compatUtils = (_compatUtils );
11074
11129
 
11075
11130
  const svgNS = 'http://www.w3.org/2000/svg';
11076
11131
  const doc = (typeof document !== 'undefined' ? document : null);
11077
- const templateContainer = doc && doc.createElement('template');
11132
+ const templateContainer = doc && /*#__PURE__*/ doc.createElement('template');
11078
11133
  const nodeOps = {
11079
11134
  insert: (child, parent, anchor) => {
11080
11135
  parent.insertBefore(child, anchor || null);
@@ -11225,6 +11280,8 @@ function setStyle(style, name, val) {
11225
11280
  val.forEach(v => setStyle(style, name, v));
11226
11281
  }
11227
11282
  else {
11283
+ if (val == null)
11284
+ val = '';
11228
11285
  if (name.startsWith('--')) {
11229
11286
  // custom property definition
11230
11287
  style.setProperty(name, val);
@@ -11346,42 +11403,40 @@ prevChildren, parentComponent, parentSuspense, unmountChildren) {
11346
11403
  }
11347
11404
  return;
11348
11405
  }
11406
+ let needRemove = false;
11349
11407
  if (value === '' || value == null) {
11350
11408
  const type = typeof el[key];
11351
11409
  if (type === 'boolean') {
11352
11410
  // e.g. <select multiple> compiles to { multiple: '' }
11353
- el[key] = includeBooleanAttr(value);
11354
- return;
11411
+ value = includeBooleanAttr(value);
11355
11412
  }
11356
11413
  else if (value == null && type === 'string') {
11357
11414
  // e.g. <div :id="null">
11358
- el[key] = '';
11359
- el.removeAttribute(key);
11360
- return;
11415
+ value = '';
11416
+ needRemove = true;
11361
11417
  }
11362
11418
  else if (type === 'number') {
11363
11419
  // e.g. <img :width="null">
11364
11420
  // the value of some IDL attr must be greater than 0, e.g. input.size = 0 -> error
11365
- try {
11366
- el[key] = 0;
11367
- }
11368
- catch (_a) { }
11369
- el.removeAttribute(key);
11370
- return;
11421
+ value = 0;
11422
+ needRemove = true;
11371
11423
  }
11372
11424
  }
11373
- if (value === false &&
11374
- compatUtils.isCompatEnabled("ATTR_FALSE_VALUE" /* ATTR_FALSE_VALUE */, parentComponent)) {
11375
- const type = typeof el[key];
11376
- if (type === 'string' || type === 'number') {
11377
- (process.env.NODE_ENV !== 'production') &&
11378
- compatUtils.warnDeprecation("ATTR_FALSE_VALUE" /* ATTR_FALSE_VALUE */, parentComponent, key);
11379
- el[key] = type === 'number' ? 0 : '';
11380
- el.removeAttribute(key);
11381
- return;
11425
+ else {
11426
+ if (value === false &&
11427
+ compatUtils.isCompatEnabled("ATTR_FALSE_VALUE" /* ATTR_FALSE_VALUE */, parentComponent)) {
11428
+ const type = typeof el[key];
11429
+ if (type === 'string' || type === 'number') {
11430
+ (process.env.NODE_ENV !== 'production') &&
11431
+ compatUtils.warnDeprecation("ATTR_FALSE_VALUE" /* ATTR_FALSE_VALUE */, parentComponent, key);
11432
+ value = type === 'number' ? 0 : '';
11433
+ needRemove = true;
11434
+ }
11382
11435
  }
11383
11436
  }
11384
- // some properties perform value validation and throw
11437
+ // some properties perform value validation and throw,
11438
+ // some properties has getter, no setter, will error in 'use strict'
11439
+ // eg. <select :type="null"></select> <select :willValidate="null"></select>
11385
11440
  try {
11386
11441
  el[key] = value;
11387
11442
  }
@@ -11391,31 +11446,35 @@ prevChildren, parentComponent, parentSuspense, unmountChildren) {
11391
11446
  `value ${value} is invalid.`, e);
11392
11447
  }
11393
11448
  }
11449
+ needRemove && el.removeAttribute(key);
11394
11450
  }
11395
11451
 
11396
11452
  // Async edge case fix requires storing an event listener's attach timestamp.
11397
- let _getNow = Date.now;
11398
- let skipTimestampCheck = false;
11399
- if (typeof window !== 'undefined') {
11400
- // Determine what event timestamp the browser is using. Annoyingly, the
11401
- // timestamp can either be hi-res (relative to page load) or low-res
11402
- // (relative to UNIX epoch), so in order to compare time we have to use the
11403
- // same timestamp type when saving the flush timestamp.
11404
- if (_getNow() > document.createEvent('Event').timeStamp) {
11405
- // if the low-res timestamp which is bigger than the event timestamp
11406
- // (which is evaluated AFTER) it means the event is using a hi-res timestamp,
11407
- // and we need to use the hi-res version for event listeners as well.
11408
- _getNow = () => performance.now();
11409
- }
11410
- // #3485: Firefox <= 53 has incorrect Event.timeStamp implementation
11411
- // and does not fire microtasks in between event propagation, so safe to exclude.
11412
- const ffMatch = navigator.userAgent.match(/firefox\/(\d+)/i);
11413
- skipTimestampCheck = !!(ffMatch && Number(ffMatch[1]) <= 53);
11414
- }
11453
+ const [_getNow, skipTimestampCheck] = /*#__PURE__*/ (() => {
11454
+ let _getNow = Date.now;
11455
+ let skipTimestampCheck = false;
11456
+ if (typeof window !== 'undefined') {
11457
+ // Determine what event timestamp the browser is using. Annoyingly, the
11458
+ // timestamp can either be hi-res (relative to page load) or low-res
11459
+ // (relative to UNIX epoch), so in order to compare time we have to use the
11460
+ // same timestamp type when saving the flush timestamp.
11461
+ if (Date.now() > document.createEvent('Event').timeStamp) {
11462
+ // if the low-res timestamp which is bigger than the event timestamp
11463
+ // (which is evaluated AFTER) it means the event is using a hi-res timestamp,
11464
+ // and we need to use the hi-res version for event listeners as well.
11465
+ _getNow = () => performance.now();
11466
+ }
11467
+ // #3485: Firefox <= 53 has incorrect Event.timeStamp implementation
11468
+ // and does not fire microtasks in between event propagation, so safe to exclude.
11469
+ const ffMatch = navigator.userAgent.match(/firefox\/(\d+)/i);
11470
+ skipTimestampCheck = !!(ffMatch && Number(ffMatch[1]) <= 53);
11471
+ }
11472
+ return [_getNow, skipTimestampCheck];
11473
+ })();
11415
11474
  // To avoid the overhead of repeatedly calling performance.now(), we cache
11416
11475
  // and use the same timestamp for all event listeners attached in the same tick.
11417
11476
  let cachedNow = 0;
11418
- const p = Promise.resolve();
11477
+ const p = /*#__PURE__*/ Promise.resolve();
11419
11478
  const reset = () => {
11420
11479
  cachedNow = 0;
11421
11480
  };
@@ -11540,13 +11599,13 @@ function shouldSetAsProp(el, key, value, isSVG) {
11540
11599
  }
11541
11600
  return false;
11542
11601
  }
11543
- // spellcheck and draggable are numerated attrs, however their
11544
- // corresponding DOM properties are actually booleans - this leads to
11545
- // setting it with a string "false" value leading it to be coerced to
11546
- // `true`, so we need to always treat them as attributes.
11602
+ // these are enumerated attrs, however their corresponding DOM properties
11603
+ // are actually booleans - this leads to setting it with a string "false"
11604
+ // value leading it to be coerced to `true`, so we need to always treat
11605
+ // them as attributes.
11547
11606
  // Note that `contentEditable` doesn't have this problem: its DOM
11548
11607
  // property is also enumerated string values.
11549
- if (key === 'spellcheck' || key === 'draggable') {
11608
+ if (key === 'spellcheck' || key === 'draggable' || key === 'translate') {
11550
11609
  return false;
11551
11610
  }
11552
11611
  // #1787, #2840 form property on form elements is readonly and must be set as
@@ -12726,7 +12785,7 @@ function initVShowForSSR() {
12726
12785
  };
12727
12786
  }
12728
12787
 
12729
- const rendererOptions = extend({ patchProp }, nodeOps);
12788
+ const rendererOptions = /*#__PURE__*/ extend({ patchProp }, nodeOps);
12730
12789
  // lazy create the renderer - this makes core renderer logic tree-shakable
12731
12790
  // in case the user only imports reactivity utilities from Vue.
12732
12791
  let renderer;