@vue-jsx-vapor/compiler 0.2.2 → 0.2.4

package/dist/index.cjs

@@ -3,6 +3,7 @@ var _shared = require('@vue/shared');
 
 
 var _compilervapor = require('@vue/compiler-vapor');
+var _parser = require('@babel/parser');
 
 // src/transform.ts
 
@@ -64,10 +65,41 @@ var DynamicFlag = /* @__PURE__ */ ((DynamicFlag2) => {
 
 
 
-
-
-
 var _types = require('@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 _types.jsxFragment.call(void 0, _types.jsxOpeningFragment.call(void 0, ), _types.jsxClosingFragment.call(void 0, ), [
+    node.type === "JSXElement" ? node : _types.jsxExpressionContainer.call(void 0, node)
+  ]);
+}
+var EMPTY_EXPRESSION = _compilerdom.createSimpleExpression.call(void 0, "", true);
 
 // src/utils.ts
 
@@ -82,6 +114,9 @@ var _types = require('@babel/types');
 
 
 
+function propToExpression(prop, context) {
+  return prop.type === "JSXAttribute" && _optionalChain([prop, 'access', _2 => _2.value, 'optionalAccess', _3 => _3.type]) === "JSXExpressionContainer" ? resolveExpression(prop.value.expression, context) : EMPTY_EXPRESSION;
+}
 function isConstantExpression(exp) {
   return _compilerdom.isLiteralWhitelisted.call(void 0, exp.content) || _shared.isGloballyAllowed.call(void 0, exp.content) || getLiteralExpressionValue(exp) !== null;
 }
