@vue-jsx-vapor/compiler 2.0.1 → 2.1.1

package/dist/index.cjs

@@ -5,6 +5,13 @@ var _parser = require('@babel/parser');
 var _compilervapor = require('@vue/compiler-vapor');
 var _shared = require('@vue/shared');
 
+// src/generate.ts
+
+
+
+
+
+
 // src/ir/component.ts
 var IRDynamicPropsKind = /* @__PURE__ */ ((IRDynamicPropsKind2) => {
   IRDynamicPropsKind2[IRDynamicPropsKind2["EXPRESSION"] = 0] = "EXPRESSION";
@@ -33,14 +40,15 @@ var IRNodeTypes = /* @__PURE__ */ ((IRNodeTypes2) => {
   IRNodeTypes2[IRNodeTypes2["SET_TEMPLATE_REF"] = 8] = "SET_TEMPLATE_REF";
   IRNodeTypes2[IRNodeTypes2["INSERT_NODE"] = 9] = "INSERT_NODE";
   IRNodeTypes2[IRNodeTypes2["PREPEND_NODE"] = 10] = "PREPEND_NODE";
-  IRNodeTypes2[IRNodeTypes2["CREATE_TEXT_NODE"] = 11] = "CREATE_TEXT_NODE";
-  IRNodeTypes2[IRNodeTypes2["CREATE_COMPONENT_NODE"] = 12] = "CREATE_COMPONENT_NODE";
-  IRNodeTypes2[IRNodeTypes2["SLOT_OUTLET_NODE"] = 13] = "SLOT_OUTLET_NODE";
-  IRNodeTypes2[IRNodeTypes2["DIRECTIVE"] = 14] = "DIRECTIVE";
-  IRNodeTypes2[IRNodeTypes2["DECLARE_OLD_REF"] = 15] = "DECLARE_OLD_REF";
-  IRNodeTypes2[IRNodeTypes2["IF"] = 16] = "IF";
-  IRNodeTypes2[IRNodeTypes2["FOR"] = 17] = "FOR";
-  IRNodeTypes2[IRNodeTypes2["GET_TEXT_CHILD"] = 18] = "GET_TEXT_CHILD";
+  IRNodeTypes2[IRNodeTypes2["CREATE_COMPONENT_NODE"] = 11] = "CREATE_COMPONENT_NODE";
+  IRNodeTypes2[IRNodeTypes2["SLOT_OUTLET_NODE"] = 12] = "SLOT_OUTLET_NODE";
+  IRNodeTypes2[IRNodeTypes2["DIRECTIVE"] = 13] = "DIRECTIVE";
+  IRNodeTypes2[IRNodeTypes2["DECLARE_OLD_REF"] = 14] = "DECLARE_OLD_REF";
+  IRNodeTypes2[IRNodeTypes2["IF"] = 15] = "IF";
+  IRNodeTypes2[IRNodeTypes2["FOR"] = 16] = "FOR";
+  IRNodeTypes2[IRNodeTypes2["GET_TEXT_CHILD"] = 17] = "GET_TEXT_CHILD";
+  IRNodeTypes2[IRNodeTypes2["CREATE_NODES"] = 18] = "CREATE_NODES";
+  IRNodeTypes2[IRNodeTypes2["SET_NODES"] = 19] = "SET_NODES";
   return IRNodeTypes2;
 })(IRNodeTypes || {});
 var DynamicFlag = /* @__PURE__ */ ((DynamicFlag2) => {
@@ -50,6 +58,49 @@ var DynamicFlag = /* @__PURE__ */ ((DynamicFlag2) => {
   DynamicFlag2[DynamicFlag2["INSERT"] = 4] = "INSERT";
   return DynamicFlag2;
 })(DynamicFlag || {});
+function isBlockOperation(op) {
+  const type = op.type;
+  return type === 11 /* CREATE_COMPONENT_NODE */ || type === 12 /* SLOT_OUTLET_NODE */ || type === 15 /* IF */ || type === 16 /* FOR */;
+}
+
+// src/generate.ts
+var customGenOperation = (oper, context) => {
+  if (oper.type === 18 /* CREATE_NODES */) {
+    return genCreateNodes(oper, context);
+  } else if (oper.type === 19 /* SET_NODES */) {
+    return genSetNodes(oper, context);
+  }
+};
+function genSetNodes(oper, context) {
+  const { helper } = context;
+  const { element, values, generated } = oper;
+  return [
+    _compilervapor.NEWLINE,
+    ..._compilervapor.genCall.call(void 0, 
+      helper("setNodes"),
+      `${generated ? "x" : "n"}${element}`,
+      combineValues(values, context)
+    )
+  ];
+}
+function genCreateNodes(oper, context) {
+  const { helper } = context;
+  const { id, values } = oper;
+  return [
+    _compilervapor.NEWLINE,
+    `const n${id} = `,
+    ..._compilervapor.genCall.call(void 0, helper("createNodes"), values && combineValues(values, context))
+  ];
+}
+function combineValues(values, context) {
+  return values.flatMap((value, i) => {
+    const exp = _compilervapor.genExpression.call(void 0, value, context);
+    if (i > 0) {
+      exp.unshift(", ");
+    }
+    return exp;
+  });
+}
 
 // src/transform.ts
 
@@ -217,17 +268,25 @@ function resolveNode(node, context) {
   const props = node.openingElement.attributes.reduce(
     (result, attr) => {
       if (attr.type === "JSXAttribute") {
-        if (tagType === _compilerdom.ElementTypes.COMPONENT) {
-          result.push(resolveDirectiveNode(attr, context));
-        } else {
-          result.push({
+        result.push(
+          _optionalChain([attr, 'access', _9 => _9.value, 'optionalAccess', _10 => _10.type]) === "StringLiteral" ? {
             type: _compilerdom.NodeTypes.ATTRIBUTE,
             name: String(attr.name.name),
             nameLoc: resolveLocation(attr.name.loc, context),
             value: resolveValue(attr.value, context),
             loc: resolveLocation(attr.loc, context)
-          });
-        }
+          } : resolveDirectiveNode(attr, context)
+        );
+      } else if (attr.type === "JSXSpreadAttribute") {
+        result.push({
+          type: _compilerdom.NodeTypes.DIRECTIVE,
+          name: "bind",
+          rawName: getText(attr, context),
+          exp: resolveExpression(attr.argument, context),
+          arg: void 0,
+          loc: resolveLocation(node.loc, context),
+          modifiers: []
+        });
       }
       return result;
     },
@@ -249,34 +308,35 @@ var namespaceRE = /^(?:\$([\w-]+)\$)?([\w-]+)?/;
 function resolveDirectiveNode(node, context, withFn = false) {
   const { value, name } = node;
   let 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 [newName, modifiers2] = nameString.split("_");
-    nameString = newName;
-    argString = `_${modifiers2}`;
-  }
+  const isDirective = nameString.startsWith("v-");
   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("_");
+  let argString = name.type === "JSXNamespacedName" ? name.name.name : "";
+  if (name.type !== "JSXNamespacedName" && !argString) {
+    ;
+    [nameString, ...modifiers] = nameString.split("_");
+  } else {
+    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 arg = isDirective ? argString && name.type === "JSXNamespacedName" ? resolveSimpleExpression(argString, isStatic, name.name.loc) : void 0 : resolveSimpleExpression(nameString, true, name.loc);
   const exp = value ? withFn && value.type === "JSXExpressionContainer" ? resolveExpressionWithFn(value.expression, context) : resolveExpression(value, context) : void 0;
   return {
     type: _compilerdom.NodeTypes.DIRECTIVE,
-    name: nameString.slice(2),
-    rawName: `${nameString}:${argString}`,
+    name: isDirective ? nameString.slice(2) : "bind",
+    rawName: getText(name, context),
     exp,
     arg,
     loc: resolveLocation(node.loc, context),
@@ -305,7 +365,7 @@ function isJSXComponent(node) {
   }
 }
 function findProp(expression, key) {
-  if (_optionalChain([expression, 'optionalAccess', _9 => _9.type]) === "JSXElement") {
+  if (_optionalChain([expression, 'optionalAccess', _11 => _11.type]) === "JSXElement") {
     for (const attr of expression.openingElement.attributes) {
       const name = attr.type === "JSXAttribute" && (attr.name.type === "JSXIdentifier" ? attr.name.name : attr.name.type === "JSXNamespacedName" ? attr.name.namespace.name : "").split("_")[0];
       if (name && (_shared.isString.call(void 0, key) ? name === key : key.test(name))) {
@@ -358,6 +418,7 @@ function wrapFragment(node) {
   ]);
 }
 var EMPTY_EXPRESSION = _compilerdom.createSimpleExpression.call(void 0, "", true);
+var isFragmentNode = (node) => node.type === 0 /* ROOT */ || node.type === "JSXFragment" || node.type === "JSXElement" && !!isTemplate(node);
 
 // src/transform.ts
 var defaultOptions = {
@@ -582,18 +643,15 @@ function processDynamicChildren(context) {
           context.childrenTemplate[index - prevDynamics.length] = `<!>`;
           prevDynamics[0].flags -= 2 /* NON_TEMPLATE */;
           const anchor = prevDynamics[0].anchor = context.increaseId();
-          context.registerOperation({
-            type: 9 /* INSERT_NODE */,
-            elements: prevDynamics.map((child2) => child2.id),
-            parent: context.reference(),
-            anchor
-          });
+          registerInsertion(prevDynamics, context, anchor);
         } else {
-          context.registerOperation({
-            type: 10 /* PREPEND_NODE */,
-            elements: prevDynamics.map((child2) => child2.id),
-            parent: context.reference()
-          });
+          prevDynamics[0].flags -= 2 /* NON_TEMPLATE */;
+          registerInsertion(
+            prevDynamics,
+            context,
+            -1
+            /* prepend */
+          );
         }
         prevDynamics = [];
       }
@@ -601,11 +659,23 @@ function processDynamicChildren(context) {
     }
   }
   if (prevDynamics.length) {
-    context.registerOperation({
-      type: 9 /* INSERT_NODE */,
-      elements: prevDynamics.map((child) => child.id),
-      parent: context.reference()
-    });
+    registerInsertion(prevDynamics, context);
+  }
+}
+function registerInsertion(dynamics, context, anchor) {
+  for (const child of dynamics) {
+    console.log(child);
+    if (child.template != null) {
+      context.registerOperation({
+        type: 9 /* INSERT_NODE */,
+        elements: dynamics.map((child2) => child2.id),
+        parent: context.reference(),
+        anchor
+      });
+    } else if (child.operation && isBlockOperation(child.operation)) {
+      child.operation.parent = context.reference();
+      child.operation.anchor = anchor;
+    }
   }
 }
 
@@ -667,8 +737,8 @@ function transformComponentElement(tag, propsResult, singleRoot, context) {
     context.component.add(tag);
   }
   context.dynamic.flags |= 2 /* NON_TEMPLATE */ | 4 /* INSERT */;
-  context.registerOperation({
-    type: 12 /* CREATE_COMPONENT_NODE */,
+  context.dynamic.operation = {
+    type: 11 /* CREATE_COMPONENT_NODE */,
     id: context.reference(),
     tag,
     props: propsResult[0] ? propsResult[1] : [propsResult[1]],
@@ -676,7 +746,7 @@ function transformComponentElement(tag, propsResult, singleRoot, context) {
     root: singleRoot,
     slots: [...context.slots],
     once: context.inVOnce
-  });
+  };
   context.slots = [];
 }
 function transformNativeElement(tag, propsResult, singleRoot, context) {
@@ -775,7 +845,7 @@ 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 (!isDirectiveRegex.test(name) && !isEventRegex.test(name) && (!prop.value || prop.value.type === "StringLiteral")) {
     if (isReservedProp(name)) return;
     return {
       key: resolveSimpleExpression(name, true, prop.name.loc),
@@ -833,14 +903,14 @@ function mergePropValues(existing, incoming) {
 var transformTemplateRef = (node, context) => {
   if (node.type !== "JSXElement") return;
   const dir = findProp(node, "ref");
-  if (!_optionalChain([dir, 'optionalAccess', _10 => _10.value])) return;
+  if (!_optionalChain([dir, 'optionalAccess', _12 => _12.value])) return;
   context.ir.hasTemplateRef = true;
   const value = resolveExpression(dir.value, context);
   return () => {
     const id = context.reference();
     const effect = !isConstantExpression(value);
     effect && context.registerOperation({
-      type: 15 /* DECLARE_OLD_REF */,
+      type: 14 /* DECLARE_OLD_REF */,
       id
     });
     context.registerEffect([value], {
@@ -862,7 +932,7 @@ function processConditionalExpression(node, context) {
   const condition = resolveExpression(test, context);
   const [branch, onExit] = createBranch(consequent, context);
   const operation = {
-    type: 16 /* IF */,
+    type: 15 /* IF */,
     id,
     condition,
     positive: branch,
@@ -871,7 +941,7 @@ function processConditionalExpression(node, context) {
   return [
     () => {
       onExit();
-      context.registerOperation(operation);
+      context.dynamic.operation = operation;
     },
     () => {
       const [branch2, onExit2] = createBranch(alternate, context);
@@ -892,7 +962,7 @@ function processLogicalExpression(node, context) {
     context
   );
   const operation = {
-    type: 16 /* IF */,
+    type: 15 /* IF */,
     id,
     condition,
     positive: branch,
@@ -901,7 +971,7 @@ function processLogicalExpression(node, context) {
   return [
     () => {
       onExit();
-      context.registerOperation(operation);
+      context.dynamic.operation = operation;
     },
     () => {
       const [branch2, onExit2] = createBranch(
@@ -923,18 +993,35 @@ var transformText = (node, context) => {
     context.dynamic.flags |= 2 /* NON_TEMPLATE */;
     return;
   }
-  if (node.type === "JSXElement" && !isTemplate(node) && !isJSXComponent(node) && isAllTextLike(node.children)) {
-    processTextLikeContainer(
-      node.children,
-      context
-    );
+  const isFragment = isFragmentNode(node);
+  if ((node.type === "JSXElement" && !isTemplate(node) && !isJSXComponent(node) || isFragment) && node.children.length) {
+    let hasInterp = false;
+    let isAllTextLike = true;
+    for (const c of node.children) {
+      if (c.type === "JSXExpressionContainer" && c.expression.type !== "ConditionalExpression" && c.expression.type !== "LogicalExpression") {
+        hasInterp = true;
+      } else if (c.type !== "JSXText") {
+        isAllTextLike = false;
+      }
+    }
+    if (!isFragment && isAllTextLike && hasInterp) {
+      processTextContainer(node.children, context);
+    } else if (hasInterp) {
+      for (let i = 0; i < node.children.length; i++) {
+        const c = node.children[i];
+        const prev = node.children[i - 1];
+        if (c.type === "JSXExpressionContainer" && prev && prev.type === "JSXText") {
+          seen.get(context.root).add(prev);
+        }
+      }
+    }
   } else if (node.type === "JSXExpressionContainer") {
     if (node.expression.type === "ConditionalExpression") {
       return processConditionalExpression(node.expression, context);
     } else if (node.expression.type === "LogicalExpression") {
       return processLogicalExpression(node.expression, context);
     } else {
-      processTextLike(context);
+      processInterpolation(context);
     }
   } else if (node.type === "JSXText") {
     const value = resolveJSXText(node);
@@ -945,35 +1032,54 @@ var transformText = (node, context) => {
     }
   }
 };
-function processTextLike(context) {
-  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)]);
+function processInterpolation(context) {
+  const parent = context.parent.node;
+  const children = parent.children;
+  const nexts = children.slice(context.index);
   const idx = nexts.findIndex((n) => !isTextLike(n));
   const nodes = idx !== -1 ? nexts.slice(0, idx) : nexts;
+  const prev = children[context.index - 1];
+  if (prev && prev.type === "JSXText") {
+    nodes.unshift(prev);
+  }
   const values = createTextLikeExpressions(nodes, context);
   if (!values.length) {
     context.dynamic.flags |= 2 /* NON_TEMPLATE */;
     return;
   }
   const id = context.reference();
-  context.dynamic.flags |= 4 /* INSERT */ | 2 /* NON_TEMPLATE */;
-  context.registerOperation({
-    type: 11 /* CREATE_TEXT_NODE */,
-    id,
-    values,
-    jsx: true
-  });
+  if (isFragmentNode(parent)) {
+    context.registerOperation({
+      type: 18 /* CREATE_NODES */,
+      id,
+      values
+    });
+  } else {
+    context.template += " ";
+    context.registerOperation({
+      type: 19 /* SET_NODES */,
+      element: id,
+      values
+    });
+  }
 }
-function processTextLikeContainer(children, context) {
+function processTextContainer(children, context) {
   const values = createTextLikeExpressions(children, context);
   const literals = values.map(getLiteralExpressionValue);
   if (literals.every((l) => l != null)) {
     context.childrenTemplate = literals.map((l) => String(l));
   } else {
+    context.childrenTemplate = [" "];
     context.registerOperation({
-      type: 4 /* SET_TEXT */,
+      type: 17 /* GET_TEXT_CHILD */,
+      parent: context.reference()
+    });
+    context.registerOperation({
+      type: 19 /* SET_NODES */,
       element: context.reference(),
       values,
-      jsx: true
+      // indicates this node is generated, so prefix should be "x" instead of "n"
+      generated: true
     });
   }
 }
@@ -986,10 +1092,6 @@ function createTextLikeExpressions(nodes, context) {
   }
   return values;
 }
-function isAllTextLike(children) {
-  return !!children.length && children.every(isTextLike) && // at least one an interpolation
-  children.some((n) => n.type === "JSXExpressionContainer");
-}
 function isTextLike(node) {
   return node.type === "JSXExpressionContainer" && node.expression.type !== "ConditionalExpression" && node.expression.type !== "LogicalExpression" || node.type === "JSXText";
 }
@@ -1051,8 +1153,8 @@ function processFor(node, dir, context) {
     exitBlock();
     const { parent } = context;
     const isOnlyChild = parent && parent.block.node !== parent.node && parent.node.children.length === 1;
-    context.registerOperation({
-      type: 17 /* FOR */,
+    context.dynamic.operation = {
+      type: 16 /* FOR */,
       id,
       source,
       value,
@@ -1063,7 +1165,7 @@ function processFor(node, dir, context) {
       once: context.inVOnce || !!(source.ast && _compilerdom.isConstantNode.call(void 0, source.ast, {})),
       component: isComponent,
       onlyChild: !!isOnlyChild
-    });
+    };
   };
 }
 function getForParseResult(dir, context) {
@@ -1135,22 +1237,28 @@ function processIf(node, attribute, context) {
     const [branch, onExit] = createBranch(node, context);
     return () => {
       onExit();
-      context.registerOperation({
-        type: 16 /* IF */,
+      context.dynamic.operation = {
+        type: 15 /* IF */,
         id,
         condition: dir.exp,
         positive: branch,
         once: context.inVOnce || _compilerdom.isConstantNode.call(void 0, attribute.value, context.options.bindingMetadata)
-      });
+      };
     };
   } else {
     const siblingIf = getSiblingIf(context);
-    const { operation } = context.block;
-    let lastIfNode = operation.at(-1);
+    const siblings = context.parent && context.parent.dynamic.children;
+    let lastIfNode;
+    if (siblings) {
+      let i = siblings.length;
+      while (i--) {
+        if (siblings[i].operation) lastIfNode = siblings[i].operation;
+      }
+    }
     if (
       // check if v-if is the sibling node
       !siblingIf || // check if IfNode is the last operation and get the root IfNode
-      !lastIfNode || lastIfNode.type !== 16 /* IF */
+      !lastIfNode || lastIfNode.type !== 15 /* IF */
     ) {
       context.options.onError(
         _compilerdom.createCompilerError.call(void 0, 
@@ -1160,7 +1268,7 @@ function processIf(node, attribute, context) {
       );
       return;
     }
-    while (lastIfNode.negative && lastIfNode.negative.type === 16 /* IF */) {
+    while (lastIfNode.negative && lastIfNode.negative.type === 15 /* IF */) {
       lastIfNode = lastIfNode.negative;
     }
     if (dir.name === "else-if" && lastIfNode.negative) {
@@ -1177,7 +1285,7 @@ function processIf(node, attribute, context) {
       lastIfNode.negative = branch;
     } else {
       lastIfNode.negative = {
-        type: 16 /* IF */,
+        type: 15 /* IF */,
         id: -1,
         condition: dir.exp,
         positive: branch,
@@ -1491,7 +1599,7 @@ var transformVSlots = (node, context) => {
     (attr) => attr.type === "JSXAttribute" && attr.name.name.toString() === "v-slots"
   );
   const vSlotsDir = attributes[vSlotsIndex];
-  if (vSlotsDir && _optionalChain([vSlotsDir, 'access', _16 => _16.value, 'optionalAccess', _17 => _17.type]) === "JSXExpressionContainer") {
+  if (vSlotsDir && _optionalChain([vSlotsDir, 'access', _13 => _13.value, 'optionalAccess', _14 => _14.type]) === "JSXExpressionContainer") {
     attributes.splice(vSlotsIndex, 1);
     context.slots = [
       {
@@ -1556,7 +1664,10 @@ function compile(source, options = {}) {
       )
     })
   );
-  return _compilervapor.generate.call(void 0, ir, resolvedOptions);
+  return _compilervapor.generate.call(void 0, ir, {
+    ...resolvedOptions,
+    customGenOperation
+  });
 }
 function getBaseTransformPreset() {
   return [
@@ -1618,4 +1729,5 @@ var transformVText = (dir, node, context) => {
 
 
 
-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.transformVIf = transformVIf; exports.transformVModel = transformVModel; exports.transformVOn = transformVOn; exports.transformVOnce = transformVOnce; exports.transformVShow = transformVShow; exports.transformVSlot = transformVSlot; exports.transformVSlots = transformVSlots; exports.transformVText = transformVText;
+
+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.isBlockOperation = isBlockOperation; 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.transformVIf = transformVIf; exports.transformVModel = transformVModel; exports.transformVOn = transformVOn; exports.transformVOnce = transformVOnce; exports.transformVShow = transformVShow; exports.transformVSlot = transformVSlot; exports.transformVSlots = transformVSlots; exports.transformVText = transformVText;

package/dist/index.d.cts

@@ -116,14 +116,15 @@ declare enum IRNodeTypes {
     SET_TEMPLATE_REF = 8,
     INSERT_NODE = 9,
     PREPEND_NODE = 10,
-    CREATE_TEXT_NODE = 11,
-    CREATE_COMPONENT_NODE = 12,
-    SLOT_OUTLET_NODE = 13,
-    DIRECTIVE = 14,
-    DECLARE_OLD_REF = 15,// consider make it more general
-    IF = 16,
-    FOR = 17,
-    GET_TEXT_CHILD = 18
+    CREATE_COMPONENT_NODE = 11,
+    SLOT_OUTLET_NODE = 12,
+    DIRECTIVE = 13,
+    DECLARE_OLD_REF = 14,// consider make it more general
+    IF = 15,
+    FOR = 16,
+    GET_TEXT_CHILD = 17,
+    CREATE_NODES = 18,
+    SET_NODES = 19
 }
 interface BaseIRNode {
     type: IRNodeTypes;
@@ -161,6 +162,8 @@ interface IfIRNode extends BaseIRNode {
     positive: BlockIRNode;
     negative?: BlockIRNode | IfIRNode;
     once?: boolean;
+    parent?: number;
+    anchor?: number;
 }
 interface IRFor {
     source: SimpleExpressionNode;
@@ -176,6 +179,8 @@ interface ForIRNode extends BaseIRNode, IRFor {
     once: boolean;
     component: boolean;
     onlyChild: boolean;
+    parent?: number;
+    anchor?: number;
 }
 interface SetPropIRNode extends BaseIRNode {
     type: IRNodeTypes.SET_PROP;
@@ -195,12 +200,11 @@ interface SetDynamicEventsIRNode extends BaseIRNode {
     element: number;
     event: SimpleExpressionNode;
 }
-interface SetTextIRNode extends BaseIRNode {
-    type: IRNodeTypes.SET_TEXT;
+interface SetNodesIRNode extends BaseIRNode {
+    type: IRNodeTypes.SET_NODES;
     element: number;
     values: SimpleExpressionNode[];
     generated?: boolean;
-    jsx?: boolean;
 }
 type KeyOverride = [find: string, replacement: string];
 interface SetEventIRNode extends BaseIRNode {
@@ -230,11 +234,10 @@ interface SetTemplateRefIRNode extends BaseIRNode {
     refFor: boolean;
     effect: boolean;
 }
-interface CreateTextNodeIRNode extends BaseIRNode {
-    type: IRNodeTypes.CREATE_TEXT_NODE;
+interface CreateNodesIRNode extends BaseIRNode {
+    type: IRNodeTypes.CREATE_NODES;
     id: number;
     values?: SimpleExpressionNode[];
-    jsx?: boolean;
 }
 interface InsertNodeIRNode extends BaseIRNode {
     type: IRNodeTypes.INSERT_NODE;
@@ -266,6 +269,8 @@ interface CreateComponentIRNode extends BaseIRNode {
     root: boolean;
     once: boolean;
     dynamic?: SimpleExpressionNode;
+    parent?: number;
+    anchor?: number;
 }
 interface DeclareOldRefIRNode extends BaseIRNode {
     type: IRNodeTypes.DECLARE_OLD_REF;
@@ -277,13 +282,15 @@ interface SlotOutletIRNode extends BaseIRNode {
     name: SimpleExpressionNode;
     props: IRProps[];
     fallback?: BlockIRNode;
+    parent?: number;
+    anchor?: number;
 }
 interface GetTextChildIRNode extends BaseIRNode {
     type: IRNodeTypes.GET_TEXT_CHILD;
     parent: number;
 }
 type IRNode = OperationNode | RootIRNode;
-type OperationNode = SetPropIRNode | SetDynamicPropsIRNode | SetTextIRNode | SetEventIRNode | SetDynamicEventsIRNode | SetHtmlIRNode | SetTemplateRefIRNode | CreateTextNodeIRNode | InsertNodeIRNode | PrependNodeIRNode | DirectiveIRNode | IfIRNode | ForIRNode | CreateComponentIRNode | DeclareOldRefIRNode | SlotOutletIRNode | GetTextChildIRNode;
+type OperationNode = SetPropIRNode | SetDynamicPropsIRNode | SetNodesIRNode | SetEventIRNode | SetDynamicEventsIRNode | SetHtmlIRNode | SetTemplateRefIRNode | CreateNodesIRNode | InsertNodeIRNode | PrependNodeIRNode | DirectiveIRNode | IfIRNode | ForIRNode | CreateComponentIRNode | DeclareOldRefIRNode | SlotOutletIRNode | GetTextChildIRNode;
 declare enum DynamicFlag {
     NONE = 0,
     /**
@@ -306,6 +313,7 @@ interface IRDynamicInfo {
     children: IRDynamicInfo[];
     template?: number;
     hasDynamicChild?: boolean;
+    operation?: OperationNode;
 }
 interface IREffect {
     expressions: SimpleExpressionNode[];
@@ -320,9 +328,12 @@ type VaporDirectiveNode = Overwrite<DirectiveNode, {
     exp: Exclude<DirectiveNode['exp'], CompoundExpressionNode>;
     arg: Exclude<DirectiveNode['arg'], CompoundExpressionNode>;
 }>;
+type InsertionStateTypes = IfIRNode | ForIRNode | SlotOutletIRNode | CreateComponentIRNode;
+declare function isBlockOperation(op: OperationNode): op is InsertionStateTypes;
 
 interface VaporCodegenResult extends Omit<VaporCodegenResult$1, 'ast'> {
     ast: RootIRNode;
+    customHelpers: Set<string>;
 }
 declare function compile(source: JSXElement | JSXFragment | string, options?: CompilerOptions): VaporCodegenResult;
 type CompilerOptions = HackOptions<CompilerOptions$1> & {
@@ -366,4 +377,4 @@ declare const transformVOnce: NodeTransform;
 
 declare const transformVText: 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, type StructuralDirectiveTransform, TransformContext, type TransformOptions, type TransformPreset, type VaporDirectiveNode, compile, createStructuralDirectiveTransform, resolveDirectiveNode, resolveNode, transform, transformChildren, transformElement, transformNode, transformTemplateRef, transformText, transformVBind, transformVFor, transformVHtml, transformVIf, transformVModel, transformVOn, transformVOnce, transformVShow, transformVSlot, transformVSlots, transformVText };
+export { type BaseIRNode, type BlockIRNode, type CompilerOptions, type CreateComponentIRNode, type CreateNodesIRNode, 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 InsertionStateTypes, type KeyOverride, type NodeTransform, type OperationNode, type PrependNodeIRNode, type RootIRNode, type RootNode, type SetDynamicEventsIRNode, type SetDynamicPropsIRNode, type SetEventIRNode, type SetHtmlIRNode, type SetNodesIRNode, type SetPropIRNode, type SetTemplateRefIRNode, type SlotBlockIRNode, type SlotOutletIRNode, type StructuralDirectiveTransform, TransformContext, type TransformOptions, type TransformPreset, type VaporDirectiveNode, compile, createStructuralDirectiveTransform, isBlockOperation, resolveDirectiveNode, resolveNode, transform, transformChildren, transformElement, transformNode, transformTemplateRef, transformText, transformVBind, transformVFor, transformVHtml, transformVIf, transformVModel, transformVOn, transformVOnce, transformVShow, transformVSlot, transformVSlots, transformVText };

package/dist/index.d.ts

@@ -116,14 +116,15 @@ declare enum IRNodeTypes {
     SET_TEMPLATE_REF = 8,
     INSERT_NODE = 9,
     PREPEND_NODE = 10,
-    CREATE_TEXT_NODE = 11,
-    CREATE_COMPONENT_NODE = 12,
-    SLOT_OUTLET_NODE = 13,
-    DIRECTIVE = 14,
-    DECLARE_OLD_REF = 15,// consider make it more general
-    IF = 16,
-    FOR = 17,
-    GET_TEXT_CHILD = 18
+    CREATE_COMPONENT_NODE = 11,
+    SLOT_OUTLET_NODE = 12,
+    DIRECTIVE = 13,
+    DECLARE_OLD_REF = 14,// consider make it more general
+    IF = 15,
+    FOR = 16,
+    GET_TEXT_CHILD = 17,
+    CREATE_NODES = 18,
+    SET_NODES = 19
 }
 interface BaseIRNode {
     type: IRNodeTypes;
@@ -161,6 +162,8 @@ interface IfIRNode extends BaseIRNode {
     positive: BlockIRNode;
     negative?: BlockIRNode | IfIRNode;
     once?: boolean;
+    parent?: number;
+    anchor?: number;
 }
 interface IRFor {
     source: SimpleExpressionNode;
@@ -176,6 +179,8 @@ interface ForIRNode extends BaseIRNode, IRFor {
     once: boolean;
     component: boolean;
     onlyChild: boolean;
+    parent?: number;
+    anchor?: number;
 }
 interface SetPropIRNode extends BaseIRNode {
     type: IRNodeTypes.SET_PROP;
@@ -195,12 +200,11 @@ interface SetDynamicEventsIRNode extends BaseIRNode {
     element: number;
     event: SimpleExpressionNode;
 }
-interface SetTextIRNode extends BaseIRNode {
-    type: IRNodeTypes.SET_TEXT;
+interface SetNodesIRNode extends BaseIRNode {
+    type: IRNodeTypes.SET_NODES;
     element: number;
     values: SimpleExpressionNode[];
     generated?: boolean;
-    jsx?: boolean;
 }
 type KeyOverride = [find: string, replacement: string];
 interface SetEventIRNode extends BaseIRNode {
@@ -230,11 +234,10 @@ interface SetTemplateRefIRNode extends BaseIRNode {
     refFor: boolean;
     effect: boolean;
 }
-interface CreateTextNodeIRNode extends BaseIRNode {
-    type: IRNodeTypes.CREATE_TEXT_NODE;
+interface CreateNodesIRNode extends BaseIRNode {
+    type: IRNodeTypes.CREATE_NODES;
     id: number;
     values?: SimpleExpressionNode[];
-    jsx?: boolean;
 }
 interface InsertNodeIRNode extends BaseIRNode {
     type: IRNodeTypes.INSERT_NODE;
@@ -266,6 +269,8 @@ interface CreateComponentIRNode extends BaseIRNode {
     root: boolean;
     once: boolean;
     dynamic?: SimpleExpressionNode;
+    parent?: number;
+    anchor?: number;
 }
 interface DeclareOldRefIRNode extends BaseIRNode {
     type: IRNodeTypes.DECLARE_OLD_REF;
@@ -277,13 +282,15 @@ interface SlotOutletIRNode extends BaseIRNode {
     name: SimpleExpressionNode;
     props: IRProps[];
     fallback?: BlockIRNode;
+    parent?: number;
+    anchor?: number;
 }
 interface GetTextChildIRNode extends BaseIRNode {
     type: IRNodeTypes.GET_TEXT_CHILD;
     parent: number;
 }
 type IRNode = OperationNode | RootIRNode;
-type OperationNode = SetPropIRNode | SetDynamicPropsIRNode | SetTextIRNode | SetEventIRNode | SetDynamicEventsIRNode | SetHtmlIRNode | SetTemplateRefIRNode | CreateTextNodeIRNode | InsertNodeIRNode | PrependNodeIRNode | DirectiveIRNode | IfIRNode | ForIRNode | CreateComponentIRNode | DeclareOldRefIRNode | SlotOutletIRNode | GetTextChildIRNode;
+type OperationNode = SetPropIRNode | SetDynamicPropsIRNode | SetNodesIRNode | SetEventIRNode | SetDynamicEventsIRNode | SetHtmlIRNode | SetTemplateRefIRNode | CreateNodesIRNode | InsertNodeIRNode | PrependNodeIRNode | DirectiveIRNode | IfIRNode | ForIRNode | CreateComponentIRNode | DeclareOldRefIRNode | SlotOutletIRNode | GetTextChildIRNode;
 declare enum DynamicFlag {
     NONE = 0,
     /**
@@ -306,6 +313,7 @@ interface IRDynamicInfo {
     children: IRDynamicInfo[];
     template?: number;
     hasDynamicChild?: boolean;
+    operation?: OperationNode;
 }
 interface IREffect {
     expressions: SimpleExpressionNode[];
@@ -320,9 +328,12 @@ type VaporDirectiveNode = Overwrite<DirectiveNode, {
     exp: Exclude<DirectiveNode['exp'], CompoundExpressionNode>;
     arg: Exclude<DirectiveNode['arg'], CompoundExpressionNode>;
 }>;
+type InsertionStateTypes = IfIRNode | ForIRNode | SlotOutletIRNode | CreateComponentIRNode;
+declare function isBlockOperation(op: OperationNode): op is InsertionStateTypes;
 
 interface VaporCodegenResult extends Omit<VaporCodegenResult$1, 'ast'> {
     ast: RootIRNode;
+    customHelpers: Set<string>;
 }
 declare function compile(source: JSXElement | JSXFragment | string, options?: CompilerOptions): VaporCodegenResult;
 type CompilerOptions = HackOptions<CompilerOptions$1> & {
@@ -366,4 +377,4 @@ declare const transformVOnce: NodeTransform;
 
 declare const transformVText: 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, type StructuralDirectiveTransform, TransformContext, type TransformOptions, type TransformPreset, type VaporDirectiveNode, compile, createStructuralDirectiveTransform, resolveDirectiveNode, resolveNode, transform, transformChildren, transformElement, transformNode, transformTemplateRef, transformText, transformVBind, transformVFor, transformVHtml, transformVIf, transformVModel, transformVOn, transformVOnce, transformVShow, transformVSlot, transformVSlots, transformVText };
+export { type BaseIRNode, type BlockIRNode, type CompilerOptions, type CreateComponentIRNode, type CreateNodesIRNode, 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 InsertionStateTypes, type KeyOverride, type NodeTransform, type OperationNode, type PrependNodeIRNode, type RootIRNode, type RootNode, type SetDynamicEventsIRNode, type SetDynamicPropsIRNode, type SetEventIRNode, type SetHtmlIRNode, type SetNodesIRNode, type SetPropIRNode, type SetTemplateRefIRNode, type SlotBlockIRNode, type SlotOutletIRNode, type StructuralDirectiveTransform, TransformContext, type TransformOptions, type TransformPreset, type VaporDirectiveNode, compile, createStructuralDirectiveTransform, isBlockOperation, resolveDirectiveNode, resolveNode, transform, transformChildren, transformElement, transformNode, transformTemplateRef, transformText, transformVBind, transformVFor, transformVHtml, transformVIf, transformVModel, transformVOn, transformVOnce, transformVShow, transformVSlot, transformVSlots, transformVText };

package/dist/index.js

@@ -5,6 +5,13 @@ import {
 } from "@vue/compiler-vapor";
 import { extend as extend5, isString as isString3 } from "@vue/shared";
 
+// src/generate.ts
+import {
+  genCall,
+  genExpression,
+  NEWLINE
+} from "@vue/compiler-vapor";
+
 // src/ir/component.ts
 var IRDynamicPropsKind = /* @__PURE__ */ ((IRDynamicPropsKind2) => {
   IRDynamicPropsKind2[IRDynamicPropsKind2["EXPRESSION"] = 0] = "EXPRESSION";
@@ -33,14 +40,15 @@ var IRNodeTypes = /* @__PURE__ */ ((IRNodeTypes2) => {
   IRNodeTypes2[IRNodeTypes2["SET_TEMPLATE_REF"] = 8] = "SET_TEMPLATE_REF";
   IRNodeTypes2[IRNodeTypes2["INSERT_NODE"] = 9] = "INSERT_NODE";
   IRNodeTypes2[IRNodeTypes2["PREPEND_NODE"] = 10] = "PREPEND_NODE";
-  IRNodeTypes2[IRNodeTypes2["CREATE_TEXT_NODE"] = 11] = "CREATE_TEXT_NODE";
-  IRNodeTypes2[IRNodeTypes2["CREATE_COMPONENT_NODE"] = 12] = "CREATE_COMPONENT_NODE";
-  IRNodeTypes2[IRNodeTypes2["SLOT_OUTLET_NODE"] = 13] = "SLOT_OUTLET_NODE";
-  IRNodeTypes2[IRNodeTypes2["DIRECTIVE"] = 14] = "DIRECTIVE";
-  IRNodeTypes2[IRNodeTypes2["DECLARE_OLD_REF"] = 15] = "DECLARE_OLD_REF";
-  IRNodeTypes2[IRNodeTypes2["IF"] = 16] = "IF";
-  IRNodeTypes2[IRNodeTypes2["FOR"] = 17] = "FOR";
-  IRNodeTypes2[IRNodeTypes2["GET_TEXT_CHILD"] = 18] = "GET_TEXT_CHILD";
+  IRNodeTypes2[IRNodeTypes2["CREATE_COMPONENT_NODE"] = 11] = "CREATE_COMPONENT_NODE";
+  IRNodeTypes2[IRNodeTypes2["SLOT_OUTLET_NODE"] = 12] = "SLOT_OUTLET_NODE";
+  IRNodeTypes2[IRNodeTypes2["DIRECTIVE"] = 13] = "DIRECTIVE";
+  IRNodeTypes2[IRNodeTypes2["DECLARE_OLD_REF"] = 14] = "DECLARE_OLD_REF";
+  IRNodeTypes2[IRNodeTypes2["IF"] = 15] = "IF";
+  IRNodeTypes2[IRNodeTypes2["FOR"] = 16] = "FOR";
+  IRNodeTypes2[IRNodeTypes2["GET_TEXT_CHILD"] = 17] = "GET_TEXT_CHILD";
+  IRNodeTypes2[IRNodeTypes2["CREATE_NODES"] = 18] = "CREATE_NODES";
+  IRNodeTypes2[IRNodeTypes2["SET_NODES"] = 19] = "SET_NODES";
   return IRNodeTypes2;
 })(IRNodeTypes || {});
 var DynamicFlag = /* @__PURE__ */ ((DynamicFlag2) => {
@@ -50,6 +58,49 @@ var DynamicFlag = /* @__PURE__ */ ((DynamicFlag2) => {
   DynamicFlag2[DynamicFlag2["INSERT"] = 4] = "INSERT";
   return DynamicFlag2;
 })(DynamicFlag || {});
+function isBlockOperation(op) {
+  const type = op.type;
+  return type === 11 /* CREATE_COMPONENT_NODE */ || type === 12 /* SLOT_OUTLET_NODE */ || type === 15 /* IF */ || type === 16 /* FOR */;
+}
+
+// src/generate.ts
+var customGenOperation = (oper, context) => {
+  if (oper.type === 18 /* CREATE_NODES */) {
+    return genCreateNodes(oper, context);
+  } else if (oper.type === 19 /* SET_NODES */) {
+    return genSetNodes(oper, context);
+  }
+};
+function genSetNodes(oper, context) {
+  const { helper } = context;
+  const { element, values, generated } = oper;
+  return [
+    NEWLINE,
+    ...genCall(
+      helper("setNodes"),
+      `${generated ? "x" : "n"}${element}`,
+      combineValues(values, context)
+    )
+  ];
+}
+function genCreateNodes(oper, context) {
+  const { helper } = context;
+  const { id, values } = oper;
+  return [
+    NEWLINE,
+    `const n${id} = `,
+    ...genCall(helper("createNodes"), values && combineValues(values, context))
+  ];
+}
+function combineValues(values, context) {
+  return values.flatMap((value, i) => {
+    const exp = genExpression(value, context);
+    if (i > 0) {
+      exp.unshift(", ");
+    }
+    return exp;
+  });
+}
 
 // src/transform.ts
 import {
@@ -217,17 +268,25 @@ function resolveNode(node, context) {
   const props = node.openingElement.attributes.reduce(
     (result, attr) => {
       if (attr.type === "JSXAttribute") {
-        if (tagType === ElementTypes.COMPONENT) {
-          result.push(resolveDirectiveNode(attr, context));
-        } else {
-          result.push({
+        result.push(
+          attr.value?.type === "StringLiteral" ? {
             type: NodeTypes.ATTRIBUTE,
             name: String(attr.name.name),
             nameLoc: resolveLocation(attr.name.loc, context),
             value: resolveValue(attr.value, context),
             loc: resolveLocation(attr.loc, context)
-          });
-        }
+          } : resolveDirectiveNode(attr, context)
+        );
+      } else if (attr.type === "JSXSpreadAttribute") {
+        result.push({
+          type: NodeTypes.DIRECTIVE,
+          name: "bind",
+          rawName: getText(attr, context),
+          exp: resolveExpression(attr.argument, context),
+          arg: void 0,
+          loc: resolveLocation(node.loc, context),
+          modifiers: []
+        });
       }
       return result;
     },
@@ -249,34 +308,35 @@ var namespaceRE = /^(?:\$([\w-]+)\$)?([\w-]+)?/;
 function resolveDirectiveNode(node, context, withFn = false) {
   const { value, name } = node;
   let 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 [newName, modifiers2] = nameString.split("_");
-    nameString = newName;
-    argString = `_${modifiers2}`;
-  }
+  const isDirective = nameString.startsWith("v-");
   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("_");
+  let argString = name.type === "JSXNamespacedName" ? name.name.name : "";
+  if (name.type !== "JSXNamespacedName" && !argString) {
+    ;
+    [nameString, ...modifiers] = nameString.split("_");
+  } else {
+    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 arg = isDirective ? argString && name.type === "JSXNamespacedName" ? resolveSimpleExpression(argString, isStatic, name.name.loc) : void 0 : resolveSimpleExpression(nameString, true, name.loc);
   const exp = value ? withFn && value.type === "JSXExpressionContainer" ? resolveExpressionWithFn(value.expression, context) : resolveExpression(value, context) : void 0;
   return {
     type: NodeTypes.DIRECTIVE,
-    name: nameString.slice(2),
-    rawName: `${nameString}:${argString}`,
+    name: isDirective ? nameString.slice(2) : "bind",
+    rawName: getText(name, context),
     exp,
     arg,
     loc: resolveLocation(node.loc, context),
@@ -358,6 +418,7 @@ function wrapFragment(node) {
   ]);
 }
 var EMPTY_EXPRESSION = createSimpleExpression2("", true);
+var isFragmentNode = (node) => node.type === 0 /* ROOT */ || node.type === "JSXFragment" || node.type === "JSXElement" && !!isTemplate(node);
 
 // src/transform.ts
 var defaultOptions = {
@@ -582,18 +643,15 @@ function processDynamicChildren(context) {
           context.childrenTemplate[index - prevDynamics.length] = `<!>`;
           prevDynamics[0].flags -= 2 /* NON_TEMPLATE */;
           const anchor = prevDynamics[0].anchor = context.increaseId();
-          context.registerOperation({
-            type: 9 /* INSERT_NODE */,
-            elements: prevDynamics.map((child2) => child2.id),
-            parent: context.reference(),
-            anchor
-          });
+          registerInsertion(prevDynamics, context, anchor);
         } else {
-          context.registerOperation({
-            type: 10 /* PREPEND_NODE */,
-            elements: prevDynamics.map((child2) => child2.id),
-            parent: context.reference()
-          });
+          prevDynamics[0].flags -= 2 /* NON_TEMPLATE */;
+          registerInsertion(
+            prevDynamics,
+            context,
+            -1
+            /* prepend */
+          );
         }
         prevDynamics = [];
       }
@@ -601,11 +659,23 @@ function processDynamicChildren(context) {
     }
   }
   if (prevDynamics.length) {
-    context.registerOperation({
-      type: 9 /* INSERT_NODE */,
-      elements: prevDynamics.map((child) => child.id),
-      parent: context.reference()
-    });
+    registerInsertion(prevDynamics, context);
+  }
+}
+function registerInsertion(dynamics, context, anchor) {
+  for (const child of dynamics) {
+    console.log(child);
+    if (child.template != null) {
+      context.registerOperation({
+        type: 9 /* INSERT_NODE */,
+        elements: dynamics.map((child2) => child2.id),
+        parent: context.reference(),
+        anchor
+      });
+    } else if (child.operation && isBlockOperation(child.operation)) {
+      child.operation.parent = context.reference();
+      child.operation.anchor = anchor;
+    }
   }
 }
 
@@ -667,8 +737,8 @@ function transformComponentElement(tag, propsResult, singleRoot, context) {
     context.component.add(tag);
   }
   context.dynamic.flags |= 2 /* NON_TEMPLATE */ | 4 /* INSERT */;
-  context.registerOperation({
-    type: 12 /* CREATE_COMPONENT_NODE */,
+  context.dynamic.operation = {
+    type: 11 /* CREATE_COMPONENT_NODE */,
     id: context.reference(),
     tag,
     props: propsResult[0] ? propsResult[1] : [propsResult[1]],
@@ -676,7 +746,7 @@ function transformComponentElement(tag, propsResult, singleRoot, context) {
     root: singleRoot,
     slots: [...context.slots],
     once: context.inVOnce
-  });
+  };
   context.slots = [];
 }
 function transformNativeElement(tag, propsResult, singleRoot, context) {
@@ -775,7 +845,7 @@ 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 (!isDirectiveRegex.test(name) && !isEventRegex.test(name) && (!prop.value || prop.value.type === "StringLiteral")) {
     if (isReservedProp(name)) return;
     return {
       key: resolveSimpleExpression(name, true, prop.name.loc),
@@ -840,7 +910,7 @@ var transformTemplateRef = (node, context) => {
     const id = context.reference();
     const effect = !isConstantExpression(value);
     effect && context.registerOperation({
-      type: 15 /* DECLARE_OLD_REF */,
+      type: 14 /* DECLARE_OLD_REF */,
       id
     });
     context.registerEffect([value], {
@@ -862,7 +932,7 @@ function processConditionalExpression(node, context) {
   const condition = resolveExpression(test, context);
   const [branch, onExit] = createBranch(consequent, context);
   const operation = {
-    type: 16 /* IF */,
+    type: 15 /* IF */,
     id,
     condition,
     positive: branch,
@@ -871,7 +941,7 @@ function processConditionalExpression(node, context) {
   return [
     () => {
       onExit();
-      context.registerOperation(operation);
+      context.dynamic.operation = operation;
     },
     () => {
       const [branch2, onExit2] = createBranch(alternate, context);
@@ -892,7 +962,7 @@ function processLogicalExpression(node, context) {
     context
   );
   const operation = {
-    type: 16 /* IF */,
+    type: 15 /* IF */,
     id,
     condition,
     positive: branch,
@@ -901,7 +971,7 @@ function processLogicalExpression(node, context) {
   return [
     () => {
       onExit();
-      context.registerOperation(operation);
+      context.dynamic.operation = operation;
     },
     () => {
       const [branch2, onExit2] = createBranch(
@@ -923,18 +993,35 @@ var transformText = (node, context) => {
     context.dynamic.flags |= 2 /* NON_TEMPLATE */;
     return;
   }
-  if (node.type === "JSXElement" && !isTemplate(node) && !isJSXComponent(node) && isAllTextLike(node.children)) {
-    processTextLikeContainer(
-      node.children,
-      context
-    );
+  const isFragment = isFragmentNode(node);
+  if ((node.type === "JSXElement" && !isTemplate(node) && !isJSXComponent(node) || isFragment) && node.children.length) {
+    let hasInterp = false;
+    let isAllTextLike = true;
+    for (const c of node.children) {
+      if (c.type === "JSXExpressionContainer" && c.expression.type !== "ConditionalExpression" && c.expression.type !== "LogicalExpression") {
+        hasInterp = true;
+      } else if (c.type !== "JSXText") {
+        isAllTextLike = false;
+      }
+    }
+    if (!isFragment && isAllTextLike && hasInterp) {
+      processTextContainer(node.children, context);
+    } else if (hasInterp) {
+      for (let i = 0; i < node.children.length; i++) {
+        const c = node.children[i];
+        const prev = node.children[i - 1];
+        if (c.type === "JSXExpressionContainer" && prev && prev.type === "JSXText") {
+          seen.get(context.root).add(prev);
+        }
+      }
+    }
   } else if (node.type === "JSXExpressionContainer") {
     if (node.expression.type === "ConditionalExpression") {
       return processConditionalExpression(node.expression, context);
     } else if (node.expression.type === "LogicalExpression") {
       return processLogicalExpression(node.expression, context);
     } else {
-      processTextLike(context);
+      processInterpolation(context);
     }
   } else if (node.type === "JSXText") {
     const value = resolveJSXText(node);
@@ -945,35 +1032,54 @@ var transformText = (node, context) => {
     }
   }
 };
-function processTextLike(context) {
-  const nexts = context.parent.node.children?.slice(context.index);
+function processInterpolation(context) {
+  const parent = context.parent.node;
+  const children = parent.children;
+  const nexts = children.slice(context.index);
   const idx = nexts.findIndex((n) => !isTextLike(n));
   const nodes = idx !== -1 ? nexts.slice(0, idx) : nexts;
+  const prev = children[context.index - 1];
+  if (prev && prev.type === "JSXText") {
+    nodes.unshift(prev);
+  }
   const values = createTextLikeExpressions(nodes, context);
   if (!values.length) {
     context.dynamic.flags |= 2 /* NON_TEMPLATE */;
     return;
   }
   const id = context.reference();
-  context.dynamic.flags |= 4 /* INSERT */ | 2 /* NON_TEMPLATE */;
-  context.registerOperation({
-    type: 11 /* CREATE_TEXT_NODE */,
-    id,
-    values,
-    jsx: true
-  });
+  if (isFragmentNode(parent)) {
+    context.registerOperation({
+      type: 18 /* CREATE_NODES */,
+      id,
+      values
+    });
+  } else {
+    context.template += " ";
+    context.registerOperation({
+      type: 19 /* SET_NODES */,
+      element: id,
+      values
+    });
+  }
 }
-function processTextLikeContainer(children, context) {
+function processTextContainer(children, context) {
   const values = createTextLikeExpressions(children, context);
   const literals = values.map(getLiteralExpressionValue);
   if (literals.every((l) => l != null)) {
     context.childrenTemplate = literals.map((l) => String(l));
   } else {
+    context.childrenTemplate = [" "];
     context.registerOperation({
-      type: 4 /* SET_TEXT */,
+      type: 17 /* GET_TEXT_CHILD */,
+      parent: context.reference()
+    });
+    context.registerOperation({
+      type: 19 /* SET_NODES */,
       element: context.reference(),
       values,
-      jsx: true
+      // indicates this node is generated, so prefix should be "x" instead of "n"
+      generated: true
     });
   }
 }
@@ -986,10 +1092,6 @@ function createTextLikeExpressions(nodes, context) {
   }
   return values;
 }
-function isAllTextLike(children) {
-  return !!children.length && children.every(isTextLike) && // at least one an interpolation
-  children.some((n) => n.type === "JSXExpressionContainer");
-}
 function isTextLike(node) {
   return node.type === "JSXExpressionContainer" && node.expression.type !== "ConditionalExpression" && node.expression.type !== "LogicalExpression" || node.type === "JSXText";
 }
@@ -1051,8 +1153,8 @@ function processFor(node, dir, context) {
     exitBlock();
     const { parent } = context;
     const isOnlyChild = parent && parent.block.node !== parent.node && parent.node.children.length === 1;
-    context.registerOperation({
-      type: 17 /* FOR */,
+    context.dynamic.operation = {
+      type: 16 /* FOR */,
       id,
       source,
       value,
@@ -1063,7 +1165,7 @@ function processFor(node, dir, context) {
       once: context.inVOnce || !!(source.ast && isConstantNode(source.ast, {})),
       component: isComponent,
       onlyChild: !!isOnlyChild
-    });
+    };
   };
 }
 function getForParseResult(dir, context) {
@@ -1135,22 +1237,28 @@ function processIf(node, attribute, context) {
     const [branch, onExit] = createBranch(node, context);
     return () => {
       onExit();
-      context.registerOperation({
-        type: 16 /* IF */,
+      context.dynamic.operation = {
+        type: 15 /* IF */,
         id,
         condition: dir.exp,
         positive: branch,
         once: context.inVOnce || isConstantNode2(attribute.value, context.options.bindingMetadata)
-      });
+      };
     };
   } else {
     const siblingIf = getSiblingIf(context);
-    const { operation } = context.block;
-    let lastIfNode = operation.at(-1);
+    const siblings = context.parent && context.parent.dynamic.children;
+    let lastIfNode;
+    if (siblings) {
+      let i = siblings.length;
+      while (i--) {
+        if (siblings[i].operation) lastIfNode = siblings[i].operation;
+      }
+    }
     if (
       // check if v-if is the sibling node
       !siblingIf || // check if IfNode is the last operation and get the root IfNode
-      !lastIfNode || lastIfNode.type !== 16 /* IF */
+      !lastIfNode || lastIfNode.type !== 15 /* IF */
     ) {
       context.options.onError(
         createCompilerError2(
@@ -1160,7 +1268,7 @@ function processIf(node, attribute, context) {
       );
       return;
     }
-    while (lastIfNode.negative && lastIfNode.negative.type === 16 /* IF */) {
+    while (lastIfNode.negative && lastIfNode.negative.type === 15 /* IF */) {
       lastIfNode = lastIfNode.negative;
     }
     if (dir.name === "else-if" && lastIfNode.negative) {
@@ -1177,7 +1285,7 @@ function processIf(node, attribute, context) {
       lastIfNode.negative = branch;
     } else {
       lastIfNode.negative = {
-        type: 16 /* IF */,
+        type: 15 /* IF */,
         id: -1,
         condition: dir.exp,
         positive: branch,
@@ -1556,7 +1664,10 @@ function compile(source, options = {}) {
       )
     })
   );
-  return generate(ir, resolvedOptions);
+  return generate(ir, {
+    ...resolvedOptions,
+    customGenOperation
+  });
 }
 function getBaseTransformPreset() {
   return [
@@ -1599,6 +1710,7 @@ export {
   compile,
   createStructuralDirectiveTransform,
   generate,
+  isBlockOperation,
   resolveDirectiveNode,
   resolveNode,
   transform,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-jsx-vapor/compiler",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "Vue JSX Vapor Compiler",
   "type": "module",
   "keywords": [
@@ -50,9 +50,9 @@
   "dependencies": {
     "@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"
+    "@vue/compiler-dom": "https://pkg.pr.new/@vue/compiler-dom@34957eb",
+    "@vue/compiler-vapor": "https://pkg.pr.new/@vue/compiler-vapor@13044",
+    "@vue/shared": "https://pkg.pr.new/@vue/shared@34957eb"
   },
   "scripts": {
     "build": "tsup",