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

package/dist/compiler-vapor.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compiler-vapor v3.6.0-beta.3
+* @vue/compiler-vapor v3.6.0-beta.4
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -187,6 +187,9 @@ class TransformContext {
     // whether this node is on the rightmost path of the tree
     // (all ancestors are also last effective children)
     this.isOnRightmostPath = true;
+    // whether there is an inline ancestor that needs closing
+    // (i.e. is an inline tag and not on the rightmost path)
+    this.hasInlineAncestorNeedingClose = false;
     this.globalId = 0;
     this.nextIdMap = null;
     this.increaseId = () => {
@@ -273,6 +276,14 @@ class TransformContext {
     }
     const isLastEffectiveChild = this.isEffectivelyLastChild(index);
     const isOnRightmostPath = this.isOnRightmostPath && isLastEffectiveChild;
+    let hasInlineAncestorNeedingClose = this.hasInlineAncestorNeedingClose;
+    if (this.node.type === 1) {
+      if (this.node.tag === "template") {
+        hasInlineAncestorNeedingClose = false;
+      } else if (!hasInlineAncestorNeedingClose && !this.isOnRightmostPath && shared.isInlineTag(this.node.tag)) {
+        hasInlineAncestorNeedingClose = true;
+      }
+    }
     return Object.assign(Object.create(TransformContext.prototype), this, {
       node,
       parent: this,
@@ -282,7 +293,8 @@ class TransformContext {
       dynamic: newDynamic(),
       effectiveParent,
       isLastEffectiveChild,
-      isOnRightmostPath
+      isOnRightmostPath,
+      hasInlineAncestorNeedingClose
     });
   }
   isEffectivelyLastChild(index) {
@@ -1771,8 +1783,8 @@ function genRefValue(value, context) {
 
 function genSetText(oper, context) {
   const { helper } = context;
-  const { element, values, generated, jsx, isComponent } = oper;
-  const texts = combineValues(values, context, jsx);
+  const { element, values, generated, isComponent } = oper;
+  const texts = combineValues(values, context);
   return [
     NEWLINE,
     ...genCall(
@@ -1783,14 +1795,14 @@ function genSetText(oper, context) {
     )
   ];
 }
-function combineValues(values, context, jsx) {
+function combineValues(values, context) {
   return values.flatMap((value, i) => {
     let exp = genExpression(value, context);
-    if (!jsx && getLiteralExpressionValue(value, true) == null) {
+    if (getLiteralExpressionValue(value, true) == null) {
       exp = genCall(context.helper("toDisplayString"), exp);
     }
     if (i > 0) {
-      exp.unshift(jsx ? ", " : " + ");
+      exp.unshift(" + ");
     }
     return exp;
   });
@@ -2515,17 +2527,17 @@ function genEffect({ operations }, context) {
   return frag;
 }
 function genInsertionState(operation, context) {
-  const { parent, anchor, append, last } = operation;
+  const { parent, anchor, logicalIndex, append, last } = operation;
   return [
     NEWLINE,
     ...genCall(
       context.helper("setInsertionState"),
       `n${parent}`,
       anchor == null ? void 0 : anchor === -1 ? `0` : append ? (
-        // null or anchor > 0 for append
-        // anchor > 0 is the logical index of append node - used for locate node during hydration
-        anchor === 0 ? "null" : `${anchor}`
+        // for append, always use null since we have logicalIndex
+        "null"
       ) : `n${anchor}`,
+      logicalIndex !== void 0 ? String(logicalIndex) : void 0,
       last && "true"
     )
   ];
@@ -2570,16 +2582,9 @@ function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
   const { children } = dynamic;
   let offset = 0;
   let prev;
-  let ifBranchCount = 0;
-  let prependCount = 0;
   for (const [index, child] of children.entries()) {
-    if (child.operation && child.operation.anchor === -1) {
-      prependCount++;
-    }
     if (child.flags & 2) {
       offset--;
-    } else if (child.ifBranch) {
-      ifBranchCount++;
     }
     const id = child.flags & 1 ? child.flags & 4 ? child.anchor : child.id : void 0;
     if (id === void 0 && !child.hasDynamicChild) {
@@ -2587,19 +2592,19 @@ function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
       continue;
     }
     const elementIndex = index + offset;
-    const logicalIndex = elementIndex - ifBranchCount + prependCount;
+    const logicalIndex = child.logicalIndex !== void 0 ? String(child.logicalIndex) : void 0;
     const variable = id === void 0 ? context.pName(context.block.tempId++) : `n${id}`;
     pushBlock(NEWLINE, `const ${variable} = `);
     if (prev) {
       if (elementIndex - prev[1] === 1) {
-        pushBlock(...genCall(helper("next"), prev[0], String(logicalIndex)));
+        pushBlock(...genCall(helper("next"), prev[0], logicalIndex));
       } else {
         pushBlock(
           ...genCall(
             helper("nthChild"),
             from,
             String(elementIndex),
-            String(logicalIndex)
+            logicalIndex
           )
         );
       }
@@ -2609,19 +2614,19 @@ function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
           ...genCall(
             helper("child"),
             from,
-            logicalIndex !== 0 ? String(logicalIndex) : void 0
+            child.logicalIndex !== 0 ? logicalIndex : void 0
           )
         );
       } else {
         let init = genCall(helper("child"), from);
         if (elementIndex === 1) {
-          init = genCall(helper("next"), init, String(logicalIndex));
+          init = genCall(helper("next"), init, logicalIndex);
         } else if (elementIndex > 1) {
           init = genCall(
             helper("nthChild"),
             from,
             String(elementIndex),
-            String(logicalIndex)
+            logicalIndex
           );
         }
         pushBlock(...init);
@@ -2918,11 +2923,15 @@ function processDynamicChildren(context) {
   let dynamicCount = 0;
   let lastInsertionChild;
   const children = context.dynamic.children;
+  let logicalIndex = 0;
   for (const [index, child] of children.entries()) {
     if (child.flags & 4) {
+      child.logicalIndex = logicalIndex;
       prevDynamics.push(lastInsertionChild = child);
+      logicalIndex++;
     }
     if (!(child.flags & 2)) {
+      child.logicalIndex = logicalIndex;
       if (prevDynamics.length) {
         if (staticCount) {
           context.childrenTemplate[index - prevDynamics.length] = `<!>`;
@@ -2941,6 +2950,7 @@ function processDynamicChildren(context) {
         prevDynamics = [];
       }
       staticCount++;
+      logicalIndex++;
     }
   }
   if (prevDynamics.length) {
@@ -2958,6 +2968,7 @@ function processDynamicChildren(context) {
 }
 function registerInsertion(dynamics, context, anchor, append) {
   for (const child of dynamics) {
+    const logicalIndex = child.logicalIndex;
     if (child.template != null) {
       context.registerOperation({
         type: 9,
@@ -2968,6 +2979,7 @@ function registerInsertion(dynamics, context, anchor, append) {
     } else if (child.operation && isBlockOperation(child.operation)) {
       child.operation.parent = context.reference();
       child.operation.anchor = anchor;
+      child.operation.logicalIndex = logicalIndex;
       child.operation.append = append;
     }
   }
@@ -3041,9 +3053,15 @@ function canOmitEndTag(node, context) {
   if (block !== parent.block) {
     return true;
   }
+  if (shared.isAlwaysCloseTag(node.tag) && !context.isOnRightmostPath) {
+    return false;
+  }
   if (shared.isFormattingTag(node.tag) || parent.node.type === 1 && node.tag === parent.node.tag) {
     return context.isOnRightmostPath;
   }
+  if (shared.isBlockTag(node.tag) && context.hasInlineAncestorNeedingClose) {
+    return false;
+  }
   return context.isLastEffectiveChild;
 }
 function isSingleRoot(context) {
@@ -3603,6 +3621,7 @@ function markNonTemplate(node, context) {
   seen.get(context.root).add(node);
 }
 const transformText = (node, context) => {
+  var _a;
   if (!seen.has(context.root)) seen.set(context.root, /* @__PURE__ */ new WeakSet());
   if (seen.get(context.root).has(node)) {
     context.dynamic.flags |= 2;
@@ -3636,7 +3655,9 @@ const transformText = (node, context) => {
   } else if (node.type === 5) {
     processInterpolation(context);
   } else if (node.type === 2) {
-    context.template += shared.escapeHtml(node.content);
+    const parent = (_a = context.parent) == null ? void 0 : _a.node;
+    const isRootText = !parent || parent.type === 0 || parent.type === 1 && (parent.tagType === 3 || parent.tagType === 1);
+    context.template += isRootText ? node.content : shared.escapeHtml(node.content);
   }
 };
 function processInterpolation(context) {
@@ -3870,7 +3891,6 @@ function processIf(node, dir, context) {
     };
   } else {
     const siblingIf = getSiblingIf(context, true);
-    context.dynamic.ifBranch = true;
     const siblings = context.parent && context.parent.dynamic.children;
     let lastIfNode;
     if (siblings) {
@@ -4308,7 +4328,7 @@ function hasMultipleChildren(node) {
     (c, index) => c.type === 1 && // not template
     !compilerDom.isTemplateNode(c) && // not has v-for
     !findDir(c, "for") && // if the first child has v-if, the rest should also have v-else-if/v-else
-    (index === 0 ? findDir(c, "if") : hasElse(c)) && !hasMultipleChildren(c)
+    (index === 0 ? findDir(c, "if") : hasElse(c))
   )) {
     return false;
   }

package/dist/compiler-vapor.d.ts

@@ -116,6 +116,7 @@ export interface IfIRNode extends BaseIRNode {
     once?: boolean;
     parent?: number;
     anchor?: number;
+    logicalIndex?: number;
     append?: boolean;
     last?: boolean;
 }
@@ -135,6 +136,7 @@ export interface ForIRNode extends BaseIRNode, IRFor {
     onlyChild: boolean;
     parent?: number;
     anchor?: number;
+    logicalIndex?: number;
     append?: boolean;
     last?: boolean;
 }
@@ -160,7 +162,6 @@ export interface SetTextIRNode extends BaseIRNode {
     element: number;
     values: SimpleExpressionNode[];
     generated?: boolean;
-    jsx?: boolean;
     isComponent?: boolean;
 }
 export type KeyOverride = [find: string, replacement: string];
@@ -226,6 +227,7 @@ export interface CreateComponentIRNode extends BaseIRNode {
     isCustomElement: boolean;
     parent?: number;
     anchor?: number;
+    logicalIndex?: number;
     append?: boolean;
     last?: boolean;
 }
@@ -239,6 +241,7 @@ export interface SlotOutletIRNode extends BaseIRNode {
     once?: boolean;
     parent?: number;
     anchor?: number;
+    logicalIndex?: number;
     append?: boolean;
     last?: boolean;
 }
@@ -267,11 +270,11 @@ export interface IRDynamicInfo {
     id?: number;
     flags: DynamicFlag;
     anchor?: number;
+    logicalIndex?: number;
     children: IRDynamicInfo[];
     template?: number;
     hasDynamicChild?: boolean;
     operation?: OperationNode;
-    ifBranch?: boolean;
 }
 export interface IREffect {
     expressions: SimpleExpressionNode[];
@@ -325,6 +328,7 @@ export declare class TransformContext<T extends AllNode = AllNode> {
     slots: IRSlots[];
     isLastEffectiveChild: boolean;
     isOnRightmostPath: boolean;
+    hasInlineAncestorNeedingClose: boolean;
     private globalId;
     private nextIdMap;
     constructor(ir: RootIRNode, node: T, options?: TransformOptions);

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

@@ -1,5 +1,5 @@
 /**
-* @vue/compiler-vapor v3.6.0-beta.3
+* @vue/compiler-vapor v3.6.0-beta.4
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -67,11 +67,17 @@ const SVG_TAGS = "svg,animate,animateMotion,animateTransform,circle,clipPath,col
 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 ALWAYS_CLOSE_TAGS = "title,style,script,noscript,template,object,table,button,textarea,select,iframe,fieldset";
+const INLINE_TAGS = "a,abbr,acronym,b,bdi,bdo,big,br,button,canvas,cite,code,data,datalist,del,dfn,em,embed,i,iframe,img,input,ins,kbd,label,map,mark,meter,noscript,object,output,picture,progress,q,ruby,s,samp,script,select,small,span,strong,sub,sup,svg,textarea,time,u,tt,var,video";
+const BLOCK_TAGS = "address,article,aside,blockquote,dd,details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,li,main,menu,nav,ol,p,pre,section,table,ul";
 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);
+const isAlwaysCloseTag = /* @__PURE__ */ makeMap(ALWAYS_CLOSE_TAGS);
+const isInlineTag = /* @__PURE__ */ makeMap(INLINE_TAGS);
+const isBlockTag = /* @__PURE__ */ makeMap(BLOCK_TAGS);
 
 function shouldSetAsAttr(tagName, key) {
   if (key === "spellcheck" || key === "draggable" || key === "translate" || key === "autocorrect") {
@@ -23849,6 +23855,9 @@ class TransformContext {
     // whether this node is on the rightmost path of the tree
     // (all ancestors are also last effective children)
     this.isOnRightmostPath = true;
+    // whether there is an inline ancestor that needs closing
+    // (i.e. is an inline tag and not on the rightmost path)
+    this.hasInlineAncestorNeedingClose = false;
     this.globalId = 0;
     this.nextIdMap = null;
     this.increaseId = () => {
@@ -23935,6 +23944,14 @@ class TransformContext {
     }
     const isLastEffectiveChild = this.isEffectivelyLastChild(index);
     const isOnRightmostPath = this.isOnRightmostPath && isLastEffectiveChild;
+    let hasInlineAncestorNeedingClose = this.hasInlineAncestorNeedingClose;
+    if (this.node.type === 1) {
+      if (this.node.tag === "template") {
+        hasInlineAncestorNeedingClose = false;
+      } else if (!hasInlineAncestorNeedingClose && !this.isOnRightmostPath && isInlineTag(this.node.tag)) {
+        hasInlineAncestorNeedingClose = true;
+      }
+    }
     return Object.assign(Object.create(TransformContext.prototype), this, {
       node,
       parent: this,
@@ -23944,7 +23961,8 @@ class TransformContext {
       dynamic: newDynamic(),
       effectiveParent,
       isLastEffectiveChild,
-      isOnRightmostPath
+      isOnRightmostPath,
+      hasInlineAncestorNeedingClose
     });
   }
   isEffectivelyLastChild(index) {
@@ -25433,8 +25451,8 @@ function genRefValue(value, context) {
 
 function genSetText(oper, context) {
   const { helper } = context;
-  const { element, values, generated, jsx, isComponent } = oper;
-  const texts = combineValues(values, context, jsx);
+  const { element, values, generated, isComponent } = oper;
+  const texts = combineValues(values, context);
   return [
     NEWLINE,
     ...genCall(
@@ -25445,14 +25463,14 @@ function genSetText(oper, context) {
     )
   ];
 }
-function combineValues(values, context, jsx) {
+function combineValues(values, context) {
   return values.flatMap((value, i) => {
     let exp = genExpression(value, context);
-    if (!jsx && getLiteralExpressionValue(value, true) == null) {
+    if (getLiteralExpressionValue(value, true) == null) {
       exp = genCall(context.helper("toDisplayString"), exp);
     }
     if (i > 0) {
-      exp.unshift(jsx ? ", " : " + ");
+      exp.unshift(" + ");
     }
     return exp;
   });
@@ -26177,17 +26195,17 @@ function genEffect({ operations }, context) {
   return frag;
 }
 function genInsertionState(operation, context) {
-  const { parent, anchor, append, last } = operation;
+  const { parent, anchor, logicalIndex, append, last } = operation;
   return [
     NEWLINE,
     ...genCall(
       context.helper("setInsertionState"),
       `n${parent}`,
       anchor == null ? void 0 : anchor === -1 ? `0` : append ? (
-        // null or anchor > 0 for append
-        // anchor > 0 is the logical index of append node - used for locate node during hydration
-        anchor === 0 ? "null" : `${anchor}`
+        // for append, always use null since we have logicalIndex
+        "null"
       ) : `n${anchor}`,
+      logicalIndex !== void 0 ? String(logicalIndex) : void 0,
       last && "true"
     )
   ];
@@ -26232,16 +26250,9 @@ function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
   const { children } = dynamic;
   let offset = 0;
   let prev;
-  let ifBranchCount = 0;
-  let prependCount = 0;
   for (const [index, child] of children.entries()) {
-    if (child.operation && child.operation.anchor === -1) {
-      prependCount++;
-    }
     if (child.flags & 2) {
       offset--;
-    } else if (child.ifBranch) {
-      ifBranchCount++;
     }
     const id = child.flags & 1 ? child.flags & 4 ? child.anchor : child.id : void 0;
     if (id === void 0 && !child.hasDynamicChild) {
@@ -26249,19 +26260,19 @@ function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
       continue;
     }
     const elementIndex = index + offset;
-    const logicalIndex = elementIndex - ifBranchCount + prependCount;
+    const logicalIndex = child.logicalIndex !== void 0 ? String(child.logicalIndex) : void 0;
     const variable = id === void 0 ? context.pName(context.block.tempId++) : `n${id}`;
     pushBlock(NEWLINE, `const ${variable} = `);
     if (prev) {
       if (elementIndex - prev[1] === 1) {
-        pushBlock(...genCall(helper("next"), prev[0], String(logicalIndex)));
+        pushBlock(...genCall(helper("next"), prev[0], logicalIndex));
       } else {
         pushBlock(
           ...genCall(
             helper("nthChild"),
             from,
             String(elementIndex),
-            String(logicalIndex)
+            logicalIndex
           )
         );
       }
@@ -26271,19 +26282,19 @@ function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
           ...genCall(
             helper("child"),
             from,
-            logicalIndex !== 0 ? String(logicalIndex) : void 0
+            child.logicalIndex !== 0 ? logicalIndex : void 0
           )
         );
       } else {
         let init = genCall(helper("child"), from);
         if (elementIndex === 1) {
-          init = genCall(helper("next"), init, String(logicalIndex));
+          init = genCall(helper("next"), init, logicalIndex);
         } else if (elementIndex > 1) {
           init = genCall(
             helper("nthChild"),
             from,
             String(elementIndex),
-            String(logicalIndex)
+            logicalIndex
           );
         }
         pushBlock(...init);
@@ -26580,11 +26591,15 @@ function processDynamicChildren(context) {
   let dynamicCount = 0;
   let lastInsertionChild;
   const children = context.dynamic.children;
+  let logicalIndex = 0;
   for (const [index, child] of children.entries()) {
     if (child.flags & 4) {
+      child.logicalIndex = logicalIndex;
       prevDynamics.push(lastInsertionChild = child);
+      logicalIndex++;
     }
     if (!(child.flags & 2)) {
+      child.logicalIndex = logicalIndex;
       if (prevDynamics.length) {
         if (staticCount) {
           context.childrenTemplate[index - prevDynamics.length] = `<!>`;
@@ -26603,6 +26618,7 @@ function processDynamicChildren(context) {
         prevDynamics = [];
       }
       staticCount++;
+      logicalIndex++;
     }
   }
   if (prevDynamics.length) {
@@ -26620,6 +26636,7 @@ function processDynamicChildren(context) {
 }
 function registerInsertion(dynamics, context, anchor, append) {
   for (const child of dynamics) {
+    const logicalIndex = child.logicalIndex;
     if (child.template != null) {
       context.registerOperation({
         type: 9,
@@ -26630,6 +26647,7 @@ function registerInsertion(dynamics, context, anchor, append) {
     } else if (child.operation && isBlockOperation(child.operation)) {
       child.operation.parent = context.reference();
       child.operation.anchor = anchor;
+      child.operation.logicalIndex = logicalIndex;
       child.operation.append = append;
     }
   }
@@ -26703,9 +26721,15 @@ function canOmitEndTag(node, context) {
   if (block !== parent.block) {
     return true;
   }
+  if (isAlwaysCloseTag(node.tag) && !context.isOnRightmostPath) {
+    return false;
+  }
   if (isFormattingTag(node.tag) || parent.node.type === 1 && node.tag === parent.node.tag) {
     return context.isOnRightmostPath;
   }
+  if (isBlockTag(node.tag) && context.hasInlineAncestorNeedingClose) {
+    return false;
+  }
   return context.isLastEffectiveChild;
 }
 function isSingleRoot(context) {
@@ -27252,6 +27276,7 @@ function markNonTemplate(node, context) {
   seen.get(context.root).add(node);
 }
 const transformText = (node, context) => {
+  var _a;
   if (!seen.has(context.root)) seen.set(context.root, /* @__PURE__ */ new WeakSet());
   if (seen.get(context.root).has(node)) {
     context.dynamic.flags |= 2;
@@ -27285,7 +27310,9 @@ const transformText = (node, context) => {
   } else if (node.type === 5) {
     processInterpolation(context);
   } else if (node.type === 2) {
-    context.template += escapeHtml(node.content);
+    const parent = (_a = context.parent) == null ? void 0 : _a.node;
+    const isRootText = !parent || parent.type === 0 || parent.type === 1 && (parent.tagType === 3 || parent.tagType === 1);
+    context.template += isRootText ? node.content : escapeHtml(node.content);
   }
 };
 function processInterpolation(context) {
@@ -27519,7 +27546,6 @@ function processIf(node, dir, context) {
     };
   } else {
     const siblingIf = getSiblingIf(context, true);
-    context.dynamic.ifBranch = true;
     const siblings = context.parent && context.parent.dynamic.children;
     let lastIfNode;
     if (siblings) {
@@ -27957,7 +27983,7 @@ function hasMultipleChildren(node) {
     (c, index) => c.type === 1 && // not template
     !isTemplateNode(c) && // not has v-for
     !findDir(c, "for") && // if the first child has v-if, the rest should also have v-else-if/v-else
-    (index === 0 ? findDir(c, "if") : hasElse(c)) && !hasMultipleChildren(c)
+    (index === 0 ? findDir(c, "if") : hasElse(c))
   )) {
     return false;
   }

package/package.json

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