@vue/runtime-vapor 0.0.0 → 3.6.0-alpha.1

package/dist/runtime-vapor.esm-bundler.js

@@ -1,324 +1,141 @@
 /**
-* @vue/runtime-vapor v3.5.13
+* @vue/runtime-vapor v3.6.0-alpha.1
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
-import { warn, queueJob, currentInstance as currentInstance$1, startMeasure, simpleSetCurrentInstance as simpleSetCurrentInstance$1, queuePostFlushCb, patchStyle, mergeProps, shouldSetAsProp, baseEmit, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, isEmitListener, resolvePropValue, callWithErrorHandling, registerHMR, endMeasure, nextUid, EffectScope as EffectScope$1, expose, unregisterHMR, initFeatureFlags, setDevtoolsHook, createAppAPI, normalizeContainer, flushOnAppMount, resolveDynamicComponent, vShowOriginalDisplay, vShowHidden, vModelTextInit, onMounted, vModelCheckboxInit, vModelSelectInit, vModelTextUpdate, vModelCheckboxUpdate, vModelGetValue, vModelSetSelected, shallowRef as shallowRef$1 } from '@vue/runtime-dom';
-import { invokeArrayFns, remove as remove$1, normalizeClass, normalizeStyle, isString, parseStringStyle, toDisplayString, isOn, canSetValueDirectly, isArray, EMPTY_OBJ, hasOwn, isFunction, EMPTY_ARR, camelize, NO, YES, getGlobalThis, isObject, getSequence, looseEqual } from '@vue/shared';
-import { getCurrentScope, ReactiveEffect, onEffectCleanup, onScopeDispose, pauseTracking, EffectScope, resetTracking, proxyRefs, markRaw, unref, isReactive, isShallow, shallowReadArray, toReactive, shallowRef, isRef, traverse } from '@vue/reactivity';
+import { warn, baseEmit, currentInstance, startMeasure, setCurrentInstance, queuePostFlushCb, queueJob, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, resolvePropValue, isEmitListener, patchStyle, mergeProps, shouldSetAsProp, isRef, registerHMR, callWithErrorHandling, endMeasure, unregisterHMR, nextUid, EffectScope as EffectScope$1, expose, createAppAPI, initFeatureFlags, setDevtoolsHook, flushOnAppMount, normalizeContainer, ensureRenderer, shallowRef, simpleSetCurrentInstance, renderSlot, createVNode, shallowReactive, createInternalObject, onScopeDispose as onScopeDispose$1, resolveDynamicComponent, vShowOriginalDisplay, vShowHidden, vModelTextInit, vModelCheckboxInit, vModelSelectInit, onMounted, vModelTextUpdate, vModelCheckboxUpdate, vModelGetValue, vModelSetSelected } from '@vue/runtime-dom';
+import { isArray, EMPTY_OBJ, hasOwn, invokeArrayFns, EMPTY_ARR, isFunction, camelize, isString, NO, YES, normalizeClass, normalizeStyle, parseStringStyle, isOn, canSetValueDirectly, toDisplayString, getGlobalThis, extend, isObject, remove as remove$1, looseEqual } from '@vue/shared';
+import { setActiveSub, EffectScope, ReactiveEffect, onEffectCleanup, proxyRefs, onScopeDispose, markRaw, unref, watch, isReactive, isShallow, shallowReadArray, isReadonly, toReadonly, toReactive, shallowRef as shallowRef$1, isRef as isRef$1, traverse } from '@vue/reactivity';
 
-function renderEffect(fn, noLifecycle = false) {
-  const instance = currentInstance$1;
-  const scope = getCurrentScope();
-  if (!!(process.env.NODE_ENV !== "production") && true && !isVaporComponent(instance)) {
-    warn("renderEffect called without active vapor instance.");
-  }
-  const hasUpdateHooks = instance && (instance.bu || instance.u);
-  const renderEffectFn = noLifecycle ? fn : () => {
-    if (!!(process.env.NODE_ENV !== "production") && instance) {
-      startMeasure(instance, `renderEffect`);
-    }
-    const prev = currentInstance$1;
-    simpleSetCurrentInstance$1(instance);
-    if (scope) scope.on();
-    if (hasUpdateHooks && instance.isMounted && !instance.isUpdating) {
-      instance.isUpdating = true;
-      instance.bu && invokeArrayFns(instance.bu);
-      fn();
-      queuePostFlushCb(() => {
-        instance.isUpdating = false;
-        instance.u && invokeArrayFns(instance.u);
-      });
-    } else {
-      fn();
-    }
-    if (scope) scope.off();
-    simpleSetCurrentInstance$1(prev, instance);
-    if (!!(process.env.NODE_ENV !== "production") && instance) {
-      startMeasure(instance, `renderEffect`);
-    }
-  };
-  const effect = new ReactiveEffect(renderEffectFn);
-  const job = () => effect.dirty && effect.run();
-  if (instance) {
-    if (!!(process.env.NODE_ENV !== "production")) {
-      effect.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : undefined;
-      effect.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : undefined;
-    }
-    job.i = instance;
-    job.id = instance.uid;
-  }
-  effect.scheduler = () => queueJob(job);
-  effect.run();
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function createTextNode(value = "") {
+  return document.createTextNode(value);
 }
-
-function addEventListener(el, event, handler, options) {
-  el.addEventListener(event, handler, options);
-  return () => el.removeEventListener(event, handler, options);
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function createComment(data) {
+  return document.createComment(data);
 }
-function on(el, event, handlerGetter, options = {}) {
-  const handler = eventHandler(handlerGetter);
-  let cleanupEvent;
-  queuePostFlushCb(() => {
-    cleanupEvent = addEventListener(el, event, handler, options);
-  });
-  if (options.effect) {
-    onEffectCleanup(cleanup);
-  } else if (getCurrentScope()) {
-    onScopeDispose(cleanup);
-  }
-  function cleanup() {
-    cleanupEvent && cleanupEvent();
-  }
-}
-function delegate(el, event, handlerGetter) {
-  const handler = eventHandler(handlerGetter);
-  handler.delegate = true;
-  const cacheKey = `$evt${event}`;
-  const handlers = el[cacheKey] || (el[cacheKey] = []);
-  handlers.push(handler);
-  onScopeDispose(() => remove$1(handlers, handler));
-}
-function eventHandler(getter) {
-  return (...args) => {
-    let handler = getter();
-    if (!handler) return;
-    handler && handler(...args);
-  };
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function child(node) {
+  return node.firstChild;
 }
-const delegatedEvents = /* @__PURE__ */ Object.create(null);
-const delegateEvents = (...names) => {
-  for (const name of names) {
-    if (!delegatedEvents[name]) {
-      delegatedEvents[name] = true;
-      document.addEventListener(name, delegatedEventHandler);
-    }
-  }
-};
-const delegatedEventHandler = (e) => {
-  let node = e.composedPath && e.composedPath()[0] || e.target;
-  if (e.target !== node) {
-    Object.defineProperty(e, "target", {
-      configurable: true,
-      value: node
-    });
-  }
-  Object.defineProperty(e, "currentTarget", {
-    configurable: true,
-    get() {
-      return node || document;
-    }
-  });
-  while (node !== null) {
-    const handlers = node[`$evt${e.type}`];
-    if (handlers) {
-      for (const handler of handlers) {
-        if (handler.delegate && !node.disabled) {
-          handler(e);
-          if (e.cancelBubble) return;
-        }
-      }
-    }
-    node = node.host && node.host !== node && node.host instanceof Node ? node.host : node.parentNode;
-  }
-};
-function setDynamicEvents(el, events) {
-  for (const name in events) {
-    on(el, name, () => events[name], { effect: true });
-  }
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function nthChild(node, i) {
+  return node.childNodes[i];
+}
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function next(node) {
+  return node.nextSibling;
 }
 
-const hasFallthroughKey = (key) => currentInstance$1.hasFallthrough && key in currentInstance$1.attrs;
-function setProp(el, key, value) {
-  if (key in el) {
-    setDOMProp(el, key, value);
-  } else {
-    setAttr(el, key, value);
-  }
+let insertionParent;
+let insertionAnchor;
+function setInsertionState(parent, anchor) {
+  insertionParent = parent;
+  insertionAnchor = anchor;
 }
-function setAttr(el, key, value) {
-  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
-    return;
-  }
-  if (key === "true-value") {
-    el._trueValue = value;
-  } else if (key === "false-value") {
-    el._falseValue = value;
-  }
-  if (value !== el[`$${key}`]) {
-    el[`$${key}`] = value;
-    if (value != null) {
-      el.setAttribute(key, value);
-    } else {
-      el.removeAttribute(key);
-    }
-  }
+function resetInsertionState() {
+  insertionParent = insertionAnchor = void 0;
 }
-function setDOMProp(el, key, value) {
-  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
-    return;
-  }
-  const prev = el[key];
-  if (value === prev) {
-    return;
-  }
-  let needRemove = false;
-  if (value === "" || value == null) {
-    const type = typeof prev;
-    if (value == null && type === "string") {
-      value = "";
-      needRemove = true;
-    } else if (type === "number") {
-      value = 0;
-      needRemove = true;
-    }
-  }
-  try {
-    el[key] = value;
-  } catch (e) {
-    if (!!(process.env.NODE_ENV !== "production") && !needRemove) {
-      warn(
-        `Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: value ${value} is invalid.`,
-        e
-      );
-    }
-  }
-  needRemove && el.removeAttribute(key);
+
+let isHydrating = false;
+let currentHydrationNode = null;
+let isOptimized$1 = false;
+function withHydration(container, fn) {
+  adoptTemplate = adoptTemplateImpl;
+  locateHydrationNode = locateHydrationNodeImpl;
+  if (!isOptimized$1) {
+    Comment.prototype.$fs = void 0;
+    isOptimized$1 = true;
+  }
+  isHydrating = true;
+  setInsertionState(container, 0);
+  const res = fn();
+  resetInsertionState();
+  currentHydrationNode = null;
+  isHydrating = false;
+  return res;
 }
-function setClass(el, value) {
-  if (el.$root) {
-    setClassIncremental(el, value);
-  } else if ((value = normalizeClass(value)) !== el.$cls) {
-    el.className = el.$cls = value;
+let adoptTemplate;
+let locateHydrationNode;
+const isComment = (node, data) => node.nodeType === 8 && node.data === data;
+function adoptTemplateImpl(node, template) {
+  if (!(template[0] === "<" && template[1] === "!")) {
+    while (node.nodeType === 8) node = next(node);
   }
-}
-function setClassIncremental(el, value) {
-  const cacheKey = `$clsi${isApplyingFallthroughProps ? "$" : ""}`;
-  const prev = el[cacheKey];
-  if ((value = el[cacheKey] = normalizeClass(value)) !== prev) {
-    const nextList = value.split(/\s+/);
-    el.classList.add(...nextList);
-    if (prev) {
-      for (const cls of prev.split(/\s+/)) {
-        if (!nextList.includes(cls)) el.classList.remove(cls);
-      }
+  if (!!(process.env.NODE_ENV !== "production")) {
+    const type = node.nodeType;
+    if (type === 8 && !template.startsWith("<!") || type === 1 && !template.startsWith(`<` + node.tagName.toLowerCase()) || type === 3 && template.trim() && !template.startsWith(node.data)) {
+      warn(`adopted: `, node);
+      warn(`template: ${template}`);
+      warn("hydration mismatch!");
     }
   }
+  currentHydrationNode = next(node);
+  return node;
 }
-function setStyle(el, value) {
-  if (el.$root) {
-    setStyleIncremental(el, value);
+function locateHydrationNodeImpl() {
+  let node;
+  if (insertionAnchor === 0) {
+    node = child(insertionParent);
   } else {
-    const prev = el.$sty;
-    value = el.$sty = normalizeStyle(value);
-    patchStyle(el, prev, value);
-  }
-}
-function setStyleIncremental(el, value) {
-  const cacheKey = `$styi${isApplyingFallthroughProps ? "$" : ""}`;
-  const prev = el[cacheKey];
-  value = el[cacheKey] = isString(value) ? parseStringStyle(value) : normalizeStyle(value);
-  patchStyle(el, prev, value);
-  return value;
-}
-function setValue(el, value) {
-  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey("value")) {
-    return;
-  }
-  el._value = value;
-  const oldValue = el.tagName === "OPTION" ? el.getAttribute("value") : el.value;
-  const newValue = value == null ? "" : value;
-  if (oldValue !== newValue) {
-    el.value = newValue;
-  }
-  if (value == null) {
-    el.removeAttribute("value");
-  }
-}
-function setText(el, ...values) {
-  const value = values.length > 1 ? values.map(toDisplayString).join("") : toDisplayString(values[0]);
-  if (el.$txt !== value) {
-    el.textContent = el.$txt = value;
-  }
-}
-function setHtml(el, value) {
-  value = value == null ? "" : value;
-  if (el.$html !== value) {
-    el.innerHTML = el.$html = value;
-  }
-}
-function setDynamicProps(el, args) {
-  const props = args.length > 1 ? mergeProps(...args) : args[0];
-  const cacheKey = `$dprops${isApplyingFallthroughProps ? "$" : ""}`;
-  const prevKeys = el[cacheKey];
-  if (prevKeys) {
-    for (const key of prevKeys) {
-      if (!(key in props)) {
-        setDynamicProp(el, key, null);
+    node = insertionAnchor ? insertionAnchor.previousSibling : insertionParent ? insertionParent.lastChild : currentHydrationNode;
+    if (node && isComment(node, "]")) {
+      if (node.$fs) {
+        node = node.$fs;
+      } else {
+        let cur = node;
+        let curFragEnd = node;
+        let fragDepth = 0;
+        node = null;
+        while (cur) {
+          cur = cur.previousSibling;
+          if (cur) {
+            if (isComment(cur, "[")) {
+              curFragEnd.$fs = cur;
+              if (!fragDepth) {
+                node = cur;
+                break;
+              } else {
+                fragDepth--;
+              }
+            } else if (isComment(cur, "]")) {
+              curFragEnd = cur;
+              fragDepth++;
+            }
+          }
+        }
       }
     }
   }
-  for (const key of el[cacheKey] = Object.keys(props)) {
-    setDynamicProp(el, key, props[key]);
-  }
-}
-function setDynamicProp(el, key, value) {
-  const isSVG = false;
-  if (key === "class") {
-    setClass(el, value);
-  } else if (key === "style") {
-    setStyle(el, value);
-  } else if (isOn(key)) {
-    on(el, key[2].toLowerCase() + key.slice(3), () => value, { effect: true });
-  } else if (key[0] === "." ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, value, isSVG)) {
-    if (key === "innerHTML") {
-      setHtml(el, value);
-    } else if (key === "textContent") {
-      setText(el, value);
-    } else if (key === "value" && canSetValueDirectly(el.tagName)) {
-      setValue(el, value);
-    } else {
-      setDOMProp(el, key, value);
-    }
-  } else {
-    setAttr(el, key, value);
-  }
-  return value;
-}
-
-function createTextNode(values) {
-  const node = document.createTextNode("");
-  if (values) {
-    if (isArray(values)) {
-      setText(node, ...values);
-    } else {
-      renderEffect(() => setText(node, ...values()));
-    }
+  if (!!(process.env.NODE_ENV !== "production") && !node) {
+    warn("Hydration mismatch in ", insertionParent);
   }
-  return node;
-}
-/*! #__NO_SIDE_EFFECTS__ */
-// @__NO_SIDE_EFFECTS__
-function createComment(data) {
-  return document.createComment(data);
+  resetInsertionState();
+  currentHydrationNode = node;
 }
 
-class Fragment {
+class VaporFragment {
   constructor(nodes) {
     this.nodes = nodes;
   }
 }
-class DynamicFragment extends Fragment {
+class DynamicFragment extends VaporFragment {
   constructor(anchorLabel) {
     super([]);
-    this.anchor = !!(process.env.NODE_ENV !== "production") && anchorLabel ? createComment(anchorLabel) : document.createTextNode("");
+    this.anchor = !!(process.env.NODE_ENV !== "production") && anchorLabel ? createComment(anchorLabel) : createTextNode();
   }
   update(render, key = render) {
     if (key === this.current) {
       return;
     }
     this.current = key;
-    pauseTracking();
+    const prevSub = setActiveSub();
     const parent = this.anchor.parentNode;
     if (this.scope) {
       this.scope.stop();
@@ -329,7 +146,7 @@ class DynamicFragment extends Fragment {
       this.nodes = this.scope.run(render) || [];
       if (parent) insert(this.nodes, parent, this.anchor);
     } else {
-      this.scope = undefined;
+      this.scope = void 0;
       this.nodes = [];
     }
     if (this.fallback && !isValidBlock(this.nodes)) {
@@ -337,11 +154,11 @@ class DynamicFragment extends Fragment {
       this.nodes = (this.scope || (this.scope = new EffectScope())).run(this.fallback) || [];
       parent && insert(this.nodes, parent, this.anchor);
     }
-    resetTracking();
+    setActiveSub(prevSub);
   }
 }
 function isFragment(val) {
-  return val instanceof Fragment;
+  return val instanceof VaporFragment;
 }
 function isBlock(val) {
   return val instanceof Node || isArray(val) || isVaporComponent(val) || isFragment(val);
@@ -360,15 +177,25 @@ function isValidBlock(block) {
 function insert(block, parent, anchor = null) {
   anchor = anchor === 0 ? parent.firstChild : anchor;
   if (block instanceof Node) {
-    parent.insertBefore(block, anchor);
+    if (!isHydrating) {
+      parent.insertBefore(block, anchor);
+    }
   } else if (isVaporComponent(block)) {
-    mountComponent(block, parent, anchor);
+    if (block.isMounted) {
+      insert(block.block, parent, anchor);
+    } else {
+      mountComponent(block, parent, anchor);
+    }
   } else if (isArray(block)) {
-    for (let i = 0; i < block.length; i++) {
-      insert(block[i], parent, anchor);
+    for (const b of block) {
+      insert(b, parent, anchor);
     }
   } else {
-    insert(block.nodes, parent, anchor);
+    if (block.insert) {
+      block.insert(parent, anchor);
+    } else {
+      insert(block.nodes, parent, anchor);
+    }
     if (block.anchor) insert(block.anchor, parent, anchor);
   }
 }
@@ -376,14 +203,9 @@ function prepend(parent, ...blocks) {
   let i = blocks.length;
   while (i--) insert(blocks[i], parent, 0);
 }
-let parentsWithUnmountedChildren = null;
 function remove(block, parent) {
-  const isRoot = !parentsWithUnmountedChildren;
-  if (isRoot) {
-    parentsWithUnmountedChildren = /* @__PURE__ */ new Set();
-  }
   if (block instanceof Node) {
-    parent.removeChild(block);
+    parent && parent.removeChild(block);
   } else if (isVaporComponent(block)) {
     unmountComponent(block, parent);
   } else if (isArray(block)) {
@@ -391,18 +213,16 @@ function remove(block, parent) {
       remove(block[i], parent);
     }
   } else {
-    remove(block.nodes, parent);
+    if (block.remove) {
+      block.remove(parent);
+    } else {
+      remove(block.nodes, parent);
+    }
     if (block.anchor) remove(block.anchor, parent);
     if (block.scope) {
       block.scope.stop();
     }
   }
-  if (isRoot) {
-    for (const i of parentsWithUnmountedChildren) {
-      i.children = i.children.filter((n) => !n.isUnmounted);
-    }
-    parentsWithUnmountedChildren = null;
-  }
 }
 function normalizeBlock(block) {
   if (!!!(process.env.NODE_ENV !== "production") && true) {
@@ -459,6 +279,69 @@ function propGetter(rawProps, key) {
   return rawProps[key] && resolveSource(rawProps[key]);
 }
 
+class RenderEffect extends ReactiveEffect {
+  constructor(render) {
+    super();
+    this.render = render;
+    const instance = currentInstance;
+    if (!!(process.env.NODE_ENV !== "production") && true && !this.subs && !isVaporComponent(instance)) {
+      warn("renderEffect called without active EffectScope or Vapor instance.");
+    }
+    const job = () => {
+      if (this.dirty) {
+        this.run();
+      }
+    };
+    this.updateJob = () => {
+      instance.isUpdating = false;
+      instance.u && invokeArrayFns(instance.u);
+    };
+    if (instance) {
+      if (!!(process.env.NODE_ENV !== "production")) {
+        this.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
+        this.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
+      }
+      job.i = instance;
+    }
+    this.job = job;
+    this.i = instance;
+  }
+  fn() {
+    const instance = this.i;
+    const scope = this.subs ? this.subs.sub : void 0;
+    const hasUpdateHooks = instance && (instance.bu || instance.u);
+    if (!!(process.env.NODE_ENV !== "production") && instance) {
+      startMeasure(instance, `renderEffect`);
+    }
+    const prev = setCurrentInstance(instance, scope);
+    if (hasUpdateHooks && instance.isMounted && !instance.isUpdating) {
+      instance.isUpdating = true;
+      instance.bu && invokeArrayFns(instance.bu);
+      this.render();
+      queuePostFlushCb(this.updateJob);
+    } else {
+      this.render();
+    }
+    setCurrentInstance(...prev);
+    if (!!(process.env.NODE_ENV !== "production") && instance) {
+      startMeasure(instance, `renderEffect`);
+    }
+  }
+  notify() {
+    const flags = this.flags;
+    if (!(flags & 256)) {
+      queueJob(this.job, this.i ? this.i.uid : void 0);
+    }
+  }
+}
+function renderEffect(fn, noLifecycle = false) {
+  const effect = new RenderEffect(fn);
+  if (noLifecycle) {
+    effect.fn = fn;
+  }
+  effect.run();
+}
+
 function resolveSource(source) {
   return isFunction(source) ? source() : source;
 }
@@ -471,6 +354,7 @@ function getPropsProxyHandlers(comp) {
   const isProp = propsOptions ? (key) => isString(key) && hasOwn(propsOptions, camelize(key)) : NO;
   const isAttr = propsOptions ? (key) => key !== "$" && !isProp(key) && !isEmitListener(emitsOptions, key) : YES;
   const getProp = (instance, key) => {
+    if (key === "__v_isReactive") return true;
     if (!isProp(key)) return;
     const rawProps = instance.rawProps;
     const dynamicSources = rawProps.$;
@@ -508,7 +392,7 @@ function getPropsProxyHandlers(comp) {
     return resolvePropValue(
       propsOptions,
       key,
-      undefined,
+      void 0,
       instance,
       resolveDefault,
       true
@@ -570,7 +454,7 @@ function getPropsProxyHandlers(comp) {
 }
 function getAttrFromRawProps(rawProps, key) {
   if (key === "$") return;
-  const merged = key === "class" || key === "style" ? [] : undefined;
+  const merged = key === "class" || key === "style" ? [] : void 0;
   const dynamicSources = rawProps.$;
   if (dynamicSources) {
     let i = dynamicSources.length;
@@ -579,7 +463,7 @@ function getAttrFromRawProps(rawProps, key) {
       source = dynamicSources[i];
       isDynamic = isFunction(source);
       source = isDynamic ? source() : source;
-      if (hasOwn(source, key)) {
+      if (source && hasOwn(source, key)) {
         const value = isDynamic ? source[key] : source[key]();
         if (merged) {
           merged.push(value);
@@ -596,7 +480,9 @@ function getAttrFromRawProps(rawProps, key) {
       return rawProps[key]();
     }
   }
-  return merged;
+  if (merged && merged.length) {
+    return merged;
+  }
 }
 function hasAttrFromRawProps(rawProps, key) {
   if (key === "$") return false;
@@ -604,7 +490,8 @@ function hasAttrFromRawProps(rawProps, key) {
   if (dynamicSources) {
     let i = dynamicSources.length;
     while (i--) {
-      if (hasOwn(resolveSource(dynamicSources[i]), key)) {
+      const source = resolveSource(dynamicSources[i]);
+      if (source && hasOwn(source, key)) {
         return true;
       }
     }
@@ -640,10 +527,9 @@ function normalizePropsOptions(comp) {
   return comp.__propsOptions = [normalized, needCastKeys];
 }
 function resolveDefault(factory, instance) {
-  const prev = currentInstance$1;
-  simpleSetCurrentInstance$1(instance);
+  const prev = setCurrentInstance(instance);
   const res = factory.call(null, instance.props);
-  simpleSetCurrentInstance$1(prev, instance);
+  setCurrentInstance(...prev);
   return res;
 }
 function hasFallthroughAttrs(comp, rawProps) {
@@ -718,36 +604,265 @@ function propsDeleteDevTrap(_, key) {
   );
   return true;
 }
+const rawPropsProxyHandlers = {
+  get: getAttrFromRawProps,
+  has: hasAttrFromRawProps,
+  ownKeys: getKeysFromRawProps,
+  getOwnPropertyDescriptor(target, key) {
+    if (hasAttrFromRawProps(target, key)) {
+      return {
+        configurable: true,
+        enumerable: true,
+        get: () => getAttrFromRawProps(target, key)
+      };
+    }
+  }
+};
 
-let currentInstance = null;
-{
-  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);
-    };
-  };
-  registerGlobalSetter(
-    `__VUE_INSTANCE_SETTERS__`,
-    (v) => currentInstance = v
-  );
-  registerGlobalSetter(
-    `__VUE_SSR_SETTERS__`,
-    (v) => v
-  );
+function addEventListener(el, event, handler, options) {
+  el.addEventListener(event, handler, options);
+  return () => el.removeEventListener(event, handler, options);
+}
+function on(el, event, handler, options = {}) {
+  addEventListener(el, event, handler, options);
+  if (options.effect) {
+    onEffectCleanup(() => {
+      el.removeEventListener(event, handler, options);
+    });
+  }
+}
+function delegate(el, event, handler) {
+  const key = `$evt${event}`;
+  const existing = el[key];
+  if (existing) {
+    if (isArray(existing)) {
+      existing.push(handler);
+    } else {
+      el[key] = [existing, handler];
+    }
+  } else {
+    el[key] = handler;
+  }
+}
+const delegatedEvents = /* @__PURE__ */ Object.create(null);
+const delegateEvents = (...names) => {
+  for (const name of names) {
+    if (!delegatedEvents[name]) {
+      delegatedEvents[name] = true;
+      document.addEventListener(name, delegatedEventHandler);
+    }
+  }
+};
+const delegatedEventHandler = (e) => {
+  let node = e.composedPath && e.composedPath()[0] || e.target;
+  if (e.target !== node) {
+    Object.defineProperty(e, "target", {
+      configurable: true,
+      value: node
+    });
+  }
+  Object.defineProperty(e, "currentTarget", {
+    configurable: true,
+    get() {
+      return node || document;
+    }
+  });
+  while (node !== null) {
+    const handlers = node[`$evt${e.type}`];
+    if (handlers) {
+      if (isArray(handlers)) {
+        for (const handler of handlers) {
+          if (!node.disabled) {
+            handler(e);
+            if (e.cancelBubble) return;
+          }
+        }
+      } else {
+        handlers(e);
+        if (e.cancelBubble) return;
+      }
+    }
+    node = node.host && node.host !== node && node.host instanceof Node ? node.host : node.parentNode;
+  }
+};
+function setDynamicEvents(el, events) {
+  for (const name in events) {
+    on(el, name, events[name], { effect: true });
+  }
+}
+
+const hasFallthroughKey = (key) => currentInstance.hasFallthrough && key in currentInstance.attrs;
+function setProp(el, key, value) {
+  if (key in el) {
+    setDOMProp(el, key, value);
+  } else {
+    setAttr(el, key, value);
+  }
+}
+function setAttr(el, key, value) {
+  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
+    return;
+  }
+  if (key === "true-value") {
+    el._trueValue = value;
+  } else if (key === "false-value") {
+    el._falseValue = value;
+  }
+  if (value !== el[`$${key}`]) {
+    el[`$${key}`] = value;
+    if (value != null) {
+      el.setAttribute(key, value);
+    } else {
+      el.removeAttribute(key);
+    }
+  }
+}
+function setDOMProp(el, key, value) {
+  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
+    return;
+  }
+  const prev = el[key];
+  if (value === prev) {
+    return;
+  }
+  let needRemove = false;
+  if (value === "" || value == null) {
+    const type = typeof prev;
+    if (value == null && type === "string") {
+      value = "";
+      needRemove = true;
+    } else if (type === "number") {
+      value = 0;
+      needRemove = true;
+    }
+  }
+  try {
+    el[key] = value;
+  } catch (e) {
+    if (!!(process.env.NODE_ENV !== "production") && !needRemove) {
+      warn(
+        `Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: value ${value} is invalid.`,
+        e
+      );
+    }
+  }
+  needRemove && el.removeAttribute(key);
+}
+function setClass(el, value) {
+  if (el.$root) {
+    setClassIncremental(el, value);
+  } else if ((value = normalizeClass(value)) !== el.$cls) {
+    el.className = el.$cls = value;
+  }
+}
+function setClassIncremental(el, value) {
+  const cacheKey = `$clsi${isApplyingFallthroughProps ? "$" : ""}`;
+  const prev = el[cacheKey];
+  if ((value = el[cacheKey] = normalizeClass(value)) !== prev) {
+    const nextList = value.split(/\s+/);
+    if (value) {
+      el.classList.add(...nextList);
+    }
+    if (prev) {
+      for (const cls of prev.split(/\s+/)) {
+        if (!nextList.includes(cls)) el.classList.remove(cls);
+      }
+    }
+  }
+}
+function setStyle(el, value) {
+  if (el.$root) {
+    setStyleIncremental(el, value);
+  } else {
+    const prev = el.$sty;
+    value = el.$sty = normalizeStyle(value);
+    patchStyle(el, prev, value);
+  }
+}
+function setStyleIncremental(el, value) {
+  const cacheKey = `$styi${isApplyingFallthroughProps ? "$" : ""}`;
+  const prev = el[cacheKey];
+  value = el[cacheKey] = isString(value) ? parseStringStyle(value) : normalizeStyle(value);
+  patchStyle(el, prev, value);
+  return value;
+}
+function setValue(el, value) {
+  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey("value")) {
+    return;
+  }
+  el._value = value;
+  const oldValue = el.tagName === "OPTION" ? el.getAttribute("value") : el.value;
+  const newValue = value == null ? "" : value;
+  if (oldValue !== newValue) {
+    el.value = newValue;
+  }
+  if (value == null) {
+    el.removeAttribute("value");
+  }
+}
+function setText(el, value) {
+  if (el.$txt !== value) {
+    el.nodeValue = el.$txt = value;
+  }
+}
+function setElementText(el, value) {
+  if (el.$txt !== (value = toDisplayString(value))) {
+    el.textContent = el.$txt = value;
+  }
+}
+function setHtml(el, value) {
+  value = value == null ? "" : value;
+  if (el.$html !== value) {
+    el.innerHTML = el.$html = value;
+  }
+}
+function setDynamicProps(el, args) {
+  const props = args.length > 1 ? mergeProps(...args) : args[0];
+  const cacheKey = `$dprops${isApplyingFallthroughProps ? "$" : ""}`;
+  const prevKeys = el[cacheKey];
+  if (prevKeys) {
+    for (const key of prevKeys) {
+      if (!(key in props)) {
+        setDynamicProp(el, key, null);
+      }
+    }
+  }
+  for (const key of el[cacheKey] = Object.keys(props)) {
+    setDynamicProp(el, key, props[key]);
+  }
+}
+function setDynamicProp(el, key, value) {
+  const isSVG = false;
+  if (key === "class") {
+    setClass(el, value);
+  } else if (key === "style") {
+    setStyle(el, value);
+  } else if (isOn(key)) {
+    on(el, key[2].toLowerCase() + key.slice(3), value, { effect: true });
+  } else if (key[0] === "." ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, value, isSVG)) {
+    if (key === "innerHTML") {
+      setHtml(el, value);
+    } else if (key === "textContent") {
+      setElementText(el, value);
+    } else if (key === "value" && canSetValueDirectly(el.tagName)) {
+      setValue(el, value);
+    } else {
+      setDOMProp(el, key, value);
+    }
+  } else {
+    setAttr(el, key, value);
+  }
+  return value;
+}
+let isOptimized = false;
+function optimizePropertyLookup() {
+  if (isOptimized) return;
+  isOptimized = true;
+  const proto = Element.prototype;
+  proto.$evtclick = void 0;
+  proto.$root = false;
+  proto.$html = proto.$txt = proto.$cls = proto.$sty = Text.prototype.$txt = "";
 }
-const simpleSetCurrentInstance = (i, unset) => {
-  currentInstance = i;
-  if (unset) {
-    unset.scope.off();
-  } else if (i) {
-    i.scope.on();
-  }
-};
 
 const dynamicSlotsProxyHandlers = {
   get: getSlot,
@@ -813,46 +928,53 @@ function getSlot(target, key) {
     return target[key];
   }
 }
-const dynamicSlotsPropsProxyHandlers = {
-  get: getAttrFromRawProps,
-  has: hasAttrFromRawProps,
-  ownKeys: getKeysFromRawProps,
-  getOwnPropertyDescriptor(target, key) {
-    if (hasAttrFromRawProps(target, key)) {
-      return {
-        configurable: true,
-        enumerable: true,
-        get: () => getAttrFromRawProps(target, key)
-      };
-    }
-  }
-};
 function createSlot(name, rawProps, fallback) {
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  if (isHydrating) {
+    locateHydrationNode();
+  } else {
+    resetInsertionState();
+  }
   const instance = currentInstance;
   const rawSlots = instance.rawSlots;
-  const isDynamicName = isFunction(name);
-  const fragment = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("slot") : new DynamicFragment();
-  const slotProps = rawProps ? new Proxy(rawProps, dynamicSlotsPropsProxyHandlers) : EMPTY_OBJ;
-  const renderSlot = () => {
-    const slot = getSlot(rawSlots, isFunction(name) ? name() : name);
-    if (slot) {
-      fragment.update(
-        slot._bound || (slot._bound = () => {
-          const slotContent = slot(slotProps);
-          if (slotContent instanceof DynamicFragment) {
-            slotContent.fallback = fallback;
-          }
-          return slotContent;
-        })
-      );
+  const slotProps = rawProps ? new Proxy(rawProps, rawPropsProxyHandlers) : EMPTY_OBJ;
+  let fragment;
+  if (isRef(rawSlots._)) {
+    fragment = instance.appContext.vapor.vdomSlot(
+      rawSlots._,
+      name,
+      slotProps,
+      instance,
+      fallback
+    );
+  } else {
+    fragment = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("slot") : new DynamicFragment();
+    const isDynamicName = isFunction(name);
+    const renderSlot = () => {
+      const slot = getSlot(rawSlots, isFunction(name) ? name() : name);
+      if (slot) {
+        fragment.update(
+          slot._bound || (slot._bound = () => {
+            const slotContent = slot(slotProps);
+            if (slotContent instanceof DynamicFragment) {
+              slotContent.fallback = fallback;
+            }
+            return slotContent;
+          })
+        );
+      } else {
+        fragment.update(fallback);
+      }
+    };
+    if (isDynamicName || rawSlots.$) {
+      renderEffect(renderSlot);
     } else {
-      fragment.update(fallback);
+      renderSlot();
     }
-  };
-  if (isDynamicName || rawSlots.$) {
-    renderEffect(renderSlot);
-  } else {
-    renderSlot();
+  }
+  if (!isHydrating && _insertionParent) {
+    insert(fragment, _insertionParent, _insertionAnchor);
   }
   return fragment;
 }
@@ -862,10 +984,11 @@ function hmrRerender(instance) {
   const parent = normalized[0].parentNode;
   const anchor = normalized[normalized.length - 1].nextSibling;
   remove(instance.block, parent);
-  const prev = currentInstance;
-  simpleSetCurrentInstance(instance);
+  const prev = setCurrentInstance(instance);
+  pushWarningContext(instance);
   devRender(instance);
-  simpleSetCurrentInstance(prev, instance);
+  popWarningContext();
+  setCurrentInstance(...prev);
   insert(instance.block, parent, anchor);
 }
 function hmrReload(instance, newComp) {
@@ -873,21 +996,38 @@ function hmrReload(instance, newComp) {
   const parent = normalized[0].parentNode;
   const anchor = normalized[normalized.length - 1].nextSibling;
   unmountComponent(instance, parent);
-  const prev = currentInstance;
-  simpleSetCurrentInstance(instance.parent);
+  const prev = setCurrentInstance(instance.parent);
   const newInstance = createComponent(
     newComp,
     instance.rawProps,
     instance.rawSlots,
     instance.isSingleRoot
   );
-  simpleSetCurrentInstance(prev, instance.parent);
+  setCurrentInstance(...prev);
   mountComponent(newInstance, parent, anchor);
 }
 
-function createComponent(component, rawProps, rawSlots, isSingleRoot, appContext) {
-  if (isSingleRoot && component.inheritAttrs !== false && isVaporComponent(currentInstance$1) && currentInstance$1.hasFallthrough) {
-    const attrs = currentInstance$1.attrs;
+function createComponent(component, rawProps, rawSlots, isSingleRoot, appContext = currentInstance && currentInstance.appContext || emptyContext) {
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  if (isHydrating) {
+    locateHydrationNode();
+  } else {
+    resetInsertionState();
+  }
+  if (appContext.vapor && !component.__vapor) {
+    const frag = appContext.vapor.vdomMount(
+      component,
+      rawProps,
+      rawSlots
+    );
+    if (!isHydrating && _insertionParent) {
+      insert(frag, _insertionParent, _insertionAnchor);
+    }
+    return frag;
+  }
+  if (isSingleRoot && component.inheritAttrs !== false && isVaporComponent(currentInstance) && currentInstance.hasFallthrough) {
+    const attrs = currentInstance.attrs;
     if (rawProps) {
       (rawProps.$ || (rawProps.$ = [])).push(
         () => attrs
@@ -902,13 +1042,20 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, appContext
     rawSlots,
     appContext
   );
+  if (!!(process.env.NODE_ENV !== "production") && component.__hmrId) {
+    registerHMR(instance);
+    instance.isSingleRoot = isSingleRoot;
+    instance.hmrRerender = hmrRerender.bind(null, instance);
+    instance.hmrReload = hmrReload.bind(null, instance);
+  }
   if (!!(process.env.NODE_ENV !== "production")) {
     pushWarningContext(instance);
     startMeasure(instance, `init`);
+    instance.propsOptions = normalizePropsOptions(component);
+    instance.emitsOptions = normalizeEmitsOptions(component);
   }
-  const prev = currentInstance$1;
-  simpleSetCurrentInstance$1(instance);
-  pauseTracking();
+  const prevInstance = setCurrentInstance(instance);
+  const prevSub = setActiveSub();
   if (!!(process.env.NODE_ENV !== "production")) {
     setupPropsValidation(instance);
   }
@@ -930,12 +1077,6 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, appContext
       instance.devtoolsRawSetupState = setupResult;
       instance.setupState = proxyRefs(setupResult);
       devRender(instance);
-      if (component.__hmrId) {
-        registerHMR(instance);
-        instance.isSingleRoot = isSingleRoot;
-        instance.hmrRerender = hmrRerender.bind(null, instance);
-        instance.hmrReload = hmrReload.bind(null, instance);
-      }
     }
   } else {
     if (!setupFn && component.render) {
@@ -948,24 +1089,31 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, appContext
       instance.block = setupResult;
     }
   }
-  if (instance.hasFallthrough && component.inheritAttrs !== false && instance.block instanceof Element && Object.keys(instance.attrs).length) {
-    renderEffect(() => {
-      isApplyingFallthroughProps = true;
-      setDynamicProps(instance.block, [instance.attrs]);
-      isApplyingFallthroughProps = false;
-    });
+  if (instance.hasFallthrough && component.inheritAttrs !== false && Object.keys(instance.attrs).length) {
+    const el = getRootElement(instance);
+    if (el) {
+      renderEffect(() => {
+        isApplyingFallthroughProps = true;
+        setDynamicProps(el, [instance.attrs]);
+        isApplyingFallthroughProps = false;
+      });
+    }
   }
-  resetTracking();
-  simpleSetCurrentInstance$1(prev, instance);
+  setActiveSub(prevSub);
+  setCurrentInstance(...prevInstance);
   if (!!(process.env.NODE_ENV !== "production")) {
     popWarningContext();
     endMeasure(instance, "init");
   }
+  onScopeDispose(() => unmountComponent(instance), true);
+  if (!isHydrating && _insertionParent) {
+    mountComponent(instance, _insertionParent, _insertionAnchor);
+  }
   return instance;
 }
 let isApplyingFallthroughProps = false;
 function devRender(instance) {
-  instance.block = callWithErrorHandling(
+  instance.block = (instance.type.render ? callWithErrorHandling(
     instance.type.render,
     instance,
     1,
@@ -976,7 +1124,20 @@ function devRender(instance) {
       instance.attrs,
       instance.slots
     ]
-  ) || [];
+  ) : callWithErrorHandling(
+    isFunction(instance.type) ? instance.type : instance.type.setup,
+    instance,
+    0,
+    [
+      instance.props,
+      {
+        slots: instance.slots,
+        attrs: instance.attrs,
+        emit: instance.emit,
+        expose: instance.expose
+      }
+    ]
+  )) || [];
 }
 const emptyContext = {
   app: null,
@@ -988,15 +1149,12 @@ class VaporComponentInstance {
     this.vapor = true;
     this.uid = nextUid();
     this.type = comp;
-    this.parent = currentInstance$1;
-    this.children = [];
-    if (currentInstance$1) {
-      if (isVaporComponent(currentInstance$1)) {
-        currentInstance$1.children.push(this);
-      }
-      this.appContext = currentInstance$1.appContext;
-      this.provides = currentInstance$1.provides;
-      this.ids = currentInstance$1.ids;
+    this.parent = currentInstance;
+    this.root = currentInstance ? currentInstance.root : this;
+    if (currentInstance) {
+      this.appContext = currentInstance.appContext;
+      this.provides = currentInstance.provides;
+      this.ids = currentInstance.ids;
     } else {
       this.appContext = appContext || emptyContext;
       this.provides = Object.create(this.appContext.provides);
@@ -1020,10 +1178,6 @@ class VaporComponentInstance {
     }
     this.rawSlots = rawSlots || EMPTY_OBJ;
     this.slots = rawSlots ? rawSlots.$ ? new Proxy(rawSlots, dynamicSlotsProxyHandlers) : rawSlots : EMPTY_OBJ;
-    if (!!(process.env.NODE_ENV !== "production")) {
-      this.propsOptions = normalizePropsOptions(comp);
-      this.emitsOptions = normalizeEmitsOptions(comp);
-    }
   }
   /**
    * Expose `getKeysFromRawProps` on the instance so it can be used in code
@@ -1040,6 +1194,13 @@ function createComponentWithFallback(comp, rawProps, rawSlots, isSingleRoot) {
   if (!isString(comp)) {
     return createComponent(comp, rawProps, rawSlots, isSingleRoot);
   }
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  if (isHydrating) {
+    locateHydrationNode();
+  } else {
+    resetInsertionState();
+  }
   const el = document.createElement(comp);
   el.$root = isSingleRoot;
   if (rawProps) {
@@ -1052,20 +1213,19 @@ function createComponentWithFallback(comp, rawProps, rawSlots, isSingleRoot) {
       insert(getSlot(rawSlots, "default")(), el);
     }
   }
+  if (!isHydrating && _insertionParent) {
+    insert(el, _insertionParent, _insertionAnchor);
+  }
   return el;
 }
 function mountComponent(instance, parent, anchor) {
   if (!!(process.env.NODE_ENV !== "production")) {
     startMeasure(instance, `mount`);
   }
-  if (!instance.isMounted) {
-    if (instance.bm) invokeArrayFns(instance.bm);
-    insert(instance.block, parent, anchor);
-    if (instance.m) queuePostFlushCb(() => invokeArrayFns(instance.m));
-    instance.isMounted = true;
-  } else {
-    insert(instance.block, parent, anchor);
-  }
+  if (instance.bm) invokeArrayFns(instance.bm);
+  insert(instance.block, parent, anchor);
+  if (instance.m) queuePostFlushCb(() => invokeArrayFns(instance.m));
+  instance.isMounted = true;
   if (!!(process.env.NODE_ENV !== "production")) {
     endMeasure(instance, `mount`);
   }
@@ -1079,27 +1239,12 @@ function unmountComponent(instance, parentNode) {
       invokeArrayFns(instance.bum);
     }
     instance.scope.stop();
-    for (const c of instance.children) {
-      unmountComponent(c);
-    }
-    instance.children = EMPTY_ARR;
-    if (parentNode) {
-      remove(instance.block, parentNode);
-      const parentInstance = instance.parent;
-      instance.parent = null;
-      if (isVaporComponent(parentInstance)) {
-        if (parentsWithUnmountedChildren) {
-          parentsWithUnmountedChildren.add(parentInstance);
-        } else {
-          remove$1(parentInstance.children, instance);
-        }
-      }
-    }
     if (instance.um) {
       queuePostFlushCb(() => invokeArrayFns(instance.um));
     }
     instance.isUnmounted = true;
-  } else if (parentNode) {
+  }
+  if (parentNode) {
     remove(instance.block, parentNode);
   }
 }
@@ -1110,10 +1255,27 @@ function getExposed(instance) {
     }));
   }
 }
+function getRootElement({
+  block
+}) {
+  if (block instanceof Element) {
+    return block;
+  }
+  if (block instanceof DynamicFragment) {
+    const { nodes } = block;
+    if (nodes instanceof Element && nodes.$root) {
+      return nodes;
+    }
+  }
+}
 
 let _createApp;
 const mountApp = (app, container) => {
+  optimizePropertyLookup();
   if (container.nodeType === 1) {
+    if (!!(process.env.NODE_ENV !== "production") && container.childNodes.length) {
+      warn("mount target container is not empty and will be cleared.");
+    }
     container.textContent = "";
   }
   const instance = createComponent(
@@ -1127,10 +1289,27 @@ const mountApp = (app, container) => {
   flushOnAppMount();
   return instance;
 };
+let _hydrateApp;
+const hydrateApp = (app, container) => {
+  optimizePropertyLookup();
+  let instance;
+  withHydration(container, () => {
+    instance = createComponent(
+      app._component,
+      app._props,
+      null,
+      false,
+      app._context
+    );
+    mountComponent(instance, container);
+    flushOnAppMount();
+  });
+  return instance;
+};
 const unmountApp = (app) => {
   unmountComponent(app._instance, app._container);
 };
-const createVaporApp = (comp, props) => {
+function prepareApp() {
   {
     initFeatureFlags();
   }
@@ -1139,8 +1318,8 @@ const createVaporApp = (comp, props) => {
   if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) {
     setDevtoolsHook(target.__VUE_DEVTOOLS_GLOBAL_HOOK__, target);
   }
-  if (!_createApp) _createApp = createAppAPI(mountApp, unmountApp, getExposed);
-  const app = _createApp(comp, props);
+}
+function postPrepareApp(app) {
   if (!!(process.env.NODE_ENV !== "production")) {
     app.config.globalProperties = new Proxy(
       {},
@@ -1152,64 +1331,296 @@ const createVaporApp = (comp, props) => {
       }
     );
   }
+  app.vapor = true;
   const mount = app.mount;
   app.mount = (container, ...args) => {
     container = normalizeContainer(container);
     return mount(container, ...args);
   };
+}
+const createVaporApp = (comp, props) => {
+  prepareApp();
+  if (!_createApp) _createApp = createAppAPI(mountApp, unmountApp, getExposed);
+  const app = _createApp(comp, props);
+  postPrepareApp(app);
+  return app;
+};
+const createVaporSSRApp = (comp, props) => {
+  prepareApp();
+  if (!_hydrateApp)
+    _hydrateApp = createAppAPI(hydrateApp, unmountApp, getExposed);
+  const app = _hydrateApp(comp, props);
+  postPrepareApp(app);
   return app;
 };
 
 /*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
-function defineVaporComponent(comp) {
+function defineVaporComponent(comp, extraOptions) {
+  if (isFunction(comp)) {
+    return /* @__PURE__ */ (() => extend({ name: comp.name }, extraOptions, {
+      setup: comp,
+      __vapor: true
+    }))();
+  }
   comp.__vapor = true;
   return comp;
 }
 
+const vaporInteropImpl = {
+  mount(vnode, container, anchor, parentComponent) {
+    const selfAnchor = vnode.el = vnode.anchor = createTextNode();
+    container.insertBefore(selfAnchor, anchor);
+    const prev = currentInstance;
+    simpleSetCurrentInstance(parentComponent);
+    const propsRef = shallowRef(vnode.props);
+    const slotsRef = shallowRef(vnode.children);
+    const instance = vnode.component = createComponent(
+      vnode.type,
+      {
+        $: [() => propsRef.value]
+      },
+      {
+        _: slotsRef
+        // pass the slots ref
+      }
+    );
+    instance.rawPropsRef = propsRef;
+    instance.rawSlotsRef = slotsRef;
+    mountComponent(instance, container, selfAnchor);
+    simpleSetCurrentInstance(prev);
+    return instance;
+  },
+  update(n1, n2, shouldUpdate) {
+    n2.component = n1.component;
+    n2.el = n2.anchor = n1.anchor;
+    if (shouldUpdate) {
+      const instance = n2.component;
+      instance.rawPropsRef.value = n2.props;
+      instance.rawSlotsRef.value = n2.children;
+    }
+  },
+  unmount(vnode, doRemove) {
+    const container = doRemove ? vnode.anchor.parentNode : void 0;
+    if (vnode.component) {
+      unmountComponent(vnode.component, container);
+    } else if (vnode.vb) {
+      remove(vnode.vb, container);
+    }
+    remove(vnode.anchor, container);
+  },
+  /**
+   * vapor slot in vdom
+   */
+  slot(n1, n2, container, anchor) {
+    if (!n1) {
+      const selfAnchor = n2.el = n2.anchor = createTextNode();
+      insert(selfAnchor, container, anchor);
+      const { slot, fallback } = n2.vs;
+      const propsRef = n2.vs.ref = shallowRef(n2.props);
+      const slotBlock = slot(new Proxy(propsRef, vaporSlotPropsProxyHandler));
+      insert(n2.vb = slotBlock, container, selfAnchor);
+    } else {
+      n2.el = n2.anchor = n1.anchor;
+      n2.vb = n1.vb;
+      (n2.vs.ref = n1.vs.ref).value = n2.props;
+    }
+  },
+  move(vnode, container, anchor) {
+    insert(vnode.vb || vnode.component, container, anchor);
+    insert(vnode.anchor, container, anchor);
+  }
+};
+const vaporSlotPropsProxyHandler = {
+  get(target, key) {
+    return target.value[key];
+  },
+  has(target, key) {
+    return target.value[key];
+  },
+  ownKeys(target) {
+    return Object.keys(target.value);
+  }
+};
+const vaporSlotsProxyHandler = {
+  get(target, key) {
+    const slot = target[key];
+    if (isFunction(slot)) {
+      slot.__vapor = true;
+    }
+    return slot;
+  }
+};
+function createVDOMComponent(internals, component, rawProps, rawSlots) {
+  const frag = new VaporFragment([]);
+  const vnode = createVNode(
+    component,
+    rawProps && new Proxy(rawProps, rawPropsProxyHandlers)
+  );
+  const wrapper = new VaporComponentInstance(
+    { props: component.props },
+    rawProps,
+    rawSlots
+  );
+  vnode.vi = (instance) => {
+    instance.props = shallowReactive(wrapper.props);
+    const attrs = instance.attrs = createInternalObject();
+    for (const key in wrapper.attrs) {
+      if (!isEmitListener(instance.emitsOptions, key)) {
+        attrs[key] = wrapper.attrs[key];
+      }
+    }
+    instance.slots = wrapper.slots === EMPTY_OBJ ? EMPTY_OBJ : new Proxy(wrapper.slots, vaporSlotsProxyHandler);
+  };
+  let isMounted = false;
+  const parentInstance = currentInstance;
+  const unmount = (parentNode) => {
+    internals.umt(vnode.component, null, !!parentNode);
+  };
+  frag.insert = (parentNode, anchor) => {
+    if (!isMounted) {
+      internals.mt(
+        vnode,
+        parentNode,
+        anchor,
+        parentInstance,
+        null,
+        void 0,
+        false
+      );
+      onScopeDispose$1(unmount, true);
+      isMounted = true;
+    } else {
+      internals.m(
+        vnode,
+        parentNode,
+        anchor,
+        2,
+        parentInstance
+      );
+    }
+  };
+  frag.remove = unmount;
+  return frag;
+}
+function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallback) {
+  const frag = new VaporFragment([]);
+  let isMounted = false;
+  let fallbackNodes;
+  let oldVNode = null;
+  frag.insert = (parentNode, anchor) => {
+    if (!isMounted) {
+      renderEffect(() => {
+        const vnode = renderSlot(
+          slotsRef.value,
+          isFunction(name) ? name() : name,
+          props
+        );
+        if (vnode.children.length) {
+          if (fallbackNodes) {
+            remove(fallbackNodes, parentNode);
+            fallbackNodes = void 0;
+          }
+          internals.p(
+            oldVNode,
+            vnode,
+            parentNode,
+            anchor,
+            parentComponent
+          );
+          oldVNode = vnode;
+        } else {
+          if (fallback && !fallbackNodes) {
+            if (oldVNode) {
+              internals.um(oldVNode, parentComponent, null, true);
+            }
+            insert(fallbackNodes = fallback(props), parentNode, anchor);
+          }
+          oldVNode = null;
+        }
+      });
+      isMounted = true;
+    } else {
+      internals.m(
+        oldVNode,
+        parentNode,
+        anchor,
+        2,
+        parentComponent
+      );
+    }
+    frag.remove = (parentNode2) => {
+      if (fallbackNodes) {
+        remove(fallbackNodes, parentNode2);
+      } else if (oldVNode) {
+        internals.um(oldVNode, parentComponent, null);
+      }
+    };
+  };
+  return frag;
+}
+const vaporInteropPlugin = (app) => {
+  const internals = ensureRenderer().internals;
+  app._context.vapor = extend(vaporInteropImpl, {
+    vdomMount: createVDOMComponent.bind(null, internals),
+    vdomUnmount: internals.umt,
+    vdomSlot: renderVDOMSlot.bind(null, internals)
+  });
+  const mount = app.mount;
+  app.mount = (...args) => {
+    optimizePropertyLookup();
+    return mount(...args);
+  };
+};
+
+let t;
 /*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
 function template(html, root) {
   let node;
-  const create = () => {
-    const t = document.createElement("template");
-    t.innerHTML = html;
-    return t.content.firstChild;
-  };
   return () => {
-    const ret = (node || (node = create())).cloneNode(true);
+    if (isHydrating) {
+      if (!!(process.env.NODE_ENV !== "production") && !currentHydrationNode) {
+        throw new Error("No current hydration node");
+      }
+      return adoptTemplate(currentHydrationNode, html);
+    }
+    if (html[0] !== "<") {
+      return createTextNode(html);
+    }
+    if (!node) {
+      t = t || document.createElement("template");
+      t.innerHTML = html;
+      node = child(t.content);
+    }
+    const ret = node.cloneNode(true);
     if (root) ret.$root = true;
     return ret;
   };
 }
-/*! #__NO_SIDE_EFFECTS__ */
-// @__NO_SIDE_EFFECTS__
-function children(node, ...paths) {
-  for (const idx of paths) {
-    node = idx === 0 ? node.firstChild : idx === 1 ? node.firstChild.nextSibling : node.childNodes[idx];
-  }
-  return node;
-}
-/*! #__NO_SIDE_EFFECTS__ */
-// @__NO_SIDE_EFFECTS__
-function next(node, offset) {
-  for (let i = 0; i < offset; i++) {
-    node = node.nextSibling;
-  }
-  return node;
-}
 
 function createIf(condition, b1, b2, once) {
-  const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("if") : new DynamicFragment();
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  if (isHydrating) {
+    locateHydrationNode();
+  } else {
+    resetInsertionState();
+  }
+  let frag;
   if (once) {
-    frag.update(condition() ? b1 : b2);
+    frag = condition() ? b1() : b2 ? b2() : [];
   } else {
+    frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("if") : new DynamicFragment();
     renderEffect(() => frag.update(condition() ? b1 : b2));
   }
+  if (!isHydrating && _insertionParent) {
+    insert(frag, _insertionParent, _insertionAnchor);
+  }
   return frag;
 }
 
-class ForBlock extends Fragment {
+class ForBlock extends VaporFragment {
   constructor(nodes, scope, item, key, index, renderKey) {
     super(nodes);
     this.scope = scope;
@@ -1219,15 +1630,25 @@ class ForBlock extends Fragment {
     this.key = renderKey;
   }
 }
-/*! #__NO_SIDE_EFFECTS__ */
-const createFor = /* @__NO_SIDE_EFFECTS__ */ (src, renderItem, getKey, isComponent = false, once) => {
+const createFor = (src, renderItem, getKey, flags = 0) => {
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  if (isHydrating) {
+    locateHydrationNode();
+  } else {
+    resetInsertionState();
+  }
   let isMounted = false;
   let oldBlocks = [];
   let newBlocks;
   let parent;
+  let currentKey;
   const parentAnchor = !!(process.env.NODE_ENV !== "production") ? createComment("for") : createTextNode();
-  const ref = new Fragment(oldBlocks);
-  const instance = currentInstance$1;
+  const frag = new VaporFragment(oldBlocks);
+  const instance = currentInstance;
+  const canUseFastRemove = !!(flags & 1);
+  const isComponent = !!(flags & 2);
+  const selectors = [];
   if (!!(process.env.NODE_ENV !== "production") && !instance) {
     warn("createFor() can only be used inside setup()");
   }
@@ -1236,6 +1657,7 @@ const createFor = /* @__NO_SIDE_EFFECTS__ */ (src, renderItem, getKey, isCompone
     const newLength = source.values.length;
     const oldLength = oldBlocks.length;
     newBlocks = new Array(newLength);
+    const prevSub = setActiveSub();
     if (!isMounted) {
       isMounted = true;
       for (let i = 0; i < newLength; i++) {
@@ -1248,8 +1670,16 @@ const createFor = /* @__NO_SIDE_EFFECTS__ */ (src, renderItem, getKey, isCompone
           mount(source, i);
         }
       } else if (!newLength) {
+        for (const selector of selectors) {
+          selector.cleanup();
+        }
+        const doRemove = !canUseFastRemove;
         for (let i = 0; i < oldLength; i++) {
-          unmount(oldBlocks[i]);
+          unmount(oldBlocks[i], doRemove, false);
+        }
+        if (canUseFastRemove) {
+          parent.textContent = "";
+          parent.appendChild(parentAnchor);
         }
       } else if (!getKey) {
         const commonLength = Math.min(newLength, oldLength);
@@ -1263,104 +1693,157 @@ const createFor = /* @__NO_SIDE_EFFECTS__ */ (src, renderItem, getKey, isCompone
           unmount(oldBlocks[i]);
         }
       } else {
-        let i = 0;
-        let e1 = oldLength - 1;
-        let e2 = newLength - 1;
-        while (i <= e1 && i <= e2) {
-          if (tryPatchIndex(source, i)) {
-            i++;
-          } else {
-            break;
+        const sharedBlockCount = Math.min(oldLength, newLength);
+        const previousKeyIndexPairs = new Array(oldLength);
+        const queuedBlocks = new Array(newLength);
+        let anchorFallback = parentAnchor;
+        let endOffset = 0;
+        let startOffset = 0;
+        let queuedBlocksInsertIndex = 0;
+        let previousKeyIndexInsertIndex = 0;
+        while (endOffset < sharedBlockCount) {
+          const currentIndex = newLength - endOffset - 1;
+          const currentItem = getItem(source, currentIndex);
+          const currentKey2 = getKey(...currentItem);
+          const existingBlock = oldBlocks[oldLength - endOffset - 1];
+          if (existingBlock.key === currentKey2) {
+            update(existingBlock, ...currentItem);
+            newBlocks[currentIndex] = existingBlock;
+            endOffset++;
+            continue;
           }
+          if (endOffset !== 0) {
+            anchorFallback = normalizeAnchor(newBlocks[currentIndex + 1].nodes);
+          }
+          break;
         }
-        while (i <= e1 && i <= e2) {
-          if (tryPatchIndex(source, i)) {
-            e1--;
-            e2--;
+        while (startOffset < sharedBlockCount - endOffset) {
+          const currentItem = getItem(source, startOffset);
+          const currentKey2 = getKey(...currentItem);
+          const previousBlock = oldBlocks[startOffset];
+          const previousKey = previousBlock.key;
+          if (previousKey === currentKey2) {
+            update(newBlocks[startOffset] = previousBlock, currentItem[0]);
           } else {
-            break;
+            queuedBlocks[queuedBlocksInsertIndex++] = [
+              startOffset,
+              currentItem,
+              currentKey2
+            ];
+            previousKeyIndexPairs[previousKeyIndexInsertIndex++] = [
+              previousKey,
+              startOffset
+            ];
           }
+          startOffset++;
         }
-        if (i > e1) {
-          if (i <= e2) {
-            const nextPos = e2 + 1;
-            const anchor = nextPos < newLength ? normalizeAnchor(newBlocks[nextPos].nodes) : parentAnchor;
-            while (i <= e2) {
-              mount(source, i, anchor);
-              i++;
-            }
-          }
-        } else if (i > e2) {
-          while (i <= e1) {
-            unmount(oldBlocks[i]);
-            i++;
+        for (let i = startOffset; i < oldLength - endOffset; i++) {
+          previousKeyIndexPairs[previousKeyIndexInsertIndex++] = [
+            oldBlocks[i].key,
+            i
+          ];
+        }
+        const preparationBlockCount = Math.min(
+          newLength - endOffset,
+          sharedBlockCount
+        );
+        for (let i = startOffset; i < preparationBlockCount; i++) {
+          const blockItem = getItem(source, i);
+          const blockKey = getKey(...blockItem);
+          queuedBlocks[queuedBlocksInsertIndex++] = [i, blockItem, blockKey];
+        }
+        if (!queuedBlocksInsertIndex && !previousKeyIndexInsertIndex) {
+          for (let i = preparationBlockCount; i < newLength - endOffset; i++) {
+            const blockItem = getItem(source, i);
+            const blockKey = getKey(...blockItem);
+            mount(source, i, anchorFallback, blockItem, blockKey);
           }
         } else {
-          const s1 = i;
-          const s2 = i;
-          const keyToNewIndexMap = /* @__PURE__ */ new Map();
-          for (i = s2; i <= e2; i++) {
-            keyToNewIndexMap.set(getKey(...getItem(source, i)), i);
-          }
-          let j;
-          let patched = 0;
-          const toBePatched = e2 - s2 + 1;
-          let moved = false;
-          let maxNewIndexSoFar = 0;
-          const newIndexToOldIndexMap = new Array(toBePatched).fill(0);
-          for (i = s1; i <= e1; i++) {
-            const prevBlock = oldBlocks[i];
-            if (patched >= toBePatched) {
-              unmount(prevBlock);
+          queuedBlocks.length = queuedBlocksInsertIndex;
+          previousKeyIndexPairs.length = previousKeyIndexInsertIndex;
+          const previousKeyIndexMap = new Map(previousKeyIndexPairs);
+          const blocksToMount = [];
+          const relocateOrMountBlock = (blockIndex, blockItem, blockKey, anchorOffset) => {
+            const previousIndex = previousKeyIndexMap.get(blockKey);
+            if (previousIndex !== void 0) {
+              const reusedBlock = newBlocks[blockIndex] = oldBlocks[previousIndex];
+              update(reusedBlock, ...blockItem);
+              insert(
+                reusedBlock,
+                parent,
+                anchorOffset === -1 ? anchorFallback : normalizeAnchor(newBlocks[anchorOffset].nodes)
+              );
+              previousKeyIndexMap.delete(blockKey);
             } else {
-              const newIndex = keyToNewIndexMap.get(prevBlock.key);
-              if (newIndex == null) {
-                unmount(prevBlock);
-              } else {
-                newIndexToOldIndexMap[newIndex - s2] = i + 1;
-                if (newIndex >= maxNewIndexSoFar) {
-                  maxNewIndexSoFar = newIndex;
-                } else {
-                  moved = true;
-                }
-                update(
-                  newBlocks[newIndex] = prevBlock,
-                  ...getItem(source, newIndex)
-                );
-                patched++;
-              }
+              blocksToMount.push([
+                blockIndex,
+                blockItem,
+                blockKey,
+                anchorOffset
+              ]);
             }
+          };
+          for (let i = queuedBlocks.length - 1; i >= 0; i--) {
+            const [blockIndex, blockItem, blockKey] = queuedBlocks[i];
+            relocateOrMountBlock(
+              blockIndex,
+              blockItem,
+              blockKey,
+              blockIndex < preparationBlockCount - 1 ? blockIndex + 1 : -1
+            );
           }
-          const increasingNewIndexSequence = moved ? getSequence(newIndexToOldIndexMap) : [];
-          j = increasingNewIndexSequence.length - 1;
-          for (i = toBePatched - 1; i >= 0; i--) {
-            const nextIndex = s2 + i;
-            const anchor = nextIndex + 1 < newLength ? normalizeAnchor(newBlocks[nextIndex + 1].nodes) : parentAnchor;
-            if (newIndexToOldIndexMap[i] === 0) {
-              mount(source, nextIndex, anchor);
-            } else if (moved) {
-              if (j < 0 || i !== increasingNewIndexSequence[j]) {
-                insert(newBlocks[nextIndex].nodes, parent, anchor);
-              } else {
-                j--;
-              }
+          for (let i = preparationBlockCount; i < newLength - endOffset; i++) {
+            const blockItem = getItem(source, i);
+            const blockKey = getKey(...blockItem);
+            relocateOrMountBlock(i, blockItem, blockKey, -1);
+          }
+          const useFastRemove = blocksToMount.length === newLength;
+          for (const leftoverIndex of previousKeyIndexMap.values()) {
+            unmount(
+              oldBlocks[leftoverIndex],
+              !(useFastRemove && canUseFastRemove),
+              !useFastRemove
+            );
+          }
+          if (useFastRemove) {
+            for (const selector of selectors) {
+              selector.cleanup();
+            }
+            if (canUseFastRemove) {
+              parent.textContent = "";
+              parent.appendChild(parentAnchor);
             }
           }
+          for (const [
+            blockIndex,
+            blockItem,
+            blockKey,
+            anchorOffset
+          ] of blocksToMount) {
+            mount(
+              source,
+              blockIndex,
+              anchorOffset === -1 ? anchorFallback : normalizeAnchor(newBlocks[anchorOffset].nodes),
+              blockItem,
+              blockKey
+            );
+          }
         }
       }
     }
-    ref.nodes = [oldBlocks = newBlocks];
+    frag.nodes = [oldBlocks = newBlocks];
     if (parentAnchor) {
-      ref.nodes.push(parentAnchor);
+      frag.nodes.push(parentAnchor);
     }
+    setActiveSub(prevSub);
   };
   const needKey = renderItem.length > 1;
   const needIndex = renderItem.length > 2;
-  const mount = (source, idx, anchor = parentAnchor) => {
-    const [item, key, index] = getItem(source, idx);
-    const itemRef = shallowRef(item);
-    const keyRef = needKey ? shallowRef(key) : undefined;
-    const indexRef = needIndex ? shallowRef(index) : undefined;
+  const mount = (source, idx, anchor = parentAnchor, [item, key, index] = getItem(source, idx), key2 = getKey && getKey(item, key, index)) => {
+    const itemRef = shallowRef$1(item);
+    const keyRef = needKey ? shallowRef$1(key) : void 0;
+    const indexRef = needIndex ? shallowRef$1(index) : void 0;
+    currentKey = key2;
     let nodes;
     let scope;
     if (isComponent) {
@@ -1377,36 +1860,88 @@ const createFor = /* @__NO_SIDE_EFFECTS__ */ (src, renderItem, getKey, isCompone
       itemRef,
       keyRef,
       indexRef,
-      getKey && getKey(item, key, index)
+      key2
     );
     if (parent) insert(block.nodes, parent, anchor);
     return block;
   };
-  const tryPatchIndex = (source, idx) => {
-    const block = oldBlocks[idx];
-    const [item, key, index] = getItem(source, idx);
-    if (block.key === getKey(item, key, index)) {
-      update(newBlocks[idx] = block, item);
-      return true;
-    }
-  };
   const update = ({ itemRef, keyRef, indexRef }, newItem, newKey, newIndex) => {
-    if (newIndex !== itemRef.value) {
+    if (newItem !== itemRef.value) {
       itemRef.value = newItem;
     }
-    if (keyRef && newKey !== undefined && newKey !== keyRef.value) {
+    if (keyRef && newKey !== void 0 && newKey !== keyRef.value) {
       keyRef.value = newKey;
     }
-    if (indexRef && newIndex !== undefined && newIndex !== indexRef.value) {
+    if (indexRef && newIndex !== void 0 && newIndex !== indexRef.value) {
       indexRef.value = newIndex;
     }
   };
-  const unmount = ({ nodes, scope }) => {
-    remove(nodes, parent);
-    scope && scope.stop();
+  const unmount = (block, doRemove = true, doDeregister = true) => {
+    if (!isComponent) {
+      block.scope.stop();
+    }
+    if (doRemove) {
+      remove(block.nodes, parent);
+    }
+    if (doDeregister) {
+      for (const selector of selectors) {
+        selector.deregister(block.key);
+      }
+    }
   };
-  once ? renderList() : renderEffect(renderList);
-  return ref;
+  if (flags & 4) {
+    renderList();
+  } else {
+    renderEffect(renderList);
+  }
+  if (!isHydrating && _insertionParent) {
+    insert(frag, _insertionParent, _insertionAnchor);
+  }
+  frag.useSelector = useSelector;
+  return frag;
+  function useSelector(source) {
+    let operMap = /* @__PURE__ */ new Map();
+    let activeKey = source();
+    let activeOpers;
+    watch(source, (newValue) => {
+      if (activeOpers !== void 0) {
+        for (const oper of activeOpers) {
+          oper();
+        }
+      }
+      activeOpers = operMap.get(newValue);
+      if (activeOpers !== void 0) {
+        for (const oper of activeOpers) {
+          oper();
+        }
+      }
+    });
+    selectors.push({ deregister, cleanup });
+    return register;
+    function cleanup() {
+      operMap = /* @__PURE__ */ new Map();
+      activeOpers = void 0;
+    }
+    function register(oper) {
+      oper();
+      let opers = operMap.get(currentKey);
+      if (opers !== void 0) {
+        opers.push(oper);
+      } else {
+        opers = [oper];
+        operMap.set(currentKey, opers);
+        if (currentKey === activeKey) {
+          activeOpers = opers;
+        }
+      }
+    }
+    function deregister(key) {
+      operMap.delete(key);
+      if (key === activeKey) {
+        activeOpers = void 0;
+      }
+    }
+  }
 };
 function createForSlots(rawSource, getSlot) {
   const source = normalizeSource(rawSource);
@@ -1420,11 +1955,13 @@ function createForSlots(rawSource, getSlot) {
 function normalizeSource(source) {
   let values = source;
   let needsWrap = false;
+  let isReadonlySource = false;
   let keys;
   if (isArray(source)) {
     if (isReactive(source)) {
       needsWrap = !isShallow(source);
       values = shallowReadArray(source);
+      isReadonlySource = isReadonly(source);
     }
   } else if (isString(source)) {
     values = source.split("");
@@ -1445,14 +1982,19 @@ function normalizeSource(source) {
       }
     }
   }
-  return { values, needsWrap, keys };
+  return {
+    values,
+    needsWrap,
+    isReadonlySource,
+    keys
+  };
 }
-function getItem({ keys, values, needsWrap }, idx) {
-  const value = needsWrap ? toReactive(values[idx]) : values[idx];
+function getItem({ keys, values, needsWrap, isReadonlySource }, idx) {
+  const value = needsWrap ? isReadonlySource ? toReadonly(toReactive(values[idx])) : toReactive(values[idx]) : values[idx];
   if (keys) {
     return [value, keys[idx], idx];
   } else {
-    return [value, idx, undefined];
+    return [value, idx, void 0];
   }
 }
 function normalizeAnchor(node) {
@@ -1474,17 +2016,17 @@ function getRestElement(val, keys) {
   return res;
 }
 function getDefaultValue(val, defaultVal) {
-  return val === undefined ? defaultVal : val;
+  return val === void 0 ? defaultVal : val;
 }
 
 function createTemplateRefSetter() {
-  const instance = currentInstance$1;
+  const instance = currentInstance;
   return (...args) => setRef(instance, ...args);
 }
 function setRef(instance, el, ref, oldRef, refFor = false) {
   if (!instance || instance.isUnmounted) return;
   const setupState = !!(process.env.NODE_ENV !== "production") ? instance.setupState || {} : null;
-  const refValue = isVaporComponent(el) ? getExposed(el) || el : el;
+  const refValue = getRefValue(el);
   const refs = instance.refs === EMPTY_OBJ ? instance.refs = {} : instance.refs;
   if (oldRef != null && oldRef !== ref) {
     if (isString(oldRef)) {
@@ -1492,13 +2034,13 @@ function setRef(instance, el, ref, oldRef, refFor = false) {
       if (!!(process.env.NODE_ENV !== "production") && hasOwn(setupState, oldRef)) {
         setupState[oldRef] = null;
       }
-    } else if (isRef(oldRef)) {
+    } else if (isRef$1(oldRef)) {
       oldRef.value = null;
     }
   }
   if (isFunction(ref)) {
     const invokeRefSetter = (value) => {
-      callWithErrorHandling(ref, currentInstance$1, 12, [
+      callWithErrorHandling(ref, currentInstance, 12, [
         value,
         refs
       ]);
@@ -1507,7 +2049,7 @@ function setRef(instance, el, ref, oldRef, refFor = false) {
     onScopeDispose(() => invokeRefSetter());
   } else {
     const _isString = isString(ref);
-    const _isRef = isRef(ref);
+    const _isRef = isRef$1(ref);
     let existing;
     if (_isString || _isRef) {
       const doSet = () => {
@@ -1538,8 +2080,7 @@ function setRef(instance, el, ref, oldRef, refFor = false) {
           warn("Invalid template ref type:", ref, `(${typeof ref})`);
         }
       };
-      doSet.id = -1;
-      queuePostFlushCb(doSet);
+      queuePostFlushCb(doSet, -1);
       onScopeDispose(() => {
         queuePostFlushCb(() => {
           if (isArray(existing)) {
@@ -1560,8 +2101,23 @@ function setRef(instance, el, ref, oldRef, refFor = false) {
   }
   return ref;
 }
+const getRefValue = (el) => {
+  if (isVaporComponent(el)) {
+    return getExposed(el) || el;
+  } else if (el instanceof DynamicFragment) {
+    return getRefValue(el.nodes);
+  }
+  return el;
+};
 
 function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot) {
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  if (isHydrating) {
+    locateHydrationNode();
+  } else {
+    resetInsertionState();
+  }
   const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("dynamic-component") : new DynamicFragment();
   renderEffect(() => {
     const value = getter();
@@ -1575,6 +2131,9 @@ function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot) {
       value
     );
   });
+  if (!isHydrating && _insertionParent) {
+    insert(frag, _insertionParent, _insertionAnchor);
+  }
   return frag;
 }
 
@@ -1618,9 +2177,16 @@ function setDisplay(target, value) {
   }
 }
 
+function ensureMounted(cb) {
+  if (currentInstance.isMounted) {
+    cb();
+  } else {
+    onMounted(cb);
+  }
+}
 const applyTextModel = (el, get, set, { trim, number, lazy } = {}) => {
   vModelTextInit(el, trim, number, lazy, set);
-  onMounted(() => {
+  ensureMounted(() => {
     let value;
     renderEffect(() => {
       vModelTextUpdate(el, value, value = get(), trim, number, lazy);
@@ -1629,7 +2195,7 @@ const applyTextModel = (el, get, set, { trim, number, lazy } = {}) => {
 };
 const applyCheckboxModel = (el, get, set) => {
   vModelCheckboxInit(el, set);
-  onMounted(() => {
+  ensureMounted(() => {
     let value;
     renderEffect(() => {
       vModelCheckboxUpdate(
@@ -1643,7 +2209,7 @@ const applyCheckboxModel = (el, get, set) => {
 };
 const applyRadioModel = (el, get, set) => {
   addEventListener(el, "change", () => set(vModelGetValue(el)));
-  onMounted(() => {
+  ensureMounted(() => {
     let value;
     renderEffect(() => {
       if (value !== (value = get())) {
@@ -1654,7 +2220,7 @@ const applyRadioModel = (el, get, set) => {
 };
 const applySelectModel = (el, get, set, modifiers) => {
   vModelSelectInit(el, get(), modifiers && modifiers.number, set);
-  onMounted(() => {
+  ensureMounted(() => {
     renderEffect(() => vModelSetSelected(el, traverse(get())));
   });
 };
@@ -1672,36 +2238,13 @@ const applyDynamicModel = (el, get, set, modifiers) => {
   apply(el, get, set, modifiers);
 };
 
-const vaporInVDOMInterface = {
-  mount(vnode, container, anchor, parentComponent) {
-    const selfAnchor = vnode.anchor = document.createComment("vapor");
-    container.insertBefore(selfAnchor, anchor);
-    const prev = currentInstance$1;
-    simpleSetCurrentInstance$1(parentComponent);
-    const propsRef = shallowRef$1(vnode.props);
-    const instance = vnode.component = createComponent(vnode.type, {
-      $: [() => propsRef.value]
-    });
-    instance.rawPropsRef = propsRef;
-    mountComponent(instance, container, selfAnchor);
-    simpleSetCurrentInstance$1(prev);
-    return instance;
-  },
-  update(n1, n2) {
-    n2.component = n1.component;
-    n2.component.rawPropsRef.value = n2.props;
-  },
-  unmount(vnode, doRemove) {
-    const container = doRemove ? vnode.anchor.parentNode : undefined;
-    unmountComponent(vnode.component, container);
-  },
-  move(vnode, container, anchor) {
-    insert(vnode.component, container, anchor);
-    insert(vnode.anchor, container, anchor);
+function withVaporDirectives(node, dirs) {
+  for (const [dir, value, argument, modifiers] of dirs) {
+    if (dir) {
+      const ret = dir(node, value, argument, modifiers);
+      if (ret) onScopeDispose$1(ret);
+    }
   }
-};
-const vaporInteropPlugin = (app) => {
-  app.config.vapor = vaporInVDOMInterface;
-};
+}
 
-export { applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, children, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, defineVaporComponent, delegate, delegateEvents, getDefaultValue, getRestElement, insert, mountComponent, next, on, prepend, remove, renderEffect, setAttr, setClass, setDOMProp, setDynamicEvents, setDynamicProps, setHtml, setProp, setStyle, setText, setValue, template, unmountComponent, vaporInteropPlugin };
+export { VaporFragment, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporComponent, delegate, delegateEvents, getDefaultValue, getRestElement, insert, isFragment, isVaporComponent, next, nthChild, on, prepend, remove, renderEffect, setAttr, setClass, setDOMProp, setDynamicEvents, setDynamicProps, setHtml, setInsertionState, setProp, setStyle, setText, setValue, template, vaporInteropPlugin, withVaporDirectives };