@vue/server-renderer 3.5.17 → 3.6.0-alpha.2

package/dist/server-renderer.esm-browser.js

@@ -1,5 +1,5 @@
 /**
-* @vue/server-renderer v3.5.17
+* @vue/server-renderer v3.6.0-alpha.2
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -18,6 +18,8 @@ const NOOP = () => {
 const NO = () => false;
 const isOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // uppercase letter
 (key.charCodeAt(2) > 122 || key.charCodeAt(2) < 97);
+const isNativeOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // lowercase letter
+key.charCodeAt(2) > 96 && key.charCodeAt(2) < 123;
 const isModelListener = (key) => key.startsWith("onUpdate:");
 const extend = Object.assign;
 const remove = (arr, el) => {
@@ -50,6 +52,7 @@ const isReservedProp = /* @__PURE__ */ makeMap(
   // the leading comma is intentional so empty string "" is also included
   ",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"
 );
+const isBuiltInTag = /* @__PURE__ */ makeMap("slot,component");
 const isBuiltInDirective = /* @__PURE__ */ makeMap(
   "bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo"
 );
@@ -61,10 +64,9 @@ const cacheStringFunction = (fn) => {
   };
 };
 const camelizeRE = /-(\w)/g;
+const camelizeReplacer = (_, c) => c ? c.toUpperCase() : "";
 const camelize = cacheStringFunction(
-  (str) => {
-    return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
-  }
+  (str) => str.replace(camelizeRE, camelizeReplacer)
 );
 const hyphenateRE = /\B([A-Z])/g;
 const hyphenate = cacheStringFunction(
@@ -101,6 +103,10 @@ let _globalThis;
 const getGlobalThis = () => {
   return _globalThis || (_globalThis = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {});
 };
+function canSetValueDirectly(tagName) {
+  return tagName !== "PROGRESS" && // custom elements may use _value internally
+  !tagName.includes("-");
+}
 
 function normalizeStyle(value) {
   if (isArray(value)) {
@@ -208,6 +214,24 @@ function isRenderableAttrValue(value) {
   const type = typeof value;
   return type === "string" || type === "number" || type === "boolean";
 }
+function shouldSetAsAttr(tagName, key) {
+  if (key === "spellcheck" || key === "draggable" || key === "translate" || key === "autocorrect") {
+    return true;
+  }
+  if (key === "form") {
+    return true;
+  }
+  if (key === "list" && tagName === "INPUT") {
+    return true;
+  }
+  if (key === "type" && tagName === "TEXTAREA") {
+    return true;
+  }
+  if ((key === "width" || key === "height") && (tagName === "IMG" || tagName === "VIDEO" || tagName === "CANVAS" || tagName === "SOURCE")) {
+    return true;
+  }
+  return false;
+}
 
 const escapeRE = /["'&<>]/;
 function escapeHtml(string) {
@@ -307,7 +331,20 @@ const isRef$1 = (val) => {
   return !!(val && val["__v_isRef"] === true);
 };
 const toDisplayString = (val) => {
-  return isString(val) ? val : val == null ? "" : isArray(val) || isObject(val) && (val.toString === objectToString || !isFunction(val.toString)) ? isRef$1(val) ? toDisplayString(val.value) : JSON.stringify(val, replacer, 2) : String(val);
+  switch (typeof val) {
+    case "string":
+      return val;
+    case "object":
+      if (val) {
+        if (isRef$1(val)) {
+          return toDisplayString(val.value);
+        } else if (isArray(val) || val.toString === objectToString || !isFunction(val.toString)) {
+          return JSON.stringify(val, replacer, 2);
+        }
+      }
+    default:
+      return val == null ? "" : String(val);
+  }
 };
 const replacer = (_key, val) => {
   if (isRef$1(val)) {
@@ -342,571 +379,404 @@ const stringifySymbol = (v, i = "") => {
   );
 };
 
-function warn$2(msg, ...args) {
-  console.warn(`[Vue warn] ${msg}`, ...args);
-}
-
-let activeEffectScope;
-class EffectScope {
-  constructor(detached = false) {
-    this.detached = detached;
-    /**
-     * @internal
-     */
-    this._active = true;
-    /**
-     * @internal track `on` calls, allow `on` call multiple times
-     */
-    this._on = 0;
-    /**
-     * @internal
-     */
-    this.effects = [];
-    /**
-     * @internal
-     */
-    this.cleanups = [];
-    this._isPaused = false;
-    this.parent = activeEffectScope;
-    if (!detached && activeEffectScope) {
-      this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
-        this
-      ) - 1;
-    }
-  }
-  get active() {
-    return this._active;
-  }
-  pause() {
-    if (this._active) {
-      this._isPaused = true;
-      let i, l;
-      if (this.scopes) {
-        for (i = 0, l = this.scopes.length; i < l; i++) {
-          this.scopes[i].pause();
-        }
-      }
-      for (i = 0, l = this.effects.length; i < l; i++) {
-        this.effects[i].pause();
-      }
-    }
-  }
-  /**
-   * Resumes the effect scope, including all child scopes and effects.
-   */
-  resume() {
-    if (this._active) {
-      if (this._isPaused) {
-        this._isPaused = false;
-        let i, l;
-        if (this.scopes) {
-          for (i = 0, l = this.scopes.length; i < l; i++) {
-            this.scopes[i].resume();
-          }
-        }
-        for (i = 0, l = this.effects.length; i < l; i++) {
-          this.effects[i].resume();
-        }
-      }
-    }
-  }
-  run(fn) {
-    if (this._active) {
-      const currentEffectScope = activeEffectScope;
-      try {
-        activeEffectScope = this;
-        return fn();
-      } finally {
-        activeEffectScope = currentEffectScope;
-      }
-    } else {
-      warn$2(`cannot run an inactive effect scope.`);
-    }
-  }
-  /**
-   * This should only be called on non-detached scopes
-   * @internal
-   */
-  on() {
-    if (++this._on === 1) {
-      this.prevScope = activeEffectScope;
-      activeEffectScope = this;
-    }
-  }
-  /**
-   * This should only be called on non-detached scopes
-   * @internal
-   */
-  off() {
-    if (this._on > 0 && --this._on === 0) {
-      activeEffectScope = this.prevScope;
-      this.prevScope = void 0;
-    }
-  }
-  stop(fromParent) {
-    if (this._active) {
-      this._active = false;
-      let i, l;
-      for (i = 0, l = this.effects.length; i < l; i++) {
-        this.effects[i].stop();
-      }
-      this.effects.length = 0;
-      for (i = 0, l = this.cleanups.length; i < l; i++) {
-        this.cleanups[i]();
+function getSequence(arr) {
+  const p = arr.slice();
+  const result = [0];
+  let i, j, u, v, c;
+  const len = arr.length;
+  for (i = 0; i < len; i++) {
+    const arrI = arr[i];
+    if (arrI !== 0) {
+      j = result[result.length - 1];
+      if (arr[j] < arrI) {
+        p[i] = j;
+        result.push(i);
+        continue;
       }
-      this.cleanups.length = 0;
-      if (this.scopes) {
-        for (i = 0, l = this.scopes.length; i < l; i++) {
-          this.scopes[i].stop(true);
+      u = 0;
+      v = result.length - 1;
+      while (u < v) {
+        c = u + v >> 1;
+        if (arr[result[c]] < arrI) {
+          u = c + 1;
+        } else {
+          v = c;
         }
-        this.scopes.length = 0;
       }
-      if (!this.detached && this.parent && !fromParent) {
-        const last = this.parent.scopes.pop();
-        if (last && last !== this) {
-          this.parent.scopes[this.index] = last;
-          last.index = this.index;
+      if (arrI < arr[result[u]]) {
+        if (u > 0) {
+          p[i] = result[u - 1];
         }
+        result[u] = i;
       }
-      this.parent = void 0;
     }
   }
-}
-function getCurrentScope() {
-  return activeEffectScope;
+  u = result.length;
+  v = result[u - 1];
+  while (u-- > 0) {
+    result[u] = v;
+    v = p[v];
+  }
+  return result;
 }
 
-let activeSub;
-const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
-class ReactiveEffect {
-  constructor(fn) {
-    this.fn = fn;
-    /**
-     * @internal
-     */
-    this.deps = void 0;
-    /**
-     * @internal
-     */
-    this.depsTail = void 0;
-    /**
-     * @internal
-     */
-    this.flags = 1 | 4;
-    /**
-     * @internal
-     */
-    this.next = void 0;
-    /**
-     * @internal
-     */
-    this.cleanup = void 0;
-    this.scheduler = void 0;
-    if (activeEffectScope && activeEffectScope.active) {
-      activeEffectScope.effects.push(this);
-    }
-  }
-  pause() {
-    this.flags |= 64;
-  }
-  resume() {
-    if (this.flags & 64) {
-      this.flags &= -65;
-      if (pausedQueueEffects.has(this)) {
-        pausedQueueEffects.delete(this);
-        this.trigger();
-      }
-    }
-  }
-  /**
-   * @internal
-   */
-  notify() {
-    if (this.flags & 2 && !(this.flags & 32)) {
-      return;
-    }
-    if (!(this.flags & 8)) {
-      batch(this);
-    }
-  }
-  run() {
-    if (!(this.flags & 1)) {
-      return this.fn();
-    }
-    this.flags |= 2;
-    cleanupEffect(this);
-    prepareDeps(this);
-    const prevEffect = activeSub;
-    const prevShouldTrack = shouldTrack;
-    activeSub = this;
-    shouldTrack = true;
-    try {
-      return this.fn();
-    } finally {
-      if (activeSub !== this) {
-        warn$2(
-          "Active effect was not restored correctly - this is likely a Vue internal bug."
-        );
-      }
-      cleanupDeps(this);
-      activeSub = prevEffect;
-      shouldTrack = prevShouldTrack;
-      this.flags &= -3;
-    }
-  }
-  stop() {
-    if (this.flags & 1) {
-      for (let link = this.deps; link; link = link.nextDep) {
-        removeSub(link);
-      }
-      this.deps = this.depsTail = void 0;
-      cleanupEffect(this);
-      this.onStop && this.onStop();
-      this.flags &= -2;
-    }
+function normalizeCssVarValue(value) {
+  if (value == null) {
+    return "initial";
   }
-  trigger() {
-    if (this.flags & 64) {
-      pausedQueueEffects.add(this);
-    } else if (this.scheduler) {
-      this.scheduler();
-    } else {
-      this.runIfDirty();
-    }
+  if (typeof value === "string") {
+    return value === "" ? " " : value;
   }
-  /**
-   * @internal
-   */
-  runIfDirty() {
-    if (isDirty(this)) {
-      this.run();
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    {
+      console.warn(
+        "[Vue warn] Invalid value used for CSS binding. Expected a string or a finite number but received:",
+        value
+      );
     }
   }
-  get dirty() {
-    return isDirty(this);
-  }
+  return String(value);
 }
+
+function warn$2(msg, ...args) {
+  console.warn(`[Vue warn] ${msg}`, ...args);
+}
+
+var ReactiveFlags = /* @__PURE__ */ ((ReactiveFlags2) => {
+  ReactiveFlags2[ReactiveFlags2["None"] = 0] = "None";
+  ReactiveFlags2[ReactiveFlags2["Mutable"] = 1] = "Mutable";
+  ReactiveFlags2[ReactiveFlags2["Watching"] = 2] = "Watching";
+  ReactiveFlags2[ReactiveFlags2["RecursedCheck"] = 4] = "RecursedCheck";
+  ReactiveFlags2[ReactiveFlags2["Recursed"] = 8] = "Recursed";
+  ReactiveFlags2[ReactiveFlags2["Dirty"] = 16] = "Dirty";
+  ReactiveFlags2[ReactiveFlags2["Pending"] = 32] = "Pending";
+  return ReactiveFlags2;
+})(ReactiveFlags || {});
+const notifyBuffer = [];
 let batchDepth = 0;
-let batchedSub;
-let batchedComputed;
-function batch(sub, isComputed = false) {
-  sub.flags |= 8;
-  if (isComputed) {
-    sub.next = batchedComputed;
-    batchedComputed = sub;
-    return;
+let activeSub = void 0;
+let notifyIndex = 0;
+let notifyBufferLength = 0;
+function setActiveSub(sub) {
+  try {
+    return activeSub;
+  } finally {
+    activeSub = sub;
   }
-  sub.next = batchedSub;
-  batchedSub = sub;
 }
 function startBatch() {
-  batchDepth++;
+  ++batchDepth;
 }
 function endBatch() {
-  if (--batchDepth > 0) {
-    return;
-  }
-  if (batchedComputed) {
-    let e = batchedComputed;
-    batchedComputed = void 0;
-    while (e) {
-      const next = e.next;
-      e.next = void 0;
-      e.flags &= -9;
-      e = next;
-    }
-  }
-  let error;
-  while (batchedSub) {
-    let e = batchedSub;
-    batchedSub = void 0;
-    while (e) {
-      const next = e.next;
-      e.next = void 0;
-      e.flags &= -9;
-      if (e.flags & 1) {
-        try {
-          ;
-          e.trigger();
-        } catch (err) {
-          if (!error) error = err;
-        }
-      }
-      e = next;
-    }
-  }
-  if (error) throw error;
-}
-function prepareDeps(sub) {
-  for (let link = sub.deps; link; link = link.nextDep) {
-    link.version = -1;
-    link.prevActiveLink = link.dep.activeLink;
-    link.dep.activeLink = link;
+  if (!--batchDepth && notifyBufferLength) {
+    flush();
   }
 }
-function cleanupDeps(sub) {
-  let head;
-  let tail = sub.depsTail;
-  let link = tail;
-  while (link) {
-    const prev = link.prevDep;
-    if (link.version === -1) {
-      if (link === tail) tail = prev;
-      removeSub(link);
-      removeDep(link);
-    } else {
-      head = link;
-    }
-    link.dep.activeLink = link.prevActiveLink;
-    link.prevActiveLink = void 0;
-    link = prev;
+function link(dep, sub) {
+  const prevDep = sub.depsTail;
+  if (prevDep !== void 0 && prevDep.dep === dep) {
+    return;
   }
-  sub.deps = head;
-  sub.depsTail = tail;
-}
-function isDirty(sub) {
-  for (let link = sub.deps; link; link = link.nextDep) {
-    if (link.dep.version !== link.version || link.dep.computed && (refreshComputed(link.dep.computed) || link.dep.version !== link.version)) {
-      return true;
+  let nextDep = void 0;
+  const recursedCheck = sub.flags & 4 /* RecursedCheck */;
+  if (recursedCheck) {
+    nextDep = prevDep !== void 0 ? prevDep.nextDep : sub.deps;
+    if (nextDep !== void 0 && nextDep.dep === dep) {
+      sub.depsTail = nextDep;
+      return;
     }
   }
-  if (sub._dirty) {
-    return true;
-  }
-  return false;
-}
-function refreshComputed(computed) {
-  if (computed.flags & 4 && !(computed.flags & 16)) {
-    return;
-  }
-  computed.flags &= -17;
-  if (computed.globalVersion === globalVersion) {
-    return;
+  const prevSub = dep.subsTail;
+  const newLink = sub.depsTail = dep.subsTail = {
+    dep,
+    sub,
+    prevDep,
+    nextDep,
+    prevSub,
+    nextSub: void 0
+  };
+  if (nextDep !== void 0) {
+    nextDep.prevDep = newLink;
   }
-  computed.globalVersion = globalVersion;
-  if (!computed.isSSR && computed.flags & 128 && (!computed.deps && !computed._dirty || !isDirty(computed))) {
-    return;
+  if (prevDep !== void 0) {
+    prevDep.nextDep = newLink;
+  } else {
+    sub.deps = newLink;
   }
-  computed.flags |= 2;
-  const dep = computed.dep;
-  const prevSub = activeSub;
-  const prevShouldTrack = shouldTrack;
-  activeSub = computed;
-  shouldTrack = true;
-  try {
-    prepareDeps(computed);
-    const value = computed.fn(computed._value);
-    if (dep.version === 0 || hasChanged(value, computed._value)) {
-      computed.flags |= 128;
-      computed._value = value;
-      dep.version++;
-    }
-  } catch (err) {
-    dep.version++;
-    throw err;
-  } finally {
-    activeSub = prevSub;
-    shouldTrack = prevShouldTrack;
-    cleanupDeps(computed);
-    computed.flags &= -3;
+  if (prevSub !== void 0) {
+    prevSub.nextSub = newLink;
+  } else {
+    dep.subs = newLink;
   }
 }
-function removeSub(link, soft = false) {
-  const { dep, prevSub, nextSub } = link;
-  if (prevSub) {
-    prevSub.nextSub = nextSub;
-    link.prevSub = void 0;
+function unlink(link2, sub = link2.sub) {
+  const dep = link2.dep;
+  const prevDep = link2.prevDep;
+  const nextDep = link2.nextDep;
+  const nextSub = link2.nextSub;
+  const prevSub = link2.prevSub;
+  if (nextDep !== void 0) {
+    nextDep.prevDep = prevDep;
+  } else {
+    sub.depsTail = prevDep;
   }
-  if (nextSub) {
-    nextSub.prevSub = prevSub;
-    link.nextSub = void 0;
+  if (prevDep !== void 0) {
+    prevDep.nextDep = nextDep;
+  } else {
+    sub.deps = nextDep;
   }
-  if (dep.subsHead === link) {
-    dep.subsHead = nextSub;
+  if (nextSub !== void 0) {
+    nextSub.prevSub = prevSub;
+  } else {
+    dep.subsTail = prevSub;
   }
-  if (dep.subs === link) {
-    dep.subs = prevSub;
-    if (!prevSub && dep.computed) {
-      dep.computed.flags &= -5;
-      for (let l = dep.computed.deps; l; l = l.nextDep) {
-        removeSub(l, true);
+  if (prevSub !== void 0) {
+    prevSub.nextSub = nextSub;
+  } else if ((dep.subs = nextSub) === void 0) {
+    let toRemove = dep.deps;
+    if (toRemove !== void 0) {
+      do {
+        toRemove = unlink(toRemove, dep);
+      } while (toRemove !== void 0);
+      dep.flags |= 16 /* Dirty */;
+    }
+  }
+  return nextDep;
+}
+function propagate(link2) {
+  let next = link2.nextSub;
+  let stack;
+  top: do {
+    const sub = link2.sub;
+    let flags = sub.flags;
+    if (flags & (1 /* Mutable */ | 2 /* Watching */)) {
+      if (!(flags & (4 /* RecursedCheck */ | 8 /* Recursed */ | 16 /* Dirty */ | 32 /* Pending */))) {
+        sub.flags = flags | 32 /* Pending */;
+      } else if (!(flags & (4 /* RecursedCheck */ | 8 /* Recursed */))) {
+        flags = 0 /* None */;
+      } else if (!(flags & 4 /* RecursedCheck */)) {
+        sub.flags = flags & -9 /* Recursed */ | 32 /* Pending */;
+      } else if (!(flags & (16 /* Dirty */ | 32 /* Pending */)) && isValidLink(link2, sub)) {
+        sub.flags = flags | 8 /* Recursed */ | 32 /* Pending */;
+        flags &= 1 /* Mutable */;
+      } else {
+        flags = 0 /* None */;
+      }
+      if (flags & 2 /* Watching */) {
+        notifyBuffer[notifyBufferLength++] = sub;
+      }
+      if (flags & 1 /* Mutable */) {
+        const subSubs = sub.subs;
+        if (subSubs !== void 0) {
+          link2 = subSubs;
+          if (subSubs.nextSub !== void 0) {
+            stack = { value: next, prev: stack };
+            next = link2.nextSub;
+          }
+          continue;
+        }
       }
     }
-  }
-  if (!soft && !--dep.sc && dep.map) {
-    dep.map.delete(dep.key);
-  }
-}
-function removeDep(link) {
-  const { prevDep, nextDep } = link;
-  if (prevDep) {
-    prevDep.nextDep = nextDep;
-    link.prevDep = void 0;
-  }
-  if (nextDep) {
-    nextDep.prevDep = prevDep;
-    link.nextDep = void 0;
-  }
-}
-let shouldTrack = true;
-const trackStack = [];
-function pauseTracking() {
-  trackStack.push(shouldTrack);
-  shouldTrack = false;
-}
-function resetTracking() {
-  const last = trackStack.pop();
-  shouldTrack = last === void 0 ? true : last;
-}
-function cleanupEffect(e) {
-  const { cleanup } = e;
-  e.cleanup = void 0;
-  if (cleanup) {
-    const prevSub = activeSub;
-    activeSub = void 0;
-    try {
-      cleanup();
-    } finally {
-      activeSub = prevSub;
+    if ((link2 = next) !== void 0) {
+      next = link2.nextSub;
+      continue;
     }
-  }
+    while (stack !== void 0) {
+      link2 = stack.value;
+      stack = stack.prev;
+      if (link2 !== void 0) {
+        next = link2.nextSub;
+        continue top;
+      }
+    }
+    break;
+  } while (true);
 }
-
-let globalVersion = 0;
-class Link {
-  constructor(sub, dep) {
-    this.sub = sub;
-    this.dep = dep;
-    this.version = dep.version;
-    this.nextDep = this.prevDep = this.nextSub = this.prevSub = this.prevActiveLink = void 0;
-  }
+function startTracking(sub) {
+  sub.depsTail = void 0;
+  sub.flags = sub.flags & -57 | 4 /* RecursedCheck */;
+  return setActiveSub(sub);
 }
-class Dep {
-  // TODO isolatedDeclarations "__v_skip"
-  constructor(computed) {
-    this.computed = computed;
-    this.version = 0;
-    /**
-     * Link between this dep and the current active effect
-     */
-    this.activeLink = void 0;
-    /**
-     * Doubly linked list representing the subscribing effects (tail)
-     */
-    this.subs = void 0;
-    /**
-     * For object property deps cleanup
-     */
-    this.map = void 0;
-    this.key = void 0;
-    /**
-     * Subscriber counter
-     */
-    this.sc = 0;
-    /**
-     * @internal
-     */
-    this.__v_skip = true;
-    {
-      this.subsHead = void 0;
-    }
+function endTracking(sub, prevSub) {
+  if (activeSub !== sub) {
+    warn$2(
+      "Active effect was not restored correctly - this is likely a Vue internal bug."
+    );
   }
-  track(debugInfo) {
-    if (!activeSub || !shouldTrack || activeSub === this.computed) {
-      return;
+  activeSub = prevSub;
+  const depsTail = sub.depsTail;
+  let toRemove = depsTail !== void 0 ? depsTail.nextDep : sub.deps;
+  while (toRemove !== void 0) {
+    toRemove = unlink(toRemove, sub);
+  }
+  sub.flags &= -5 /* RecursedCheck */;
+}
+function flush() {
+  while (notifyIndex < notifyBufferLength) {
+    const effect = notifyBuffer[notifyIndex];
+    notifyBuffer[notifyIndex++] = void 0;
+    effect.notify();
+  }
+  notifyIndex = 0;
+  notifyBufferLength = 0;
+}
+function checkDirty(link2, sub) {
+  let stack;
+  let checkDepth = 0;
+  top: do {
+    const dep = link2.dep;
+    const depFlags = dep.flags;
+    let dirty = false;
+    if (sub.flags & 16 /* Dirty */) {
+      dirty = true;
+    } else if ((depFlags & (1 /* Mutable */ | 16 /* Dirty */)) === (1 /* Mutable */ | 16 /* Dirty */)) {
+      if (dep.update()) {
+        const subs = dep.subs;
+        if (subs.nextSub !== void 0) {
+          shallowPropagate(subs);
+        }
+        dirty = true;
+      }
+    } else if ((depFlags & (1 /* Mutable */ | 32 /* Pending */)) === (1 /* Mutable */ | 32 /* Pending */)) {
+      if (link2.nextSub !== void 0 || link2.prevSub !== void 0) {
+        stack = { value: link2, prev: stack };
+      }
+      link2 = dep.deps;
+      sub = dep;
+      ++checkDepth;
+      continue;
     }
-    let link = this.activeLink;
-    if (link === void 0 || link.sub !== activeSub) {
-      link = this.activeLink = new Link(activeSub, this);
-      if (!activeSub.deps) {
-        activeSub.deps = activeSub.depsTail = link;
-      } else {
-        link.prevDep = activeSub.depsTail;
-        activeSub.depsTail.nextDep = link;
-        activeSub.depsTail = link;
-      }
-      addSub(link);
-    } else if (link.version === -1) {
-      link.version = this.version;
-      if (link.nextDep) {
-        const next = link.nextDep;
-        next.prevDep = link.prevDep;
-        if (link.prevDep) {
-          link.prevDep.nextDep = next;
-        }
-        link.prevDep = activeSub.depsTail;
-        link.nextDep = void 0;
-        activeSub.depsTail.nextDep = link;
-        activeSub.depsTail = link;
-        if (activeSub.deps === link) {
-          activeSub.deps = next;
-        }
-      }
-    }
-    if (activeSub.onTrack) {
-      activeSub.onTrack(
-        extend(
-          {
-            effect: activeSub
-          },
-          debugInfo
-        )
-      );
+    if (!dirty && link2.nextDep !== void 0) {
+      link2 = link2.nextDep;
+      continue;
     }
-    return link;
-  }
-  trigger(debugInfo) {
-    this.version++;
-    globalVersion++;
-    this.notify(debugInfo);
-  }
-  notify(debugInfo) {
-    startBatch();
-    try {
-      if (true) {
-        for (let head = this.subsHead; head; head = head.nextSub) {
-          if (head.sub.onTrigger && !(head.sub.flags & 8)) {
-            head.sub.onTrigger(
-              extend(
-                {
-                  effect: head.sub
-                },
-                debugInfo
-              )
-            );
+    while (checkDepth) {
+      --checkDepth;
+      const firstSub = sub.subs;
+      const hasMultipleSubs = firstSub.nextSub !== void 0;
+      if (hasMultipleSubs) {
+        link2 = stack.value;
+        stack = stack.prev;
+      } else {
+        link2 = firstSub;
+      }
+      if (dirty) {
+        if (sub.update()) {
+          if (hasMultipleSubs) {
+            shallowPropagate(firstSub);
           }
+          sub = link2.sub;
+          continue;
         }
+      } else {
+        sub.flags &= -33 /* Pending */;
+      }
+      sub = link2.sub;
+      if (link2.nextDep !== void 0) {
+        link2 = link2.nextDep;
+        continue top;
+      }
+      dirty = false;
+    }
+    return dirty;
+  } while (true);
+}
+function shallowPropagate(link2) {
+  do {
+    const sub = link2.sub;
+    const nextSub = link2.nextSub;
+    const subFlags = sub.flags;
+    if ((subFlags & (32 /* Pending */ | 16 /* Dirty */)) === 32 /* Pending */) {
+      sub.flags = subFlags | 16 /* Dirty */;
+    }
+    link2 = nextSub;
+  } while (link2 !== void 0);
+}
+function isValidLink(checkLink, sub) {
+  const depsTail = sub.depsTail;
+  if (depsTail !== void 0) {
+    let link2 = sub.deps;
+    do {
+      if (link2 === checkLink) {
+        return true;
       }
-      for (let link = this.subs; link; link = link.prevSub) {
-        if (link.sub.notify()) {
-          ;
-          link.sub.dep.notify();
-        }
+      if (link2 === depsTail) {
+        break;
       }
-    } finally {
-      endBatch();
-    }
+      link2 = link2.nextDep;
+    } while (link2 !== void 0);
   }
+  return false;
 }
-function addSub(link) {
-  link.dep.sc++;
-  if (link.sub.flags & 4) {
-    const computed = link.dep.computed;
-    if (computed && !link.dep.subs) {
-      computed.flags |= 4 | 16;
-      for (let l = computed.deps; l; l = l.nextDep) {
-        addSub(l);
-      }
+
+const triggerEventInfos = [];
+function onTrack(sub, debugInfo) {
+  if (sub.onTrack) {
+    sub.onTrack(
+      extend(
+        {
+          effect: sub
+        },
+        debugInfo
+      )
+    );
+  }
+}
+function onTrigger(sub) {
+  if (sub.onTrigger) {
+    const debugInfo = triggerEventInfos[triggerEventInfos.length - 1];
+    sub.onTrigger(
+      extend(
+        {
+          effect: sub
+        },
+        debugInfo
+      )
+    );
+  }
+}
+function setupOnTrigger(target) {
+  Object.defineProperty(target.prototype, "onTrigger", {
+    get() {
+      return this._onTrigger;
+    },
+    set(val) {
+      if (val && !this._onTrigger) setupFlagsHandler(this);
+      this._onTrigger = val;
     }
-    const currentTail = link.dep.subs;
-    if (currentTail !== link) {
-      link.prevSub = currentTail;
-      if (currentTail) currentTail.nextSub = link;
+  });
+}
+function setupFlagsHandler(target) {
+  target._flags = target.flags;
+  Object.defineProperty(target, "flags", {
+    get() {
+      return target._flags;
+    },
+    set(value) {
+      if (!(target._flags & (ReactiveFlags.Dirty | ReactiveFlags.Pending)) && !!(value & (ReactiveFlags.Dirty | ReactiveFlags.Pending))) {
+        onTrigger(this);
+      }
+      target._flags = value;
     }
-    if (link.dep.subsHead === void 0) {
-      link.dep.subsHead = link;
+  });
+}
+
+class Dep {
+  constructor(map, key) {
+    this.map = map;
+    this.key = key;
+    this._subs = void 0;
+    this.subsTail = void 0;
+    this.flags = ReactiveFlags.None;
+  }
+  get subs() {
+    return this._subs;
+  }
+  set subs(value) {
+    this._subs = value;
+    if (value === void 0) {
+      this.map.delete(this.key);
     }
-    link.dep.subs = link;
   }
 }
 const targetMap = /* @__PURE__ */ new WeakMap();
@@ -920,36 +790,34 @@ const ARRAY_ITERATE_KEY = Symbol(
   "Array iterate" 
 );
 function track(target, type, key) {
-  if (shouldTrack && activeSub) {
+  if (activeSub !== void 0) {
     let depsMap = targetMap.get(target);
     if (!depsMap) {
       targetMap.set(target, depsMap = /* @__PURE__ */ new Map());
     }
     let dep = depsMap.get(key);
     if (!dep) {
-      depsMap.set(key, dep = new Dep());
-      dep.map = depsMap;
-      dep.key = key;
+      depsMap.set(key, dep = new Dep(depsMap, key));
     }
     {
-      dep.track({
+      onTrack(activeSub, {
         target,
         type,
         key
       });
     }
+    link(dep, activeSub);
   }
 }
 function trigger(target, type, key, newValue, oldValue, oldTarget) {
   const depsMap = targetMap.get(target);
   if (!depsMap) {
-    globalVersion++;
     return;
   }
   const run = (dep) => {
-    if (dep) {
+    if (dep !== void 0 && dep.subs !== void 0) {
       {
-        dep.trigger({
+        triggerEventInfos.push({
           target,
           type,
           key,
@@ -958,6 +826,11 @@ function trigger(target, type, key, newValue, oldValue, oldTarget) {
           oldTarget
         });
       }
+      propagate(dep.subs);
+      shallowPropagate(dep.subs);
+      {
+        triggerEventInfos.pop();
+      }
     }
   };
   startBatch();
@@ -1178,11 +1051,11 @@ function searchProxy(self, method, args) {
   return res;
 }
 function noTracking(self, method, args = []) {
-  pauseTracking();
   startBatch();
+  const prevSub = setActiveSub();
   const res = toRaw(self)[method].apply(self, args);
+  setActiveSub(prevSub);
   endBatch();
-  resetTracking();
   return res;
 }
 
@@ -1228,14 +1101,18 @@ class BaseReactiveHandler {
         return hasOwnProperty;
       }
     }
+    const wasRef = isRef(target);
     const res = Reflect.get(
       target,
       key,
       // if this is a proxy wrapping a ref, return methods using the raw ref
       // as receiver so that we don't have to call `toRaw` on the ref in all
       // its class methods
-      isRef(target) ? target : receiver
+      wasRef ? target : receiver
     );
+    if (wasRef && key !== "value") {
+      return res;
+    }
     if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
       return res;
     }
@@ -1678,96 +1555,305 @@ function markRaw(value) {
   if (!hasOwn(value, "__v_skip") && Object.isExtensible(value)) {
     def(value, "__v_skip", true);
   }
-  return value;
-}
-const toReactive = (value) => isObject(value) ? reactive(value) : value;
-const toReadonly = (value) => isObject(value) ? readonly(value) : value;
-
-function isRef(r) {
-  return r ? r["__v_isRef"] === true : false;
-}
-function unref(ref2) {
-  return isRef(ref2) ? ref2.value : ref2;
-}
-const shallowUnwrapHandlers = {
-  get: (target, key, receiver) => key === "__v_raw" ? target : unref(Reflect.get(target, key, receiver)),
-  set: (target, key, value, receiver) => {
-    const oldValue = target[key];
-    if (isRef(oldValue) && !isRef(value)) {
-      oldValue.value = value;
-      return true;
-    } else {
-      return Reflect.set(target, key, value, receiver);
+  return value;
+}
+const toReactive = (value) => isObject(value) ? reactive(value) : value;
+const toReadonly = (value) => isObject(value) ? readonly(value) : value;
+
+function isRef(r) {
+  return r ? r["__v_isRef"] === true : false;
+}
+function unref(ref2) {
+  return isRef(ref2) ? ref2.value : ref2;
+}
+const shallowUnwrapHandlers = {
+  get: (target, key, receiver) => key === "__v_raw" ? target : unref(Reflect.get(target, key, receiver)),
+  set: (target, key, value, receiver) => {
+    const oldValue = target[key];
+    if (isRef(oldValue) && !isRef(value)) {
+      oldValue.value = value;
+      return true;
+    } else {
+      return Reflect.set(target, key, value, receiver);
+    }
+  }
+};
+function proxyRefs(objectWithRefs) {
+  return isReactive(objectWithRefs) ? objectWithRefs : new Proxy(objectWithRefs, shallowUnwrapHandlers);
+}
+
+class ReactiveEffect {
+  constructor(fn) {
+    this.deps = void 0;
+    this.depsTail = void 0;
+    this.subs = void 0;
+    this.subsTail = void 0;
+    this.flags = ReactiveFlags.Watching | ReactiveFlags.Dirty;
+    /**
+     * @internal
+     */
+    this.cleanups = [];
+    /**
+     * @internal
+     */
+    this.cleanupsLength = 0;
+    if (fn !== void 0) {
+      this.fn = fn;
+    }
+    if (activeEffectScope) {
+      link(this, activeEffectScope);
+    }
+  }
+  // @ts-expect-error
+  fn() {
+  }
+  get active() {
+    return !(this.flags & 1024);
+  }
+  pause() {
+    this.flags |= 256;
+  }
+  resume() {
+    const flags = this.flags &= -257;
+    if (flags & (ReactiveFlags.Dirty | ReactiveFlags.Pending)) {
+      this.notify();
+    }
+  }
+  notify() {
+    if (!(this.flags & 256) && this.dirty) {
+      this.run();
+    }
+  }
+  run() {
+    if (!this.active) {
+      return this.fn();
+    }
+    cleanup(this);
+    const prevSub = startTracking(this);
+    try {
+      return this.fn();
+    } finally {
+      endTracking(this, prevSub);
+      const flags = this.flags;
+      if ((flags & (ReactiveFlags.Recursed | 128)) === (ReactiveFlags.Recursed | 128)) {
+        this.flags = flags & ~ReactiveFlags.Recursed;
+        this.notify();
+      }
+    }
+  }
+  stop() {
+    if (!this.active) {
+      return;
+    }
+    this.flags = 1024;
+    let dep = this.deps;
+    while (dep !== void 0) {
+      dep = unlink(dep, this);
+    }
+    const sub = this.subs;
+    if (sub !== void 0) {
+      unlink(sub);
+    }
+    cleanup(this);
+  }
+  get dirty() {
+    const flags = this.flags;
+    if (flags & ReactiveFlags.Dirty) {
+      return true;
+    }
+    if (flags & ReactiveFlags.Pending) {
+      if (checkDirty(this.deps, this)) {
+        this.flags = flags | ReactiveFlags.Dirty;
+        return true;
+      } else {
+        this.flags = flags & ~ReactiveFlags.Pending;
+      }
+    }
+    return false;
+  }
+}
+{
+  setupOnTrigger(ReactiveEffect);
+}
+function cleanup(sub) {
+  const l = sub.cleanupsLength;
+  if (l) {
+    for (let i = 0; i < l; i++) {
+      sub.cleanups[i]();
+    }
+    sub.cleanupsLength = 0;
+  }
+}
+
+let activeEffectScope;
+class EffectScope {
+  constructor(detached = false) {
+    this.deps = void 0;
+    this.depsTail = void 0;
+    this.subs = void 0;
+    this.subsTail = void 0;
+    this.flags = 0;
+    /**
+     * @internal
+     */
+    this.cleanups = [];
+    /**
+     * @internal
+     */
+    this.cleanupsLength = 0;
+    if (!detached && activeEffectScope) {
+      link(this, activeEffectScope);
+    }
+  }
+  get active() {
+    return !(this.flags & 1024);
+  }
+  pause() {
+    if (!(this.flags & 256)) {
+      this.flags |= 256;
+      for (let link2 = this.deps; link2 !== void 0; link2 = link2.nextDep) {
+        const dep = link2.dep;
+        if ("pause" in dep) {
+          dep.pause();
+        }
+      }
+    }
+  }
+  /**
+   * Resumes the effect scope, including all child scopes and effects.
+   */
+  resume() {
+    const flags = this.flags;
+    if (flags & 256) {
+      this.flags = flags & -257;
+      for (let link2 = this.deps; link2 !== void 0; link2 = link2.nextDep) {
+        const dep = link2.dep;
+        if ("resume" in dep) {
+          dep.resume();
+        }
+      }
+    }
+  }
+  run(fn) {
+    const prevScope = activeEffectScope;
+    try {
+      activeEffectScope = this;
+      return fn();
+    } finally {
+      activeEffectScope = prevScope;
+    }
+  }
+  stop() {
+    if (!this.active) {
+      return;
+    }
+    this.flags = 1024;
+    let dep = this.deps;
+    while (dep !== void 0) {
+      const node = dep.dep;
+      if ("stop" in node) {
+        dep = dep.nextDep;
+        node.stop();
+      } else {
+        dep = unlink(dep, this);
+      }
     }
+    const sub = this.subs;
+    if (sub !== void 0) {
+      unlink(sub);
+    }
+    cleanup(this);
+  }
+}
+function setCurrentScope(scope) {
+  try {
+    return activeEffectScope;
+  } finally {
+    activeEffectScope = scope;
   }
-};
-function proxyRefs(objectWithRefs) {
-  return isReactive(objectWithRefs) ? objectWithRefs : new Proxy(objectWithRefs, shallowUnwrapHandlers);
 }
 
 class ComputedRefImpl {
-  constructor(fn, setter, isSSR) {
+  constructor(fn, setter) {
     this.fn = fn;
     this.setter = setter;
     /**
      * @internal
      */
     this._value = void 0;
-    /**
-     * @internal
-     */
-    this.dep = new Dep(this);
-    /**
-     * @internal
-     */
-    this.__v_isRef = true;
-    // TODO isolatedDeclarations "__v_isReadonly"
-    // A computed is also a subscriber that tracks other deps
-    /**
-     * @internal
-     */
+    this.subs = void 0;
+    this.subsTail = void 0;
     this.deps = void 0;
-    /**
-     * @internal
-     */
     this.depsTail = void 0;
+    this.flags = ReactiveFlags.Mutable | ReactiveFlags.Dirty;
     /**
      * @internal
      */
-    this.flags = 16;
-    /**
-     * @internal
-     */
-    this.globalVersion = globalVersion - 1;
-    /**
-     * @internal
-     */
-    this.next = void 0;
-    // for backwards compat
-    this.effect = this;
+    this.__v_isRef = true;
     this["__v_isReadonly"] = !setter;
-    this.isSSR = isSSR;
+  }
+  // TODO isolatedDeclarations "__v_isReadonly"
+  // for backwards compat
+  get effect() {
+    return this;
+  }
+  // for backwards compat
+  get dep() {
+    return this;
   }
   /**
    * @internal
+   * for backwards compat
    */
-  notify() {
-    this.flags |= 16;
-    if (!(this.flags & 8) && // avoid infinite self recursion
-    activeSub !== this) {
-      batch(this, true);
+  get _dirty() {
+    const flags = this.flags;
+    if (flags & ReactiveFlags.Dirty) {
       return true;
     }
+    if (flags & ReactiveFlags.Pending) {
+      if (checkDirty(this.deps, this)) {
+        this.flags = flags | ReactiveFlags.Dirty;
+        return true;
+      } else {
+        this.flags = flags & ~ReactiveFlags.Pending;
+      }
+    }
+    return false;
+  }
+  /**
+   * @internal
+   * for backwards compat
+   */
+  set _dirty(v) {
+    if (v) {
+      this.flags |= ReactiveFlags.Dirty;
+    } else {
+      this.flags &= ~(ReactiveFlags.Dirty | ReactiveFlags.Pending);
+    }
   }
   get value() {
-    const link = this.dep.track({
-      target: this,
-      type: "get",
-      key: "value"
-    }) ;
-    refreshComputed(this);
-    if (link) {
-      link.version = this.dep.version;
+    const flags = this.flags;
+    if (flags & ReactiveFlags.Dirty || flags & ReactiveFlags.Pending && checkDirty(this.deps, this)) {
+      if (this.update()) {
+        const subs = this.subs;
+        if (subs !== void 0) {
+          shallowPropagate(subs);
+        }
+      }
+    } else if (flags & ReactiveFlags.Pending) {
+      this.flags = flags & ~ReactiveFlags.Pending;
+    }
+    if (activeSub !== void 0) {
+      {
+        onTrack(activeSub, {
+          target: this,
+          type: "get",
+          key: "value"
+        });
+      }
+      link(this, activeSub);
+    } else if (activeEffectScope !== void 0) {
+      link(this, activeEffectScope);
     }
     return this._value;
   }
@@ -1778,6 +1864,23 @@ class ComputedRefImpl {
       warn$2("Write operation failed: computed value is readonly");
     }
   }
+  update() {
+    const prevSub = startTracking(this);
+    try {
+      const oldValue = this._value;
+      const newValue = this.fn(oldValue);
+      if (hasChanged(oldValue, newValue)) {
+        this._value = newValue;
+        return true;
+      }
+      return false;
+    } finally {
+      endTracking(this, prevSub);
+    }
+  }
+}
+{
+  setupOnTrigger(ComputedRefImpl);
 }
 function computed$1(getterOrOptions, debugOptions, isSSR = false) {
   let getter;
@@ -1788,179 +1891,148 @@ function computed$1(getterOrOptions, debugOptions, isSSR = false) {
     getter = getterOrOptions.get;
     setter = getterOrOptions.set;
   }
-  const cRef = new ComputedRefImpl(getter, setter, isSSR);
+  const cRef = new ComputedRefImpl(getter, setter);
   return cRef;
 }
 
 const INITIAL_WATCHER_VALUE = {};
-const cleanupMap = /* @__PURE__ */ new WeakMap();
 let activeWatcher = void 0;
 function onWatcherCleanup(cleanupFn, failSilently = false, owner = activeWatcher) {
   if (owner) {
-    let cleanups = cleanupMap.get(owner);
-    if (!cleanups) cleanupMap.set(owner, cleanups = []);
-    cleanups.push(cleanupFn);
+    const { call } = owner.options;
+    if (call) {
+      owner.cleanups[owner.cleanupsLength++] = () => call(cleanupFn, 4);
+    } else {
+      owner.cleanups[owner.cleanupsLength++] = cleanupFn;
+    }
   } else if (!failSilently) {
     warn$2(
       `onWatcherCleanup() was called when there was no active watcher to associate with.`
     );
   }
 }
-function watch$1(source, cb, options = EMPTY_OBJ) {
-  const { immediate, deep, once, scheduler, augmentJob, call } = options;
-  const warnInvalidSource = (s) => {
-    (options.onWarn || warn$2)(
-      `Invalid watch source: `,
-      s,
-      `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
-    );
-  };
-  const reactiveGetter = (source2) => {
-    if (deep) return source2;
-    if (isShallow(source2) || deep === false || deep === 0)
-      return traverse(source2, 1);
-    return traverse(source2);
-  };
-  let effect;
-  let getter;
-  let cleanup;
-  let boundCleanup;
-  let forceTrigger = false;
-  let isMultiSource = false;
-  if (isRef(source)) {
-    getter = () => source.value;
-    forceTrigger = isShallow(source);
-  } else if (isReactive(source)) {
-    getter = () => reactiveGetter(source);
-    forceTrigger = true;
-  } else if (isArray(source)) {
-    isMultiSource = true;
-    forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
-    getter = () => source.map((s) => {
-      if (isRef(s)) {
-        return s.value;
-      } else if (isReactive(s)) {
-        return reactiveGetter(s);
-      } else if (isFunction(s)) {
-        return call ? call(s, 2) : s();
+class WatcherEffect extends ReactiveEffect {
+  constructor(source, cb, options = EMPTY_OBJ) {
+    const { deep, once, call, onWarn } = options;
+    let getter;
+    let forceTrigger = false;
+    let isMultiSource = false;
+    if (isRef(source)) {
+      getter = () => source.value;
+      forceTrigger = isShallow(source);
+    } else if (isReactive(source)) {
+      getter = () => reactiveGetter(source, deep);
+      forceTrigger = true;
+    } else if (isArray(source)) {
+      isMultiSource = true;
+      forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
+      getter = () => source.map((s) => {
+        if (isRef(s)) {
+          return s.value;
+        } else if (isReactive(s)) {
+          return reactiveGetter(s, deep);
+        } else if (isFunction(s)) {
+          return call ? call(s, 2) : s();
+        } else {
+          warnInvalidSource(s, onWarn);
+        }
+      });
+    } else if (isFunction(source)) {
+      if (cb) {
+        getter = call ? () => call(source, 2) : source;
       } else {
-        warnInvalidSource(s);
-      }
-    });
-  } else if (isFunction(source)) {
-    if (cb) {
-      getter = call ? () => call(source, 2) : source;
-    } else {
-      getter = () => {
-        if (cleanup) {
-          pauseTracking();
+        getter = () => {
+          if (this.cleanupsLength) {
+            const prevSub = setActiveSub();
+            try {
+              cleanup(this);
+            } finally {
+              setActiveSub(prevSub);
+            }
+          }
+          const currentEffect = activeWatcher;
+          activeWatcher = this;
           try {
-            cleanup();
+            return call ? call(source, 3, [
+              this.boundCleanup
+            ]) : source(this.boundCleanup);
           } finally {
-            resetTracking();
+            activeWatcher = currentEffect;
           }
-        }
-        const currentEffect = activeWatcher;
-        activeWatcher = effect;
-        try {
-          return call ? call(source, 3, [boundCleanup]) : source(boundCleanup);
-        } finally {
-          activeWatcher = currentEffect;
-        }
+        };
+      }
+    } else {
+      getter = NOOP;
+      warnInvalidSource(source, onWarn);
+    }
+    if (cb && deep) {
+      const baseGetter = getter;
+      const depth = deep === true ? Infinity : deep;
+      getter = () => traverse(baseGetter(), depth);
+    }
+    super(getter);
+    this.cb = cb;
+    this.options = options;
+    this.boundCleanup = (fn) => onWatcherCleanup(fn, false, this);
+    this.forceTrigger = forceTrigger;
+    this.isMultiSource = isMultiSource;
+    if (once && cb) {
+      const _cb = cb;
+      cb = (...args) => {
+        _cb(...args);
+        this.stop();
       };
     }
-  } else {
-    getter = NOOP;
-    warnInvalidSource(source);
-  }
-  if (cb && deep) {
-    const baseGetter = getter;
-    const depth = deep === true ? Infinity : deep;
-    getter = () => traverse(baseGetter(), depth);
-  }
-  const scope = getCurrentScope();
-  const watchHandle = () => {
-    effect.stop();
-    if (scope && scope.active) {
-      remove(scope.effects, effect);
+    this.cb = cb;
+    this.oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
+    {
+      this.onTrack = options.onTrack;
+      this.onTrigger = options.onTrigger;
     }
-  };
-  if (once && cb) {
-    const _cb = cb;
-    cb = (...args) => {
-      _cb(...args);
-      watchHandle();
-    };
   }
-  let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
-  const job = (immediateFirstRun) => {
-    if (!(effect.flags & 1) || !effect.dirty && !immediateFirstRun) {
+  run(initialRun = false) {
+    const oldValue = this.oldValue;
+    const newValue = this.oldValue = super.run();
+    if (!this.cb) {
       return;
     }
-    if (cb) {
-      const newValue = effect.run();
-      if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue))) {
-        if (cleanup) {
-          cleanup();
-        }
-        const currentWatcher = activeWatcher;
-        activeWatcher = effect;
-        try {
-          const args = [
-            newValue,
-            // pass undefined as the old value when it's changed for the first time
-            oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
-            boundCleanup
-          ];
-          oldValue = newValue;
-          call ? call(cb, 3, args) : (
-            // @ts-expect-error
-            cb(...args)
-          );
-        } finally {
-          activeWatcher = currentWatcher;
-        }
-      }
-    } else {
-      effect.run();
+    const { immediate, deep, call } = this.options;
+    if (initialRun && !immediate) {
+      return;
     }
-  };
-  if (augmentJob) {
-    augmentJob(job);
-  }
-  effect = new ReactiveEffect(getter);
-  effect.scheduler = scheduler ? () => scheduler(job, false) : job;
-  boundCleanup = (fn) => onWatcherCleanup(fn, false, effect);
-  cleanup = effect.onStop = () => {
-    const cleanups = cleanupMap.get(effect);
-    if (cleanups) {
-      if (call) {
-        call(cleanups, 4);
-      } else {
-        for (const cleanup2 of cleanups) cleanup2();
+    if (deep || this.forceTrigger || (this.isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue))) {
+      cleanup(this);
+      const currentWatcher = activeWatcher;
+      activeWatcher = this;
+      try {
+        const args = [
+          newValue,
+          // pass undefined as the old value when it's changed for the first time
+          oldValue === INITIAL_WATCHER_VALUE ? void 0 : this.isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
+          this.boundCleanup
+        ];
+        call ? call(this.cb, 3, args) : (
+          // @ts-expect-error
+          this.cb(...args)
+        );
+      } finally {
+        activeWatcher = currentWatcher;
       }
-      cleanupMap.delete(effect);
-    }
-  };
-  {
-    effect.onTrack = options.onTrack;
-    effect.onTrigger = options.onTrigger;
-  }
-  if (cb) {
-    if (immediate) {
-      job(true);
-    } else {
-      oldValue = effect.run();
     }
-  } else if (scheduler) {
-    scheduler(job.bind(null, true), true);
-  } else {
-    effect.run();
   }
-  watchHandle.pause = effect.pause.bind(effect);
-  watchHandle.resume = effect.resume.bind(effect);
-  watchHandle.stop = watchHandle;
-  return watchHandle;
+}
+function reactiveGetter(source, deep) {
+  if (deep) return source;
+  if (isShallow(source) || deep === false || deep === 0)
+    return traverse(source, 1);
+  return traverse(source);
+}
+function warnInvalidSource(s, onWarn) {
+  (onWarn || warn$2)(
+    `Invalid watch source: `,
+    s,
+    `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
+  );
 }
 function traverse(value, depth = Infinity, seen) {
   if (depth <= 0 || !isObject(value) || value["__v_skip"]) {
@@ -1996,8 +2068,8 @@ function traverse(value, depth = Infinity, seen) {
 }
 
 const stack = [];
-function pushWarningContext$1(vnode) {
-  stack.push(vnode);
+function pushWarningContext$1(ctx) {
+  stack.push(ctx);
 }
 function popWarningContext$1() {
   stack.pop();
@@ -2006,8 +2078,9 @@ let isWarning = false;
 function warn$1(msg, ...args) {
   if (isWarning) return;
   isWarning = true;
-  pauseTracking();
-  const instance = stack.length ? stack[stack.length - 1].component : null;
+  const prevSub = setActiveSub();
+  const entry = stack.length ? stack[stack.length - 1] : null;
+  const instance = isVNode$2(entry) ? entry.component : entry;
   const appWarnHandler = instance && instance.appContext.config.warnHandler;
   const trace = getComponentTrace();
   if (appWarnHandler) {
@@ -2021,9 +2094,9 @@ function warn$1(msg, ...args) {
           var _a, _b;
           return (_b = (_a = a.toString) == null ? void 0 : _a.call(a)) != null ? _b : JSON.stringify(a);
         }).join(""),
-        instance && instance.proxy,
+        instance && instance.proxy || instance,
         trace.map(
-          ({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`
+          ({ ctx }) => `at <${formatComponentName(instance, ctx.type)}>`
         ).join("\n"),
         trace
       ]
@@ -2037,27 +2110,31 @@ function warn$1(msg, ...args) {
     }
     console.warn(...warnArgs);
   }
-  resetTracking();
+  setActiveSub(prevSub);
   isWarning = false;
 }
 function getComponentTrace() {
-  let currentVNode = stack[stack.length - 1];
-  if (!currentVNode) {
+  let currentCtx = stack[stack.length - 1];
+  if (!currentCtx) {
     return [];
   }
   const normalizedStack = [];
-  while (currentVNode) {
+  while (currentCtx) {
     const last = normalizedStack[0];
-    if (last && last.vnode === currentVNode) {
+    if (last && last.ctx === currentCtx) {
       last.recurseCount++;
     } else {
       normalizedStack.push({
-        vnode: currentVNode,
+        ctx: currentCtx,
         recurseCount: 0
       });
     }
-    const parentInstance = currentVNode.component && currentVNode.component.parent;
-    currentVNode = parentInstance && parentInstance.vnode;
+    if (isVNode$2(currentCtx)) {
+      const parent = currentCtx.component && currentCtx.component.parent;
+      currentCtx = parent && parent.vnode || parent;
+    } else {
+      currentCtx = currentCtx.parent;
+    }
   }
   return normalizedStack;
 }
@@ -2069,16 +2146,13 @@ function formatTrace(trace) {
   });
   return logs;
 }
-function formatTraceEntry({ vnode, recurseCount }) {
+function formatTraceEntry({ ctx, recurseCount }) {
   const postfix = recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``;
-  const isRoot = vnode.component ? vnode.component.parent == null : false;
-  const open = ` at <${formatComponentName(
-    vnode.component,
-    vnode.type,
-    isRoot
-  )}`;
+  const instance = isVNode$2(ctx) ? ctx.component : ctx;
+  const isRoot = instance ? instance.parent == null : false;
+  const open = ` at <${formatComponentName(instance, ctx.type, isRoot)}`;
   const close = `>` + postfix;
-  return vnode.props ? [open, ...formatProps(vnode.props), close] : [open + close];
+  return ctx.props ? [open, ...formatProps(ctx.props), close] : [open + close];
 }
 function formatProps(props) {
   const res = [];
@@ -2171,11 +2245,10 @@ function callWithAsyncErrorHandling(fn, instance, type, args) {
   }
 }
 function handleError(err, instance, type, throwInDev = true) {
-  const contextVNode = instance ? instance.vnode : null;
   const { errorHandler, throwUnhandledErrorInProduction } = instance && instance.appContext.config || EMPTY_OBJ;
   if (instance) {
     let cur = instance.parent;
-    const exposedInstance = instance.proxy;
+    const exposedInstance = instance.proxy || instance;
     const errorInfo = ErrorTypeStrings[type] ;
     while (cur) {
       const errorCapturedHooks = cur.ec;
@@ -2189,26 +2262,26 @@ function handleError(err, instance, type, throwInDev = true) {
       cur = cur.parent;
     }
     if (errorHandler) {
-      pauseTracking();
+      const prevSub = setActiveSub();
       callWithErrorHandling(errorHandler, null, 10, [
         err,
         exposedInstance,
         errorInfo
       ]);
-      resetTracking();
+      setActiveSub(prevSub);
       return;
     }
   }
-  logError(err, type, contextVNode, throwInDev, throwUnhandledErrorInProduction);
+  logError(err, type, instance, throwInDev, throwUnhandledErrorInProduction);
 }
-function logError(err, type, contextVNode, throwInDev = true, throwInProd = false) {
+function logError(err, type, instance, throwInDev = true, throwInProd = false) {
   {
     const info = ErrorTypeStrings[type];
-    if (contextVNode) {
-      pushWarningContext$1(contextVNode);
+    if (instance) {
+      pushWarningContext$1(instance);
     }
     warn$1(`Unhandled error${info ? ` during execution of ${info}` : ``}`);
-    if (contextVNode) {
+    if (instance) {
       popWarningContext$1();
     }
     if (throwInDev) {
@@ -2219,26 +2292,23 @@ function logError(err, type, contextVNode, throwInDev = true, throwInProd = fals
   }
 }
 
-const queue = [];
-let flushIndex = -1;
-const pendingPostFlushCbs = [];
-let activePostFlushCbs = null;
+const jobs = [];
+let postJobs = [];
+let activePostJobs = null;
+let currentFlushPromise = null;
+let jobsLength = 0;
+let flushIndex = 0;
 let postFlushIndex = 0;
 const resolvedPromise = /* @__PURE__ */ Promise.resolve();
-let currentFlushPromise = null;
 const RECURSION_LIMIT = 100;
 function nextTick(fn) {
   const p = currentFlushPromise || resolvedPromise;
   return fn ? p.then(this ? fn.bind(this) : fn) : p;
 }
-function findInsertionIndex(id) {
-  let start = flushIndex + 1;
-  let end = queue.length;
+function findInsertionIndex(order, queue, start, end) {
   while (start < end) {
     const middle = start + end >>> 1;
-    const middleJob = queue[middle];
-    const middleJobId = getId(middleJob);
-    if (middleJobId < id || middleJobId === id && middleJob.flags & 2) {
+    if (queue[middle].order <= order) {
       start = middle + 1;
     } else {
       end = middle;
@@ -2246,130 +2316,168 @@ function findInsertionIndex(id) {
   }
   return start;
 }
-function queueJob(job) {
-  if (!(job.flags & 1)) {
-    const jobId = getId(job);
-    const lastJob = queue[queue.length - 1];
-    if (!lastJob || // fast path when the job id is larger than the tail
-    !(job.flags & 2) && jobId >= getId(lastJob)) {
-      queue.push(job);
+function queueJob(job, id, isPre = false) {
+  if (queueJobWorker(
+    job,
+    id === void 0 ? isPre ? -2 : Infinity : isPre ? id * 2 : id * 2 + 1,
+    jobs,
+    jobsLength,
+    flushIndex
+  )) {
+    jobsLength++;
+    queueFlush();
+  }
+}
+function queueJobWorker(job, order, queue, length, flushIndex2) {
+  const flags = job.flags;
+  if (!(flags & 1)) {
+    job.flags = flags | 1;
+    job.order = order;
+    if (flushIndex2 === length || // fast path when the job id is larger than the tail
+    order >= queue[length - 1].order) {
+      queue[length] = job;
     } else {
-      queue.splice(findInsertionIndex(jobId), 0, job);
+      queue.splice(findInsertionIndex(order, queue, flushIndex2, length), 0, job);
     }
-    job.flags |= 1;
-    queueFlush();
+    return true;
   }
+  return false;
 }
+const doFlushJobs = () => {
+  try {
+    flushJobs();
+  } catch (e) {
+    currentFlushPromise = null;
+    throw e;
+  }
+};
 function queueFlush() {
   if (!currentFlushPromise) {
-    currentFlushPromise = resolvedPromise.then(flushJobs);
+    currentFlushPromise = resolvedPromise.then(doFlushJobs);
   }
 }
-function queuePostFlushCb(cb) {
-  if (!isArray(cb)) {
-    if (activePostFlushCbs && cb.id === -1) {
-      activePostFlushCbs.splice(postFlushIndex + 1, 0, cb);
-    } else if (!(cb.flags & 1)) {
-      pendingPostFlushCbs.push(cb);
-      cb.flags |= 1;
+function queuePostFlushCb(jobs2, id = Infinity) {
+  if (!isArray(jobs2)) {
+    if (activePostJobs && id === -1) {
+      activePostJobs.splice(postFlushIndex, 0, jobs2);
+    } else {
+      queueJobWorker(jobs2, id, postJobs, postJobs.length, 0);
     }
   } else {
-    pendingPostFlushCbs.push(...cb);
+    for (const job of jobs2) {
+      queueJobWorker(job, id, postJobs, postJobs.length, 0);
+    }
   }
   queueFlush();
 }
-function flushPreFlushCbs(instance, seen, i = flushIndex + 1) {
+function flushPreFlushCbs(instance, seen) {
   {
     seen = seen || /* @__PURE__ */ new Map();
   }
-  for (; i < queue.length; i++) {
-    const cb = queue[i];
-    if (cb && cb.flags & 2) {
-      if (instance && cb.id !== instance.uid) {
-        continue;
-      }
-      if (checkRecursiveUpdates(seen, cb)) {
-        continue;
-      }
-      queue.splice(i, 1);
-      i--;
-      if (cb.flags & 4) {
-        cb.flags &= -2;
-      }
-      cb();
-      if (!(cb.flags & 4)) {
-        cb.flags &= -2;
-      }
+  for (let i = flushIndex; i < jobsLength; i++) {
+    const cb = jobs[i];
+    if (cb.order & 1 || cb.order === Infinity) {
+      continue;
+    }
+    if (instance && cb.order !== instance.uid * 2) {
+      continue;
+    }
+    if (checkRecursiveUpdates(seen, cb)) {
+      continue;
+    }
+    jobs.splice(i, 1);
+    i--;
+    jobsLength--;
+    if (cb.flags & 2) {
+      cb.flags &= -2;
+    }
+    cb();
+    if (!(cb.flags & 2)) {
+      cb.flags &= -2;
     }
   }
 }
 function flushPostFlushCbs(seen) {
-  if (pendingPostFlushCbs.length) {
-    const deduped = [...new Set(pendingPostFlushCbs)].sort(
-      (a, b) => getId(a) - getId(b)
-    );
-    pendingPostFlushCbs.length = 0;
-    if (activePostFlushCbs) {
-      activePostFlushCbs.push(...deduped);
+  if (postJobs.length) {
+    if (activePostJobs) {
+      activePostJobs.push(...postJobs);
+      postJobs.length = 0;
       return;
     }
-    activePostFlushCbs = deduped;
+    activePostJobs = postJobs;
+    postJobs = [];
     {
       seen = seen || /* @__PURE__ */ new Map();
     }
-    for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) {
-      const cb = activePostFlushCbs[postFlushIndex];
+    while (postFlushIndex < activePostJobs.length) {
+      const cb = activePostJobs[postFlushIndex++];
       if (checkRecursiveUpdates(seen, cb)) {
         continue;
       }
-      if (cb.flags & 4) {
+      if (cb.flags & 2) {
         cb.flags &= -2;
       }
-      if (!(cb.flags & 8)) cb();
-      cb.flags &= -2;
+      if (!(cb.flags & 4)) {
+        try {
+          cb();
+        } finally {
+          cb.flags &= -2;
+        }
+      }
     }
-    activePostFlushCbs = null;
+    activePostJobs = null;
     postFlushIndex = 0;
   }
 }
-const getId = (job) => job.id == null ? job.flags & 2 ? -1 : Infinity : job.id;
+let isFlushing = false;
+function flushOnAppMount() {
+  if (!isFlushing) {
+    isFlushing = true;
+    flushPreFlushCbs();
+    flushPostFlushCbs();
+    isFlushing = false;
+  }
+}
 function flushJobs(seen) {
   {
-    seen = seen || /* @__PURE__ */ new Map();
+    seen || (seen = /* @__PURE__ */ new Map());
   }
-  const check = (job) => checkRecursiveUpdates(seen, job) ;
   try {
-    for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
-      const job = queue[flushIndex];
-      if (job && !(job.flags & 8)) {
-        if (check(job)) {
+    while (flushIndex < jobsLength) {
+      const job = jobs[flushIndex];
+      jobs[flushIndex++] = void 0;
+      if (!(job.flags & 4)) {
+        if (checkRecursiveUpdates(seen, job)) {
           continue;
         }
-        if (job.flags & 4) {
+        if (job.flags & 2) {
           job.flags &= ~1;
         }
-        callWithErrorHandling(
-          job,
-          job.i,
-          job.i ? 15 : 14
-        );
-        if (!(job.flags & 4)) {
-          job.flags &= ~1;
+        try {
+          job();
+        } catch (err) {
+          handleError(
+            err,
+            job.i,
+            job.i ? 15 : 14
+          );
+        } finally {
+          if (!(job.flags & 2)) {
+            job.flags &= ~1;
+          }
         }
       }
     }
   } finally {
-    for (; flushIndex < queue.length; flushIndex++) {
-      const job = queue[flushIndex];
-      if (job) {
-        job.flags &= -2;
-      }
+    while (flushIndex < jobsLength) {
+      jobs[flushIndex].flags &= -2;
+      jobs[flushIndex++] = void 0;
     }
-    flushIndex = -1;
-    queue.length = 0;
+    flushIndex = 0;
+    jobsLength = 0;
     flushPostFlushCbs(seen);
     currentFlushPromise = null;
-    if (queue.length || pendingPostFlushCbs.length) {
+    if (jobsLength || postJobs.length) {
       flushJobs(seen);
     }
   }
@@ -2436,10 +2544,17 @@ function rerender(id, newRender) {
       instance.render = newRender;
       normalizeClassComponent(instance.type).render = newRender;
     }
-    instance.renderCache = [];
     isHmrUpdating = true;
-    instance.update();
-    isHmrUpdating = false;
+    if (instance.vapor) {
+      instance.hmrRerender();
+    } else {
+      const i = instance;
+      i.renderCache = [];
+      i.effect.run();
+    }
+    nextTick(() => {
+      isHmrUpdating = false;
+    });
   });
 }
 function reload(id, newComp) {
@@ -2448,42 +2563,54 @@ function reload(id, newComp) {
   newComp = normalizeClassComponent(newComp);
   updateComponentDef(record.initialDef, newComp);
   const instances = [...record.instances];
-  for (let i = 0; i < instances.length; i++) {
-    const instance = instances[i];
-    const oldComp = normalizeClassComponent(instance.type);
-    let dirtyInstances = hmrDirtyComponents.get(oldComp);
-    if (!dirtyInstances) {
-      if (oldComp !== record.initialDef) {
-        updateComponentDef(oldComp, newComp);
-      }
-      hmrDirtyComponents.set(oldComp, dirtyInstances = /* @__PURE__ */ new Set());
-    }
-    dirtyInstances.add(instance);
-    instance.appContext.propsCache.delete(instance.type);
-    instance.appContext.emitsCache.delete(instance.type);
-    instance.appContext.optionsCache.delete(instance.type);
-    if (instance.ceReload) {
+  if (newComp.__vapor) {
+    for (const instance of instances) {
+      instance.hmrReload(newComp);
+    }
+  } else {
+    for (const instance of instances) {
+      const oldComp = normalizeClassComponent(instance.type);
+      let dirtyInstances = hmrDirtyComponents.get(oldComp);
+      if (!dirtyInstances) {
+        if (oldComp !== record.initialDef) {
+          updateComponentDef(oldComp, newComp);
+        }
+        hmrDirtyComponents.set(oldComp, dirtyInstances = /* @__PURE__ */ new Set());
+      }
       dirtyInstances.add(instance);
-      instance.ceReload(newComp.styles);
-      dirtyInstances.delete(instance);
-    } else if (instance.parent) {
-      queueJob(() => {
-        isHmrUpdating = true;
-        instance.parent.update();
-        isHmrUpdating = false;
+      instance.appContext.propsCache.delete(instance.type);
+      instance.appContext.emitsCache.delete(instance.type);
+      instance.appContext.optionsCache.delete(instance.type);
+      if (instance.ceReload) {
+        dirtyInstances.add(instance);
+        instance.ceReload(newComp.styles);
         dirtyInstances.delete(instance);
-      });
-    } else if (instance.appContext.reload) {
-      instance.appContext.reload();
-    } else if (typeof window !== "undefined") {
-      window.location.reload();
-    } else {
-      console.warn(
-        "[HMR] Root or manually mounted instance modified. Full reload required."
-      );
-    }
-    if (instance.root.ce && instance !== instance.root) {
-      instance.root.ce._removeChildStyle(oldComp);
+      } else if (instance.parent) {
+        queueJob(() => {
+          isHmrUpdating = true;
+          const parent = instance.parent;
+          if (parent.vapor) {
+            parent.hmrRerender();
+          } else {
+            parent.effect.run();
+          }
+          nextTick(() => {
+            isHmrUpdating = false;
+          });
+          dirtyInstances.delete(instance);
+        });
+      } else if (instance.appContext.reload) {
+        instance.appContext.reload();
+      } else if (typeof window !== "undefined") {
+        window.location.reload();
+      } else {
+        console.warn(
+          "[HMR] Root or manually mounted instance modified. Full reload required."
+        );
+      }
+      if (instance.root.ce && instance !== instance.root) {
+        instance.root.ce._removeChildStyle(oldComp);
+      }
     }
   }
   queuePostFlushCb(() => {
@@ -2658,14 +2785,14 @@ function invokeDirectiveHook(vnode, prevVNode, instance, name) {
     }
     let hook = binding.dir[name];
     if (hook) {
-      pauseTracking();
+      const prevSub = setActiveSub();
       callWithAsyncErrorHandling(hook, instance, 8, [
         vnode.el,
         binding,
         vnode,
         prevVNode
       ]);
-      resetTracking();
+      setActiveSub(prevSub);
     }
   }
 }
@@ -2785,8 +2912,7 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
         }
       };
       if (value) {
-        doSet.id = -1;
-        queuePostRenderEffect(doSet, parentSuspense);
+        queuePostRenderEffect(doSet, -1, parentSuspense);
       } else {
         doSet();
       }
@@ -2805,7 +2931,7 @@ function onActivated(hook, target) {
 function onDeactivated(hook, target) {
   registerKeepAliveHook(hook, "da", target);
 }
-function registerKeepAliveHook(hook, type, target = currentInstance) {
+function registerKeepAliveHook(hook, type, target = getCurrentInstance()) {
   const wrappedHook = hook.__wdc || (hook.__wdc = () => {
     let current = target;
     while (current) {
@@ -2819,7 +2945,7 @@ function registerKeepAliveHook(hook, type, target = currentInstance) {
   injectHook(type, wrappedHook, target);
   if (target) {
     let current = target.parent;
-    while (current && current.parent) {
+    while (current && current.parent && current.parent.vnode) {
       if (isKeepAlive(current.parent.vnode)) {
         injectToKeepAliveRoot(wrappedHook, type, target, current);
       }
@@ -2844,12 +2970,14 @@ function injectHook(type, hook, target = currentInstance, prepend = false) {
   if (target) {
     const hooks = target[type] || (target[type] = []);
     const wrappedHook = hook.__weh || (hook.__weh = (...args) => {
-      pauseTracking();
-      const reset = setCurrentInstance(target);
-      const res = callWithAsyncErrorHandling(hook, target, type, args);
-      reset();
-      resetTracking();
-      return res;
+      const prevSub = setActiveSub();
+      const prev = setCurrentInstance(target);
+      try {
+        return callWithAsyncErrorHandling(hook, target, type, args);
+      } finally {
+        setCurrentInstance(...prev);
+        setActiveSub(prevSub);
+      }
     });
     if (prepend) {
       hooks.unshift(wrappedHook);
@@ -2901,8 +3029,9 @@ function ensureValidVNode$1(vnodes) {
 }
 
 const getPublicInstance = (i) => {
-  if (!i) return null;
-  if (isStatefulComponent(i)) return getComponentPublicInstance(i);
+  if (!i || i.vapor) return null;
+  if (isStatefulComponent(i))
+    return getComponentPublicInstance(i);
   return getPublicInstance(i.parent);
 };
 const publicPropertiesMap = (
@@ -3571,7 +3700,7 @@ function createAppContext() {
   };
 }
 let uid$1 = 0;
-function createAppAPI(render, hydrate) {
+function createAppAPI(mount, unmount, getPublicInstance, render) {
   return function createApp(rootComponent, rootProps = null) {
     if (!isFunction(rootComponent)) {
       rootComponent = extend({}, rootComponent);
@@ -3664,31 +3793,15 @@ function createAppAPI(render, hydrate) {
  If you want to mount another app on the same host container, you need to unmount the previous app by calling \`app.unmount()\` first.`
             );
           }
-          const vnode = app._ceVNode || createVNode(rootComponent, rootProps);
-          vnode.appContext = context;
-          if (namespace === true) {
-            namespace = "svg";
-          } else if (namespace === false) {
-            namespace = void 0;
-          }
-          {
-            context.reload = () => {
-              const cloned = cloneVNode(vnode);
-              cloned.el = null;
-              render(cloned, rootContainer, namespace);
-            };
-          }
+          const instance = mount(app, rootContainer, isHydrate, namespace);
           {
-            render(vnode, rootContainer, namespace);
+            app._instance = instance;
+            devtoolsInitApp(app, version);
           }
           isMounted = true;
           app._container = rootContainer;
           rootContainer.__vue_app__ = app;
-          {
-            app._instance = vnode.component;
-            devtoolsInitApp(app, version);
-          }
-          return getComponentPublicInstance(vnode.component);
+          return getPublicInstance(instance);
         } else {
           warn$1(
             `App has already been mounted.
@@ -3711,7 +3824,7 @@ If you want to remount the same app, move your app creation logic into a factory
             app._instance,
             16
           );
-          render(null, app._container);
+          unmount(app);
           {
             app._instance = null;
             devtoolsUnmountApp(app);
@@ -3752,6 +3865,7 @@ If you want to remount the same app, move your app creation logic into a factory
 let currentApp = null;
 
 function provide(key, value) {
+  const currentInstance = getCurrentGenericInstance();
   if (!currentInstance) {
     {
       warn$1(`provide() can only be used inside setup().`);
@@ -3766,9 +3880,9 @@ function provide(key, value) {
   }
 }
 function inject(key, defaultValue, treatDefaultAsFactory = false) {
-  const instance = currentInstance || currentRenderingInstance;
+  const instance = getCurrentGenericInstance();
   if (instance || currentApp) {
-    let provides = currentApp ? currentApp._context.provides : instance ? instance.parent == null || instance.ce ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : void 0;
+    let provides = currentApp ? currentApp._context.provides : instance ? instance.parent == null || instance.ce ? instance.appContext && instance.appContext.provides : instance.parent.provides : void 0;
     if (provides && key in provides) {
       return provides[key];
     } else if (arguments.length > 1) {
@@ -3786,7 +3900,7 @@ const createInternalObject = () => Object.create(internalObjectProto);
 const isInternalObject = (obj) => Object.getPrototypeOf(obj) === internalObjectProto;
 
 function initProps(instance, rawProps, isStateful, isSSR = false) {
-  const props = {};
+  const props = instance.props = {};
   const attrs = createInternalObject();
   instance.propsDefaults = /* @__PURE__ */ Object.create(null);
   setFullProps(instance, rawProps, props, attrs);
@@ -3796,7 +3910,7 @@ function initProps(instance, rawProps, isStateful, isSSR = false) {
     }
   }
   {
-    validateProps(rawProps || {}, props, instance);
+    validateProps(rawProps || {}, props, instance.propsOptions[0]);
   }
   if (isStateful) {
     instance.props = isSSR ? props : shallowReactive(props);
@@ -3848,11 +3962,10 @@ function updateProps(instance, rawProps, rawPrevProps, optimized) {
             const camelizedKey = camelize(key);
             props[camelizedKey] = resolvePropValue(
               options,
-              rawCurrentProps,
               camelizedKey,
               value,
               instance,
-              false
+              baseResolveDefault
             );
           }
         } else {
@@ -3879,10 +3992,10 @@ function updateProps(instance, rawProps, rawPrevProps, optimized) {
           rawPrevProps[kebabKey] !== void 0)) {
             props[key] = resolvePropValue(
               options,
-              rawCurrentProps,
               key,
               void 0,
               instance,
+              baseResolveDefault,
               true
             );
           }
@@ -3904,7 +4017,7 @@ function updateProps(instance, rawProps, rawPrevProps, optimized) {
     trigger(instance.attrs, "set", "");
   }
   {
-    validateProps(rawProps || {}, props, instance);
+    validateProps(rawProps || {}, props, instance.propsOptions[0]);
   }
 }
 function setFullProps(instance, rawProps, props, attrs) {
@@ -3933,39 +4046,37 @@ function setFullProps(instance, rawProps, props, attrs) {
     }
   }
   if (needCastKeys) {
-    const rawCurrentProps = toRaw(props);
     const castValues = rawCastValues || EMPTY_OBJ;
     for (let i = 0; i < needCastKeys.length; i++) {
       const key = needCastKeys[i];
       props[key] = resolvePropValue(
         options,
-        rawCurrentProps,
         key,
         castValues[key],
         instance,
+        baseResolveDefault,
         !hasOwn(castValues, key)
       );
     }
   }
   return hasAttrsChanged;
 }
-function resolvePropValue(options, props, key, value, instance, isAbsent) {
+function resolvePropValue(options, key, value, instance, resolveDefault, isAbsent = false) {
   const opt = options[key];
   if (opt != null) {
     const hasDefault = hasOwn(opt, "default");
     if (hasDefault && value === void 0) {
       const defaultValue = opt.default;
       if (opt.type !== Function && !opt.skipFactory && isFunction(defaultValue)) {
-        const { propsDefaults } = instance;
-        if (key in propsDefaults) {
-          value = propsDefaults[key];
+        const cachedDefaults = instance.propsDefaults || (instance.propsDefaults = {});
+        if (hasOwn(cachedDefaults, key)) {
+          value = cachedDefaults[key];
         } else {
-          const reset = setCurrentInstance(instance);
-          value = propsDefaults[key] = defaultValue.call(
-            null,
-            props
+          value = cachedDefaults[key] = resolveDefault(
+            defaultValue,
+            instance,
+            key
           );
-          reset();
         }
       } else {
         value = defaultValue;
@@ -3984,6 +4095,17 @@ function resolvePropValue(options, props, key, value, instance, isAbsent) {
   }
   return value;
 }
+function baseResolveDefault(factory, instance, key) {
+  let value;
+  const prev = setCurrentInstance(instance);
+  const props = toRaw(instance.props);
+  value = factory.call(
+    null,
+    props
+  );
+  setCurrentInstance(...prev);
+  return value;
+}
 const mixinPropsCache = /* @__PURE__ */ new WeakMap();
 function normalizePropsOptions(comp, appContext, asMixin = false) {
   const cache = asMixin ? mixinPropsCache : appContext.propsCache;
@@ -4018,6 +4140,14 @@ function normalizePropsOptions(comp, appContext, asMixin = false) {
     }
     return EMPTY_ARR;
   }
+  baseNormalizePropsOptions(raw, normalized, needCastKeys);
+  const res = [normalized, needCastKeys];
+  if (isObject(comp)) {
+    cache.set(comp, res);
+  }
+  return res;
+}
+function baseNormalizePropsOptions(raw, normalized, needCastKeys) {
   if (isArray(raw)) {
     for (let i = 0; i < raw.length; i++) {
       if (!isString(raw[i])) {
@@ -4062,11 +4192,6 @@ function normalizePropsOptions(comp, appContext, asMixin = false) {
       }
     }
   }
-  const res = [normalized, needCastKeys];
-  if (isObject(comp)) {
-    cache.set(comp, res);
-  }
-  return res;
 }
 function validatePropName(key) {
   if (key[0] !== "$" && !isReservedProp(key)) {
@@ -4088,26 +4213,26 @@ function getType(ctor) {
   }
   return "";
 }
-function validateProps(rawProps, props, instance) {
-  const resolvedValues = toRaw(props);
-  const options = instance.propsOptions[0];
+function validateProps(rawProps, resolvedProps, options) {
+  resolvedProps = toRaw(resolvedProps);
   const camelizePropsKey = Object.keys(rawProps).map((key) => camelize(key));
   for (const key in options) {
-    let opt = options[key];
-    if (opt == null) continue;
-    validateProp(
-      key,
-      resolvedValues[key],
-      opt,
-      shallowReadonly(resolvedValues) ,
-      !camelizePropsKey.includes(key)
-    );
+    const opt = options[key];
+    if (opt != null) {
+      validateProp(
+        key,
+        resolvedProps[key],
+        opt,
+        resolvedProps,
+        !camelizePropsKey.includes(key)
+      );
+    }
   }
 }
-function validateProp(name, value, prop, props, isAbsent) {
-  const { type, required, validator, skipCheck } = prop;
+function validateProp(key, value, propOptions, resolvedProps, isAbsent) {
+  const { type, required, validator, skipCheck } = propOptions;
   if (required && isAbsent) {
-    warn$1('Missing required prop: "' + name + '"');
+    warn$1('Missing required prop: "' + key + '"');
     return;
   }
   if (value == null && !required) {
@@ -4123,12 +4248,12 @@ function validateProp(name, value, prop, props, isAbsent) {
       isValid = valid;
     }
     if (!isValid) {
-      warn$1(getInvalidTypeMessage(name, value, expectedTypes));
+      warn$1(getInvalidTypeMessage(key, value, expectedTypes));
       return;
     }
   }
-  if (validator && !validator(value, props)) {
-    warn$1('Invalid prop: custom validator check failed for prop "' + name + '".');
+  if (validator && !validator(value, shallowReadonly(resolvedProps) )) {
+    warn$1('Invalid prop: custom validator check failed for prop "' + key + '".');
   }
 }
 const isSimpleType = /* @__PURE__ */ makeMap(
@@ -4199,7 +4324,7 @@ const normalizeSlot = (key, rawSlot, ctx) => {
     return rawSlot;
   }
   const normalized = withCtx((...args) => {
-    if (currentInstance && !(ctx === null && currentRenderingInstance) && !(ctx && ctx.root !== currentInstance.root)) {
+    if (currentInstance && !currentInstance.vapor && !(ctx === null && currentRenderingInstance) && !(ctx && ctx.root !== currentInstance.root)) {
       warn$1(
         `Slot "${key}" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.`
       );
@@ -4296,12 +4421,15 @@ const updateSlots = (instance, children, optimized) => {
 
 let supported;
 let perf;
+let cachedNow$1 = 0;
+const p$1 = /* @__PURE__ */ Promise.resolve();
+const getNow$1 = () => cachedNow$1 || (p$1.then(() => cachedNow$1 = 0), cachedNow$1 = isSupported() ? perf.now() : Date.now());
 function startMeasure(instance, type) {
   if (instance.appContext.config.performance && isSupported()) {
     perf.mark(`vue-${type}-${instance.uid}`);
   }
   {
-    devtoolsPerfStart(instance, type, isSupported() ? perf.now() : Date.now());
+    devtoolsPerfStart(instance, type, getNow$1());
   }
 }
 function endMeasure(instance, type) {
@@ -4318,7 +4446,7 @@ function endMeasure(instance, type) {
     perf.clearMarks(endTag);
   }
   {
-    devtoolsPerfEnd(instance, type, isSupported() ? perf.now() : Date.now());
+    devtoolsPerfEnd(instance, type, getNow$1());
   }
 }
 function isSupported() {
@@ -4399,6 +4527,9 @@ function baseCreateRenderer(options, createHydrationFns) {
           optimized
         );
         break;
+      case VaporSlot:
+        getVaporInterface(parentComponent, n2).slot(n1, n2, container, anchor);
+        break;
       default:
         if (shapeFlag & 1) {
           processElement(
@@ -4611,11 +4742,15 @@ function baseCreateRenderer(options, createHydrationFns) {
     }
     hostInsert(el, container, anchor);
     if ((vnodeHook = props && props.onVnodeMounted) || needCallTransitionHooks || dirs) {
-      queuePostRenderEffect(() => {
-        vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
-        needCallTransitionHooks && transition.enter(el);
-        dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
-      }, parentSuspense);
+      queuePostRenderEffect(
+        () => {
+          vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
+          needCallTransitionHooks && transition.enter(el);
+          dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
+        },
+        void 0,
+        parentSuspense
+      );
     }
   };
   const setScopeId = (el, vnode, scopeId, slotScopeIds, parentComponent) => {
@@ -4627,8 +4762,8 @@ function baseCreateRenderer(options, createHydrationFns) {
         hostSetScopeId(el, slotScopeIds[i]);
       }
     }
-    if (parentComponent) {
-      let subTree = parentComponent.subTree;
+    let subTree = parentComponent && parentComponent.subTree;
+    if (subTree) {
       if (subTree.patchFlag > 0 && subTree.patchFlag & 2048) {
         subTree = filterSingleRoot(subTree.children) || subTree;
       }
@@ -4745,10 +4880,14 @@ function baseCreateRenderer(options, createHydrationFns) {
       patchProps(el, oldProps, newProps, parentComponent, namespace);
     }
     if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {
-      queuePostRenderEffect(() => {
-        vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);
-        dirs && invokeDirectiveHook(n2, n1, parentComponent, "updated");
-      }, parentSuspense);
+      queuePostRenderEffect(
+        () => {
+          vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);
+          dirs && invokeDirectiveHook(n2, n1, parentComponent, "updated");
+        },
+        void 0,
+        parentSuspense
+      );
     }
   };
   const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, namespace, slotScopeIds) => {
@@ -4876,7 +5015,22 @@ function baseCreateRenderer(options, createHydrationFns) {
   };
   const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
     n2.slotScopeIds = slotScopeIds;
-    if (n1 == null) {
+    if (n2.type.__vapor) {
+      if (n1 == null) {
+        getVaporInterface(parentComponent, n2).mount(
+          n2,
+          container,
+          anchor,
+          parentComponent
+        );
+      } else {
+        getVaporInterface(parentComponent, n2).update(
+          n1,
+          n2,
+          shouldUpdateComponent(n1, n2, optimized)
+        );
+      }
+    } else if (n1 == null) {
       if (n2.shapeFlag & 512) {
         parentComponent.ctx.activate(
           n2,
@@ -4962,15 +5116,52 @@ function baseCreateRenderer(options, createHydrationFns) {
         return;
       } else {
         instance.next = n2;
-        instance.update();
+        instance.effect.run();
       }
     } else {
       n2.el = n1.el;
       instance.vnode = n2;
     }
   };
-  const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, namespace, optimized) => {
-    const componentUpdateFn = () => {
+  class SetupRenderEffect extends ReactiveEffect {
+    constructor(instance, initialVNode, container, anchor, parentSuspense, namespace, optimized) {
+      const prevScope = setCurrentScope(instance.scope);
+      super();
+      this.instance = instance;
+      this.initialVNode = initialVNode;
+      this.container = container;
+      this.anchor = anchor;
+      this.parentSuspense = parentSuspense;
+      this.namespace = namespace;
+      this.optimized = optimized;
+      setCurrentScope(prevScope);
+      this.job = instance.job = () => {
+        if (this.dirty) {
+          this.run();
+        }
+      };
+      this.job.i = instance;
+      {
+        this.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
+        this.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
+      }
+    }
+    notify() {
+      if (!(this.flags & 256)) {
+        const job = this.job;
+        queueJob(job, job.i.uid);
+      }
+    }
+    fn() {
+      const {
+        instance,
+        initialVNode,
+        container,
+        anchor,
+        parentSuspense,
+        namespace,
+        optimized
+      } = this;
       if (!instance.isMounted) {
         let vnodeHook;
         const { el, props } = initialVNode;
@@ -5014,23 +5205,24 @@ function baseCreateRenderer(options, createHydrationFns) {
           initialVNode.el = subTree.el;
         }
         if (m) {
-          queuePostRenderEffect(m, parentSuspense);
+          queuePostRenderEffect(m, void 0, parentSuspense);
         }
         if (!isAsyncWrapperVNode && (vnodeHook = props && props.onVnodeMounted)) {
           const scopedInitialVNode = initialVNode;
           queuePostRenderEffect(
             () => invokeVNodeHook(vnodeHook, parent, scopedInitialVNode),
+            void 0,
             parentSuspense
           );
         }
-        if (initialVNode.shapeFlag & 256 || parent && isAsyncWrapper(parent.vnode) && parent.vnode.shapeFlag & 256) {
-          instance.a && queuePostRenderEffect(instance.a, parentSuspense);
+        if (initialVNode.shapeFlag & 256 || parent && parent.vnode && isAsyncWrapper(parent.vnode) && parent.vnode.shapeFlag & 256) {
+          instance.a && queuePostRenderEffect(instance.a, void 0, parentSuspense);
         }
         instance.isMounted = true;
         {
           devtoolsComponentAdded(instance);
         }
-        initialVNode = container = anchor = null;
+        this.initialVNode = this.container = this.anchor = null;
       } else {
         let { next, bu, u, parent, vnode } = instance;
         {
@@ -5042,7 +5234,7 @@ function baseCreateRenderer(options, createHydrationFns) {
             }
             nonHydratedAsyncRoot.asyncDep.then(() => {
               if (!instance.isUnmounted) {
-                componentUpdateFn();
+                this.fn();
               }
             });
             return;
@@ -5098,11 +5290,12 @@ function baseCreateRenderer(options, createHydrationFns) {
           updateHOCHostEl(instance, nextTree.el);
         }
         if (u) {
-          queuePostRenderEffect(u, parentSuspense);
+          queuePostRenderEffect(u, void 0, parentSuspense);
         }
         if (vnodeHook = next.props && next.props.onVnodeUpdated) {
           queuePostRenderEffect(
             () => invokeVNodeHook(vnodeHook, parent, next, vnode),
+            void 0,
             parentSuspense
           );
         }
@@ -5113,21 +5306,21 @@ function baseCreateRenderer(options, createHydrationFns) {
           popWarningContext$1();
         }
       }
-    };
-    instance.scope.on();
-    const effect = instance.effect = new ReactiveEffect(componentUpdateFn);
-    instance.scope.off();
-    const update = instance.update = effect.run.bind(effect);
-    const job = instance.job = effect.runIfDirty.bind(effect);
-    job.i = instance;
-    job.id = instance.uid;
-    effect.scheduler = () => queueJob(job);
-    toggleRecurse(instance, true);
-    {
-      effect.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
-      effect.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
     }
-    update();
+  }
+  const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, namespace, optimized) => {
+    const effect = instance.effect = new SetupRenderEffect(
+      instance,
+      initialVNode,
+      container,
+      anchor,
+      parentSuspense,
+      namespace,
+      optimized
+    );
+    instance.update = effect.run.bind(effect);
+    toggleRecurse(instance, true);
+    effect.run();
   };
   const updateComponentPreRender = (instance, nextVNode, optimized) => {
     nextVNode.component = instance;
@@ -5136,9 +5329,9 @@ function baseCreateRenderer(options, createHydrationFns) {
     instance.next = null;
     updateProps(instance, nextVNode.props, prevProps, optimized);
     updateSlots(instance, nextVNode.children, optimized);
-    pauseTracking();
+    const prevSub = setActiveSub();
     flushPreFlushCbs(instance);
-    resetTracking();
+    setActiveSub(prevSub);
   };
   const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized = false) => {
     const c1 = n1 && n1.children;
@@ -5415,7 +5608,13 @@ function baseCreateRenderer(options, createHydrationFns) {
           );
         } else if (moved) {
           if (j < 0 || i !== increasingNewIndexSequence[j]) {
-            move(nextChild, container, anchor, 2);
+            move(
+              nextChild,
+              container,
+              anchor,
+              2,
+              parentComponent
+            );
           } else {
             j--;
           }
@@ -5423,10 +5622,20 @@ function baseCreateRenderer(options, createHydrationFns) {
       }
     }
   };
-  const move = (vnode, container, anchor, moveType, parentSuspense = null) => {
+  const move = (vnode, container, anchor, moveType, parentComponent, parentSuspense = null) => {
     const { el, type, transition, children, shapeFlag } = vnode;
     if (shapeFlag & 6) {
-      move(vnode.component.subTree, container, anchor, moveType);
+      if (type.__vapor) {
+        getVaporInterface(parentComponent, vnode).move(vnode, container, anchor);
+      } else {
+        move(
+          vnode.component.subTree,
+          container,
+          anchor,
+          moveType,
+          parentComponent
+        );
+      }
       return;
     }
     if (shapeFlag & 128) {
@@ -5434,13 +5643,25 @@ function baseCreateRenderer(options, createHydrationFns) {
       return;
     }
     if (shapeFlag & 64) {
-      type.move(vnode, container, anchor, internals);
+      type.move(
+        vnode,
+        container,
+        anchor,
+        internals,
+        parentComponent
+      );
       return;
     }
     if (type === Fragment) {
       hostInsert(el, container, anchor);
       for (let i = 0; i < children.length; i++) {
-        move(children[i], container, anchor, moveType);
+        move(
+          children[i],
+          container,
+          anchor,
+          moveType,
+          parentComponent
+        );
       }
       hostInsert(vnode.anchor, container, anchor);
       return;
@@ -5454,7 +5675,11 @@ function baseCreateRenderer(options, createHydrationFns) {
       if (moveType === 0) {
         transition.beforeEnter(el);
         hostInsert(el, container, anchor);
-        queuePostRenderEffect(() => transition.enter(el), parentSuspense);
+        queuePostRenderEffect(
+          () => transition.enter(el),
+          void 0,
+          parentSuspense
+        );
       } else {
         const { leave, delayLeave, afterLeave } = transition;
         const remove2 = () => {
@@ -5496,9 +5721,9 @@ function baseCreateRenderer(options, createHydrationFns) {
       optimized = false;
     }
     if (ref != null) {
-      pauseTracking();
+      const prevSub = setActiveSub();
       setRef(ref, null, parentSuspense, vnode, true);
-      resetTracking();
+      setActiveSub(prevSub);
     }
     if (cacheIndex != null) {
       parentComponent.renderCache[cacheIndex] = void 0;
@@ -5514,7 +5739,12 @@ function baseCreateRenderer(options, createHydrationFns) {
       invokeVNodeHook(vnodeHook, parentComponent, vnode);
     }
     if (shapeFlag & 6) {
-      unmountComponent(vnode.component, parentSuspense, doRemove);
+      if (type.__vapor) {
+        getVaporInterface(parentComponent, vnode).unmount(vnode, doRemove);
+        return;
+      } else {
+        unmountComponent(vnode.component, parentSuspense, doRemove);
+      }
     } else {
       if (shapeFlag & 128) {
         vnode.suspense.unmount(parentSuspense, doRemove);
@@ -5548,15 +5778,23 @@ function baseCreateRenderer(options, createHydrationFns) {
       } else if (type === Fragment && patchFlag & (128 | 256) || !optimized && shapeFlag & 16) {
         unmountChildren(children, parentComponent, parentSuspense);
       }
+      if (type === VaporSlot) {
+        getVaporInterface(parentComponent, vnode).unmount(vnode, doRemove);
+        return;
+      }
       if (doRemove) {
         remove(vnode);
       }
     }
     if (shouldInvokeVnodeHook && (vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) {
-      queuePostRenderEffect(() => {
-        vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
-        shouldInvokeDirs && invokeDirectiveHook(vnode, null, parentComponent, "unmounted");
-      }, parentSuspense);
+      queuePostRenderEffect(
+        () => {
+          vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
+          shouldInvokeDirs && invokeDirectiveHook(vnode, null, parentComponent, "unmounted");
+        },
+        void 0,
+        parentSuspense
+      );
     }
   };
   const remove = (vnode) => {
@@ -5613,7 +5851,7 @@ function baseCreateRenderer(options, createHydrationFns) {
     const {
       bum,
       scope,
-      job,
+      effect,
       subTree,
       um,
       m,
@@ -5632,16 +5870,18 @@ function baseCreateRenderer(options, createHydrationFns) {
       });
     }
     scope.stop();
-    if (job) {
-      job.flags |= 8;
+    if (effect) {
+      effect.stop();
       unmount(subTree, instance, parentSuspense, doRemove);
     }
     if (um) {
-      queuePostRenderEffect(um, parentSuspense);
+      queuePostRenderEffect(um, void 0, parentSuspense);
     }
-    queuePostRenderEffect(() => {
-      instance.isUnmounted = true;
-    }, parentSuspense);
+    queuePostRenderEffect(
+      () => instance.isUnmounted = true,
+      void 0,
+      parentSuspense
+    );
     if (parentSuspense && parentSuspense.pendingBranch && !parentSuspense.isUnmounted && instance.asyncDep && !instance.asyncResolved && instance.suspenseId === parentSuspense.pendingId) {
       parentSuspense.deps--;
       if (parentSuspense.deps === 0) {
@@ -5659,6 +5899,9 @@ function baseCreateRenderer(options, createHydrationFns) {
   };
   const getNextHostNode = (vnode) => {
     if (vnode.shapeFlag & 6) {
+      if (vnode.type.__vapor) {
+        return hostNextSibling(vnode.component.block);
+      }
       return getNextHostNode(vnode.component.subTree);
     }
     if (vnode.shapeFlag & 128) {
@@ -5668,7 +5911,6 @@ function baseCreateRenderer(options, createHydrationFns) {
     const teleportEnd = el && el[TeleportEndKey];
     return teleportEnd ? hostNextSibling(teleportEnd) : el;
   };
-  let isFlushing = false;
   const render = (vnode, container, namespace) => {
     if (vnode == null) {
       if (container._vnode) {
@@ -5686,12 +5928,7 @@ function baseCreateRenderer(options, createHydrationFns) {
       );
     }
     container._vnode = vnode;
-    if (!isFlushing) {
-      isFlushing = true;
-      flushPreFlushCbs();
-      flushPostFlushCbs();
-      isFlushing = false;
-    }
+    flushOnAppMount();
   };
   const internals = {
     p: patch,
@@ -5699,6 +5936,7 @@ function baseCreateRenderer(options, createHydrationFns) {
     m: move,
     r: remove,
     mt: mountComponent,
+    umt: unmountComponent,
     mc: mountChildren,
     pc: patchChildren,
     pbc: patchBlockChildren,
@@ -5706,22 +5944,51 @@ function baseCreateRenderer(options, createHydrationFns) {
     o: options
   };
   let hydrate;
+  const mountApp = (app, container, isHydrate, namespace) => {
+    const vnode = app._ceVNode || createVNode(app._component, app._props);
+    vnode.appContext = app._context;
+    if (namespace === true) {
+      namespace = "svg";
+    } else if (namespace === false) {
+      namespace = void 0;
+    }
+    {
+      app._context.reload = () => {
+        const cloned = cloneVNode(vnode);
+        cloned.el = null;
+        render(cloned, container, namespace);
+      };
+    }
+    {
+      render(vnode, container, namespace);
+    }
+    return vnode.component;
+  };
+  const unmountApp = (app) => {
+    render(null, app._container);
+  };
   return {
     render,
     hydrate,
-    createApp: createAppAPI(render)
+    internals,
+    createApp: createAppAPI(
+      mountApp,
+      unmountApp,
+      getComponentPublicInstance)
   };
 }
 function resolveChildrenNamespace({ type, props }, currentNamespace) {
   return currentNamespace === "svg" && type === "foreignObject" || currentNamespace === "mathml" && type === "annotation-xml" && props && props.encoding && props.encoding.includes("html") ? void 0 : currentNamespace;
 }
-function toggleRecurse({ effect, job }, allowed) {
-  if (allowed) {
-    effect.flags |= 32;
-    job.flags |= 4;
-  } else {
-    effect.flags &= -33;
-    job.flags &= -5;
+function toggleRecurse({ effect, job, vapor }, allowed) {
+  if (!vapor) {
+    if (allowed) {
+      effect.flags |= 128;
+      job.flags |= 2;
+    } else {
+      effect.flags &= -129;
+      job.flags &= -3;
+    }
   }
 }
 function needTransition(parentSuspense, transition) {
@@ -5754,48 +6021,8 @@ function traverseStaticChildren(n1, n2, shallow = false) {
     }
   }
 }
-function getSequence(arr) {
-  const p = arr.slice();
-  const result = [0];
-  let i, j, u, v, c;
-  const len = arr.length;
-  for (i = 0; i < len; i++) {
-    const arrI = arr[i];
-    if (arrI !== 0) {
-      j = result[result.length - 1];
-      if (arr[j] < arrI) {
-        p[i] = j;
-        result.push(i);
-        continue;
-      }
-      u = 0;
-      v = result.length - 1;
-      while (u < v) {
-        c = u + v >> 1;
-        if (arr[result[c]] < arrI) {
-          u = c + 1;
-        } else {
-          v = c;
-        }
-      }
-      if (arrI < arr[result[u]]) {
-        if (u > 0) {
-          p[i] = result[u - 1];
-        }
-        result[u] = i;
-      }
-    }
-  }
-  u = result.length;
-  v = result[u - 1];
-  while (u-- > 0) {
-    result[u] = v;
-    v = p[v];
-  }
-  return result;
-}
 function locateNonHydratedAsyncRoot(instance) {
-  const subComponent = instance.subTree.component;
+  const subComponent = instance.vapor ? null : instance.subTree.component;
   if (subComponent) {
     if (subComponent.asyncDep && !subComponent.asyncResolved) {
       return subComponent;
@@ -5807,8 +6034,22 @@ function locateNonHydratedAsyncRoot(instance) {
 function invalidateMount(hooks) {
   if (hooks) {
     for (let i = 0; i < hooks.length; i++)
-      hooks[i].flags |= 8;
+      hooks[i].flags |= 4;
+  }
+}
+function getVaporInterface(instance, vnode) {
+  const ctx = instance ? instance.appContext : vnode.appContext;
+  const res = ctx && ctx.vapor;
+  if (!res) {
+    warn$1(
+      `Vapor component found in vdom tree but vapor-in-vdom interop was not installed. Make sure to install it:
+\`\`\`
+import { vaporInteropPlugin } from 'vue'
+app.use(vaporInteropPlugin)
+\`\`\``
+    );
   }
+  return res;
 }
 
 const ssrContextKey = Symbol.for("v-scx");
@@ -5832,8 +6073,41 @@ function watch(source, cb, options) {
   }
   return doWatch(source, cb, options);
 }
+class RenderWatcherEffect extends WatcherEffect {
+  constructor(instance, source, cb, options, flush) {
+    super(source, cb, options);
+    this.flush = flush;
+    const job = () => {
+      if (this.dirty) {
+        this.run();
+      }
+    };
+    if (cb) {
+      this.flags |= 128;
+      job.flags |= 2;
+    }
+    if (instance) {
+      job.i = instance;
+    }
+    this.job = job;
+  }
+  notify() {
+    const flags = this.flags;
+    if (!(flags & 256)) {
+      const flush = this.flush;
+      const job = this.job;
+      if (flush === "post") {
+        queuePostRenderEffect(job, void 0, job.i ? job.i.suspense : null);
+      } else if (flush === "pre") {
+        queueJob(job, job.i ? job.i.uid : void 0, true);
+      } else {
+        job();
+      }
+    }
+  }
+}
 function doWatch(source, cb, options = EMPTY_OBJ) {
-  const { immediate, deep, flush, once } = options;
+  const { immediate, deep, flush = "pre", once } = options;
   if (!cb) {
     if (immediate !== void 0) {
       warn$1(
@@ -5870,42 +6144,32 @@ function doWatch(source, cb, options = EMPTY_OBJ) {
   }
   const instance = currentInstance;
   baseWatchOptions.call = (fn, type, args) => callWithAsyncErrorHandling(fn, instance, type, args);
-  let isPre = false;
-  if (flush === "post") {
-    baseWatchOptions.scheduler = (job) => {
-      queuePostRenderEffect(job, instance && instance.suspense);
-    };
-  } else if (flush !== "sync") {
-    isPre = true;
-    baseWatchOptions.scheduler = (job, isFirstRun) => {
-      if (isFirstRun) {
-        job();
-      } else {
-        queueJob(job);
-      }
-    };
+  const effect = new RenderWatcherEffect(
+    instance,
+    source,
+    cb,
+    baseWatchOptions,
+    flush
+  );
+  if (cb) {
+    effect.run(true);
+  } else if (flush === "post") {
+    queuePostRenderEffect(effect.job, void 0, instance && instance.suspense);
+  } else {
+    effect.run(true);
   }
-  baseWatchOptions.augmentJob = (job) => {
-    if (cb) {
-      job.flags |= 4;
-    }
-    if (isPre) {
-      job.flags |= 2;
-      if (instance) {
-        job.id = instance.uid;
-        job.i = instance;
-      }
-    }
-  };
-  const watchHandle = watch$1(source, cb, baseWatchOptions);
+  const stop = effect.stop.bind(effect);
+  stop.pause = effect.pause.bind(effect);
+  stop.resume = effect.resume.bind(effect);
+  stop.stop = stop;
   if (isInSSRComponentSetup) {
     if (ssrCleanup) {
-      ssrCleanup.push(watchHandle);
+      ssrCleanup.push(stop);
     } else if (runsImmediately) {
-      watchHandle();
+      stop();
     }
   }
-  return watchHandle;
+  return stop;
 }
 function instanceWatch(source, value, options) {
   const publicThis = this.proxy;
@@ -5917,9 +6181,9 @@ function instanceWatch(source, value, options) {
     cb = value.handler;
     options = value;
   }
-  const reset = setCurrentInstance(this);
+  const prev = setCurrentInstance(this);
   const res = doWatch(getter, cb.bind(publicThis), options);
-  reset();
+  setCurrentInstance(...prev);
   return res;
 }
 function createPathGetter(ctx, path) {
@@ -5933,21 +6197,26 @@ function createPathGetter(ctx, path) {
   };
 }
 
-const getModelModifiers = (props, modelName) => {
-  return modelName === "modelValue" || modelName === "model-value" ? props.modelModifiers : props[`${modelName}Modifiers`] || props[`${camelize(modelName)}Modifiers`] || props[`${hyphenate(modelName)}Modifiers`];
+const getModelModifiers = (props, modelName, getter) => {
+  return modelName === "modelValue" || modelName === "model-value" ? getter(props, "modelModifiers") : getter(props, `${modelName}Modifiers`) || getter(props, `${camelize(modelName)}Modifiers`) || getter(props, `${hyphenate(modelName)}Modifiers`);
 };
 
 function emit(instance, event, ...rawArgs) {
+  return baseEmit(
+    instance,
+    instance.vnode.props || EMPTY_OBJ,
+    defaultPropGetter,
+    event,
+    ...rawArgs
+  );
+}
+function baseEmit(instance, props, getter, event, ...rawArgs) {
   if (instance.isUnmounted) return;
-  const props = instance.vnode.props || EMPTY_OBJ;
   {
-    const {
-      emitsOptions,
-      propsOptions: [propsOptions]
-    } = instance;
+    const { emitsOptions, propsOptions } = instance;
     if (emitsOptions) {
       if (!(event in emitsOptions) && true) {
-        if (!propsOptions || !(toHandlerKey(camelize(event)) in propsOptions)) {
+        if (!propsOptions || !propsOptions[0] || !(toHandlerKey(camelize(event)) in propsOptions[0])) {
           warn$1(
             `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(camelize(event))}" prop.`
           );
@@ -5967,7 +6236,7 @@ function emit(instance, event, ...rawArgs) {
   }
   let args = rawArgs;
   const isModelListener = event.startsWith("update:");
-  const modifiers = isModelListener && getModelModifiers(props, event.slice(7));
+  const modifiers = isModelListener && getModelModifiers(props, event.slice(7), getter);
   if (modifiers) {
     if (modifiers.trim) {
       args = rawArgs.map((a) => isString(a) ? a.trim() : a);
@@ -5981,7 +6250,7 @@ function emit(instance, event, ...rawArgs) {
   }
   {
     const lowerCaseEvent = event.toLowerCase();
-    if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) {
+    if (lowerCaseEvent !== event && getter(props, toHandlerKey(lowerCaseEvent))) {
       warn$1(
         `Event "${lowerCaseEvent}" is emitted in component ${formatComponentName(
           instance,
@@ -5993,10 +6262,10 @@ function emit(instance, event, ...rawArgs) {
     }
   }
   let handlerName;
-  let handler = props[handlerName = toHandlerKey(event)] || // also try camelCase event handler (#2249)
-  props[handlerName = toHandlerKey(camelize(event))];
+  let handler = getter(props, handlerName = toHandlerKey(event)) || // also try camelCase event handler (#2249)
+  getter(props, handlerName = toHandlerKey(camelize(event)));
   if (!handler && isModelListener) {
-    handler = props[handlerName = toHandlerKey(hyphenate(event))];
+    handler = getter(props, handlerName = toHandlerKey(hyphenate(event)));
   }
   if (handler) {
     callWithAsyncErrorHandling(
@@ -6006,7 +6275,7 @@ function emit(instance, event, ...rawArgs) {
       args
     );
   }
-  const onceHandler = props[handlerName + `Once`];
+  const onceHandler = getter(props, handlerName + `Once`);
   if (onceHandler) {
     if (!instance.emitted) {
       instance.emitted = {};
@@ -6022,6 +6291,9 @@ function emit(instance, event, ...rawArgs) {
     );
   }
 }
+function defaultPropGetter(props, key) {
+  return props[key];
+}
 function normalizeEmitsOptions(comp, appContext, asMixin = false) {
   const cache = appContext.emitsCache;
   const cached = cache.get(comp);
@@ -6348,7 +6620,7 @@ function hasPropsChanged(prevProps, nextProps, emitsOptions) {
   return false;
 }
 function updateHOCHostEl({ vnode, parent }, el) {
-  while (parent) {
+  while (parent && !parent.vapor) {
     const root = parent.subTree;
     if (root.suspense && root.suspense.activeBranch === vnode) {
       root.el = vnode.el;
@@ -6363,7 +6635,7 @@ function updateHOCHostEl({ vnode, parent }, el) {
 }
 
 const isSuspense = (type) => type.__isSuspense;
-function queueEffectWithSuspense(fn, suspense) {
+function queueEffectWithSuspense(fn, id, suspense) {
   if (suspense && suspense.pendingBranch) {
     if (isArray(fn)) {
       suspense.effects.push(...fn);
@@ -6371,7 +6643,7 @@ function queueEffectWithSuspense(fn, suspense) {
       suspense.effects.push(fn);
     }
   } else {
-    queuePostFlushCb(fn);
+    queuePostFlushCb(fn, id);
   }
 }
 
@@ -6379,6 +6651,7 @@ const Fragment = Symbol.for("v-fgt");
 const Text = Symbol.for("v-txt");
 const Comment = Symbol.for("v-cmt");
 const Static = Symbol.for("v-stc");
+const VaporSlot = Symbol.for("v-vps");
 let currentBlock = null;
 let isBlockTreeEnabled = 1;
 function setBlockTracking(value, inVOnce = false) {
@@ -6699,6 +6972,40 @@ function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {
   ]);
 }
 
+let currentInstance = null;
+const getCurrentGenericInstance = () => currentInstance || currentRenderingInstance;
+const getCurrentInstance = () => currentInstance && !currentInstance.vapor ? currentInstance : currentRenderingInstance;
+let isInSSRComponentSetup = false;
+let setInSSRSetupState;
+let simpleSetCurrentInstance;
+{
+  const g = getGlobalThis();
+  const registerGlobalSetter = (key, setter) => {
+    let setters;
+    if (!(setters = g[key])) setters = g[key] = [];
+    setters.push(setter);
+    return (v) => {
+      if (setters.length > 1) setters.forEach((set) => set(v));
+      else setters[0](v);
+    };
+  };
+  simpleSetCurrentInstance = registerGlobalSetter(
+    `__VUE_INSTANCE_SETTERS__`,
+    (v) => currentInstance = v
+  );
+  setInSSRSetupState = registerGlobalSetter(
+    `__VUE_SSR_SETTERS__`,
+    (v) => isInSSRComponentSetup = v
+  );
+}
+const setCurrentInstance = (instance, scope = instance !== null ? instance.scope : void 0) => {
+  try {
+    return [currentInstance, setCurrentScope(scope)];
+  } finally {
+    simpleSetCurrentInstance(instance);
+  }
+};
+
 const emptyAppContext = createAppContext();
 let uid = 0;
 function createComponentInstance$1(vnode, parent, suspense) {
@@ -6743,7 +7050,7 @@ function createComponentInstance$1(vnode, parent, suspense) {
     // to be set immediately
     emitted: null,
     // props default value
-    propsDefaults: EMPTY_OBJ,
+    propsDefaults: null,
     // inheritAttrs
     inheritAttrs: type.inheritAttrs,
     // state
@@ -6790,44 +7097,6 @@ function createComponentInstance$1(vnode, parent, suspense) {
   }
   return instance;
 }
-let currentInstance = null;
-const getCurrentInstance = () => currentInstance || currentRenderingInstance;
-let internalSetCurrentInstance;
-let setInSSRSetupState;
-{
-  const g = getGlobalThis();
-  const registerGlobalSetter = (key, setter) => {
-    let setters;
-    if (!(setters = g[key])) setters = g[key] = [];
-    setters.push(setter);
-    return (v) => {
-      if (setters.length > 1) setters.forEach((set) => set(v));
-      else setters[0](v);
-    };
-  };
-  internalSetCurrentInstance = registerGlobalSetter(
-    `__VUE_INSTANCE_SETTERS__`,
-    (v) => currentInstance = v
-  );
-  setInSSRSetupState = registerGlobalSetter(
-    `__VUE_SSR_SETTERS__`,
-    (v) => isInSSRComponentSetup = v
-  );
-}
-const setCurrentInstance = (instance) => {
-  const prev = currentInstance;
-  internalSetCurrentInstance(instance);
-  instance.scope.on();
-  return () => {
-    instance.scope.off();
-    internalSetCurrentInstance(prev);
-  };
-};
-const unsetCurrentInstance = () => {
-  currentInstance && currentInstance.scope.off();
-  internalSetCurrentInstance(null);
-};
-const isBuiltInTag = /* @__PURE__ */ makeMap("slot,component");
 function validateComponentName(name, { isNativeTag }) {
   if (isBuiltInTag(name) || isNativeTag(name)) {
     warn$1(
@@ -6838,13 +7107,16 @@ function validateComponentName(name, { isNativeTag }) {
 function isStatefulComponent(instance) {
   return instance.vnode.shapeFlag & 4;
 }
-let isInSSRComponentSetup = false;
 function setupComponent$1(instance, isSSR = false, optimized = false) {
   isSSR && setInSSRSetupState(isSSR);
-  const { props, children } = instance.vnode;
+  const { props, children, vi } = instance.vnode;
   const isStateful = isStatefulComponent(instance);
-  initProps(instance, props, isStateful, isSSR);
-  initSlots(instance, children, optimized || isSSR);
+  if (vi) {
+    vi(instance);
+  } else {
+    initProps(instance, props, isStateful, isSSR);
+    initSlots(instance, children, optimized || isSSR);
+  }
   const setupResult = isStateful ? setupStatefulComponent(instance, isSSR) : void 0;
   isSSR && setInSSRSetupState(false);
   return setupResult;
@@ -6881,9 +7153,9 @@ function setupStatefulComponent(instance, isSSR) {
   }
   const { setup } = Component;
   if (setup) {
-    pauseTracking();
+    const prevSub = setActiveSub();
     const setupContext = instance.setupContext = setup.length > 1 ? createSetupContext(instance) : null;
-    const reset = setCurrentInstance(instance);
+    const prev = setCurrentInstance(instance);
     const setupResult = callWithErrorHandling(
       setup,
       instance,
@@ -6894,12 +7166,15 @@ function setupStatefulComponent(instance, isSSR) {
       ]
     );
     const isAsyncSetup = isPromise(setupResult);
-    resetTracking();
-    reset();
+    setActiveSub(prevSub);
+    setCurrentInstance(...prev);
     if ((isAsyncSetup || instance.sp) && !isAsyncWrapper(instance)) {
       markAsyncBoundary(instance);
     }
     if (isAsyncSetup) {
+      const unsetCurrentInstance = () => {
+        setCurrentInstance(null, void 0);
+      };
       setupResult.then(unsetCurrentInstance, unsetCurrentInstance);
       if (isSSR) {
         return setupResult.then((resolvedResult) => {
@@ -6957,13 +7232,13 @@ function finishComponentSetup(instance, isSSR, skipOptions) {
     instance.render = Component.render || NOOP;
   }
   {
-    const reset = setCurrentInstance(instance);
-    pauseTracking();
+    const prevInstance = setCurrentInstance(instance);
+    const prevSub = setActiveSub();
     try {
       applyOptions(instance);
     } finally {
-      resetTracking();
-      reset();
+      setActiveSub(prevSub);
+      setCurrentInstance(...prevInstance);
     }
   }
   if (!Component.render && instance.render === NOOP && !isSSR) {
@@ -7000,29 +7275,6 @@ function getSlotsProxy(instance) {
   });
 }
 function createSetupContext(instance) {
-  const expose = (exposed) => {
-    {
-      if (instance.exposed) {
-        warn$1(`expose() should be called only once per setup().`);
-      }
-      if (exposed != null) {
-        let exposedType = typeof exposed;
-        if (exposedType === "object") {
-          if (isArray(exposed)) {
-            exposedType = "array";
-          } else if (isRef(exposed)) {
-            exposedType = "ref";
-          }
-        }
-        if (exposedType !== "object") {
-          warn$1(
-            `expose() should be passed a plain object, received ${exposedType}.`
-          );
-        }
-      }
-    }
-    instance.exposed = exposed || {};
-  };
   {
     let attrsProxy;
     let slotsProxy;
@@ -7036,10 +7288,33 @@ function createSetupContext(instance) {
       get emit() {
         return (event, ...args) => instance.emit(event, ...args);
       },
-      expose
+      expose: (exposed) => expose(instance, exposed)
     });
   }
 }
+function expose(instance, exposed) {
+  {
+    if (instance.exposed) {
+      warn$1(`expose() should be called only once per setup().`);
+    }
+    if (exposed != null) {
+      let exposedType = typeof exposed;
+      if (exposedType === "object") {
+        if (isArray(exposed)) {
+          exposedType = "array";
+        } else if (isRef(exposed)) {
+          exposedType = "ref";
+        }
+      }
+      if (exposedType !== "object") {
+        warn$1(
+          `expose() should be passed a plain object, received ${exposedType}.`
+        );
+      }
+    }
+  }
+  instance.exposed = exposed || {};
+}
 function getComponentPublicInstance(instance) {
   if (instance.exposed) {
     return instance.exposeProxy || (instance.exposeProxy = new Proxy(proxyRefs(markRaw(instance.exposed)), {
@@ -7047,7 +7322,9 @@ function getComponentPublicInstance(instance) {
         if (key in target) {
           return target[key];
         } else if (key in publicPropertiesMap) {
-          return publicPropertiesMap[key](instance);
+          return publicPropertiesMap[key](
+            instance
+          );
         }
       },
       has(target, key) {
@@ -7090,17 +7367,10 @@ function isClassComponent(value) {
 }
 
 const computed = (getterOrOptions, debugOptions) => {
-  const c = computed$1(getterOrOptions, debugOptions, isInSSRComponentSetup);
-  {
-    const i = getCurrentInstance();
-    if (i && i.appContext.config.warnRecursiveComputed) {
-      c._warnRecursive = true;
-    }
-  }
-  return c;
+  return computed$1(getterOrOptions, debugOptions, isInSSRComponentSetup);
 };
 
-const version = "3.5.17";
+const version = "3.6.0-alpha.2";
 const warn = warn$1 ;
 const _ssrUtils = {
   createComponentInstance: createComponentInstance$1,
@@ -7269,11 +7539,11 @@ function patchStyle(el, prev, next) {
 }
 const semicolonRE = /[^\\];\s*$/;
 const importantRE = /\s*!important$/;
-function setStyle(style, name, val) {
-  if (isArray(val)) {
-    val.forEach((v) => setStyle(style, name, v));
+function setStyle(style, name, rawVal) {
+  if (isArray(rawVal)) {
+    rawVal.forEach((v) => setStyle(style, name, v));
   } else {
-    if (val == null) val = "";
+    const val = rawVal == null ? "" : String(rawVal);
     {
       if (semicolonRE.test(val)) {
         warn(
@@ -7346,8 +7616,7 @@ function patchDOMProp(el, key, value, parentComponent, attrName) {
     return;
   }
   const tag = el.tagName;
-  if (key === "value" && tag !== "PROGRESS" && // custom elements may use _value internally
-  !tag.includes("-")) {
+  if (key === "value" && canSetValueDirectly(tag)) {
     const oldValue = tag === "OPTION" ? el.getAttribute("value") || "" : el.value;
     const newValue = value == null ? (
       // #11647: value should be set as empty string for null and undefined,
@@ -7475,8 +7744,6 @@ function patchStopImmediatePropagation(e, value) {
   }
 }
 
-const isNativeOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // lowercase letter
-key.charCodeAt(2) > 96 && key.charCodeAt(2) < 123;
 const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) => {
   const isSVG = namespace === "svg";
   if (key === "class") {
@@ -7516,24 +7783,9 @@ function shouldSetAsProp(el, key, value, isSVG) {
     }
     return false;
   }
-  if (key === "spellcheck" || key === "draggable" || key === "translate" || key === "autocorrect") {
-    return false;
-  }
-  if (key === "form") {
-    return false;
-  }
-  if (key === "list" && el.tagName === "INPUT") {
-    return false;
-  }
-  if (key === "type" && el.tagName === "TEXTAREA") {
+  if (shouldSetAsAttr(el.tagName, key)) {
     return false;
   }
-  if (key === "width" || key === "height") {
-    const tag = el.tagName;
-    if (tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE") {
-      return false;
-    }
-  }
   if (isNativeOn(key) && isString(value)) {
     return false;
   }
@@ -7721,9 +7973,23 @@ function ssrRenderStyle(raw) {
   if (isString(raw)) {
     return escapeHtml(raw);
   }
-  const styles = normalizeStyle(raw);
+  const styles = normalizeStyle(ssrResetCssVars(raw));
   return escapeHtml(stringifyStyle(styles));
 }
+function ssrResetCssVars(raw) {
+  if (!isArray(raw) && isObject(raw)) {
+    const res = {};
+    for (const key in raw) {
+      if (key.startsWith(":--")) {
+        res[key.slice(1)] = normalizeCssVarValue(raw[key]);
+      } else {
+        res[key] = raw[key];
+      }
+    }
+    return res;
+  }
+  return raw;
+}
 
 function ssrRenderComponent(comp, props = null, children = null, parentComponent = null, slotScopeId) {
   return renderComponentVNode(