@vue/compat 3.2.41 → 3.2.43

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.
@@ -92,27 +92,6 @@ function generateCodeFrame(source, start = 0, end = source.length) {
92
92
  return res.join('\n');
93
93
  }
94
94
 
95
- /**
96
- * On the client we only need to offer special cases for boolean attributes that
97
- * have different names from their corresponding dom properties:
98
- * - itemscope -> N/A
99
- * - allowfullscreen -> allowFullscreen
100
- * - formnovalidate -> formNoValidate
101
- * - ismap -> isMap
102
- * - nomodule -> noModule
103
- * - novalidate -> noValidate
104
- * - readonly -> readOnly
105
- */
106
- const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;
107
- const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs);
108
- /**
109
- * Boolean attributes should be included if the value is truthy or ''.
110
- * e.g. `<select multiple>` compiles to `{ multiple: '' }`
111
- */
112
- function includeBooleanAttr(value) {
113
- return !!value || value === '';
114
- }
115
-
116
95
  function normalizeStyle(value) {
117
96
  if (isArray(value)) {
118
97
  const res = {};
@@ -137,10 +116,14 @@ function normalizeStyle(value) {
137
116
  }
138
117
  }
139
118
  const listDelimiterRE = /;(?![^(]*\))/g;
140
- const propertyDelimiterRE = /:(.+)/;
119
+ const propertyDelimiterRE = /:([^]+)/;
120
+ const styleCommentRE = /\/\*.*?\*\//gs;
141
121
  function parseStringStyle(cssText) {
142
122
  const ret = {};
143
- cssText.split(listDelimiterRE).forEach(item => {
123
+ cssText
124
+ .replace(styleCommentRE, '')
125
+ .split(listDelimiterRE)
126
+ .forEach(item => {
144
127
  if (item) {
145
128
  const tmp = item.split(propertyDelimiterRE);
146
129
  tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim());
@@ -222,6 +205,27 @@ const isSVGTag = /*#__PURE__*/ makeMap(SVG_TAGS);
222
205
  */
223
206
  const isVoidTag = /*#__PURE__*/ makeMap(VOID_TAGS);
224
207
 
208
+ /**
209
+ * On the client we only need to offer special cases for boolean attributes that
210
+ * have different names from their corresponding dom properties:
211
+ * - itemscope -> N/A
212
+ * - allowfullscreen -> allowFullscreen
213
+ * - formnovalidate -> formNoValidate
214
+ * - ismap -> isMap
215
+ * - nomodule -> noModule
216
+ * - novalidate -> noValidate
217
+ * - readonly -> readOnly
218
+ */
219
+ const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;
220
+ const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs);
221
+ /**
222
+ * Boolean attributes should be included if the value is truthy or ''.
223
+ * e.g. `<select multiple>` compiles to `{ multiple: '' }`
224
+ */
225
+ function includeBooleanAttr(value) {
226
+ return !!value || value === '';
227
+ }
228
+
225
229
  function looseCompareArrays(a, b) {
226
230
  if (a.length !== b.length)
227
231
  return false;
@@ -727,8 +731,9 @@ function trigger(target, type, key, newValue, oldValue, oldTarget) {
727
731
  deps = [...depsMap.values()];
728
732
  }
729
733
  else if (key === 'length' && isArray(target)) {
734
+ const newLength = toNumber(newValue);
730
735
  depsMap.forEach((dep, key) => {
731
- if (key === 'length' || key >= newValue) {
736
+ if (key === 'length' || key >= newLength) {
732
737
  deps.push(dep);
733
738
  }
734
739
  });
@@ -1609,6 +1614,8 @@ function popWarningContext() {
1609
1614
  stack.pop();
1610
1615
  }
1611
1616
  function warn$1(msg, ...args) {
1617
+ if (!(process.env.NODE_ENV !== 'production'))
1618
+ return;
1612
1619
  // avoid props formatting or warn handler tracking deps that might be mutated
1613
1620
  // during patch, leading to infinite recursion.
1614
1621
  pauseTracking();
@@ -2806,7 +2813,7 @@ function emit$2(instance, event, ...rawArgs) {
2806
2813
  const modifiersKey = `${modelArg === 'modelValue' ? 'model' : modelArg}Modifiers`;
2807
2814
  const { number, trim } = props[modifiersKey] || EMPTY_OBJ;
2808
2815
  if (trim) {
2809
- args = rawArgs.map(a => a.trim());
2816
+ args = rawArgs.map(a => (isString(a) ? a.trim() : a));
2810
2817
  }
2811
2818
  if (number) {
2812
2819
  args = rawArgs.map(toNumber);
@@ -3913,7 +3920,8 @@ function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EM
3913
3920
  };
3914
3921
  };
3915
3922
  // in SSR there is no need to setup an actual effect, and it should be noop
3916
- // unless it's eager
3923
+ // unless it's eager or sync flush
3924
+ let ssrCleanup;
3917
3925
  if (isInSSRComponentSetup) {
3918
3926
  // we will also not call the invalidate callback (+ runner is not set up)
3919
3927
  onCleanup = NOOP;
@@ -3927,9 +3935,17 @@ function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EM
3927
3935
  onCleanup
3928
3936
  ]);
3929
3937
  }
3930
- return NOOP;
3938
+ if (flush === 'sync') {
3939
+ const ctx = useSSRContext();
3940
+ ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
3941
+ }
3942
+ else {
3943
+ return NOOP;
3944
+ }
3931
3945
  }
3932
- let oldValue = isMultiSource ? [] : INITIAL_WATCHER_VALUE;
3946
+ let oldValue = isMultiSource
3947
+ ? new Array(source.length).fill(INITIAL_WATCHER_VALUE)
3948
+ : INITIAL_WATCHER_VALUE;
3933
3949
  const job = () => {
3934
3950
  if (!effect.active) {
3935
3951
  return;
@@ -3951,7 +3967,10 @@ function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EM
3951
3967
  callWithAsyncErrorHandling(cb, instance, 3 /* ErrorCodes.WATCH_CALLBACK */, [
3952
3968
  newValue,
3953
3969
  // pass undefined as the old value when it's changed for the first time
3954
- oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,
3970
+ oldValue === INITIAL_WATCHER_VALUE ||
3971
+ (isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE)
3972
+ ? []
3973
+ : oldValue,
3955
3974
  onCleanup
3956
3975
  ]);
3957
3976
  oldValue = newValue;
@@ -3999,12 +4018,15 @@ function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EM
3999
4018
  else {
4000
4019
  effect.run();
4001
4020
  }
4002
- return () => {
4021
+ const unwatch = () => {
4003
4022
  effect.stop();
4004
4023
  if (instance && instance.scope) {
4005
4024
  remove(instance.scope.effects, effect);
4006
4025
  }
4007
4026
  };
4027
+ if (ssrCleanup)
4028
+ ssrCleanup.push(unwatch);
4029
+ return unwatch;
4008
4030
  }
4009
4031
  // this.$watch
4010
4032
  function instanceWatch(source, value, options) {
@@ -4189,7 +4211,11 @@ const BaseTransitionImpl = {
4189
4211
  // return placeholder node and queue update when leave finishes
4190
4212
  leavingHooks.afterLeave = () => {
4191
4213
  state.isLeaving = false;
4192
- instance.update();
4214
+ // #6835
4215
+ // it also needs to be updated when active is undefined
4216
+ if (instance.update.active !== false) {
4217
+ instance.update();
4218
+ }
4193
4219
  };
4194
4220
  return emptyPlaceholder(child);
4195
4221
  }
@@ -4718,7 +4744,8 @@ const KeepAliveImpl = {
4718
4744
  : comp);
4719
4745
  const { include, exclude, max } = props;
4720
4746
  if ((include && (!name || !matches(include, name))) ||
4721
- (exclude && name && matches(exclude, name))) {
4747
+ (exclude && name && matches(exclude, name)) ||
4748
+ ((process.env.NODE_ENV !== 'production') && hmrDirtyComponents.has(comp))) {
4722
4749
  current = vnode;
4723
4750
  return rawVNode;
4724
4751
  }
@@ -4998,23 +5025,25 @@ function withDirectives(vnode, directives) {
4998
5025
  const bindings = vnode.dirs || (vnode.dirs = []);
4999
5026
  for (let i = 0; i < directives.length; i++) {
5000
5027
  let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i];
5001
- if (isFunction(dir)) {
5002
- dir = {
5003
- mounted: dir,
5004
- updated: dir
5005
- };
5006
- }
5007
- if (dir.deep) {
5008
- traverse(value);
5028
+ if (dir) {
5029
+ if (isFunction(dir)) {
5030
+ dir = {
5031
+ mounted: dir,
5032
+ updated: dir
5033
+ };
5034
+ }
5035
+ if (dir.deep) {
5036
+ traverse(value);
5037
+ }
5038
+ bindings.push({
5039
+ dir,
5040
+ instance,
5041
+ value,
5042
+ oldValue: void 0,
5043
+ arg,
5044
+ modifiers
5045
+ });
5009
5046
  }
5010
- bindings.push({
5011
- dir,
5012
- instance,
5013
- value,
5014
- oldValue: void 0,
5015
- arg,
5016
- modifiers
5017
- });
5018
5047
  }
5019
5048
  return vnode;
5020
5049
  }
@@ -6851,7 +6880,7 @@ function normalizePropsOptions(comp, appContext, asMixin = false) {
6851
6880
  if (validatePropName(normalizedKey)) {
6852
6881
  const opt = raw[key];
6853
6882
  const prop = (normalized[normalizedKey] =
6854
- isArray(opt) || isFunction(opt) ? { type: opt } : opt);
6883
+ isArray(opt) || isFunction(opt) ? { type: opt } : Object.assign({}, opt));
6855
6884
  if (prop) {
6856
6885
  const booleanIndex = getTypeIndex(Boolean, prop.type);
6857
6886
  const stringIndex = getTypeIndex(String, prop.type);
@@ -7223,7 +7252,7 @@ function createCompatVue(createApp, createSingletonApp) {
7223
7252
  return vm;
7224
7253
  }
7225
7254
  }
7226
- Vue.version = `2.6.14-compat:${"3.2.41"}`;
7255
+ Vue.version = `2.6.14-compat:${"3.2.43"}`;
7227
7256
  Vue.config = singletonApp.config;
7228
7257
  Vue.use = (p, ...options) => {
7229
7258
  if (p && isFunction(p.install)) {
@@ -10851,6 +10880,9 @@ function getExposeProxy(instance) {
10851
10880
  else if (key in publicPropertiesMap) {
10852
10881
  return publicPropertiesMap[key](instance);
10853
10882
  }
10883
+ },
10884
+ has(target, key) {
10885
+ return key in target || key in publicPropertiesMap;
10854
10886
  }
10855
10887
  })));
10856
10888
  }
@@ -11080,8 +11112,9 @@ const useSSRContext = () => {
11080
11112
  {
11081
11113
  const ctx = inject(ssrContextKey);
11082
11114
  if (!ctx) {
11083
- warn$1(`Server rendering context not provided. Make sure to only call ` +
11084
- `useSSRContext() conditionally in the server build.`);
11115
+ (process.env.NODE_ENV !== 'production') &&
11116
+ warn$1(`Server rendering context not provided. Make sure to only call ` +
11117
+ `useSSRContext() conditionally in the server build.`);
11085
11118
  }
11086
11119
  return ctx;
11087
11120
  }
@@ -11304,7 +11337,7 @@ function isMemoSame(cached, memo) {
11304
11337
  }
11305
11338
 
11306
11339
  // Core API ------------------------------------------------------------------
11307
- const version = "3.2.41";
11340
+ const version = "3.2.43";
11308
11341
  const _ssrUtils = {
11309
11342
  createComponentInstance,
11310
11343
  setupComponent,
@@ -11877,7 +11910,7 @@ class VueElement extends BaseClass {
11877
11910
  }
11878
11911
  }).observe(this, { attributes: true });
11879
11912
  const resolve = (def) => {
11880
- const { props, styles } = def;
11913
+ const { props = {}, styles } = def;
11881
11914
  const hasOptions = !isArray(props);
11882
11915
  const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : [];
11883
11916
  // cast Number-type props set before resolve
@@ -11924,10 +11957,11 @@ class VueElement extends BaseClass {
11924
11957
  }
11925
11958
  _setAttr(key) {
11926
11959
  let value = this.getAttribute(key);
11927
- if (this._numberProps && this._numberProps[key]) {
11960
+ const camelKey = camelize(key);
11961
+ if (this._numberProps && this._numberProps[camelKey]) {
11928
11962
  value = toNumber(value);
11929
11963
  }
11930
- this._setProp(camelize(key), value, false);
11964
+ this._setProp(camelKey, value, false);
11931
11965
  }
11932
11966
  /**
11933
11967
  * @internal
@@ -12358,11 +12392,11 @@ function getTransitionInfo(el, expectedType) {
12358
12392
  const styles = window.getComputedStyle(el);
12359
12393
  // JSDOM may return undefined for transition properties
12360
12394
  const getStyleProperties = (key) => (styles[key] || '').split(', ');
12361
- const transitionDelays = getStyleProperties(TRANSITION + 'Delay');
12362
- const transitionDurations = getStyleProperties(TRANSITION + 'Duration');
12395
+ const transitionDelays = getStyleProperties(`${TRANSITION}Delay`);
12396
+ const transitionDurations = getStyleProperties(`${TRANSITION}Duration`);
12363
12397
  const transitionTimeout = getTimeout(transitionDelays, transitionDurations);
12364
- const animationDelays = getStyleProperties(ANIMATION + 'Delay');
12365
- const animationDurations = getStyleProperties(ANIMATION + 'Duration');
12398
+ const animationDelays = getStyleProperties(`${ANIMATION}Delay`);
12399
+ const animationDurations = getStyleProperties(`${ANIMATION}Duration`);
12366
12400
  const animationTimeout = getTimeout(animationDelays, animationDurations);
12367
12401
  let type = null;
12368
12402
  let timeout = 0;
@@ -12397,7 +12431,7 @@ function getTransitionInfo(el, expectedType) {
12397
12431
  : 0;
12398
12432
  }
12399
12433
  const hasTransform = type === TRANSITION &&
12400
- /\b(transform|all)(,|$)/.test(styles[TRANSITION + 'Property']);
12434
+ /\b(transform|all)(,|$)/.test(getStyleProperties(`${TRANSITION}Property`).toString());
12401
12435
  return {
12402
12436
  type,
12403
12437
  timeout,
@@ -13838,7 +13872,10 @@ function injectProp(node, prop, context) {
13838
13872
  // if doesn't override user provided keys
13839
13873
  const first = props.arguments[0];
13840
13874
  if (!isString(first) && first.type === 15 /* NodeTypes.JS_OBJECT_EXPRESSION */) {
13841
- first.properties.unshift(prop);
13875
+ // #6631
13876
+ if (!hasProp(prop, first)) {
13877
+ first.properties.unshift(prop);
13878
+ }
13842
13879
  }
13843
13880
  else {
13844
13881
  if (props.callee === TO_HANDLERS) {
@@ -13855,14 +13892,7 @@ function injectProp(node, prop, context) {
13855
13892
  !propsWithInjection && (propsWithInjection = props);
13856
13893
  }
13857
13894
  else if (props.type === 15 /* NodeTypes.JS_OBJECT_EXPRESSION */) {
13858
- let alreadyExists = false;
13859
- // check existing key to avoid overriding user provided keys
13860
- if (prop.key.type === 4 /* NodeTypes.SIMPLE_EXPRESSION */) {
13861
- const propKeyName = prop.key.content;
13862
- alreadyExists = props.properties.some(p => p.key.type === 4 /* NodeTypes.SIMPLE_EXPRESSION */ &&
13863
- p.key.content === propKeyName);
13864
- }
13865
- if (!alreadyExists) {
13895
+ if (!hasProp(prop, props)) {
13866
13896
  props.properties.unshift(prop);
13867
13897
  }
13868
13898
  propsWithInjection = props;
@@ -13897,6 +13927,16 @@ function injectProp(node, prop, context) {
13897
13927
  }
13898
13928
  }
13899
13929
  }
13930
+ // check existing key to avoid overriding user provided keys
13931
+ function hasProp(prop, props) {
13932
+ let result = false;
13933
+ if (prop.key.type === 4 /* NodeTypes.SIMPLE_EXPRESSION */) {
13934
+ const propKeyName = prop.key.content;
13935
+ result = props.properties.some(p => p.key.type === 4 /* NodeTypes.SIMPLE_EXPRESSION */ &&
13936
+ p.key.content === propKeyName);
13937
+ }
13938
+ return result;
13939
+ }
13900
13940
  function toValidAssetId(name, type) {
13901
13941
  // see issue#4422, we need adding identifier on validAssetId if variable `name` has specific character
13902
13942
  return `_${type}_${name.replace(/[^\w]/g, (searchValue, replaceValue) => {
@@ -14169,13 +14209,18 @@ function parseChildren(context, mode, ancestors) {
14169
14209
  const next = nodes[i + 1];
14170
14210
  // Remove if:
14171
14211
  // - the whitespace is the first or last node, or:
14172
- // - (condense mode) the whitespace is adjacent to a comment, or:
14212
+ // - (condense mode) the whitespace is between twos comments, or:
14213
+ // - (condense mode) the whitespace is between comment and element, or:
14173
14214
  // - (condense mode) the whitespace is between two elements AND contains newline
14174
14215
  if (!prev ||
14175
14216
  !next ||
14176
14217
  (shouldCondense &&
14177
- (prev.type === 3 /* NodeTypes.COMMENT */ ||
14178
- next.type === 3 /* NodeTypes.COMMENT */ ||
14218
+ ((prev.type === 3 /* NodeTypes.COMMENT */ &&
14219
+ next.type === 3 /* NodeTypes.COMMENT */) ||
14220
+ (prev.type === 3 /* NodeTypes.COMMENT */ &&
14221
+ next.type === 1 /* NodeTypes.ELEMENT */) ||
14222
+ (prev.type === 1 /* NodeTypes.ELEMENT */ &&
14223
+ next.type === 3 /* NodeTypes.COMMENT */) ||
14179
14224
  (prev.type === 1 /* NodeTypes.ELEMENT */ &&
14180
14225
  next.type === 1 /* NodeTypes.ELEMENT */ &&
14181
14226
  /[\r\n]/.test(node.content))))) {
@@ -16104,9 +16149,9 @@ function processIf(node, dir, context, processCodegen) {
16104
16149
  let i = siblings.indexOf(node);
16105
16150
  while (i-- >= -1) {
16106
16151
  const sibling = siblings[i];
16107
- if ((process.env.NODE_ENV !== 'production') && sibling && sibling.type === 3 /* NodeTypes.COMMENT */) {
16152
+ if (sibling && sibling.type === 3 /* NodeTypes.COMMENT */) {
16108
16153
  context.removeNode(sibling);
16109
- comments.unshift(sibling);
16154
+ (process.env.NODE_ENV !== 'production') && comments.unshift(sibling);
16110
16155
  continue;
16111
16156
  }
16112
16157
  if (sibling &&
@@ -17390,7 +17435,7 @@ function processSlotOutlet(node, context) {
17390
17435
  };
17391
17436
  }
17392
17437
 
17393
- const fnExpRE = /^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/;
17438
+ const fnExpRE = /^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*(:[^=]+)?=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/;
17394
17439
  const transformOn = (dir, node, context, augmentor) => {
17395
17440
  const { loc, modifiers, arg } = dir;
17396
17441
  if (!dir.exp && !modifiers.length) {
@@ -17404,10 +17449,10 @@ const transformOn = (dir, node, context, augmentor) => {
17404
17449
  if (rawName.startsWith('vue:')) {
17405
17450
  rawName = `vnode-${rawName.slice(4)}`;
17406
17451
  }
17407
- const eventString = node.tagType === 1 /* ElementTypes.COMPONENT */ ||
17452
+ const eventString = node.tagType !== 0 /* ElementTypes.ELEMENT */ ||
17408
17453
  rawName.startsWith('vnode') ||
17409
17454
  !/[A-Z]/.test(rawName)
17410
- ? // for component and vnode lifecycle event listeners, auto convert
17455
+ ? // for non-element and vnode lifecycle event listeners, auto convert
17411
17456
  // it to camelCase. See issue #2249
17412
17457
  toHandlerKey(camelize(rawName))
17413
17458
  : // preserve case for plain element listeners that have uppercase