fix: better attr tags handling

Author: DylanPiercey

.changeset/orange-needles-brush.md

@@ -0,0 +1,6 @@
+---
+"marko-widgets": patch
+"@marko/compat-v4": patch
+---
+
+Fix compat with latest @marko/compiler attribute tags changes.

package-lock.json

@@ -23,41 +23,41 @@
     "version": "changeset version && npm i --package-lock-only"
   },
   "devDependencies": {
-    "@babel/plugin-transform-modules-commonjs": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@babel/register": "^7.22.5",
-    "@changesets/changelog-github": "^0.4.8",
-    "@changesets/cli": "^2.26.2",
-    "@marko/compiler": "^5.37.11",
+    "@babel/plugin-transform-modules-commonjs": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/register": "^7.25.9",
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.9",
+    "@marko/compiler": "^5.37.24",
     "@testing-library/dom": "^9.3.1",
-    "@types/babel__register": "^7.17.0",
-    "@types/jsdom": "^21.1.1",
-    "@types/mocha": "^10.0.1",
+    "@types/babel__register": "^7.17.3",
+    "@types/jsdom": "^21.1.7",
+    "@types/mocha": "^10.0.9",
     "@types/node": "^20.4.10",
-    "@types/resolve": "^1.20.2",
+    "@types/resolve": "^1.20.6",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
     "c8": "^8.0.1",
-    "context-require": "^1.4.0",
-    "esbuild": "^0.19.1",
+    "context-require": "^1.4.2",
+    "esbuild": "^0.24.0",
     "eslint": "^8.47.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-import-resolver-typescript": "^3.6.0",
-    "eslint-plugin-import": "^2.28.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-import": "^2.31.0",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
-    "lint-staged": "^13.2.3",
-    "marko": "^5.35.16",
-    "mocha": "^10.2.0",
+    "lint-staged": "^15.2.10",
+    "marko": "^5.35.33",
+    "mocha": "^10.8.2",
     "mocha-snap": "^5.0.0",
-    "prettier": "^3.0.1",
-    "pretty-format": "^29.6.2",
+    "prettier": "^3.3.3",
+    "pretty-format": "^29.7.0",
     "replace": "^1.2.2",
-    "resolve": "^1.22.4",
+    "resolve": "^1.22.8",
     "resolve.exports": "^2.0.2",
-    "sort-package-json": "^2.5.1",
+    "sort-package-json": "^2.10.1",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.6.3",
     "~preload": "file:scripts/preload.js"
   }
 }

package.json

@@ -144,10 +144,10 @@ export default {
           );
         }
 
