@vue/compat 3.2.11 → 3.2.12

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.
@@ -2363,12 +2363,12 @@ function markAttrsAccessed() {
2363
2363
  function renderComponentRoot(instance) {
2364
2364
  const { type: Component, vnode, proxy, withProxy, props, propsOptions: [propsOptions], slots, attrs, emit, render, renderCache, data, setupState, ctx, inheritAttrs } = instance;
2365
2365
  let result;
2366
+ let fallthroughAttrs;
2366
2367
  const prev = setCurrentRenderingInstance(instance);
2367
2368
  {
2368
2369
  accessedAttrs = false;
2369
2370
  }
2370
2371
  try {
2371
- let fallthroughAttrs;
2372
2372
  if (vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {
2373
2373
  // withProxy is a proxy with a different `has` trap only for
2374
2374
  // runtime-compiled render functions using `with` block.
@@ -2399,108 +2399,105 @@ function renderComponentRoot(instance) {
2399
2399
  ? attrs
2400
2400
  : getFunctionalFallthrough(attrs);
2401
2401
  }
2402
- // attr merging
2403
- // in dev mode, comments are preserved, and it's possible for a template
2404
- // to have comments along side the root element which makes it a fragment
2405
- let root = result;
2406
- let setRoot = undefined;
2407
- if (true &&
2408
- result.patchFlag > 0 &&
2409
- result.patchFlag & 2048 /* DEV_ROOT_FRAGMENT */) {
2410
- ;
2411
- [root, setRoot] = getChildRoot(result);
2412
- }
2413
- if (fallthroughAttrs && inheritAttrs !== false) {
2414
- const keys = Object.keys(fallthroughAttrs);
2415
- const { shapeFlag } = root;
2416
- if (keys.length) {
2417
- if (shapeFlag & (1 /* ELEMENT */ | 6 /* COMPONENT */)) {
2418
- if (propsOptions && keys.some(isModelListener)) {
2419
- // If a v-model listener (onUpdate:xxx) has a corresponding declared
2420
- // prop, it indicates this component expects to handle v-model and
2421
- // it should not fallthrough.
2422
- // related: #1543, #1643, #1989
2423
- fallthroughAttrs = filterModelListeners(fallthroughAttrs, propsOptions);
2424
- }
2425
- root = cloneVNode(root, fallthroughAttrs);
2426
- }
2427
- else if (true && !accessedAttrs && root.type !== Comment) {
2428
- const allAttrs = Object.keys(attrs);
2429
- const eventAttrs = [];
2430
- const extraAttrs = [];
2431
- for (let i = 0, l = allAttrs.length; i < l; i++) {
2432
- const key = allAttrs[i];
2433
- if (isOn(key)) {
2434
- // ignore v-model handlers when they fail to fallthrough
2435
- if (!isModelListener(key)) {
2436
- // remove `on`, lowercase first letter to reflect event casing
2437
- // accurately
2438
- eventAttrs.push(key[2].toLowerCase() + key.slice(3));
2439
- }
2440
- }
2441
- else {
2442
- extraAttrs.push(key);
2402
+ }
2403
+ catch (err) {
2404
+ blockStack.length = 0;
2405
+ handleError(err, instance, 1 /* RENDER_FUNCTION */);
2406
+ result = createVNode(Comment);
2407
+ }
2408
+ // attr merging
2409
+ // in dev mode, comments are preserved, and it's possible for a template
2410
+ // to have comments along side the root element which makes it a fragment
2411
+ let root = result;
2412
+ let setRoot = undefined;
2413
+ if (result.patchFlag > 0 &&
2414
+ result.patchFlag & 2048 /* DEV_ROOT_FRAGMENT */) {
2415
+ [root, setRoot] = getChildRoot(result);
2416
+ }
2417
+ if (fallthroughAttrs && inheritAttrs !== false) {
2418
+ const keys = Object.keys(fallthroughAttrs);
2419
+ const { shapeFlag } = root;
2420
+ if (keys.length) {
2421
+ if (shapeFlag & (1 /* ELEMENT */ | 6 /* COMPONENT */)) {
2422
+ if (propsOptions && keys.some(isModelListener)) {
2423
+ // If a v-model listener (onUpdate:xxx) has a corresponding declared
2424
+ // prop, it indicates this component expects to handle v-model and
2425
+ // it should not fallthrough.
2426
+ // related: #1543, #1643, #1989
2427
+ fallthroughAttrs = filterModelListeners(fallthroughAttrs, propsOptions);
2428
+ }
2429
+ root = cloneVNode(root, fallthroughAttrs);
2430
+ }
2431
+ else if (!accessedAttrs && root.type !== Comment) {
2432
+ const allAttrs = Object.keys(attrs);
2433
+ const eventAttrs = [];
2434
+ const extraAttrs = [];
2435
+ for (let i = 0, l = allAttrs.length; i < l; i++) {
2436
+ const key = allAttrs[i];
2437
+ if (isOn(key)) {
2438
+ // ignore v-model handlers when they fail to fallthrough
2439
+ if (!isModelListener(key)) {
2440
+ // remove `on`, lowercase first letter to reflect event casing
2441
+ // accurately
2442
+ eventAttrs.push(key[2].toLowerCase() + key.slice(3));
2443
2443
  }
2444
2444
  }
2445
- if (extraAttrs.length) {
2446
- warn$1(`Extraneous non-props attributes (` +
2447
- `${extraAttrs.join(', ')}) ` +
2448
- `were passed to component but could not be automatically inherited ` +
2449
- `because component renders fragment or text root nodes.`);
2450
- }
2451
- if (eventAttrs.length) {
2452
- warn$1(`Extraneous non-emits event listeners (` +
2453
- `${eventAttrs.join(', ')}) ` +
2454
- `were passed to component but could not be automatically inherited ` +
2455
- `because component renders fragment or text root nodes. ` +
2456
- `If the listener is intended to be a component custom event listener only, ` +
2457
- `declare it using the "emits" option.`);
2445
+ else {
2446
+ extraAttrs.push(key);
2458
2447
  }
2459
2448
  }
2460
- }
2461
- }
2462
- if (true &&
2463
- isCompatEnabled("INSTANCE_ATTRS_CLASS_STYLE" /* INSTANCE_ATTRS_CLASS_STYLE */, instance) &&
2464
- vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */ &&
2465
- root.shapeFlag & (1 /* ELEMENT */ | 6 /* COMPONENT */)) {
2466
- const { class: cls, style } = vnode.props || {};
2467
- if (cls || style) {
2468
- if (true && inheritAttrs === false) {
2469
- warnDeprecation("INSTANCE_ATTRS_CLASS_STYLE" /* INSTANCE_ATTRS_CLASS_STYLE */, instance, getComponentName(instance.type));
2449
+ if (extraAttrs.length) {
2450
+ warn$1(`Extraneous non-props attributes (` +
2451
+ `${extraAttrs.join(', ')}) ` +
2452
+ `were passed to component but could not be automatically inherited ` +
2453
+ `because component renders fragment or text root nodes.`);
2454
+ }
2455
+ if (eventAttrs.length) {
2456
+ warn$1(`Extraneous non-emits event listeners (` +
2457
+ `${eventAttrs.join(', ')}) ` +
2458
+ `were passed to component but could not be automatically inherited ` +
2459
+ `because component renders fragment or text root nodes. ` +
2460
+ `If the listener is intended to be a component custom event listener only, ` +
2461
+ `declare it using the "emits" option.`);
2470
2462
  }
2471
- root = cloneVNode(root, {
2472
- class: cls,
2473
- style: style
2474
- });
2475
- }
2476
- }
2477
- // inherit directives
2478
- if (vnode.dirs) {
2479
- if (true && !isElementRoot(root)) {
2480
- warn$1(`Runtime directive used on component with non-element root node. ` +
2481
- `The directives will not function as intended.`);
2482
2463
  }
2483
- root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs;
2484
2464
  }
2485
- // inherit transition data
2486
- if (vnode.transition) {
2487
- if (true && !isElementRoot(root)) {
2488
- warn$1(`Component inside <Transition> renders non-element root node ` +
2489
- `that cannot be animated.`);
2465
+ }
2466
+ if (isCompatEnabled("INSTANCE_ATTRS_CLASS_STYLE" /* INSTANCE_ATTRS_CLASS_STYLE */, instance) &&
2467
+ vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */ &&
2468
+ root.shapeFlag & (1 /* ELEMENT */ | 6 /* COMPONENT */)) {
2469
+ const { class: cls, style } = vnode.props || {};
2470
+ if (cls || style) {
2471
+ if (inheritAttrs === false) {
2472
+ warnDeprecation("INSTANCE_ATTRS_CLASS_STYLE" /* INSTANCE_ATTRS_CLASS_STYLE */, instance, getComponentName(instance.type));
2490
2473
  }
2491
- root.transition = vnode.transition;
2474
+ root = cloneVNode(root, {
2475
+ class: cls,
2476
+ style: style
2477
+ });
2492
2478
  }
2493
- if (true && setRoot) {
2494
- setRoot(root);
2479
+ }
2480
+ // inherit directives
2481
+ if (vnode.dirs) {
2482
+ if (!isElementRoot(root)) {
2483
+ warn$1(`Runtime directive used on component with non-element root node. ` +
2484
+ `The directives will not function as intended.`);
2495
2485
  }
2496
- else {
2497
- result = root;
2486
+ root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs;
2487
+ }
2488
+ // inherit transition data
2489
+ if (vnode.transition) {
2490
+ if (!isElementRoot(root)) {
2491
+ warn$1(`Component inside <Transition> renders non-element root node ` +
2492
+ `that cannot be animated.`);
2498
2493
  }
2494
+ root.transition = vnode.transition;
2499
2495
  }
2500
- catch (err) {
2501
- blockStack.length = 0;
2502
- handleError(err, instance, 1 /* RENDER_FUNCTION */);
2503
- result = createVNode(Comment);
2496
+ if (setRoot) {
2497
+ setRoot(root);
2498
+ }
2499
+ else {
2500
+ result = root;
2504
2501
  }
2505
2502
  setCurrentRenderingInstance(prev);
2506
2503
  return result;
@@ -3035,8 +3032,8 @@ function normalizeSuspenseChildren(vnode) {
3035
3032
  function normalizeSuspenseSlot(s) {
3036
3033
  let block;
3037
3034
  if (isFunction(s)) {
3038
- const isCompiledSlot = s._c;
3039
- if (isCompiledSlot) {
3035
+ const trackBlock = isBlockTreeEnabled && s._c;
3036
+ if (trackBlock) {
3040
3037
  // disableTracking: false
3041
3038
  // allow block tracking for compiled slots
3042
3039
  // (see ./componentRenderContext.ts)
@@ -3044,7 +3041,7 @@ function normalizeSuspenseSlot(s) {
3044
3041
  openBlock();
3045
3042
  }
3046
3043
  s = s();
3047
- if (isCompiledSlot) {
3044
+ if (trackBlock) {
3048
3045
  s._d = true;
3049
3046
  block = currentBlock;
3050
3047
  closeBlock();
@@ -5200,7 +5197,7 @@ function createCompatVue(createApp, createSingletonApp) {
5200
5197
  return vm;
5201
5198
  }
5202
5199
  }
5203
- Vue.version = "3.2.11";
5200
+ Vue.version = "3.2.12";
5204
5201
  Vue.config = singletonApp.config;
5205
5202
  Vue.use = (p, ...options) => {
5206
5203
  if (p && isFunction(p.install)) {
@@ -7848,7 +7845,11 @@ function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false
7848
7845
  return Component;
7849
7846
  }
7850
7847
  if (warnMissing && !res) {
7851
- warn$1(`Failed to resolve ${type.slice(0, -1)}: ${name}`);
7848
+ const extra = type === COMPONENTS
7849
+ ? `\nIf this is a native custom element, make sure to exclude it from ` +
7850
+ `component resolution via compilerOptions.isCustomElement.`
7851
+ : ``;
7852
+ warn$1(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`);
7852
7853
  }
7853
7854
  return res;
7854
7855
  }
@@ -9290,17 +9291,19 @@ function exposePropsOnRenderContext(instance) {
9290
9291
  function exposeSetupStateOnRenderContext(instance) {
9291
9292
  const { ctx, setupState } = instance;
9292
9293
  Object.keys(toRaw(setupState)).forEach(key => {
9293
- if (!setupState.__isScriptSetup && (key[0] === '$' || key[0] === '_')) {
9294
- warn$1(`setup() return property ${JSON.stringify(key)} should not start with "$" or "_" ` +
9295
- `which are reserved prefixes for Vue internals.`);
9296
- return;
9294
+ if (!setupState.__isScriptSetup) {
9295
+ if (key[0] === '$' || key[0] === '_') {
9296
+ warn$1(`setup() return property ${JSON.stringify(key)} should not start with "$" or "_" ` +
9297
+ `which are reserved prefixes for Vue internals.`);
9298
+ return;
9299
+ }
9300
+ Object.defineProperty(ctx, key, {
9301
+ enumerable: true,
9302
+ configurable: true,
9303
+ get: () => setupState[key],
9304
+ set: NOOP
9305
+ });
9297
9306
  }
9298
- Object.defineProperty(ctx, key, {
9299
- enumerable: true,
9300
- configurable: true,
9301
- get: () => setupState[key],
9302
- set: NOOP
9303
- });
9304
9307
  });
9305
9308
  }
9306
9309
 
@@ -10059,11 +10062,18 @@ function flushJobs(seen) {
10059
10062
  // 2. If a component is unmounted during a parent component's update,
10060
10063
  // its update can be skipped.
10061
10064
  queue.sort((a, b) => getId(a) - getId(b));
10065
+ // conditional usage of checkRecursiveUpdate must be determined out of
10066
+ // try ... catch block since Rollup by default de-optimizes treeshaking
10067
+ // inside try-catch. This can leave all warning code unshaked. Although
10068
+ // they would get eventually shaken by a minifier like terser, some minifiers
10069
+ // would fail to do that (e.g. https://github.com/evanw/esbuild/issues/1610)
10070
+ const check = (job) => checkRecursiveUpdates(seen, job)
10071
+ ;
10062
10072
  try {
10063
10073
  for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
10064
10074
  const job = queue[flushIndex];
10065
10075
  if (job && job.active !== false) {
10066
- if (true && checkRecursiveUpdates(seen, job)) {
10076
+ if (true && check(job)) {
10067
10077
  continue;
10068
10078
  }
10069
10079
  // console.log(`running:`, job.id)
@@ -10756,7 +10766,7 @@ function isMemoSame(cached, memo) {
10756
10766
  }
10757
10767
 
10758
10768
  // Core API ------------------------------------------------------------------
10759
- const version = "3.2.11";
10769
+ const version = "3.2.12";
10760
10770
  /**
10761
10771
  * SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
10762
10772
  * @internal
@@ -11282,6 +11292,7 @@ class VueElement extends BaseClass {
11282
11292
  this._instance = null;
11283
11293
  this._connected = false;
11284
11294
  this._resolved = false;
11295
+ this._numberProps = null;
11285
11296
  if (this.shadowRoot && hydrate) {
11286
11297
  hydrate(this._createVNode(), this.shadowRoot);
11287
11298
  }
@@ -11297,18 +11308,17 @@ class VueElement extends BaseClass {
11297
11308
  this._setAttr(this.attributes[i].name);
11298
11309
  }
11299
11310
  // watch future attr changes
11300
- const observer = new MutationObserver(mutations => {
11311
+ new MutationObserver(mutations => {
11301
11312
  for (const m of mutations) {
11302
11313
  this._setAttr(m.attributeName);
11303
11314
  }
11304
- });
11305
- observer.observe(this, { attributes: true });
11315
+ }).observe(this, { attributes: true });
11306
11316
  }
11307
11317
  connectedCallback() {
11308
11318
  this._connected = true;
11309
11319
  if (!this._instance) {
11310
11320
  this._resolveDef();
11311
- render(this._createVNode(), this.shadowRoot);
11321
+ this._update();
11312
11322
  }
11313
11323
  }
11314
11324
  disconnectedCallback() {
@@ -11329,15 +11339,31 @@ class VueElement extends BaseClass {
11329
11339
  }
11330
11340
  const resolve = (def) => {
11331
11341
  this._resolved = true;
11342
+ const { props, styles } = def;
11343
+ const hasOptions = !isArray(props);
11344
+ const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : [];
11345
+ // cast Number-type props set before resolve
11346
+ let numberProps;
11347
+ if (hasOptions) {
11348
+ for (const key in this._props) {
11349
+ const opt = props[key];
11350
+ if (opt === Number || (opt && opt.type === Number)) {
11351
+ this._props[key] = toNumber(this._props[key]);
11352
+ (numberProps || (numberProps = Object.create(null)))[key] = true;
11353
+ }
11354
+ }
11355
+ }
11356
+ if (numberProps) {
11357
+ this._numberProps = numberProps;
11358
+ this._update();
11359
+ }
11332
11360
  // check if there are props set pre-upgrade or connect
11333
11361
  for (const key of Object.keys(this)) {
11334
11362
  if (key[0] !== '_') {
11335
11363
  this._setProp(key, this[key]);
11336
11364
  }
11337
11365
  }
11338
- const { props, styles } = def;
11339
11366
  // defining getter/setters on prototype
11340
- const rawKeys = props ? (isArray(props) ? props : Object.keys(props)) : [];
11341
11367
  for (const key of rawKeys.map(camelize)) {
11342
11368
  Object.defineProperty(this, key, {
11343
11369
  get() {
@@ -11359,7 +11385,11 @@ class VueElement extends BaseClass {
11359
11385
  }
11360
11386
  }
11361
11387
  _setAttr(key) {
11362
- this._setProp(camelize(key), toNumber(this.getAttribute(key)), false);
11388
+ let value = this.getAttribute(key);
11389
+ if (this._numberProps && this._numberProps[key]) {
11390
+ value = toNumber(value);
11391
+ }
11392
+ this._setProp(camelize(key), value, false);
11363
11393
  }
11364
11394
  /**
11365
11395
  * @internal
@@ -11374,7 +11404,7 @@ class VueElement extends BaseClass {
11374
11404
  if (val !== this._props[key]) {
11375
11405
  this._props[key] = val;
11376
11406
  if (this._instance) {
11377
- render(this._createVNode(), this.shadowRoot);
11407
+ this._update();
11378
11408
  }
11379
11409
  // reflect
11380
11410
  if (shouldReflect) {
@@ -11390,6 +11420,9 @@ class VueElement extends BaseClass {
11390
11420
  }
11391
11421
  }
11392
11422
  }
11423
+ _update() {
11424
+ render(this._createVNode(), this.shadowRoot);
11425
+ }
11393
11426
  _createVNode() {
11394
11427
  const vnode = createVNode(this._def, extend({}, this._props));
11395
11428
  if (!this._instance) {
@@ -11410,7 +11443,7 @@ class VueElement extends BaseClass {
11410
11443
  if (!this._def.__asyncLoader) {
11411
11444
  // reload
11412
11445
  this._instance = null;
11413
- render(this._createVNode(), this.shadowRoot);
11446
+ this._update();
11414
11447
  }
11415
11448
  };
11416
11449
  }