@vue-jsx-vapor/compiler 0.2.4 → 0.2.6

package/dist/index.js

@@ -59,47 +59,13 @@ var DynamicFlag = /* @__PURE__ */ ((DynamicFlag2) => {
 })(DynamicFlag || {});
 
 // src/transforms/utils.ts
-import { createSimpleExpression } from "@vue/compiler-dom";
+import { createSimpleExpression as createSimpleExpression2 } from "@vue/compiler-dom";
 import {
   jsxClosingFragment,
   jsxExpressionContainer,
   jsxFragment,
   jsxOpeningFragment
 } from "@babel/types";
-function newDynamic() {
-  return {
-    flags: 1 /* REFERENCED */,
-    children: []
-  };
-}
-function newBlock(node) {
-  return {
-    type: 1,
-    node,
-    dynamic: newDynamic(),
-    effect: [],
-    operation: [],
-    returns: [],
-    expressions: [],
-    tempId: 0
-  };
-}
-function createBranch(node, context, isVFor) {
-  context.node = node = wrapFragment(node);
-  const branch = newBlock(node);
-  const exitBlock = context.enterBlock(branch, isVFor);
-  context.reference();
-  return [branch, exitBlock];
-}
-function wrapFragment(node) {
-  if (node.type === "JSXFragment") {
-    return node;
-  }
-  return jsxFragment(jsxOpeningFragment(), jsxClosingFragment(), [
-    node.type === "JSXElement" ? node : jsxExpressionContainer(node)
-  ]);
-}
-var EMPTY_EXPRESSION = createSimpleExpression("", true);
 
 // src/utils.ts
 import { isGloballyAllowed, isHTMLTag, isSVGTag, isString } from "@vue/shared";
@@ -107,13 +73,14 @@ import {
   ElementTypes,
   Namespaces,
   NodeTypes,
-  createSimpleExpression as createSimpleExpression2,
+  createSimpleExpression,
   isLiteralWhitelisted,
   walkIdentifiers
 } from "@vue/compiler-dom";
 import {
   isLiteral
 } from "@babel/types";
+import { parseExpression } from "@babel/parser";
 function propToExpression(prop, context) {
   return prop.type === "JSXAttribute" && prop.value?.type === "JSXExpressionContainer" ? resolveExpression(prop.value.expression, context) : EMPTY_EXPRESSION;
 }
