@vue/runtime-dom 3.1.0 → 3.1.4

package/dist/runtime-dom.global.js

@@ -500,34 +500,38 @@ var VueRuntimeDOM = (function (exports) {
   const shallowGet = /*#__PURE__*/ createGetter(false, true);
   const readonlyGet = /*#__PURE__*/ createGetter(true);
   const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true);
-  const arrayInstrumentations = {};
-  ['includes', 'indexOf', 'lastIndexOf'].forEach(key => {
-      const method = Array.prototype[key];
-      arrayInstrumentations[key] = function (...args) {
-          const arr = toRaw(this);
-          for (let i = 0, l = this.length; i < l; i++) {
-              track(arr, "get" /* GET */, i + '');
-          }
-          // we run the method using the original args first (which may be reactive)
-          const res = method.apply(arr, args);
-          if (res === -1 || res === false) {
-              // if that didn't work, run it again using raw values.
-              return method.apply(arr, args.map(toRaw));
-          }
-          else {
+  const arrayInstrumentations = /*#__PURE__*/ createArrayInstrumentations();
+  function createArrayInstrumentations() {
+      const instrumentations = {};
+      ['includes', 'indexOf', 'lastIndexOf'].forEach(key => {
+          const method = Array.prototype[key];
+          instrumentations[key] = function (...args) {
+              const arr = toRaw(this);
+              for (let i = 0, l = this.length; i < l; i++) {
+                  track(arr, "get" /* GET */, i + '');
+              }
+              // we run the method using the original args first (which may be reactive)
+              const res = method.apply(arr, args);
+              if (res === -1 || res === false) {
+                  // if that didn't work, run it again using raw values.
+                  return method.apply(arr, args.map(toRaw));
+              }
+              else {
+                  return res;
+              }
+          };
+      });
+      ['push', 'pop', 'shift', 'unshift', 'splice'].forEach(key => {
+          const method = Array.prototype[key];
+          instrumentations[key] = function (...args) {
+              pauseTracking();
+              const res = method.apply(this, args);
+              resetTracking();
               return res;
-          }
-      };
-  });
-  ['push', 'pop', 'shift', 'unshift', 'splice'].forEach(key => {
-      const method = Array.prototype[key];
-      arrayInstrumentations[key] = function (...args) {
-          pauseTracking();
-          const res = method.apply(this, args);
-          resetTracking();
-          return res;
-      };
-  });
+          };
+      });
+      return instrumentations;
+  }
   function createGetter(isReadonly = false, shallow = false) {
       return function get(target, key, receiver) {
           if (key === "__v_isReactive" /* IS_REACTIVE */) {
@@ -646,14 +650,14 @@ var VueRuntimeDOM = (function (exports) {
           return true;
       }
   };
-  const shallowReactiveHandlers = extend({}, mutableHandlers, {
+  const shallowReactiveHandlers = /*#__PURE__*/ extend({}, mutableHandlers, {
       get: shallowGet,
       set: shallowSet
   });
   // Props handlers are special in the sense that it should not unwrap top-level
   // refs (in order to allow refs to be explicitly passed down), but should
   // retain the reactivity of the normal readonly object.
-  const shallowReadonlyHandlers = extend({}, readonlyHandlers, {
+  const shallowReadonlyHandlers = /*#__PURE__*/ extend({}, readonlyHandlers, {
       get: shallowReadonlyGet
   });
 
@@ -823,73 +827,82 @@ var VueRuntimeDOM = (function (exports) {
           return type === "delete" /* DELETE */ ? false : this;
       };
   }
-  const mutableInstrumentations = {
-      get(key) {
-          return get$1(this, key);
-      },
-      get size() {
-          return size(this);
-      },
-      has: has$1,
-      add,
-      set: set$1,
-      delete: deleteEntry,
-      clear,
-      forEach: createForEach(false, false)
-  };
-  const shallowInstrumentations = {
-      get(key) {
-          return get$1(this, key, false, true);
-      },
-      get size() {
-          return size(this);
-      },
-      has: has$1,
-      add,
-      set: set$1,
-      delete: deleteEntry,
-      clear,
-      forEach: createForEach(false, true)
-  };
-  const readonlyInstrumentations = {
-      get(key) {
-          return get$1(this, key, true);
-      },
-      get size() {
-          return size(this, true);
-      },
-      has(key) {
-          return has$1.call(this, key, true);
-      },
-      add: createReadonlyMethod("add" /* ADD */),
-      set: createReadonlyMethod("set" /* SET */),
-      delete: createReadonlyMethod("delete" /* DELETE */),
-      clear: createReadonlyMethod("clear" /* CLEAR */),
-      forEach: createForEach(true, false)
-  };
-  const shallowReadonlyInstrumentations = {
-      get(key) {
-          return get$1(this, key, true, true);
-      },
-      get size() {
-          return size(this, true);
-      },
-      has(key) {
-          return has$1.call(this, key, true);
-      },
-      add: createReadonlyMethod("add" /* ADD */),
-      set: createReadonlyMethod("set" /* SET */),
-      delete: createReadonlyMethod("delete" /* DELETE */),
-      clear: createReadonlyMethod("clear" /* CLEAR */),
-      forEach: createForEach(true, true)
-  };
-  const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator];
-  iteratorMethods.forEach(method => {
-      mutableInstrumentations[method] = createIterableMethod(method, false, false);
-      readonlyInstrumentations[method] = createIterableMethod(method, true, false);
-      shallowInstrumentations[method] = createIterableMethod(method, false, true);
-      shallowReadonlyInstrumentations[method] = createIterableMethod(method, true, true);
-  });
+  function createInstrumentations() {
+      const mutableInstrumentations = {
+          get(key) {
+              return get$1(this, key);
+          },
+          get size() {
+              return size(this);
+          },
+          has: has$1,
+          add,
+          set: set$1,
+          delete: deleteEntry,
+          clear,
+          forEach: createForEach(false, false)
+      };
+      const shallowInstrumentations = {
+          get(key) {
+              return get$1(this, key, false, true);
+          },
+          get size() {
+              return size(this);
+          },
+          has: has$1,
+          add,
+          set: set$1,
+          delete: deleteEntry,
+          clear,
+          forEach: createForEach(false, true)
+      };
+      const readonlyInstrumentations = {
+          get(key) {
+              return get$1(this, key, true);
+          },
+          get size() {
+              return size(this, true);
+          },
+          has(key) {
+              return has$1.call(this, key, true);
+          },
+          add: createReadonlyMethod("add" /* ADD */),
+          set: createReadonlyMethod("set" /* SET */),
+          delete: createReadonlyMethod("delete" /* DELETE */),
+          clear: createReadonlyMethod("clear" /* CLEAR */),
+          forEach: createForEach(true, false)
+      };
+      const shallowReadonlyInstrumentations = {
+          get(key) {
+              return get$1(this, key, true, true);
+          },
+          get size() {
+              return size(this, true);
+          },
+          has(key) {
+              return has$1.call(this, key, true);
+          },
+          add: createReadonlyMethod("add" /* ADD */),
+          set: createReadonlyMethod("set" /* SET */),
+          delete: createReadonlyMethod("delete" /* DELETE */),
+          clear: createReadonlyMethod("clear" /* CLEAR */),
+          forEach: createForEach(true, true)
+      };
+      const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator];
+      iteratorMethods.forEach(method => {
+          mutableInstrumentations[method] = createIterableMethod(method, false, false);
+          readonlyInstrumentations[method] = createIterableMethod(method, true, false);
+          shallowInstrumentations[method] = createIterableMethod(method, false, true);
+          shallowReadonlyInstrumentations[method] = createIterableMethod(method, true, true);
+      });
+      return [
+          mutableInstrumentations,
+          readonlyInstrumentations,
+          shallowInstrumentations,
+          shallowReadonlyInstrumentations
+      ];
+  }
+  const [mutableInstrumentations, readonlyInstrumentations, shallowInstrumentations, shallowReadonlyInstrumentations] = /* #__PURE__*/ createInstrumentations();
   function createInstrumentationGetter(isReadonly, shallow) {
       const instrumentations = shallow
           ? isReadonly
@@ -914,16 +927,16 @@ var VueRuntimeDOM = (function (exports) {
       };
   }
   const mutableCollectionHandlers = {
-      get: createInstrumentationGetter(false, false)
+      get: /*#__PURE__*/ createInstrumentationGetter(false, false)
   };
   const shallowCollectionHandlers = {
-      get: createInstrumentationGetter(false, true)
+      get: /*#__PURE__*/ createInstrumentationGetter(false, true)
   };
   const readonlyCollectionHandlers = {
-      get: createInstrumentationGetter(true, false)
+      get: /*#__PURE__*/ createInstrumentationGetter(true, false)
   };
   const shallowReadonlyCollectionHandlers = {
-      get: createInstrumentationGetter(true, true)
+      get: /*#__PURE__*/ createInstrumentationGetter(true, true)
   };
   function checkIdentityKeys(target, has, key) {
       const rawKey = toRaw(key);
@@ -1049,7 +1062,7 @@ var VueRuntimeDOM = (function (exports) {
       return createRef(value, true);
   }
   class RefImpl {
-      constructor(_rawValue, _shallow = false) {
+      constructor(_rawValue, _shallow) {
           this._rawValue = _rawValue;
           this._shallow = _shallow;
           this.__v_isRef = true;
@@ -1305,6 +1318,7 @@ var VueRuntimeDOM = (function (exports) {
   }
 
   const ErrorTypeStrings = {
+      ["sp" /* SERVER_PREFETCH */]: 'serverPrefetch hook',
       ["bc" /* BEFORE_CREATE */]: 'beforeCreate hook',
       ["c" /* CREATED */]: 'created hook',
       ["bm" /* BEFORE_MOUNT */]: 'beforeMount hook',
@@ -2170,11 +2184,12 @@ var VueRuntimeDOM = (function (exports) {
       const onceHandler = props[handlerName + `Once`];
       if (onceHandler) {
           if (!instance.emitted) {
-              (instance.emitted = {})[handlerName] = true;
+              instance.emitted = {};
           }
           else if (instance.emitted[handlerName]) {
               return;
           }
+          instance.emitted[handlerName] = true;
           callWithAsyncErrorHandling(onceHandler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args);
       }
   }
@@ -2645,6 +2660,12 @@ var VueRuntimeDOM = (function (exports) {
   // Force-casted public typing for h and TSX props inference
   const Suspense = (SuspenseImpl
       );
+  function triggerEvent(vnode, name) {
+      const eventListener = vnode.props && vnode.props[name];
+      if (isFunction(eventListener)) {
+          eventListener();
+      }
+  }
   function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals) {
       const { p: patch, o: { createElement } } = rendererInternals;
       const hiddenContainer = createElement('div');
@@ -2654,6 +2675,9 @@ var VueRuntimeDOM = (function (exports) {
       // now check if we have encountered any async deps
       if (suspense.deps > 0) {
           // has async
+          // invoke @fallback event
+          triggerEvent(vnode, 'onPending');
+          triggerEvent(vnode, 'onFallback');
           // mount the fallback tree
           patch(null, vnode.ssFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
           isSVG, slotScopeIds);
@@ -2741,10 +2765,7 @@ var VueRuntimeDOM = (function (exports) {
           else {
               // root node toggled
               // invoke @pending event
-              const onPending = n2.props && n2.props.onPending;
-              if (isFunction(onPending)) {
-                  onPending();
-              }
+              triggerEvent(n2, 'onPending');
               // mount pending branch in off-dom container
               suspense.pendingBranch = newBranch;
               suspense.pendingId++;
@@ -2857,10 +2878,7 @@ var VueRuntimeDOM = (function (exports) {
               }
               suspense.effects = [];
               // invoke @resolve event
-              const onResolve = vnode.props && vnode.props.onResolve;
-              if (isFunction(onResolve)) {
-                  onResolve();
-              }
+              triggerEvent(vnode, 'onResolve');
           },
           fallback(fallbackVNode) {
               if (!suspense.pendingBranch) {
@@ -2868,10 +2886,7 @@ var VueRuntimeDOM = (function (exports) {
               }
               const { vnode, activeBranch, parentComponent, container, isSVG } = suspense;
               // invoke @fallback event
-              const onFallback = vnode.props && vnode.props.onFallback;
-              if (isFunction(onFallback)) {
-                  onFallback();
-              }
+              triggerEvent(vnode, 'onFallback');
               const anchor = next(activeBranch);
               const mountFallback = () => {
                   if (!suspense.isInFallback) {
@@ -2886,11 +2901,11 @@ var VueRuntimeDOM = (function (exports) {
               if (delayEnter) {
                   activeBranch.transition.afterLeave = mountFallback;
               }
+              suspense.isInFallback = true;
               // unmount current active branch
               unmount(activeBranch, parentComponent, null, // no suspense so unmount hooks fire now
               true // shouldRemove
               );
-              suspense.isInFallback = true;
               if (!delayEnter) {
                   mountFallback();
               }
@@ -3085,7 +3100,7 @@ var VueRuntimeDOM = (function (exports) {
           }
           else if (arguments.length > 1) {
               return treatDefaultAsFactory && isFunction(defaultValue)
-                  ? defaultValue()
+                  ? defaultValue.call(instance.proxy)
                   : defaultValue;
           }
           else {
@@ -4301,13 +4316,16 @@ var VueRuntimeDOM = (function (exports) {
       registerLifecycleHook(onServerPrefetch, serverPrefetch);
       if (isArray(expose)) {
           if (expose.length) {
-              const exposed = instance.exposed || (instance.exposed = proxyRefs({}));
+              const exposed = instance.exposed || (instance.exposed = {});
               expose.forEach(key => {
-                  exposed[key] = toRef(publicThis, key);
+                  Object.defineProperty(exposed, key, {
+                      get: () => publicThis[key],
+                      set: val => (publicThis[key] = val)
+                  });
               });
           }
           else if (!instance.exposed) {
-              instance.exposed = EMPTY_OBJ;
+              instance.exposed = {};
           }
       }
       // options that are handled when creating the instance but also need to be
@@ -4444,25 +4462,23 @@ var VueRuntimeDOM = (function (exports) {
       methods: mergeObjectOptions,
       computed: mergeObjectOptions,
       // lifecycle
-      beforeCreate: mergeHook,
-      created: mergeHook,
-      beforeMount: mergeHook,
-      mounted: mergeHook,
-      beforeUpdate: mergeHook,
-      updated: mergeHook,
-      beforeDestroy: mergeHook,
-      destroyed: mergeHook,
-      activated: mergeHook,
-      deactivated: mergeHook,
-      errorCaptured: mergeHook,
-      serverPrefetch: mergeHook,
+      beforeCreate: mergeAsArray,
+      created: mergeAsArray,
+      beforeMount: mergeAsArray,
+      mounted: mergeAsArray,
+      beforeUpdate: mergeAsArray,
+      updated: mergeAsArray,
+      beforeDestroy: mergeAsArray,
+      destroyed: mergeAsArray,
+      activated: mergeAsArray,
+      deactivated: mergeAsArray,
+      errorCaptured: mergeAsArray,
+      serverPrefetch: mergeAsArray,
       // assets
       components: mergeObjectOptions,
       directives: mergeObjectOptions,
-      // watch has special merge behavior in v2, but isn't actually needed in v3.
-      // since we are only exposing these for compat and nobody should be relying
-      // on the watch-specific behavior, just expose the object merge strat.
-      watch: mergeObjectOptions,
+      // watch
+      watch: mergeWatchOptions,
       // provide / inject
       provide: mergeDataFn,
       inject: mergeInject
@@ -4491,11 +4507,22 @@ var VueRuntimeDOM = (function (exports) {
       }
       return raw;
   }
-  function mergeHook(to, from) {
+  function mergeAsArray(to, from) {
       return to ? [...new Set([].concat(to, from))] : from;
   }
   function mergeObjectOptions(to, from) {
       return to ? extend(extend(Object.create(null), to), from) : from;
+  }
+  function mergeWatchOptions(to, from) {
+      if (!to)
+          return from;
+      if (!from)
+          return to;
+      const merged = extend(Object.create(null), to);
+      for (const key in from) {
+          merged[key] = mergeAsArray(to[key], from[key]);
+      }
+      return merged;
   }
 
   function initProps(instance, rawProps, isStateful, // result of bitwise flag comparison
@@ -5152,6 +5179,7 @@ var VueRuntimeDOM = (function (exports) {
               _props: rootProps,
               _container: null,
               _context: context,
+              _instance: null,
               version,
               get config() {
                   return context.config;
@@ -5239,6 +5267,7 @@ var VueRuntimeDOM = (function (exports) {
                       app._container = rootContainer;
                       rootContainer.__vue_app__ = app;
                       {
+                          app._instance = vnode.component;
                           devtoolsInitApp(app, version);
                       }
                       return vnode.component.proxy;
@@ -5254,6 +5283,7 @@ var VueRuntimeDOM = (function (exports) {
                   if (isMounted) {
                       render(null, app._container);
                       {
+                          app._instance = null;
                           devtoolsUnmountApp(app);
                       }
                       delete app._container.__vue_app__;
@@ -5290,8 +5320,9 @@ var VueRuntimeDOM = (function (exports) {
       const hydrate = (vnode, container) => {
           if (!container.hasChildNodes()) {
               warn(`Attempting to hydrate existing markup but container is empty. ` +
-                  `Performing full mount instead.`);
+                      `Performing full mount instead.`);
               patch(null, vnode, container);
+              flushPostFlushCbs();
               return;
           }
           hasMismatch = false;
@@ -5428,19 +5459,24 @@ var VueRuntimeDOM = (function (exports) {
       };
       const hydrateElement = (el, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => {
           optimized = optimized || !!vnode.dynamicChildren;
-          const { props, patchFlag, shapeFlag, dirs } = vnode;
+          const { type, props, patchFlag, shapeFlag, dirs } = vnode;
+          // #4006 for form elements with non-string v-model value bindings
+          // e.g. <option :value="obj">, <input type="checkbox" :true-value="1">
+          const forcePatchValue = (type === 'input' && dirs) || type === 'option';
           // skip props & children if this is hoisted static nodes
-          if (patchFlag !== -1 /* HOISTED */) {
+          if (forcePatchValue || patchFlag !== -1 /* HOISTED */) {
               if (dirs) {
                   invokeDirectiveHook(vnode, null, parentComponent, 'created');
               }
               // props
               if (props) {
-                  if (!optimized ||
+                  if (forcePatchValue ||
+                      !optimized ||
                       (patchFlag & 16 /* FULL_PROPS */ ||
                           patchFlag & 32 /* HYDRATE_EVENTS */)) {
                       for (const key in props) {
-                          if (!isReservedProp(key) && isOn(key)) {
+                          if ((forcePatchValue && key.endsWith('value')) ||
+                              (isOn(key) && !isReservedProp(key))) {
                               patchProp(el, key, null, props[key]);
                           }
                       }
@@ -5654,7 +5690,7 @@ var VueRuntimeDOM = (function (exports) {
           return;
       }
       const refValue = vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */
-          ? vnode.component.exposed || vnode.component.proxy
+          ? getExposeProxy(vnode.component) || vnode.component.proxy
           : vnode.el;
       const value = isUnmount ? null : refValue;
       const { i: owner, r: ref } = rawRef;
@@ -5824,7 +5860,19 @@ var VueRuntimeDOM = (function (exports) {
           }
       };
       const mountStaticNode = (n2, container, anchor, isSVG) => {
-          [n2.el, n2.anchor] = hostInsertStaticContent(n2.children, container, anchor, isSVG);
+          // static nodes are only present when used with compiler-dom/runtime-dom
+          // which guarantees presence of hostInsertStaticContent.
+          const nodes = hostInsertStaticContent(n2.children, container, anchor, isSVG, 
+          // pass cached nodes if the static node is being mounted multiple times
+          // so that runtime-dom can simply cloneNode() instead of inserting new
+          // HTML
+          n2.staticCache);
+          // first mount - this is the orignal hoisted vnode. cache nodes.
+          if (!n2.el) {
+              n2.staticCache = nodes;
+          }
+          n2.el = nodes[0];
+          n2.anchor = nodes[nodes.length - 1];
       };
       /**
        * Dev / HMR only
@@ -7456,7 +7504,6 @@ var VueRuntimeDOM = (function (exports) {
           anchor: null,
           target: null,
           targetAnchor: null,
-          staticCount: 0,
           shapeFlag,
           patchFlag,
           dynamicProps,
@@ -7518,6 +7565,7 @@ var VueRuntimeDOM = (function (exports) {
           target: vnode.target,
           targetAnchor: vnode.targetAnchor,
           staticCount: vnode.staticCount,
+          staticCache: vnode.staticCache,
           shapeFlag: vnode.shapeFlag,
           // if the vnode is cloned with extra props, we can no longer assume its
           // existing patch flag to be reliable and need to add the FULL_PROPS flag.
@@ -7833,7 +7881,7 @@ var VueRuntimeDOM = (function (exports) {
       if (!i)
           return null;
       if (isStatefulComponent(i))
-          return i.exposed ? i.exposed : i.proxy;
+          return getExposeProxy(i) || i.proxy;
       return getPublicInstance(i.parent);
   };
   const publicPropertiesMap = extend(Object.create(null), {
@@ -7855,14 +7903,19 @@ var VueRuntimeDOM = (function (exports) {
   const PublicInstanceProxyHandlers = {
       get({ _: instance }, key) {
           const { ctx, setupState, data, props, accessCache, type, appContext } = instance;
-          // let @vue/reactivity know it should never observe Vue public instances.
-          if (key === "__v_skip" /* SKIP */) {
-              return true;
-          }
           // for internal formatters to know that this is a Vue instance
           if (key === '__isVue') {
               return true;
           }
+          // prioritize <script setup> bindings during dev.
+          // this allows even properties that start with _ or $ to be used - so that
+          // it aligns with the production behavior where the render fn is inlined and
+          // indeed has access to all declared variables.
+          if (setupState !== EMPTY_OBJ &&
+              setupState.__isScriptSetup &&
+              hasOwn(setupState, key)) {
+              return setupState[key];
+          }
           // data / props / ctx
           // This getter gets called for every property access on the render context
           // during render and is a major hotspot. The most expensive part of this
@@ -8062,7 +8115,7 @@ var VueRuntimeDOM = (function (exports) {
   function exposeSetupStateOnRenderContext(instance) {
       const { ctx, setupState } = instance;
       Object.keys(toRaw(setupState)).forEach(key => {
-          if (key[0] === '$' || key[0] === '_') {
+          if (!setupState.__isScriptSetup && (key[0] === '$' || key[0] === '_')) {
               warn(`setup() return property ${JSON.stringify(key)} should not start with "$" or "_" ` +
                   `which are reserved prefixes for Vue internals.`);
               return;
@@ -8095,6 +8148,7 @@ var VueRuntimeDOM = (function (exports) {
           render: null,
           proxy: null,
           exposed: null,
+          exposeProxy: null,
           withProxy: null,
           effects: null,
           provides: parent ? parent.provides : Object.create(appContext.provides),
@@ -8210,7 +8264,7 @@ var VueRuntimeDOM = (function (exports) {
       instance.accessCache = Object.create(null);
       // 1. create public instance / render proxy
       // also mark it raw so it's never observed
-      instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers);
+      instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers));
       {
           exposePropsOnRenderContext(instance);
       }
@@ -8225,6 +8279,10 @@ var VueRuntimeDOM = (function (exports) {
           resetTracking();
           currentInstance = null;
           if (isPromise(setupResult)) {
+              const unsetInstance = () => {
+                  currentInstance = null;
+              };
+              setupResult.then(unsetInstance, unsetInstance);
               if (isSSR) {
                   // return the promise so server-renderer can wait on it
                   return setupResult
@@ -8340,11 +8398,9 @@ var VueRuntimeDOM = (function (exports) {
           }
       }
   }
-  const attrHandlers = {
+  const attrDevProxyHandlers = {
       get: (target, key) => {
-          {
-              markAttrsAccessed();
-          }
+          markAttrsAccessed();
           return target[key];
       },
       set: () => {
@@ -8361,14 +8417,15 @@ var VueRuntimeDOM = (function (exports) {
           if (instance.exposed) {
               warn(`expose() should be called only once per setup().`);
           }
-          instance.exposed = proxyRefs(exposed);
+          instance.exposed = exposed || {};
       };
       {
+          let attrs;
           // We use getters in dev in case libs like test-utils overwrite instance
           // properties (overwrites should not be done in prod)
           return Object.freeze({
               get attrs() {
-                  return new Proxy(instance.attrs, attrHandlers);
+                  return (attrs || (attrs = new Proxy(instance.attrs, attrDevProxyHandlers)));
               },
               get slots() {
                   return shallowReadonly(instance.slots);
@@ -8380,6 +8437,21 @@ var VueRuntimeDOM = (function (exports) {
           });
       }
   }
+  function getExposeProxy(instance) {
+      if (instance.exposed) {
+          return (instance.exposeProxy ||
+              (instance.exposeProxy = new Proxy(proxyRefs(markRaw(instance.exposed)), {
+                  get(target, key) {
+                      if (key in target) {
+                          return target[key];
+                      }
+                      else if (key in publicPropertiesMap) {
+                          return publicPropertiesMap[key](instance);
+                      }
+                  }
+              })));
+      }
+  }
   // record effects created during a component's setup() so that they can be
   // stopped when the component unmounts
   function recordInstanceBoundEffect(effect, instance = currentInstance) {
@@ -8428,30 +8500,133 @@ var VueRuntimeDOM = (function (exports) {
       return c;
   }
 
+  // dev only
+  const warnRuntimeUsage = (method) => warn(`${method}() is a compiler-hint helper that is only usable inside ` +
+      `<script setup> of a single file component. Its arguments should be ` +
+      `compiled away and passing it at runtime has no effect.`);
   // implementation
   function defineProps() {
       {
-          warn(`defineProps() is a compiler-hint helper that is only usable inside ` +
-              `<script setup> of a single file component. Its arguments should be ` +
-              `compiled away and passing it at runtime has no effect.`);
+          warnRuntimeUsage(`defineProps`);
       }
       return null;
   }
   // implementation
-  function defineEmit() {
+  function defineEmits() {
       {
-          warn(`defineEmit() is a compiler-hint helper that is only usable inside ` +
-              `<script setup> of a single file component. Its arguments should be ` +
-              `compiled away and passing it at runtime has no effect.`);
+          warnRuntimeUsage(`defineEmits`);
       }
       return null;
   }
+  /**
+   * @deprecated use `defineEmits` instead.
+   */
+  const defineEmit = defineEmits;
+  /**
+   * Vue `<script setup>` compiler macro for declaring a component's exposed
+   * instance properties when it is accessed by a parent component via template
+   * refs.
+   *
+   * `<script setup>` components are closed by default - i.e. varaibles inside
+   * the `<script setup>` scope is not exposed to parent unless explicitly exposed
+   * via `defineExpose`.
+   *
+   * This is only usable inside `<script setup>`, is compiled away in the
+   * output and should **not** be actually called at runtime.
+   */
+  function defineExpose(exposed) {
+      {
+          warnRuntimeUsage(`defineExpose`);
+      }
+  }
+  /**
+   * Vue `<script setup>` compiler macro for providing props default values when
+   * using type-based `defineProps` decalration.
+   *
+   * Example usage:
+   * ```ts
+   * withDefaults(defineProps<{
+   *   size?: number
+   *   labels?: string[]
+   * }>(), {
+   *   size: 3,
+   *   labels: () => ['default label']
+   * })
+   * ```
+   *
+   * This is only usable inside `<script setup>`, is compiled away in the output
+   * and should **not** be actually called at runtime.
+   */
+  function withDefaults(props, defaults) {
+      {
+          warnRuntimeUsage(`withDefaults`);
+      }
+      return null;
+  }
+  /**
+   * @deprecated use `useSlots` and `useAttrs` instead.
+   */
   function useContext() {
+      {
+          warn(`\`useContext()\` has been deprecated and will be removed in the ` +
+              `next minor release. Use \`useSlots()\` and \`useAttrs()\` instead.`);
+      }
+      return getContext();
+  }
+  function useSlots() {
+      return getContext().slots;
+  }
+  function useAttrs() {
+      return getContext().attrs;
+  }
+  function getContext() {
       const i = getCurrentInstance();
       if (!i) {
           warn(`useContext() called without active instance.`);
       }
       return i.setupContext || (i.setupContext = createSetupContext(i));
+  }
+  /**
+   * Runtime helper for merging default declarations. Imported by compiled code
+   * only.
+   * @internal
+   */
+  function mergeDefaults(
+  // the base props is compiler-generated and guaranteed to be in this shape.
+  props, defaults) {
+      for (const key in defaults) {
+          const val = props[key];
+          if (val) {
+              val.default = defaults[key];
+          }
+          else if (val === null) {
+              props[key] = { default: defaults[key] };
+          }
+          else {
+              warn(`props default key "${key}" has no corresponding declaration.`);
+          }
+      }
+      return props;
+  }
+  /**
+   * Runtime helper for storing and resuming current instance context in
+   * async setup().
+   */
+  function withAsyncContext(awaitable) {
+      const ctx = getCurrentInstance();
+      setCurrentInstance(null); // unset after storing instance
+      if (!ctx) {
+          warn(`withAsyncContext() called when there is no active context instance.`);
+      }
+      return isPromise(awaitable)
+          ? awaitable.then(res => {
+              setCurrentInstance(ctx);
+              return res;
+          }, err => {
+              setCurrentInstance(ctx);
+              throw err;
+          })
+          : awaitable;
   }
 
   // Actual implementation
@@ -8679,7 +8854,7 @@ var VueRuntimeDOM = (function (exports) {
   }
 
   // Core API ------------------------------------------------------------------
-  const version = "3.1.0";
+  const version = "3.1.4";
   /**
    * SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
    * @internal
@@ -8696,8 +8871,6 @@ var VueRuntimeDOM = (function (exports) {
 
   const svgNS = 'http://www.w3.org/2000/svg';
   const doc = (typeof document !== 'undefined' ? document : null);
-  let tempContainer;
-  let tempSVGContainer;
   const nodeOps = {
       insert: (child, parent, anchor) => {
           parent.insertBefore(child, anchor || null);
@@ -8748,24 +8921,60 @@ var VueRuntimeDOM = (function (exports) {
           return cloned;
       },
       // __UNSAFE__
-      // Reason: innerHTML.
+      // Reason: insertAdjacentHTML.
       // Static content here can only come from compiled templates.
       // As long as the user only uses trusted templates, this is safe.
-      insertStaticContent(content, parent, anchor, isSVG) {
-          const temp = isSVG
-              ? tempSVGContainer ||
-                  (tempSVGContainer = doc.createElementNS(svgNS, 'svg'))
-              : tempContainer || (tempContainer = doc.createElement('div'));
-          temp.innerHTML = content;
-          const first = temp.firstChild;
-          let node = first;
-          let last = node;
-          while (node) {
-              last = node;
-              nodeOps.insert(node, parent, anchor);
-              node = temp.firstChild;
+      insertStaticContent(content, parent, anchor, isSVG, cached) {
+          if (cached) {
+              let first;
+              let last;
+              let i = 0;
+              let l = cached.length;
+              for (; i < l; i++) {
+                  const node = cached[i].cloneNode(true);
+                  if (i === 0)
+                      first = node;
+                  if (i === l - 1)
+                      last = node;
+                  parent.insertBefore(node, anchor);
+              }
+              return [first, last];
+          }
+          // <parent> before | first ... last | anchor </parent>
+          const before = anchor ? anchor.previousSibling : parent.lastChild;
+          if (anchor) {
+              let insertionPoint;
+              let usingTempInsertionPoint = false;
+              if (anchor instanceof Element) {
+                  insertionPoint = anchor;
+              }
+              else {
+                  // insertAdjacentHTML only works for elements but the anchor is not an
+                  // element...
+                  usingTempInsertionPoint = true;
+                  insertionPoint = isSVG
+                      ? doc.createElementNS(svgNS, 'g')
+                      : doc.createElement('div');
+                  parent.insertBefore(insertionPoint, anchor);
+              }
+              insertionPoint.insertAdjacentHTML('beforebegin', content);
+              if (usingTempInsertionPoint) {
+                  parent.removeChild(insertionPoint);
+              }
           }
-          return [first, last];
+          else {
+              parent.insertAdjacentHTML('beforeend', content);
+          }
+          let first = before ? before.nextSibling : parent.firstChild;
+          const last = anchor ? anchor.previousSibling : parent.lastChild;
+          const ret = [];
+          while (first) {
+              ret.push(first);
+              if (first === last)
+                  break;
+              first = first.nextSibling;
+          }
+          return ret;
       }
   };
 
@@ -10071,6 +10280,8 @@ var VueRuntimeDOM = (function (exports) {
   exports.defineAsyncComponent = defineAsyncComponent;
   exports.defineComponent = defineComponent;
   exports.defineEmit = defineEmit;
+  exports.defineEmits = defineEmits;
+  exports.defineExpose = defineExpose;
   exports.defineProps = defineProps;
   exports.getCurrentInstance = getCurrentInstance;
   exports.getTransitionRawChildren = getTransitionRawChildren;
@@ -10086,6 +10297,7 @@ var VueRuntimeDOM = (function (exports) {
   exports.isRuntimeOnly = isRuntimeOnly;
   exports.isVNode = isVNode;
   exports.markRaw = markRaw;
+  exports.mergeDefaults = mergeDefaults;
   exports.mergeProps = mergeProps;
   exports.nextTick = nextTick;
   exports.onActivated = onActivated;
@@ -10135,10 +10347,12 @@ var VueRuntimeDOM = (function (exports) {
   exports.transformVNodeArgs = transformVNodeArgs;
   exports.triggerRef = triggerRef;
   exports.unref = unref;
+  exports.useAttrs = useAttrs;
   exports.useContext = useContext;
   exports.useCssModule = useCssModule;
   exports.useCssVars = useCssVars;
   exports.useSSRContext = useSSRContext;
+  exports.useSlots = useSlots;
   exports.useTransitionState = useTransitionState;
   exports.vModelCheckbox = vModelCheckbox;
   exports.vModelDynamic = vModelDynamic;
@@ -10150,7 +10364,9 @@ var VueRuntimeDOM = (function (exports) {
   exports.warn = warn;
   exports.watch = watch;
   exports.watchEffect = watchEffect;
+  exports.withAsyncContext = withAsyncContext;
   exports.withCtx = withCtx;
+  exports.withDefaults = withDefaults;
   exports.withDirectives = withDirectives;
   exports.withKeys = withKeys;
   exports.withModifiers = withModifiers;