-        const rootChildren: t.MarkoTagBody["body"] = [];
+        const rootAttrTags: t.MarkoTag["attributeTags"] = [];
 
         if (thenChildren.length) {
-          rootChildren.push(
+          rootAttrTags.push(
             t.markoTag(
               t.stringLiteral("@then"),
               [],
@@ -157,7 +157,7 @@ export default {
         }
 
         if (placeholderChildren.length) {
-          rootChildren.push(
+          rootAttrTags.push(
             t.markoTag(
               t.stringLiteral("@placeholder"),
               [],
@@ -179,7 +179,7 @@ export default {
               ),
             ],
           );
-          rootChildren.push(
+          rootAttrTags.push(
             t.markoTag(
               t.stringLiteral("@catch"),
               [],
@@ -199,7 +199,7 @@ export default {
             ),
           );
         } else if (errorChildren.length) {
-          rootChildren.push(
+          rootAttrTags.push(
             t.markoTag(
               t.stringLiteral("@catch"),
               [],
@@ -208,14 +208,27 @@ export default {
           );
         }
 
-        tag.replaceWith(
-          t.markoTag(
-            t.stringLiteral("await"),
-            tag.node.attributes,
-            t.markoTagBody(rootChildren),
-            [providerExpression],
-          ),
-        );
+        if (tag.node.attributeTags) {
+          tag.replaceWith(
+            t.markoTag(
+              t.stringLiteral("await"),
+              tag.node.attributes,
+              t.markoTagBody([]),
+              [providerExpression],
+              undefined,
+              rootAttrTags,
+            ),
+          );
+        } else {
+          tag.replaceWith(
+            t.markoTag(
+              t.stringLiteral("await"),
+              tag.node.attributes,
+              t.markoTagBody(rootAttrTags),
+              [providerExpression],
+            ),
+          );
+        }
       },
     });
   },

packages/compat-v4/src/components/await/migrate.ts

@@ -273,7 +273,7 @@ export default {
               t.markoTag(
                 t.stringLiteral("for"),
                 [t.markoAttribute(valueAttr, inExpression!)],
-                t.markoTagBody(node.body.body, params),
+                markoTagBody(node.body.body, params, node.body.attributeTags),
               ),
             );
           },
@@ -384,7 +384,7 @@ export default {
               t.markoTag(
                 t.stringLiteral("for"),
                 attrs,
-                t.markoTagBody(node.body.body, params),
+                markoTagBody(node.body.body, params, node.body.attributeTags),
               ),
             );
           },
@@ -471,18 +471,24 @@ export default {
                   t.markoTag(
                     t.stringLiteral("for"),
                     attrs,
-                    t.markoTagBody(node.body.body, [forRange.varName]),
+                    markoTagBody(
+                      node.body.body,
+                      [forRange.varName],
+                      node.body.attributeTags,
+                    ),
                   ),
                 );
             } else {
               const whileTag = t.markoTag(
                 t.stringLiteral("while"),
                 [],
                 updateNode
-                  ? t.markoTagBody(
+                  ? markoTagBody(
                       node.body.body.concat(
                         t.markoScriptlet([t.expressionStatement(updateNode)]),
                       ),
+                      undefined,
+                      node.body.attributeTags,
                     )
                   : node.body,
                 [testNode || t.booleanLiteral(true)],
@@ -599,6 +605,19 @@ function forInitToRange(
   };
 }
 
+function markoTagBody(
+  body: t.MarkoTagBody["body"],
+  params?: t.MarkoTagBody["params"],
+  attributeTags?: t.MarkoTagBody["attributeTags"],
+) {
+  const node = t.markoTagBody(body, params);
+  if (attributeTags) {
+    node.attributeTags = true;
+  }
+
+  return node;
+}
+
 function isIdentifierNamed(node: t.Node, name: string) {
   return node.type === "Identifier" && node.name === name;
 }

packages/compat-v4/src/components/for/migrate.ts

@@ -61,6 +61,9 @@ export default {
               tagNameExpression,
               exprToAttrs(inputExpression).concat(tag.node.attributes),
               tag.node.body,
+              undefined,
+              undefined,
+              tag.node.attributeTags,
             ),
           );
         } else {
@@ -85,6 +88,9 @@ export default {
                   tagNameExpression,
                   exprToAttrs(inputExpression).concat(tag.node.attributes),
                   tag.node.body,
+                  undefined,
+                  undefined,
+                  tag.node.attributeTags,
                 ),
               ]),
             ),

packages/compat-v4/src/components/include/migrate.ts

@@ -0,0 +1,41 @@
+import { isAttributeTag, isTransparentTag } from "@marko/babel-utils";
+import { types as t } from "@marko/compiler";
+
+export default {
+  Program: {
+    exit(program) {
+      for (const child of program.get("body")) {
+        if (child.isMarkoTag()) {
+          hoistAttrTags(child);
+        }
+      }
+    },
+  },
+} satisfies t.Visitor;
+
+function hoistAttrTags(tag: t.NodePath<t.MarkoTag>) {
+  let hadAttrTags = false;
+  const isControlFlow = isTransparentTag(tag);
+  const body = tag.get("body");
+  for (const child of body.get("body")) {
+    if (child.isMarkoTag()) {
+      const hoistedChildren = hoistAttrTags(child);
+      if (
+        isAttributeTag(child) ||
+        (isTransparentTag(child) && hoistedChildren)
+      ) {
+        if (!isControlFlow) {
+          tag.pushContainer("attributeTags", child.node);
+          child.remove();
+        }
+        hadAttrTags = true;
+      }
+    }
+  }
+
+  if (isControlFlow && hadAttrTags) {
+    body.node.attributeTags = true;
+  }
+
+  return hadAttrTags;
+}

packages/compat-v4/src/migrate/hoist-attr-tags.ts

@@ -1,5 +1,5 @@
 import { types as t } from "@marko/compiler";
-import { diagnosticDeprecate } from "@marko/babel-utils";
+import { diagnosticDeprecate, isAttributeTag } from "@marko/babel-utils";
 import { willMigrateAllAttrs } from "@marko/compat-utils";
 
 export default {
@@ -44,14 +44,9 @@ export default {
       label: `The "${name}" directive is deprecated. Please use "<${name}>" tag instead. See: https://github.com/marko-js/marko/wiki/Deprecation:-control-flow-attributes`,
       fix() {
         attr.remove();
-        tag.replaceWith(
-          t.markoTag(
-            t.stringLiteral(name),
-            [],
-            t.markoTagBody([tag.node]),
-            args,
-          ),
-        );
+        const body = t.markoTagBody([tag.node]);
+        if (isAttributeTag(tag)) body.attributeTags = true;
+        tag.replaceWith(t.markoTag(t.stringLiteral(name), [], body, args));
       },
     });
   },

packages/compat-v4/src/migrate/if-directive.ts

@@ -11,6 +11,7 @@ import keyModifier from "./key-modifier";
 import refAttribute from "./ref-attribute";
 import nativeTagNamespacedAttribute from "./native-tag-namespaced-attribute";
 import tagArguments from "./tag-arguments";
+import hoistAttrTags from "./hoist-attr-tags";
 
 export default [
   ifDirective,
@@ -25,4 +26,5 @@ export default [
   nonStandardTemplateLiterals,
   nativeTagNamespacedAttribute,
   tagArguments,
+  hoistAttrTags,
 ] satisfies Visitor[];

packages/compat-v4/src/migrate/index.ts

@@ -58,6 +58,7 @@ export default {
               node.body,
               node.arguments,
               node.var,
+              node.attributeTags,
             ),
           );
         },

packages/compat-v4/src/migrate/legacy-attribute-tags.ts

@@ -1,5 +1,5 @@
 import { types as t } from "@marko/compiler";
-import { diagnosticDeprecate } from "@marko/babel-utils";
+import { diagnosticDeprecate, isAttributeTag } from "@marko/babel-utils";
 import { willMigrateAllAttrs } from "@marko/compat-utils";
 
 export default {
@@ -24,14 +24,9 @@ export default {
       label: `The "${name}(x)" directive is deprecated. Please use "<${name}>" tag instead. See: https://github.com/marko-js/marko/wiki/Deprecation:-control-flow-attributes`,
       fix() {
         attr.remove();
-        tag.replaceWith(
-          t.markoTag(
-            t.stringLiteral(name),
-            [],
-            t.markoTagBody([tag.node]),
-            args,
-          ),
-        );
+        const body = t.markoTagBody([tag.node]);
+        if (isAttributeTag(tag)) body.attributeTags = true;
+        tag.replaceWith(t.markoTag(t.stringLiteral(name), [], body, args));
       },
     });
   },