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

package/dist/compiler-sfc.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compiler-sfc v3.6.0-alpha.4
+* @vue/compiler-sfc v3.6.0-alpha.6
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -126,6 +126,9 @@ var hashSumExports = /*@__PURE__*/ requireHashSum();
 var hash = /*@__PURE__*/getDefaultExportFromCjs(hashSumExports);
 
 const CSS_VARS_HELPER = `useCssVars`;
+function getCssVarsHelper(vapor) {
+  return vapor ? `useVaporCssVars` : CSS_VARS_HELPER;
+}
 function genCssVarsFromList(vars, id, isProd, isSSR = false) {
   return `{
   ${vars.map(
@@ -234,7 +237,7 @@ const cssVarsPlugin = (opts) => {
   };
 };
 cssVarsPlugin.postcss = true;
-function genCssVarsCode(vars, bindings, id, isProd) {
+function genCssVarsCode(vars, bindings, id, isProd, vapor) {
   const varsExp = genCssVarsFromList(vars, id, isProd);
   const exp = CompilerDOM.createSimpleExpression(varsExp, false);
   const context = CompilerDOM.createTransformContext(CompilerDOM.createRoot([]), {
@@ -246,7 +249,7 @@ function genCssVarsCode(vars, bindings, id, isProd) {
   const transformedString = transformed.type === 4 ? transformed.content : transformed.children.map((c) => {
     return typeof c === "string" ? c : c.content;
   }).join("");
-  return `_${CSS_VARS_HELPER}(_ctx => (${transformedString}))`;
+  return `_${getCssVarsHelper(vapor)}(_ctx => (${transformedString}))`;
 }
 function genNormalScriptCssVarsCode(cssVars, bindings, id, isProd, defaultVar) {
   return `
@@ -21332,7 +21335,7 @@ const ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}
   }
   if (sfc.cssVars.length && // no need to do this when targeting SSR
   !ssr) {
-    ctx.helperImports.add(CSS_VARS_HELPER);
+    ctx.helperImports.add(getCssVarsHelper(vapor));
     ctx.helperImports.add("unref");
     ctx.s.prependLeft(
       startOffset,
@@ -21341,7 +21344,8 @@ ${genCssVarsCode(
         sfc.cssVars,
         ctx.bindingMetadata,
         scopeId,
-        !!options.isProd
+        !!options.isProd,
+        vapor
       )}
 `
     );
@@ -21752,7 +21756,7 @@ function mergeSourceMaps(scriptMap, templateMap, templateLineOffset) {
   return generator.toJSON();
 }
 
-const version = "3.6.0-alpha.4";
+const version = "3.6.0-alpha.6";
 const parseCache = parseCache$1;
 const errorMessages = {
   ...CompilerDOM.errorMessages,

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

@@ -1,5 +1,5 @@
 /**
-* @vue/compiler-sfc v3.6.0-alpha.4
+* @vue/compiler-sfc v3.6.0-alpha.6
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -18115,7 +18115,43 @@ function getMemoedVNodeCall(node) {
     return node;
   }
 }
+function filterNonCommentChildren(node) {
+  return node.children.filter((n) => n.type !== 3);
+}
+function hasSingleChild(node) {
+  return filterNonCommentChildren(node).length === 1;
+}
+function isSingleIfBlock(parent) {
+  let hasEncounteredIf = false;
+  for (const c of filterNonCommentChildren(parent)) {
+    if (c.type === 9 || c.type === 1 && findDir$1(c, "if")) {
+      if (hasEncounteredIf) return false;
+      hasEncounteredIf = true;
+    } else if (
+      // node before v-if
+      !hasEncounteredIf || // non else nodes
+      !(c.type === 1 && findDir$1(c, /^else(-if)?$/, true))
+    ) {
+      return false;
+    }
+  }
+  return true;
+}
 const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+(\S[\s\S]*)/;
+function isAllWhitespace(str) {
+  for (let i = 0; i < str.length; i++) {
+    if (!isWhitespace(str.charCodeAt(i))) {
+      return false;
+    }
+  }
+  return true;
+}
+function isWhitespaceText(node) {
+  return node.type === 2 && isAllWhitespace(node.content) || node.type === 12 && isWhitespaceText(node.content);
+}
+function isCommentOrWhitespace(node) {
+  return node.type === 3 || isWhitespaceText(node);
+}
 
 const defaultParserOptions = {
   parseMode: "base",
@@ -18652,14 +18688,6 @@ function condenseWhitespace(nodes) {
   }
   return removedWhitespace ? nodes.filter(Boolean) : nodes;
 }
-function isAllWhitespace(str) {
-  for (let i = 0; i < str.length; i++) {
-    if (!isWhitespace(str.charCodeAt(i))) {
-      return false;
-    }
-  }
-  return true;
-}
 function hasNewlineChar(str) {
   for (let i = 0; i < str.length; i++) {
     const c = str.charCodeAt(i);
@@ -23905,13 +23933,11 @@ function processIf$1(node, dir, context, processCodegen) {
     let i = siblings.indexOf(node);
     while (i-- >= -1) {
       const sibling = siblings[i];
-      if (sibling && sibling.type === 3) {
-        context.removeNode(sibling);
-        comments.unshift(sibling);
-        continue;
-      }
-      if (sibling && sibling.type === 2 && !sibling.content.trim().length) {
+      if (sibling && isCommentOrWhitespace(sibling)) {
         context.removeNode(sibling);
+        if (sibling.type === 3) {
+          comments.unshift(sibling);
+        }
         continue;
       }
       if (sibling && sibling.type === 9) {
@@ -24429,7 +24455,7 @@ function buildSlots(node, context, buildSlotFn = buildClientSlotFn) {
       let prev;
       while (j--) {
         prev = children[j];
-        if (prev.type !== 3 && isNonWhitespaceContent$1(prev)) {
+        if (!isCommentOrWhitespace(prev)) {
           break;
         }
       }
@@ -24504,7 +24530,7 @@ function buildSlots(node, context, buildSlotFn = buildClientSlotFn) {
     } else if (implicitDefaultChildren.length && // #3766
     // with whitespace: 'preserve', whitespaces between slots will end up in
     // implicitDefaultChildren. Ignore if all implicit children are whitespaces.
-    implicitDefaultChildren.some((node2) => isNonWhitespaceContent$1(node2))) {
+    !implicitDefaultChildren.every(isWhitespaceText)) {
       if (hasNamedDefaultSlot) {
         context.onError(
           createCompilerError(
@@ -24577,11 +24603,6 @@ function hasForwardedSlots(children) {
   }
   return false;
 }
-function isNonWhitespaceContent$1(node) {
-  if (node.type !== 2 && node.type !== 12)
-    return true;
-  return node.type === 2 ? !!node.content.trim() : isNonWhitespaceContent$1(node.content);
-}
 
 const directiveImportMap = /* @__PURE__ */ new WeakMap();
 const transformElement$1 = (node, context) => {
@@ -26016,7 +26037,9 @@ const isNonKeyModifier = /* @__PURE__ */ makeMap(
   `stop,prevent,self,ctrl,shift,alt,meta,exact,middle`
 );
 const maybeKeyModifier = /* @__PURE__ */ makeMap("left,right");
-const isKeyboardEvent = /* @__PURE__ */ makeMap(`onkeyup,onkeydown,onkeypress`);
+const isKeyboardEvent = /* @__PURE__ */ makeMap(
+  `onkeyup,onkeydown,onkeypress`
+);
 const resolveModifiers = (key, modifiers, context, loc) => {
   const keyModifiers = [];
   const nonKeyModifiers = [];
@@ -26151,7 +26174,7 @@ function postTransformTransition(node, onError, hasMultipleChildren = defaultHas
 }
 function defaultHasMultipleChildren(node) {
   const children = node.children = node.children.filter(
-    (c) => c.type !== 3 && !(c.type === 2 && !c.content.trim())
+    (c) => !isCommentOrWhitespace(c)
   );
   const child = children[0];
   return children.length !== 1 || child.type === 11 || child.type === 9 && child.branches.some(defaultHasMultipleChildren);
@@ -26718,6 +26741,7 @@ var CompilerDOM = /*#__PURE__*/Object.freeze({
   defaultOnWarn: defaultOnWarn,
   errorMessages: errorMessages$1,
   extractIdentifiers: extractIdentifiers$1,
+  filterNonCommentChildren: filterNonCommentChildren,
   findDir: findDir$1,
   findProp: findProp$1,
   forAliasRE: forAliasRE,
@@ -26731,8 +26755,11 @@ var CompilerDOM = /*#__PURE__*/Object.freeze({
   getVNodeHelper: getVNodeHelper,
   hasDynamicKeyVBind: hasDynamicKeyVBind,
   hasScopeRef: hasScopeRef,
+  hasSingleChild: hasSingleChild,
   helperNameMap: helperNameMap,
   injectProp: injectProp,
+  isAllWhitespace: isAllWhitespace,
+  isCommentOrWhitespace: isCommentOrWhitespace,
   isConstantNode: isConstantNode,
   isCoreComponent: isCoreComponent,
   isFnExpression: isFnExpression,
@@ -26741,12 +26768,14 @@ var CompilerDOM = /*#__PURE__*/Object.freeze({
   isFunctionType: isFunctionType,
   isInDestructureAssignment: isInDestructureAssignment,
   isInNewExpression: isInNewExpression,
+  isKeyboardEvent: isKeyboardEvent,
   isLiteralWhitelisted: isLiteralWhitelisted,
   isMemberExpression: isMemberExpression$1,
   isMemberExpressionBrowser: isMemberExpressionBrowser,
   isMemberExpressionNode: isMemberExpressionNode,
   isReferencedIdentifier: isReferencedIdentifier,
   isSimpleIdentifier: isSimpleIdentifier,
+  isSingleIfBlock: isSingleIfBlock,
   isSlotOutlet: isSlotOutlet,
   isStaticArgOf: isStaticArgOf,
   isStaticExp: isStaticExp,
@@ -26758,6 +26787,7 @@ var CompilerDOM = /*#__PURE__*/Object.freeze({
   isVPre: isVPre,
   isVSlot: isVSlot,
   isValidHTMLNesting: isValidHTMLNesting,
+  isWhitespaceText: isWhitespaceText,
   locStub: locStub,
   noopDirectiveTransform: noopDirectiveTransform,
   parse: parse$3,
@@ -26872,6 +26902,9 @@ var hashSumExports = /*@__PURE__*/ requireHashSum();
 var hash = /*@__PURE__*/getDefaultExportFromCjs(hashSumExports);
 
 const CSS_VARS_HELPER = `useCssVars`;
+function getCssVarsHelper(vapor) {
+  return vapor ? `useVaporCssVars` : CSS_VARS_HELPER;
+}
 function genCssVarsFromList(vars, id, isProd, isSSR = false) {
   return `{
   ${vars.map(
@@ -26980,7 +27013,7 @@ const cssVarsPlugin = (opts) => {
   };
 };
 cssVarsPlugin.postcss = true;
-function genCssVarsCode(vars, bindings, id, isProd) {
+function genCssVarsCode(vars, bindings, id, isProd, vapor) {
   const varsExp = genCssVarsFromList(vars, id, isProd);
   const exp = createSimpleExpression(varsExp, false);
   const context = createTransformContext(createRoot([]), {
@@ -26992,7 +27025,7 @@ function genCssVarsCode(vars, bindings, id, isProd) {
   const transformedString = transformed.type === 4 ? transformed.content : transformed.children.map((c) => {
     return typeof c === "string" ? c : c.content;
   }).join("");
-  return `_${CSS_VARS_HELPER}(_ctx => (${transformedString}))`;
+  return `_${getCssVarsHelper(vapor)}(_ctx => (${transformedString}))`;
 }
 function genNormalScriptCssVarsCode(cssVars, bindings, id, isProd, defaultVar) {
   return `
@@ -32028,8 +32061,7 @@ const newBlock = (node) => ({
   effect: [],
   operation: [],
   returns: [],
-  tempId: 0,
-  hasDeferredVShow: false
+  tempId: 0
 });
 function wrapTemplate(node, dirs) {
   if (node.tagType === 3) {
@@ -32286,10 +32318,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);
@@ -32782,8 +32816,10 @@ function analyzeExpressions(expressions) {
       exp.ast === null && registerVariable(exp.content, exp, true);
       continue;
     }
+    const seenParents = /* @__PURE__ */ new Set();
     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,
@@ -32885,7 +32921,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;
@@ -32894,7 +32930,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;
       }
@@ -33010,12 +33048,14 @@ function extractMemberExpression(exp, onIdentifier) {
       const object = extractMemberExpression(exp.object, onIdentifier);
       const prop = exp.computed ? `[${extractMemberExpression(exp.property, onIdentifier)}]` : `.${extractMemberExpression(exp.property, 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) {
@@ -33024,7 +33064,7 @@ function genSetEvent(oper, context) {
   const name = genName();
   const handler = [
     `${context.helper("createInvoker")}(`,
-    ...genEventHandler(context, value, modifiers),
+    ...genEventHandler(context, [value], modifiers),
     `)`
   ];
   const eventOptions = genEventOptions();
@@ -33081,37 +33121,47 @@ function genSetDynamicEvents(oper, context) {
     )
   ];
 }
-function genEventHandler(context, value, modifiers = { nonKeys: [], keys: [] }, extraWrap = false) {
-  let handlerExp = [`() => {}`];
-  if (value && value.content.trim()) {
-    if (isMemberExpression$1(value, context.options)) {
-      handlerExp = genExpression(value, context);
-      if (!isConstantBinding(value, context) && !extraWrap) {
-        const isTSNode = value.ast && TS_NODE_TYPES.includes(value.ast.type);
-        handlerExp = [
-          `e => `,
-          isTSNode ? "(" : "",
-          ...handlerExp,
-          isTSNode ? ")" : "",
-          `(e)`
-        ];
-      }
-    } else if (isFnExpression(value, context.options)) {
-      handlerExp = genExpression(value, context);
-    } else {
-      const referencesEvent = value.content.includes("$event");
-      const hasMultipleStatements = value.content.includes(`;`);
-      const expr = referencesEvent ? context.withId(() => genExpression(value, context), {
-        $event: null
-      }) : genExpression(value, context);
-      handlerExp = [
-        referencesEvent ? "$event => " : "() => ",
-        hasMultipleStatements ? "{" : "(",
-        ...expr,
-        hasMultipleStatements ? "}" : ")"
-      ];
+function genEventHandler(context, values, modifiers = { nonKeys: [], keys: [] }, extraWrap = false) {
+  let handlerExp = [];
+  if (values) {
+    values.forEach((value, index) => {
+      let exp = [];
+      if (value && value.content.trim()) {
+        if (isMemberExpression$1(value, context.options)) {
+          exp = genExpression(value, context);
+          if (!isConstantBinding(value, context) && !extraWrap) {
+            const isTSNode = value.ast && TS_NODE_TYPES.includes(value.ast.type);
+            exp = [
+              `e => `,
+              isTSNode ? "(" : "",
+              ...exp,
+              isTSNode ? ")" : "",
+              `(e)`
+            ];
+          }
+        } else if (isFnExpression(value, context.options)) {
+          exp = genExpression(value, context);
+        } else {
+          const referencesEvent = value.content.includes("$event");
+          const hasMultipleStatements = value.content.includes(`;`);
+          const expr = referencesEvent ? context.withId(() => genExpression(value, context), {
+            $event: null
+          }) : genExpression(value, context);
+          exp = [
+            referencesEvent ? "$event => " : "() => ",
+            hasMultipleStatements ? "{" : "(",
+            ...expr,
+            hasMultipleStatements ? "}" : ")"
+          ];
+        }
+        handlerExp = handlerExp.concat([index !== 0 ? ", " : "", ...exp]);
+      }
+    });
+    if (values.length > 1) {
+      handlerExp = ["[", ...handlerExp, "]"];
     }
   }
+  if (handlerExp.length === 0) handlerExp = ["() => {}"];
   const { keys, nonKeys } = modifiers;
   if (nonKeys.length)
     handlerExp = genWithModifiers(context, handlerExp, nonKeys);
@@ -33152,35 +33202,19 @@ function genFor(oper, context) {
     component,
     onlyChild
   } = oper;
-  let rawValue = null;
+  const rawValue = value && value.content;
   const rawKey = key && key.content;
   const rawIndex = index && index.content;
   const sourceExpr = ["() => (", ...genExpression(source, context), ")"];
-  const idToPathMap = parseValueDestructure();
+  const idToPathMap = parseValueDestructure(value, context);
   const [depth, exitScope] = context.enterScope();
-  const idMap = {};
   const itemVar = `_for_item${depth}`;
+  const idMap = buildDestructureIdMap(
+    idToPathMap,
+    `${itemVar}.value`,
+    context.options.expressionPlugins
+  );
   idMap[itemVar] = null;
-  idToPathMap.forEach((pathInfo, id2) => {
-    let path = `${itemVar}.value${pathInfo ? pathInfo.path : ""}`;
-    if (pathInfo) {
-      if (pathInfo.helper) {
-        idMap[pathInfo.helper] = null;
-        path = `${pathInfo.helper}(${path}, ${pathInfo.helperArgs})`;
-      }
-      if (pathInfo.dynamic) {
-        const node = idMap[id2] = createSimpleExpression(path);
-        const plugins = context.options.expressionPlugins;
-        node.ast = libExports.parseExpression(`(${path})`, {
-          plugins: plugins ? [...plugins, "typescript"] : ["typescript"]
-        });
-      } else {
-        idMap[id2] = path;
-      }
-    } else {
-      idMap[id2] = path;
-    }
-  });
   const args = [itemVar];
   if (rawKey) {
     const keyVar = `_for_key${depth}`;
@@ -33278,77 +33312,6 @@ function genFor(oper, context) {
       // todo: hydrationNode
     )
   ];
-  function parseValueDestructure() {
-    const map = /* @__PURE__ */ new Map();
-    if (value) {
-      rawValue = value && value.content;
-      if (value.ast) {
-        walkIdentifiers(
-          value.ast,
-          (id2, _, parentStack, ___, isLocal) => {
-            if (isLocal) {
-              let path = "";
-              let isDynamic = false;
-              let helper2;
-              let helperArgs;
-              for (let i = 0; i < parentStack.length; i++) {
-                const parent = parentStack[i];
-                const child = parentStack[i + 1] || id2;
-                if (parent.type === "ObjectProperty" && parent.value === child) {
-                  if (parent.key.type === "StringLiteral") {
-                    path += `[${JSON.stringify(parent.key.value)}]`;
-                  } else if (parent.computed) {
-                    isDynamic = true;
-                    path += `[${value.content.slice(
-                      parent.key.start - 1,
-                      parent.key.end - 1
-                    )}]`;
-                  } else {
-                    path += `.${parent.key.name}`;
-                  }
-                } else if (parent.type === "ArrayPattern") {
-                  const index2 = parent.elements.indexOf(child);
-                  if (child.type === "RestElement") {
-                    path += `.slice(${index2})`;
-                  } else {
-                    path += `[${index2}]`;
-                  }
-                } else if (parent.type === "ObjectPattern" && child.type === "RestElement") {
-                  helper2 = context.helper("getRestElement");
-                  helperArgs = "[" + parent.properties.filter((p) => p.type === "ObjectProperty").map((p) => {
-                    if (p.key.type === "StringLiteral") {
-                      return JSON.stringify(p.key.value);
-                    } else if (p.computed) {
-                      isDynamic = true;
-                      return value.content.slice(
-                        p.key.start - 1,
-                        p.key.end - 1
-                      );
-                    } else {
-                      return JSON.stringify(p.key.name);
-                    }
-                  }).join(", ") + "]";
-                }
-                if (child.type === "AssignmentPattern" && (parent.type === "ObjectProperty" || parent.type === "ArrayPattern")) {
-                  isDynamic = true;
-                  helper2 = context.helper("getDefaultValue");
-                  helperArgs = value.content.slice(
-                    child.right.start - 1,
-                    child.right.end - 1
-                  );
-                }
-              }
-              map.set(id2.name, { path, dynamic: isDynamic, helper: helper2, helperArgs });
-            }
-          },
-          true
-        );
-      } else {
-        map.set(rawValue, null);
-      }
-    }
-    return map;
-  }
   function genCallback(expr) {
     if (!expr) return false;
     const res = context.withId(
@@ -33375,6 +33338,98 @@ function genFor(oper, context) {
     return idMap2;
   }
 }
+function parseValueDestructure(value, context) {
+  const map = /* @__PURE__ */ new Map();
+  if (value) {
+    const rawValue = value.content;
+    if (value.ast) {
+      walkIdentifiers(
+        value.ast,
+        (id, _, parentStack, ___, isLocal) => {
+          if (isLocal) {
+            let path = "";
+            let isDynamic = false;
+            let helper;
+            let helperArgs;
+            for (let i = 0; i < parentStack.length; i++) {
+              const parent = parentStack[i];
+              const child = parentStack[i + 1] || id;
+              if (parent.type === "ObjectProperty" && parent.value === child) {
+                if (parent.key.type === "StringLiteral") {
+                  path += `[${JSON.stringify(parent.key.value)}]`;
+                } else if (parent.computed) {
+                  isDynamic = true;
+                  path += `[${rawValue.slice(
+                    parent.key.start - 1,
+                    parent.key.end - 1
+                  )}]`;
+                } else {
+                  path += `.${parent.key.name}`;
+                }
+              } else if (parent.type === "ArrayPattern") {
+                const index = parent.elements.indexOf(child);
+                if (child.type === "RestElement") {
+                  path += `.slice(${index})`;
+                } else {
+                  path += `[${index}]`;
+                }
+              } else if (parent.type === "ObjectPattern" && child.type === "RestElement") {
+                helper = context.helper("getRestElement");
+                helperArgs = "[" + parent.properties.filter((p) => p.type === "ObjectProperty").map((p) => {
+                  if (p.key.type === "StringLiteral") {
+                    return JSON.stringify(p.key.value);
+                  } else if (p.computed) {
+                    isDynamic = true;
+                    return rawValue.slice(p.key.start - 1, p.key.end - 1);
+                  } else {
+                    return JSON.stringify(p.key.name);
+                  }
+                }).join(", ") + "]";
+              }
+              if (child.type === "AssignmentPattern" && (parent.type === "ObjectProperty" || parent.type === "ArrayPattern")) {
+                isDynamic = true;
+                helper = context.helper("getDefaultValue");
+                helperArgs = rawValue.slice(
+                  child.right.start - 1,
+                  child.right.end - 1
+                );
+              }
+            }
+            map.set(id.name, { path, dynamic: isDynamic, helper, helperArgs });
+          }
+        },
+        true
+      );
+    } else if (rawValue) {
+      map.set(rawValue, null);
+    }
+  }
+  return map;
+}
+function buildDestructureIdMap(idToPathMap, baseAccessor, plugins) {
+  const idMap = {};
+  idToPathMap.forEach((pathInfo, id) => {
+    let path = baseAccessor;
+    if (pathInfo) {
+      path = `${baseAccessor}${pathInfo.path}`;
+      if (pathInfo.helper) {
+        idMap[pathInfo.helper] = null;
+        path = pathInfo.helperArgs ? `${pathInfo.helper}(${path}, ${pathInfo.helperArgs})` : `${pathInfo.helper}(${path})`;
+      }
+      if (pathInfo.dynamic) {
+        const node = idMap[id] = createSimpleExpression(path);
+        node.ast = libExports.parseExpression(`(${path})`, {
+          plugins: plugins ? [...plugins, "typescript"] : ["typescript"]
+        });
+      } else {
+        idMap[id] = path;
+      }
+    } else {
+      idMap[id] = path;
+    }
+  });
+  return idMap;
+}
 function matchPatterns(render, keyProp, idMap) {
   const selectorPatterns = [];
   const keyOnlyBindingPatterns = [];
@@ -33586,7 +33641,6 @@ function genDynamicProps$1(oper, context) {
       helper("setDynamicProps"),
       `n${oper.element}`,
       genMulti(DELIMITERS_ARRAY, ...values),
-      oper.root && "true",
       isSVG && "true"
     )
   ];
@@ -33616,6 +33670,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) {
@@ -33857,7 +33912,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];
     },
     []
@@ -33991,7 +34046,7 @@ function genProp(prop, context, isStatic) {
     ": ",
     ...prop.handler ? genEventHandler(
       context,
-      prop.values[0],
+      prop.values,
       prop.handlerModifiers,
       true
     ) : isStatic ? ["() => (", ...values, ")"] : values,
@@ -34119,35 +34174,29 @@ function genConditionalSlot(slot, context) {
   ];
 }
 function genSlotBlockWithProps(oper, context) {
-  let isDestructureAssignment = false;
-  let rawProps;
   let propsName;
   let exitScope;
   let depth;
   const { props, key, node } = oper;
-  const idsOfProps = /* @__PURE__ */ new Set();
+  const idToPathMap = props ? parseValueDestructure(props, context) : /* @__PURE__ */ new Map();
   if (props) {
-    rawProps = props.content;
-    if (isDestructureAssignment = !!props.ast) {
+    if (props.ast) {
       [depth, exitScope] = context.enterScope();
       propsName = `_slotProps${depth}`;
-      walkIdentifiers(
-        props.ast,
-        (id, _, __, ___, isLocal) => {
-          if (isLocal) idsOfProps.add(id.name);
-        },
-        true
-      );
     } else {
-      idsOfProps.add(propsName = rawProps);
+      propsName = props.content;
     }
   }
-  const idMap = {};
-  idsOfProps.forEach(
-    (id) => idMap[id] = isDestructureAssignment ? `${propsName}[${JSON.stringify(id)}]` : null
-  );
+  const idMap = idToPathMap.size ? buildDestructureIdMap(
+    idToPathMap,
+    propsName || "",
+    context.options.expressionPlugins
+  ) : {};
+  if (propsName) {
+    idMap[propsName] = null;
+  }
   let blockFn = context.withId(
-    () => genBlock(oper, context, [propsName]),
+    () => genBlock(oper, context, propsName ? [propsName] : []),
     idMap
   );
   exitScope && exitScope();
@@ -34168,14 +34217,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;
@@ -34190,8 +34294,10 @@ function genSlotOutlet(oper, context) {
       nameExpr,
       genRawProps(oper.props, context) || "null",
       fallbackArg,
-      noSlotted && "true"
+      noSlotted && "true",
       // noSlotted
+      once && "true"
+      // v-once
     )
   );
   return frag;
@@ -34323,7 +34429,7 @@ function genInsertionState(operation, context) {
   ];
 }
 
-function genTemplates(templates, rootIndex, context) {
+function genTemplates(templates, rootIndexes, context) {
   const result = [];
   let i = 0;
   templates.forEach((ns, template) => {
@@ -34334,7 +34440,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++;
@@ -34441,9 +34547,6 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
   const [frag, push] = buildCodeFragment();
   const { dynamic, effect, operation, returns, key } = block;
   const resetBlock = context.enterBlock(block);
-  if (block.hasDeferredVShow) {
-    push(NEWLINE, `const deferredApplyVShows = []`);
-  }
   if (root) {
     for (let name of context.ir.component) {
       const id = toValidAssetId(name, "component");
@@ -34472,7 +34575,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) {
@@ -34628,13 +34731,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;
@@ -34781,6 +34887,11 @@ const isReservedProp = /* @__PURE__ */ makeMap(
 const transformElement = (node, context) => {
   let effectIndex = context.block.effect.length;
   const getEffectIndex = () => effectIndex++;
+  let parentSlots;
+  if (node.type === 1 && (node.tagType === 1 || context.options.isCustomElement(node.tag))) {
+    parentSlots = context.slots;
+    context.slots = [];
+  }
   return function postTransformElement() {
     ({ node } = context);
     if (!(node.type === 1 && (node.tagType === 0 || node.tagType === 1)))
@@ -34795,11 +34906,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,
@@ -34818,8 +34925,27 @@ const transformElement = (node, context) => {
         getEffectIndex
       );
     }
+    if (parentSlots) {
+      context.slots = parentSlots;
+    }
   };
 };
+function isSingleRoot(context) {
+  if (context.inVFor) {
+    return false;
+  }
+  let { parent } = context;
+  if (parent && !(hasSingleChild(parent.node) || isSingleIfBlock(parent.node))) {
+    return false;
+  }
+  while (parent && parent.parent && parent.node.type === 1 && parent.node.tagType === 3) {
+    parent = parent.parent;
+    if (!(hasSingleChild(parent.node) || 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;
@@ -34857,7 +34983,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,
@@ -34908,7 +35034,6 @@ function transformNativeElement(node, propsResult, singleRoot, context, getEffec
         type: 3,
         element: context.reference(),
         props: dynamicArgs,
-        root: singleRoot,
         tag
       },
       getEffectIndex
@@ -34932,7 +35057,6 @@ function transformNativeElement(node, propsResult, singleRoot, context, getEffec
             type: 2,
             element: context.reference(),
             prop,
-            root: singleRoot,
             tag
           },
           getEffectIndex
@@ -34945,7 +35069,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 && !isValidHTMLNesting(context.parent.node.tag, tag)) {
     context.reference();
@@ -35078,7 +35202,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 {
@@ -35243,6 +35367,9 @@ const transformVOn = (dir, node, context) => {
       keyOverride = ["click", "contextmenu"];
     }
   }
+  if (keyModifiers.length && isStaticExp(arg) && !isKeyboardEvent(`on${arg.content.toLowerCase()}`)) {
+    keyModifiers.length = 0;
+  }
   if (isComponent || isSlotOutlet) {
     const handler = exp || EMPTY_EXPRESSION;
     return {
@@ -35296,7 +35423,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({
@@ -35569,7 +35696,7 @@ function getSiblingIf(context, reverse) {
   let i = siblings.indexOf(context.node);
   while (reverse ? --i >= 0 : ++i < siblings.length) {
     sibling = siblings[i];
-    if (!isCommentLike(sibling)) {
+    if (!isCommentOrWhitespace(sibling)) {
       break;
     }
   }
@@ -35579,9 +35706,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"],
@@ -35805,7 +35929,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
     };
   };
 };
@@ -37317,11 +37442,11 @@ const ssrTransformModel = (dir, node, context) => {
   }
   if (node.tagType === 0) {
     const res = { props: [] };
-    const defaultProps = [
-      // default value binding for text type inputs
-      createObjectProperty(`value`, model)
-    ];
     if (node.tag === "input") {
+      const defaultProps = [
+        // default value binding for text type inputs
+        createObjectProperty(`value`, model)
+      ];
       const type = findProp$1(node, "type");
       if (type) {
         const value = findValueBinding(node);
@@ -37442,14 +37567,12 @@ const ssrTransformShow = (dir, node, context) => {
   };
 };
 
-const filterChild = (node) => node.children.filter((n) => n.type !== 3);
-const hasSingleChild = (node) => filterChild(node).length === 1;
 const ssrInjectFallthroughAttrs = (node, context) => {
   if (node.type === 0) {
     context.identifiers._attrs = 1;
   }
   if (node.type === 1 && node.tagType === 1 && (node.tag === "transition" || node.tag === "Transition" || node.tag === "KeepAlive" || node.tag === "keep-alive")) {
-    const rootChildren = filterChild(context.root);
+    const rootChildren = filterNonCommentChildren(context.root);
     if (rootChildren.length === 1 && rootChildren[0] === node) {
       if (hasSingleChild(node)) {
         injectFallthroughAttrs(node.children[0]);
@@ -37462,20 +37585,9 @@ const ssrInjectFallthroughAttrs = (node, context) => {
     return;
   }
   if (node.type === 10 && hasSingleChild(node)) {
-    let hasEncounteredIf = false;
-    for (const c of filterChild(parent)) {
-      if (c.type === 9 || c.type === 1 && findDir$1(c, "if")) {
-        if (hasEncounteredIf) return;
-        hasEncounteredIf = true;
-      } else if (
-        // node before v-if
-        !hasEncounteredIf || // non else nodes
-        !(c.type === 1 && findDir$1(c, /else/, true))
-      ) {
-        return;
-      }
+    if (isSingleIfBlock(parent)) {
+      injectFallthroughAttrs(node.children[0]);
     }
-    injectFallthroughAttrs(node.children[0]);
   } else if (hasSingleChild(parent)) {
     injectFallthroughAttrs(node);
   }
@@ -54517,7 +54629,7 @@ const ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}
   }
   if (sfc.cssVars.length && // no need to do this when targeting SSR
   !ssr) {
-    ctx.helperImports.add(CSS_VARS_HELPER);
+    ctx.helperImports.add(getCssVarsHelper(vapor));
     ctx.helperImports.add("unref");
     ctx.s.prependLeft(
       startOffset,
@@ -54526,7 +54638,8 @@ ${genCssVarsCode(
         sfc.cssVars,
         ctx.bindingMetadata,
         scopeId,
-        !!options.isProd
+        !!options.isProd,
+        vapor
       )}
 `
     );
@@ -54948,7 +55061,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-const version = "3.6.0-alpha.4";
+const version = "3.6.0-alpha.6";
 const parseCache = parseCache$1;
 const errorMessages = __spreadValues(__spreadValues({}, errorMessages$1), DOMErrorMessages);
 const walk = walk$2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.6.0-alpha.4",
+  "version": "3.6.0-alpha.6",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
@@ -47,11 +47,11 @@
     "magic-string": "^0.30.21",
     "postcss": "^8.5.6",
     "source-map-js": "^1.2.1",
-    "@vue/compiler-core": "3.6.0-alpha.4",
-    "@vue/compiler-dom": "3.6.0-alpha.4",
-    "@vue/compiler-vapor": "3.6.0-alpha.4",
-    "@vue/compiler-ssr": "3.6.0-alpha.4",
-    "@vue/shared": "3.6.0-alpha.4"
+    "@vue/compiler-core": "3.6.0-alpha.6",
+    "@vue/compiler-dom": "3.6.0-alpha.6",
+    "@vue/compiler-vapor": "3.6.0-alpha.6",
+    "@vue/compiler-ssr": "3.6.0-alpha.6",
+    "@vue/shared": "3.6.0-alpha.6"
   },
   "devDependencies": {
     "@babel/types": "^7.28.5",