@vue/compiler-dom 3.5.0-alpha.2 → 3.5.0-alpha.4

package/dist/compiler-dom.global.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compiler-dom v3.5.0-alpha.2
+* @vue/compiler-dom v3.5.0-alpha.4
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -75,6 +75,9 @@ var VueCompilerDOM = (function (exports) {
 
   const range = 2;
   function generateCodeFrame(source, start = 0, end = source.length) {
+    start = Math.max(0, Math.min(start, source.length));
+    end = Math.max(0, Math.min(end, source.length));
+    if (start > end) return "";
     let lines = source.split(/(\r?\n)/);
     const newlineSequences = lines.filter((_, idx) => idx % 2 === 1);
     lines = lines.filter((_, idx) => idx % 2 === 0);
@@ -84,8 +87,7 @@ var VueCompilerDOM = (function (exports) {
       count += lines[i].length + (newlineSequences[i] && newlineSequences[i].length || 0);
       if (count >= start) {
         for (let j = i - range; j <= i + range || end > count; j++) {
-          if (j < 0 || j >= lines.length)
-            continue;
+          if (j < 0 || j >= lines.length) continue;
           const line = j + 1;
           res.push(
             `${line}${" ".repeat(Math.max(3 - String(line).length, 0))}|  ${lines[j]}`
@@ -303,8 +305,8 @@ var VueCompilerDOM = (function (exports) {
     "0": "NOT_CONSTANT",
     "CAN_SKIP_PATCH": 1,
     "1": "CAN_SKIP_PATCH",
-    "CAN_HOIST": 2,
-    "2": "CAN_HOIST",
+    "CAN_CACHE": 2,
+    "2": "CAN_CACHE",
     "CAN_STRINGIFY": 3,
     "3": "CAN_STRINGIFY"
   };
@@ -323,7 +325,7 @@ var VueCompilerDOM = (function (exports) {
       directives: [],
       hoists: [],
       imports: [],
-      cached: 0,
+      cached: [],
       temps: 0,
       codegenNode: void 0,
       loc: locStub
@@ -428,12 +430,13 @@ var VueCompilerDOM = (function (exports) {
       loc: locStub
     };
   }
-  function createCacheExpression(index, value, isVNode = false) {
+  function createCacheExpression(index, value, needPauseTracking = false) {
     return {
       type: 20,
       index,
       value,
-      isVNode,
+      needPauseTracking,
+      needArraySpread: false,
       loc: locStub
     };
   }
@@ -1374,8 +1377,7 @@ var VueCompilerDOM = (function (exports) {
   Details: ${link}` : ``}`;
     const err = new SyntaxError(msg);
     err.code = key;
-    if (loc)
-      err.loc = loc;
+    if (loc) err.loc = loc;
     context.onWarn(err);
   }
 
@@ -1611,16 +1613,14 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
   function walkBlockDeclarations(block, onIdent) {
     for (const stmt of block.body) {
       if (stmt.type === "VariableDeclaration") {
-        if (stmt.declare)
-          continue;
+        if (stmt.declare) continue;
         for (const decl of stmt.declarations) {
           for (const id of extractIdentifiers(decl.id)) {
             onIdent(id);
           }
         }
       } else if (stmt.type === "FunctionDeclaration" || stmt.type === "ClassDeclaration") {
-        if (stmt.declare || !stmt.id)
-          continue;
+        if (stmt.declare || !stmt.id) continue;
         onIdent(stmt.id);
       } else if (stmt.type === "ForOfStatement" || stmt.type === "ForInStatement" || stmt.type === "ForStatement") {
         const variable = stmt.type === "ForStatement" ? stmt.init : stmt.left;
@@ -1657,8 +1657,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         break;
       case "ArrayPattern":
         param.elements.forEach((element) => {
-          if (element)
-            extractIdentifiers(element, nodes);
+          if (element) extractIdentifiers(element, nodes);
         });
         break;
       case "RestElement":
@@ -1712,7 +1711,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         return BASE_TRANSITION;
     }
   }
-  const nonIdentifierRE = /^\d|[^\$\w]/;
+  const nonIdentifierRE = /^\d|[^\$\w\xA0-\uFFFF]/;
   const isSimpleIdentifier = (name) => !nonIdentifierRE.test(name);
   const validFirstIdentCharRE = /[A-Za-z_$\xA0-\uFFFF]/;
   const validIdentCharRE = /[\.\?\w$\xA0-\uFFFF]/;
@@ -1823,8 +1822,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     for (let i = 0; i < node.props.length; i++) {
       const p = node.props[i];
       if (p.type === 6) {
-        if (dynamicOnly)
-          continue;
+        if (dynamicOnly) continue;
         if (p.name === name && (p.value || allowEmpty)) {
           return p;
         }
@@ -1976,6 +1974,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         return hasScopeRef(node.content, ids);
       case 2:
       case 3:
+      case 20:
         return false;
       default:
         return false;
@@ -1988,7 +1987,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       return node;
     }
   }
-  const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
+  const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+(\S[\s\S]*)/;
 
   const defaultParserOptions = {
     parseMode: "base",
@@ -2141,8 +2140,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       }
     },
     ondirarg(start, end) {
-      if (start === end)
-        return;
+      if (start === end) return;
       const arg = getSlice(start, end);
       if (inVPre) {
         currentProp.name += arg;
@@ -2174,14 +2172,12 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     },
     onattribdata(start, end) {
       currentAttrValue += getSlice(start, end);
-      if (currentAttrStartIndex < 0)
-        currentAttrStartIndex = start;
+      if (currentAttrStartIndex < 0) currentAttrStartIndex = start;
       currentAttrEndIndex = end;
     },
     onattribentity(char, start, end) {
       currentAttrValue += char;
-      if (currentAttrStartIndex < 0)
-        currentAttrStartIndex = start;
+      if (currentAttrStartIndex < 0) currentAttrStartIndex = start;
       currentAttrEndIndex = end;
     },
     onattribnameend(end) {
@@ -2328,8 +2324,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     const loc = input.loc;
     const exp = input.content;
     const inMatch = exp.match(forAliasRE);
-    if (!inMatch)
-      return;
+    if (!inMatch) return;
     const [, LHS, RHS] = inMatch;
     const createAliasExpression = (content, offset, asParam = false) => {
       const start = loc.start.offset + offset;
@@ -2522,14 +2517,12 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
   }
   function lookAhead(index, c) {
     let i = index;
-    while (currentInput.charCodeAt(i) !== c && i < currentInput.length - 1)
-      i++;
+    while (currentInput.charCodeAt(i) !== c && i < currentInput.length - 1) i++;
     return i;
   }
   function backTrack(index, c) {
     let i = index;
-    while (currentInput.charCodeAt(i) !== c && i >= 0)
-      i--;
+    while (currentInput.charCodeAt(i) !== c && i >= 0) i--;
     return i;
   }
   const specialTemplateDir = /* @__PURE__ */ new Set(["if", "else", "else-if", "for", "slot"]);
@@ -2739,9 +2732,10 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     return root;
   }
 
-  function hoistStatic(root, context) {
+  function cacheStatic(root, context) {
     walk(
       root,
+      void 0,
       context,
       // Root node is unfortunately non-hoistable due to potential parent
       // fallthrough attributes.
@@ -2752,26 +2746,24 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     const { children } = root;
     return children.length === 1 && child.type === 1 && !isSlotOutlet(child);
   }
-  function walk(node, context, doNotHoistNode = false) {
+  function walk(node, parent, context, doNotHoistNode = false, inFor = false) {
     const { children } = node;
-    const originalCount = children.length;
-    let hoistedCount = 0;
+    const toCache = [];
     for (let i = 0; i < children.length; i++) {
       const child = children[i];
       if (child.type === 1 && child.tagType === 0) {
         const constantType = doNotHoistNode ? 0 : getConstantType(child, context);
         if (constantType > 0) {
           if (constantType >= 2) {
-            child.codegenNode.patchFlag = -1 + (` /* HOISTED */` );
-            child.codegenNode = context.hoist(child.codegenNode);
-            hoistedCount++;
+            child.codegenNode.patchFlag = -1;
+            toCache.push(child);
             continue;
           }
         } else {
           const codegenNode = child.codegenNode;
           if (codegenNode.type === 13) {
-            const flag = getPatchFlag(codegenNode);
-            if ((!flag || flag === 512 || flag === 1) && getGeneratedPropsConstantType(child, context) >= 2) {
+            const flag = codegenNode.patchFlag;
+            if ((flag === void 0 || flag === 512 || flag === 1) && getGeneratedPropsConstantType(child, context) >= 2) {
               const props = getNodeProps(child);
               if (props) {
                 codegenNode.props = context.hoist(props);
@@ -2782,39 +2774,84 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
             }
           }
         }
+      } else if (child.type === 12) {
+        const constantType = doNotHoistNode ? 0 : getConstantType(child, context);
+        if (constantType >= 2) {
+          toCache.push(child);
+          continue;
+        }
       }
       if (child.type === 1) {
         const isComponent = child.tagType === 1;
         if (isComponent) {
           context.scopes.vSlot++;
         }
-        walk(child, context);
+        walk(child, node, context, false, inFor);
         if (isComponent) {
           context.scopes.vSlot--;
         }
       } else if (child.type === 11) {
-        walk(child, context, child.children.length === 1);
+        walk(child, node, context, child.children.length === 1, true);
       } else if (child.type === 9) {
         for (let i2 = 0; i2 < child.branches.length; i2++) {
           walk(
             child.branches[i2],
+            node,
             context,
-            child.branches[i2].children.length === 1
+            child.branches[i2].children.length === 1,
+            inFor
           );
         }
       }
     }
-    if (hoistedCount && context.transformHoist) {
-      context.transformHoist(children, context, node);
+    let cachedAsArray = false;
+    if (toCache.length === children.length && node.type === 1) {
+      if (node.tagType === 0 && node.codegenNode && node.codegenNode.type === 13 && isArray(node.codegenNode.children)) {
+        node.codegenNode.children = getCacheExpression(
+          createArrayExpression(node.codegenNode.children)
+        );
+        cachedAsArray = true;
+      } else if (node.tagType === 1 && node.codegenNode && node.codegenNode.type === 13 && node.codegenNode.children && !isArray(node.codegenNode.children) && node.codegenNode.children.type === 15) {
+        const slot = getSlotNode(node.codegenNode, "default");
+        if (slot) {
+          slot.returns = getCacheExpression(
+            createArrayExpression(slot.returns)
+          );
+          cachedAsArray = true;
+        }
+      } else if (node.tagType === 3 && parent && parent.type === 1 && parent.tagType === 1 && parent.codegenNode && parent.codegenNode.type === 13 && parent.codegenNode.children && !isArray(parent.codegenNode.children) && parent.codegenNode.children.type === 15) {
+        const slotName = findDir(node, "slot", true);
+        const slot = slotName && slotName.arg && getSlotNode(parent.codegenNode, slotName.arg);
+        if (slot) {
+          slot.returns = getCacheExpression(
+            createArrayExpression(slot.returns)
+          );
+          cachedAsArray = true;
+        }
+      }
     }
-    if (hoistedCount && hoistedCount === originalCount && node.type === 1 && node.tagType === 0 && node.codegenNode && node.codegenNode.type === 13 && isArray(node.codegenNode.children)) {
-      const hoisted = context.hoist(
-        createArrayExpression(node.codegenNode.children)
-      );
-      if (context.hmr) {
-        hoisted.content = `[...${hoisted.content}]`;
+    if (!cachedAsArray) {
+      for (const child of toCache) {
+        child.codegenNode = context.cache(child.codegenNode);
+      }
+    }
+    function getCacheExpression(value) {
+      const exp = context.cache(value);
+      if (inFor && context.hmr) {
+        exp.needArraySpread = true;
+      }
+      return exp;
+    }
+    function getSlotNode(node2, name) {
+      if (node2.children && !isArray(node2.children) && node2.children.type === 15) {
+        const slot = node2.children.properties.find(
+          (p) => p.key === name || p.key.content === name
+        );
+        return slot && slot.value;
       }
-      node.codegenNode.children = hoisted;
+    }
+    if (toCache.length && context.transformHoist) {
+      context.transformHoist(children, context, node);
     }
   }
   function getConstantType(node, context) {
@@ -2832,11 +2869,10 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         if (codegenNode.type !== 13) {
           return 0;
         }
-        if (codegenNode.isBlock && node.tag !== "svg" && node.tag !== "foreignObject") {
+        if (codegenNode.isBlock && node.tag !== "svg" && node.tag !== "foreignObject" && node.tag !== "math") {
           return 0;
         }
-        const flag = getPatchFlag(codegenNode);
-        if (!flag) {
+        if (codegenNode.patchFlag === void 0) {
           let returnType2 = 3;
           const generatedPropsType = getGeneratedPropsConstantType(node, context);
           if (generatedPropsType === 0) {
@@ -2919,6 +2955,8 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
           }
         }
         return returnType;
+      case 20:
+        return 2;
       default:
         return 0;
     }
@@ -2978,15 +3016,11 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       return codegenNode.props;
     }
   }
-  function getPatchFlag(node) {
-    const flag = node.patchFlag;
-    return flag ? parseInt(flag, 10) : void 0;
-  }
 
   function createTransformContext(root, {
     filename = "",
     prefixIdentifiers = false,
-    hoistStatic: hoistStatic2 = false,
+    hoistStatic = false,
     hmr = false,
     cacheHandlers = false,
     nodeTransforms = [],
@@ -3013,7 +3047,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       filename,
       selfName: nameMatch && capitalize(camelize(nameMatch[1])),
       prefixIdentifiers,
-      hoistStatic: hoistStatic2,
+      hoistStatic,
       hmr,
       cacheHandlers,
       nodeTransforms,
@@ -3040,9 +3074,9 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       directives: /* @__PURE__ */ new Set(),
       hoists: [],
       imports: [],
+      cached: [],
       constantCache: /* @__PURE__ */ new WeakMap(),
       temps: 0,
-      cached: 0,
       identifiers: /* @__PURE__ */ Object.create(null),
       scopes: {
         vFor: 0,
@@ -3112,8 +3146,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       removeIdentifiers(exp) {
       },
       hoist(exp) {
-        if (isString(exp))
-          exp = createSimpleExpression(exp);
+        if (isString(exp)) exp = createSimpleExpression(exp);
         context.hoists.push(exp);
         const identifier = createSimpleExpression(
           `_hoisted_${context.hoists.length}`,
@@ -3125,7 +3158,13 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         return identifier;
       },
       cache(exp, isVNode = false) {
-        return createCacheExpression(context.cached++, exp, isVNode);
+        const cacheExp = createCacheExpression(
+          context.cached.length,
+          exp,
+          isVNode
+        );
+        context.cached.push(cacheExp);
+        return cacheExp;
       }
     };
     {
@@ -3137,7 +3176,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     const context = createTransformContext(root, options);
     traverseNode(root, context);
     if (options.hoistStatic) {
-      hoistStatic(root, context);
+      cacheStatic(root, context);
     }
     if (!options.ssr) {
       createRootCodegen(root, context);
@@ -3180,7 +3219,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         helper(FRAGMENT),
         void 0,
         root.children,
-        patchFlag + (` /* ${patchFlagText} */` ),
+        patchFlag,
         void 0,
         void 0,
         true,
@@ -3196,8 +3235,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     };
     for (; i < parent.children.length; i++) {
       const child = parent.children[i];
-      if (isString(child))
-        continue;
+      if (isString(child)) continue;
       context.grandParent = context.parent;
       context.parent = parent;
       context.childIndex = i;
@@ -3268,8 +3306,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
             props.splice(i, 1);
             i--;
             const onExit = fn(node, prop, context);
-            if (onExit)
-              exitFns.push(onExit);
+            if (onExit) exitFns.push(onExit);
           }
         }
         return exitFns;
@@ -3341,8 +3378,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
   }
   function generate(ast, options = {}) {
     const context = createCodegenContext(ast, options);
-    if (options.onContextCreated)
-      options.onContextCreated(context);
+    if (options.onContextCreated) options.onContextCreated(context);
     const {
       mode,
       push,
@@ -3484,14 +3520,12 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       return;
     }
     context.pure = true;
-    const { push, newline, helper, scopeId, mode } = context;
+    const { push, newline } = context;
     newline();
     for (let i = 0; i < hoists.length; i++) {
       const exp = hoists[i];
       if (exp) {
-        push(
-          `const _hoisted_${i + 1} = ${``}`
-        );
+        push(`const _hoisted_${i + 1} = `);
         genNode(exp, context);
         newline();
       }
@@ -3624,8 +3658,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
   }
   function genInterpolation(node, context) {
     const { push, helper, pure } = context;
-    if (pure)
-      push(PURE_ANNOTATION);
+    if (pure) push(PURE_ANNOTATION);
     push(`${helper(TO_DISPLAY_STRING)}(`);
     genNode(node.content, context);
     push(`)`);
@@ -3677,6 +3710,17 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       disableTracking,
       isComponent
     } = node;
+    let patchFlagString;
+    if (patchFlag) {
+      {
+        if (patchFlag < 0) {
+          patchFlagString = patchFlag + ` /* ${PatchFlagNames[patchFlag]} */`;
+        } else {
+          const flagNames = Object.keys(PatchFlagNames).map(Number).filter((n) => n > 0 && patchFlag & n).map((n) => PatchFlagNames[n]).join(`, `);
+          patchFlagString = patchFlag + ` /* ${flagNames} */`;
+        }
+      }
+    }
     if (directives) {
       push(helper(WITH_DIRECTIVES) + `(`);
     }
@@ -3689,7 +3733,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     const callHelper = isBlock ? getVNodeBlockHelper(context.inSSR, isComponent) : getVNodeHelper(context.inSSR, isComponent);
     push(helper(callHelper) + `(`, -2 /* None */, node);
     genNodeList(
-      genNullableArgs([tag, props, children, patchFlag, dynamicProps]),
+      genNullableArgs([tag, props, children, patchFlagString, dynamicProps]),
       context
     );
     push(`)`);
@@ -3705,8 +3749,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
   function genNullableArgs(args) {
     let i = args.length;
     while (i--) {
-      if (args[i] != null)
-        break;
+      if (args[i] != null) break;
     }
     return args.slice(0, i + 1).map((arg) => arg || `null`);
   }
@@ -3823,16 +3866,21 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
   }
   function genCacheExpression(node, context) {
     const { push, helper, indent, deindent, newline } = context;
+    const { needPauseTracking, needArraySpread } = node;
+    if (needArraySpread) {
+      push(`[...(`);
+    }
     push(`_cache[${node.index}] || (`);
-    if (node.isVNode) {
+    if (needPauseTracking) {
       indent();
       push(`${helper(SET_BLOCK_TRACKING)}(-1),`);
       newline();
+      push(`(`);
     }
     push(`_cache[${node.index}] = `);
     genNode(node.value, context);
-    if (node.isVNode) {
-      push(`,`);
+    if (needPauseTracking) {
+      push(`).cacheIndex = ${node.index},`);
       newline();
       push(`${helper(SET_BLOCK_TRACKING)}(1),`);
       newline();
@@ -3840,6 +3888,9 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       deindent();
     }
     push(`)`);
+    if (needArraySpread) {
+      push(`)]`);
+    }
   }
 
   const prohibitedKeywordRE = new RegExp(
@@ -4016,8 +4067,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
           sibling.branches.push(branch);
           const onExit = processCodegen && processCodegen(sibling, branch, false);
           traverseNode(branch, context);
-          if (onExit)
-            onExit();
+          if (onExit) onExit();
           context.currentNode = null;
         } else {
           context.onError(
@@ -4086,7 +4136,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
           helper(FRAGMENT),
           createObjectExpression([keyProperty]),
           children,
-          patchFlag + (` /* ${patchFlagText} */` ),
+          patchFlag,
           void 0,
           void 0,
           true,
@@ -4139,6 +4189,80 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     }
   }
 
+  const transformBind = (dir, _node, context) => {
+    const { modifiers, loc } = dir;
+    const arg = dir.arg;
+    let { exp } = dir;
+    if (exp && exp.type === 4 && !exp.content.trim()) {
+      {
+        exp = void 0;
+      }
+    }
+    if (!exp) {
+      if (arg.type !== 4 || !arg.isStatic) {
+        context.onError(
+          createCompilerError(
+            52,
+            arg.loc
+          )
+        );
+        return {
+          props: [
+            createObjectProperty(arg, createSimpleExpression("", true, loc))
+          ]
+        };
+      }
+      transformBindShorthand(dir);
+      exp = dir.exp;
+    }
+    if (arg.type !== 4) {
+      arg.children.unshift(`(`);
+      arg.children.push(`) || ""`);
+    } else if (!arg.isStatic) {
+      arg.content = `${arg.content} || ""`;
+    }
+    if (modifiers.includes("camel")) {
+      if (arg.type === 4) {
+        if (arg.isStatic) {
+          arg.content = camelize(arg.content);
+        } else {
+          arg.content = `${context.helperString(CAMELIZE)}(${arg.content})`;
+        }
+      } else {
+        arg.children.unshift(`${context.helperString(CAMELIZE)}(`);
+        arg.children.push(`)`);
+      }
+    }
+    if (!context.inSSR) {
+      if (modifiers.includes("prop")) {
+        injectPrefix(arg, ".");
+      }
+      if (modifiers.includes("attr")) {
+        injectPrefix(arg, "^");
+      }
+    }
+    return {
+      props: [createObjectProperty(arg, exp)]
+    };
+  };
+  const transformBindShorthand = (dir, context) => {
+    const arg = dir.arg;
+    const propName = camelize(arg.content);
+    dir.exp = createSimpleExpression(propName, false, arg.loc);
+  };
+  const injectPrefix = (arg, prefix) => {
+    if (arg.type === 4) {
+      if (arg.isStatic) {
+        arg.content = prefix + arg.content;
+      } else {
+        arg.content = `\`${prefix}\${${arg.content}}\``;
+      }
+    } else {
+      arg.children.unshift(`'${prefix}' + (`);
+      arg.children.push(`)`);
+    }
+  };
+
   const transformFor = createStructuralDirectiveTransform(
     "for",
     (node, dir, context) => {
@@ -4149,9 +4273,12 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         ]);
         const isTemplate = isTemplateNode(node);
         const memo = findDir(node, "memo");
-        const keyProp = findProp(node, `key`);
-        const keyExp = keyProp && (keyProp.type === 6 ? createSimpleExpression(keyProp.value.content, true) : keyProp.exp);
-        const keyProperty = keyProp ? createObjectProperty(`key`, keyExp) : null;
+        const keyProp = findProp(node, `key`, false, true);
+        if (keyProp && keyProp.type === 7 && !keyProp.exp) {
+          transformBindShorthand(keyProp);
+        }
+        const keyExp = keyProp && (keyProp.type === 6 ? keyProp.value ? createSimpleExpression(keyProp.value.content, true) : void 0 : keyProp.exp);
+        const keyProperty = keyProp && keyExp ? createObjectProperty(`key`, keyExp) : null;
         const isStableFragment = forNode.source.type === 4 && forNode.source.constType > 0;
         const fragmentFlag = isStableFragment ? 64 : keyProp ? 128 : 256;
         forNode.codegenNode = createVNodeCall(
@@ -4159,7 +4286,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
           helper(FRAGMENT),
           void 0,
           renderExp,
-          fragmentFlag + (` /* ${PatchFlagNames[fragmentFlag]} */` ),
+          fragmentFlag,
           void 0,
           void 0,
           true,
@@ -4199,7 +4326,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
               helper(FRAGMENT),
               keyProperty ? createObjectExpression([keyProperty]) : void 0,
               node.children,
-              64 + (` /* ${PatchFlagNames[64]} */` ),
+              64,
               void 0,
               void 0,
               true,
@@ -4253,8 +4380,9 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
             renderExp.arguments.push(
               loop,
               createSimpleExpression(`_cache`),
-              createSimpleExpression(String(context.cached++))
+              createSimpleExpression(String(context.cached.length))
             );
+            context.cached.push(null);
           } else {
             renderExp.arguments.push(
               createFunctionExpression(
@@ -4300,13 +4428,11 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     const onExit = processCodegen && processCodegen(forNode);
     return () => {
       scopes.vFor--;
-      if (onExit)
-        onExit();
+      if (onExit) onExit();
     };
   }
   function finalizeForParseResult(result, context) {
-    if (result.finalized)
-      return;
+    if (result.finalized) return;
     {
       validateBrowserExpression(result.source, context);
       if (result.key) {
@@ -4339,8 +4465,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
   function createParamsList(args) {
     let i = args.length;
     while (i--) {
-      if (args[i])
-        break;
+      if (args[i]) break;
     }
     return args.slice(0, i + 1).map((arg, i2) => arg || createSimpleExpression(`_`.repeat(i2 + 1), false));
   }
@@ -4463,9 +4588,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
             break;
           }
         }
-        if (prev && isTemplateNode(prev) && findDir(prev, "if")) {
-          children.splice(i, 1);
-          i--;
+        if (prev && isTemplateNode(prev) && findDir(prev, /^(else-)?if$/)) {
           let conditional = dynamicSlots[dynamicSlots.length - 1];
           while (conditional.alternate.type === 19) {
             conditional = conditional.alternate;
@@ -4602,13 +4725,11 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
           }
           break;
         case 9:
-          if (hasForwardedSlots(child.branches))
-            return true;
+          if (hasForwardedSlots(child.branches)) return true;
           break;
         case 10:
         case 11:
-          if (hasForwardedSlots(child.children))
-            return true;
+          if (hasForwardedSlots(child.children)) return true;
           break;
       }
     }
@@ -4633,7 +4754,6 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       const isDynamicComponent = isObject(vnodeTag) && vnodeTag.callee === RESOLVE_DYNAMIC_COMPONENT;
       let vnodeProps;
       let vnodeChildren;
-      let vnodePatchFlag;
       let patchFlag = 0;
       let vnodeDynamicProps;
       let dynamicPropNames;
@@ -4644,7 +4764,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         // updates inside get proper isSVG flag at runtime. (#639, #643)
         // This is technically web-specific, but splitting the logic out of core
         // leads to too much unnecessary complexity.
-        (tag === "svg" || tag === "foreignObject")
+        (tag === "svg" || tag === "foreignObject" || tag === "math")
       );
       if (props.length > 0) {
         const propsBuildResult = buildProps(
@@ -4704,25 +4824,15 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
           vnodeChildren = node.children;
         }
       }
-      if (patchFlag !== 0) {
-        {
-          if (patchFlag < 0) {
-            vnodePatchFlag = patchFlag + ` /* ${PatchFlagNames[patchFlag]} */`;
-          } else {
-            const flagNames = Object.keys(PatchFlagNames).map(Number).filter((n) => n > 0 && patchFlag & n).map((n) => PatchFlagNames[n]).join(`, `);
-            vnodePatchFlag = patchFlag + ` /* ${flagNames} */`;
-          }
-        }
-        if (dynamicPropNames && dynamicPropNames.length) {
-          vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames);
-        }
+      if (dynamicPropNames && dynamicPropNames.length) {
+        vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames);
       }
       node.codegenNode = createVNodeCall(
         context,
         vnodeTag,
         vnodeProps,
         vnodeChildren,
-        vnodePatchFlag,
+        patchFlag === 0 ? void 0 : patchFlag,
         vnodeDynamicProps,
         vnodeDirectives,
         !!shouldUseBlock,
@@ -4767,8 +4877,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     }
     const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag);
     if (builtIn) {
-      if (!ssr)
-        context.helper(builtIn);
+      if (!ssr) context.helper(builtIn);
       return builtIn;
     }
     context.helper(RESOLVE_COMPONENT);
@@ -4797,8 +4906,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         );
         properties = [];
       }
-      if (arg)
-        mergeArgs.push(arg);
+      if (arg) mergeArgs.push(arg);
     };
     const pushRefVForMarker = () => {
       if (context.scopes.vFor > 0) {
@@ -5135,8 +5243,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       }
     }
     const { loc } = dir;
-    if (dir.exp)
-      dirArgs.push(dir.exp);
+    if (dir.exp) dirArgs.push(dir.exp);
     if (dir.arg) {
       if (!dir.exp) {
         dirArgs.push(`void 0`);
@@ -5166,8 +5273,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     let propsNamesString = `[`;
     for (let i = 0, l = props.length; i < l; i++) {
       propsNamesString += JSON.stringify(props[i]);
-      if (i < l - 1)
-        propsNamesString += ", ";
+      if (i < l - 1) propsNamesString += ", ";
     }
     return propsNamesString + `]`;
   }
@@ -5261,7 +5367,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     };
   }
 
-  const fnExpRE = /^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*(:[^=]+)?=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/;
+  const fnExpRE = /^\s*(async\s*)?(\([^)]*?\)|[\w$_]+)\s*(:[^=]+)?=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/;
   const transformOn$1 = (dir, node, context, augmentor) => {
     const { loc, modifiers, arg } = dir;
     if (!dir.exp && !modifiers.length) {
@@ -5342,75 +5448,6 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     return ret;
   };
 
-  const transformBind = (dir, _node, context) => {
-    const { modifiers, loc } = dir;
-    const arg = dir.arg;
-    let { exp } = dir;
-    if (exp && exp.type === 4 && !exp.content.trim()) {
-      {
-        exp = void 0;
-      }
-    }
-    if (!exp) {
-      if (arg.type !== 4 || !arg.isStatic) {
-        context.onError(
-          createCompilerError(
-            52,
-            arg.loc
-          )
-        );
-        return {
-          props: [
-            createObjectProperty(arg, createSimpleExpression("", true, loc))
-          ]
-        };
-      }
-      const propName = camelize(arg.content);
-      exp = dir.exp = createSimpleExpression(propName, false, arg.loc);
-    }
-    if (arg.type !== 4) {
-      arg.children.unshift(`(`);
-      arg.children.push(`) || ""`);
-    } else if (!arg.isStatic) {
-      arg.content = `${arg.content} || ""`;
-    }
-    if (modifiers.includes("camel")) {
-      if (arg.type === 4) {
-        if (arg.isStatic) {
-          arg.content = camelize(arg.content);
-        } else {
-          arg.content = `${context.helperString(CAMELIZE)}(${arg.content})`;
-        }
-      } else {
-        arg.children.unshift(`${context.helperString(CAMELIZE)}(`);
-        arg.children.push(`)`);
-      }
-    }
-    if (!context.inSSR) {
-      if (modifiers.includes("prop")) {
-        injectPrefix(arg, ".");
-      }
-      if (modifiers.includes("attr")) {
-        injectPrefix(arg, "^");
-      }
-    }
-    return {
-      props: [createObjectProperty(arg, exp)]
-    };
-  };
-  const injectPrefix = (arg, prefix) => {
-    if (arg.type === 4) {
-      if (arg.isStatic) {
-        arg.content = prefix + arg.content;
-      } else {
-        arg.content = `\`${prefix}\${${arg.content}}\``;
-      }
-    } else {
-      arg.children.unshift(`'${prefix}' + (`);
-      arg.children.push(`)`);
-    }
-  };
-
   const transformText = (node, context) => {
     if (node.type === 0 || node.type === 1 || node.type === 11 || node.type === 10) {
       return () => {
@@ -5574,8 +5611,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     }
     if (node.type === 5) {
       rewriteFilter(node.content, context);
-    }
-    if (node.type === 1) {
+    } else if (node.type === 1) {
       node.props.forEach((prop) => {
         if (prop.type === 7 && prop.name !== "for" && prop.exp) {
           rewriteFilter(prop.exp, context);
@@ -5589,8 +5625,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     } else {
       for (let i = 0; i < node.children.length; i++) {
         const child = node.children[i];
-        if (typeof child !== "object")
-          continue;
+        if (typeof child !== "object") continue;
         if (child.type === 4) {
           parseFilter(child, context);
         } else if (child.type === 8) {
@@ -5616,17 +5651,13 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       prev = c;
       c = exp.charCodeAt(i);
       if (inSingle) {
-        if (c === 39 && prev !== 92)
-          inSingle = false;
+        if (c === 39 && prev !== 92) inSingle = false;
       } else if (inDouble) {
-        if (c === 34 && prev !== 92)
-          inDouble = false;
+        if (c === 34 && prev !== 92) inDouble = false;
       } else if (inTemplateString) {
-        if (c === 96 && prev !== 92)
-          inTemplateString = false;
+        if (c === 96 && prev !== 92) inTemplateString = false;
       } else if (inRegex) {
-        if (c === 47 && prev !== 92)
-          inRegex = false;
+        if (c === 47 && prev !== 92) inRegex = false;
       } else if (c === 124 && // pipe
       exp.charCodeAt(i + 1) !== 124 && exp.charCodeAt(i - 1) !== 124 && !curly && !square && !paren) {
         if (expression === void 0) {
@@ -5670,8 +5701,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
           let p;
           for (; j >= 0; j--) {
             p = exp.charAt(j);
-            if (p !== " ")
-              break;
+            if (p !== " ") break;
           }
           if (!p || !validDivisionCharRE.test(p)) {
             inRegex = true;
@@ -5698,6 +5728,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         expression = wrapFilter(expression, filters[i], context);
       }
       node.content = expression;
+      node.ast = void 0;
     }
   }
   function wrapFilter(exp, filter, context) {
@@ -5732,8 +5763,9 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
             dir.exp,
             createFunctionExpression(void 0, codegenNode),
             `_cache`,
-            String(context.cached++)
+            String(context.cached.length)
           ]);
+          context.cached.push(null);
         }
       };
     }
@@ -6169,8 +6201,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
   const transformOn = (dir, node, context) => {
     return transformOn$1(dir, node, context, (baseResult) => {
       const { modifiers } = dir;
-      if (!modifiers.length)
-        return baseResult;
+      if (!modifiers.length) return baseResult;
       let { key, value: handlerExp } = baseResult.props[0];
       const { keyModifiers, nonKeyModifiers, eventOptionModifiers } = resolveModifiers(key, modifiers, context, dir.loc);
       if (nonKeyModifiers.includes("right")) {
@@ -6281,12 +6312,10 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       return onlyValidParents[child].has(parent);
     }
     if (parent in knownInvalidChildren) {
-      if (knownInvalidChildren[parent].has(child))
-        return false;
+      if (knownInvalidChildren[parent].has(child)) return false;
     }
     if (child in knownInvalidParents) {
-      if (knownInvalidParents[child].has(parent))
-        return false;
+      if (knownInvalidParents[child].has(parent)) return false;
     }
     return true;
   }