@ktjs/vite-plugin-ktjsx 0.1.2 → 0.1.3

package/dist/index.js

@@ -68959,9 +68959,6 @@ var libExports$1 = requireLib();
 
 var libExports = requireLib$n();
 
-const SVG_ATTR_FLAG = "__kt_svg__";
-const MATHML_ATTR_FLAG = "__kt_mathml__";
-
 function isSvgTag(tag) {
   return tag === "svg" || typeof tag === "string" && tag.startsWith("svg:");
 }
@@ -69029,7 +69026,7 @@ function addFlagToSvgMathMLElement(path) {
     return;
   }
   const attrs = opening.attributes || [];
-  const flag = inSvgContext ? SVG_ATTR_FLAG : MATHML_ATTR_FLAG;
+  const flag = inSvgContext ? "__svg" : "__mathml";
   const hasFlag = attrs.some((a) => libExports.isJSXAttribute(a) && libExports.isJSXIdentifier(a.name) && a.name.name === flag);
   if (!hasFlag) {
     attrs.push(libExports.jsxAttribute(libExports.jsxIdentifier(flag)));
@@ -69038,66 +69035,67 @@ function addFlagToSvgMathMLElement(path) {
 }
 
 function hasConditionalDirective(element) {
-  const openingElement = element.openingElement;
-  const attributes = openingElement.attributes || [];
+  const attributes = element.openingElement.attributes || [];
   return attributes.some((attr) => {
-    if (libExports$1.types.isJSXAttribute(attr)) {
-      const name = attr.name;
-      if (libExports$1.types.isJSXIdentifier(name)) {
-        return name.name === "k-if" || name.name === "k-else-if" || name.name === "k-else";
-      }
+    if (!libExports.isJSXAttribute(attr)) {
+      return false;
     }
-    return false;
+    if (!libExports.isJSXIdentifier(attr.name)) {
+      return false;
+    }
+    return attr.name.name === "k-if" || attr.name.name === "k-else-if" || attr.name.name === "k-else";
   });
 }
 function getConditionalDirective(element) {
-  const openingElement = element.openingElement;
-  const attributes = openingElement.attributes || [];
+  const attributes = element.openingElement.attributes || [];
   for (const attr of attributes) {
-    if (libExports$1.types.isJSXAttribute(attr)) {
-      const name = attr.name;
-      if (libExports$1.types.isJSXIdentifier(name)) {
-        if (name.name === "k-if" || name.name === "k-else-if") {
-          let condition = null;
-          if (attr.value) {
-            if (libExports$1.types.isJSXExpressionContainer(attr.value)) {
-              condition = attr.value.expression;
-            } else {
-              condition = attr.value;
-            }
-          }
-          return {
-            type: name.name,
-            condition
-          };
-        } else if (name.name === "k-else") {
-          return { type: "k-else", condition: null };
+    if (!libExports.isJSXAttribute(attr) || !libExports.isJSXIdentifier(attr.name)) {
+      continue;
+    }
+    if (attr.name.name === "k-if" || attr.name.name === "k-else-if") {
+      let condition = null;
+      if (attr.value) {
+        if (libExports.isJSXExpressionContainer(attr.value)) {
+          condition = attr.value.expression;
+        } else if (libExports.isStringLiteral(attr.value)) {
+          condition = attr.value;
         }
       }
+      return { type: attr.name.name, condition };
+    }
+    if (attr.name.name === "k-else") {
+      return { type: "k-else", condition: null };
     }
   }
   return null;
 }
 function removeConditionalDirectives(attributes) {
   return attributes.filter((attr) => {
-    if (!libExports$1.types.isJSXAttribute(attr)) return true;
-    const name = attr.name;
-    if (!libExports$1.types.isJSXIdentifier(name)) return true;
-    return name.name !== "k-if" && name.name !== "k-else-if" && name.name !== "k-else";
+    if (!libExports.isJSXAttribute(attr)) {
+      return true;
+    }
+    if (!libExports.isJSXIdentifier(attr.name)) {
+      return true;
+    }
+    return attr.name.name !== "k-if" && attr.name.name !== "k-else-if" && attr.name.name !== "k-else";
   });
 }
 function createCompoundCondition(prevConditions, currentCondition = null) {
   if (prevConditions.length === 0) {
-    return currentCondition || libExports$1.types.booleanLiteral(true);
+    if (currentCondition && libExports.isExpression(currentCondition)) {
+      return currentCondition;
+    }
+    return libExports.booleanLiteral(true);
   }
-  let compound = libExports$1.types.unaryExpression("!", prevConditions[0] || libExports$1.types.booleanLiteral(false));
+  const first = prevConditions[0];
+  let compound = libExports.unaryExpression("!", libExports.isExpression(first) ? first : libExports.booleanLiteral(false));
   for (let i = 1; i < prevConditions.length; i++) {
-    const condition = prevConditions[i] || libExports$1.types.booleanLiteral(false);
-    const negated = libExports$1.types.unaryExpression("!", condition);
-    compound = libExports$1.types.logicalExpression("&&", compound, negated);
+    const condition = prevConditions[i];
+    const negated = libExports.unaryExpression("!", libExports.isExpression(condition) ? condition : libExports.booleanLiteral(false));
+    compound = libExports.logicalExpression("&&", compound, negated);
   }
-  if (currentCondition) {
-    compound = libExports$1.types.logicalExpression("&&", compound, currentCondition);
+  if (currentCondition && libExports.isExpression(currentCondition)) {
+    compound = libExports.logicalExpression("&&", compound, currentCondition);
   }
   return compound;
 }
@@ -69128,42 +69126,226 @@ function transformConditionalChains(path) {
     const elementPath = chain[i];
     const element = elementPath.node;
     const directive = getConditionalDirective(element);
-    if (!directive) continue;
+    if (!directive) {
+      continue;
+    }
     const openingElement = element.openingElement;
     const newAttributes = removeConditionalDirectives(openingElement.attributes || []);
     let newCondition;
     if (directive.type === "k-if") {
-      newCondition = directive.condition || libExports$1.types.booleanLiteral(true);
+      newCondition = libExports.isExpression(directive.condition) ? directive.condition : libExports.booleanLiteral(true);
       prevConditions.push(directive.condition);
     } else if (directive.type === "k-else-if") {
       if (prevConditions.length === 0) {
-        newCondition = directive.condition || libExports$1.types.booleanLiteral(true);
+        newCondition = libExports.isExpression(directive.condition) ? directive.condition : libExports.booleanLiteral(true);
       } else {
-        const currentCondition = directive.condition || libExports$1.types.booleanLiteral(true);
-        newCondition = createCompoundCondition(prevConditions, currentCondition);
+        newCondition = createCompoundCondition(prevConditions, directive.condition);
       }
       prevConditions.push(directive.condition);
-    } else if (directive.type === "k-else") {
+    } else {
       if (prevConditions.length === 0) {
-        newCondition = libExports$1.types.booleanLiteral(true);
+        newCondition = libExports.booleanLiteral(true);
       } else {
         newCondition = createCompoundCondition(prevConditions);
       }
     }
-    const kIfAttribute = libExports$1.types.jsxAttribute(libExports$1.types.jsxIdentifier("k-if"), libExports$1.types.jsxExpressionContainer(newCondition));
-    newAttributes.push(kIfAttribute);
+    newAttributes.push(libExports.jsxAttribute(libExports.jsxIdentifier("k-if"), libExports.jsxExpressionContainer(newCondition)));
     openingElement.attributes = newAttributes;
     elementPath.skip();
   }
 }
 
+const KFOR_SINGLE_PATTERN = /^([A-Za-z_$][A-Za-z0-9_$]*)\s+(in|of)\s+([\s\S]+)$/;
+const KFOR_TUPLE_PATTERN = /^\(\s*([A-Za-z_$][A-Za-z0-9_$]*)(?:\s*,\s*([A-Za-z_$][A-Za-z0-9_$]*))?(?:\s*,\s*([A-Za-z_$][A-Za-z0-9_$]*))?\s*\)\s+(in|of)\s+([\s\S]+)$/;
+function validateDirectiveCombinations(path) {
+  const opening = path.node.openingElement;
+  const hasFor = hasAttribute(opening, "k-for");
+  const hasIf = hasAttribute(opening, "k-if");
+  const hasElse = hasAttribute(opening, "k-else");
+  const hasElseIf = hasAttribute(opening, "k-else-if");
+  if (hasIf && hasElse) {
+    throw path.buildCodeFrameError(
+      "Invalid directive usage: `k-if` and `k-else` cannot be used on the same element."
+    );
+  }
+  if (hasFor && (hasIf || hasElseIf || hasElse)) {
+    throw path.buildCodeFrameError(
+      "Invalid directive usage: `k-for` cannot be combined with `k-if` / `k-else-if` / `k-else` on the same element."
+    );
+  }
+}
+function transformKFor(path) {
+  const opening = path.node.openingElement;
+  const forAttr = getAttribute(opening, "k-for");
+  if (!forAttr) {
+    return false;
+  }
+  const parsedForText = readAttributeStringValue(forAttr, path, "k-for");
+  const parsedFor = parseKForExpression(parsedForText);
+  if (!parsedFor) {
+    throw path.buildCodeFrameError(
+      "Invalid `k-for` expression. Expected `item in list` or `(item, index[, array]) in list`."
+    );
+  }
+  const sourceExpression = parseTextAsExpression(path, parsedFor.source, "k-for source");
+  const keyAttr = getAttribute(opening, "k-key");
+  if (keyAttr && hasStringLikeValue(keyAttr)) {
+    const keyText = readAttributeStringValue(keyAttr, path, "k-key");
+    parseTextAsExpression(path, keyText, "k-key");
+  }
+  const renderNode = libExports.cloneNode(path.node, true);
+  const renderOpening = renderNode.openingElement;
+  renderOpening.attributes = removeAttributes(renderOpening.attributes, ["k-for", "k-key"]);
+  const callbackParams = parsedFor.aliases.map((alias) => libExports.identifier(alias));
+  const callback = libExports.arrowFunctionExpression(callbackParams, renderNode);
+  const mapCall = libExports.callExpression(libExports.memberExpression(sourceExpression, libExports.identifier("map")), [callback]);
+  if (isInsideJSXChildren(path)) {
+    path.replaceWith(libExports.jsxExpressionContainer(mapCall));
+  } else {
+    path.replaceWith(mapCall);
+  }
+  return true;
+}
+function parseKForExpression(raw) {
+  const value = raw.trim();
+  if (!value) {
+    return null;
+  }
+  const tupleMatch = KFOR_TUPLE_PATTERN.exec(value);
+  if (tupleMatch) {
+    const source = tupleMatch[5]?.trim();
+    if (!source) {
+      return null;
+    }
+    const aliases = [tupleMatch[1], tupleMatch[2], tupleMatch[3]].filter(
+      (item) => typeof item === "string" && item.length > 0
+    );
+    return {
+      aliases,
+      source
+    };
+  }
+  const singleMatch = KFOR_SINGLE_PATTERN.exec(value);
+  if (singleMatch) {
+    const source = singleMatch[3]?.trim();
+    if (!source) {
+      return null;
+    }
+    return {
+      aliases: [singleMatch[1]],
+      source
+    };
+  }
+  return null;
+}
+function parseTextAsExpression(path, text, label) {
+  try {
+    const ast = libExports$1.parseSync(`(${text});`, {
+      configFile: false,
+      babelrc: false,
+      sourceType: "module",
+      parserOpts: {
+        plugins: ["typescript", "jsx"]
+      }
+    });
+    if (!ast) {
+      throw new Error("Babel returned an empty AST.");
+    }
+    const statement = ast.program.body[0];
+    if (!statement || !libExports.isExpressionStatement(statement)) {
+      throw new Error("Expected an expression statement.");
+    }
+    return statement.expression;
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    throw path.buildCodeFrameError(`Failed to parse ${label}: ${message}`);
+  }
+}
+function getAttribute(opening, name) {
+  const attributes = opening.attributes || [];
+  for (let i = 0; i < attributes.length; i++) {
+    const attr = attributes[i];
+    if (!libExports.isJSXAttribute(attr) || !libExports.isJSXIdentifier(attr.name)) {
+      continue;
+    }
+    if (attr.name.name === name) {
+      return attr;
+    }
+  }
+  return void 0;
+}
+function hasAttribute(opening, name) {
+  return !!getAttribute(opening, name);
+}
+function readAttributeStringValue(attr, path, attrName) {
+  if (!attr.value) {
+    throw path.buildCodeFrameError(`Directive \`${attrName}\` requires a string value.`);
+  }
+  if (libExports.isStringLiteral(attr.value)) {
+    return attr.value.value;
+  }
+  if (!libExports.isJSXExpressionContainer(attr.value)) {
+    throw path.buildCodeFrameError(`Directive \`${attrName}\` must be a string literal.`);
+  }
+  if (libExports.isJSXEmptyExpression(attr.value.expression)) {
+    throw path.buildCodeFrameError(`Directive \`${attrName}\` cannot be empty.`);
+  }
+  if (libExports.isStringLiteral(attr.value.expression)) {
+    return attr.value.expression.value;
+  }
+  if (libExports.isTemplateLiteral(attr.value.expression) && attr.value.expression.expressions.length === 0) {
+    return attr.value.expression.quasis[0]?.value.cooked ?? "";
+  }
+  throw path.buildCodeFrameError(`Directive \`${attrName}\` must be a string literal.`);
+}
+function hasStringLikeValue(attr) {
+  if (!attr.value) {
+    return false;
+  }
+  if (libExports.isStringLiteral(attr.value)) {
+    return true;
+  }
+  if (!libExports.isJSXExpressionContainer(attr.value)) {
+    return false;
+  }
+  if (libExports.isStringLiteral(attr.value.expression)) {
+    return true;
+  }
+  return libExports.isTemplateLiteral(attr.value.expression) && attr.value.expression.expressions.length === 0;
+}
+function removeAttributes(attributes, names) {
+  const set = new Set(names);
+  if (!attributes || attributes.length === 0) {
+    return [];
+  }
+  return attributes.filter((attr) => {
+    if (!libExports.isJSXAttribute(attr) || !libExports.isJSXIdentifier(attr.name)) {
+      return true;
+    }
+    return !set.has(attr.name.name);
+  });
+}
+function isInsideJSXChildren(path) {
+  if (!path.inList || path.listKey !== "children") {
+    return false;
+  }
+  const parent = path.parentPath;
+  return !!parent && (parent.isJSXElement() || parent.isJSXFragment());
+}
+
 function babelKTjsx() {
   return {
     name: "babel-plugin-ktjsx",
     visitor: {
-      JSXElement(path) {
-        transformConditionalChains(path);
-        addFlagToSvgMathMLElement(path);
+      JSXElement: {
+        enter(path) {
+          validateDirectiveCombinations(path);
+          transformConditionalChains(path);
+          addFlagToSvgMathMLElement(path);
+        },
+        exit(path) {
+          transformKFor(path);
+        }
       }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/vite-plugin-ktjsx",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",