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

package/dist/compiler-vapor.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compiler-vapor v3.6.0-alpha.2
+* @vue/compiler-vapor v3.6.0-alpha.4
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -11,7 +11,6 @@ var compilerDom = require('@vue/compiler-dom');
 var shared = require('@vue/shared');
 var sourceMapJs = require('source-map-js');
 var parser = require('@babel/parser');
-var types = require('@babel/types');
 var estreeWalker = require('estree-walker');
 
 const newDynamic = () => ({
@@ -25,7 +24,8 @@ const newBlock = (node) => ({
   effect: [],
   operation: [],
   returns: [],
-  tempId: 0
+  tempId: 0,
+  hasDeferredVShow: false
 });
 function wrapTemplate(node, dirs) {
   if (node.tagType === 3) {
@@ -65,31 +65,85 @@ function isStaticExpression(node, bindings) {
   if (node.ast) {
     return compilerDom.isConstantNode(node.ast, bindings);
   } else if (node.ast === null) {
+    if (!node.isStatic && (node.content === "true" || node.content === "false")) {
+      return true;
+    }
     const type = bindings[node.content];
     return type === "literal-const";
   }
   return false;
 }
-function resolveExpression(exp) {
+function resolveExpression(exp, isComponent) {
   if (!exp.isStatic) {
-    const value = getLiteralExpressionValue(exp);
+    const value = getLiteralExpressionValue(exp, isComponent);
     if (value !== null) {
-      return compilerDom.createSimpleExpression("" + value, true, exp.loc);
+      return compilerDom.createSimpleExpression(value, true, exp.loc);
     }
   }
   return exp;
 }
-function getLiteralExpressionValue(exp) {
+function getLiteralExpressionValue(exp, excludeNumber) {
   if (exp.ast) {
     if (exp.ast.type === "StringLiteral") {
       return exp.ast.value;
-    } else if (exp.ast.type === "TemplateLiteral" && exp.ast.expressions.length === 0) {
-      return exp.ast.quasis[0].value.cooked;
+    } else if (!excludeNumber && (exp.ast.type === "NumericLiteral" || exp.ast.type === "BigIntLiteral")) {
+      return String(exp.ast.value);
+    } else if (exp.ast.type === "TemplateLiteral") {
+      let result = "";
+      for (const [index, quasi] of exp.ast.quasis.entries()) {
+        result += quasi.value.cooked;
+        if (exp.ast.expressions[index]) {
+          let expressionValue = getLiteralExpressionValue({
+            ast: exp.ast.expressions[index]
+          });
+          if (expressionValue == null) {
+            return null;
+          } else {
+            result += expressionValue;
+          }
+        }
+      }
+      return result;
     }
   }
   return exp.isStatic ? exp.content : null;
 }
+function isInTransition(context) {
+  const parentNode = context.parent && context.parent.node;
+  return !!(parentNode && isTransitionNode(parentNode));
+}
+function isTransitionNode(node) {
+  return node.type === 1 && isTransitionTag(node.tag);
+}
+function isTransitionTag(tag) {
+  tag = tag.toLowerCase();
+  return tag === "transition" || tag === "vaportransition";
+}
+function isTransitionGroupTag(tag) {
+  tag = tag.toLowerCase().replace(/-/g, "");
+  return tag === "transitiongroup" || tag === "vaportransitiongroup";
+}
+function isKeepAliveTag(tag) {
+  tag = tag.toLowerCase();
+  return tag === "keepalive" || tag === "vaporkeepalive";
+}
+function isTeleportTag(tag) {
+  tag = tag.toLowerCase();
+  return tag === "teleport" || tag === "vaporteleport";
+}
+function isBuiltInComponent(tag) {
+  if (isTeleportTag(tag)) {
+    return "VaporTeleport";
+  } else if (isKeepAliveTag(tag)) {
+    return "VaporKeepAlive";
+  } else if (isTransitionTag(tag)) {
+    return "VaporTransition";
+  } else if (isTransitionGroupTag(tag)) {
+    return "VaporTransitionGroup";
+  }
+}
 
+const generatedVarRE = /^[nxr](\d+)$/;
 class TransformContext {
   constructor(ir, node, options = {}) {
     this.ir = ir;
@@ -101,6 +155,7 @@ class TransformContext {
     this.template = "";
     this.childrenTemplate = [];
     this.dynamic = this.ir.block.dynamic;
+    this.imports = [];
     this.inVOnce = false;
     this.inVFor = 0;
     this.comment = [];
@@ -108,10 +163,16 @@ class TransformContext {
     this.directive = this.ir.directive;
     this.slots = [];
     this.globalId = 0;
-    this.increaseId = () => this.globalId++;
+    this.nextIdMap = null;
+    this.increaseId = () => {
+      const id = getNextId(this.nextIdMap, this.globalId);
+      this.globalId = getNextId(this.nextIdMap, id + 1);
+      return id;
+    };
     this.options = shared.extend({}, defaultOptions, options);
     this.root = this;
     if (options.filename) this.selfName = compilerDom.getSelfName(options.filename);
+    this.initNextIdMap();
   }
   enterBlock(ir, isVFor = false) {
     const { block, template, dynamic, childrenTemplate, slots } = this;
@@ -131,18 +192,33 @@ class TransformContext {
       isVFor && this.inVFor--;
     };
   }
+  initNextIdMap() {
+    const binding = this.root.options.bindingMetadata;
+    if (!binding) return;
+    const keys = Object.keys(binding);
+    if (keys.length === 0) return;
+    const numbers = /* @__PURE__ */ new Set();
+    for (const name of keys) {
+      const m = generatedVarRE.exec(name);
+      if (m) numbers.add(Number(m[1]));
+    }
+    if (numbers.size === 0) return;
+    this.globalId = getNextId(this.nextIdMap = buildNextIdMap(numbers), 0);
+  }
   reference() {
     if (this.dynamic.id !== void 0) return this.dynamic.id;
     this.dynamic.flags |= 1;
     return this.dynamic.id = this.increaseId();
   }
   pushTemplate(content) {
-    const existing = this.ir.template.findIndex(
-      (template) => template === content
-    );
-    if (existing !== -1) return existing;
-    this.ir.template.push(content);
-    return this.ir.template.length - 1;
+    const existingIndex = this.ir.templateIndexMap.get(content);
+    if (existingIndex !== void 0) {
+      return existingIndex;
+    }
+    const newIndex = this.ir.template.size;
+    this.ir.template.set(content, this.node.ns);
+    this.ir.templateIndexMap.set(content, newIndex);
+    return newIndex;
   }
   registerTemplate() {
     if (!this.template) return -1;
@@ -204,7 +280,8 @@ function transform(node, options = {}) {
     type: 0,
     node,
     source: node.source,
-    template: [],
+    template: /* @__PURE__ */ new Map(),
+    templateIndexMap: /* @__PURE__ */ new Map(),
     component: /* @__PURE__ */ new Set(),
     directive: /* @__PURE__ */ new Set(),
     block: newBlock(node),
@@ -212,6 +289,7 @@ function transform(node, options = {}) {
   };
   const context = new TransformContext(ir, node, options);
   transformNode(context);
+  ir.node.imports = context.imports;
   return ir;
 }
 function transformNode(context) {
@@ -265,7 +343,32 @@ function createStructuralDirectiveTransform(name, fn) {
     }
   };
 }
+function buildNextIdMap(nums) {
+  const map = /* @__PURE__ */ new Map();
+  const arr = Array.from(new Set(nums)).sort((a, b) => a - b);
+  if (arr.length === 0) return map;
+  for (let i = 0; i < arr.length; i++) {
+    let start = arr[i];
+    let end = start;
+    while (i + 1 < arr.length && arr[i + 1] === end + 1) {
+      i++;
+      end = arr[i];
+    }
+    for (let v = start; v <= end; v++) map.set(v, end + 1);
+  }
+  return map;
+}
+function getNextId(map, n) {
+  if (map && map.has(n)) return map.get(n);
+  return n;
+}
 
+const IMPORT_EXP_START = "__IMPORT_EXP_START__";
+const IMPORT_EXP_END = "__IMPORT_EXP_END__";
+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` );
@@ -301,13 +404,13 @@ const DELIMITERS_ARRAY = ["[", "]", ", "];
 const DELIMITERS_ARRAY_NEWLINE = [
   ["[", INDENT_START, NEWLINE],
   [INDENT_END, NEWLINE, "]"],
-  [", ", NEWLINE]
+  [",", NEWLINE]
 ];
 const DELIMITERS_OBJECT = ["{ ", " }", ", "];
 const DELIMITERS_OBJECT_NEWLINE = [
   ["{", INDENT_START, NEWLINE],
   [INDENT_END, NEWLINE, "}"],
-  [", ", NEWLINE]
+  [",", NEWLINE]
 ];
 function genCall(name, ...frags) {
   const hasPlaceholder = shared.isArray(name);
@@ -508,15 +611,12 @@ function genExpression(node, context, assignment) {
   let hasMemberExpression = false;
   if (ids.length) {
     const [frag, push] = buildCodeFragment();
-    const isTSNode = ast && compilerDom.TS_NODE_TYPES.includes(ast.type);
     ids.sort((a, b) => a.start - b.start).forEach((id, i) => {
       const start = id.start - 1;
       const end = id.end - 1;
       const last = ids[i - 1];
-      if (!(isTSNode && i === 0)) {
-        const leadingText = content.slice(last ? last.end - 1 : 0, start);
-        if (leadingText.length) push([leadingText, -3]);
-      }
+      const leadingText = content.slice(last ? last.end - 1 : 0, start);
+      if (leadingText.length) push([leadingText, -3]);
       const source = content.slice(start, end);
       const parentStack2 = parentStackMap.get(id);
       const parent = parentStack2[parentStack2.length - 1];
@@ -536,7 +636,7 @@ function genExpression(node, context, assignment) {
           parentStack2
         )
       );
-      if (i === ids.length - 1 && end < content.length && !isTSNode) {
+      if (i === ids.length - 1 && end < content.length) {
         push([content.slice(end), -3]);
       }
     });
@@ -918,7 +1018,11 @@ function genSetEvent(oper, context) {
   const { helper } = context;
   const { element, key, keyOverride, value, modifiers, delegate, effect } = oper;
   const name = genName();
-  const handler = genEventHandler(context, value, modifiers);
+  const handler = [
+    `${context.helper("createInvoker")}(`,
+    ...genEventHandler(context, value, modifiers),
+    `)`
+  ];
   const eventOptions = genEventOptions();
   if (delegate) {
     context.delegates.add(key.content);
@@ -979,7 +1083,14 @@ function genEventHandler(context, value, modifiers = { nonKeys: [], keys: [] },
     if (compilerDom.isMemberExpression(value, context.options)) {
       handlerExp = genExpression(value, context);
       if (!isConstantBinding(value, context) && !extraWrap) {
-        handlerExp = [`e => `, ...handlerExp, `(e)`];
+        const isTSNode = value.ast && compilerDom.TS_NODE_TYPES.includes(value.ast.type);
+        handlerExp = [
+          `e => `,
+          isTSNode ? "(" : "",
+          ...handlerExp,
+          isTSNode ? ")" : "",
+          `(e)`
+        ];
       }
     } else if (compilerDom.isFnExpression(value, context.options)) {
       handlerExp = genExpression(value, context);
@@ -1265,12 +1376,12 @@ function matchPatterns(render, keyProp, idMap) {
   const keyOnlyBindingPatterns = [];
   render.effect = render.effect.filter((effect) => {
     if (keyProp !== void 0) {
-      const selector = matchSelectorPattern(effect, keyProp.ast, idMap);
+      const selector = matchSelectorPattern(effect, keyProp.content, idMap);
       if (selector) {
         selectorPatterns.push(selector);
         return false;
       }
-      const keyOnly = matchKeyOnlyBindingPattern(effect, keyProp.ast);
+      const keyOnly = matchKeyOnlyBindingPattern(effect, keyProp.content);
       if (keyOnly) {
         keyOnlyBindingPatterns.push(keyOnly);
         return false;
@@ -1283,19 +1394,19 @@ function matchPatterns(render, keyProp, idMap) {
     selectorPatterns
   };
 }
-function matchKeyOnlyBindingPattern(effect, keyAst) {
+function matchKeyOnlyBindingPattern(effect, key) {
   if (effect.expressions.length === 1) {
-    const ast = effect.expressions[0].ast;
+    const { ast, content } = effect.expressions[0];
     if (typeof ast === "object" && ast !== null) {
-      if (isKeyOnlyBinding(ast, keyAst)) {
+      if (isKeyOnlyBinding(ast, key, content)) {
         return { effect };
       }
     }
   }
 }
-function matchSelectorPattern(effect, keyAst, idMap) {
+function matchSelectorPattern(effect, key, idMap) {
   if (effect.expressions.length === 1) {
-    const ast = effect.expressions[0].ast;
+    const { ast, content } = effect.expressions[0];
     if (typeof ast === "object" && ast) {
       const matcheds = [];
       estreeWalker.walk(ast, {
@@ -1306,10 +1417,10 @@ function matchSelectorPattern(effect, keyAst, idMap) {
               [left, right],
               [right, left]
             ]) {
-              const aIsKey = isKeyOnlyBinding(a, keyAst);
-              const bIsKey = isKeyOnlyBinding(b, keyAst);
+              const aIsKey = isKeyOnlyBinding(a, key, content);
+              const bIsKey = isKeyOnlyBinding(b, key, content);
               const bVars = analyzeVariableScopes(b, idMap);
-              if (aIsKey && !bIsKey && !bVars.locals.length) {
+              if (aIsKey && !bIsKey && !bVars.length) {
                 matcheds.push([a, b]);
               }
             }
@@ -1317,21 +1428,17 @@ function matchSelectorPattern(effect, keyAst, idMap) {
         }
       });
       if (matcheds.length === 1) {
-        const [key, selector] = matcheds[0];
+        const [key2, selector] = matcheds[0];
         const content2 = effect.expressions[0].content;
         let hasExtraId = false;
-        const parentStackMap = /* @__PURE__ */ new Map();
-        const parentStack = [];
         compilerDom.walkIdentifiers(
           ast,
           (id) => {
-            if (id.start !== key.start && id.start !== selector.start) {
+            if (id.start !== key2.start && id.start !== selector.start) {
               hasExtraId = true;
             }
-            parentStackMap.set(id, parentStack.slice());
           },
-          false,
-          parentStack
+          false
         );
         if (!hasExtraId) {
           const name = content2.slice(selector.start - 1, selector.end - 1);
@@ -1351,47 +1458,17 @@ function matchSelectorPattern(effect, keyAst, idMap) {
         }
       }
     }
-    const content = effect.expressions[0].content;
-    if (typeof ast === "object" && ast && ast.type === "ConditionalExpression" && ast.test.type === "BinaryExpression" && ast.test.operator === "===" && ast.test.left.type !== "PrivateName" && compilerDom.isStaticNode(ast.consequent) && compilerDom.isStaticNode(ast.alternate)) {
-      const left = ast.test.left;
-      const right = ast.test.right;
-      for (const [a, b] of [
-        [left, right],
-        [right, left]
-      ]) {
-        const aIsKey = isKeyOnlyBinding(a, keyAst);
-        const bIsKey = isKeyOnlyBinding(b, keyAst);
-        const bVars = analyzeVariableScopes(b, idMap);
-        if (aIsKey && !bIsKey && !bVars.locals.length) {
-          return {
-            effect,
-            // @ts-expect-error
-            selector: {
-              content: content.slice(b.start - 1, b.end - 1),
-              ast: b,
-              loc: b.loc,
-              isStatic: false
-            }
-          };
-        }
-      }
-    }
   }
 }
 function analyzeVariableScopes(ast, idMap) {
-  let globals = [];
   let locals = [];
   const ids = [];
-  const parentStackMap = /* @__PURE__ */ new Map();
-  const parentStack = [];
   compilerDom.walkIdentifiers(
     ast,
     (id) => {
       ids.push(id);
-      parentStackMap.set(id, parentStack.slice());
     },
-    false,
-    parentStack
+    false
   );
   for (const id of ids) {
     if (shared.isGloballyAllowed(id.name)) {
@@ -1399,17 +1476,15 @@ function analyzeVariableScopes(ast, idMap) {
     }
     if (idMap[id.name]) {
       locals.push(id.name);
-    } else {
-      globals.push(id.name);
     }
   }
-  return { globals, locals };
+  return locals;
 }
-function isKeyOnlyBinding(expr, keyAst) {
+function isKeyOnlyBinding(expr, key, source) {
   let only = true;
   estreeWalker.walk(expr, {
     enter(node) {
-      if (types.isNodesEquivalent(node, keyAst)) {
+      if (source.slice(node.start - 1, node.end - 1) === key) {
         this.skip();
         return;
       }
@@ -1423,10 +1498,15 @@ function isKeyOnlyBinding(expr, keyAst) {
 
 function genSetHtml(oper, context) {
   const { helper } = context;
-  const { value, element } = oper;
+  const { value, element, isComponent } = oper;
   return [
     NEWLINE,
-    ...genCall(helper("setHtml"), `n${element}`, genExpression(value, context))
+    ...genCall(
+      // use setBlockHtml for component
+      isComponent ? helper("setBlockHtml") : helper("setHtml"),
+      `n${element}`,
+      genExpression(value, context)
+    )
   ];
 }
 
@@ -1469,7 +1549,8 @@ const helpers = {
   setValue: { name: "setValue" },
   setAttr: { name: "setAttr", needKey: true },
   setProp: { name: "setProp", needKey: true },
-  setDOMProp: { name: "setDOMProp", needKey: true }};
+  setDOMProp: { name: "setDOMProp", needKey: true }
+};
 function genSetProp(oper, context) {
   const { helper } = context;
   const {
@@ -1484,12 +1565,14 @@ function genSetProp(oper, context) {
       [helper(resolvedHelper.name), null],
       `n${oper.element}`,
       resolvedHelper.needKey ? genExpression(key, context) : false,
-      propValue
+      propValue,
+      resolvedHelper.isSVG && "true"
     )
   ];
 }
 function genDynamicProps$1(oper, context) {
   const { helper } = context;
+  const isSVG = shared.isSVGTag(oper.tag);
   const values = oper.props.map(
     (props) => Array.isArray(props) ? genLiteralObjectProps(props, context) : props.kind === 1 ? genLiteralObjectProps([props], context) : genExpression(props.value, context)
   );
@@ -1499,7 +1582,8 @@ function genDynamicProps$1(oper, context) {
       helper("setDynamicProps"),
       `n${oper.element}`,
       genMulti(DELIMITERS_ARRAY, ...values),
-      oper.root && "true"
+      oper.root && "true",
+      isSVG && "true"
     )
   ];
 }
@@ -1515,7 +1599,7 @@ function genLiteralObjectProps(props, context) {
 }
 function genPropKey({ key: node, modifier, runtimeCamelize, handler, handlerModifiers }, context) {
   const { helper } = context;
-  const handlerModifierPostfix = handlerModifiers ? handlerModifiers.map(shared.capitalize).join("") : "";
+  const handlerModifierPostfix = handlerModifiers && handlerModifiers.options ? handlerModifiers.options.map(shared.capitalize).join("") : "";
   if (node.isStatic) {
     const keyName = (handler ? shared.toHandlerKey(node.content) : node.content) + handlerModifierPostfix;
     return [
@@ -1552,6 +1636,10 @@ function genPropValue(values, context) {
 }
 function getRuntimeHelper(tag, key, modifier) {
   const tagName = tag.toUpperCase();
+  const isSVG = shared.isSVGTag(tag);
+  if (isSVG) {
+    return shared.extend({ isSVG: true }, helpers.setAttr);
+  }
   if (modifier) {
     if (modifier === ".") {
       return getSpecialHelper(key, tagName) || helpers.setDOMProp;
@@ -1566,9 +1654,6 @@ function getRuntimeHelper(tag, key, modifier) {
   if (/aria[A-Z]/.test(key)) {
     return helpers.setDOMProp;
   }
-  if (shared.isSVGTag(tag)) {
-    return helpers.setAttr;
-  }
   if (shared.shouldSetAsAttr(tagName, key) || key.includes("-")) {
     return helpers.setAttr;
   }
@@ -1590,6 +1675,7 @@ function getSpecialHelper(keyName, tagName) {
 
 const setTemplateRefIdent = `_setTemplateRef`;
 function genSetTemplateRef(oper, context) {
+  const [refValue, refKey] = genRefValue(oper.value, context);
   return [
     NEWLINE,
     oper.effect && `r${oper.element} = `,
@@ -1597,9 +1683,10 @@ function genSetTemplateRef(oper, context) {
       setTemplateRefIdent,
       // will be generated in root scope
       `n${oper.element}`,
-      genRefValue(oper.value, context),
+      refValue,
       oper.effect ? `r${oper.element}` : oper.refFor ? "void 0" : void 0,
-      oper.refFor && "true"
+      oper.refFor && "true",
+      refKey
     )
   ];
 }
@@ -1610,25 +1697,30 @@ function genRefValue(value, context) {
   if (value && context.options.inline) {
     const binding = context.options.bindingMetadata[value.content];
     if (binding === "setup-let" || binding === "setup-ref" || binding === "setup-maybe-ref") {
-      return [value.content];
+      return [[value.content], JSON.stringify(value.content)];
     }
   }
-  return genExpression(value, context);
+  return [genExpression(value, context)];
 }
 
 function genSetText(oper, context) {
   const { helper } = context;
-  const { element, values, generated, jsx } = oper;
+  const { element, values, generated, jsx, isComponent } = oper;
   const texts = combineValues(values, context, jsx);
   return [
     NEWLINE,
-    ...genCall(helper("setText"), `${generated ? "x" : "n"}${element}`, texts)
+    ...genCall(
+      // use setBlockText for component
+      isComponent ? helper("setBlockText") : helper("setText"),
+      `${generated && !isComponent ? "x" : "n"}${element}`,
+      texts
+    )
   ];
 }
 function combineValues(values, context, jsx) {
   return values.flatMap((value, i) => {
     let exp = genExpression(value, context);
-    if (!jsx && getLiteralExpressionValue(value) == null) {
+    if (!jsx && getLiteralExpressionValue(value, true) == null) {
       exp = genCall(context.helper("toDisplayString"), exp);
     }
     if (i > 0) {
@@ -1640,18 +1732,21 @@ function combineValues(values, context, jsx) {
 function genGetTextChild(oper, context) {
   return [
     NEWLINE,
-    `const x${oper.parent} = ${context.helper("child")}(n${oper.parent})`
+    `const x${oper.parent} = ${context.helper("txt")}(n${oper.parent})`
   ];
 }
 
 function genVShow(oper, context) {
+  const { deferred, element } = oper;
   return [
     NEWLINE,
-    ...genCall(context.helper("applyVShow"), `n${oper.element}`, [
+    deferred ? `deferredApplyVShows.push(() => ` : void 0,
+    ...genCall(context.helper("applyVShow"), `n${element}`, [
       `() => (`,
       ...genExpression(oper.dir.exp, context),
       `)`
-    ])
+    ]),
+    deferred ? `)` : void 0
   ];
 }
 
@@ -1768,7 +1863,7 @@ function genCreateComponent(operation, context) {
     ...inlineHandlers,
     `const n${operation.id} = `,
     ...genCall(
-      operation.dynamic && !operation.dynamic.isStatic ? helper("createDynamicComponent") : operation.asset ? helper("createComponentWithFallback") : helper("createComponent"),
+      operation.dynamic && !operation.dynamic.isStatic ? helper("createDynamicComponent") : operation.isCustomElement ? helper("createPlainElement") : operation.asset ? helper("createComponentWithFallback") : helper("createComponent"),
       tag,
       rawProps,
       rawSlots,
@@ -1778,7 +1873,9 @@ function genCreateComponent(operation, context) {
     ...genDirectivesForElement(operation.id, context)
   ];
   function genTag() {
-    if (operation.dynamic) {
+    if (operation.isCustomElement) {
+      return JSON.stringify(operation.tag);
+    } else if (operation.dynamic) {
       if (operation.dynamic.isStatic) {
         return genCall(
           helper("resolveDynamicComponent"),
@@ -1790,8 +1887,14 @@ function genCreateComponent(operation, context) {
     } else if (operation.asset) {
       return compilerDom.toValidAssetId(operation.tag, "component");
     } else {
+      const { tag: tag2 } = operation;
+      const builtInTag = isBuiltInComponent(tag2);
+      if (builtInTag) {
+        helper(builtInTag);
+        return `_${builtInTag}`;
+      }
       return genExpression(
-        shared.extend(compilerDom.createSimpleExpression(operation.tag, false), { ast: null }),
+        shared.extend(compilerDom.createSimpleExpression(tag2, false), { ast: null }),
         context
       );
     }
@@ -1815,7 +1918,10 @@ function processInlineHandlers(props, context) {
       prop.values.forEach((value, i2) => {
         const isMemberExp = compilerDom.isMemberExpression(value, context.options);
         if (!isMemberExp) {
-          const name = getUniqueHandlerName(context, `_on_${prop.key.content}`);
+          const name = getUniqueHandlerName(
+            context,
+            `_on_${prop.key.content.replace(/-/g, "_")}`
+          );
           handlers.push({ name, value });
           ids[name] = null;
           prop.values[i2] = shared.extend({ ast: null }, compilerDom.createSimpleExpression(name));
@@ -1882,7 +1988,7 @@ function genProp(prop, context, isStatic) {
     ...prop.handler ? genEventHandler(
       context,
       prop.values[0],
-      void 0,
+      prop.handlerModifiers,
       true
     ) : isStatic ? ["() => (", ...values, ")"] : values,
     ...prop.model ? [...genModelEvent(prop, context), ...genModelModifiers(prop, context)] : []
@@ -1896,7 +2002,7 @@ function genModelEvent(prop, context) {
 function genModelModifiers(prop, context) {
   const { key, modelModifiers } = prop;
   if (!modelModifiers || !modelModifiers.length) return [];
-  const modifiersKey = key.isStatic ? key.content === "modelValue" ? [`modelModifiers`] : [`${key.content}Modifiers`] : ["[", ...genExpression(key, context), ' + "Modifiers"]'];
+  const modifiersKey = key.isStatic ? [shared.getModifierPropName(key.content)] : ["[", ...genExpression(key, context), ' + "Modifiers"]'];
   const modifiersVal = genDirectiveModifiers(modelModifiers);
   return [",", NEWLINE, ...modifiersKey, `: () => ({ ${modifiersVal} })`];
 }
@@ -2014,7 +2120,7 @@ function genSlotBlockWithProps(oper, context) {
   let propsName;
   let exitScope;
   let depth;
-  const { props } = oper;
+  const { props, key, node } = oper;
   const idsOfProps = /* @__PURE__ */ new Set();
   if (props) {
     rawProps = props.content;
@@ -2036,17 +2142,36 @@ function genSlotBlockWithProps(oper, context) {
   idsOfProps.forEach(
     (id) => idMap[id] = isDestructureAssignment ? `${propsName}[${JSON.stringify(id)}]` : null
   );
-  const blockFn = context.withId(
+  let blockFn = context.withId(
     () => genBlock(oper, context, [propsName]),
     idMap
   );
   exitScope && exitScope();
+  if (key) {
+    blockFn = [
+      `() => {`,
+      INDENT_START,
+      NEWLINE,
+      `return `,
+      ...genCall(
+        context.helper("createKeyedFragment"),
+        [`() => `, ...genExpression(key, context)],
+        blockFn
+      ),
+      INDENT_END,
+      NEWLINE,
+      `}`
+    ];
+  }
+  if (node.type === 1) {
+    blockFn = [`${context.helper("withVaporCtx")}(`, ...blockFn, `)`];
+  }
   return blockFn;
 }
 
 function genSlotOutlet(oper, context) {
   const { helper } = context;
-  const { id, name, fallback } = oper;
+  const { id, name, fallback, noSlotted } = oper;
   const [frag, push] = buildCodeFragment();
   const nameExpr = name.isStatic ? genExpression(name, context) : ["() => (", ...genExpression(name, context), ")"];
   let fallbackArg;
@@ -2060,7 +2185,9 @@ function genSlotOutlet(oper, context) {
       helper("createSlot"),
       nameExpr,
       genRawProps(oper.props, context) || "null",
-      fallbackArg
+      fallbackArg,
+      noSlotted && "true"
+      // noSlotted
     )
   );
   return frag;
@@ -2176,34 +2303,53 @@ function genEffect({ operations }, context) {
   return frag;
 }
 function genInsertionState(operation, context) {
+  const { parent, anchor, append, last } = operation;
   return [
     NEWLINE,
     ...genCall(
       context.helper("setInsertionState"),
-      `n${operation.parent}`,
-      operation.anchor == null ? void 0 : operation.anchor === -1 ? `0` : `n${operation.anchor}`
+      `n${parent}`,
+      anchor == null ? void 0 : anchor === -1 ? `0` : append ? (
+        // null or anchor > 0 for append
+        // anchor > 0 is the logical index of append node - used for locate node during hydration
+        anchor === 0 ? "null" : `${anchor}`
+      ) : `n${anchor}`,
+      last && "true"
     )
   ];
 }
 
-function genTemplates(templates, rootIndex, { helper }) {
-  return templates.map(
-    (template, i) => `const t${i} = ${helper("template")}(${JSON.stringify(
-      template
-    )}${i === rootIndex ? ", true" : ""})
+function genTemplates(templates, rootIndex, context) {
+  const result = [];
+  let i = 0;
+  templates.forEach((ns, template) => {
+    result.push(
+      `const ${context.tName(i)} = ${context.helper("template")}(${JSON.stringify(
+        template
+      ).replace(
+        // replace import expressions with string concatenation
+        IMPORT_EXPR_RE,
+        `" + $1 + "`
+      )}${i === rootIndex ? ", true" : ns ? ", false" : ""}${ns ? `, ${ns}` : ""})
 `
-  ).join("");
+    );
+    i++;
+  });
+  return result.join("");
 }
 function genSelf(dynamic, context) {
   const [frag, push] = buildCodeFragment();
-  const { id, template, operation } = dynamic;
+  const { id, template, operation, hasDynamicChild } = dynamic;
   if (id !== void 0 && template !== void 0) {
-    push(NEWLINE, `const n${id} = t${template}()`);
+    push(NEWLINE, `const n${id} = ${context.tName(template)}()`);
     push(...genDirectivesForElement(id, context));
   }
   if (operation) {
     push(...genOperationWithInsertionState(operation, context));
   }
+  if (hasDynamicChild) {
+    push(...genChildren(dynamic, context, push, `n${id}`));
+  }
   return frag;
 }
 function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
@@ -2212,51 +2358,65 @@ function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
   const { children } = dynamic;
   let offset = 0;
   let prev;
-  const childrenToGen = [];
+  let ifBranchCount = 0;
+  let prependCount = 0;
   for (const [index, child] of children.entries()) {
+    if (child.operation && child.operation.anchor === -1) {
+      prependCount++;
+    }
     if (child.flags & 2) {
       offset--;
+    } else if (child.ifBranch) {
+      ifBranchCount++;
     }
     const id = child.flags & 1 ? child.flags & 4 ? child.anchor : child.id : void 0;
     if (id === void 0 && !child.hasDynamicChild) {
       push(...genSelf(child, context));
       continue;
     }
-    const elementIndex = Number(index) + offset;
-    const variable = id === void 0 ? `p${context.block.tempId++}` : `n${id}`;
+    const elementIndex = index + offset;
+    const logicalIndex = elementIndex - ifBranchCount + prependCount;
+    const variable = id === void 0 ? context.pName(context.block.tempId++) : `n${id}`;
     pushBlock(NEWLINE, `const ${variable} = `);
     if (prev) {
       if (elementIndex - prev[1] === 1) {
-        pushBlock(...genCall(helper("next"), prev[0]));
+        pushBlock(...genCall(helper("next"), prev[0], String(logicalIndex)));
       } else {
-        pushBlock(...genCall(helper("nthChild"), from, String(elementIndex)));
+        pushBlock(
+          ...genCall(
+            helper("nthChild"),
+            from,
+            String(elementIndex),
+            String(logicalIndex)
+          )
+        );
       }
     } else {
       if (elementIndex === 0) {
-        pushBlock(...genCall(helper("child"), from));
+        pushBlock(...genCall(helper("child"), from, String(logicalIndex)));
       } else {
         let init = genCall(helper("child"), from);
         if (elementIndex === 1) {
-          init = genCall(helper("next"), init);
+          init = genCall(helper("next"), init, String(logicalIndex));
         } else if (elementIndex > 1) {
-          init = genCall(helper("nthChild"), from, String(elementIndex));
+          init = genCall(
+            helper("nthChild"),
+            from,
+            String(elementIndex),
+            String(logicalIndex)
+          );
         }
         pushBlock(...init);
       }
     }
-    if (id === child.anchor) {
+    if (id === child.anchor && !child.hasDynamicChild) {
       push(...genSelf(child, context));
     }
     if (id !== void 0) {
       push(...genDirectivesForElement(id, context));
     }
     prev = [variable, elementIndex];
-    childrenToGen.push([child, variable]);
-  }
-  if (childrenToGen.length) {
-    for (const [child, from2] of childrenToGen) {
-      push(...genChildren(child, context, pushBlock, from2));
-    }
+    push(...genChildren(child, context, pushBlock, variable));
   }
   return frag;
 }
@@ -2275,8 +2435,11 @@ function genBlock(oper, context, args = [], root) {
 }
 function genBlockContent(block, context, root, genEffectsExtraFrag) {
   const [frag, push] = buildCodeFragment();
-  const { dynamic, effect, operation, returns } = block;
+  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");
@@ -2299,10 +2462,21 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
     push(...genSelf(child, context));
   }
   for (const child of dynamic.children) {
-    push(...genChildren(child, context, push, `n${child.id}`));
+    if (!child.hasDynamicChild) {
+      push(...genChildren(child, context, push, `n${child.id}`));
+    }
   }
   push(...genOperations(operation, context));
   push(...genEffects(effect, context, genEffectsExtraFrag));
+  if (block.hasDeferredVShow) {
+    push(NEWLINE, `deferredApplyVShows.forEach(fn => fn())`);
+  }
+  if (dynamic.needsKey) {
+    for (const child of dynamic.children) {
+      const keyValue = key ? genExpression(key, context) : JSON.stringify(child.id);
+      push(NEWLINE, `n${child.id}.$key = `, ...keyValue);
+    }
+  }
   push(NEWLINE, `return `);
   const returnNodes = returns.map((n) => `n${n}`);
   const returnsCode = returnNodes.length > 1 ? genMulti(DELIMITERS_ARRAY, ...returnNodes) : [returnNodes[0] || "null"];
@@ -2320,18 +2494,34 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
   }
 }
 
+const idWithTrailingDigitsRE = /^([A-Za-z_$][\w$]*)(\d+)$/;
 class CodegenContext {
   constructor(ir, options) {
     this.ir = ir;
-    this.helpers = /* @__PURE__ */ new Set([]);
+    this.bindingNames = /* @__PURE__ */ new Set();
+    this.helpers = /* @__PURE__ */ new Map();
     this.helper = (name) => {
-      this.helpers.add(name);
-      return `_${name}`;
+      if (this.helpers.has(name)) {
+        return this.helpers.get(name);
+      }
+      const base = `_${name}`;
+      if (this.bindingNames.size === 0 || !this.bindingNames.has(base)) {
+        this.helpers.set(name, base);
+        return base;
+      }
+      const map = this.nextIdMap.get(base);
+      const alias = `${base}${getNextId(map, 1)}`;
+      this.helpers.set(name, alias);
+      return alias;
     };
     this.delegates = /* @__PURE__ */ new Set();
     this.identifiers = /* @__PURE__ */ Object.create(null);
     this.seenInlineHandlerNames = /* @__PURE__ */ Object.create(null);
     this.scopeLevel = 0;
+    this.templateVars = /* @__PURE__ */ new Map();
+    this.nextIdMap = /* @__PURE__ */ new Map();
+    this.lastIdMap = /* @__PURE__ */ new Map();
+    this.lastTIndex = -1;
     const defaultOptions = {
       mode: "module",
       prefixIdentifiers: true,
@@ -2350,6 +2540,10 @@ class CodegenContext {
     };
     this.options = shared.extend(defaultOptions, options);
     this.block = ir.block;
+    this.bindingNames = new Set(
+      this.options.bindingMetadata ? Object.keys(this.options.bindingMetadata) : []
+    );
+    this.initNextIdMap();
   }
   withId(fn, map) {
     const { identifiers } = this;
@@ -2370,11 +2564,47 @@ class CodegenContext {
   enterScope() {
     return [this.scopeLevel++, () => this.scopeLevel--];
   }
+  initNextIdMap() {
+    if (this.bindingNames.size === 0) return;
+    const map = /* @__PURE__ */ new Map();
+    for (const name of this.bindingNames) {
+      const m = idWithTrailingDigitsRE.exec(name);
+      if (!m) continue;
+      const prefix = m[1];
+      const num = Number(m[2]);
+      let set = map.get(prefix);
+      if (!set) map.set(prefix, set = /* @__PURE__ */ new Set());
+      set.add(num);
+    }
+    for (const [prefix, nums] of map) {
+      this.nextIdMap.set(prefix, buildNextIdMap(nums));
+    }
+  }
+  tName(i) {
+    let name = this.templateVars.get(i);
+    if (name) return name;
+    const map = this.nextIdMap.get("t");
+    let lastId = this.lastIdMap.get("t") || -1;
+    for (let j = this.lastTIndex + 1; j <= i; j++) {
+      this.templateVars.set(
+        j,
+        name = `t${lastId = getNextId(map, Math.max(j, lastId + 1))}`
+      );
+    }
+    this.lastIdMap.set("t", lastId);
+    this.lastTIndex = i;
+    return name;
+  }
+  pName(i) {
+    const map = this.nextIdMap.get("p");
+    let lastId = this.lastIdMap.get("p") || -1;
+    this.lastIdMap.set("p", lastId = getNextId(map, Math.max(i, lastId + 1)));
+    return `p${lastId}`;
+  }
 }
 function generate(ir, options = {}) {
   const [frag, push] = buildCodeFragment();
   const context = new CodegenContext(ir, options);
-  const { helpers } = context;
   const { inline, bindingMetadata } = options;
   const functionName = "render";
   const args = ["_ctx"];
@@ -2401,7 +2631,7 @@ function generate(ir, options = {}) {
   }
   const delegates = genDelegates(context);
   const templates = genTemplates(ir.template, ir.rootTemplateIndex, context);
-  const imports = genHelperImports(context);
+  const imports = genHelperImports(context) + genAssetImports(context);
   const preamble = imports + templates + delegates;
   const newlineCount = [...preamble].filter((c) => c === "\n").length;
   if (newlineCount && !inline) {
@@ -2416,7 +2646,7 @@ function generate(ir, options = {}) {
     ast: ir,
     preamble,
     map: map && map.toJSON(),
-    helpers
+    helpers: new Set(Array.from(context.helpers.keys()))
   };
 }
 function genDelegates({ delegates, helper }) {
@@ -2425,10 +2655,21 @@ function genDelegates({ delegates, helper }) {
     ...Array.from(delegates).map((v) => `"${v}"`)
   ).join("") + "\n" : "";
 }
-function genHelperImports({ helpers, helper, options }) {
+function genHelperImports({ helpers, options }) {
   let imports = "";
   if (helpers.size) {
-    imports += `import { ${[...helpers].map((h) => `${h} as _${h}`).join(", ")} } from '${options.runtimeModuleName}';
+    imports += `import { ${Array.from(helpers).map(([h, alias]) => `${h} as ${alias}`).join(", ")} } from '${options.runtimeModuleName}';
+`;
+  }
+  return imports;
+}
+function genAssetImports({ ir }) {
+  const assetImports = ir.node.imports;
+  let imports = "";
+  for (const assetImport of assetImports) {
+    const exp = assetImport.exp;
+    const name = exp.content;
+    imports += `import ${name} from '${assetImport.path}';
 `;
   }
   return imports;
@@ -2461,15 +2702,17 @@ const transformChildren = (node, context) => {
 };
 function processDynamicChildren(context) {
   let prevDynamics = [];
-  let hasStaticTemplate = false;
+  let staticCount = 0;
+  let dynamicCount = 0;
+  let lastInsertionChild;
   const children = context.dynamic.children;
   for (const [index, child] of children.entries()) {
     if (child.flags & 4) {
-      prevDynamics.push(child);
+      prevDynamics.push(lastInsertionChild = child);
     }
     if (!(child.flags & 2)) {
       if (prevDynamics.length) {
-        if (hasStaticTemplate) {
+        if (staticCount) {
           context.childrenTemplate[index - prevDynamics.length] = `<!>`;
           prevDynamics[0].flags -= 2;
           const anchor = prevDynamics[0].anchor = context.increaseId();
@@ -2482,27 +2725,38 @@ function processDynamicChildren(context) {
             /* prepend */
           );
         }
+        dynamicCount += prevDynamics.length;
         prevDynamics = [];
       }
-      hasStaticTemplate = true;
+      staticCount++;
     }
   }
   if (prevDynamics.length) {
-    registerInsertion(prevDynamics, context);
+    registerInsertion(
+      prevDynamics,
+      context,
+      // the logical index of append child
+      dynamicCount + staticCount,
+      true
+    );
+  }
+  if (lastInsertionChild && lastInsertionChild.operation) {
+    lastInsertionChild.operation.last = true;
   }
 }
-function registerInsertion(dynamics, context, anchor) {
+function registerInsertion(dynamics, context, anchor, append) {
   for (const child of dynamics) {
     if (child.template != null) {
       context.registerOperation({
         type: 9,
         elements: dynamics.map((child2) => child2.id),
         parent: context.reference(),
-        anchor
+        anchor: append ? void 0 : anchor
       });
     } else if (child.operation && isBlockOperation(child.operation)) {
       child.operation.parent = context.reference();
       child.operation.anchor = anchor;
+      child.operation.append = append;
     }
   }
 }
@@ -2527,7 +2781,8 @@ const transformElement = (node, context) => {
     ({ node } = context);
     if (!(node.type === 1 && (node.tagType === 0 || node.tagType === 1)))
       return;
-    const isComponent = node.tagType === 1;
+    const isCustomElement = !!context.options.isCustomElement(node.tag);
+    const isComponent = node.tagType === 1 || isCustomElement;
     const isDynamicComponent = isComponentTag(node.tag);
     const propsResult = buildProps(
       node,
@@ -2540,14 +2795,15 @@ const transformElement = (node, 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;
+    const singleRoot = context.root === parent && parent.node.children.filter((child) => child.type !== 3).length === 1 || isCustomElement;
     if (isComponent) {
       transformComponentElement(
         node,
         propsResult,
         singleRoot,
         context,
-        isDynamicComponent
+        isDynamicComponent,
+        isCustomElement
       );
     } else {
       transformNativeElement(
@@ -2560,16 +2816,21 @@ const transformElement = (node, context) => {
     }
   };
 };
-function transformComponentElement(node, propsResult, singleRoot, context, isDynamicComponent) {
+function transformComponentElement(node, propsResult, singleRoot, context, isDynamicComponent, isCustomElement) {
   const dynamicComponent = isDynamicComponent ? resolveDynamicComponent(node) : void 0;
   let { tag } = node;
   let asset = true;
-  if (!dynamicComponent) {
+  if (!dynamicComponent && !isCustomElement) {
     const fromSetup = resolveSetupReference(tag, context);
     if (fromSetup) {
       tag = fromSetup;
       asset = false;
     }
+    const builtInTag = isBuiltInComponent(tag);
+    if (builtInTag) {
+      tag = builtInTag;
+      asset = false;
+    }
     const dotIndex = tag.indexOf(".");
     if (dotIndex > 0) {
       const ns = resolveSetupReference(tag.slice(0, dotIndex), context);
@@ -2595,7 +2856,8 @@ function transformComponentElement(node, propsResult, singleRoot, context, isDyn
     root: singleRoot && !context.inVFor,
     slots: [...context.slots],
     once: context.inVOnce,
-    dynamic: dynamicComponent
+    dynamic: dynamicComponent,
+    isCustomElement
   };
   context.slots = [];
 }
@@ -2626,6 +2888,7 @@ function resolveSetupReference(name, context) {
   const PascalName = shared.capitalize(camelName);
   return bindings[name] ? name : bindings[camelName] ? camelName : bindings[PascalName] ? PascalName : void 0;
 }
+const dynamicKeys = ["indeterminate"];
 function transformNativeElement(node, propsResult, singleRoot, context, getEffectIndex) {
   const { tag } = node;
   const { scopeId } = context.options;
@@ -2641,16 +2904,22 @@ function transformNativeElement(node, propsResult, singleRoot, context, getEffec
         type: 3,
         element: context.reference(),
         props: dynamicArgs,
-        root: singleRoot
+        root: singleRoot,
+        tag
       },
       getEffectIndex
     );
   } else {
     for (const prop of propsResult[1]) {
       const { key, values } = prop;
-      if (key.isStatic && values.length === 1 && values[0].isStatic) {
+      if (context.imports.some(
+        (imported) => values[0].content.includes(imported.exp.content)
+      )) {
+        template += ` ${key.content}="${IMPORT_EXP_START}${values[0].content}${IMPORT_EXP_END}"`;
+      } 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}"`;
+        if (values[0].content)
+          template += `="${values[0].content === "''" ? "" : values[0].content}"`;
       } else {
         dynamicProps.push(key.content);
         context.registerEffect(
@@ -2672,7 +2941,7 @@ function transformNativeElement(node, propsResult, singleRoot, context, getEffec
     template += `</${tag}>`;
   }
   if (singleRoot) {
-    context.ir.rootTemplateIndex = context.ir.template.length;
+    context.ir.rootTemplateIndex = context.ir.template.size;
   }
   if (context.parent && context.parent.node.type === 1 && !compilerDom.isValidHTMLNesting(context.parent.node.tag, tag)) {
     context.reference();
@@ -2804,7 +3073,7 @@ function dedupeProperties(results) {
     }
     const name = prop.key.content;
     const existing = knownProps.get(name);
-    if (existing) {
+    if (existing && existing.handler === prop.handler) {
       if (name === "style" || name === "class") {
         mergePropValues(existing, prop);
       }
@@ -2846,11 +3115,11 @@ const transformVHtml = (dir, node, context) => {
   context.registerEffect([exp], {
     type: 7,
     element: context.reference(),
-    value: exp
+    value: exp,
+    isComponent: node.tagType === 1
   });
 };
 
-/*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
 function makeMap(str) {
   const map = /* @__PURE__ */ Object.create(null);
@@ -2883,15 +3152,19 @@ const transformVText = (dir, node, context) => {
     context.childrenTemplate = [String(literal)];
   } else {
     context.childrenTemplate = [" "];
-    context.registerOperation({
-      type: 17,
-      parent: context.reference()
-    });
+    const isComponent = node.tagType === 1;
+    if (!isComponent) {
+      context.registerOperation({
+        type: 17,
+        parent: context.reference()
+      });
+    }
     context.registerEffect([exp], {
       type: 4,
       element: context.reference(),
       values: [exp],
-      generated: true
+      generated: true,
+      isComponent
     });
   }
 };
@@ -2923,7 +3196,8 @@ const transformVBind = (dir, node, context) => {
     );
     exp = compilerDom.createSimpleExpression("", true, loc);
   }
-  exp = resolveExpression(exp);
+  const isComponent = node.tagType === 1;
+  exp = resolveExpression(exp, isComponent);
   arg = resolveExpression(arg);
   if (arg.isStatic && isReservedProp(arg.content)) return;
   let camel = false;
@@ -2984,7 +3258,11 @@ const transformVOn = (dir, node, context) => {
       key: arg,
       value: handler,
       handler: true,
-      handlerModifiers: eventOptionModifiers
+      handlerModifiers: {
+        keys: keyModifiers,
+        nonKeys: nonKeyModifiers,
+        options: eventOptionModifiers
+      }
     };
   }
   const delegate = arg.isStatic && !eventOptionModifiers.length && delegatedEvents(arg.content);
@@ -3022,12 +3300,21 @@ const transformVShow = (dir, node, context) => {
     );
     return;
   }
+  let shouldDeferred = false;
+  const parentNode = context.parent && context.parent.node;
+  if (parentNode && parentNode.type === 1) {
+    shouldDeferred = !!(isTransitionTag(parentNode.tag) && findProp(parentNode, "appear", false, true));
+    if (shouldDeferred) {
+      context.parent.parent.block.hasDeferredVShow = true;
+    }
+  }
   context.registerOperation({
     type: 13,
     element: context.reference(),
     dir,
     name: "show",
-    builtin: true
+    builtin: true,
+    deferred: shouldDeferred
   });
 };
 
@@ -3097,7 +3384,7 @@ const transformText = (node, context) => {
   } else if (node.type === 5) {
     processInterpolation(context);
   } else if (node.type === 2) {
-    context.template += node.content;
+    context.template += shared.escapeHtml(node.content);
   }
 };
 function processInterpolation(context) {
@@ -3116,32 +3403,20 @@ function processInterpolation(context) {
   }
   context.template += " ";
   const id = context.reference();
-  if (values.length === 0) {
+  if (values.length === 0 || values.every((v) => getLiteralExpressionValue(v) != null) && parentNode.type !== 0) {
     return;
   }
-  const nonConstantExps = values.filter((v) => !isConstantExpression(v));
-  const isStatic = !nonConstantExps.length || nonConstantExps.every(
-    (e) => isStaticExpression(e, context.options.bindingMetadata)
-  ) || context.inVOnce;
-  if (isStatic) {
-    context.registerOperation({
-      type: 4,
-      element: id,
-      values
-    });
-  } else {
-    context.registerEffect(values, {
-      type: 4,
-      element: id,
-      values
-    });
-  }
+  context.registerEffect(values, {
+    type: 4,
+    element: id,
+    values
+  });
 }
 function processTextContainer(children, context) {
   const values = processTextLikeChildren(children, context);
-  const literals = values.map(getLiteralExpressionValue);
+  const literals = values.map((value) => getLiteralExpressionValue(value));
   if (literals.every((l) => l != null)) {
-    context.childrenTemplate = literals.map((l) => String(l));
+    context.childrenTemplate = literals.map((l) => shared.escapeHtml(String(l)));
   } else {
     context.childrenTemplate = [" "];
     context.registerOperation({
@@ -3292,7 +3567,7 @@ const transformComment = (node, context) => {
     context.comment.push(node);
     context.dynamic.flags |= 2;
   } else {
-    context.template += `<!--${node.content}-->`;
+    context.template += `<!--${shared.escapeHtml(node.content)}-->`;
   }
 };
 function getSiblingIf(context, reverse) {
@@ -3346,6 +3621,7 @@ function processIf(node, dir, context) {
     };
   } else {
     const siblingIf = getSiblingIf(context, true);
+    context.dynamic.ifBranch = true;
     const siblings = context.parent && context.parent.dynamic.children;
     let lastIfNode;
     if (siblings) {
@@ -3391,7 +3667,7 @@ function processIf(node, dir, context) {
         id: -1,
         condition: dir.exp,
         positive: branch,
-        once: context.inVOnce
+        once: context.inVOnce || isStaticExpression(dir.exp, context.options.bindingMetadata)
       };
     }
     return () => onExit();
@@ -3402,6 +3678,7 @@ function createIfBranch(node, context) {
   const branch = newBlock(node);
   const exitBlock = context.enterBlock(branch);
   context.reference();
+  branch.dynamic.needsKey = isInTransition(context);
   return [branch, exitBlock];
 }
 
@@ -3426,7 +3703,8 @@ function processFor(node, dir, context) {
   const { source, value, key, index } = parseResult;
   const keyProp = findProp(node, "key");
   const keyProperty = keyProp && propToExpression(keyProp);
-  const isComponent = node.tagType === 1;
+  const isComponent = node.tagType === 1 || // template v-for with a single component child
+  isTemplateWithSingleComponent(node);
   context.node = node = wrapTemplate(node, ["for"]);
   context.dynamic.flags |= 2 | 4;
   const id = context.reference();
@@ -3455,6 +3733,13 @@ function processFor(node, dir, context) {
     };
   };
 }
+function isTemplateWithSingleComponent(node) {
+  if (node.tag !== "template") return false;
+  const nonCommentChildren = node.children.filter(
+    (c) => c.type !== 3
+  );
+  return nonCommentChildren.length === 1 && nonCommentChildren[0].type === 1 && nonCommentChildren[0].tagType === 1;
+}
 
 const transformSlotOutlet = (node, context) => {
   if (node.type !== 1 || node.tag !== "slot") {
@@ -3528,7 +3813,8 @@ const transformSlotOutlet = (node, context) => {
       id,
       name: slotName,
       props: irProps,
-      fallback
+      fallback,
+      noSlotted: !!(context.options.scopeId && !context.options.slotted)
     };
   };
 };
@@ -3590,7 +3876,22 @@ function transformComponentSlot(node, dir, context) {
       markNonTemplate(n, context);
     });
   }
-  const [block, onExit] = createSlotBlock(node, dir, context);
+  let slotKey;
+  if (isTransitionNode(node) && nonSlotTemplateChildren.length) {
+    const nonCommentChild = nonSlotTemplateChildren.find(
+      (n) => n.type !== 3
+    );
+    if (nonCommentChild) {
+      const keyProp = findProp(
+        nonCommentChild,
+        "key"
+      );
+      if (keyProp) {
+        slotKey = keyProp.exp;
+      }
+    }
+  }
+  const [block, onExit] = createSlotBlock(node, dir, context, slotKey);
   const { slots } = context;
   return () => {
     onExit();
@@ -3724,9 +4025,13 @@ function hasStaticSlot(slots, name) {
     if (slot.slotType === 0) return !!slot.slots[name];
   });
 }
-function createSlotBlock(slotNode, dir, context) {
+function createSlotBlock(slotNode, dir, context, key = void 0) {
   const block = newBlock(slotNode);
   block.props = dir && dir.exp;
+  if (key) {
+    block.key = key;
+    block.dynamic.needsKey = true;
+  }
   const exitBlock = context.enterBlock(block);
   return [block, exitBlock];
 }
@@ -3735,6 +4040,37 @@ function isNonWhitespaceContent(node) {
   return !!node.content.trim();
 }
 
+const transformTransition = (node, context) => {
+  if (node.type === 1 && node.tagType === 1) {
+    if (isTransitionTag(node.tag)) {
+      return compilerDom.postTransformTransition(
+        node,
+        context.options.onError,
+        hasMultipleChildren
+      );
+    }
+  }
+};
+function hasMultipleChildren(node) {
+  const children = node.children = node.children.filter(
+    (c) => c.type !== 3 && !(c.type === 2 && !c.content.trim())
+  );
+  const first = children[0];
+  if (children.length === 1 && first.type === 1 && (findDir(first, "for") || compilerDom.isTemplateNode(first))) {
+    return true;
+  }
+  const hasElse = (node2) => findDir(node2, "else-if") || findDir(node2, "else", true);
+  if (children.every(
+    (c, index) => c.type === 1 && // not template
+    !compilerDom.isTemplateNode(c) && // not has v-for
+    !findDir(c, "for") && // if the first child has v-if, the rest should also have v-else-if/v-else
+    (index === 0 ? findDir(c, "if") : hasElse(c)) && !hasMultipleChildren(c)
+  )) {
+    return false;
+  }
+  return children.length > 1;
+}
+
 function compile(source, options = {}) {
   const resolvedOptions = shared.extend({}, options);
   const ast = shared.isString(source) ? compilerDom.parse(source, resolvedOptions) : source;
@@ -3753,6 +4089,7 @@ function compile(source, options = {}) {
     shared.extend({}, resolvedOptions, {
       nodeTransforms: [
         ...nodeTransforms,
+        ...[transformTransition] ,
         ...options.nodeTransforms || []
         // user transforms
       ],