fix: compat with latest marko compiler

Author: DylanPiercey

.changeset/nervous-kids-rescue.md

@@ -0,0 +1,7 @@
+---
+"marko-widgets": patch
+"@marko/compat-utils": patch
+"@marko/compat-v4": patch
+---
+
+Fix incompatibilty with latest @marko/compiler

package-lock.json

@@ -28,7 +28,7 @@
     "@babel/register": "^7.22.5",
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
-    "@marko/compiler": "^5.33.0",
+    "@marko/compiler": "^5.37.11",
     "@testing-library/dom": "^9.3.1",
     "@types/babel__register": "^7.17.0",
     "@types/jsdom": "^21.1.1",
@@ -47,7 +47,7 @@
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
     "lint-staged": "^13.2.3",
-    "marko": "^5.31.3",
+    "marko": "^5.35.16",
     "mocha": "^10.2.0",
     "mocha-snap": "^5.0.0",
     "prettier": "^3.0.1",

package.json

@@ -24,7 +24,7 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
-    "@marko/babel-utils": "^6.3.1"
+    "@marko/babel-utils": "^6.5.6"
   },
   "peerDependencies": {
     "@marko/compiler": "^5",

packages/compat-utils/package.json

@@ -90,12 +90,12 @@ export function replaceRenderCallExpression(
               node.operator === "||"
                 ? t.unaryExpression("!", node.left)
                 : node.operator === "??"
-                ? t.binaryExpression(
-                    "===",
-                    node.left,
-                    t.unaryExpression("void", t.numericLiteral(0)),
-                  )
-                : node.left,
+                  ? t.binaryExpression(
+                      "===",
+                      node.left,
+                      t.unaryExpression("void", t.numericLiteral(0)),
+                    )
+                  : node.left,
             ],
           ),
         );

packages/compat-utils/src/render-call-to-dynamic-tag.ts

