@vue/compiler-vapor 3.6.0-alpha.7 → 3.6.0-beta.2

package/dist/compiler-vapor.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compiler-vapor v3.6.0-alpha.7
+* @vue/compiler-vapor v3.6.0-beta.2
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -149,6 +149,8 @@ class TransformContext {
     this.node = node;
     this.selfName = null;
     this.parent = null;
+    // cached parent that skips template tags
+    this.effectiveParent = null;
     this.index = 0;
     this.block = this.ir.block;
     this.template = "";
@@ -161,6 +163,12 @@ class TransformContext {
     this.component = this.ir.component;
     this.directive = this.ir.directive;
     this.slots = [];
+    // whether this node is the last effective child of its parent
+    // (all siblings after it are components, which don't appear in HTML template)
+    this.isLastEffectiveChild = true;
+    // whether this node is on the rightmost path of the tree
+    // (all ancestors are also last effective children)
+    this.isOnRightmostPath = true;
     this.globalId = 0;
     this.nextIdMap = null;
     this.increaseId = () => {
@@ -241,15 +249,31 @@ class TransformContext {
     this.block.operation.push(...node);
   }
   create(node, index) {
+    let effectiveParent = this;
+    while (effectiveParent && effectiveParent.node.type === 1 && effectiveParent.node.tagType === 3) {
+      effectiveParent = effectiveParent.parent;
+    }
+    const isLastEffectiveChild = this.isEffectivelyLastChild(index);
+    const isOnRightmostPath = this.isOnRightmostPath && isLastEffectiveChild;
     return Object.assign(Object.create(TransformContext.prototype), this, {
       node,
       parent: this,
       index,
       template: "",
       childrenTemplate: [],
-      dynamic: newDynamic()
+      dynamic: newDynamic(),
+      effectiveParent,
+      isLastEffectiveChild,
+      isOnRightmostPath
     });
   }
+  isEffectivelyLastChild(index) {
+    const children = this.node.children;
+    if (!children) return true;
+    return children.every(
+      (c, i) => i <= index || c.type === 1 && c.tagType === 1
+    );
+  }
 }
 const defaultOptions = {
   filename: "",
@@ -370,10 +394,10 @@ const IMPORT_EXPR_RE = new RegExp(
   `${IMPORT_EXP_START}(.*?)${IMPORT_EXP_END}`,
   "g"
 );
-const NEWLINE = Symbol(`newline` );
-const LF = Symbol(`line feed` );
-const INDENT_START = Symbol(`indent start` );
-const INDENT_END = Symbol(`indent end` );
+const NEWLINE = /* @__PURE__ */ Symbol(`newline` );
+const LF = /* @__PURE__ */ Symbol(`line feed` );
+const INDENT_START = /* @__PURE__ */ Symbol(`indent start` );
+const INDENT_END = /* @__PURE__ */ Symbol(`indent end` );
 function buildCodeFragment(...frag) {
   const push = frag.push.bind(frag);
   const unshift = frag.unshift.bind(frag);
@@ -789,6 +813,10 @@ function analyzeExpressions(expressions) {
             end: id.end
           });
         });
+        const parentOfMemberExp = parentStack[parentStack.length - 2];
+        if (parentOfMemberExp && isCallExpression(parentOfMemberExp)) {
+          return;
+        }
         registerVariable(
           memberExp,
           exp,
@@ -1005,6 +1033,8 @@ function extractMemberExpression(exp, onIdentifier) {
       return `${extractMemberExpression(exp.left, onIdentifier)} ${exp.operator} ${extractMemberExpression(exp.right, onIdentifier)}`;
     case "CallExpression":
       return `${extractMemberExpression(exp.callee, onIdentifier)}(${exp.arguments.map((arg) => extractMemberExpression(arg, onIdentifier)).join(", ")})`;
+    case "OptionalCallExpression":
+      return `${extractMemberExpression(exp.callee, onIdentifier)}?.(${exp.arguments.map((arg) => extractMemberExpression(arg, onIdentifier)).join(", ")})`;
     case "MemberExpression":
     // foo[bar.baz]
     case "OptionalMemberExpression":
@@ -1017,6 +1047,9 @@ function extractMemberExpression(exp, onIdentifier) {
       return "";
   }
 }
+const isCallExpression = (node) => {
+  return node.type === "CallExpression" || node.type === "OptionalCallExpression";
+};
 const isMemberExpression = (node) => {
   return node.type === "MemberExpression" || node.type === "OptionalMemberExpression" || node.type === "TSNonNullExpression";
 };
@@ -1084,7 +1117,7 @@ function genSetDynamicEvents(oper, context) {
     )
   ];
 }
