@vue/compiler-vapor 3.6.0-alpha.5 → 3.6.0-alpha.7

package/dist/compiler-vapor.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compiler-vapor v3.6.0-alpha.5
+* @vue/compiler-vapor v3.6.0-alpha.7
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -24,8 +24,7 @@ const newBlock = (node) => ({
   effect: [],
   operation: [],
   returns: [],
-  tempId: 0,
-  hasDeferredVShow: false
+  tempId: 0
 });
 function wrapTemplate(node, dirs) {
   if (node.tagType === 3) {
@@ -286,7 +285,8 @@ function transform(node, options = {}) {
     component: /* @__PURE__ */ new Set(),
     directive: /* @__PURE__ */ new Set(),
     block: newBlock(node),
-    hasTemplateRef: false
+    hasTemplateRef: false,
+    hasDeferredVShow: false
   };
   const context = new TransformContext(ir, node, options);
   transformNode(context);
@@ -1027,7 +1027,7 @@ function genSetEvent(oper, context) {
   const name = genName();
   const handler = [
     `${context.helper("createInvoker")}(`,
-    ...genEventHandler(context, value, modifiers),
+    ...genEventHandler(context, [value], modifiers),
     `)`
   ];
   const eventOptions = genEventOptions();
@@ -1084,37 +1084,47 @@ function genSetDynamicEvents(oper, context) {
     )
   ];
 }
-function genEventHandler(context, value, modifiers = { nonKeys: [], keys: [] }, extraWrap = false) {
-  let handlerExp = [`() => {}`];
-  if (value && value.content.trim()) {
-    if (compilerDom.isMemberExpression(value, context.options)) {
-      handlerExp = genExpression(value, context);
-      if (!isConstantBinding(value, context) && !extraWrap) {
-        const isTSNode = value.ast && compilerDom.TS_NODE_TYPES.includes(value.ast.type);
-        handlerExp = [
-          `e => `,
-          isTSNode ? "(" : "",
-          ...handlerExp,
-          isTSNode ? ")" : "",
-          `(e)`
-        ];
+function genEventHandler(context, values, modifiers = { nonKeys: [], keys: [] }, extraWrap = false) {
+  let handlerExp = [];
+  if (values) {
+    values.forEach((value, index) => {
+      let exp = [];
+      if (value && value.content.trim()) {
+        if (compilerDom.isMemberExpression(value, context.options)) {
+          exp = genExpression(value, context);
+          if (!isConstantBinding(value, context) && !extraWrap) {
+            const isTSNode = value.ast && compilerDom.TS_NODE_TYPES.includes(value.ast.type);
+            exp = [
+              `e => `,
+              isTSNode ? "(" : "",
+              ...exp,
+              isTSNode ? ")" : "",
+              `(e)`
+            ];
+          }
+        } else if (compilerDom.isFnExpression(value, context.options)) {
+          exp = genExpression(value, context);
+        } else {
+          const referencesEvent = value.content.includes("$event");
+          const hasMultipleStatements = value.content.includes(`;`);
+          const expr = referencesEvent ? context.withId(() => genExpression(value, context), {
+            $event: null
+          }) : genExpression(value, context);
+          exp = [
+            referencesEvent ? "$event => " : "() => ",
+            hasMultipleStatements ? "{" : "(",
+            ...expr,
+            hasMultipleStatements ? "}" : ")"
+          ];
+        }
+        handlerExp = handlerExp.concat([index !== 0 ? ", " : "", ...exp]);
       }
-    } else if (compilerDom.isFnExpression(value, context.options)) {
-      handlerExp = genExpression(value, context);
-    } else {
-      const referencesEvent = value.content.includes("$event");
-      const hasMultipleStatements = value.content.includes(`;`);
-      const expr = referencesEvent ? context.withId(() => genExpression(value, context), {
-        $event: null
-      }) : genExpression(value, context);
-      handlerExp = [
-        referencesEvent ? "$event => " : "() => ",
-        hasMultipleStatements ? "{" : "(",
-        ...expr,
-        hasMultipleStatements ? "}" : ")"
-      ];
+    });
+    if (values.length > 1) {
+      handlerExp = ["[", ...handlerExp, "]"];
     }
   }
+  if (handlerExp.length === 0) handlerExp = ["() => {}"];
   const { keys, nonKeys } = modifiers;
   if (nonKeys.length)
     handlerExp = genWithModifiers(context, handlerExp, nonKeys);
@@ -1155,35 +1165,19 @@ function genFor(oper, context) {
     component,
     onlyChild
   } = oper;
-  let rawValue = null;
+  const rawValue = value && value.content;
   const rawKey = key && key.content;
   const rawIndex = index && index.content;
   const sourceExpr = ["() => (", ...genExpression(source, context), ")"];
-  const idToPathMap = parseValueDestructure();
+  const idToPathMap = parseValueDestructure(value, context);
   const [depth, exitScope] = context.enterScope();
-  const idMap = {};
   const itemVar = `_for_item${depth}`;
+  const idMap = buildDestructureIdMap(
+    idToPathMap,
+    `${itemVar}.value`,
+    context.options.expressionPlugins
+  );
   idMap[itemVar] = null;
-  idToPathMap.forEach((pathInfo, id2) => {
-    let path = `${itemVar}.value${pathInfo ? pathInfo.path : ""}`;
-    if (pathInfo) {
-      if (pathInfo.helper) {
-        idMap[pathInfo.helper] = null;
-        path = `${pathInfo.helper}(${path}, ${pathInfo.helperArgs})`;
-      }
-      if (pathInfo.dynamic) {
-        const node = idMap[id2] = compilerDom.createSimpleExpression(path);
-        const plugins = context.options.expressionPlugins;
-        node.ast = parser.parseExpression(`(${path})`, {
-          plugins: plugins ? [...plugins, "typescript"] : ["typescript"]
-        });
-      } else {
-        idMap[id2] = path;
-      }
-    } else {
-      idMap[id2] = path;
-    }
-  });
   const args = [itemVar];
   if (rawKey) {
     const keyVar = `_for_key${depth}`;
@@ -1281,77 +1275,6 @@ function genFor(oper, context) {
       // todo: hydrationNode
     )
   ];
-  function parseValueDestructure() {
-    const map = /* @__PURE__ */ new Map();
-    if (value) {
-      rawValue = value && value.content;
-      if (value.ast) {
-        compilerDom.walkIdentifiers(
-          value.ast,
-          (id2, _, parentStack, ___, isLocal) => {
-            if (isLocal) {
-              let path = "";
-              let isDynamic = false;
-              let helper2;
-              let helperArgs;
-              for (let i = 0; i < parentStack.length; i++) {
-                const parent = parentStack[i];
-                const child = parentStack[i + 1] || id2;
-                if (parent.type === "ObjectProperty" && parent.value === child) {
-                  if (parent.key.type === "StringLiteral") {
-                    path += `[${JSON.stringify(parent.key.value)}]`;
-                  } else if (parent.computed) {
-                    isDynamic = true;
-                    path += `[${value.content.slice(
-                      parent.key.start - 1,
-                      parent.key.end - 1
-                    )}]`;
-                  } else {
-                    path += `.${parent.key.name}`;
-                  }
-                } else if (parent.type === "ArrayPattern") {
-                  const index2 = parent.elements.indexOf(child);
-                  if (child.type === "RestElement") {
-                    path += `.slice(${index2})`;
-                  } else {
-                    path += `[${index2}]`;
-                  }
-                } else if (parent.type === "ObjectPattern" && child.type === "RestElement") {
-                  helper2 = context.helper("getRestElement");
-                  helperArgs = "[" + parent.properties.filter((p) => p.type === "ObjectProperty").map((p) => {
-                    if (p.key.type === "StringLiteral") {
-                      return JSON.stringify(p.key.value);
-                    } else if (p.computed) {
-                      isDynamic = true;
-                      return value.content.slice(
-                        p.key.start - 1,
-                        p.key.end - 1
-                      );
-                    } else {
-                      return JSON.stringify(p.key.name);
-                    }
-                  }).join(", ") + "]";
-                }
-                if (child.type === "AssignmentPattern" && (parent.type === "ObjectProperty" || parent.type === "ArrayPattern")) {
-                  isDynamic = true;
-                  helper2 = context.helper("getDefaultValue");
-                  helperArgs = value.content.slice(
-                    child.right.start - 1,
-                    child.right.end - 1
-                  );
-                }
-              }
-              map.set(id2.name, { path, dynamic: isDynamic, helper: helper2, helperArgs });
-            }
-          },
-          true
-        );
-      } else {
-        map.set(rawValue, null);
-      }
-    }
-    return map;
-  }
   function genCallback(expr) {
     if (!expr) return false;
     const res = context.withId(
@@ -1378,6 +1301,98 @@ function genFor(oper, context) {
     return idMap2;
   }
 }
+function parseValueDestructure(value, context) {
+  const map = /* @__PURE__ */ new Map();
+  if (value) {
+    const rawValue = value.content;
+    if (value.ast) {
+      compilerDom.walkIdentifiers(
+        value.ast,
+        (id, _, parentStack, ___, isLocal) => {
+          if (isLocal) {
+            let path = "";
+            let isDynamic = false;
+            let helper;
+            let helperArgs;
+            for (let i = 0; i < parentStack.length; i++) {
+              const parent = parentStack[i];
+              const child = parentStack[i + 1] || id;
+              if (parent.type === "ObjectProperty" && parent.value === child) {
+                if (parent.key.type === "StringLiteral") {
+                  path += `[${JSON.stringify(parent.key.value)}]`;
+                } else if (parent.computed) {
+                  isDynamic = true;
+                  path += `[${rawValue.slice(
+                    parent.key.start - 1,
+                    parent.key.end - 1
+                  )}]`;
+                } else {
+                  path += `.${parent.key.name}`;
+                }
+              } else if (parent.type === "ArrayPattern") {
+                const index = parent.elements.indexOf(child);
+                if (child.type === "RestElement") {
+                  path += `.slice(${index})`;
+                } else {
+                  path += `[${index}]`;
+                }
+              } else if (parent.type === "ObjectPattern" && child.type === "RestElement") {
+                helper = context.helper("getRestElement");
+                helperArgs = "[" + parent.properties.filter((p) => p.type === "ObjectProperty").map((p) => {
+                  if (p.key.type === "StringLiteral") {
+                    return JSON.stringify(p.key.value);
+                  } else if (p.computed) {
+                    isDynamic = true;
+                    return rawValue.slice(p.key.start - 1, p.key.end - 1);
+                  } else {
+                    return JSON.stringify(p.key.name);
+                  }
+                }).join(", ") + "]";
+              }
+              if (child.type === "AssignmentPattern" && (parent.type === "ObjectProperty" || parent.type === "ArrayPattern")) {
+                isDynamic = true;
+                helper = context.helper("getDefaultValue");
+                helperArgs = rawValue.slice(
+                  child.right.start - 1,
+                  child.right.end - 1
+                );
+              }
+            }
+            map.set(id.name, { path, dynamic: isDynamic, helper, helperArgs });
+          }
+        },
+        true
+      );
+    } else if (rawValue) {
+      map.set(rawValue, null);
+    }
+  }
+  return map;
+}
+function buildDestructureIdMap(idToPathMap, baseAccessor, plugins) {
+  const idMap = {};
+  idToPathMap.forEach((pathInfo, id) => {
+    let path = baseAccessor;
+    if (pathInfo) {
+      path = `${baseAccessor}${pathInfo.path}`;
+      if (pathInfo.helper) {
+        idMap[pathInfo.helper] = null;
+        path = pathInfo.helperArgs ? `${pathInfo.helper}(${path}, ${pathInfo.helperArgs})` : `${pathInfo.helper}(${path})`;
+      }
+      if (pathInfo.dynamic) {
+        const node = idMap[id] = compilerDom.createSimpleExpression(path);
+        node.ast = parser.parseExpression(`(${path})`, {
+          plugins: plugins ? [...plugins, "typescript"] : ["typescript"]
+        });
+      } else {
+        idMap[id] = path;
+      }
+    } else {
+      idMap[id] = path;
+    }
+  });
+  return idMap;
+}
 function matchPatterns(render, keyProp, idMap) {
   const selectorPatterns = [];
   const keyOnlyBindingPatterns = [];
@@ -1618,6 +1633,7 @@ function genPropKey({ key: node, modifier, runtimeCamelize, handler, handlerModi
   }
   let key = genExpression(node, context);
   if (runtimeCamelize) {
+    key.push(' || ""');
     key = genCall(helper("camelize"), key);
   }
   if (handler) {
@@ -1859,7 +1875,7 @@ function genCreateComponent(operation, context) {
   const rawProps = context.withId(() => genRawProps(props, context), ids);
   const inlineHandlers = handlers.reduce(
     (acc, { name, value }) => {
-      const handler = genEventHandler(context, value, void 0, false);
+      const handler = genEventHandler(context, [value], void 0, false);
       return [...acc, `const ${name} = `, ...handler, NEWLINE];
     },
     []
@@ -1993,7 +2009,7 @@ function genProp(prop, context, isStatic) {
     ": ",
     ...prop.handler ? genEventHandler(
       context,
-      prop.values[0],
+      prop.values,
       prop.handlerModifiers,
       true
     ) : isStatic ? ["() => (", ...values, ")"] : values,
@@ -2121,35 +2137,29 @@ function genConditionalSlot(slot, context) {
   ];
 }
 function genSlotBlockWithProps(oper, context) {
-  let isDestructureAssignment = false;
-  let rawProps;
   let propsName;
   let exitScope;
   let depth;
   const { props, key, node } = oper;
-  const idsOfProps = /* @__PURE__ */ new Set();
+  const idToPathMap = props ? parseValueDestructure(props, context) : /* @__PURE__ */ new Map();
   if (props) {
-    rawProps = props.content;
-    if (isDestructureAssignment = !!props.ast) {
+    if (props.ast) {
       [depth, exitScope] = context.enterScope();
       propsName = `_slotProps${depth}`;
-      compilerDom.walkIdentifiers(
-        props.ast,
-        (id, _, __, ___, isLocal) => {
-          if (isLocal) idsOfProps.add(id.name);
-        },
-        true
-      );
     } else {
-      idsOfProps.add(propsName = rawProps);
+      propsName = props.content;
     }
   }
-  const idMap = {};
-  idsOfProps.forEach(
-    (id) => idMap[id] = isDestructureAssignment ? `${propsName}[${JSON.stringify(id)}]` : null
-  );
+  const idMap = idToPathMap.size ? buildDestructureIdMap(
+    idToPathMap,
+    propsName || "",
+    context.options.expressionPlugins
+  ) : {};
+  if (propsName) {
+    idMap[propsName] = null;
+  }
   let blockFn = context.withId(
-    () => genBlock(oper, context, [propsName]),
+    () => genBlock(oper, context, propsName ? [propsName] : []),
     idMap
   );
   exitScope && exitScope();
@@ -2169,15 +2179,70 @@ function genSlotBlockWithProps(oper, context) {
       `}`
     ];
   }
-  if (node.type === 1 && !isKeepAliveTag(node.tag)) {
-    blockFn = [`${context.helper("withVaporCtx")}(`, ...blockFn, `)`];
+  if (node.type === 1) {
+    if (needsVaporCtx(oper)) {
+      blockFn = [`${context.helper("withVaporCtx")}(`, ...blockFn, `)`];
+    }
   }
   return blockFn;
 }
+function needsVaporCtx(block) {
+  return hasComponentOrSlotInBlock(block);
+}
+function hasComponentOrSlotInBlock(block) {
+  if (hasComponentOrSlotInOperations(block.operation)) return true;
+  return hasComponentOrSlotInDynamic(block.dynamic);
+}
+function hasComponentOrSlotInDynamic(dynamic) {
+  if (dynamic.operation) {
+    const type = dynamic.operation.type;
+    if (type === 11 || type === 12) {
+      return true;
+    }
+    if (type === 15) {
+      if (hasComponentOrSlotInIf(dynamic.operation)) return true;
+    }
+    if (type === 16) {
+      if (hasComponentOrSlotInBlock(dynamic.operation.render))
+        return true;
+    }
+  }
+  for (const child of dynamic.children) {
+    if (hasComponentOrSlotInDynamic(child)) return true;
+  }
+  return false;
+}
+function hasComponentOrSlotInOperations(operations) {
+  for (const op of operations) {
+    switch (op.type) {
+      case 11:
+      case 12:
+        return true;
+      case 15:
+        if (hasComponentOrSlotInIf(op)) return true;
+        break;
+      case 16:
+        if (hasComponentOrSlotInBlock(op.render)) return true;
+        break;
+    }
+  }
+  return false;
+}
+function hasComponentOrSlotInIf(node) {
+  if (hasComponentOrSlotInBlock(node.positive)) return true;
+  if (node.negative) {
+    if ("positive" in node.negative) {
+      return hasComponentOrSlotInIf(node.negative);
+    } else {
+      return hasComponentOrSlotInBlock(node.negative);
+    }
+  }
+  return false;
+}
 
 function genSlotOutlet(oper, context) {
   const { helper } = context;
-  const { id, name, fallback, noSlotted } = oper;
+  const { id, name, fallback, noSlotted, once } = oper;
   const [frag, push] = buildCodeFragment();
   const nameExpr = name.isStatic ? genExpression(name, context) : ["() => (", ...genExpression(name, context), ")"];
   let fallbackArg;
@@ -2192,8 +2257,10 @@ function genSlotOutlet(oper, context) {
       nameExpr,
       genRawProps(oper.props, context) || "null",
       fallbackArg,
-      noSlotted && "true"
+      noSlotted && "true",
       // noSlotted
+      once && "true"
+      // v-once
     )
   );
   return frag;
@@ -2443,9 +2510,6 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
   const [frag, push] = buildCodeFragment();
   const { dynamic, effect, operation, returns, key } = block;
   const resetBlock = context.enterBlock(block);
-  if (block.hasDeferredVShow) {
-    push(NEWLINE, `const deferredApplyVShows = []`);
-  }
   if (root) {
     for (let name of context.ir.component) {
       const id = compilerDom.toValidAssetId(name, "component");
@@ -2474,7 +2538,7 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
   }
   push(...genOperations(operation, context));
   push(...genEffects(effect, context, genEffectsExtraFrag));
-  if (block.hasDeferredVShow) {
+  if (root && context.ir.hasDeferredVShow) {
     push(NEWLINE, `deferredApplyVShows.forEach(fn => fn())`);
   }
   if (dynamic.needsKey) {
@@ -2630,6 +2694,9 @@ function generate(ir, options = {}) {
       `const ${setTemplateRefIdent} = ${context.helper("createTemplateRefSetter")}()`
     );
   }
+  if (ir.hasDeferredVShow) {
+    push(NEWLINE, `const deferredApplyVShows = []`);
+  }
   push(...genBlockContent(ir.block, context, true));
   push(INDENT_END, NEWLINE);
   if (!inline) {
@@ -2783,6 +2850,11 @@ const isReservedProp = /* @__PURE__ */ shared.makeMap(
 const transformElement = (node, context) => {
   let effectIndex = context.block.effect.length;
   const getEffectIndex = () => effectIndex++;
+  let parentSlots;
+  if (node.type === 1 && (node.tagType === 1 || context.options.isCustomElement(node.tag))) {
+    parentSlots = context.slots;
+    context.slots = [];
+  }
   return function postTransformElement() {
     ({ node } = context);
     if (!(node.type === 1 && (node.tagType === 0 || node.tagType === 1)))
@@ -2816,6 +2888,9 @@ const transformElement = (node, context) => {
         getEffectIndex
       );
     }
+    if (parentSlots) {
+      context.slots = parentSlots;
+    }
   };
 };
 function isSingleRoot(context) {
@@ -3090,7 +3165,7 @@ function dedupeProperties(results) {
     const name = prop.key.content;
     const existing = knownProps.get(name);
     if (existing && existing.handler === prop.handler) {
-      if (name === "style" || name === "class") {
+      if (name === "style" || name === "class" || prop.handler) {
         mergePropValues(existing, prop);
       }
     } else {
@@ -3268,6 +3343,9 @@ const transformVOn = (dir, node, context) => {
       keyOverride = ["click", "contextmenu"];
     }
   }
+  if (keyModifiers.length && compilerDom.isStaticExp(arg) && !compilerDom.isKeyboardEvent(`on${arg.content.toLowerCase()}`)) {
+    keyModifiers.length = 0;
+  }
   if (isComponent || isSlotOutlet) {
     const handler = exp || EMPTY_EXPRESSION;
     return {
@@ -3321,7 +3399,7 @@ const transformVShow = (dir, node, context) => {
   if (parentNode && parentNode.type === 1) {
     shouldDeferred = !!(isTransitionTag(parentNode.tag) && findProp(parentNode, "appear", false, true));
     if (shouldDeferred) {
-      context.parent.parent.block.hasDeferredVShow = true;
+      context.ir.hasDeferredVShow = true;
     }
   }
   context.registerOperation({
@@ -3594,7 +3672,7 @@ function getSiblingIf(context, reverse) {
   let i = siblings.indexOf(context.node);
   while (reverse ? --i >= 0 : ++i < siblings.length) {
     sibling = siblings[i];
-    if (!isCommentLike(sibling)) {
+    if (!compilerDom.isCommentOrWhitespace(sibling)) {
       break;
     }
   }
@@ -3604,9 +3682,6 @@ function getSiblingIf(context, reverse) {
     return sibling;
   }
 }
-function isCommentLike(node) {
-  return node.type === 3 || node.type === 2 && !node.content.trim().length;
-}
 
 const transformVIf = createStructuralDirectiveTransform(
   ["if", "else", "else-if"],
@@ -3830,7 +3905,8 @@ const transformSlotOutlet = (node, context) => {
       name: slotName,
       props: irProps,
       fallback,
-      noSlotted: !!(context.options.scopeId && !context.options.slotted)
+      noSlotted: !!(context.options.scopeId && !context.options.slotted),
+      once: context.inVOnce
     };
   };
 };

package/dist/compiler-vapor.d.ts

@@ -94,7 +94,6 @@ export interface BlockIRNode extends BaseIRNode {
     effect: IREffect[];
     operation: OperationNode[];
     returns: number[];
-    hasDeferredVShow: boolean;
 }
 export interface RootIRNode {
     type: IRNodeTypes.ROOT;
@@ -107,6 +106,7 @@ export interface RootIRNode {
     directive: Set<string>;
     block: BlockIRNode;
     hasTemplateRef: boolean;
+    hasDeferredVShow: boolean;
 }
 export interface IfIRNode extends BaseIRNode {
     type: IRNodeTypes.IF;
@@ -241,6 +241,7 @@ export interface SlotOutletIRNode extends BaseIRNode {
     props: IRProps[];
     fallback?: BlockIRNode;
     noSlotted?: boolean;
+    once?: boolean;
     parent?: number;
     anchor?: number;
     append?: boolean;

package/dist/compiler-vapor.esm-browser.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compiler-vapor v3.6.0-alpha.5
+* @vue/compiler-vapor v3.6.0-alpha.7
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -21340,7 +21340,9 @@ const isNonKeyModifier = /* @__PURE__ */ makeMap(
   `stop,prevent,self,ctrl,shift,alt,meta,exact,middle`
 );
 const maybeKeyModifier = /* @__PURE__ */ makeMap("left,right");
-const isKeyboardEvent = /* @__PURE__ */ makeMap(`onkeyup,onkeydown,onkeypress`);
+const isKeyboardEvent = /* @__PURE__ */ makeMap(
+  `onkeyup,onkeydown,onkeypress`
+);
 const resolveModifiers = (key, modifiers, context, loc) => {
   const keyModifiers = [];
   const nonKeyModifiers = [];
@@ -21596,8 +21598,7 @@ const newBlock = (node) => ({
   effect: [],
   operation: [],
   returns: [],
-  tempId: 0,
-  hasDeferredVShow: false
+  tempId: 0
 });
 function wrapTemplate(node, dirs) {
   if (node.tagType === 3) {
@@ -21858,7 +21859,8 @@ function transform(node, options = {}) {
     component: /* @__PURE__ */ new Set(),
     directive: /* @__PURE__ */ new Set(),
     block: newBlock(node),
-    hasTemplateRef: false
+    hasTemplateRef: false,
+    hasDeferredVShow: false
   };
   const context = new TransformContext(ir, node, options);
   transformNode(context);
@@ -22599,7 +22601,7 @@ function genSetEvent(oper, context) {
   const name = genName();
   const handler = [
     `${context.helper("createInvoker")}(`,
-    ...genEventHandler(context, value, modifiers),
+    ...genEventHandler(context, [value], modifiers),
     `)`
   ];
   const eventOptions = genEventOptions();
@@ -22656,37 +22658,47 @@ function genSetDynamicEvents(oper, context) {
     )
   ];
 }
-function genEventHandler(context, value, modifiers = { nonKeys: [], keys: [] }, extraWrap = false) {
-  let handlerExp = [`() => {}`];
-  if (value && value.content.trim()) {
-    if (isMemberExpression$1(value, context.options)) {
-      handlerExp = genExpression(value, context);
-      if (!isConstantBinding(value, context) && !extraWrap) {
-        const isTSNode = value.ast && TS_NODE_TYPES.includes(value.ast.type);
-        handlerExp = [
-          `e => `,
-          isTSNode ? "(" : "",
-          ...handlerExp,
-          isTSNode ? ")" : "",
-          `(e)`
-        ];
+function genEventHandler(context, values, modifiers = { nonKeys: [], keys: [] }, extraWrap = false) {
+  let handlerExp = [];
+  if (values) {
+    values.forEach((value, index) => {
+      let exp = [];
+      if (value && value.content.trim()) {
+        if (isMemberExpression$1(value, context.options)) {
+          exp = genExpression(value, context);
+          if (!isConstantBinding(value, context) && !extraWrap) {
+            const isTSNode = value.ast && TS_NODE_TYPES.includes(value.ast.type);
+            exp = [
+              `e => `,
+              isTSNode ? "(" : "",
+              ...exp,
+              isTSNode ? ")" : "",
+              `(e)`
+            ];
+          }
+        } else if (isFnExpression(value, context.options)) {
+          exp = genExpression(value, context);
+        } else {
+          const referencesEvent = value.content.includes("$event");
+          const hasMultipleStatements = value.content.includes(`;`);
+          const expr = referencesEvent ? context.withId(() => genExpression(value, context), {
+            $event: null
+          }) : genExpression(value, context);
+          exp = [
+            referencesEvent ? "$event => " : "() => ",
+            hasMultipleStatements ? "{" : "(",
+            ...expr,
+            hasMultipleStatements ? "}" : ")"
+          ];
+        }
+        handlerExp = handlerExp.concat([index !== 0 ? ", " : "", ...exp]);
       }
-    } else if (isFnExpression(value, context.options)) {
-      handlerExp = genExpression(value, context);
-    } else {
-      const referencesEvent = value.content.includes("$event");
-      const hasMultipleStatements = value.content.includes(`;`);
-      const expr = referencesEvent ? context.withId(() => genExpression(value, context), {
-        $event: null
-      }) : genExpression(value, context);
-      handlerExp = [
-        referencesEvent ? "$event => " : "() => ",
-        hasMultipleStatements ? "{" : "(",
-        ...expr,
-        hasMultipleStatements ? "}" : ")"
-      ];
+    });
+    if (values.length > 1) {
+      handlerExp = ["[", ...handlerExp, "]"];
     }
   }
+  if (handlerExp.length === 0) handlerExp = ["() => {}"];
   const { keys, nonKeys } = modifiers;
   if (nonKeys.length)
     handlerExp = genWithModifiers(context, handlerExp, nonKeys);
@@ -22727,35 +22739,19 @@ function genFor(oper, context) {
     component,
     onlyChild
   } = oper;
-  let rawValue = null;
+  const rawValue = value && value.content;
   const rawKey = key && key.content;
   const rawIndex = index && index.content;
   const sourceExpr = ["() => (", ...genExpression(source, context), ")"];
-  const idToPathMap = parseValueDestructure();
+  const idToPathMap = parseValueDestructure(value, context);
   const [depth, exitScope] = context.enterScope();
-  const idMap = {};
   const itemVar = `_for_item${depth}`;
+  const idMap = buildDestructureIdMap(
+    idToPathMap,
+    `${itemVar}.value`,
+    context.options.expressionPlugins
+  );
   idMap[itemVar] = null;
-  idToPathMap.forEach((pathInfo, id2) => {
-    let path = `${itemVar}.value${pathInfo ? pathInfo.path : ""}`;
-    if (pathInfo) {
-      if (pathInfo.helper) {
-        idMap[pathInfo.helper] = null;
-        path = `${pathInfo.helper}(${path}, ${pathInfo.helperArgs})`;
-      }
-      if (pathInfo.dynamic) {
-        const node = idMap[id2] = createSimpleExpression(path);
-        const plugins = context.options.expressionPlugins;
-        node.ast = libExports.parseExpression(`(${path})`, {
-          plugins: plugins ? [...plugins, "typescript"] : ["typescript"]
-        });
-      } else {
-        idMap[id2] = path;
-      }
-    } else {
-      idMap[id2] = path;
-    }
-  });
   const args = [itemVar];
   if (rawKey) {
     const keyVar = `_for_key${depth}`;
@@ -22853,77 +22849,6 @@ function genFor(oper, context) {
       // todo: hydrationNode
     )
   ];
-  function parseValueDestructure() {
-    const map = /* @__PURE__ */ new Map();
-    if (value) {
-      rawValue = value && value.content;
-      if (value.ast) {
-        walkIdentifiers(
-          value.ast,
-          (id2, _, parentStack, ___, isLocal) => {
-            if (isLocal) {
-              let path = "";
-              let isDynamic = false;
-              let helper2;
-              let helperArgs;
-              for (let i = 0; i < parentStack.length; i++) {
-                const parent = parentStack[i];
-                const child = parentStack[i + 1] || id2;
-                if (parent.type === "ObjectProperty" && parent.value === child) {
-                  if (parent.key.type === "StringLiteral") {
-                    path += `[${JSON.stringify(parent.key.value)}]`;
-                  } else if (parent.computed) {
-                    isDynamic = true;
-                    path += `[${value.content.slice(
-                      parent.key.start - 1,
-                      parent.key.end - 1
-                    )}]`;
-                  } else {
-                    path += `.${parent.key.name}`;
-                  }
-                } else if (parent.type === "ArrayPattern") {
-                  const index2 = parent.elements.indexOf(child);
-                  if (child.type === "RestElement") {
-                    path += `.slice(${index2})`;
-                  } else {
-                    path += `[${index2}]`;
-                  }
-                } else if (parent.type === "ObjectPattern" && child.type === "RestElement") {
-                  helper2 = context.helper("getRestElement");
-                  helperArgs = "[" + parent.properties.filter((p) => p.type === "ObjectProperty").map((p) => {
-                    if (p.key.type === "StringLiteral") {
-                      return JSON.stringify(p.key.value);
-                    } else if (p.computed) {
-                      isDynamic = true;
-                      return value.content.slice(
-                        p.key.start - 1,
-                        p.key.end - 1
-                      );
-                    } else {
-                      return JSON.stringify(p.key.name);
-                    }
-                  }).join(", ") + "]";
-                }
-                if (child.type === "AssignmentPattern" && (parent.type === "ObjectProperty" || parent.type === "ArrayPattern")) {
-                  isDynamic = true;
-                  helper2 = context.helper("getDefaultValue");
-                  helperArgs = value.content.slice(
-                    child.right.start - 1,
-                    child.right.end - 1
-                  );
-                }
-              }
-              map.set(id2.name, { path, dynamic: isDynamic, helper: helper2, helperArgs });
-            }
-          },
-          true
-        );
-      } else {
-        map.set(rawValue, null);
-      }
-    }
-    return map;
-  }
   function genCallback(expr) {
     if (!expr) return false;
     const res = context.withId(
@@ -22950,6 +22875,98 @@ function genFor(oper, context) {
     return idMap2;
   }
 }
+function parseValueDestructure(value, context) {
+  const map = /* @__PURE__ */ new Map();
+  if (value) {
+    const rawValue = value.content;
+    if (value.ast) {
+      walkIdentifiers(
+        value.ast,
+        (id, _, parentStack, ___, isLocal) => {
+          if (isLocal) {
+            let path = "";
+            let isDynamic = false;
+            let helper;
+            let helperArgs;
+            for (let i = 0; i < parentStack.length; i++) {
+              const parent = parentStack[i];
+              const child = parentStack[i + 1] || id;
+              if (parent.type === "ObjectProperty" && parent.value === child) {
+                if (parent.key.type === "StringLiteral") {
+                  path += `[${JSON.stringify(parent.key.value)}]`;
+                } else if (parent.computed) {
+                  isDynamic = true;
+                  path += `[${rawValue.slice(
+                    parent.key.start - 1,
+                    parent.key.end - 1
+                  )}]`;
+                } else {
+                  path += `.${parent.key.name}`;
+                }
+              } else if (parent.type === "ArrayPattern") {
+                const index = parent.elements.indexOf(child);
+                if (child.type === "RestElement") {
+                  path += `.slice(${index})`;
+                } else {
+                  path += `[${index}]`;
+                }
+              } else if (parent.type === "ObjectPattern" && child.type === "RestElement") {
+                helper = context.helper("getRestElement");
+                helperArgs = "[" + parent.properties.filter((p) => p.type === "ObjectProperty").map((p) => {
+                  if (p.key.type === "StringLiteral") {
+                    return JSON.stringify(p.key.value);
+                  } else if (p.computed) {
+                    isDynamic = true;
+                    return rawValue.slice(p.key.start - 1, p.key.end - 1);
+                  } else {
+                    return JSON.stringify(p.key.name);
+                  }
+                }).join(", ") + "]";
+              }
+              if (child.type === "AssignmentPattern" && (parent.type === "ObjectProperty" || parent.type === "ArrayPattern")) {
+                isDynamic = true;
+                helper = context.helper("getDefaultValue");
+                helperArgs = rawValue.slice(
+                  child.right.start - 1,
+                  child.right.end - 1
+                );
+              }
+            }
+            map.set(id.name, { path, dynamic: isDynamic, helper, helperArgs });
+          }
+        },
+        true
+      );
+    } else if (rawValue) {
+      map.set(rawValue, null);
+    }
+  }
+  return map;
+}
+function buildDestructureIdMap(idToPathMap, baseAccessor, plugins) {
+  const idMap = {};
+  idToPathMap.forEach((pathInfo, id) => {
+    let path = baseAccessor;
+    if (pathInfo) {
+      path = `${baseAccessor}${pathInfo.path}`;
+      if (pathInfo.helper) {
+        idMap[pathInfo.helper] = null;
+        path = pathInfo.helperArgs ? `${pathInfo.helper}(${path}, ${pathInfo.helperArgs})` : `${pathInfo.helper}(${path})`;
+      }
+      if (pathInfo.dynamic) {
+        const node = idMap[id] = createSimpleExpression(path);
+        node.ast = libExports.parseExpression(`(${path})`, {
+          plugins: plugins ? [...plugins, "typescript"] : ["typescript"]
+        });
+      } else {
+        idMap[id] = path;
+      }
+    } else {
+      idMap[id] = path;
+    }
+  });
+  return idMap;
+}
 function matchPatterns(render, keyProp, idMap) {
   const selectorPatterns = [];
   const keyOnlyBindingPatterns = [];
@@ -23190,6 +23207,7 @@ function genPropKey({ key: node, modifier, runtimeCamelize, handler, handlerModi
   }
   let key = genExpression(node, context);
   if (runtimeCamelize) {
+    key.push(' || ""');
     key = genCall(helper("camelize"), key);
   }
   if (handler) {
@@ -23431,7 +23449,7 @@ function genCreateComponent(operation, context) {
   const rawProps = context.withId(() => genRawProps(props, context), ids);
   const inlineHandlers = handlers.reduce(
     (acc, { name, value }) => {
-      const handler = genEventHandler(context, value, void 0, false);
+      const handler = genEventHandler(context, [value], void 0, false);
       return [...acc, `const ${name} = `, ...handler, NEWLINE];
     },
     []
@@ -23565,7 +23583,7 @@ function genProp(prop, context, isStatic) {
     ": ",
     ...prop.handler ? genEventHandler(
       context,
-      prop.values[0],
+      prop.values,
       prop.handlerModifiers,
       true
     ) : isStatic ? ["() => (", ...values, ")"] : values,
@@ -23693,35 +23711,29 @@ function genConditionalSlot(slot, context) {
   ];
 }
 function genSlotBlockWithProps(oper, context) {
-  let isDestructureAssignment = false;
-  let rawProps;
   let propsName;
   let exitScope;
   let depth;
   const { props, key, node } = oper;
-  const idsOfProps = /* @__PURE__ */ new Set();
+  const idToPathMap = props ? parseValueDestructure(props, context) : /* @__PURE__ */ new Map();
   if (props) {
-    rawProps = props.content;
-    if (isDestructureAssignment = !!props.ast) {
+    if (props.ast) {
       [depth, exitScope] = context.enterScope();
       propsName = `_slotProps${depth}`;
-      walkIdentifiers(
-        props.ast,
-        (id, _, __, ___, isLocal) => {
-          if (isLocal) idsOfProps.add(id.name);
-        },
-        true
-      );
     } else {
-      idsOfProps.add(propsName = rawProps);
+      propsName = props.content;
     }
   }
-  const idMap = {};
-  idsOfProps.forEach(
-    (id) => idMap[id] = isDestructureAssignment ? `${propsName}[${JSON.stringify(id)}]` : null
-  );
+  const idMap = idToPathMap.size ? buildDestructureIdMap(
+    idToPathMap,
+    propsName || "",
+    context.options.expressionPlugins
+  ) : {};
+  if (propsName) {
+    idMap[propsName] = null;
+  }
   let blockFn = context.withId(
-    () => genBlock(oper, context, [propsName]),
+    () => genBlock(oper, context, propsName ? [propsName] : []),
     idMap
   );
   exitScope && exitScope();
@@ -23741,15 +23753,70 @@ function genSlotBlockWithProps(oper, context) {
       `}`
     ];
   }
-  if (node.type === 1 && !isKeepAliveTag(node.tag)) {
-    blockFn = [`${context.helper("withVaporCtx")}(`, ...blockFn, `)`];
+  if (node.type === 1) {
+    if (needsVaporCtx(oper)) {
+      blockFn = [`${context.helper("withVaporCtx")}(`, ...blockFn, `)`];
+    }
   }
   return blockFn;
 }
+function needsVaporCtx(block) {
+  return hasComponentOrSlotInBlock(block);
+}
+function hasComponentOrSlotInBlock(block) {
+  if (hasComponentOrSlotInOperations(block.operation)) return true;
+  return hasComponentOrSlotInDynamic(block.dynamic);
+}
+function hasComponentOrSlotInDynamic(dynamic) {
+  if (dynamic.operation) {
+    const type = dynamic.operation.type;
+    if (type === 11 || type === 12) {
+      return true;
+    }
+    if (type === 15) {
+      if (hasComponentOrSlotInIf(dynamic.operation)) return true;
+    }
+    if (type === 16) {
+      if (hasComponentOrSlotInBlock(dynamic.operation.render))
+        return true;
+    }
+  }
+  for (const child of dynamic.children) {
+    if (hasComponentOrSlotInDynamic(child)) return true;
+  }
+  return false;
+}
+function hasComponentOrSlotInOperations(operations) {
+  for (const op of operations) {
+    switch (op.type) {
+      case 11:
+      case 12:
+        return true;
+      case 15:
+        if (hasComponentOrSlotInIf(op)) return true;
+        break;
+      case 16:
+        if (hasComponentOrSlotInBlock(op.render)) return true;
+        break;
+    }
+  }
+  return false;
+}
+function hasComponentOrSlotInIf(node) {
+  if (hasComponentOrSlotInBlock(node.positive)) return true;
+  if (node.negative) {
+    if ("positive" in node.negative) {
+      return hasComponentOrSlotInIf(node.negative);
+    } else {
+      return hasComponentOrSlotInBlock(node.negative);
+    }
+  }
+  return false;
+}
 
 function genSlotOutlet(oper, context) {
   const { helper } = context;
-  const { id, name, fallback, noSlotted } = oper;
+  const { id, name, fallback, noSlotted, once } = oper;
   const [frag, push] = buildCodeFragment();
   const nameExpr = name.isStatic ? genExpression(name, context) : ["() => (", ...genExpression(name, context), ")"];
   let fallbackArg;
@@ -23764,8 +23831,10 @@ function genSlotOutlet(oper, context) {
       nameExpr,
       genRawProps(oper.props, context) || "null",
       fallbackArg,
-      noSlotted && "true"
+      noSlotted && "true",
       // noSlotted
+      once && "true"
+      // v-once
     )
   );
   return frag;
@@ -24015,9 +24084,6 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
   const [frag, push] = buildCodeFragment();
   const { dynamic, effect, operation, returns, key } = block;
   const resetBlock = context.enterBlock(block);
-  if (block.hasDeferredVShow) {
-    push(NEWLINE, `const deferredApplyVShows = []`);
-  }
   if (root) {
     for (let name of context.ir.component) {
       const id = toValidAssetId(name, "component");
@@ -24046,7 +24112,7 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
   }
   push(...genOperations(operation, context));
   push(...genEffects(effect, context, genEffectsExtraFrag));
-  if (block.hasDeferredVShow) {
+  if (root && context.ir.hasDeferredVShow) {
     push(NEWLINE, `deferredApplyVShows.forEach(fn => fn())`);
   }
   if (dynamic.needsKey) {
@@ -24202,6 +24268,9 @@ function generate(ir, options = {}) {
       `const ${setTemplateRefIdent} = ${context.helper("createTemplateRefSetter")}()`
     );
   }
+  if (ir.hasDeferredVShow) {
+    push(NEWLINE, `const deferredApplyVShows = []`);
+  }
   push(...genBlockContent(ir.block, context, true));
   push(INDENT_END, NEWLINE);
   if (!inline) {
@@ -24355,6 +24424,11 @@ const isReservedProp = /* @__PURE__ */ makeMap(
 const transformElement = (node, context) => {
   let effectIndex = context.block.effect.length;
   const getEffectIndex = () => effectIndex++;
+  let parentSlots;
+  if (node.type === 1 && (node.tagType === 1 || context.options.isCustomElement(node.tag))) {
+    parentSlots = context.slots;
+    context.slots = [];
+  }
   return function postTransformElement() {
     ({ node } = context);
     if (!(node.type === 1 && (node.tagType === 0 || node.tagType === 1)))
@@ -24388,6 +24462,9 @@ const transformElement = (node, context) => {
         getEffectIndex
       );
     }
+    if (parentSlots) {
+      context.slots = parentSlots;
+    }
   };
 };
 function isSingleRoot(context) {
@@ -24662,7 +24739,7 @@ function dedupeProperties(results) {
     const name = prop.key.content;
     const existing = knownProps.get(name);
     if (existing && existing.handler === prop.handler) {
-      if (name === "style" || name === "class") {
+      if (name === "style" || name === "class" || prop.handler) {
         mergePropValues(existing, prop);
       }
     } else {
@@ -24827,6 +24904,9 @@ const transformVOn = (dir, node, context) => {
       keyOverride = ["click", "contextmenu"];
     }
   }
+  if (keyModifiers.length && isStaticExp(arg) && !isKeyboardEvent(`on${arg.content.toLowerCase()}`)) {
+    keyModifiers.length = 0;
+  }
   if (isComponent || isSlotOutlet) {
     const handler = exp || EMPTY_EXPRESSION;
     return {
@@ -24880,7 +24960,7 @@ const transformVShow = (dir, node, context) => {
   if (parentNode && parentNode.type === 1) {
     shouldDeferred = !!(isTransitionTag(parentNode.tag) && findProp(parentNode, "appear", false, true));
     if (shouldDeferred) {
-      context.parent.parent.block.hasDeferredVShow = true;
+      context.ir.hasDeferredVShow = true;
     }
   }
   context.registerOperation({
@@ -25153,7 +25233,7 @@ function getSiblingIf(context, reverse) {
   let i = siblings.indexOf(context.node);
   while (reverse ? --i >= 0 : ++i < siblings.length) {
     sibling = siblings[i];
-    if (!isCommentLike(sibling)) {
+    if (!isCommentOrWhitespace(sibling)) {
       break;
     }
   }
@@ -25163,9 +25243,6 @@ function getSiblingIf(context, reverse) {
     return sibling;
   }
 }
-function isCommentLike(node) {
-  return node.type === 3 || node.type === 2 && !node.content.trim().length;
-}
 
 const transformVIf = createStructuralDirectiveTransform(
   ["if", "else", "else-if"],
@@ -25389,7 +25466,8 @@ const transformSlotOutlet = (node, context) => {
       name: slotName,
       props: irProps,
       fallback,
-      noSlotted: !!(context.options.scopeId && !context.options.slotted)
+      noSlotted: !!(context.options.scopeId && !context.options.slotted),
+      once: context.inVOnce
     };
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-vapor",
-  "version": "3.6.0-alpha.5",
+  "version": "3.6.0-alpha.7",
   "description": "@vue/compiler-vapor",
   "main": "dist/compiler-vapor.cjs.js",
   "module": "dist/compiler-vapor.esm-bundler.js",
@@ -45,7 +45,7 @@
     "@babel/parser": "^7.28.5",
     "estree-walker": "^2.0.2",
     "source-map-js": "^1.2.1",
-    "@vue/compiler-dom": "3.6.0-alpha.5",
-    "@vue/shared": "3.6.0-alpha.5"
+    "@vue/compiler-dom": "3.6.0-alpha.7",
+    "@vue/shared": "3.6.0-alpha.7"
   }
 }