@@ -25,7 +25,7 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
-    "@marko/babel-utils": "^6.3.1",
+    "@marko/babel-utils": "^6.5.6",
     "@marko/compat-utils": "^1.0.1"
   },
   "peerDependencies": {

packages/compat-v4/package.json

@@ -2,12 +2,15 @@ import { types as t } from "@marko/compiler";
 import {
   diagnosticDeprecate,
   diagnosticError,
+  getEnd,
+  getStart,
   parseExpression,
   withLoc,
 } from "@marko/babel-utils";
 
 export default {
   exit(tag: t.NodePath<t.MarkoTag>) {
+    const { file } = tag.hub;
     const firstArg = tag.node.arguments?.[0];
     if (firstArg?.type !== "MarkoParseError") return;
     const match = /^\s*([$a-zA-Z_][0-9a-zA-Z_$]*)\s+from\s+/.exec(
@@ -19,11 +22,11 @@ export default {
       label:
         'The "<await(result from promise)>" syntax has been deprecated, please use the modern syntax of "<await(promise)><@then|result|>". See: https://github.com/marko-js/marko/wiki/Deprecation:-legacy-await',
       fix() {
-        const start = firstArg.start!;
+        const start = getStart(file, firstArg)!;
         const fromStart = match[0].length;
         const identifierName = match[1];
         const valueIdentifier = withLoc(
-          tag.hub.file,
+          file,
           t.identifier(identifierName),
           start,
           start + identifierName.length,
@@ -33,10 +36,10 @@ export default {
         const timeoutChildren: t.MarkoTagBody["body"] = [];
         const errorChildren: t.MarkoTagBody["body"] = [];
         let providerExpression = parseExpression(
-          tag.hub.file,
+          file,
           firstArg.source.slice(fromStart),
           start + fromStart,
-          firstArg.end!,
+          getEnd(file, firstArg)!,
         );
         let providerMethod: t.Expression | undefined;
         let providerScope: t.Expression | undefined;

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

@@ -2,7 +2,9 @@ import { types as t } from "@marko/compiler";
 import {
   diagnosticDeprecate,
   diagnosticError,
+  getEnd,
   getLocRange,
+  getStart,
   parseExpression,
   parseParams,
   parseStatements,
@@ -17,11 +19,11 @@ export default {
     const len = args?.length;
     if (!len) return;
 
-    const start = args[0].start;
-    const end = args[len - 1].end;
+    const { file } = tag.hub;
+    const start = getStart(file, args[0]);
+    const end = getEnd(file, args[len - 1]);
     if (start == null || end == null) return;
 
-    const { file } = tag.hub;
     const source = file.code.slice(start, end);
     const parsed = parseFor(source);
     if (!parsed) return;
@@ -103,12 +105,13 @@ export default {
           if (statusExpression.type === "StringLiteral") {
             if (t.isValidIdentifier(statusExpression.value)) {
               const statusIdentifier = t.identifier(statusExpression.value);
-              if (statusExpression.start != null) {
+              const statusExprStart = getStart(file, statusExpression);
+              if (statusExprStart != null) {
                 withLoc(
                   file,
                   statusIdentifier,
-                  statusExpression.start + 1,
-                  statusExpression.end! - 1,
+                  statusExprStart + 1,
+                  getEnd(file, statusExpression)! - 1,
                 );
               }
 
@@ -528,7 +531,7 @@ function forInitToRange(
     varName = declarator.id;
     from = declarator.init;
   } else if (init.type === "AssignmentExpression" && init.operator === "=") {
-    varName = init.left;
+    varName = init.left as t.LVal;
     from = init.right;
   } else {
     return;

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

@@ -2,6 +2,7 @@ import { types as t } from "@marko/compiler";
 import {
   diagnosticDeprecate,
   findParentTag,
+  getEnd,
   withLoc,
 } from "@marko/babel-utils";
 
@@ -37,14 +38,16 @@ export default {
         label:
           'The "<my-tag:nested>" tagName syntax is deprecated. Please use the "<@nested>" tagName syntax instead. See: https://github.com/marko-js/marko/wiki/Deprecation:-legacy-nested-tags',
         fix() {
+          const { file } = tag.hub;
           const attrTagNameLiteral = t.stringLiteral(`@${attrTagName}`);
+          const nameEnd = getEnd(file, node.name);
 
-          if (node.name.start != null && node.name.end != null) {
+          if (nameEnd != null) {
             withLoc(
-              tag.hub.file,
+              file,
               attrTagNameLiteral,
-              node.name.end - attrTagName.length + 1,
-              node.name.end,
+              nameEnd - attrTagName.length + 1,
+              nameEnd,
             );
           }
 

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

@@ -1,5 +1,5 @@
 import { types as t } from "@marko/compiler";
-import { parseExpression } from "@marko/babel-utils";
+import { getStart, parseExpression } from "@marko/babel-utils";
 
 const enum CODE {
   ASTERISK = 42,
@@ -28,7 +28,8 @@ export function parseNonStandardTemplateLiteral(
   if (typeof value !== "string") return;
   value = value.slice(1, -1);
   const { length } = value;
-  const valueStart = string.node.start == null ? null : string.node.start + 1;
+  const nodeStart = getStart(file, string.node);
+  const valueStart = nodeStart == null ? null : nodeStart + 1;
   let elements: undefined | t.TemplateElement[];
   let expressions: undefined | t.Expression[];
   let lastEndBracket = 0;

packages/compat-v4/src/migrate/non-standard-template-literals/parse.ts

@@ -31,7 +31,7 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
-    "@marko/babel-utils": "^6.3.1",
+    "@marko/babel-utils": "^6.5.6",
     "@marko/compat-utils": "^1.0.1",
     "@marko/compat-v4": "^1.0.7",
     "raptor-dom": "^1.1.1",

packages/marko-widgets/package.json

@@ -2,6 +2,8 @@ import { types as t } from "@marko/compiler";
 import {
   diagnosticDeprecate,
   diagnosticError,
+  getEnd,
+  getStart,
   parseExpression,
 } from "@marko/babel-utils";
 
@@ -21,6 +23,7 @@ export default {
       label:
         'The "<assign>" tag is deprecated. Please use "$ <js_code>" for JavaScript in the template. See: https://github.com/marko-js/marko/wiki/Deprecation:-var,-assign,-invoke-tags',
       fix() {
+        const { file } = tag.hub;
         const statements: t.Statement[] = [];
         let condition: t.Expression | undefined;
 
@@ -47,14 +50,16 @@ export default {
             continue;
           }
 
+          const nodeStart = getStart(file, node);
+          const nodeEnd = getEnd(file, node);
           statements.push(
             t.expressionStatement(
               t.isBooleanLiteral(value) &&
                 value.value === true &&
                 /^[+-]{2,}|[+-]{2,}$/.test(name)
-                ? node.start != null && node.end != null
-                  ? parseExpression(attr.hub.file, name, node.start, node.end!)
-                  : parseExpression(attr.hub.file, name)
+                ? nodeStart != null && nodeEnd != null
+                  ? parseExpression(file, name, nodeStart, nodeEnd)
+                  : parseExpression(file, name)
                 : t.assignmentExpression("=", t.identifier(name), value),
             ),
           );

packages/marko-widgets/src/components/assign/migrate.ts

@@ -2,6 +2,8 @@ import { types as t } from "@marko/compiler";
 import {
   diagnosticDeprecate,
   diagnosticError,
+  getEnd,
+  getStart,
   withLoc,
 } from "@marko/babel-utils";
 
@@ -10,6 +12,7 @@ export default {
     diagnosticDeprecate(tag, {
       label: `The "<async-fragment>" tag is deprecated. Please use "<await>" instead. See: https://github.com/marko-js/marko/wiki/Deprecation:-async-fragment`,
       fix() {
+        const { file } = tag.hub;
         const thenChildren: t.MarkoTagBody["body"] = [];
         const placeholderChildren: t.MarkoTagBody["body"] = [];
         const timeoutChildren: t.MarkoTagBody["body"] = [];
@@ -128,13 +131,10 @@ export default {
         }
 
         const valueIdentifier = t.identifier(varExpression.value);
-        if (varExpression.start != null && varExpression.end != null) {
-          withLoc(
-            tag.hub.file,
-            valueIdentifier,
-            varExpression.start + 1,
-            varExpression.end - 1,
-          );
+        const varStart = getStart(file, varExpression);
+        const varEnd = getEnd(file, varExpression);
+        if (varStart != null && varEnd != null) {
+          withLoc(file, valueIdentifier, varStart + 1, varEnd - 1);
         }
 
         if (providerMethod) {

packages/marko-widgets/src/components/async-fragment/migrate.ts

@@ -1,5 +1,11 @@
 import { types as t } from "@marko/compiler";
-import { diagnosticError, parseExpression, withLoc } from "@marko/babel-utils";
+import {
+  diagnosticError,
+  getEnd,
+  getStart,
+  parseExpression,
+  withLoc,
+} from "@marko/babel-utils";
 import {
   isSourceBooleanAttribute,
   renderCallToDynamicTag,
@@ -36,7 +42,8 @@ export default {
     }
 
     const { file } = tag.hub;
-    const start = functionAttr.node.start;
+    const start = getStart(file, functionAttr.node);
+    const end = getEnd(file, functionAttr.node);
     const callIdentifier =
       start == null
         ? parseExpression(file, functionAttr.node.name)
@@ -50,8 +57,8 @@ export default {
       callIdentifier,
       functionAttr.node.arguments!,
     );
-    if (start != null) {
-      withLoc(file, callExpression, start, functionAttr.node.end!);
+    if (start != null && end !== null) {
+      withLoc(file, callExpression, start, end);
     }
 
     const dynamicTag = renderCallToDynamicTag(callExpression);

packages/marko-widgets/src/components/invoke/migrate.ts

@@ -2,13 +2,17 @@ import { types as t } from "@marko/compiler";
 import {
   diagnosticDeprecate,
   diagnosticError,
+  getStart,
   withLoc,
 } from "@marko/babel-utils";
 import { getAttributeValue } from "@marko/compat-utils";
 
 export default {
   exit(tag: t.NodePath<t.MarkoTag>) {
-    const { node } = tag;
+    const {
+      node,
+      hub: { file },
+    } = tag;
     const name = getAttributeValue(tag, "name");
 
     if (!name || !name.isStringLiteral()) {
@@ -30,12 +34,13 @@ export default {
     }
 
     const memberProperty = t.identifier(toCamelCase(name.node.value));
-    if (node.name.start != null && node.name.end != null) {
+    const nameStart = getStart(file, node.name);
+    if (nameStart != null) {
       withLoc(
         tag.hub.file,
         memberProperty,
-        node.name.start + 1,
-        node.name.start + name.node.value.length,
+        nameStart + 1,
+        nameStart + name.node.value.length,
       );
     }
 

packages/marko-widgets/src/components/layout-placeholder/migrate.ts

@@ -2,13 +2,17 @@ import { types as t } from "@marko/compiler";
 import {
   diagnosticDeprecate,
   diagnosticError,
+  getStart,
   withLoc,
 } from "@marko/babel-utils";
 import { getAttributeValue } from "@marko/compat-utils";
 
 export default {
   exit(tag: t.NodePath<t.MarkoTag>) {
-    const { node } = tag;
+    const {
+      node,
+      hub: { file },
+    } = tag;
     const into = getAttributeValue(tag, "into");
 
     if (!into || !into.isStringLiteral()) {
@@ -46,13 +50,9 @@ export default {
     }
 
     const newName = t.stringLiteral(`@${toCamelCase(into.node.value)}`);
-    if (node.name.start != null && node.name.end != null) {
-      withLoc(
-        tag.hub.file,
-        newName,
-        node.name.start,
-        node.name.start + into.node.value.length,
-      );
+    const nameStart = getStart(file, node.name);
+    if (nameStart != null) {
+      withLoc(file, newName, nameStart, nameStart + into.node.value.length);
     }
 
     diagnosticDeprecate(tag, {