@vue/compat 3.2.8 → 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.
package/dist/vue.cjs.js CHANGED
@@ -1,8 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var types = require('@babel/types');
6
3
  var estreeWalker = require('estree-walker');
7
4
  var parser = require('@babel/parser');
8
5
  var sourceMap = require('source-map');
@@ -1682,41 +1679,33 @@ function registerHMR(instance) {
1682
1679
  const id = instance.type.__hmrId;
1683
1680
  let record = map.get(id);
1684
1681
  if (!record) {
1685
- createRecord(id, instance.type);
1682
+ createRecord(id);
1686
1683
  record = map.get(id);
1687
1684
  }
1688
- record.instances.add(instance);
1685
+ record.add(instance);
1689
1686
  }
1690
1687
  function unregisterHMR(instance) {
1691
- map.get(instance.type.__hmrId).instances.delete(instance);
1688
+ map.get(instance.type.__hmrId).delete(instance);
1692
1689
  }
1693
- function createRecord(id, component) {
1694
- if (!component) {
1695
- warn$1(`HMR API usage is out of date.\n` +
1696
- `Please upgrade vue-loader/vite/rollup-plugin-vue or other relevant ` +
1697
- `dependency that handles Vue SFC compilation.`);
1698
- component = {};
1699
- }
1690
+ function createRecord(id) {
1700
1691
  if (map.has(id)) {
1701
1692
  return false;
1702
1693
  }
1703
- map.set(id, {
1704
- component: isClassComponent(component) ? component.__vccOpts : component,
1705
- instances: new Set()
1706
- });
1694
+ map.set(id, new Set());
1707
1695
  return true;
1708
1696
  }
1697
+ function normalizeClassComponent(component) {
1698
+ return isClassComponent(component) ? component.__vccOpts : component;
1699
+ }
1709
1700
  function rerender(id, newRender) {
1710
1701
  const record = map.get(id);
1711
- if (!record)
1702
+ if (!record) {
1712
1703
  return;
1713
- if (newRender)
1714
- record.component.render = newRender;
1715
- // Array.from creates a snapshot which avoids the set being mutated during
1716
- // updates
1717
- Array.from(record.instances).forEach(instance => {
1704
+ }
1705
+ [...record].forEach(instance => {
1718
1706
  if (newRender) {
1719
1707
  instance.render = newRender;
1708
+ normalizeClassComponent(instance.type).render = newRender;
1720
1709
  }
1721
1710
  instance.renderCache = [];
1722
1711
  // this flag forces child components with slot content to update
@@ -1729,34 +1718,31 @@ function reload(id, newComp) {
1729
1718
  const record = map.get(id);
1730
1719
  if (!record)
1731
1720
  return;
1732
- // Array.from creates a snapshot which avoids the set being mutated during
1733
- // updates
1734
- const { component, instances } = record;
1735
- if (!hmrDirtyComponents.has(component)) {
1736
- // 1. Update existing comp definition to match new one
1737
- newComp = isClassComponent(newComp) ? newComp.__vccOpts : newComp;
1738
- extend(component, newComp);
1739
- for (const key in component) {
1740
- if (key !== '__file' && !(key in newComp)) {
1741
- delete component[key];
1742
- }
1743
- }
1744
- // 2. Mark component dirty. This forces the renderer to replace the component
1745
- // on patch.
1746
- hmrDirtyComponents.add(component);
1747
- // 3. Make sure to unmark the component after the reload.
1748
- queuePostFlushCb(() => {
1749
- hmrDirtyComponents.delete(component);
1750
- });
1751
- }
1752
- Array.from(instances).forEach(instance => {
1753
- // invalidate options resolution cache
1721
+ newComp = normalizeClassComponent(newComp);
1722
+ // create a snapshot which avoids the set being mutated during updates
1723
+ const instances = [...record];
1724
+ for (const instance of instances) {
1725
+ const oldComp = normalizeClassComponent(instance.type);
1726
+ if (!hmrDirtyComponents.has(oldComp)) {
1727
+ // 1. Update existing comp definition to match new one
1728
+ extend(oldComp, newComp);
1729
+ for (const key in oldComp) {
1730
+ if (key !== '__file' && !(key in newComp)) {
1731
+ delete oldComp[key];
1732
+ }
1733
+ }
1734
+ // 2. mark definition dirty. This forces the renderer to replace the
1735
+ // component on patch.
1736
+ hmrDirtyComponents.add(oldComp);
1737
+ }
1738
+ // 3. invalidate options resolution cache
1754
1739
  instance.appContext.optionsCache.delete(instance.type);
1740
+ // 4. actually update
1755
1741
  if (instance.ceReload) {
1756
1742
  // custom element
1757
- hmrDirtyComponents.add(component);
1743
+ hmrDirtyComponents.add(oldComp);
1758
1744
  instance.ceReload(newComp.styles);
1759
- hmrDirtyComponents.delete(component);
1745
+ hmrDirtyComponents.delete(oldComp);
1760
1746
  }
1761
1747
  else if (instance.parent) {
1762
1748
  // 4. Force the parent instance to re-render. This will cause all updated
@@ -1781,6 +1767,12 @@ function reload(id, newComp) {
1781
1767
  else {
1782
1768
  console.warn('[HMR] Root or manually mounted instance modified. Full reload required.');
1783
1769
  }
1770
+ }
1771
+ // 5. make sure to cleanup dirty hmr components after update
1772
+ queuePostFlushCb(() => {
1773
+ for (const instance of instances) {
1774
+ hmrDirtyComponents.delete(normalizeClassComponent(instance.type));
1775
+ }
1784
1776
  });
1785
1777
  }
1786
1778
  function tryWrap(fn) {
@@ -2594,12 +2586,12 @@ function markAttrsAccessed() {
2594
2586
  function renderComponentRoot(instance) {
2595
2587
  const { type: Component, vnode, proxy, withProxy, props, propsOptions: [propsOptions], slots, attrs, emit, render, renderCache, data, setupState, ctx, inheritAttrs } = instance;
2596
2588
  let result;
2589
+ let fallthroughAttrs;
2597
2590
  const prev = setCurrentRenderingInstance(instance);
2598
2591
  {
2599
2592
  accessedAttrs = false;
2600
2593
  }
2601
2594
  try {
2602
- let fallthroughAttrs;
2603
2595
  if (vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {
2604
2596
  // withProxy is a proxy with a different `has` trap only for
2605
2597
  // runtime-compiled render functions using `with` block.
@@ -2630,108 +2622,105 @@ function renderComponentRoot(instance) {
2630
2622
  ? attrs
2631
2623
  : getFunctionalFallthrough(attrs);
2632
2624
  }
2633
- // attr merging
2634
- // in dev mode, comments are preserved, and it's possible for a template
2635
- // to have comments along side the root element which makes it a fragment
2636
- let root = result;
2637
- let setRoot = undefined;
2638
- if (true &&
2639
- result.patchFlag > 0 &&
2640
- result.patchFlag & 2048 /* DEV_ROOT_FRAGMENT */) {
2641
- ;
2642
- [root, setRoot] = getChildRoot(result);
2643
- }
2644
- if (fallthroughAttrs && inheritAttrs !== false) {
2645
- const keys = Object.keys(fallthroughAttrs);
2646
- const { shapeFlag } = root;
2647
- if (keys.length) {
2648
- if (shapeFlag & (1 /* ELEMENT */ | 6 /* COMPONENT */)) {
2649
- if (propsOptions && keys.some(isModelListener)) {
2650
- // If a v-model listener (onUpdate:xxx) has a corresponding declared
2651
- // prop, it indicates this component expects to handle v-model and
2652
- // it should not fallthrough.
2653
- // related: #1543, #1643, #1989
2654
- fallthroughAttrs = filterModelListeners(fallthroughAttrs, propsOptions);
2655
- }
2656
- root = cloneVNode(root, fallthroughAttrs);
2657
- }
2658
- else if (true && !accessedAttrs && root.type !== Comment) {
2659
- const allAttrs = Object.keys(attrs);
2660
- const eventAttrs = [];
2661
- const extraAttrs = [];
2662
- for (let i = 0, l = allAttrs.length; i < l; i++) {
2663
- const key = allAttrs[i];
2664
- if (isOn(key)) {
2665
- // ignore v-model handlers when they fail to fallthrough
2666
- if (!isModelListener(key)) {
2667
- // remove `on`, lowercase first letter to reflect event casing
2668
- // accurately
2669
- eventAttrs.push(key[2].toLowerCase() + key.slice(3));
2670
- }
2671
- }
2672
- else {
2673
- extraAttrs.push(key);
2625
+ }
2626
+ catch (err) {
2627
+ blockStack.length = 0;
2628
+ handleError(err, instance, 1 /* RENDER_FUNCTION */);
2629
+ result = createVNode(Comment);
2630
+ }
2631
+ // attr merging
2632
+ // in dev mode, comments are preserved, and it's possible for a template
2633
+ // to have comments along side the root element which makes it a fragment
2634
+ let root = result;
2635
+ let setRoot = undefined;
2636
+ if (result.patchFlag > 0 &&
2637
+ result.patchFlag & 2048 /* DEV_ROOT_FRAGMENT */) {
2638
+ [root, setRoot] = getChildRoot(result);
2639
+ }
2640
+ if (fallthroughAttrs && inheritAttrs !== false) {
2641
+ const keys = Object.keys(fallthroughAttrs);
2642
+ const { shapeFlag } = root;
2643
+ if (keys.length) {
2644
+ if (shapeFlag & (1 /* ELEMENT */ | 6 /* COMPONENT */)) {
2645
+ if (propsOptions && keys.some(isModelListener)) {
2646
+ // If a v-model listener (onUpdate:xxx) has a corresponding declared
2647
+ // prop, it indicates this component expects to handle v-model and
2648
+ // it should not fallthrough.
2649
+ // related: #1543, #1643, #1989
2650
+ fallthroughAttrs = filterModelListeners(fallthroughAttrs, propsOptions);
2651
+ }
2652
+ root = cloneVNode(root, fallthroughAttrs);
2653
+ }
2654
+ else if (!accessedAttrs && root.type !== Comment) {
2655
+ const allAttrs = Object.keys(attrs);
2656
+ const eventAttrs = [];
2657
+ const extraAttrs = [];
2658
+ for (let i = 0, l = allAttrs.length; i < l; i++) {
2659
+ const key = allAttrs[i];
2660
+ if (isOn(key)) {
2661
+ // ignore v-model handlers when they fail to fallthrough
2662
+ if (!isModelListener(key)) {
2663
+ // remove `on`, lowercase first letter to reflect event casing
2664
+ // accurately
2665
+ eventAttrs.push(key[2].toLowerCase() + key.slice(3));
2674
2666
  }
2675
2667
  }
2676
- if (extraAttrs.length) {
2677
- warn$1(`Extraneous non-props attributes (` +
2678
- `${extraAttrs.join(', ')}) ` +
2679
- `were passed to component but could not be automatically inherited ` +
2680
- `because component renders fragment or text root nodes.`);
2681
- }
2682
- if (eventAttrs.length) {
2683
- warn$1(`Extraneous non-emits event listeners (` +
2684
- `${eventAttrs.join(', ')}) ` +
2685
- `were passed to component but could not be automatically inherited ` +
2686
- `because component renders fragment or text root nodes. ` +
2687
- `If the listener is intended to be a component custom event listener only, ` +
2688
- `declare it using the "emits" option.`);
2668
+ else {
2669
+ extraAttrs.push(key);
2689
2670
  }
2690
2671
  }
2691
- }
2692
- }
2693
- if (true &&
2694
- isCompatEnabled("INSTANCE_ATTRS_CLASS_STYLE" /* INSTANCE_ATTRS_CLASS_STYLE */, instance) &&
2695
- vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */ &&
2696
- root.shapeFlag & (1 /* ELEMENT */ | 6 /* COMPONENT */)) {
2697
- const { class: cls, style } = vnode.props || {};
2698
- if (cls || style) {
2699
- if (true && inheritAttrs === false) {
2700
- warnDeprecation("INSTANCE_ATTRS_CLASS_STYLE" /* INSTANCE_ATTRS_CLASS_STYLE */, instance, getComponentName(instance.type));
2672
+ if (extraAttrs.length) {
2673
+ warn$1(`Extraneous non-props attributes (` +
2674
+ `${extraAttrs.join(', ')}) ` +
2675
+ `were passed to component but could not be automatically inherited ` +
2676
+ `because component renders fragment or text root nodes.`);
2677
+ }
2678
+ if (eventAttrs.length) {
2679
+ warn$1(`Extraneous non-emits event listeners (` +
2680
+ `${eventAttrs.join(', ')}) ` +
2681
+ `were passed to component but could not be automatically inherited ` +
2682
+ `because component renders fragment or text root nodes. ` +
2683
+ `If the listener is intended to be a component custom event listener only, ` +
2684
+ `declare it using the "emits" option.`);
2701
2685
  }
2702
- root = cloneVNode(root, {
2703
- class: cls,
2704
- style: style
2705
- });
2706
- }
2707
- }
2708
- // inherit directives
2709
- if (vnode.dirs) {
2710
- if (true && !isElementRoot(root)) {
2711
- warn$1(`Runtime directive used on component with non-element root node. ` +
2712
- `The directives will not function as intended.`);
2713
2686
  }
2714
- root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs;
2715
2687
  }
2716
- // inherit transition data
2717
- if (vnode.transition) {
2718
- if (true && !isElementRoot(root)) {
2719
- warn$1(`Component inside <Transition> renders non-element root node ` +
2720
- `that cannot be animated.`);
2688
+ }
2689
+ if (isCompatEnabled("INSTANCE_ATTRS_CLASS_STYLE" /* INSTANCE_ATTRS_CLASS_STYLE */, instance) &&
2690
+ vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */ &&
2691
+ root.shapeFlag & (1 /* ELEMENT */ | 6 /* COMPONENT */)) {
2692
+ const { class: cls, style } = vnode.props || {};
2693
+ if (cls || style) {
2694
+ if (inheritAttrs === false) {
2695
+ warnDeprecation("INSTANCE_ATTRS_CLASS_STYLE" /* INSTANCE_ATTRS_CLASS_STYLE */, instance, getComponentName(instance.type));
2721
2696
  }
2722
- root.transition = vnode.transition;
2697
+ root = cloneVNode(root, {
2698
+ class: cls,
2699
+ style: style
2700
+ });
2723
2701
  }
2724
- if (true && setRoot) {
2725
- setRoot(root);
2702
+ }
2703
+ // inherit directives
2704
+ if (vnode.dirs) {
2705
+ if (!isElementRoot(root)) {
2706
+ warn$1(`Runtime directive used on component with non-element root node. ` +
2707
+ `The directives will not function as intended.`);
2726
2708
  }
2727
- else {
2728
- result = root;
2709
+ root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs;
2710
+ }
2711
+ // inherit transition data
2712
+ if (vnode.transition) {
2713
+ if (!isElementRoot(root)) {
2714
+ warn$1(`Component inside <Transition> renders non-element root node ` +
2715
+ `that cannot be animated.`);
2729
2716
  }
2717
+ root.transition = vnode.transition;
2730
2718
  }
2731
- catch (err) {
2732
- blockStack.length = 0;
2733
- handleError(err, instance, 1 /* RENDER_FUNCTION */);
2734
- result = createVNode(Comment);
2719
+ if (setRoot) {
2720
+ setRoot(root);
2721
+ }
2722
+ else {
2723
+ result = root;
2735
2724
  }
2736
2725
  setCurrentRenderingInstance(prev);
2737
2726
  return result;
@@ -3266,8 +3255,8 @@ function normalizeSuspenseChildren(vnode) {
3266
3255
  function normalizeSuspenseSlot(s) {
3267
3256
  let block;
3268
3257
  if (isFunction(s)) {
3269
- const isCompiledSlot = s._c;
3270
- if (isCompiledSlot) {
3258
+ const trackBlock = isBlockTreeEnabled && s._c;
3259
+ if (trackBlock) {
3271
3260
  // disableTracking: false
3272
3261
  // allow block tracking for compiled slots
3273
3262
  // (see ./componentRenderContext.ts)
@@ -3275,7 +3264,7 @@ function normalizeSuspenseSlot(s) {
3275
3264
  openBlock();
3276
3265
  }
3277
3266
  s = s();
3278
- if (isCompiledSlot) {
3267
+ if (trackBlock) {
3279
3268
  s._d = true;
3280
3269
  block = currentBlock;
3281
3270
  closeBlock();
@@ -5431,7 +5420,7 @@ function createCompatVue(createApp, createSingletonApp) {
5431
5420
  return vm;
5432
5421
  }
5433
5422
  }
5434
- Vue.version = "3.2.8";
5423
+ Vue.version = "3.2.12";
5435
5424
  Vue.config = singletonApp.config;
5436
5425
  Vue.use = (p, ...options) => {
5437
5426
  if (p && isFunction(p.install)) {
@@ -8079,7 +8068,11 @@ function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false
8079
8068
  return Component;
8080
8069
  }
8081
8070
  if (warnMissing && !res) {
8082
- warn$1(`Failed to resolve ${type.slice(0, -1)}: ${name}`);
8071
+ const extra = type === COMPONENTS
8072
+ ? `\nIf this is a native custom element, make sure to exclude it from ` +
8073
+ `component resolution via compilerOptions.isCustomElement.`
8074
+ : ``;
8075
+ warn$1(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`);
8083
8076
  }
8084
8077
  return res;
8085
8078
  }
@@ -9521,17 +9514,19 @@ function exposePropsOnRenderContext(instance) {
9521
9514
  function exposeSetupStateOnRenderContext(instance) {
9522
9515
  const { ctx, setupState } = instance;
9523
9516
  Object.keys(toRaw(setupState)).forEach(key => {
9524
- if (!setupState.__isScriptSetup && (key[0] === '$' || key[0] === '_')) {
9525
- warn$1(`setup() return property ${JSON.stringify(key)} should not start with "$" or "_" ` +
9526
- `which are reserved prefixes for Vue internals.`);
9527
- return;
9517
+ if (!setupState.__isScriptSetup) {
9518
+ if (key[0] === '$' || key[0] === '_') {
9519
+ warn$1(`setup() return property ${JSON.stringify(key)} should not start with "$" or "_" ` +
9520
+ `which are reserved prefixes for Vue internals.`);
9521
+ return;
9522
+ }
9523
+ Object.defineProperty(ctx, key, {
9524
+ enumerable: true,
9525
+ configurable: true,
9526
+ get: () => setupState[key],
9527
+ set: NOOP
9528
+ });
9528
9529
  }
9529
- Object.defineProperty(ctx, key, {
9530
- enumerable: true,
9531
- configurable: true,
9532
- get: () => setupState[key],
9533
- set: NOOP
9534
- });
9535
9530
  });
9536
9531
  }
9537
9532
 
@@ -10304,11 +10299,18 @@ function flushJobs(seen) {
10304
10299
  // 2. If a component is unmounted during a parent component's update,
10305
10300
  // its update can be skipped.
10306
10301
  queue.sort((a, b) => getId(a) - getId(b));
10302
+ // conditional usage of checkRecursiveUpdate must be determined out of
10303
+ // try ... catch block since Rollup by default de-optimizes treeshaking
10304
+ // inside try-catch. This can leave all warning code unshaked. Although
10305
+ // they would get eventually shaken by a minifier like terser, some minifiers
10306
+ // would fail to do that (e.g. https://github.com/evanw/esbuild/issues/1610)
10307
+ const check = (job) => checkRecursiveUpdates(seen, job)
10308
+ ;
10307
10309
  try {
10308
10310
  for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
10309
10311
  const job = queue[flushIndex];
10310
10312
  if (job && job.active !== false) {
10311
- if (true && checkRecursiveUpdates(seen, job)) {
10313
+ if (true && check(job)) {
10312
10314
  continue;
10313
10315
  }
10314
10316
  // console.log(`running:`, job.id)
@@ -10669,7 +10671,7 @@ function defineExpose(exposed) {
10669
10671
  }
10670
10672
  /**
10671
10673
  * Vue `<script setup>` compiler macro for providing props default values when
10672
- * using type-based `defineProps` decalration.
10674
+ * using type-based `defineProps` declaration.
10673
10675
  *
10674
10676
  * Example usage:
10675
10677
  * ```ts
@@ -11018,7 +11020,7 @@ function isMemoSame(cached, memo) {
11018
11020
  }
11019
11021
 
11020
11022
  // Core API ------------------------------------------------------------------
11021
- const version = "3.2.8";
11023
+ const version = "3.2.12";
11022
11024
  const _ssrUtils = {
11023
11025
  createComponentInstance,
11024
11026
  setupComponent,
@@ -11155,19 +11157,13 @@ function patchClass(el, value, isSVG) {
11155
11157
 
11156
11158
  function patchStyle(el, prev, next) {
11157
11159
  const style = el.style;
11160
+ const currentDisplay = style.display;
11158
11161
  if (!next) {
11159
11162
  el.removeAttribute('style');
11160
11163
  }
11161
11164
  else if (isString(next)) {
11162
11165
  if (prev !== next) {
11163
- const current = style.display;
11164
11166
  style.cssText = next;
11165
- // indicates that the `display` of the element is controlled by `v-show`,
11166
- // so we always keep the current `display` value regardless of the `style` value,
11167
- // thus handing over control to `v-show`.
11168
- if ('_vod' in el) {
11169
- style.display = current;
11170
- }
11171
11167
  }
11172
11168
  }
11173
11169
  else {
@@ -11182,6 +11178,12 @@ function patchStyle(el, prev, next) {
11182
11178
  }
11183
11179
  }
11184
11180
  }
11181
+ // indicates that the `display` of the element is controlled by `v-show`,
11182
+ // so we always keep the current `display` value regardless of the `style` value,
11183
+ // thus handing over control to `v-show`.
11184
+ if ('_vod' in el) {
11185
+ style.display = currentDisplay;
11186
+ }
11185
11187
  }
11186
11188
  const importantRE = /\s*!important$/;
11187
11189
  function setStyle(style, name, val) {
@@ -11552,6 +11554,7 @@ class VueElement extends BaseClass {
11552
11554
  this._instance = null;
11553
11555
  this._connected = false;
11554
11556
  this._resolved = false;
11557
+ this._numberProps = null;
11555
11558
  if (this.shadowRoot && hydrate) {
11556
11559
  hydrate(this._createVNode(), this.shadowRoot);
11557
11560
  }
@@ -11567,18 +11570,17 @@ class VueElement extends BaseClass {
11567
11570
  this._setAttr(this.attributes[i].name);
11568
11571
  }
11569
11572
  // watch future attr changes
11570
- const observer = new MutationObserver(mutations => {
11573
+ new MutationObserver(mutations => {
11571
11574
  for (const m of mutations) {
11572
11575
  this._setAttr(m.attributeName);
11573
11576
  }
11574
- });
11575
- observer.observe(this, { attributes: true });
11577
+ }).observe(this, { attributes: true });
11576
11578
  }
11577
11579
  connectedCallback() {
11578
11580
  this._connected = true;
11579
11581
  if (!this._instance) {
11580
11582
  this._resolveDef();
11581
- render(this._createVNode(), this.shadowRoot);
11583
+ this._update();
11582
11584
  }
11583
11585
  }
11584
11586
  disconnectedCallback() {
@@ -11599,15 +11601,31 @@ class VueElement extends BaseClass {
11599
11601
  }
11600
11602
  const resolve = (def) => {
11601
11603
  this._resolved = true;
11604
+ const { props, styles } = def;
11605
+ const hasOptions = !isArray(props);
11606
+ const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : [];
11607
+ // cast Number-type props set before resolve
11608
+ let numberProps;
11609
+ if (hasOptions) {
11610
+ for (const key in this._props) {
11611
+ const opt = props[key];
11612
+ if (opt === Number || (opt && opt.type === Number)) {
11613
+ this._props[key] = toNumber(this._props[key]);
11614
+ (numberProps || (numberProps = Object.create(null)))[key] = true;
11615
+ }
11616
+ }
11617
+ }
11618
+ if (numberProps) {
11619
+ this._numberProps = numberProps;
11620
+ this._update();
11621
+ }
11602
11622
  // check if there are props set pre-upgrade or connect
11603
11623
  for (const key of Object.keys(this)) {
11604
11624
  if (key[0] !== '_') {
11605
11625
  this._setProp(key, this[key]);
11606
11626
  }
11607
11627
  }
11608
- const { props, styles } = def;
11609
11628
  // defining getter/setters on prototype
11610
- const rawKeys = props ? (isArray(props) ? props : Object.keys(props)) : [];
11611
11629
  for (const key of rawKeys.map(camelize)) {
11612
11630
  Object.defineProperty(this, key, {
11613
11631
  get() {
@@ -11629,7 +11647,11 @@ class VueElement extends BaseClass {
11629
11647
  }
11630
11648
  }
11631
11649
  _setAttr(key) {
11632
- this._setProp(camelize(key), toNumber(this.getAttribute(key)), false);
11650
+ let value = this.getAttribute(key);
11651
+ if (this._numberProps && this._numberProps[key]) {
11652
+ value = toNumber(value);
11653
+ }
11654
+ this._setProp(camelize(key), value, false);
11633
11655
  }
11634
11656
  /**
11635
11657
  * @internal
@@ -11644,7 +11666,7 @@ class VueElement extends BaseClass {
11644
11666
  if (val !== this._props[key]) {
11645
11667
  this._props[key] = val;
11646
11668
  if (this._instance) {
11647
- render(this._createVNode(), this.shadowRoot);
11669
+ this._update();
11648
11670
  }
11649
11671
  // reflect
11650
11672
  if (shouldReflect) {
@@ -11660,6 +11682,9 @@ class VueElement extends BaseClass {
11660
11682
  }
11661
11683
  }
11662
11684
  }
11685
+ _update() {
11686
+ render(this._createVNode(), this.shadowRoot);
11687
+ }
11663
11688
  _createVNode() {
11664
11689
  const vnode = createVNode(this._def, extend({}, this._props));
11665
11690
  if (!this._instance) {
@@ -11680,7 +11705,7 @@ class VueElement extends BaseClass {
11680
11705
  if (!this._def.__asyncLoader) {
11681
11706
  // reload
11682
11707
  this._instance = null;
11683
- render(this._createVNode(), this.shadowRoot);
11708
+ this._update();
11684
11709
  }
11685
11710
  };
11686
11711
  }
@@ -14149,6 +14174,13 @@ function parseAttributes(context, type) {
14149
14174
  emitError(context, 3 /* END_TAG_WITH_ATTRIBUTES */);
14150
14175
  }
14151
14176
  const attr = parseAttribute(context, attributeNames);
14177
+ // Trim whitespace between class
14178
+ // https://github.com/vuejs/vue-next/issues/4251
14179
+ if (attr.type === 6 /* ATTRIBUTE */ &&
14180
+ attr.value &&
14181
+ attr.name === 'class') {
14182
+ attr.value.content = attr.value.content.replace(/\s+/g, ' ').trim();
14183
+ }
14152
14184
  if (type === 0 /* Start */) {
14153
14185
  props.push(attr);
14154
14186
  }
@@ -14211,8 +14243,11 @@ function parseAttribute(context, nameSet) {
14211
14243
  isStatic = false;
14212
14244
  if (!content.endsWith(']')) {
14213
14245
  emitError(context, 27 /* X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END */);
14246
+ content = content.substr(1);
14247
+ }
14248
+ else {
14249
+ content = content.substr(1, content.length - 2);
14214
14250
  }
14215
- content = content.substr(1, content.length - 2);
14216
14251
  }
14217
14252
  else if (isSlot) {
14218
14253
  // #1241 special case for v-slot: vuetify relies extensively on slot
@@ -15883,7 +15918,7 @@ function isReferencedIdentifier(id, parent, parentStack) {
15883
15918
  if (id.name === 'arguments') {
15884
15919
  return false;
15885
15920
  }
15886
- if (types.isReferenced(id, parent)) {
15921
+ if (isReferenced(id, parent)) {
15887
15922
  return true;
15888
15923
  }
15889
15924
  // babel's isReferenced check returns false for ids being assigned to, so we
@@ -15996,7 +16031,159 @@ const isFunctionType = (node) => {
15996
16031
  const isStaticProperty = (node) => node &&
15997
16032
  (node.type === 'ObjectProperty' || node.type === 'ObjectMethod') &&
15998
16033
  !node.computed;
15999
- const isStaticPropertyKey = (node, parent) => isStaticProperty(parent) && parent.key === node;
16034
+ const isStaticPropertyKey = (node, parent) => isStaticProperty(parent) && parent.key === node;
16035
+ /**
16036
+ * Copied from https://github.com/babel/babel/blob/main/packages/babel-types/src/validators/isReferenced.ts
16037
+ * To avoid runtime dependency on @babel/types (which includes process references)
16038
+ * This file should not change very often in babel but we may need to keep it
16039
+ * up-to-date from time to time.
16040
+ *
16041
+ * https://github.com/babel/babel/blob/main/LICENSE
16042
+ *
16043
+ */
16044
+ function isReferenced(node, parent, grandparent) {
16045
+ switch (parent.type) {
16046
+ // yes: PARENT[NODE]
16047
+ // yes: NODE.child
16048
+ // no: parent.NODE
16049
+ case 'MemberExpression':
16050
+ case 'OptionalMemberExpression':
16051
+ if (parent.property === node) {
16052
+ return !!parent.computed;
16053
+ }
16054
+ return parent.object === node;
16055
+ case 'JSXMemberExpression':
16056
+ return parent.object === node;
16057
+ // no: let NODE = init;
16058
+ // yes: let id = NODE;
16059
+ case 'VariableDeclarator':
16060
+ return parent.init === node;
16061
+ // yes: () => NODE
16062
+ // no: (NODE) => {}
16063
+ case 'ArrowFunctionExpression':
16064
+ return parent.body === node;
16065
+ // no: class { #NODE; }
16066
+ // no: class { get #NODE() {} }
16067
+ // no: class { #NODE() {} }
16068
+ // no: class { fn() { return this.#NODE; } }
16069
+ case 'PrivateName':
16070
+ return false;
16071
+ // no: class { NODE() {} }
16072
+ // yes: class { [NODE]() {} }
16073
+ // no: class { foo(NODE) {} }
16074
+ case 'ClassMethod':
16075
+ case 'ClassPrivateMethod':
16076
+ case 'ObjectMethod':
16077
+ if (parent.key === node) {
16078
+ return !!parent.computed;
16079
+ }
16080
+ return false;
16081
+ // yes: { [NODE]: "" }
16082
+ // no: { NODE: "" }
16083
+ // depends: { NODE }
16084
+ // depends: { key: NODE }
16085
+ case 'ObjectProperty':
16086
+ if (parent.key === node) {
16087
+ return !!parent.computed;
16088
+ }
16089
+ // parent.value === node
16090
+ return !grandparent || grandparent.type !== 'ObjectPattern';
16091
+ // no: class { NODE = value; }
16092
+ // yes: class { [NODE] = value; }
16093
+ // yes: class { key = NODE; }
16094
+ case 'ClassProperty':
16095
+ if (parent.key === node) {
16096
+ return !!parent.computed;
16097
+ }
16098
+ return true;
16099
+ case 'ClassPrivateProperty':
16100
+ return parent.key !== node;
16101
+ // no: class NODE {}
16102
+ // yes: class Foo extends NODE {}
16103
+ case 'ClassDeclaration':
16104
+ case 'ClassExpression':
16105
+ return parent.superClass === node;
16106
+ // yes: left = NODE;
16107
+ // no: NODE = right;
16108
+ case 'AssignmentExpression':
16109
+ return parent.right === node;
16110
+ // no: [NODE = foo] = [];
16111
+ // yes: [foo = NODE] = [];
16112
+ case 'AssignmentPattern':
16113
+ return parent.right === node;
16114
+ // no: NODE: for (;;) {}
16115
+ case 'LabeledStatement':
16116
+ return false;
16117
+ // no: try {} catch (NODE) {}
16118
+ case 'CatchClause':
16119
+ return false;
16120
+ // no: function foo(...NODE) {}
16121
+ case 'RestElement':
16122
+ return false;
16123
+ case 'BreakStatement':
16124
+ case 'ContinueStatement':
16125
+ return false;
16126
+ // no: function NODE() {}
16127
+ // no: function foo(NODE) {}
16128
+ case 'FunctionDeclaration':
16129
+ case 'FunctionExpression':
16130
+ return false;
16131
+ // no: export NODE from "foo";
16132
+ // no: export * as NODE from "foo";
16133
+ case 'ExportNamespaceSpecifier':
16134
+ case 'ExportDefaultSpecifier':
16135
+ return false;
16136
+ // no: export { foo as NODE };
16137
+ // yes: export { NODE as foo };
16138
+ // no: export { NODE as foo } from "foo";
16139
+ case 'ExportSpecifier':
16140
+ // @ts-expect-error
16141
+ if (grandparent === null || grandparent === void 0 ? void 0 : grandparent.source) {
16142
+ return false;
16143
+ }
16144
+ return parent.local === node;
16145
+ // no: import NODE from "foo";
16146
+ // no: import * as NODE from "foo";
16147
+ // no: import { NODE as foo } from "foo";
16148
+ // no: import { foo as NODE } from "foo";
16149
+ // no: import NODE from "bar";
16150
+ case 'ImportDefaultSpecifier':
16151
+ case 'ImportNamespaceSpecifier':
16152
+ case 'ImportSpecifier':
16153
+ return false;
16154
+ // no: import "foo" assert { NODE: "json" }
16155
+ case 'ImportAttribute':
16156
+ return false;
16157
+ // no: <div NODE="foo" />
16158
+ case 'JSXAttribute':
16159
+ return false;
16160
+ // no: [NODE] = [];
16161
+ // no: ({ NODE }) = [];
16162
+ case 'ObjectPattern':
16163
+ case 'ArrayPattern':
16164
+ return false;
16165
+ // no: new.NODE
16166
+ // no: NODE.target
16167
+ case 'MetaProperty':
16168
+ return false;
16169
+ // yes: type X = { somePropert: NODE }
16170
+ // no: type X = { NODE: OtherType }
16171
+ case 'ObjectTypeProperty':
16172
+ return parent.key !== node;
16173
+ // yes: enum X { Foo = NODE }
16174
+ // no: enum X { NODE }
16175
+ case 'TSEnumMember':
16176
+ return parent.id !== node;
16177
+ // yes: { [NODE]: value }
16178
+ // no: { NODE: value }
16179
+ case 'TSPropertySignature':
16180
+ if (parent.key === node) {
16181
+ return !!parent.computed;
16182
+ }
16183
+ return true;
16184
+ }
16185
+ return true;
16186
+ }
16000
16187
 
16001
16188
  const isLiteralWhitelisted = /*#__PURE__*/ makeMap('true,false,null,this');
16002
16189
  const transformExpression = (node, context) => {
@@ -16035,7 +16222,7 @@ function processExpression(node, context,
16035
16222
  // function params
16036
16223
  asParams = false,
16037
16224
  // v-on handler values may contain multiple statements
16038
- asRawStatements = false) {
16225
+ asRawStatements = false, localVars = Object.create(context.identifiers)) {
16039
16226
  if (!context.prefixIdentifiers || !node.content.trim()) {
16040
16227
  return node;
16041
16228
  }
@@ -16049,7 +16236,7 @@ asRawStatements = false) {
16049
16236
  const isUpdateArg = parent && parent.type === 'UpdateExpression' && parent.argument === id;
16050
16237
  // ({ x } = y)
16051
16238
  const isDestructureAssignment = parent && isInDestructureAssignment(parent, parentStack);
16052
- if (type === "setup-const" /* SETUP_CONST */) {
16239
+ if (type === "setup-const" /* SETUP_CONST */ || localVars[raw]) {
16053
16240
  return raw;
16054
16241
  }
16055
16242
  else if (type === "setup-ref" /* SETUP_REF */) {
@@ -16073,7 +16260,7 @@ asRawStatements = false) {
16073
16260
  // x = y --> isRef(x) ? x.value = y : x = y
16074
16261
  const { right: rVal, operator } = parent;
16075
16262
  const rExp = rawExp.slice(rVal.start - 1, rVal.end - 1);
16076
- const rExpString = stringifyExpression(processExpression(createSimpleExpression(rExp, false), context));
16263
+ const rExpString = stringifyExpression(processExpression(createSimpleExpression(rExp, false), context, false, false, knownIds));
16077
16264
  return `${context.helperString(IS_REF)}(${raw})${context.isTS ? ` //@ts-ignore\n` : ``} ? ${raw}.value ${operator} ${rExpString} : ${raw}`;
16078
16265
  }
16079
16266
  else if (isUpdateArg) {
@@ -17294,7 +17481,7 @@ function buildProps(node, context, props = node.props, ssr = false) {
17294
17481
  // acrtual ref instead.
17295
17482
  if (context.inline && (value === null || value === void 0 ? void 0 : value.content)) {
17296
17483
  valueNode = createFunctionExpression(['_value', '_refs']);
17297
- valueNode.body = createBlockStatement(processInlineRef(context.bindingMetadata, value.content));
17484
+ valueNode.body = createBlockStatement(processInlineRef(context, value.content));
17298
17485
  }
17299
17486
  }
17300
17487
  // skip is on <component>, or is="vue:xxx"
@@ -17614,14 +17801,18 @@ function stringifyDynamicPropNames(props) {
17614
17801
  function isComponentTag(tag) {
17615
17802
  return tag[0].toLowerCase() + tag.slice(1) === 'component';
17616
17803
  }
17617
- function processInlineRef(bindings, raw) {
17804
+ function processInlineRef(context, raw) {
17618
17805
  const body = [createSimpleExpression(`_refs['${raw}'] = _value`)];
17619
- const type = bindings[raw];
17806
+ const { bindingMetadata, helperString } = context;
17807
+ const type = bindingMetadata[raw];
17620
17808
  if (type === "setup-ref" /* SETUP_REF */) {
17621
17809
  body.push(createSimpleExpression(`${raw}.value = _value`));
17622
17810
  }
17811
+ else if (type === "setup-maybe-ref" /* SETUP_MAYBE_REF */) {
17812
+ body.push(createSimpleExpression(`${helperString(IS_REF)}(${raw}) && (${raw}.value = _value)`));
17813
+ }
17623
17814
  else if (type === "setup-let" /* SETUP_LET */) {
17624
- body.push(createSimpleExpression(`${raw} = _value`));
17815
+ body.push(createSimpleExpression(`${helperString(IS_REF)}(${raw}) ? ${raw}.value = _value : ${raw} = _value`));
17625
17816
  }
17626
17817
  return body;
17627
17818
  }
@@ -17698,7 +17889,7 @@ function processSlotOutlet(node, context) {
17698
17889
  };
17699
17890
  }
17700
17891
 
17701
- const fnExpRE = /^\s*([\w$_]+|\([^)]*?\))\s*=>|^\s*function(?:\s+[\w$]+)?\s*\(/;
17892
+ const fnExpRE = /^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/;
17702
17893
  const transformOn = (dir, node, context, augmentor) => {
17703
17894
  const { loc, modifiers, arg } = dir;
17704
17895
  if (!dir.exp && !modifiers.length) {
@@ -21423,4 +21614,4 @@ registerRuntimeCompiler(compileToFunction);
21423
21614
  const Vue = createCompatVue$1();
21424
21615
  Vue.compile = compileToFunction;
21425
21616
 
21426
- exports.default = Vue;
21617
+ module.exports = Vue;