@vue/compiler-vapor 3.6.0-alpha.4 → 3.6.0-alpha.6

package/dist/compiler-vapor.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compiler-vapor v3.6.0-alpha.4
+* @vue/compiler-vapor v3.6.0-alpha.6
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -24,8 +24,7 @@ const newBlock = (node) => ({
   effect: [],
   operation: [],
   returns: [],
-  tempId: 0,
-  hasDeferredVShow: false
+  tempId: 0
 });
 function wrapTemplate(node, dirs) {
   if (node.tagType === 3) {
@@ -282,10 +281,12 @@ function transform(node, options = {}) {
     source: node.source,
     template: /* @__PURE__ */ new Map(),
     templateIndexMap: /* @__PURE__ */ new Map(),
+    rootTemplateIndexes: /* @__PURE__ */ new Set(),
     component: /* @__PURE__ */ new Set(),
     directive: /* @__PURE__ */ new Set(),
     block: newBlock(node),
-    hasTemplateRef: false
+    hasTemplateRef: false,
+    hasDeferredVShow: false
   };
   const context = new TransformContext(ir, node, options);
   transformNode(context);
@@ -778,8 +779,10 @@ function analyzeExpressions(expressions) {
       exp.ast === null && registerVariable(exp.content, exp, true);
       continue;
     }
+    const seenParents = /* @__PURE__ */ new Set();
     compilerDom.walkIdentifiers(exp.ast, (currentNode, parent, parentStack) => {
-      if (parent && isMemberExpression(parent)) {
+      if (parent && isMemberExpression(parent) && !seenParents.has(parent)) {
+        seenParents.add(parent);
         const memberExp = extractMemberExpression(parent, (id) => {
           registerVariable(id.name, exp, true, {
             start: id.start,
@@ -881,7 +884,7 @@ function shouldDeclareVariable(name, expToVariableMap, exps) {
     }
     return true;
   }
-  if (vars.some((v) => v.some((e) => first.includes(e)))) {
+  if (vars.every((v) => v.every((e, idx) => e === first[idx]))) {
     return false;
   }
   return true;
@@ -890,7 +893,9 @@ function processRepeatedExpressions(context, expressions, varDeclarations, updat
   const declarations = [];
   const seenExp = expressions.reduce(
     (acc, exp) => {
-      const variables = expToVariableMap.get(exp).map((v) => v.name);
+      const vars = expToVariableMap.get(exp);
+      if (!vars) return acc;
+      const variables = vars.map((v) => v.name);
       if (exp.ast && exp.ast.type !== "Identifier" && !(variables && variables.some((v) => updatedVariable.has(v)))) {
         acc[exp.content] = (acc[exp.content] || 0) + 1;
       }
@@ -1006,12 +1011,14 @@ function extractMemberExpression(exp, onIdentifier) {
       const object = extractMemberExpression(exp.object, onIdentifier);
       const prop = exp.computed ? `[${extractMemberExpression(exp.property, onIdentifier)}]` : `.${extractMemberExpression(exp.property, shared.NOOP)}`;
       return `${object}${prop}`;
+    case "TSNonNullExpression":
+      return `${extractMemberExpression(exp.expression, onIdentifier)}`;
     default:
       return "";
   }
 }
 const isMemberExpression = (node) => {
-  return node.type === "MemberExpression" || node.type === "OptionalMemberExpression";
+  return node.type === "MemberExpression" || node.type === "OptionalMemberExpression" || node.type === "TSNonNullExpression";
 };
 
 function genSetEvent(oper, context) {
@@ -1020,7 +1027,7 @@ function genSetEvent(oper, context) {
   const name = genName();
   const handler = [
     `${context.helper("createInvoker")}(`,
-    ...genEventHandler(context, value, modifiers),
+    ...genEventHandler(context, [value], modifiers),
     `)`
   ];
   const eventOptions = genEventOptions();
@@ -1077,37 +1084,47 @@ function genSetDynamicEvents(oper, context) {
     )
   ];
 }
-function genEventHandler(context, value, modifiers = { nonKeys: [], keys: [] }, extraWrap = false) {
-  let handlerExp = [`() => {}`];
-  if (value && value.content.trim()) {
-    if (compilerDom.isMemberExpression(value, context.options)) {
-      handlerExp = genExpression(value, context);
-      if (!isConstantBinding(value, context) && !extraWrap) {
-        const isTSNode = value.ast && compilerDom.TS_NODE_TYPES.includes(value.ast.type);
-        handlerExp = [
-          `e => `,
-          isTSNode ? "(" : "",
-          ...handlerExp,
-          isTSNode ? ")" : "",
-          `(e)`
-        ];
+function genEventHandler(context, values, modifiers = { nonKeys: [], keys: [] }, extraWrap = false) {
+  let handlerExp = [];
+  if (values) {
+    values.forEach((value, index) => {
+      let exp = [];
+      if (value && value.content.trim()) {
+        if (compilerDom.isMemberExpression(value, context.options)) {
+          exp = genExpression(value, context);
+          if (!isConstantBinding(value, context) && !extraWrap) {
+            const isTSNode = value.ast && compilerDom.TS_NODE_TYPES.includes(value.ast.type);
+            exp = [
+              `e => `,
+              isTSNode ? "(" : "",
+              ...exp,
+              isTSNode ? ")" : "",
+              `(e)`
+            ];
+          }
+        } else if (compilerDom.isFnExpression(value, context.options)) {
+          exp = genExpression(value, context);
+        } else {
+          const referencesEvent = value.content.includes("$event");
+          const hasMultipleStatements = value.content.includes(`;`);
+          const expr = referencesEvent ? context.withId(() => genExpression(value, context), {
+            $event: null
+          }) : genExpression(value, context);
+          exp = [
+            referencesEvent ? "$event => " : "() => ",
+            hasMultipleStatements ? "{" : "(",
+            ...expr,
+            hasMultipleStatements ? "}" : ")"
+          ];
+        }
+        handlerExp = handlerExp.concat([index !== 0 ? ", " : "", ...exp]);
       }
-    } else if (compilerDom.isFnExpression(value, context.options)) {
-      handlerExp = genExpression(value, context);
-    } else {
-      const referencesEvent = value.content.includes("$event");
-      const hasMultipleStatements = value.content.includes(`;`);
-      const expr = referencesEvent ? context.withId(() => genExpression(value, context), {
-        $event: null
-      }) : genExpression(value, context);
-      handlerExp = [
-        referencesEvent ? "$event => " : "() => ",
-        hasMultipleStatements ? "{" : "(",
-        ...expr,
-        hasMultipleStatements ? "}" : ")"
-      ];
+    });
+    if (values.length > 1) {
+      handlerExp = ["[", ...handlerExp, "]"];
     }
   }
+  if (handlerExp.length === 0) handlerExp = ["() => {}"];
   const { keys, nonKeys } = modifiers;
   if (nonKeys.length)
     handlerExp = genWithModifiers(context, handlerExp, nonKeys);
@@ -1148,35 +1165,19 @@ function genFor(oper, context) {
     component,
     onlyChild
   } = oper;
-  let rawValue = null;
+  const rawValue = value && value.content;
   const rawKey = key && key.content;
   const rawIndex = index && index.content;
   const sourceExpr = ["() => (", ...genExpression(source, context), ")"];
-  const idToPathMap = parseValueDestructure();
+  const idToPathMap = parseValueDestructure(value, context);
   const [depth, exitScope] = context.enterScope();
-  const idMap = {};
   const itemVar = `_for_item${depth}`;
+  const idMap = buildDestructureIdMap(
+    idToPathMap,
+    `${itemVar}.value`,
+    context.options.expressionPlugins
+  );
   idMap[itemVar] = null;
-  idToPathMap.forEach((pathInfo, id2) => {
-    let path = `${itemVar}.value${pathInfo ? pathInfo.path : ""}`;
-    if (pathInfo) {
-      if (pathInfo.helper) {
-        idMap[pathInfo.helper] = null;
-        path = `${pathInfo.helper}(${path}, ${pathInfo.helperArgs})`;
-      }
-      if (pathInfo.dynamic) {
-        const node = idMap[id2] = compilerDom.createSimpleExpression(path);
-        const plugins = context.options.expressionPlugins;
-        node.ast = parser.parseExpression(`(${path})`, {
-          plugins: plugins ? [...plugins, "typescript"] : ["typescript"]
-        });
-      } else {
-        idMap[id2] = path;
-      }
-    } else {
-      idMap[id2] = path;
-    }
-  });
   const args = [itemVar];
   if (rawKey) {
     const keyVar = `_for_key${depth}`;
@@ -1274,77 +1275,6 @@ function genFor(oper, context) {
       // todo: hydrationNode
     )
   ];
-  function parseValueDestructure() {
-    const map = /* @__PURE__ */ new Map();
-    if (value) {
-      rawValue = value && value.content;
-      if (value.ast) {
-        compilerDom.walkIdentifiers(
-          value.ast,
-          (id2, _, parentStack, ___, isLocal) => {
-            if (isLocal) {
-              let path = "";
-              let isDynamic = false;
-              let helper2;
-              let helperArgs;
-              for (let i = 0; i < parentStack.length; i++) {
-                const parent = parentStack[i];
-                const child = parentStack[i + 1] || id2;
-                if (parent.type === "ObjectProperty" && parent.value === child) {
-                  if (parent.key.type === "StringLiteral") {
-                    path += `[${JSON.stringify(parent.key.value)}]`;
-                  } else if (parent.computed) {
-                    isDynamic = true;
-                    path += `[${value.content.slice(
-                      parent.key.start - 1,
-                      parent.key.end - 1
-                    )}]`;
-                  } else {
-                    path += `.${parent.key.name}`;
-                  }
-                } else if (parent.type === "ArrayPattern") {
-                  const index2 = parent.elements.indexOf(child);
-                  if (child.type === "RestElement") {
-                    path += `.slice(${index2})`;
-                  } else {
-                    path += `[${index2}]`;
-                  }
-                } else if (parent.type === "ObjectPattern" && child.type === "RestElement") {
-                  helper2 = context.helper("getRestElement");
-                  helperArgs = "[" + parent.properties.filter((p) => p.type === "ObjectProperty").map((p) => {
-                    if (p.key.type === "StringLiteral") {
-                      return JSON.stringify(p.key.value);
-                    } else if (p.computed) {
-                      isDynamic = true;
-                      return value.content.slice(
-                        p.key.start - 1,
-                        p.key.end - 1
-                      );
-                    } else {
-                      return JSON.stringify(p.key.name);
-                    }
-                  }).join(", ") + "]";
-                }
-                if (child.type === "AssignmentPattern" && (parent.type === "ObjectProperty" || parent.type === "ArrayPattern")) {
-                  isDynamic = true;
-                  helper2 = context.helper("getDefaultValue");
-                  helperArgs = value.content.slice(
-                    child.right.start - 1,
-                    child.right.end - 1
-                  );
-                }
-              }
-              map.set(id2.name, { path, dynamic: isDynamic, helper: helper2, helperArgs });
-            }
-          },
-          true
-        );
-      } else {
-        map.set(rawValue, null);
-      }
-    }
-    return map;
-  }
   function genCallback(expr) {
     if (!expr) return false;
     const res = context.withId(
@@ -1371,6 +1301,98 @@ function genFor(oper, context) {
     return idMap2;
   }
 }
+function parseValueDestructure(value, context) {
+  const map = /* @__PURE__ */ new Map();
+  if (value) {
+    const rawValue = value.content;
+    if (value.ast) {
+      compilerDom.walkIdentifiers(
+        value.ast,
+        (id, _, parentStack, ___, isLocal) => {
+          if (isLocal) {
+            let path = "";
+            let isDynamic = false;
+            let helper;
+            let helperArgs;
+            for (let i = 0; i < parentStack.length; i++) {
+              const parent = parentStack[i];
+              const child = parentStack[i + 1] || id;
+              if (parent.type === "ObjectProperty" && parent.value === child) {
+                if (parent.key.type === "StringLiteral") {
+                  path += `[${JSON.stringify(parent.key.value)}]`;
+                } else if (parent.computed) {
+                  isDynamic = true;
+                  path += `[${rawValue.slice(
+                    parent.key.start - 1,
+                    parent.key.end - 1
+                  )}]`;
+                } else {
+                  path += `.${parent.key.name}`;
+                }
+              } else if (parent.type === "ArrayPattern") {
+                const index = parent.elements.indexOf(child);
+                if (child.type === "RestElement") {
+                  path += `.slice(${index})`;
+                } else {
+                  path += `[${index}]`;
+                }
+              } else if (parent.type === "ObjectPattern" && child.type === "RestElement") {
+                helper = context.helper("getRestElement");
+                helperArgs = "[" + parent.properties.filter((p) => p.type === "ObjectProperty").map((p) => {
+                  if (p.key.type === "StringLiteral") {
+                    return JSON.stringify(p.key.value);
+                  } else if (p.computed) {
+                    isDynamic = true;
+                    return rawValue.slice(p.key.start - 1, p.key.end - 1);
+                  } else {
+                    return JSON.stringify(p.key.name);
+                  }
+                }).join(", ") + "]";
+              }
+              if (child.type === "AssignmentPattern" && (parent.type === "ObjectProperty" || parent.type === "ArrayPattern")) {
+                isDynamic = true;
+                helper = context.helper("getDefaultValue");
+                helperArgs = rawValue.slice(
+                  child.right.start - 1,
+                  child.right.end - 1
+                );
+              }
+            }
+            map.set(id.name, { path, dynamic: isDynamic, helper, helperArgs });
+          }
+        },
+        true
+      );
+    } else if (rawValue) {
+      map.set(rawValue, null);
+    }
+  }
+  return map;
+}
+function buildDestructureIdMap(idToPathMap, baseAccessor, plugins) {
+  const idMap = {};
+  idToPathMap.forEach((pathInfo, id) => {
+    let path = baseAccessor;
+    if (pathInfo) {
+      path = `${baseAccessor}${pathInfo.path}`;
+      if (pathInfo.helper) {
+        idMap[pathInfo.helper] = null;
+        path = pathInfo.helperArgs ? `${pathInfo.helper}(${path}, ${pathInfo.helperArgs})` : `${pathInfo.helper}(${path})`;
+      }
+      if (pathInfo.dynamic) {
+        const node = idMap[id] = compilerDom.createSimpleExpression(path);
+        node.ast = parser.parseExpression(`(${path})`, {
+          plugins: plugins ? [...plugins, "typescript"] : ["typescript"]
+        });
+      } else {
+        idMap[id] = path;
+      }
+    } else {
+      idMap[id] = path;
+    }
+  });
+  return idMap;
+}
 function matchPatterns(render, keyProp, idMap) {
   const selectorPatterns = [];
   const keyOnlyBindingPatterns = [];
@@ -1582,7 +1604,6 @@ function genDynamicProps$1(oper, context) {
       helper("setDynamicProps"),
       `n${oper.element}`,
       genMulti(DELIMITERS_ARRAY, ...values),
-      oper.root && "true",
       isSVG && "true"
     )
   ];
@@ -1612,6 +1633,7 @@ function genPropKey({ key: node, modifier, runtimeCamelize, handler, handlerModi
   }
   let key = genExpression(node, context);
   if (runtimeCamelize) {
+    key.push(' || ""');
     key = genCall(helper("camelize"), key);
   }
   if (handler) {
@@ -1853,7 +1875,7 @@ function genCreateComponent(operation, context) {
   const rawProps = context.withId(() => genRawProps(props, context), ids);
   const inlineHandlers = handlers.reduce(
     (acc, { name, value }) => {
-      const handler = genEventHandler(context, value, void 0, false);
+      const handler = genEventHandler(context, [value], void 0, false);
       return [...acc, `const ${name} = `, ...handler, NEWLINE];
     },
     []
@@ -1987,7 +2009,7 @@ function genProp(prop, context, isStatic) {
     ": ",
     ...prop.handler ? genEventHandler(
       context,
-      prop.values[0],
+      prop.values,
       prop.handlerModifiers,
       true
     ) : isStatic ? ["() => (", ...values, ")"] : values,
@@ -2115,35 +2137,29 @@ function genConditionalSlot(slot, context) {
   ];
 }
 function genSlotBlockWithProps(oper, context) {
-  let isDestructureAssignment = false;
-  let rawProps;
   let propsName;
   let exitScope;
   let depth;
   const { props, key, node } = oper;
-  const idsOfProps = /* @__PURE__ */ new Set();
+  const idToPathMap = props ? parseValueDestructure(props, context) : /* @__PURE__ */ new Map();
   if (props) {
-    rawProps = props.content;
-    if (isDestructureAssignment = !!props.ast) {
+    if (props.ast) {
       [depth, exitScope] = context.enterScope();
       propsName = `_slotProps${depth}`;
-      compilerDom.walkIdentifiers(
-        props.ast,
-        (id, _, __, ___, isLocal) => {
-          if (isLocal) idsOfProps.add(id.name);
-        },
-        true
-      );
     } else {
-      idsOfProps.add(propsName = rawProps);
+      propsName = props.content;
     }
   }
-  const idMap = {};
-  idsOfProps.forEach(
-    (id) => idMap[id] = isDestructureAssignment ? `${propsName}[${JSON.stringify(id)}]` : null
-  );
+  const idMap = idToPathMap.size ? buildDestructureIdMap(
+    idToPathMap,
+    propsName || "",
+    context.options.expressionPlugins
+  ) : {};
+  if (propsName) {
+    idMap[propsName] = null;
+  }
   let blockFn = context.withId(
-    () => genBlock(oper, context, [propsName]),
+    () => genBlock(oper, context, propsName ? [propsName] : []),
     idMap
   );
   exitScope && exitScope();
@@ -2164,14 +2180,69 @@ function genSlotBlockWithProps(oper, context) {
     ];
   }
   if (node.type === 1) {
-    blockFn = [`${context.helper("withVaporCtx")}(`, ...blockFn, `)`];
+    if (needsVaporCtx(oper)) {
+      blockFn = [`${context.helper("withVaporCtx")}(`, ...blockFn, `)`];
+    }
   }
   return blockFn;
 }
+function needsVaporCtx(block) {
+  return hasComponentOrSlotInBlock(block);
+}
+function hasComponentOrSlotInBlock(block) {
+  if (hasComponentOrSlotInOperations(block.operation)) return true;
+  return hasComponentOrSlotInDynamic(block.dynamic);
+}
+function hasComponentOrSlotInDynamic(dynamic) {
+  if (dynamic.operation) {
+    const type = dynamic.operation.type;
+    if (type === 11 || type === 12) {
+      return true;
+    }
+    if (type === 15) {
+      if (hasComponentOrSlotInIf(dynamic.operation)) return true;
+    }
+    if (type === 16) {
+      if (hasComponentOrSlotInBlock(dynamic.operation.render))
+        return true;
+    }
+  }
+  for (const child of dynamic.children) {
+    if (hasComponentOrSlotInDynamic(child)) return true;
+  }
+  return false;
+}
+function hasComponentOrSlotInOperations(operations) {
+  for (const op of operations) {
+    switch (op.type) {
+      case 11:
+      case 12:
+        return true;
+      case 15:
+        if (hasComponentOrSlotInIf(op)) return true;
+        break;
+      case 16:
+        if (hasComponentOrSlotInBlock(op.render)) return true;
+        break;
+    }
+  }
+  return false;
+}
+function hasComponentOrSlotInIf(node) {
+  if (hasComponentOrSlotInBlock(node.positive)) return true;
+  if (node.negative) {
+    if ("positive" in node.negative) {
+      return hasComponentOrSlotInIf(node.negative);
+    } else {
+      return hasComponentOrSlotInBlock(node.negative);
+    }
+  }
+  return false;
+}
 
 function genSlotOutlet(oper, context) {
   const { helper } = context;
-  const { id, name, fallback, noSlotted } = oper;
+  const { id, name, fallback, noSlotted, once } = oper;
   const [frag, push] = buildCodeFragment();
   const nameExpr = name.isStatic ? genExpression(name, context) : ["() => (", ...genExpression(name, context), ")"];
   let fallbackArg;
@@ -2186,8 +2257,10 @@ function genSlotOutlet(oper, context) {
       nameExpr,
       genRawProps(oper.props, context) || "null",
       fallbackArg,
-      noSlotted && "true"
+      noSlotted && "true",
       // noSlotted
+      once && "true"
+      // v-once
     )
   );
   return frag;
@@ -2319,7 +2392,7 @@ function genInsertionState(operation, context) {
   ];
 }
 
-function genTemplates(templates, rootIndex, context) {
+function genTemplates(templates, rootIndexes, context) {
   const result = [];
   let i = 0;
   templates.forEach((ns, template) => {
@@ -2330,7 +2403,7 @@ function genTemplates(templates, rootIndex, context) {
         // replace import expressions with string concatenation
         IMPORT_EXPR_RE,
         `" + $1 + "`
-      )}${i === rootIndex ? ", true" : ns ? ", false" : ""}${ns ? `, ${ns}` : ""})
+      )}${rootIndexes.has(i) ? ", true" : ns ? ", false" : ""}${ns ? `, ${ns}` : ""})
 `
     );
     i++;
@@ -2437,9 +2510,6 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
   const [frag, push] = buildCodeFragment();
   const { dynamic, effect, operation, returns, key } = block;
   const resetBlock = context.enterBlock(block);
-  if (block.hasDeferredVShow) {
-    push(NEWLINE, `const deferredApplyVShows = []`);
-  }
   if (root) {
     for (let name of context.ir.component) {
       const id = compilerDom.toValidAssetId(name, "component");
@@ -2468,7 +2538,7 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
   }
   push(...genOperations(operation, context));
   push(...genEffects(effect, context, genEffectsExtraFrag));
-  if (block.hasDeferredVShow) {
+  if (root && context.ir.hasDeferredVShow) {
     push(NEWLINE, `deferredApplyVShows.forEach(fn => fn())`);
   }
   if (dynamic.needsKey) {
@@ -2624,13 +2694,16 @@ function generate(ir, options = {}) {
       `const ${setTemplateRefIdent} = ${context.helper("createTemplateRefSetter")}()`
     );
   }
+  if (ir.hasDeferredVShow) {
+    push(NEWLINE, `const deferredApplyVShows = []`);
+  }
   push(...genBlockContent(ir.block, context, true));
   push(INDENT_END, NEWLINE);
   if (!inline) {
     push("}");
   }
   const delegates = genDelegates(context);
-  const templates = genTemplates(ir.template, ir.rootTemplateIndex, context);
+  const templates = genTemplates(ir.template, ir.rootTemplateIndexes, context);
   const imports = genHelperImports(context) + genAssetImports(context);
   const preamble = imports + templates + delegates;
   const newlineCount = [...preamble].filter((c) => c === "\n").length;
@@ -2777,6 +2850,11 @@ const isReservedProp = /* @__PURE__ */ shared.makeMap(
 const transformElement = (node, context) => {
   let effectIndex = context.block.effect.length;
   const getEffectIndex = () => effectIndex++;
+  let parentSlots;
+  if (node.type === 1 && (node.tagType === 1 || context.options.isCustomElement(node.tag))) {
+    parentSlots = context.slots;
+    context.slots = [];
+  }
   return function postTransformElement() {
     ({ node } = context);
     if (!(node.type === 1 && (node.tagType === 0 || node.tagType === 1)))
@@ -2791,11 +2869,7 @@ const transformElement = (node, context) => {
       isDynamicComponent,
       getEffectIndex
     );
-    let { parent } = context;
-    while (parent && parent.parent && parent.node.type === 1 && parent.node.tagType === 3) {
-      parent = parent.parent;
-    }
-    const singleRoot = context.root === parent && parent.node.children.filter((child) => child.type !== 3).length === 1 || isCustomElement;
+    const singleRoot = isSingleRoot(context);
     if (isComponent) {
       transformComponentElement(
         node,
@@ -2814,8 +2888,27 @@ const transformElement = (node, context) => {
         getEffectIndex
       );
     }
+    if (parentSlots) {
+      context.slots = parentSlots;
+    }
   };
 };
+function isSingleRoot(context) {
+  if (context.inVFor) {
+    return false;
+  }
+  let { parent } = context;
+  if (parent && !(compilerDom.hasSingleChild(parent.node) || compilerDom.isSingleIfBlock(parent.node))) {
+    return false;
+  }
+  while (parent && parent.parent && parent.node.type === 1 && parent.node.tagType === 3) {
+    parent = parent.parent;
+    if (!(compilerDom.hasSingleChild(parent.node) || compilerDom.isSingleIfBlock(parent.node))) {
+      return false;
+    }
+  }
+  return context.root === parent;
+}
 function transformComponentElement(node, propsResult, singleRoot, context, isDynamicComponent, isCustomElement) {
   const dynamicComponent = isDynamicComponent ? resolveDynamicComponent(node) : void 0;
   let { tag } = node;
@@ -2853,7 +2946,7 @@ function transformComponentElement(node, propsResult, singleRoot, context, isDyn
     tag,
     props: propsResult[0] ? propsResult[1] : [propsResult[1]],
     asset,
-    root: singleRoot && !context.inVFor,
+    root: singleRoot,
     slots: [...context.slots],
     once: context.inVOnce,
     dynamic: dynamicComponent,
@@ -2904,7 +2997,6 @@ function transformNativeElement(node, propsResult, singleRoot, context, getEffec
         type: 3,
         element: context.reference(),
         props: dynamicArgs,
-        root: singleRoot,
         tag
       },
       getEffectIndex
@@ -2928,7 +3020,6 @@ function transformNativeElement(node, propsResult, singleRoot, context, getEffec
             type: 2,
             element: context.reference(),
             prop,
-            root: singleRoot,
             tag
           },
           getEffectIndex
@@ -2941,7 +3032,7 @@ function transformNativeElement(node, propsResult, singleRoot, context, getEffec
     template += `</${tag}>`;
   }
   if (singleRoot) {
-    context.ir.rootTemplateIndex = context.ir.template.size;
+    context.ir.rootTemplateIndexes.add(context.ir.template.size);
   }
   if (context.parent && context.parent.node.type === 1 && !compilerDom.isValidHTMLNesting(context.parent.node.tag, tag)) {
     context.reference();
@@ -3074,7 +3165,7 @@ function dedupeProperties(results) {
     const name = prop.key.content;
     const existing = knownProps.get(name);
     if (existing && existing.handler === prop.handler) {
-      if (name === "style" || name === "class") {
+      if (name === "style" || name === "class" || prop.handler) {
         mergePropValues(existing, prop);
       }
     } else {
@@ -3252,6 +3343,9 @@ const transformVOn = (dir, node, context) => {
       keyOverride = ["click", "contextmenu"];
     }
   }
+  if (keyModifiers.length && compilerDom.isStaticExp(arg) && !compilerDom.isKeyboardEvent(`on${arg.content.toLowerCase()}`)) {
+    keyModifiers.length = 0;
+  }
   if (isComponent || isSlotOutlet) {
     const handler = exp || EMPTY_EXPRESSION;
     return {
@@ -3305,7 +3399,7 @@ const transformVShow = (dir, node, context) => {
   if (parentNode && parentNode.type === 1) {
     shouldDeferred = !!(isTransitionTag(parentNode.tag) && findProp(parentNode, "appear", false, true));
     if (shouldDeferred) {
-      context.parent.parent.block.hasDeferredVShow = true;
+      context.ir.hasDeferredVShow = true;
     }
   }
   context.registerOperation({
@@ -3578,7 +3672,7 @@ function getSiblingIf(context, reverse) {
   let i = siblings.indexOf(context.node);
   while (reverse ? --i >= 0 : ++i < siblings.length) {
     sibling = siblings[i];
-    if (!isCommentLike(sibling)) {
+    if (!compilerDom.isCommentOrWhitespace(sibling)) {
       break;
     }
   }
@@ -3588,9 +3682,6 @@ function getSiblingIf(context, reverse) {
     return sibling;
   }
 }
-function isCommentLike(node) {
-  return node.type === 3 || node.type === 2 && !node.content.trim().length;
-}
 
 const transformVIf = createStructuralDirectiveTransform(
   ["if", "else", "else-if"],
@@ -3814,7 +3905,8 @@ const transformSlotOutlet = (node, context) => {
       name: slotName,
       props: irProps,
       fallback,
-      noSlotted: !!(context.options.scopeId && !context.options.slotted)
+      noSlotted: !!(context.options.scopeId && !context.options.slotted),
+      once: context.inVOnce
     };
   };
 };