@@ -170,6 +137,15 @@ function resolveJSXText(node) {
 function isEmptyText(node) {
   return node.type === "JSXText" && EMPTY_TEXT_REGEX.test(`${node.extra?.raw}`) || node.type === "JSXExpressionContainer" && node.expression.type === "JSXEmptyExpression";
 }
+function resolveSimpleExpressionNode(exp) {
+  if (!exp.isStatic) {
+    const value = getLiteralExpressionValue(exp);
+    if (value !== null) {
+      return createSimpleExpression(`${value}`, true, exp.loc);
+    }
+  }
+  return exp;
+}
 function resolveExpression(node, context, effect = false) {
   node = node?.type === "JSXExpressionContainer" ? node.expression : node;
   const isStatic = !!node && (node.type === "StringLiteral" || node.type === "JSXText" || node.type === "JSXIdentifier");
@@ -197,7 +173,7 @@ function resolveExpression(node, context, effect = false) {
   return resolveSimpleExpression(source, isStatic, location, node);
 }
 function resolveSimpleExpression(source, isStatic, location, ast) {
-  const result = createSimpleExpression2(
+  const result = createSimpleExpression(
     source,
     isStatic,
     resolveLocation(location, source)
@@ -269,23 +245,54 @@ function resolveNode(node, context) {
     codegenNode: void 0
   };
 }
-function resolveDirectiveNode(node, context) {
+var namespaceRE = /^(?:\$([\w-]+)\$)?([\w-]+)?/;
+function resolveDirectiveNode(node, context, withFn = false) {
   const { value, name } = node;
-  const nameString = name.type === "JSXIdentifier" ? name.name : "";
-  const argString = name.type === "JSXNamespacedName" ? name.namespace.name : "";
-  const arg = name.type === "JSXNamespacedName" ? resolveSimpleExpression(argString, true, name.namespace.loc) : void 0;
-  const exp = value ? resolveExpression(value, context) : void 0;
-  const [tag, ...modifiers] = argString.split("_");
+  const nameString = name.type === "JSXNamespacedName" ? name.namespace.name : name.type === "JSXIdentifier" ? name.name : "";
+  let argString = name.type === "JSXNamespacedName" ? name.name.name : "";
+  if (name.type !== "JSXNamespacedName" && !argString) {
+    const [, modifiers2] = nameString.split("_");
+    argString = `_${modifiers2}`;
+  }
+  let modifiers = [];
+  let isStatic = true;
+  const result = argString.match(namespaceRE);
+  if (result) {
+    let modifierString = "";
+    [, argString, modifierString] = result;
+    if (argString) {
+      argString = argString.replaceAll("_", ".");
+      isStatic = false;
+      if (modifierString && modifierString.startsWith("_"))
+        modifiers = modifierString.slice(1).split("_");
+    } else if (modifierString) {
+      ;
+      [argString, ...modifiers] = modifierString.split("_");
+    }
+  }
+  const arg = argString && name.type === "JSXNamespacedName" ? resolveSimpleExpression(argString, isStatic, name.name.loc) : void 0;
+  const exp = value ? withFn && value.type === "JSXExpressionContainer" ? resolveExpressionWithFn(value.expression, context) : resolveExpression(value, context) : void 0;
   return {
     type: NodeTypes.DIRECTIVE,
     name: nameString,
-    rawName: `${name}:${tag}`,
+    rawName: `${nameString}:${argString}`,
     exp,
     arg,
     loc: resolveLocation(node.loc, context),
-    modifiers: modifiers.map((modifier) => createSimpleExpression2(modifier))
+    modifiers: modifiers.map((modifier) => createSimpleExpression(modifier))
   };
 }
+function resolveExpressionWithFn(node, context) {
+  const text = getText(node, context);
+  return node.type === "Identifier" ? resolveSimpleExpression(text, false, node.loc) : resolveSimpleExpression(
+    text,
+    false,
+    node.loc,
+    parseExpression(`(${text})=>{}`, {
+      plugins: ["typescript"]
+    })
+  );
+}
 function isJSXComponent(node) {
   if (node.type !== "JSXElement") return false;
   const { openingElement } = node;
@@ -299,7 +306,8 @@ function isJSXComponent(node) {
 function findProp(expression, key) {
   if (expression?.type === "JSXElement") {
     for (const attr of expression.openingElement.attributes) {
-      if (attr.type === "JSXAttribute" && attr.name.name === key) {
+      const name = attr.type === "JSXAttribute" && (attr.name.type === "JSXIdentifier" ? attr.name.name : attr.name.type === "JSXNamespacedName" ? attr.name.namespace.name : "").split("_")[0];
+      if (name && (isString(key) ? name === key : key.test(name))) {
         return attr;
       }
     }
@@ -308,6 +316,47 @@ function findProp(expression, key) {
 function getText(node, content) {
   return content.ir.source.slice(node.start, node.end);
 }
+function isTemplate(node) {
+  if (node.type === "JSXElement" && node.openingElement.name.type === "JSXIdentifier") {
+    return node.openingElement.name.name === "template";
+  }
+}
+
+// src/transforms/utils.ts
+function newDynamic() {
+  return {
+    flags: 1 /* REFERENCED */,
+    children: []
+  };
+}
+function newBlock(node) {
+  return {
+    type: 1,
+    node,
+    dynamic: newDynamic(),
+    effect: [],
+    operation: [],
+    returns: [],
+    expressions: [],
+    tempId: 0
+  };
+}
+function createBranch(node, context, isVFor) {
+  context.node = node = wrapFragment(node);
+  const branch = newBlock(node);
+  const exitBlock = context.enterBlock(branch, isVFor);
+  context.reference();
+  return [branch, exitBlock];
+}
+function wrapFragment(node) {
+  if (node.type === "JSXFragment" || isTemplate(node)) {
+    return node;
+  }
+  return jsxFragment(jsxOpeningFragment(), jsxClosingFragment(), [
+    node.type === "JSXElement" ? node : jsxExpressionContainer(node)
+  ]);
+}
+var EMPTY_EXPRESSION = createSimpleExpression2("", true);
 
 // src/transform.ts
 var defaultOptions = {
@@ -471,9 +520,9 @@ function createStructuralDirectiveTransform(name, fn) {
   return (node, context) => {
     if (node.type === "JSXElement") {
       const {
-        openingElement: { attributes, name: name2 }
+        openingElement: { attributes }
       } = node;
-      if (getText(name2, context) === "template" && findProp(node, "v-slot")) {
+      if (isTemplate(node) && findProp(node, "v-slot")) {
         return;
       }
       const exitFns = [];
@@ -507,7 +556,7 @@ var transformElement = (node, context) => {
   return function postTransformElement() {
     ;
     ({ node } = context);
-    if (node.type !== "JSXElement") return;
+    if (node.type !== "JSXElement" || isTemplate(node)) return;
     const {
       openingElement: { name }
     } = node;
@@ -518,7 +567,11 @@ var transformElement = (node, context) => {
       context,
       isComponent
     );
-    const singleRoot = context.root === context.parent && context.parent.node.children.filter((child) => !isJSXComponent(child)).length === 1;
+    let { parent } = context;
+    while (parent && parent.parent && parent.node.type === "JSXElement" && isTemplate(parent.node)) {
+      parent = parent.parent;
+    }
+    const singleRoot = context.root === parent && parent.node.children.filter((child) => !isJSXComponent(child)).length === 1;
     (isComponent ? transformComponentElement : transformNativeElement)(
       tag,
       propsResult,
@@ -653,6 +706,7 @@ function buildProps(node, context, isComponent) {
 function transformProp(prop, node, context) {
   if (prop.type === "JSXSpreadAttribute") return;
   let name = prop.name.type === "JSXIdentifier" ? prop.name.name : prop.name.type === "JSXNamespacedName" ? prop.name.namespace.name : "";
+  name = name.split("_")[0];
   if (!isDirectiveRegex.test(name) && (!prop.value || prop.value.type === "StringLiteral")) {
     if (isReservedProp(name)) return;
     return {
@@ -709,7 +763,7 @@ function mergePropValues(existing, incoming) {
 
 // src/transforms/transformChildren.ts
 var transformChildren = (node, context) => {
-  const isFragment = node.type === 0 /* ROOT */ || node.type === "JSXFragment" || isJSXComponent(node);
+  const isFragment = node.type === 0 /* ROOT */ || node.type === "JSXFragment" || node.type === "JSXElement" && (isTemplate(node) || isJSXComponent(node));
   if (node.type !== "JSXElement" && !isFragment) return;
   for (const [i, child] of node.children.entries()) {
     const childContext = context.create(child, i);
@@ -868,7 +922,7 @@ var transformText = (node, context) => {
     context.dynamic.flags |= 2 /* NON_TEMPLATE */;
     return;
   }
-  if (node.type === "JSXElement" && !isJSXComponent(node) && isAllTextLike(node.children)) {
+  if (node.type === "JSXElement" && !isTemplate(node) && !isJSXComponent(node) && isAllTextLike(node.children)) {
     processTextLikeContainer(
       node.children,
       context
@@ -894,11 +948,13 @@ function processTextLike(context) {
   const nexts = context.parent.node.children?.slice(context.index);
   const idx = nexts.findIndex((n) => !isTextLike(n));
   const nodes = idx > -1 ? nexts.slice(0, idx) : nexts;
+  const id = context.reference();
+  const values = createTextLikeExpressions(nodes, context);
   context.dynamic.flags |= 4 /* INSERT */ | 2 /* NON_TEMPLATE */;
   context.registerOperation({
     type: 11 /* CREATE_TEXT_NODE */,
-    id: context.reference(),
-    values: createTextLikeExpressions(nodes, context),
+    id,
+    values,
     jsx: true
   });
 }
@@ -921,7 +977,7 @@ function createTextLikeExpressions(nodes, context) {
   for (const node of nodes) {
     seen.get(context.root).add(node);
     if (isEmptyText(node)) continue;
-    values.push(resolveExpression(node, context, true));
+    values.push(resolveExpression(node, context, !context.inVOnce));
   }
   return values;
 }
@@ -1037,42 +1093,211 @@ var transformVOn = (dir, node, context) => {
 };
 
 // src/transforms/vSlot.ts
-var transformVSlot = (node, context) => {
-  if (node.type !== "JSXElement") return;
-  if (!isJSXComponent(node)) return;
-  const { openingElement, children } = node;
-  const vSlotsIndex = openingElement.attributes.findIndex(
-    (attr) => attr.type === "JSXAttribute" && ["v-slots", "vSlots"].includes(attr.name.name.toString())
-  );
-  const vSlotsDir = openingElement.attributes[vSlotsIndex];
-  if (vSlotsDir && vSlotsDir.value?.type === "JSXExpressionContainer") {
-    node.openingElement.attributes.splice(vSlotsIndex, 1);
-    context.slots = [
-      {
-        slotType: 4 /* EXPRESSION */,
-        slots: resolveExpression(vSlotsDir.value.expression, context)
+import {
+  ErrorCodes as ErrorCodes3,
+  createCompilerError as createCompilerError3
+} from "@vue/compiler-dom";
+
+// src/transforms/vFor.ts
+import {
+  ErrorCodes as ErrorCodes2,
+  createCompilerError as createCompilerError2,
+  isConstantNode
+} from "@vue/compiler-dom";
+var transformVFor = createStructuralDirectiveTransform(
+  "for",
+  processFor
+);
+function processFor(node, dir, context) {
+  const { value, index, key, source } = getForParseResult(dir, context);
+  if (!source) {
+    context.options.onError(
+      createCompilerError2(
+        ErrorCodes2.X_V_FOR_MALFORMED_EXPRESSION,
+        resolveLocation(dir.loc, context)
+      )
+    );
+    return;
+  }
+  const keyProp = findProp(node, "key");
+  const keyProperty = keyProp && propToExpression(keyProp, context);
+  const isComponent = isJSXComponent(node);
+  const id = context.reference();
+  context.dynamic.flags |= 2 /* NON_TEMPLATE */ | 4 /* INSERT */;
+  const [render, exitBlock] = createBranch(node, context, true);
+  return () => {
+    exitBlock();
+    const { parent } = context;
+    const isOnlyChild = parent && parent.block.node !== parent.node && parent.node.children.length === 1;
+    context.registerOperation({
+      type: 17 /* FOR */,
+      id,
+      source,
+      value,
+      key,
+      index,
+      keyProp: keyProperty,
+      render,
+      once: context.inVOnce || !!(source.ast && isConstantNode(source.ast, {})),
+      component: isComponent,
+      onlyChild: !!isOnlyChild
+    });
+  };
+}
+function getForParseResult(dir, context) {
+  let value, index, key, source;
+  if (dir.value) {
+    if (dir.value.type === "JSXExpressionContainer" && dir.value.expression.type === "BinaryExpression") {
+      if (dir.value.expression.left.type === "SequenceExpression") {
+        const expressions = dir.value.expression.left.expressions;
+        value = expressions[0] && resolveExpressionWithFn(expressions[0], context);
+        key = expressions[1] && resolveExpression(expressions[1], context);
+        index = expressions[2] && resolveExpression(expressions[2], context);
+      } else {
+        value = resolveExpressionWithFn(dir.value.expression.left, context);
       }
-    ];
+      source = resolveExpression(dir.value.expression.right, context);
+    }
+  } else {
+    context.options.onError(
+      createCompilerError2(
+        ErrorCodes2.X_V_FOR_NO_EXPRESSION,
+        resolveLocation(dir.loc, context)
+      )
+    );
   }
-  if (children.length) {
-    return transformComponentSlot(node, context);
+  return {
+    value,
+    index,
+    key,
+    source
+  };
+}
+
+// src/transforms/vSlot.ts
+var transformVSlot = (node, context) => {
+  if (node.type !== "JSXElement") return;
+  const { children } = node;
+  const dir = findProp(node, "v-slot");
+  const resolvedDirective = dir ? resolveDirectiveNode(dir, context, true) : void 0;
+  const { parent } = context;
+  const isComponent = isJSXComponent(node);
+  const isSlotTemplate = isTemplate(node) && parent && parent.node.type === "JSXElement" && isJSXComponent(parent.node);
+  if (isComponent && children.length) {
+    return transformComponentSlot(node, resolvedDirective, context);
+  } else if (isSlotTemplate && resolvedDirective) {
+    return transformTemplateSlot(node, resolvedDirective, context);
+  } else if (!isComponent && dir) {
+    context.options.onError(
+      createCompilerError3(
+        ErrorCodes3.X_V_SLOT_MISPLACED,
+        resolveLocation(dir.loc, context)
+      )
+    );
   }
 };
-function transformComponentSlot(node, context) {
+function transformComponentSlot(node, dir, context) {
   const { children } = node;
-  const nonWhitespaceChildren = children.filter(
-    () => isNonWhitespaceContent(node)
+  const arg = dir && dir.arg;
+  const nonSlotTemplateChildren = children.filter(
+    (n) => isNonWhitespaceContent(n) && !(n.type === "JSXElement" && findProp(n, "v-slot"))
   );
-  const [block, onExit] = createSlotBlock(node, context);
+  const [block, onExit] = createSlotBlock(node, dir, context);
   const { slots } = context;
   return () => {
     onExit();
-    if (nonWhitespaceChildren.length) {
-      registerSlot(slots, block);
+    const hasOtherSlots = !!slots.length;
+    if (dir && hasOtherSlots) {
+      context.options.onError(
+        createCompilerError3(ErrorCodes3.X_V_SLOT_MIXED_SLOT_USAGE, dir.loc)
+      );
+      return;
+    }
+    if (nonSlotTemplateChildren.length) {
+      if (hasStaticSlot(slots, "default")) {
+        context.options.onError(
+          createCompilerError3(
+            ErrorCodes3.X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN,
+            resolveLocation(nonSlotTemplateChildren[0].loc, context)
+          )
+        );
+      } else {
+        registerSlot(slots, arg, block);
+        context.slots = slots;
+      }
+    } else if (hasOtherSlots) {
       context.slots = slots;
     }
   };
 }
+var elseIfRE = /^else(-if)?$/;
+function transformTemplateSlot(node, dir, context) {
+  context.dynamic.flags |= 2 /* NON_TEMPLATE */;
+  const arg = dir.arg && resolveSimpleExpressionNode(dir.arg);
+  const vFor = findProp(node, "v-for");
+  const vIf = findProp(node, "v-if");
+  const vElse = findProp(node, elseIfRE);
+  const { slots } = context;
+  const [block, onExit] = createSlotBlock(node, dir, context);
+  if (!vFor && !vIf && !vElse) {
+    const slotName = arg ? arg.isStatic && arg.content : "default";
+    if (slotName && hasStaticSlot(slots, slotName)) {
+      context.options.onError(
+        createCompilerError3(ErrorCodes3.X_V_SLOT_DUPLICATE_SLOT_NAMES, dir.loc)
+      );
+    } else {
+      registerSlot(slots, arg, block);
+    }
+  } else if (vIf) {
+    const vIfDir = resolveDirectiveNode(vIf, context);
+    registerDynamicSlot(slots, {
+      slotType: 3 /* CONDITIONAL */,
+      condition: vIfDir.exp,
+      positive: {
+        slotType: 1 /* DYNAMIC */,
+        name: arg,
+        fn: block
+      }
+    });
+  } else if (vElse) {
+    const vElseDir = resolveDirectiveNode(vElse, context);
+    const vIfSlot = slots.at(-1);
+    if (vIfSlot.slotType === 3 /* CONDITIONAL */) {
+      let ifNode = vIfSlot;
+      while (ifNode.negative && ifNode.negative.slotType === 3 /* CONDITIONAL */)
+        ifNode = ifNode.negative;
+      const negative = vElseDir.exp ? {
+        slotType: 3 /* CONDITIONAL */,
+        condition: vElseDir.exp,
+        positive: {
+          slotType: 1 /* DYNAMIC */,
+          name: arg,
+          fn: block
+        }
+      } : {
+        slotType: 1 /* DYNAMIC */,
+        name: arg,
+        fn: block
+      };
+      ifNode.negative = negative;
+    } else {
+      context.options.onError(
+        createCompilerError3(ErrorCodes3.X_V_ELSE_NO_ADJACENT_IF, vElseDir.loc)
+      );
+    }
+  } else if (vFor) {
+    const forParseResult = getForParseResult(vFor, context);
+    if (forParseResult.source) {
+      registerDynamicSlot(slots, {
+        slotType: 2 /* LOOP */,
+        name: arg,
+        fn: block,
+        loop: forParseResult
+      });
+    }
+  }
+  return onExit;
+}
 function ensureStaticSlots(slots) {
   let lastSlots = slots.at(-1);
   if (!slots.length || lastSlots.slotType !== 0 /* STATIC */) {
@@ -1083,14 +1308,32 @@ function ensureStaticSlots(slots) {
       }
     );
   }
-  return lastSlots;
+  return lastSlots.slots;
+}
+function registerSlot(slots, name, block) {
+  const isStatic = !name || name.isStatic;
+  if (isStatic) {
+    const staticSlots = ensureStaticSlots(slots);
+    staticSlots[name ? name.content : "default"] = block;
+  } else {
+    slots.push({
+      slotType: 1 /* DYNAMIC */,
+      name,
+      fn: block
+    });
+  }
 }
-function registerSlot(slots, block) {
-  const staticSlots = ensureStaticSlots(slots);
-  staticSlots.slots.default = block;
+function registerDynamicSlot(allSlots, dynamic) {
+  allSlots.push(dynamic);
+}
+function hasStaticSlot(slots, name) {
+  return slots.some(
+    (slot) => slot.slotType === 0 /* STATIC */ ? !!slot.slots[name] : false
+  );
 }
-function createSlotBlock(slotNode, context) {
+function createSlotBlock(slotNode, dir, context) {
   const block = newBlock(slotNode);
+  block.props = dir && dir.exp;
   const exitBlock = context.enterBlock(block);
   return [block, exitBlock];
 }
@@ -1099,6 +1342,37 @@ function isNonWhitespaceContent(node) {
   return !!node.value.trim();
 }
 
+// src/transforms/vSlots.ts
+import { ErrorCodes as ErrorCodes4, createCompilerError as createCompilerError4 } from "@vue/compiler-dom";
+var transformVSlots = (node, context) => {
+  if (node.type !== "JSXElement" || !isJSXComponent(node)) return;
+  const {
+    openingElement: { attributes },
+    children
+  } = node;
+  const vSlotsIndex = attributes.findIndex(
+    (attr) => attr.type === "JSXAttribute" && attr.name.name.toString() === "v-slots"
+  );
+  const vSlotsDir = attributes[vSlotsIndex];
+  if (vSlotsDir && vSlotsDir.value?.type === "JSXExpressionContainer") {
+    attributes.splice(vSlotsIndex, 1);
+    context.slots = [
+      {
+        slotType: 4 /* EXPRESSION */,
+        slots: resolveExpression(vSlotsDir.value.expression, context)
+      }
+    ];
+    if (children.length) {
+      context.options.onError(
+        createCompilerError4(
+          ErrorCodes4.X_V_SLOT_MIXED_SLOT_USAGE,
+          resolveLocation(children[0].loc, context)
+        )
+      );
+    }
+  }
+};
+
 // src/transforms/vModel.ts
 import { transformVModel as _transformVModel } from "@vue/compiler-vapor";
 var transformVModel = (dir, node, context) => {
@@ -1129,85 +1403,15 @@ var transformVHtml = (dir, node, context) => {
   );
 };
 
-// src/transforms/vFor.ts
-import {
-  ErrorCodes as ErrorCodes2,
-  createCompilerError as createCompilerError2,
-  forAliasRE,
-  isConstantNode
-} from "@vue/compiler-dom";
-import { parseExpression } from "@babel/parser";
-var transformVFor = createStructuralDirectiveTransform(
-  "for",
-  processFor
-);
-function processFor(node, dir, context) {
-  if (!dir.value) {
-    context.options.onError(
-      createCompilerError2(
-        ErrorCodes2.X_V_FOR_NO_EXPRESSION,
-        resolveLocation(dir.loc, context)
-      )
-    );
-    return;
+// src/transforms/vOnce.ts
+var transformVOnce = (node, context) => {
+  if (
+    // !context.inSSR &&
+    node.type === "JSXElement" && findProp(node, "v-once")
+  ) {
+    context.inVOnce = true;
   }
-  if (!forAliasRE) {
-    context.options.onError(
-      createCompilerError2(
-        ErrorCodes2.X_V_FOR_MALFORMED_EXPRESSION,
-        resolveLocation(dir.loc, context)
-      )
-    );
-    return;
-  }
-  let value, index, key, source;
-  if (dir.value.type === "JSXExpressionContainer" && dir.value.expression.type === "BinaryExpression") {
-    if (dir.value.expression.left.type === "SequenceExpression") {
-      const expressions = dir.value.expression.left.expressions;
-      value = expressions[0] && resolveValueExpression(expressions[0], context);
-      key = expressions[1] && resolveExpression(expressions[1], context);
-      index = expressions[2] && resolveExpression(expressions[2], context);
-    } else {
-      value = resolveValueExpression(dir.value.expression.left, context);
-    }
-    source = resolveExpression(dir.value.expression.right, context);
-  }
-  const keyProp = findProp(node, "key");
-  const keyProperty = keyProp && propToExpression(keyProp, context);
-  const isComponent = isJSXComponent(node);
-  const id = context.reference();
-  context.dynamic.flags |= 2 /* NON_TEMPLATE */ | 4 /* INSERT */;
-  const [render, exitBlock] = createBranch(node, context, true);
-  return () => {
-    exitBlock();
-    const { parent } = context;
-    const isOnlyChild = parent && parent.block.node !== parent.node && parent.node.children.length === 1;
-    context.registerOperation({
-      type: 17 /* FOR */,
-      id,
-      source,
-      value,
-      key,
-      index,
-      keyProp: keyProperty,
-      render,
-      once: context.inVOnce || !!(source.ast && isConstantNode(source.ast, {})),
-      component: isComponent,
-      onlyChild: !!isOnlyChild
-    });
-  };
-}
-function resolveValueExpression(node, context) {
-  const text = getText(node, context);
-  return node.type === "Identifier" ? resolveSimpleExpression(text, false, node.loc) : resolveSimpleExpression(
-    text,
-    false,
-    node.loc,
-    parseExpression(`(${text})=>{}`, {
-      plugins: ["typescript"]
-    })
-  );
-}
+};
 
 // src/compile.ts
 function compile(source, options = {}) {
@@ -1260,10 +1464,12 @@ function compile(source, options = {}) {
 function getBaseTransformPreset() {
   return [
     [
+      transformVOnce,
       transformVFor,
       transformTemplateRef,
       transformText,
       transformElement,
+      transformVSlots,
       transformVSlot,
       transformChildren
     ],
@@ -1299,5 +1505,6 @@ export {
   transformVModel,
   transformVOn,
   transformVShow,
-  transformVSlot
+  transformVSlot,
+  transformVSlots
 };