refactor: attribute tags now on MarkoTag AST

.changeset/famous-buttons-fold.md

@@ -0,0 +1,9 @@
+---
+"@marko/translator-default": patch
+"@marko/translator-tags": patch
+"@marko/babel-utils": patch
+"@marko/compiler": patch
+"marko": patch
+---
+
+Make attribute tags a property on the MarkoTag AST and refactor how attribute tags are translated.

packages/babel-utils/index.d.ts

@@ -133,6 +133,7 @@ export interface Tag {
     rootOnly?: boolean;
     rawOpenTag?: boolean;
     openTagOnly?: boolean;
+    controlFlow?: boolean;
     ignoreAttributes?: boolean;
     relaxRequireCommas?: boolean;
     state?: "html" | "static-text" | "parsed-text" | "cdata";
@@ -145,7 +146,7 @@ export type FunctionPlugin<T = any> = (
   path: t.NodePath<T>,
   types: typeof t,
 ) => void;
-type EnterExitPlugin<T = any> = {
+export type EnterExitPlugin<T = any> = {
   enter?(path: t.NodePath<T>, types: typeof t): void;
   exit?(path: t.NodePath<T>, types: typeof t): void;
 };
@@ -174,9 +175,15 @@ export function assertAttributesOrSingleArg(path: t.NodePath<t.MarkoTag>): void;
 export function isNativeTag(path: t.NodePath<t.MarkoTag>): boolean;
 export function isMacroTag(path: t.NodePath<t.MarkoTag>): boolean;
 export function isDynamicTag(path: t.NodePath<t.MarkoTag>): boolean;
-export function isAttributeTag(path: t.NodePath<t.MarkoTag>): boolean;
-export function isTransparentTag(path: t.NodePath<t.MarkoTag>): boolean;
-export function isLoopTag(path: t.NodePath<t.MarkoTag>): boolean;
+export function isAttributeTag(
+  path: t.NodePath<t.MarkoTag>,
+): path is t.NodePath<t.MarkoTag & { name: t.StringLiteral }>;
+export function isTransparentTag(
+  path: t.NodePath<t.MarkoTag>,
+): path is t.NodePath<t.MarkoTag & { name: t.StringLiteral }>;
+export function isLoopTag(
+  path: t.NodePath<t.MarkoTag>,
+): path is t.NodePath<t.MarkoTag & { name: t.StringLiteral }>;
 
 export function registerMacro(path: t.NodePath<any>, name: string): void;
 export function hasMacro(path: t.NodePath<any>, name: string): boolean;

packages/babel-utils/src/assert.js

@@ -1,18 +1,32 @@
 export function assertAllowedAttributes(path, allowed) {
-  const { node } = path;
-  node.attributes.forEach((attr, i) => {
-    if (!allowed.includes(attr.name)) {
-      throw path
-        .get(`attributes.${i}`)
-        .buildCodeFrameError(
-          `Invalid "${node.name.value}" tag attribute: "${attr.name}".`,
-        );
+  let i = 0;
+  for (const attr of path.node.attributes) {
+    if (attr.type === "MarkoSpreadAttribute") {
+      throw path.hub.buildError(
+        attr,
+        `Tag does not support spread attributes.`,
+      );
+    } else if (!allowed.includes(attr.name)) {
+      throw path.hub.buildError(
+        attr,
+        `Tag does not support the \`${attr.name}\` attribute.`,
+      );
     }
-  });
+
+    i++;
+  }
 }
 
 export function assertNoAttributes(path) {
-  assertAllowedAttributes(path, []);
+  const { attributes } = path.node;
+  if (attributes.length) {
+    const start = attributes[0].loc.start;
+    const end = attributes[attributes.length - 1].loc.end;
+    throw path.hub.buildError(
+      { loc: { start, end } },
+      "Tag does not support attributes.",
+    );
+  }
 }
 
 export function assertNoParams(path) {
@@ -28,41 +42,42 @@ export function assertNoParams(path) {
 }
 
 export function assertNoAttributeTags(path) {
-  const exampleAttributeTag = path.get("exampleAttributeTag");
-  if (exampleAttributeTag.node) {
-    throw exampleAttributeTag
-      .get("name")
-      .buildCodeFrameError("@tags must be within a custom element.");
+  if (path.node.attributeTags.length) {
+    throw path.hub.buildError(
+      path.node.attributeTags[0],
+      "Tag not support nested attribute tags.",
+    );
   }
 }
 
 export function assertNoArgs(path) {
-  const { hub } = path;
-  const args = path.get("arguments");
-  if (args.length) {
-    const start = args[0].node.loc.start;
-    const end = args[args.length - 1].node.loc.end;
-    throw hub.buildError(
+  const args = path.node.arguments;
+  if (args && args.length) {
+    const start = args[0].loc.start;
+    const end = args[args.length - 1].loc.end;
+    throw path.hub.buildError(
       { loc: { start, end } },
       "Tag does not support arguments.",
     );
   }
 }
 
 export function assertNoVar(path) {
-  const tagVar = path.get("var");
-  if (tagVar.node) {
-    throw tagVar.buildCodeFrameError("Tag does not support a variable.");
+  if (path.node.var) {
+    throw path.hub.buildError(
+      path.node.var,
+      "Tag does not support a variable.",
+    );
   }
 }
 
 export function assertAttributesOrArgs(path) {
-  const { hub, node } = path;
-  const args = path.get("arguments");
-  if (args.length && (node.attributes.length > 0 || node.body.length)) {
-    const start = args[0].node.loc.start;
-    const end = args[args.length - 1].node.loc.end;
-    throw hub.buildError(
+  const { node } = path;
+  const args = node.arguments;
+  if (args && args.length && (node.attributes.length > 0 || node.body.length)) {
+    const start = args[0].loc.start;
+    const end = args[args.length - 1].loc.end;
+    throw path.hub.buildError(
       { loc: { start, end } },
       "Tag does not support arguments when attributes or body present.",
     );
@@ -71,12 +86,11 @@ export function assertAttributesOrArgs(path) {
 
 export function assertAttributesOrSingleArg(path) {
   assertAttributesOrArgs(path);
-  const { hub } = path;
-  const args = path.get("arguments");
-  if (args.length > 1) {
-    const start = args[1].node.loc.start;
-    const end = args[args.length - 1].node.loc.end;
-    throw hub.buildError(
+  const args = path.node.arguments;
+  if (args && args.length > 1) {
+    const start = args[1].loc.start;
+    const end = args[args.length - 1].loc.end;
+    throw path.hub.buildError(
       { loc: { start, end } },
       "Tag does not support multiple arguments.",
     );

packages/babel-utils/src/tags.js

@@ -213,7 +213,7 @@ export function findParentTag(path) {
 }
 
 export function findAttributeTags(path, attributeTags = []) {
-  path.get("body.body").forEach((child) => {
+  path.get("attributeTags").forEach((child) => {
     if (isAttributeTag(child)) {
       attributeTags.push(child);
     } else if (isTransparentTag(child)) {

packages/compiler/src/babel-plugin/parser.js

@@ -49,7 +49,28 @@ export function parseMarko(file) {
     return node;
   };
   const enterTag = (node) => {
-    currentTag = currentBody.pushContainer("body", node)[0];
+    if (isAttrTag(node)) {
+      if (currentTag === file.path) {
+        throw file.buildCodeFrameError(
+          node.name,
+          "@tags must be nested within another element.",
+        );
+      }
+
+      let previousSiblingIndex = currentBody.length;
+      while (previousSiblingIndex) {
+        let previousSibling = currentBody[--previousSiblingIndex];
+        if (!t.isMarkoComment(previousSibling)) {
+          break;
+        }
+        currentTag.pushContainer("attributeTags", previousSibling.node);
+        currentBody.get("body").get(previousSiblingIndex).remove();
+      }
+
+      currentTag = currentTag.pushContainer("attributeTags", node)[0];
+    } else {
+      currentTag = currentBody.pushContainer("body", node)[0];
+    }
     currentBody = currentTag.get("body");
     onNext(node);
   };
@@ -496,7 +517,8 @@ export function parseMarko(file) {
     },
     onCloseTagEnd(part) {
       const { node } = currentTag;
-      const parserPlugin = node.tagDef?.parser;
+      const tagDef = node.tagDef;
+      const parserPlugin = tagDef?.parser;
       if (preservingWhitespaceUntil === node) {
         preservingWhitespaceUntil = undefined;
       }
@@ -510,9 +532,54 @@ export function parseMarko(file) {
         (hook.default || hook)(currentTag, t);
       }
 
-      currentTag = currentTag.parentPath.parentPath;
+      const parentTag = isAttrTag(node)
+        ? currentTag.parentPath
+        : currentTag.parentPath.parentPath;
+      const { attributeTags } = node;
+
+      if (attributeTags.length) {
+        const isControlFlow = tagDef?.parseOptions?.controlFlow;
+
+        if (node.body.body.length) {
+          const body = [];
+          for (const child of node.body.body) {
+            if (
+              t.isMarkoScriptlet(child) ||
+              (isControlFlow &&
+                (t.isMarkoComment(child) ||
+                  (child.tagDef?.controlFlow && !child.body.body.length)))
+            ) {
+              // When we have a control flow with mixed body and attribute tag content
+              // we move any scriptlets, comments or empty nested control flow.
+              // This is because they initially ambiguous as to whether
+              // they are part of the body or the attributeTags.
+              attributeTags.push(child);
+            } else {
+              body.push(child);
+            }
+          }
+
+          if (isControlFlow && body.length) {
+            onNext();
+            throw file.buildCodeFrameError(
+              body[0],
+              "Cannot have attribute tags and body content under a control flow tag.",
+            );
+          } else {
+            node.body.body = body;
+          }
+
+          attributeTags.sort(sortByStart);
+        }
+
+        if (isControlFlow) {
+          currentTag.remove();
+          parentTag.pushContainer("attributeTags", node);
+        }
+      }
 
-      if (currentTag) {
+      if (parentTag) {
+        currentTag = parentTag;
         currentBody = currentTag.get("body");
       } else {
         currentTag = currentBody = file.path;
@@ -534,3 +601,7 @@ export function parseMarko(file) {
     end: positionAt(ast.end),
   };
 }
+
+function sortByStart(a, b) {
+  return a.start - b.start;
+}

packages/compiler/src/babel-types/generator/patch.js

@@ -30,7 +30,7 @@ Object.assign(Printer.prototype, {
   },
   MarkoPlaceholder(node, parent) {
     if (parent) {
-      const parentBody = parent.body;
+      const parentBody = getBody(parent);
       const prev = parentBody[parentBody.indexOf(node) - 1];
 
       if (prev && (t.isMarkoText(prev) || t.isMarkoPlaceholder(prev))) {
@@ -45,7 +45,7 @@ Object.assign(Printer.prototype, {
   MarkoScriptlet(node, parent) {
     this.removeTrailingNewline();
 
-    if (!(t.isProgram(parent) && parent.body.indexOf(node) === 0)) {
+    if (!(t.isProgram(parent) && getBody(parent)[0] === node)) {
       this.token("\n");
     }
 
@@ -109,7 +109,7 @@ Object.assign(Printer.prototype, {
     printWithParansIfNeeded.call(this, node.value);
   },
   MarkoText(node, parent) {
-    const parentBody = parent.body;
+    const parentBody = getBody(parent);
     const prev = parentBody[parentBody.indexOf(node) - 1];
     const concatToPrev = prev && t.isMarkoPlaceholder(prev);
     let { value } = node;
@@ -213,14 +213,14 @@ Object.assign(Printer.prototype, {
     if (SELF_CLOSING.voidElements.includes(tagName)) {
       this.token(">");
     } else if (
-      !node.body.body.length ||
+      !(node.body.body.length || node.attributeTags.length) ||
       SELF_CLOSING.svgElements.includes(tagName)
     ) {
       this.token("/>");
     } else {
       this.token(">");
       this.newline();
-      this.print(node.body);
+      this.printSequence(zipAttributeTagsAndBody(node), { indent: true });
       this.token("</");
       if (!isDynamicTag) {
         this.token(tagName);
@@ -270,3 +270,65 @@ function statementCouldHaveUnenclosedNewline(node) {
       return false;
   }
 }
+
+function zipAttributeTagsAndBody(tag) {
+  const {
+    attributeTags,
+    body: { body },
+  } = tag;
+  const bodyLen = body.length;
+  const attributeTagsLen = attributeTags.length;
+  if (!attributeTagsLen) return body;
+  if (!bodyLen) return attributeTags;
+
+  const result = [];
+  let i = 0;
+  let j = 0;
+
+  while (i < bodyLen && j < attributeTagsLen) {
+    const bodyNode = body[i];
+    const attributeTag = attributeTags[j];
+
+    if (bodyNode.loc != null && attributeTag.loc != null) {
+      if (compareStartLoc(bodyNode, attributeTag) < 0) {
+        result.push(bodyNode);
+        i++;
+      } else {
+        result.push(attributeTag);
+        j++;
+      }
+    } else if (j < attributeTagsLen) {
+      result.push(attributeTag);
+      j++;
+    } else {
+      result.push(bodyNode);
+      i++;
+    }
+  }
+
+  while (j < attributeTagsLen) {
+    result.push(attributeTags[j++]);
+  }
+
+  while (i < bodyLen) {
+    result.push(body[i++]);
+  }
+
+  return result;
+}
+
+function getBody(parent) {
+  switch (parent.type) {
+    case "MarkoTag":
+      return parent.body.body;
+    default:
+      return parent.body;
+  }
+}
+
+function compareStartLoc(a, b) {
+  return (
+    a.loc.start.line - b.loc.start.line ||
+    a.loc.start.column - b.loc.start.column
+  );
+}