@vue/compiler-vapor 3.6.0-beta.1 → 3.6.0-beta.3

package/dist/compiler-vapor.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compiler-vapor v3.6.0-beta.1
+* @vue/compiler-vapor v3.6.0-beta.3
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -28,7 +28,29 @@ const newBlock = (node) => ({
 });
 function wrapTemplate(node, dirs) {
   if (node.tagType === 3) {
-    return node;
+    const otherStructuralDirs = ["if", "else-if", "else", "for"];
+    const hasOtherStructuralDir = node.props.some(
+      (prop) => prop.type === 7 && otherStructuralDirs.includes(prop.name) && !dirs.includes(prop.name)
+    );
+    if (!hasOtherStructuralDir) {
+      return node;
+    }
+    const reserved2 = [];
+    const pass2 = [];
+    node.props.forEach((prop) => {
+      if (prop.type === 7 && dirs.includes(prop.name)) {
+        reserved2.push(prop);
+      } else {
+        pass2.push(prop);
+      }
+    });
+    return shared.extend({}, node, {
+      type: 1,
+      tag: "template",
+      props: reserved2,
+      tagType: 3,
+      children: [shared.extend({}, node, { props: pass2 })]
+    });
   }
   const reserved = [];
   const pass = [];
@@ -107,10 +129,6 @@ function getLiteralExpressionValue(exp, excludeNumber) {
   }
   return exp.isStatic ? exp.content : null;
 }
-function isInTransition(context) {
-  const parentNode = context.parent && context.parent.node;
-  return !!(parentNode && isTransitionNode(parentNode));
-}
 function isTransitionNode(node) {
   return node.type === 1 && isTransitionTag(node.tag);
 }