-function genEventHandler(context, values, modifiers = { nonKeys: [], keys: [] }, extraWrap = false) {
+function genEventHandler(context, values, modifiers = { nonKeys: [], keys: [] }, asComponentProp = false, extraWrap = false) {
   let handlerExp = [];
   if (values) {
     values.forEach((value, index) => {
@@ -1092,7 +1125,7 @@ function genEventHandler(context, values, modifiers = { nonKeys: [], keys: [] },
       if (value && value.content.trim()) {
         if (compilerDom.isMemberExpression(value, context.options)) {
           exp = genExpression(value, context);
-          if (!isConstantBinding(value, context) && !extraWrap) {
+          if (!isConstantBinding(value, context) && !asComponentProp) {
             const isTSNode = value.ast && compilerDom.TS_NODE_TYPES.includes(value.ast.type);
             exp = [
               `e => `,
@@ -1622,7 +1655,7 @@ function genPropKey({ key: node, modifier, runtimeCamelize, handler, handlerModi
   const { helper } = context;
   const handlerModifierPostfix = handlerModifiers && handlerModifiers.options ? handlerModifiers.options.map(shared.capitalize).join("") : "";
   if (node.isStatic) {
-    const keyName = (handler ? shared.toHandlerKey(node.content) : node.content) + handlerModifierPostfix;
+    const keyName = (handler ? shared.toHandlerKey(shared.camelize(node.content)) : node.content) + handlerModifierPostfix;
     return [
       [
         compilerDom.isSimpleIdentifier(keyName) ? keyName : JSON.stringify(keyName),
@@ -1875,7 +1908,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, false);
       return [...acc, `const ${name} = `, ...handler, NEWLINE];
     },
     []
@@ -1969,7 +2002,89 @@ function genRawProps(props, context) {
   }
 }
 function genStaticProps(props, context, dynamicProps) {
-  const args = props.map((prop) => genProp(prop, context, true));
+  const args = [];
+  const handlerGroups = /* @__PURE__ */ new Map();
+  const ensureHandlerGroup = (keyName, keyFrag) => {
+    let group = handlerGroups.get(keyName);
+    if (!group) {
+      const index = args.length;
+      args.push([]);
+      group = { keyFrag, handlers: [], index };
+      handlerGroups.set(keyName, group);
+    }
+    return group;
+  };
+  const addHandler = (keyName, keyFrag, handlerExp) => {
+    ensureHandlerGroup(keyName, keyFrag).handlers.push(handlerExp);
+  };
+  const getStaticPropKeyName = (prop) => {
+    if (!prop.key.isStatic) return;
+    const handlerModifierPostfix = prop.handlerModifiers && prop.handlerModifiers.options ? prop.handlerModifiers.options.map((m) => m.charAt(0).toUpperCase() + m.slice(1)).join("") : "";
+    const keyName = (prop.handler ? shared.toHandlerKey(shared.camelize(prop.key.content)) : prop.key.content) + handlerModifierPostfix;
+    return keyName;
+  };
+  for (const prop of props) {
+    if (prop.handler) {
+      const keyName = getStaticPropKeyName(prop);
+      if (!keyName) {
+        args.push(genProp(prop, context, true));
+        continue;
+      }
+      const keyFrag = genPropKey(prop, context);
+      const hasModifiers = !!prop.handlerModifiers && (prop.handlerModifiers.keys.length > 0 || prop.handlerModifiers.nonKeys.length > 0);
+      if (hasModifiers || prop.values.length <= 1) {
+        const handlerExp = genEventHandler(
+          context,
+          prop.values,
+          prop.handlerModifiers,
+          true,
+          false
+        );
+        addHandler(keyName, keyFrag, handlerExp);
+      } else {
+        for (const value of prop.values) {
+          const handlerExp = genEventHandler(
+            context,
+            [value],
+            prop.handlerModifiers,
+            true,
+            false
+          );
+          addHandler(keyName, keyFrag, handlerExp);
+        }
+      }
+      continue;
+    }
+    args.push(genProp(prop, context, true));
+    if (prop.model) {
+      if (prop.key.isStatic) {
+        const keyName = `onUpdate:${shared.camelize(prop.key.content)}`;
+        const keyFrag = [JSON.stringify(keyName)];
+        addHandler(keyName, keyFrag, genModelHandler(prop.values[0], context));
+      } else {
+        const keyFrag = [
+          '["onUpdate:" + ',
+          ...genExpression(prop.key, context),
+          "]"
+        ];
+        args.push([
+          ...keyFrag,
+          ": () => ",
+          ...genModelHandler(prop.values[0], context)
+        ]);
+      }
+      const { key, modelModifiers } = prop;
+      if (modelModifiers && modelModifiers.length) {
+        const modifiersKey = key.isStatic ? [shared.getModifierPropName(key.content)] : ["[", ...genExpression(key, context), ' + "Modifiers"]'];
+        const modifiersVal = genDirectiveModifiers(modelModifiers);
+        args.push([...modifiersKey, `: () => ({ ${modifiersVal} })`]);
+      }
+    }
+  }
+  for (const group of handlerGroups.values()) {
+    const handlerValue = group.handlers.length > 1 ? genMulti(DELIMITERS_ARRAY_NEWLINE, ...group.handlers) : group.handlers[0];
+    args[group.index] = [...group.keyFrag, ": () => ", ...handlerValue];
+  }
   if (dynamicProps) {
     args.push([`$: `, ...dynamicProps]);
   }
@@ -1989,11 +2104,46 @@ function genDynamicProps(props, context) {
       }
       continue;
     } else {
-      if (p.kind === 1)
-        expr = genMulti(DELIMITERS_OBJECT, genProp(p, context));
-      else {
+      if (p.kind === 1) {
+        if (p.model) {
+          const entries = [genProp(p, context)];
+          const updateKey = p.key.isStatic ? [
+            JSON.stringify(`onUpdate:${shared.camelize(p.key.content)}`)
+          ] : [
+            '["onUpdate:" + ',
+            ...genExpression(p.key, context),
+            "]"
+          ];
+          entries.push([
+            ...updateKey,
+            ": () => ",
+            ...genModelHandler(p.values[0], context)
+          ]);
+          const { modelModifiers } = p;
+          if (modelModifiers && modelModifiers.length) {
+            const modifiersKey = p.key.isStatic ? [shared.getModifierPropName(p.key.content)] : [
+              "[",
+              ...genExpression(p.key, context),
+              ' + "Modifiers"]'
+            ];
+            const modifiersVal = genDirectiveModifiers(modelModifiers);
+            entries.push([...modifiersKey, `: () => ({ ${modifiersVal} })`]);
+          }
+          expr = genMulti(DELIMITERS_OBJECT_NEWLINE, ...entries);
+        } else {
+          expr = genMulti(DELIMITERS_OBJECT, genProp(p, context));
+        }
+      } else {
         expr = genExpression(p.value, context);
-        if (p.handler) expr = genCall(helper("toHandlers"), expr);
+        if (p.handler)
+          expr = genCall(
+            helper("toHandlers"),
+            expr,
+            `false`,
+            // preserveCaseIfNecessary: false, not needed for component
+            `true`
+            // wrap handler values in functions
+          );
       }
     }
     frags.push(["() => (", ...expr, ")"]);
@@ -2011,23 +2161,11 @@ function genProp(prop, context, isStatic) {
       context,
       prop.values,
       prop.handlerModifiers,
+      true,
       true
-    ) : isStatic ? ["() => (", ...values, ")"] : values,
-    ...prop.model ? [...genModelEvent(prop, context), ...genModelModifiers(prop, context)] : []
+    ) : isStatic ? ["() => (", ...values, ")"] : values
   ];
 }
-function genModelEvent(prop, context) {
-  const name = prop.key.isStatic ? [JSON.stringify(`onUpdate:${shared.camelize(prop.key.content)}`)] : ['["onUpdate:" + ', ...genExpression(prop.key, context), "]"];
-  const handler = genModelHandler(prop.values[0], context);
-  return [",", NEWLINE, ...name, ": () => ", ...handler];
-}
-function genModelModifiers(prop, context) {
-  const { key, modelModifiers } = prop;
-  if (!modelModifiers || !modelModifiers.length) return [];
-  const modifiersKey = key.isStatic ? [shared.getModifierPropName(key.content)] : ["[", ...genExpression(key, context), ' + "Modifiers"]'];
-  const modifiersVal = genDirectiveModifiers(modelModifiers);
-  return [",", NEWLINE, ...modifiersKey, `: () => ({ ${modifiersVal} })`];
-}
 function genRawSlots(slots, context) {
   if (!slots.length) return;
   const staticSlots = slots[0];
@@ -2466,7 +2604,13 @@ function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
       }
     } else {
       if (elementIndex === 0) {
-        pushBlock(...genCall(helper("child"), from, String(logicalIndex)));
+        pushBlock(
+          ...genCall(
+            helper("child"),
+            from,
+            logicalIndex !== 0 ? String(logicalIndex) : void 0
+          )
+        );
       } else {
         let init = genCall(helper("child"), from);
         if (elementIndex === 1) {
@@ -2885,7 +3029,10 @@ const transformElement = (node, context) => {
         propsResult,
         singleRoot,
         context,
-        getEffectIndex
+        getEffectIndex,
+        // Root-level elements generate dedicated templates
+        // so closing tags can be omitted
+        context.root === context.effectiveParent || canOmitEndTag(node, context)
       );
     }
     if (parentSlots) {
@@ -2893,6 +3040,17 @@ const transformElement = (node, context) => {
     }
   };
 };
+function canOmitEndTag(node, context) {
+  const { block, parent } = context;
+  if (!parent) return false;
+  if (block !== parent.block) {
+    return true;
+  }
+  if (shared.isFormattingTag(node.tag) || parent.node.type === 1 && node.tag === parent.node.tag) {
+    return context.isOnRightmostPath;
+  }
+  return context.isLastEffectiveChild;
+}
 function isSingleRoot(context) {
   if (context.inVFor) {
     return false;
@@ -2982,7 +3140,8 @@ function resolveSetupReference(name, context) {
   return bindings[name] ? name : bindings[camelName] ? camelName : bindings[PascalName] ? PascalName : void 0;
 }
 const dynamicKeys = ["indeterminate"];
-function transformNativeElement(node, propsResult, singleRoot, context, getEffectIndex) {
+const NEEDS_QUOTES_RE = /[\s"'`=<>]/;
+function transformNativeElement(node, propsResult, singleRoot, context, getEffectIndex, omitEndTag) {
   const { tag } = node;
   const { scopeId } = context.options;
   let template = "";
@@ -3002,16 +3161,24 @@ function transformNativeElement(node, propsResult, singleRoot, context, getEffec
       getEffectIndex
     );
   } else {
+    let prevWasQuoted = false;
     for (const prop of propsResult[1]) {
       const { key, values } = prop;
       if (context.imports.some(
         (imported) => values[0].content.includes(imported.exp.content)
       )) {
-        template += ` ${key.content}="${IMPORT_EXP_START}${values[0].content}${IMPORT_EXP_END}"`;
+        if (!prevWasQuoted) template += ` `;
+        template += `${key.content}="${IMPORT_EXP_START}${values[0].content}${IMPORT_EXP_END}"`;
+        prevWasQuoted = true;
       } else if (key.isStatic && values.length === 1 && (values[0].isStatic || values[0].content === "''") && !dynamicKeys.includes(key.content)) {
-        template += ` ${key.content}`;
-        if (values[0].content)
-          template += `="${values[0].content === "''" ? "" : values[0].content}"`;
+        if (!prevWasQuoted) template += ` `;
+        const value = values[0].content === "''" ? "" : values[0].content;
+        template += key.content;
+        if (value) {
+          template += (prevWasQuoted = NEEDS_QUOTES_RE.test(value)) ? `="${value.replace(/"/g, "&quot;")}"` : `=${value}`;
+        } else {
+          prevWasQuoted = false;
+        }
       } else {
         dynamicProps.push(key.content);
         context.registerEffect(
@@ -3028,7 +3195,7 @@ function transformNativeElement(node, propsResult, singleRoot, context, getEffec
     }
   }
   template += `>` + context.childrenTemplate.join("");
-  if (!shared.isVoidTag(tag)) {
+  if (!shared.isVoidTag(tag) && !omitEndTag) {
     template += `</${tag}>`;
   }
   if (singleRoot) {
@@ -3193,13 +3360,13 @@ const transformVHtml = (dir, node, context) => {
   let { exp, loc } = dir;
   if (!exp) {
     context.options.onError(
-      compilerDom.createDOMCompilerError(53, loc)
+      compilerDom.createDOMCompilerError(54, loc)
     );
     exp = EMPTY_EXPRESSION;
   }
   if (node.children.length) {
     context.options.onError(
-      compilerDom.createDOMCompilerError(54, loc)
+      compilerDom.createDOMCompilerError(55, loc)
     );
     context.childrenTemplate.length = 0;
   }
@@ -3225,13 +3392,13 @@ const transformVText = (dir, node, context) => {
   let { exp, loc } = dir;
   if (!exp) {
     context.options.onError(
-      compilerDom.createDOMCompilerError(55, loc)
+      compilerDom.createDOMCompilerError(56, loc)
     );
     exp = EMPTY_EXPRESSION;
   }
   if (node.children.length) {
     context.options.onError(
-      compilerDom.createDOMCompilerError(56, loc)
+      compilerDom.createDOMCompilerError(57, loc)
     );
     context.childrenTemplate.length = 0;
   }
@@ -3264,7 +3431,7 @@ function normalizeBindShorthand(arg, context) {
   if (arg.type !== 4 || !arg.isStatic) {
     context.options.onError(
       compilerDom.createCompilerError(
-        52,
+        53,
         arg.loc
       )
     );
@@ -3381,7 +3548,7 @@ const transformVShow = (dir, node, context) => {
   const { exp, loc } = dir;
   if (!exp) {
     context.options.onError(
-      compilerDom.createDOMCompilerError(61, loc)
+      compilerDom.createDOMCompilerError(62, loc)
     );
     return;
   }
@@ -3580,7 +3747,7 @@ const transformVModel = (dir, node, context) => {
   if (dir.arg)
     context.options.onError(
       compilerDom.createDOMCompilerError(
-        58,
+        59,
         dir.arg.loc
       )
     );
@@ -3605,7 +3772,7 @@ const transformVModel = (dir, node, context) => {
               modelType = void 0;
               context.options.onError(
                 compilerDom.createDOMCompilerError(
-                  59,
+                  60,
                   dir.loc
                 )
               );
@@ -3628,7 +3795,7 @@ const transformVModel = (dir, node, context) => {
   } else {
     context.options.onError(
       compilerDom.createDOMCompilerError(
-        57,
+        58,
         dir.loc
       )
     );
@@ -3647,7 +3814,7 @@ const transformVModel = (dir, node, context) => {
     if (value && compilerDom.isStaticArgOf(value.arg, "value")) {
       context.options.onError(
         compilerDom.createDOMCompilerError(
-          60,
+          61,
           value.loc
         )
       );

package/dist/compiler-vapor.d.ts

@@ -314,6 +314,7 @@ export declare class TransformContext<T extends AllNode = AllNode> {
     node: T;
     selfName: string | null;
     parent: TransformContext<RootNode | ElementNode> | null;
+    effectiveParent: TransformContext<RootNode | ElementNode> | null;
     root: TransformContext<RootNode>;
     index: number;
     block: BlockIRNode;
@@ -328,6 +329,8 @@ export declare class TransformContext<T extends AllNode = AllNode> {
     component: Set<string>;
     directive: Set<string>;
     slots: IRSlots[];
+    isLastEffectiveChild: boolean;
+    isOnRightmostPath: boolean;
     private globalId;
     private nextIdMap;
     constructor(ir: RootIRNode, node: T, options?: TransformOptions);
@@ -340,6 +343,7 @@ export declare class TransformContext<T extends AllNode = AllNode> {
     registerEffect(expressions: SimpleExpressionNode[], operation: OperationNode | OperationNode[], getIndex?: () => number): void;
     registerOperation(...node: OperationNode[]): void;
     create<T extends TemplateChildNode>(node: T, index: number): TransformContext<T>;
+    private isEffectivelyLastChild;
 }
 export declare function transform(node: RootNode, options?: TransformOptions): RootIRNode;
 export declare function createStructuralDirectiveTransform(name: string | string[], fn: StructuralDirectiveTransform): NodeTransform;