@@ -120,7 +155,7 @@ var EMPTY_TEXT_REGEX = /^\s*[\n\r]\s*$/;
 var START_EMPTY_TEXT_REGEX = /^\s*[\n\r]/;
 var END_EMPTY_TEXT_REGEX = /[\n\r]\s*$/;
 function resolveJSXText(node) {
-  if (EMPTY_TEXT_REGEX.test(`${_optionalChain([node, 'access', _2 => _2.extra, 'optionalAccess', _3 => _3.raw])}`)) {
+  if (EMPTY_TEXT_REGEX.test(`${_optionalChain([node, 'access', _4 => _4.extra, 'optionalAccess', _5 => _5.raw])}`)) {
     return "";
   }
   let value = node.value;
@@ -133,10 +168,10 @@ function resolveJSXText(node) {
   return value;
 }
 function isEmptyText(node) {
-  return node.type === "JSXText" && EMPTY_TEXT_REGEX.test(`${_optionalChain([node, 'access', _4 => _4.extra, 'optionalAccess', _5 => _5.raw])}`) || node.type === "JSXExpressionContainer" && node.expression.type === "JSXEmptyExpression";
+  return node.type === "JSXText" && EMPTY_TEXT_REGEX.test(`${_optionalChain([node, 'access', _6 => _6.extra, 'optionalAccess', _7 => _7.raw])}`) || node.type === "JSXExpressionContainer" && node.expression.type === "JSXEmptyExpression";
 }
 function resolveExpression(node, context, effect = false) {
-  node = _optionalChain([node, 'optionalAccess', _6 => _6.type]) === "JSXExpressionContainer" ? node.expression : node;
+  node = _optionalChain([node, 'optionalAccess', _8 => _8.type]) === "JSXExpressionContainer" ? node.expression : node;
   const isStatic = !!node && (node.type === "StringLiteral" || node.type === "JSXText" || node.type === "JSXIdentifier");
   let source = !node || node.type === "JSXEmptyExpression" ? "" : node.type === "JSXIdentifier" ? node.name : node.type === "StringLiteral" ? node.value : node.type === "JSXText" ? resolveJSXText(node) : node.type === "Identifier" ? node.name : context.ir.source.slice(node.start, node.end);
   const location = node ? node.loc : null;
@@ -262,7 +297,7 @@ function isJSXComponent(node) {
   }
 }
 function findProp(expression, key) {
-  if (_optionalChain([expression, 'optionalAccess', _7 => _7.type]) === "JSXElement") {
+  if (_optionalChain([expression, 'optionalAccess', _9 => _9.type]) === "JSXElement") {
     for (const attr of expression.openingElement.attributes) {
       if (attr.type === "JSXAttribute" && attr.name.name === key) {
         return attr;
@@ -270,62 +305,10 @@ function findProp(expression, key) {
     }
   }
 }
-function isJSXElement(node) {
-  return !!node && (node.type === "JSXElement" || node.type === "JSXFragment");
+function getText(node, content) {
+  return content.ir.source.slice(node.start, node.end);
 }
 
-// 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, isVFor);
-  const branch = newBlock(node);
-  const exitBlock = context.enterBlock(branch, isVFor);
-  context.reference();
-  return [branch, exitBlock];
-}
-function wrapFragment(node, isVFor) {
-  if (node.type === "JSXFragment") {
-    return node;
-  }
-  if (isVFor && (node.type === "ArrowFunctionExpression" || node.type === "FunctionExpression")) {
-    if (isJSXElement(node.body)) {
-      node = node.body;
-    } else if (node.body.type === "BlockStatement" && node.body.body[0].type === "ReturnStatement" && node.body.body[0].argument) {
-      node = node.body.body[0].argument;
-    } else {
-      node = {
-        ..._types.callExpression.call(void 0, 
-          _types.parenthesizedExpression.call(void 0, _types.arrowFunctionExpression.call(void 0, [], node.body)),
-          []
-        ),
-        start: node.body.start,
-        end: node.body.end
-      };
-    }
-  }
-  return _types.jsxFragment.call(void 0, _types.jsxOpeningFragment.call(void 0, ), _types.jsxClosingFragment.call(void 0, ), [
-    node.type === "JSXElement" ? node : _types.jsxExpressionContainer.call(void 0, node)
-  ]);
-}
-var EMPTY_EXPRESSION = _compilerdom.createSimpleExpression.call(void 0, "", true);
-
 // src/transform.ts
 var defaultOptions = {
   filename: "",
@@ -483,6 +466,31 @@ function transformNode(context) {
     context.registerTemplate();
   }
 }
+function createStructuralDirectiveTransform(name, fn) {
+  const matches = (n) => _shared.isString.call(void 0, name) ? n === name : name.includes(n);
+  return (node, context) => {
+    if (node.type === "JSXElement") {
+      const {
+        openingElement: { attributes, name: name2 }
+      } = node;
+      if (getText(name2, context) === "template" && findProp(node, "v-slot")) {
+        return;
+      }
+      const exitFns = [];
+      for (const prop of attributes) {
+        if (prop.type !== "JSXAttribute") continue;
+        const propName = getText(prop.name, context);
+        if (propName.startsWith("v-") && matches(propName.slice(2))) {
+          attributes.splice(attributes.indexOf(prop), 1);
+          const onExit = fn(node, prop, context);
+          if (onExit) exitFns.push(onExit);
+          break;
+        }
+      }
+      return exitFns;
+    }
+  };
+}
 
 // src/transforms/transformElement.ts
 
@@ -770,7 +778,7 @@ function processDynamicChildren(context) {
 var transformTemplateRef = (node, context) => {
   if (node.type !== "JSXElement") return;
   const dir = findProp(node, "ref");
-  if (!_optionalChain([dir, 'optionalAccess', _8 => _8.value])) return;
+  if (!_optionalChain([dir, 'optionalAccess', _10 => _10.value])) return;
   context.ir.hasTemplateRef = true;
   const value = resolveExpression(dir.value, context);
   return () => {
@@ -883,7 +891,7 @@ var transformText = (node, context) => {
   }
 };
 function processTextLike(context) {
-  const nexts = _optionalChain([context, 'access', _9 => _9.parent, 'access', _10 => _10.node, 'access', _11 => _11.children, 'optionalAccess', _12 => _12.slice, 'call', _13 => _13(context.index)]);
+  const nexts = _optionalChain([context, 'access', _11 => _11.parent, 'access', _12 => _12.node, 'access', _13 => _13.children, 'optionalAccess', _14 => _14.slice, 'call', _15 => _15(context.index)]);
   const idx = nexts.findIndex((n) => !isTextLike(n));
   const nodes = idx > -1 ? nexts.slice(0, idx) : nexts;
   context.dynamic.flags |= 4 /* INSERT */ | 2 /* NON_TEMPLATE */;
@@ -1037,7 +1045,7 @@ var transformVSlot = (node, context) => {
     (attr) => attr.type === "JSXAttribute" && ["v-slots", "vSlots"].includes(attr.name.name.toString())
   );
   const vSlotsDir = openingElement.attributes[vSlotsIndex];
-  if (vSlotsDir && _optionalChain([vSlotsDir, 'access', _14 => _14.value, 'optionalAccess', _15 => _15.type]) === "JSXExpressionContainer") {
+  if (vSlotsDir && _optionalChain([vSlotsDir, 'access', _16 => _16.value, 'optionalAccess', _17 => _17.type]) === "JSXExpressionContainer") {
     node.openingElement.attributes.splice(vSlotsIndex, 1);
     context.slots = [
       {
@@ -1121,14 +1129,97 @@ var transformVHtml = (dir, node, context) => {
   );
 };
 
+// src/transforms/vFor.ts
+
+
+
+
+
+
+
+var transformVFor = createStructuralDirectiveTransform(
+  "for",
+  processFor
+);
+function processFor(node, dir, context) {
+  if (!dir.value) {
+    context.options.onError(
+      _compilerdom.createCompilerError.call(void 0, 
+        _compilerdom.ErrorCodes.X_V_FOR_NO_EXPRESSION,
+        resolveLocation(dir.loc, context)
+      )
+    );
+    return;
+  }
+  if (!_compilerdom.forAliasRE) {
+    context.options.onError(
+      _compilerdom.createCompilerError.call(void 0, 
+        _compilerdom.ErrorCodes.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 && _compilerdom.isConstantNode.call(void 0, 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,
+    _parser.parseExpression.call(void 0, `(${text})=>{}`, {
+      plugins: ["typescript"]
+    })
+  );
+}
+
 // src/compile.ts
-function compile(root, options = {}) {
+function compile(source, options = {}) {
   const resolvedOptions = _shared.extend.call(void 0, {}, options, {
     inline: true,
     prefixIdentifiers: false,
     expressionPlugins: options.expressionPlugins || ["jsx"]
   });
-  if (options.isTS) {
+  if (!resolvedOptions.source && _shared.isString.call(void 0, source)) {
+    resolvedOptions.source = source;
+  }
+  if (resolvedOptions.isTS) {
     const { expressionPlugins } = resolvedOptions;
     if (!expressionPlugins.includes("typescript")) {
       resolvedOptions.expressionPlugins = [
@@ -1137,11 +1228,15 @@ function compile(root, options = {}) {
       ];
     }
   }
+  const root = _shared.isString.call(void 0, source) ? _parser.parse.call(void 0, source, {
+    sourceType: "module",
+    plugins: resolvedOptions.expressionPlugins
+  }).program.body[0].expression : source;
   const children = root.type === "JSXFragment" ? root.children : root.type === "JSXElement" ? [root] : [];
   const ast = {
     type: 0 /* ROOT */,
     children,
-    source: options.source || ""
+    source: resolvedOptions.source || ""
   };
   const [nodeTransforms, directiveTransforms] = getBaseTransformPreset();
   const ir = transform(
@@ -1149,13 +1244,13 @@ function compile(root, options = {}) {
     _shared.extend.call(void 0, {}, resolvedOptions, {
       nodeTransforms: [
         ...nodeTransforms,
-        ...options.nodeTransforms || []
+        ...resolvedOptions.nodeTransforms || []
         // user transforms
       ],
       directiveTransforms: _shared.extend.call(void 0, 
         {},
         directiveTransforms,
-        options.directiveTransforms || {}
+        resolvedOptions.directiveTransforms || {}
         // user transforms
       )
     })
@@ -1165,6 +1260,7 @@ function compile(root, options = {}) {
 function getBaseTransformPreset() {
   return [
     [
+      transformVFor,
       transformTemplateRef,
       transformText,
       transformElement,
@@ -1202,4 +1298,6 @@ function getBaseTransformPreset() {
 
 
 
-exports.DynamicFlag = DynamicFlag; exports.IRDynamicPropsKind = IRDynamicPropsKind; exports.IRNodeTypes = IRNodeTypes; exports.IRSlotType = IRSlotType; exports.TransformContext = TransformContext; exports.compile = compile; exports.generate = _compilervapor.generate; exports.resolveDirectiveNode = resolveDirectiveNode; exports.resolveNode = resolveNode; exports.transform = transform; exports.transformChildren = transformChildren; exports.transformElement = transformElement; exports.transformNode = transformNode; exports.transformTemplateRef = transformTemplateRef; exports.transformText = transformText; exports.transformVBind = transformVBind; exports.transformVHtml = transformVHtml; exports.transformVModel = transformVModel; exports.transformVOn = transformVOn; exports.transformVShow = transformVShow; exports.transformVSlot = transformVSlot;
+
+
+exports.DynamicFlag = DynamicFlag; exports.IRDynamicPropsKind = IRDynamicPropsKind; exports.IRNodeTypes = IRNodeTypes; exports.IRSlotType = IRSlotType; exports.TransformContext = TransformContext; exports.compile = compile; exports.createStructuralDirectiveTransform = createStructuralDirectiveTransform; exports.generate = _compilervapor.generate; exports.resolveDirectiveNode = resolveDirectiveNode; exports.resolveNode = resolveNode; exports.transform = transform; exports.transformChildren = transformChildren; exports.transformElement = transformElement; exports.transformNode = transformNode; exports.transformTemplateRef = transformTemplateRef; exports.transformText = transformText; exports.transformVBind = transformVBind; exports.transformVFor = transformVFor; exports.transformVHtml = transformVHtml; exports.transformVModel = transformVModel; exports.transformVOn = transformVOn; exports.transformVShow = transformVShow; exports.transformVSlot = transformVSlot;

package/dist/index.d.cts

@@ -287,6 +287,7 @@ interface DirectiveTransformResult {
     model?: boolean;
     modelModifiers?: string[];
 }
+type StructuralDirectiveTransform = (node: JSXElement, dir: JSXAttribute, context: TransformContext) => void | (() => void);
 type TransformOptions = HackOptions<TransformOptions$1>;
 declare class TransformContext<T extends BlockIRNode['node'] = BlockIRNode['node']> {
     ir: RootIRNode;
@@ -318,11 +319,12 @@ declare class TransformContext<T extends BlockIRNode['node'] = BlockIRNode['node
 }
 declare function transform(node: RootNode, options?: TransformOptions): RootIRNode;
 declare function transformNode(context: TransformContext<BlockIRNode['node']>): void;
+declare function createStructuralDirectiveTransform(name: string | string[], fn: StructuralDirectiveTransform): NodeTransform;
 
 interface VaporCodegenResult extends Omit<VaporCodegenResult$1, 'ast'> {
     ast: RootIRNode;
 }
-declare function compile(root: JSXElement | JSXFragment, options?: CompilerOptions): VaporCodegenResult;
+declare function compile(source: JSXElement | JSXFragment | string, options?: CompilerOptions): VaporCodegenResult;
 type CompilerOptions = HackOptions<CompilerOptions$1> & {
     source?: string;
 };
@@ -354,4 +356,6 @@ declare const transformVShow: DirectiveTransform;
 
 declare const transformVHtml: DirectiveTransform;
 
-export { type BaseIRNode, type BlockIRNode, type CompilerOptions, type CreateComponentIRNode, type CreateTextNodeIRNode, type DeclareOldRefIRNode, type DirectiveIRNode, type DirectiveTransform, type DirectiveTransformResult, DynamicFlag, type ForIRNode, type GetTextChildIRNode, type HackOptions, type IRDynamicInfo, IRDynamicPropsKind, type IREffect, type IRFor, type IRNode, IRNodeTypes, type IRProp, type IRProps, type IRPropsDynamicAttribute, type IRPropsDynamicExpression, type IRPropsStatic, type IRSlotDynamic, type IRSlotDynamicBasic, type IRSlotDynamicConditional, type IRSlotDynamicLoop, IRSlotType, type IRSlots, type IRSlotsExpression, type IRSlotsStatic, type IfIRNode, type InsertNodeIRNode, type KeyOverride, type NodeTransform, type OperationNode, type PrependNodeIRNode, type RootIRNode, type RootNode, type SetDynamicEventsIRNode, type SetDynamicPropsIRNode, type SetEventIRNode, type SetHtmlIRNode, type SetPropIRNode, type SetTemplateRefIRNode, type SetTextIRNode, type SlotBlockIRNode, type SlotOutletIRNode, TransformContext, type TransformOptions, type TransformPreset, type VaporDirectiveNode, compile, resolveDirectiveNode, resolveNode, transform, transformChildren, transformElement, transformNode, transformTemplateRef, transformText, transformVBind, transformVHtml, transformVModel, transformVOn, transformVShow, transformVSlot };
+declare const transformVFor: NodeTransform;
+
+export { type BaseIRNode, type BlockIRNode, type CompilerOptions, type CreateComponentIRNode, type CreateTextNodeIRNode, type DeclareOldRefIRNode, type DirectiveIRNode, type DirectiveTransform, type DirectiveTransformResult, DynamicFlag, type ForIRNode, type GetTextChildIRNode, type HackOptions, type IRDynamicInfo, IRDynamicPropsKind, type IREffect, type IRFor, type IRNode, IRNodeTypes, type IRProp, type IRProps, type IRPropsDynamicAttribute, type IRPropsDynamicExpression, type IRPropsStatic, type IRSlotDynamic, type IRSlotDynamicBasic, type IRSlotDynamicConditional, type IRSlotDynamicLoop, IRSlotType, type IRSlots, type IRSlotsExpression, type IRSlotsStatic, type IfIRNode, type InsertNodeIRNode, type KeyOverride, type NodeTransform, type OperationNode, type PrependNodeIRNode, type RootIRNode, type RootNode, type SetDynamicEventsIRNode, type SetDynamicPropsIRNode, type SetEventIRNode, type SetHtmlIRNode, type SetPropIRNode, type SetTemplateRefIRNode, type SetTextIRNode, type SlotBlockIRNode, type SlotOutletIRNode, type StructuralDirectiveTransform, TransformContext, type TransformOptions, type TransformPreset, type VaporDirectiveNode, compile, createStructuralDirectiveTransform, resolveDirectiveNode, resolveNode, transform, transformChildren, transformElement, transformNode, transformTemplateRef, transformText, transformVBind, transformVFor, transformVHtml, transformVModel, transformVOn, transformVShow, transformVSlot };

package/dist/index.d.ts

@@ -287,6 +287,7 @@ interface DirectiveTransformResult {
     model?: boolean;
     modelModifiers?: string[];
 }
+type StructuralDirectiveTransform = (node: JSXElement, dir: JSXAttribute, context: TransformContext) => void | (() => void);
 type TransformOptions = HackOptions<TransformOptions$1>;
 declare class TransformContext<T extends BlockIRNode['node'] = BlockIRNode['node']> {
     ir: RootIRNode;
@@ -318,11 +319,12 @@ declare class TransformContext<T extends BlockIRNode['node'] = BlockIRNode['node
 }
 declare function transform(node: RootNode, options?: TransformOptions): RootIRNode;
 declare function transformNode(context: TransformContext<BlockIRNode['node']>): void;
+declare function createStructuralDirectiveTransform(name: string | string[], fn: StructuralDirectiveTransform): NodeTransform;
 
 interface VaporCodegenResult extends Omit<VaporCodegenResult$1, 'ast'> {
     ast: RootIRNode;
 }
-declare function compile(root: JSXElement | JSXFragment, options?: CompilerOptions): VaporCodegenResult;
+declare function compile(source: JSXElement | JSXFragment | string, options?: CompilerOptions): VaporCodegenResult;
 type CompilerOptions = HackOptions<CompilerOptions$1> & {
     source?: string;
 };
@@ -354,4 +356,6 @@ declare const transformVShow: DirectiveTransform;
 
 declare const transformVHtml: DirectiveTransform;
 
-export { type BaseIRNode, type BlockIRNode, type CompilerOptions, type CreateComponentIRNode, type CreateTextNodeIRNode, type DeclareOldRefIRNode, type DirectiveIRNode, type DirectiveTransform, type DirectiveTransformResult, DynamicFlag, type ForIRNode, type GetTextChildIRNode, type HackOptions, type IRDynamicInfo, IRDynamicPropsKind, type IREffect, type IRFor, type IRNode, IRNodeTypes, type IRProp, type IRProps, type IRPropsDynamicAttribute, type IRPropsDynamicExpression, type IRPropsStatic, type IRSlotDynamic, type IRSlotDynamicBasic, type IRSlotDynamicConditional, type IRSlotDynamicLoop, IRSlotType, type IRSlots, type IRSlotsExpression, type IRSlotsStatic, type IfIRNode, type InsertNodeIRNode, type KeyOverride, type NodeTransform, type OperationNode, type PrependNodeIRNode, type RootIRNode, type RootNode, type SetDynamicEventsIRNode, type SetDynamicPropsIRNode, type SetEventIRNode, type SetHtmlIRNode, type SetPropIRNode, type SetTemplateRefIRNode, type SetTextIRNode, type SlotBlockIRNode, type SlotOutletIRNode, TransformContext, type TransformOptions, type TransformPreset, type VaporDirectiveNode, compile, resolveDirectiveNode, resolveNode, transform, transformChildren, transformElement, transformNode, transformTemplateRef, transformText, transformVBind, transformVHtml, transformVModel, transformVOn, transformVShow, transformVSlot };
+declare const transformVFor: NodeTransform;
+
+export { type BaseIRNode, type BlockIRNode, type CompilerOptions, type CreateComponentIRNode, type CreateTextNodeIRNode, type DeclareOldRefIRNode, type DirectiveIRNode, type DirectiveTransform, type DirectiveTransformResult, DynamicFlag, type ForIRNode, type GetTextChildIRNode, type HackOptions, type IRDynamicInfo, IRDynamicPropsKind, type IREffect, type IRFor, type IRNode, IRNodeTypes, type IRProp, type IRProps, type IRPropsDynamicAttribute, type IRPropsDynamicExpression, type IRPropsStatic, type IRSlotDynamic, type IRSlotDynamicBasic, type IRSlotDynamicConditional, type IRSlotDynamicLoop, IRSlotType, type IRSlots, type IRSlotsExpression, type IRSlotsStatic, type IfIRNode, type InsertNodeIRNode, type KeyOverride, type NodeTransform, type OperationNode, type PrependNodeIRNode, type RootIRNode, type RootNode, type SetDynamicEventsIRNode, type SetDynamicPropsIRNode, type SetEventIRNode, type SetHtmlIRNode, type SetPropIRNode, type SetTemplateRefIRNode, type SetTextIRNode, type SlotBlockIRNode, type SlotOutletIRNode, type StructuralDirectiveTransform, TransformContext, type TransformOptions, type TransformPreset, type VaporDirectiveNode, compile, createStructuralDirectiveTransform, resolveDirectiveNode, resolveNode, transform, transformChildren, transformElement, transformNode, transformTemplateRef, transformText, transformVBind, transformVFor, transformVHtml, transformVModel, transformVOn, transformVShow, transformVSlot };

package/dist/index.js

@@ -1,15 +1,16 @@
 // src/compile.ts
-import { extend as extend5 } from "@vue/shared";
+import { extend as extend5, isString as isString3 } from "@vue/shared";
 import {
   generate
 } from "@vue/compiler-vapor";
+import { parse } from "@babel/parser";
 
 // src/transform.ts
 import {
   defaultOnError,
   defaultOnWarn
 } from "@vue/compiler-dom";
-import { EMPTY_OBJ, NOOP, extend, isArray } from "@vue/shared";
+import { EMPTY_OBJ, NOOP, extend, isArray, isString as isString2 } from "@vue/shared";
 
 // src/ir/component.ts
 var IRDynamicPropsKind = /* @__PURE__ */ ((IRDynamicPropsKind2) => {
@@ -58,16 +59,47 @@ var DynamicFlag = /* @__PURE__ */ ((DynamicFlag2) => {
 })(DynamicFlag || {});
 
 // src/transforms/utils.ts
-import { createSimpleExpression as createSimpleExpression2 } from "@vue/compiler-dom";
+import { createSimpleExpression } from "@vue/compiler-dom";
 import {
-  arrowFunctionExpression,
-  callExpression,
   jsxClosingFragment,
   jsxExpressionContainer,
   jsxFragment,
-  jsxOpeningFragment,
-  parenthesizedExpression
+  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";
@@ -75,13 +107,16 @@ import {
   ElementTypes,
   Namespaces,
   NodeTypes,
-  createSimpleExpression,
+  createSimpleExpression as createSimpleExpression2,
   isLiteralWhitelisted,
   walkIdentifiers
 } from "@vue/compiler-dom";
 import {
   isLiteral
 } from "@babel/types";
+function propToExpression(prop, context) {
+  return prop.type === "JSXAttribute" && prop.value?.type === "JSXExpressionContainer" ? resolveExpression(prop.value.expression, context) : EMPTY_EXPRESSION;
+}
 function isConstantExpression(exp) {
   return isLiteralWhitelisted(exp.content) || isGloballyAllowed(exp.content) || getLiteralExpressionValue(exp) !== null;
 }
@@ -162,7 +197,7 @@ function resolveExpression(node, context, effect = false) {
   return resolveSimpleExpression(source, isStatic, location, node);
 }
 function resolveSimpleExpression(source, isStatic, location, ast) {
-  const result = createSimpleExpression(
+  const result = createSimpleExpression2(
     source,
     isStatic,
     resolveLocation(location, source)
@@ -248,7 +283,7 @@ function resolveDirectiveNode(node, context) {
     exp,
     arg,
     loc: resolveLocation(node.loc, context),
-    modifiers: modifiers.map((modifier) => createSimpleExpression(modifier))
+    modifiers: modifiers.map((modifier) => createSimpleExpression2(modifier))
   };
 }
 function isJSXComponent(node) {
@@ -270,62 +305,10 @@ function findProp(expression, key) {
     }
   }
 }
-function isJSXElement(node) {
-  return !!node && (node.type === "JSXElement" || node.type === "JSXFragment");
+function getText(node, content) {
+  return content.ir.source.slice(node.start, node.end);
 }
 
-// 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, isVFor);
-  const branch = newBlock(node);
-  const exitBlock = context.enterBlock(branch, isVFor);
-  context.reference();
-  return [branch, exitBlock];
-}
-function wrapFragment(node, isVFor) {
-  if (node.type === "JSXFragment") {
-    return node;
-  }
-  if (isVFor && (node.type === "ArrowFunctionExpression" || node.type === "FunctionExpression")) {
-    if (isJSXElement(node.body)) {
-      node = node.body;
-    } else if (node.body.type === "BlockStatement" && node.body.body[0].type === "ReturnStatement" && node.body.body[0].argument) {
-      node = node.body.body[0].argument;
-    } else {
-      node = {
-        ...callExpression(
-          parenthesizedExpression(arrowFunctionExpression([], node.body)),
-          []
-        ),
-        start: node.body.start,
-        end: node.body.end
-      };
-    }
-  }
-  return jsxFragment(jsxOpeningFragment(), jsxClosingFragment(), [
-    node.type === "JSXElement" ? node : jsxExpressionContainer(node)
-  ]);
-}
-var EMPTY_EXPRESSION = createSimpleExpression2("", true);
-
 // src/transform.ts
 var defaultOptions = {
   filename: "",
@@ -483,6 +466,31 @@ function transformNode(context) {
     context.registerTemplate();
   }
 }
+function createStructuralDirectiveTransform(name, fn) {
+  const matches = (n) => isString2(name) ? n === name : name.includes(n);
+  return (node, context) => {
+    if (node.type === "JSXElement") {
+      const {
+        openingElement: { attributes, name: name2 }
+      } = node;
+      if (getText(name2, context) === "template" && findProp(node, "v-slot")) {
+        return;
+      }
+      const exitFns = [];
+      for (const prop of attributes) {
+        if (prop.type !== "JSXAttribute") continue;
+        const propName = getText(prop.name, context);
+        if (propName.startsWith("v-") && matches(propName.slice(2))) {
+          attributes.splice(attributes.indexOf(prop), 1);
+          const onExit = fn(node, prop, context);
+          if (onExit) exitFns.push(onExit);
+          break;
+        }
+      }
+      return exitFns;
+    }
+  };
+}
 
 // src/transforms/transformElement.ts
 import { extend as extend2, isBuiltInDirective, isVoidTag, makeMap } from "@vue/shared";
@@ -1121,14 +1129,97 @@ 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;
+  }
+  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(root, options = {}) {
+function compile(source, options = {}) {
   const resolvedOptions = extend5({}, options, {
     inline: true,
     prefixIdentifiers: false,
     expressionPlugins: options.expressionPlugins || ["jsx"]
   });
-  if (options.isTS) {
+  if (!resolvedOptions.source && isString3(source)) {
+    resolvedOptions.source = source;
+  }
+  if (resolvedOptions.isTS) {
     const { expressionPlugins } = resolvedOptions;
     if (!expressionPlugins.includes("typescript")) {
       resolvedOptions.expressionPlugins = [
@@ -1137,11 +1228,15 @@ function compile(root, options = {}) {
       ];
     }
   }
+  const root = isString3(source) ? parse(source, {
+    sourceType: "module",
+    plugins: resolvedOptions.expressionPlugins
+  }).program.body[0].expression : source;
   const children = root.type === "JSXFragment" ? root.children : root.type === "JSXElement" ? [root] : [];
   const ast = {
     type: 0 /* ROOT */,
     children,
-    source: options.source || ""
+    source: resolvedOptions.source || ""
   };
   const [nodeTransforms, directiveTransforms] = getBaseTransformPreset();
   const ir = transform(
@@ -1149,13 +1244,13 @@ function compile(root, options = {}) {
     extend5({}, resolvedOptions, {
       nodeTransforms: [
         ...nodeTransforms,
-        ...options.nodeTransforms || []
+        ...resolvedOptions.nodeTransforms || []
         // user transforms
       ],
       directiveTransforms: extend5(
         {},
         directiveTransforms,
-        options.directiveTransforms || {}
+        resolvedOptions.directiveTransforms || {}
         // user transforms
       )
     })
@@ -1165,6 +1260,7 @@ function compile(root, options = {}) {
 function getBaseTransformPreset() {
   return [
     [
+      transformVFor,
       transformTemplateRef,
       transformText,
       transformElement,
@@ -1187,6 +1283,7 @@ export {
   IRSlotType,
   TransformContext,
   compile,
+  createStructuralDirectiveTransform,
   generate,
   resolveDirectiveNode,
   resolveNode,
@@ -1197,6 +1294,7 @@ export {
   transformTemplateRef,
   transformText,
   transformVBind,
+  transformVFor,
   transformVHtml,
   transformVModel,
   transformVOn,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-jsx-vapor/compiler",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Vue JSX Vapor Compiler",
   "type": "module",
   "keywords": [
@@ -48,13 +48,11 @@
     "./*": "./*"
   },
   "dependencies": {
-    "@babel/types": "^7.26.7",
-    "@vue/compiler-dom": "https://pkg.pr.new/@vue/compiler-dom@dc910ac",
-    "@vue/compiler-vapor": "https://pkg.pr.new/@vue/compiler-vapor@1e41c1d",
-    "@vue/shared": "https://pkg.pr.new/@vue/shared@dc910ac"
-  },
-  "devDependencies": {
-    "@babel/parser": "^7.26.7"
+    "@babel/parser": "^7.26.8",
+    "@babel/types": "^7.26.8",
+    "@vue/compiler-dom": "https://pkg.pr.new/@vue/compiler-dom@ce35a8c",
+    "@vue/compiler-vapor": "https://pkg.pr.new/@vue/compiler-vapor@ce35a8c",
+    "@vue/shared": "https://pkg.pr.new/@vue/shared@ce35a8c"
   },
   "scripts": {
     "build": "tsup",