@@ -149,6 +167,8 @@ class TransformContext {
     this.node = node;
     this.selfName = null;
     this.parent = null;
+    // cached parent that skips template tags
+    this.effectiveParent = null;
     this.index = 0;
     this.block = this.ir.block;
     this.template = "";
@@ -161,6 +181,12 @@ class TransformContext {
     this.component = this.ir.component;
     this.directive = this.ir.directive;
     this.slots = [];
+    // whether this node is the last effective child of its parent
+    // (all siblings after it are components, which don't appear in HTML template)
+    this.isLastEffectiveChild = true;
+    // whether this node is on the rightmost path of the tree
+    // (all ancestors are also last effective children)
+    this.isOnRightmostPath = true;
     this.globalId = 0;
     this.nextIdMap = null;
     this.increaseId = () => {
@@ -241,15 +267,31 @@ class TransformContext {
     this.block.operation.push(...node);
   }
   create(node, index) {
+    let effectiveParent = this;
+    while (effectiveParent && effectiveParent.node.type === 1 && effectiveParent.node.tagType === 3) {
+      effectiveParent = effectiveParent.parent;
+    }
+    const isLastEffectiveChild = this.isEffectivelyLastChild(index);
+    const isOnRightmostPath = this.isOnRightmostPath && isLastEffectiveChild;
     return Object.assign(Object.create(TransformContext.prototype), this, {
       node,
       parent: this,
       index,
       template: "",
       childrenTemplate: [],
-      dynamic: newDynamic()
+      dynamic: newDynamic(),
+      effectiveParent,
+      isLastEffectiveChild,
+      isOnRightmostPath
     });
   }
+  isEffectivelyLastChild(index) {
+    const children = this.node.children;
+    if (!children) return true;
+    return children.every(
+      (c, i) => i <= index || c.type === 1 && c.tagType === 1
+    );
+  }
 }
 const defaultOptions = {
   filename: "",
@@ -537,14 +579,12 @@ const IRNodeTypes = {
   "12": "SLOT_OUTLET_NODE",
   "DIRECTIVE": 13,
   "13": "DIRECTIVE",
-  "DECLARE_OLD_REF": 14,
-  "14": "DECLARE_OLD_REF",
-  "IF": 15,
-  "15": "IF",
-  "FOR": 16,
-  "16": "FOR",
-  "GET_TEXT_CHILD": 17,
-  "17": "GET_TEXT_CHILD"
+  "IF": 14,
+  "14": "IF",
+  "FOR": 15,
+  "15": "FOR",
+  "GET_TEXT_CHILD": 16,
+  "16": "GET_TEXT_CHILD"
 };
 const DynamicFlag = {
   "NONE": 0,
@@ -558,7 +598,7 @@ const DynamicFlag = {
 };
 function isBlockOperation(op) {
   const type = op.type;
-  return type === 11 || type === 12 || type === 15 || type === 16;
+  return type === 11 || type === 12 || type === 14 || type === 15;
 }
 
 function genInsertNode({ parent, elements, anchor }, { helper }) {
@@ -789,6 +829,10 @@ function analyzeExpressions(expressions) {
             end: id.end
           });
         });
+        const parentOfMemberExp = parentStack[parentStack.length - 2];
+        if (parentOfMemberExp && isCallExpression(parentOfMemberExp)) {
+          return;
+        }
         registerVariable(
           memberExp,
           exp,
@@ -1005,6 +1049,8 @@ function extractMemberExpression(exp, onIdentifier) {
       return `${extractMemberExpression(exp.left, onIdentifier)} ${exp.operator} ${extractMemberExpression(exp.right, onIdentifier)}`;
     case "CallExpression":
       return `${extractMemberExpression(exp.callee, onIdentifier)}(${exp.arguments.map((arg) => extractMemberExpression(arg, onIdentifier)).join(", ")})`;
+    case "OptionalCallExpression":
+      return `${extractMemberExpression(exp.callee, onIdentifier)}?.(${exp.arguments.map((arg) => extractMemberExpression(arg, onIdentifier)).join(", ")})`;
     case "MemberExpression":
     // foo[bar.baz]
     case "OptionalMemberExpression":
@@ -1017,6 +1063,9 @@ function extractMemberExpression(exp, onIdentifier) {
       return "";
   }
 }
+const isCallExpression = (node) => {
+  return node.type === "CallExpression" || node.type === "OptionalCallExpression";
+};
 const isMemberExpression = (node) => {
   return node.type === "MemberExpression" || node.type === "OptionalMemberExpression" || node.type === "TSNonNullExpression";
 };
@@ -1700,21 +1749,16 @@ function genSetTemplateRef(oper, context) {
   const [refValue, refKey] = genRefValue(oper.value, context);
   return [
     NEWLINE,
-    oper.effect && `r${oper.element} = `,
     ...genCall(
       setTemplateRefIdent,
       // will be generated in root scope
       `n${oper.element}`,
       refValue,
-      oper.effect ? `r${oper.element}` : oper.refFor ? "void 0" : void 0,
       oper.refFor && "true",
       refKey
     )
   ];
 }
-function genDeclareOldRef(oper) {
-  return [NEWLINE, `let r${oper.id}`];
-}
 function genRefValue(value, context) {
   if (value && context.options.inline) {
     const binding = context.options.bindingMetadata[value.content];
@@ -2102,15 +2146,7 @@ function genDynamicProps(props, context) {
         }
       } else {
         expr = genExpression(p.value, context);
-        if (p.handler)
-          expr = genCall(
-            helper("toHandlers"),
-            expr,
-            `false`,
-            // preserveCaseIfNecessary: false, not needed for component
-            `true`
-            // wrap handler values in functions
-          );
+        if (p.handler) expr = genCall(helper("toHandlers"), expr);
       }
     }
     frags.push(["() => (", ...expr, ")"]);
@@ -2304,10 +2340,10 @@ function hasComponentOrSlotInDynamic(dynamic) {
     if (type === 11 || type === 12) {
       return true;
     }
-    if (type === 15) {
+    if (type === 14) {
       if (hasComponentOrSlotInIf(dynamic.operation)) return true;
     }
-    if (type === 16) {
+    if (type === 15) {
       if (hasComponentOrSlotInBlock(dynamic.operation.render))
         return true;
     }
@@ -2323,10 +2359,10 @@ function hasComponentOrSlotInOperations(operations) {
       case 11:
       case 12:
         return true;
-      case 15:
+      case 14:
         if (hasComponentOrSlotInIf(op)) return true;
         break;
-      case 16:
+      case 15:
         if (hasComponentOrSlotInBlock(op.render)) return true;
         break;
     }
@@ -2406,19 +2442,17 @@ function genOperation(oper, context) {
       return genInsertNode(oper, context);
     case 10:
       return genPrependNode(oper, context);
-    case 15:
+    case 14:
       return genIf(oper, context);
-    case 16:
+    case 15:
       return genFor(oper, context);
     case 11:
       return genCreateComponent(oper, context);
-    case 14:
-      return genDeclareOldRef(oper);
     case 12:
       return genSlotOutlet(oper, context);
     case 13:
       return genBuiltinDirective(oper, context);
-    case 17:
+    case 16:
       return genGetTextChild(oper, context);
     default:
       const exhaustiveCheck = oper;
@@ -2619,7 +2653,7 @@ function genBlock(oper, context, args = [], root) {
 }
 function genBlockContent(block, context, root, genEffectsExtraFrag) {
   const [frag, push] = buildCodeFragment();
-  const { dynamic, effect, operation, returns, key } = block;
+  const { dynamic, effect, operation, returns } = block;
   const resetBlock = context.enterBlock(block);
   if (root) {
     for (let name of context.ir.component) {
@@ -2652,12 +2686,6 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
   if (root && context.ir.hasDeferredVShow) {
     push(NEWLINE, `deferredApplyVShows.forEach(fn => fn())`);
   }
-  if (dynamic.needsKey) {
-    for (const child of dynamic.children) {
-      const keyValue = key ? genExpression(key, context) : JSON.stringify(child.id);
-      push(NEWLINE, `n${child.id}.$key = `, ...keyValue);
-    }
-  }
   push(NEWLINE, `return `);
   const returnNodes = returns.map((n) => `n${n}`);
   const returnsCode = returnNodes.length > 1 ? genMulti(DELIMITERS_ARRAY, ...returnNodes) : [returnNodes[0] || "null"];
@@ -2996,7 +3024,10 @@ const transformElement = (node, context) => {
         propsResult,
         singleRoot,
         context,
-        getEffectIndex
+        getEffectIndex,
+        // Root-level elements generate dedicated templates
+        // so closing tags can be omitted
+        context.root === context.effectiveParent || canOmitEndTag(node, context)
       );
     }
     if (parentSlots) {
@@ -3004,6 +3035,17 @@ const transformElement = (node, context) => {
     }
   };
 };
+function canOmitEndTag(node, context) {
+  const { block, parent } = context;
+  if (!parent) return false;
+  if (block !== parent.block) {
+    return true;
+  }
+  if (shared.isFormattingTag(node.tag) || parent.node.type === 1 && node.tag === parent.node.tag) {
+    return context.isOnRightmostPath;
+  }
+  return context.isLastEffectiveChild;
+}
 function isSingleRoot(context) {
   if (context.inVFor) {
     return false;
@@ -3093,7 +3135,8 @@ function resolveSetupReference(name, context) {
   return bindings[name] ? name : bindings[camelName] ? camelName : bindings[PascalName] ? PascalName : void 0;
 }
 const dynamicKeys = ["indeterminate"];
-function transformNativeElement(node, propsResult, singleRoot, context, getEffectIndex) {
+const NEEDS_QUOTES_RE = /[\s"'`=<>]/;
+function transformNativeElement(node, propsResult, singleRoot, context, getEffectIndex, omitEndTag) {
   const { tag } = node;
   const { scopeId } = context.options;
   let template = "";
@@ -3113,16 +3156,24 @@ function transformNativeElement(node, propsResult, singleRoot, context, getEffec
       getEffectIndex
     );
   } else {
+    let prevWasQuoted = false;
     for (const prop of propsResult[1]) {
       const { key, values } = prop;
       if (context.imports.some(
         (imported) => values[0].content.includes(imported.exp.content)
       )) {
-        template += ` ${key.content}="${IMPORT_EXP_START}${values[0].content}${IMPORT_EXP_END}"`;
+        if (!prevWasQuoted) template += ` `;
+        template += `${key.content}="${IMPORT_EXP_START}${values[0].content}${IMPORT_EXP_END}"`;
+        prevWasQuoted = true;
       } else if (key.isStatic && values.length === 1 && (values[0].isStatic || values[0].content === "''") && !dynamicKeys.includes(key.content)) {
-        template += ` ${key.content}`;
-        if (values[0].content)
-          template += `="${values[0].content === "''" ? "" : values[0].content}"`;
+        if (!prevWasQuoted) template += ` `;
+        const value = values[0].content === "''" ? "" : values[0].content;
+        template += key.content;
+        if (value) {
+          template += (prevWasQuoted = NEEDS_QUOTES_RE.test(value)) ? `="${value.replace(/"/g, "&quot;")}"` : `=${value}`;
+        } else {
+          prevWasQuoted = false;
+        }
       } else {
         dynamicProps.push(key.content);
         context.registerEffect(
@@ -3139,7 +3190,7 @@ function transformNativeElement(node, propsResult, singleRoot, context, getEffec
     }
   }
   template += `>` + context.childrenTemplate.join("");
-  if (!shared.isVoidTag(tag)) {
+  if (!shared.isVoidTag(tag) && !omitEndTag) {
     template += `</${tag}>`;
   }
   if (singleRoot) {
@@ -3357,7 +3408,7 @@ const transformVText = (dir, node, context) => {
     const isComponent = node.tagType === 1;
     if (!isComponent) {
       context.registerOperation({
-        type: 17,
+        type: 16,
         parent: context.reference()
       });
     }
@@ -3537,10 +3588,6 @@ const transformTemplateRef = (node, context) => {
   return () => {
     const id = context.reference();
     const effect = !isConstantExpression(value);
-    effect && context.registerOperation({
-      type: 14,
-      id
-    });
     context.registerEffect([value], {
       type: 8,
       element: id,
@@ -3625,7 +3672,7 @@ function processTextContainer(children, context) {
   } else {
     context.childrenTemplate = [" "];
     context.registerOperation({
-      type: 17,
+      type: 16,
       parent: context.reference()
     });
     context.registerEffect(values, {
@@ -3814,7 +3861,7 @@ function processIf(node, dir, context) {
     return () => {
       onExit();
       context.dynamic.operation = {
-        type: 15,
+        type: 14,
         id,
         condition: dir.exp,
         positive: branch,
@@ -3829,7 +3876,7 @@ function processIf(node, dir, context) {
     if (siblings) {
       let i = siblings.length;
       while (i--) {
-        if (siblings[i].operation && siblings[i].operation.type === 15) {
+        if (siblings[i].operation && siblings[i].operation.type === 14) {
           lastIfNode = siblings[i].operation;
           break;
         }
@@ -3838,14 +3885,14 @@ function processIf(node, dir, context) {
     if (
       // check if v-if is the sibling node
       !siblingIf || // check if IfNode is the last operation and get the root IfNode
-      !lastIfNode || lastIfNode.type !== 15
+      !lastIfNode || lastIfNode.type !== 14
     ) {
       context.options.onError(
         compilerDom.createCompilerError(30, node.loc)
       );
       return;
     }
-    while (lastIfNode.negative && lastIfNode.negative.type === 15) {
+    while (lastIfNode.negative && lastIfNode.negative.type === 14) {
       lastIfNode = lastIfNode.negative;
     }
     if (dir.name === "else-if" && lastIfNode.negative) {
@@ -3865,7 +3912,7 @@ function processIf(node, dir, context) {
       lastIfNode.negative = branch;
     } else {
       lastIfNode.negative = {
-        type: 15,
+        type: 14,
         id: -1,
         condition: dir.exp,
         positive: branch,
@@ -3880,7 +3927,6 @@ function createIfBranch(node, context) {
   const branch = newBlock(node);
   const exitBlock = context.enterBlock(branch);
   context.reference();
-  branch.dynamic.needsKey = isInTransition(context);
   return [branch, exitBlock];
 }
 
@@ -3918,7 +3964,7 @@ function processFor(node, dir, context) {
     const { parent } = context;
     const isOnlyChild = parent && parent.block.node !== parent.node && parent.node.children.length === 1;
     context.dynamic.operation = {
-      type: 16,
+      type: 15,
       id,
       source,
       value,
@@ -4079,10 +4125,10 @@ function transformComponentSlot(node, dir, context) {
       markNonTemplate(n, context);
     });
   }
-  let slotKey;
+  const [block, onExit] = createSlotBlock(node, dir, context);
   if (isTransitionNode(node) && nonSlotTemplateChildren.length) {
     const nonCommentChild = nonSlotTemplateChildren.find(
-      (n) => n.type !== 3
+      (n) => !compilerDom.isCommentOrWhitespace(n)
     );
     if (nonCommentChild) {
       const keyProp = findProp(
@@ -4090,11 +4136,10 @@ function transformComponentSlot(node, dir, context) {
         "key"
       );
       if (keyProp) {
-        slotKey = keyProp.exp;
+        block.key = keyProp.exp;
       }
     }
   }
-  const [block, onExit] = createSlotBlock(node, dir, context, slotKey);
   const { slots } = context;
   return () => {
     onExit();
@@ -4228,13 +4273,9 @@ function hasStaticSlot(slots, name) {
     if (slot.slotType === 0) return !!slot.slots[name];
   });
 }
-function createSlotBlock(slotNode, dir, context, key = void 0) {
+function createSlotBlock(slotNode, dir, context) {
   const block = newBlock(slotNode);
   block.props = dir && dir.exp;
-  if (key) {
-    block.key = key;
-    block.dynamic.needsKey = true;
-  }
   const exitBlock = context.enterBlock(block);
   return [block, exitBlock];
 }

package/dist/compiler-vapor.d.ts

@@ -75,10 +75,9 @@ export declare enum IRNodeTypes {
     CREATE_COMPONENT_NODE = 11,
     SLOT_OUTLET_NODE = 12,
     DIRECTIVE = 13,
-    DECLARE_OLD_REF = 14,// consider make it more general
-    IF = 15,
-    FOR = 16,
-    GET_TEXT_CHILD = 17
+    IF = 14,
+    FOR = 15,
+    GET_TEXT_CHILD = 16
 }
 export interface BaseIRNode {
     type: IRNodeTypes;
@@ -230,10 +229,6 @@ export interface CreateComponentIRNode extends BaseIRNode {
     append?: boolean;
     last?: boolean;
 }
-export interface DeclareOldRefIRNode extends BaseIRNode {
-    type: IRNodeTypes.DECLARE_OLD_REF;
-    id: number;
-}
 export interface SlotOutletIRNode extends BaseIRNode {
     type: IRNodeTypes.SLOT_OUTLET_NODE;
     id: number;
@@ -252,7 +247,7 @@ export interface GetTextChildIRNode extends BaseIRNode {
     parent: number;
 }
 export type IRNode = OperationNode | RootIRNode;
-export type OperationNode = SetPropIRNode | SetDynamicPropsIRNode | SetTextIRNode | SetEventIRNode | SetDynamicEventsIRNode | SetHtmlIRNode | SetTemplateRefIRNode | InsertNodeIRNode | PrependNodeIRNode | DirectiveIRNode | IfIRNode | ForIRNode | CreateComponentIRNode | DeclareOldRefIRNode | SlotOutletIRNode | GetTextChildIRNode;
+export type OperationNode = SetPropIRNode | SetDynamicPropsIRNode | SetTextIRNode | SetEventIRNode | SetDynamicEventsIRNode | SetHtmlIRNode | SetTemplateRefIRNode | InsertNodeIRNode | PrependNodeIRNode | DirectiveIRNode | IfIRNode | ForIRNode | CreateComponentIRNode | SlotOutletIRNode | GetTextChildIRNode;
 export declare enum DynamicFlag {
     NONE = 0,
     /**
@@ -275,7 +270,6 @@ export interface IRDynamicInfo {
     children: IRDynamicInfo[];
     template?: number;
     hasDynamicChild?: boolean;
-    needsKey?: boolean;
     operation?: OperationNode;
     ifBranch?: boolean;
 }
@@ -314,6 +308,7 @@ export declare class TransformContext<T extends AllNode = AllNode> {
     node: T;
     selfName: string | null;
     parent: TransformContext<RootNode | ElementNode> | null;
+    effectiveParent: TransformContext<RootNode | ElementNode> | null;
     root: TransformContext<RootNode>;
     index: number;
     block: BlockIRNode;
@@ -328,6 +323,8 @@ export declare class TransformContext<T extends AllNode = AllNode> {
     component: Set<string>;
     directive: Set<string>;
     slots: IRSlots[];
+    isLastEffectiveChild: boolean;
+    isOnRightmostPath: boolean;
     private globalId;
     private nextIdMap;
     constructor(ir: RootIRNode, node: T, options?: TransformOptions);
@@ -340,6 +337,7 @@ export declare class TransformContext<T extends AllNode = AllNode> {
     registerEffect(expressions: SimpleExpressionNode[], operation: OperationNode | OperationNode[], getIndex?: () => number): void;
     registerOperation(...node: OperationNode[]): void;
     create<T extends TemplateChildNode>(node: T, index: number): TransformContext<T>;
+    private isEffectivelyLastChild;
 }
 export declare function transform(node: RootNode, options?: TransformOptions): RootIRNode;
 export declare function createStructuralDirectiveTransform(name: string | string[], fn: StructuralDirectiveTransform): NodeTransform;

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

@@ -1,5 +1,5 @@
 /**
-* @vue/compiler-vapor v3.6.0-beta.1
+* @vue/compiler-vapor v3.6.0-beta.3
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -66,10 +66,12 @@ const HTML_TAGS = "html,body,base,head,link,meta,style,title,address,article,asi
 const SVG_TAGS = "svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,text,textPath,title,tspan,unknown,use,view";
 const MATH_TAGS = "annotation,annotation-xml,maction,maligngroup,malignmark,math,menclose,merror,mfenced,mfrac,mfraction,mglyph,mi,mlabeledtr,mlongdiv,mmultiscripts,mn,mo,mover,mpadded,mphantom,mprescripts,mroot,mrow,ms,mscarries,mscarry,msgroup,msline,mspace,msqrt,msrow,mstack,mstyle,msub,msubsup,msup,mtable,mtd,mtext,mtr,munder,munderover,none,semantics";
 const VOID_TAGS = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
+const FORMATTING_TAGS = "a,b,big,code,em,font,i,nobr,s,small,strike,strong,tt,u";
 const isHTMLTag = /* @__PURE__ */ makeMap(HTML_TAGS);
 const isSVGTag = /* @__PURE__ */ makeMap(SVG_TAGS);
 const isMathMLTag = /* @__PURE__ */ makeMap(MATH_TAGS);
 const isVoidTag = /* @__PURE__ */ makeMap(VOID_TAGS);
+const isFormattingTag = /* @__PURE__ */ makeMap(FORMATTING_TAGS);
 
 function shouldSetAsAttr(tagName, key) {
   if (key === "spellcheck" || key === "draggable" || key === "translate" || key === "autocorrect") {
@@ -18629,8 +18631,7 @@ function walkIdentifiers(root, onIdentifier, includeAll = false, parentStack = [
         if (includeAll || isRefed && !isLocal) {
           onIdentifier(node, parent, parentStack, isRefed, isLocal);
         }
-      } else if (node.type === "ObjectProperty" && // eslint-disable-next-line no-restricted-syntax
-      (parent == null ? void 0 : parent.type) === "ObjectPattern") {
+      } else if (node.type === "ObjectProperty" && (parent == null ? void 0 : parent.type) === "ObjectPattern") {
         node.inPattern = true;
       } else if (isFunctionType(node)) {
         if (node.scopeIds) {
@@ -23689,7 +23690,29 @@ const newBlock = (node) => ({
 });
 function wrapTemplate(node, dirs) {
   if (node.tagType === 3) {
-    return node;
+    const otherStructuralDirs = ["if", "else-if", "else", "for"];
+    const hasOtherStructuralDir = node.props.some(
+      (prop) => prop.type === 7 && otherStructuralDirs.includes(prop.name) && !dirs.includes(prop.name)
+    );
+    if (!hasOtherStructuralDir) {
+      return node;
+    }
+    const reserved2 = [];
+    const pass2 = [];
+    node.props.forEach((prop) => {
+      if (prop.type === 7 && dirs.includes(prop.name)) {
+        reserved2.push(prop);
+      } else {
+        pass2.push(prop);
+      }
+    });
+    return extend({}, node, {
+      type: 1,
+      tag: "template",
+      props: reserved2,
+      tagType: 3,
+      children: [extend({}, node, { props: pass2 })]
+    });
   }
   const reserved = [];
   const pass = [];
@@ -23768,10 +23791,6 @@ function getLiteralExpressionValue(exp, excludeNumber) {
   }
   return exp.isStatic ? exp.content : null;
 }
-function isInTransition(context) {
-  const parentNode = context.parent && context.parent.node;
-  return !!(parentNode && isTransitionNode(parentNode));
-}
 function isTransitionNode(node) {
   return node.type === 1 && isTransitionTag(node.tag);
 }
@@ -23810,6 +23829,8 @@ class TransformContext {
     this.node = node;
     this.selfName = null;
     this.parent = null;
+    // cached parent that skips template tags
+    this.effectiveParent = null;
     this.index = 0;
     this.block = this.ir.block;
     this.template = "";
@@ -23822,6 +23843,12 @@ class TransformContext {
     this.component = this.ir.component;
     this.directive = this.ir.directive;
     this.slots = [];
+    // whether this node is the last effective child of its parent
+    // (all siblings after it are components, which don't appear in HTML template)
+    this.isLastEffectiveChild = true;
+    // whether this node is on the rightmost path of the tree
+    // (all ancestors are also last effective children)
+    this.isOnRightmostPath = true;
     this.globalId = 0;
     this.nextIdMap = null;
     this.increaseId = () => {
@@ -23902,15 +23929,31 @@ class TransformContext {
     this.block.operation.push(...node);
   }
   create(node, index) {
+    let effectiveParent = this;
+    while (effectiveParent && effectiveParent.node.type === 1 && effectiveParent.node.tagType === 3) {
+      effectiveParent = effectiveParent.parent;
+    }
+    const isLastEffectiveChild = this.isEffectivelyLastChild(index);
+    const isOnRightmostPath = this.isOnRightmostPath && isLastEffectiveChild;
     return Object.assign(Object.create(TransformContext.prototype), this, {
       node,
       parent: this,
       index,
       template: "",
       childrenTemplate: [],
-      dynamic: newDynamic()
+      dynamic: newDynamic(),
+      effectiveParent,
+      isLastEffectiveChild,
+      isOnRightmostPath
     });
   }
+  isEffectivelyLastChild(index) {
+    const children = this.node.children;
+    if (!children) return true;
+    return children.every(
+      (c, i) => i <= index || c.type === 1 && c.tagType === 1
+    );
+  }
 }
 const defaultOptions = {
   filename: "",
@@ -24198,14 +24241,12 @@ const IRNodeTypes = {
   "12": "SLOT_OUTLET_NODE",
   "DIRECTIVE": 13,
   "13": "DIRECTIVE",
-  "DECLARE_OLD_REF": 14,
-  "14": "DECLARE_OLD_REF",
-  "IF": 15,
-  "15": "IF",
-  "FOR": 16,
-  "16": "FOR",
-  "GET_TEXT_CHILD": 17,
-  "17": "GET_TEXT_CHILD"
+  "IF": 14,
+  "14": "IF",
+  "FOR": 15,
+  "15": "FOR",
+  "GET_TEXT_CHILD": 16,
+  "16": "GET_TEXT_CHILD"
 };
 const DynamicFlag = {
   "NONE": 0,
@@ -24219,7 +24260,7 @@ const DynamicFlag = {
 };
 function isBlockOperation(op) {
   const type = op.type;
-  return type === 11 || type === 12 || type === 15 || type === 16;
+  return type === 11 || type === 12 || type === 14 || type === 15;
 }
 
 function genInsertNode({ parent, elements, anchor }, { helper }) {
@@ -24450,6 +24491,10 @@ function analyzeExpressions(expressions) {
             end: id.end
           });
         });
+        const parentOfMemberExp = parentStack[parentStack.length - 2];
+        if (parentOfMemberExp && isCallExpression(parentOfMemberExp)) {
+          return;
+        }
         registerVariable(
           memberExp,
           exp,
@@ -24666,6 +24711,8 @@ function extractMemberExpression(exp, onIdentifier) {
       return `${extractMemberExpression(exp.left, onIdentifier)} ${exp.operator} ${extractMemberExpression(exp.right, onIdentifier)}`;
     case "CallExpression":
       return `${extractMemberExpression(exp.callee, onIdentifier)}(${exp.arguments.map((arg) => extractMemberExpression(arg, onIdentifier)).join(", ")})`;
+    case "OptionalCallExpression":
+      return `${extractMemberExpression(exp.callee, onIdentifier)}?.(${exp.arguments.map((arg) => extractMemberExpression(arg, onIdentifier)).join(", ")})`;
     case "MemberExpression":
     // foo[bar.baz]
     case "OptionalMemberExpression":
@@ -24678,6 +24725,9 @@ function extractMemberExpression(exp, onIdentifier) {
       return "";
   }
 }
+const isCallExpression = (node) => {
+  return node.type === "CallExpression" || node.type === "OptionalCallExpression";
+};
 const isMemberExpression = (node) => {
   return node.type === "MemberExpression" || node.type === "OptionalMemberExpression" || node.type === "TSNonNullExpression";
 };
@@ -25361,21 +25411,16 @@ function genSetTemplateRef(oper, context) {
   const [refValue, refKey] = genRefValue(oper.value, context);
   return [
     NEWLINE,
-    oper.effect && `r${oper.element} = `,
     ...genCall(
       setTemplateRefIdent,
       // will be generated in root scope
       `n${oper.element}`,
       refValue,
-      oper.effect ? `r${oper.element}` : oper.refFor ? "void 0" : void 0,
       oper.refFor && "true",
       refKey
     )
   ];
 }
-function genDeclareOldRef(oper) {
-  return [NEWLINE, `let r${oper.id}`];
-}
 function genRefValue(value, context) {
   if (value && context.options.inline) {
     const binding = context.options.bindingMetadata[value.content];
@@ -25763,15 +25808,7 @@ function genDynamicProps(props, context) {
         }
       } else {
         expr = genExpression(p.value, context);
-        if (p.handler)
-          expr = genCall(
-            helper("toHandlers"),
-            expr,
-            `false`,
-            // preserveCaseIfNecessary: false, not needed for component
-            `true`
-            // wrap handler values in functions
-          );
+        if (p.handler) expr = genCall(helper("toHandlers"), expr);
       }
     }
     frags.push(["() => (", ...expr, ")"]);
@@ -25965,10 +26002,10 @@ function hasComponentOrSlotInDynamic(dynamic) {
     if (type === 11 || type === 12) {
       return true;
     }
-    if (type === 15) {
+    if (type === 14) {
       if (hasComponentOrSlotInIf(dynamic.operation)) return true;
     }
-    if (type === 16) {
+    if (type === 15) {
       if (hasComponentOrSlotInBlock(dynamic.operation.render))
         return true;
     }
@@ -25984,10 +26021,10 @@ function hasComponentOrSlotInOperations(operations) {
       case 11:
       case 12:
         return true;
-      case 15:
+      case 14:
         if (hasComponentOrSlotInIf(op)) return true;
         break;
-      case 16:
+      case 15:
         if (hasComponentOrSlotInBlock(op.render)) return true;
         break;
     }
@@ -26067,19 +26104,17 @@ function genOperation(oper, context) {
       return genInsertNode(oper, context);
     case 10:
       return genPrependNode(oper, context);
-    case 15:
+    case 14:
       return genIf(oper, context);
-    case 16:
+    case 15:
       return genFor(oper, context);
     case 11:
       return genCreateComponent(oper, context);
-    case 14:
-      return genDeclareOldRef(oper);
     case 12:
       return genSlotOutlet(oper, context);
     case 13:
       return genBuiltinDirective(oper, context);
-    case 17:
+    case 16:
       return genGetTextChild(oper, context);
     default:
       const exhaustiveCheck = oper;
@@ -26280,7 +26315,7 @@ function genBlock(oper, context, args = [], root) {
 }
 function genBlockContent(block, context, root, genEffectsExtraFrag) {
   const [frag, push] = buildCodeFragment();
-  const { dynamic, effect, operation, returns, key } = block;
+  const { dynamic, effect, operation, returns } = block;
   const resetBlock = context.enterBlock(block);
   if (root) {
     for (let name of context.ir.component) {
@@ -26313,12 +26348,6 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
   if (root && context.ir.hasDeferredVShow) {
     push(NEWLINE, `deferredApplyVShows.forEach(fn => fn())`);
   }
-  if (dynamic.needsKey) {
-    for (const child of dynamic.children) {
-      const keyValue = key ? genExpression(key, context) : JSON.stringify(child.id);
-      push(NEWLINE, `n${child.id}.$key = `, ...keyValue);
-    }
-  }
   push(NEWLINE, `return `);
   const returnNodes = returns.map((n) => `n${n}`);
   const returnsCode = returnNodes.length > 1 ? genMulti(DELIMITERS_ARRAY, ...returnNodes) : [returnNodes[0] || "null"];
@@ -26657,7 +26686,10 @@ const transformElement = (node, context) => {
         propsResult,
         singleRoot,
         context,
-        getEffectIndex
+        getEffectIndex,
+        // Root-level elements generate dedicated templates
+        // so closing tags can be omitted
+        context.root === context.effectiveParent || canOmitEndTag(node, context)
       );
     }
     if (parentSlots) {
@@ -26665,6 +26697,17 @@ const transformElement = (node, context) => {
     }
   };
 };
+function canOmitEndTag(node, context) {
+  const { block, parent } = context;
+  if (!parent) return false;
+  if (block !== parent.block) {
+    return true;
+  }
+  if (isFormattingTag(node.tag) || parent.node.type === 1 && node.tag === parent.node.tag) {
+    return context.isOnRightmostPath;
+  }
+  return context.isLastEffectiveChild;
+}
 function isSingleRoot(context) {
   if (context.inVFor) {
     return false;
@@ -26754,7 +26797,8 @@ function resolveSetupReference(name, context) {
   return bindings[name] ? name : bindings[camelName] ? camelName : bindings[PascalName] ? PascalName : void 0;
 }
 const dynamicKeys = ["indeterminate"];
-function transformNativeElement(node, propsResult, singleRoot, context, getEffectIndex) {
+const NEEDS_QUOTES_RE = /[\s"'`=<>]/;
+function transformNativeElement(node, propsResult, singleRoot, context, getEffectIndex, omitEndTag) {
   const { tag } = node;
   const { scopeId } = context.options;
   let template = "";
@@ -26774,16 +26818,24 @@ function transformNativeElement(node, propsResult, singleRoot, context, getEffec
       getEffectIndex
     );
   } else {
+    let prevWasQuoted = false;
     for (const prop of propsResult[1]) {
       const { key, values } = prop;
       if (context.imports.some(
         (imported) => values[0].content.includes(imported.exp.content)
       )) {
-        template += ` ${key.content}="${IMPORT_EXP_START}${values[0].content}${IMPORT_EXP_END}"`;
+        if (!prevWasQuoted) template += ` `;
+        template += `${key.content}="${IMPORT_EXP_START}${values[0].content}${IMPORT_EXP_END}"`;
+        prevWasQuoted = true;
       } else if (key.isStatic && values.length === 1 && (values[0].isStatic || values[0].content === "''") && !dynamicKeys.includes(key.content)) {
-        template += ` ${key.content}`;
-        if (values[0].content)
-          template += `="${values[0].content === "''" ? "" : values[0].content}"`;
+        if (!prevWasQuoted) template += ` `;
+        const value = values[0].content === "''" ? "" : values[0].content;
+        template += key.content;
+        if (value) {
+          template += (prevWasQuoted = NEEDS_QUOTES_RE.test(value)) ? `="${value.replace(/"/g, "&quot;")}"` : `=${value}`;
+        } else {
+          prevWasQuoted = false;
+        }
       } else {
         dynamicProps.push(key.content);
         context.registerEffect(
@@ -26800,7 +26852,7 @@ function transformNativeElement(node, propsResult, singleRoot, context, getEffec
     }
   }
   template += `>` + context.childrenTemplate.join("");
-  if (!isVoidTag(tag)) {
+  if (!isVoidTag(tag) && !omitEndTag) {
     template += `</${tag}>`;
   }
   if (singleRoot) {
@@ -27008,7 +27060,7 @@ const transformVText = (dir, node, context) => {
     const isComponent = node.tagType === 1;
     if (!isComponent) {
       context.registerOperation({
-        type: 17,
+        type: 16,
         parent: context.reference()
       });
     }
@@ -27185,10 +27237,6 @@ const transformTemplateRef = (node, context) => {
   return () => {
     const id = context.reference();
     const effect = !isConstantExpression(value);
-    effect && context.registerOperation({
-      type: 14,
-      id
-    });
     context.registerEffect([value], {
       type: 8,
       element: id,
@@ -27273,7 +27321,7 @@ function processTextContainer(children, context) {
   } else {
     context.childrenTemplate = [" "];
     context.registerOperation({
-      type: 17,
+      type: 16,
       parent: context.reference()
     });
     context.registerEffect(values, {
@@ -27462,7 +27510,7 @@ function processIf(node, dir, context) {
     return () => {
       onExit();
       context.dynamic.operation = {
-        type: 15,
+        type: 14,
         id,
         condition: dir.exp,
         positive: branch,
@@ -27477,7 +27525,7 @@ function processIf(node, dir, context) {
     if (siblings) {
       let i = siblings.length;
       while (i--) {
-        if (siblings[i].operation && siblings[i].operation.type === 15) {
+        if (siblings[i].operation && siblings[i].operation.type === 14) {
           lastIfNode = siblings[i].operation;
           break;
         }
@@ -27486,14 +27534,14 @@ function processIf(node, dir, context) {
     if (
       // check if v-if is the sibling node
       !siblingIf || // check if IfNode is the last operation and get the root IfNode
-      !lastIfNode || lastIfNode.type !== 15
+      !lastIfNode || lastIfNode.type !== 14
     ) {
       context.options.onError(
         createCompilerError(30, node.loc)
       );
       return;
     }
-    while (lastIfNode.negative && lastIfNode.negative.type === 15) {
+    while (lastIfNode.negative && lastIfNode.negative.type === 14) {
       lastIfNode = lastIfNode.negative;
     }
     if (dir.name === "else-if" && lastIfNode.negative) {
@@ -27513,7 +27561,7 @@ function processIf(node, dir, context) {
       lastIfNode.negative = branch;
     } else {
       lastIfNode.negative = {
-        type: 15,
+        type: 14,
         id: -1,
         condition: dir.exp,
         positive: branch,
@@ -27528,7 +27576,6 @@ function createIfBranch(node, context) {
   const branch = newBlock(node);
   const exitBlock = context.enterBlock(branch);
   context.reference();
-  branch.dynamic.needsKey = isInTransition(context);
   return [branch, exitBlock];
 }
 
@@ -27566,7 +27613,7 @@ function processFor(node, dir, context) {
     const { parent } = context;
     const isOnlyChild = parent && parent.block.node !== parent.node && parent.node.children.length === 1;
     context.dynamic.operation = {
-      type: 16,
+      type: 15,
       id,
       source,
       value,
@@ -27727,10 +27774,10 @@ function transformComponentSlot(node, dir, context) {
       markNonTemplate(n, context);
     });
   }
-  let slotKey;
+  const [block, onExit] = createSlotBlock(node, dir, context);
   if (isTransitionNode(node) && nonSlotTemplateChildren.length) {
     const nonCommentChild = nonSlotTemplateChildren.find(
-      (n) => n.type !== 3
+      (n) => !isCommentOrWhitespace(n)
     );
     if (nonCommentChild) {
       const keyProp = findProp(
@@ -27738,11 +27785,10 @@ function transformComponentSlot(node, dir, context) {
         "key"
       );
       if (keyProp) {
-        slotKey = keyProp.exp;
+        block.key = keyProp.exp;
       }
     }
   }
-  const [block, onExit] = createSlotBlock(node, dir, context, slotKey);
   const { slots } = context;
   return () => {
     onExit();
@@ -27876,13 +27922,9 @@ function hasStaticSlot(slots, name) {
     if (slot.slotType === 0) return !!slot.slots[name];
   });
 }
-function createSlotBlock(slotNode, dir, context, key = void 0) {
+function createSlotBlock(slotNode, dir, context) {
   const block = newBlock(slotNode);
   block.props = dir && dir.exp;
-  if (key) {
-    block.key = key;
-    block.dynamic.needsKey = true;
-  }
   const exitBlock = context.enterBlock(block);
   return [block, exitBlock];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-vapor",
-  "version": "3.6.0-beta.1",
+  "version": "3.6.0-beta.3",
   "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-beta.1",
-    "@vue/shared": "3.6.0-beta.1"
+    "@vue/shared": "3.6.0-beta.3",
+    "@vue/compiler-dom": "3.6.0-beta.3"
   }
 }