feat(no-async-guard): support the "guard" prop with xstate v5

Author: rlaffers

docs/rules/no-async-guard.md

@@ -4,12 +4,12 @@
 
 ## Rule Details
 
-Async functions return a promise which is a truthy value. Therefore, async guard functions always pass. Transitions guarded by such functions will always be taken as if no `cond` was specified.
+Async functions return a promise which is a truthy value. Therefore, async guard functions always pass. Transitions guarded by such functions will always be taken as if no `cond` (XState v4) or `guard` (XState v5) was specified.
 
 Examples of **incorrect** code for this rule:
 
 ```javascript
-// ❌ async guard in an event transition
+// ❌ async guard in an event transition (XState v4)
 createMachine({
   on: {
     EVENT: {
@@ -19,37 +19,47 @@ createMachine({
   },
 })
 
-// ❌ async guard in an onDone transition
+// ❌ async guard in an event transition (XState v5)
+createMachine({
+  on: {
+    EVENT: {
+      guard: async () => {},
+      target: 'active',
+    },
+  },
+})
+
+// ❌ async guard in an onDone transition (XState v5)
 createMachine({
   states: {
     active: {
       invoke: {
         src: 'myService',
         onDone: {
-          cond: async function () {},
+          guard: async function () {},
           target: 'finished',
         },
       },
     },
   },
 })
 
-// ❌ async guard in the choose action creator
+// ❌ async guard in the choose action creator (XState v5)
 createMachine({
   entry: choose([
     {
-      cond: async () => {},
+      guard: async () => {},
       actions: 'myAction',
     },
   ]),
 })
 
-// ❌ async guards in machine options
+// ❌ async guards in machine options (XState v5)
 createMachine(
   {
     on: {
       EVENT: {
-        cond: 'myGuard',
+        guard: 'myGuard',
         target: 'active',
       },
     },
@@ -67,7 +77,7 @@ createMachine(
 Examples of **correct** code for this rule:
 
 ```javascript
-// ✅ guard is synchronous
+// ✅ guard is synchronous (XState v4)
 createMachine({
   on: {
     EVENT: {
@@ -77,27 +87,37 @@ createMachine({
   },
 })
 
-// ✅ guard is synchronous
+// ✅ guard is synchronous (XState v5)
+createMachine({
+  on: {
+    EVENT: {
+      guard: () => {},
+      target: 'active',
+    },
+  },
+})
+
+// ✅ guard is synchronous (XState v5)
 createMachine({
   states: {
     active: {
       invoke: {
         src: 'myService',
         onDone: {
-          cond: function () {},
+          guard: function () {},
           target: 'finished',
         },
       },
     },
   },
 })
 
-// ✅ all guards in machine options are synchronous
+// ✅ all guards in machine options are synchronous (XState v5)
 createMachine(
   {
     on: {
       EVENT: {
-        cond: 'myGuard',
+        guard: 'myGuard',
         target: 'active',
       },
     },

lib/rules/no-async-guard.js

@@ -2,6 +2,7 @@
 
 const getDocsUrl = require('../utils/getDocsUrl')
 const { isFunctionExpression } = require('../utils/predicates')
+const getSettings = require('../utils/getSettings')
 
 function isAsyncFunctionExpression(node) {
   return isFunctionExpression(node) && node.async
@@ -23,9 +24,16 @@ module.exports = {
   },
 
   create: function (context) {
+    const { version } = getSettings(context)
     return {
-      'CallExpression[callee.name=/^createMachine$|^Machine$/] Property[key.name="cond"]':
+      'CallExpression[callee.name=/^createMachine$|^Machine$/] > ObjectExpression:first-child Property[key.name=/^cond|guard$/]':
         function (node) {
+          if (version === 4 && node.key.name !== 'cond') {
+            return
+          }
+          if (version > 4 && node.key.name !== 'guard') {
+            return
+          }
           if (isAsyncFunctionExpression(node.value)) {
             context.report({
               node: node.value,

tests/lib/rules/no-async-guards.js

@@ -1,9 +1,12 @@
 const RuleTester = require('eslint').RuleTester
 const rule = require('../../../lib/rules/no-async-guard')
+const { withVersion } = require('../utils/settings')
 
 const tests = {
   valid: [
-    `
+    withVersion(
+      4,
+      `
       createMachine({
         on: {
           EVENT: {
@@ -12,8 +15,24 @@ const tests = {
           },
         },
       })
-    `,
     `
+    ),
+    withVersion(
+      5,
+      `
+      createMachine({
+        on: {
+          EVENT: {
+            guard: () => {},
+            target: 'active',
+          },
+        },
+      })
+    `
+    ),
+    withVersion(
+      4,
+      `
       createMachine({
         states: {
           active: {
@@ -27,17 +46,31 @@ const tests = {
           },
         },
       })
-    `,
     `
-      createMachine(
-        {
-          on: {
-            EVENT: {
-              cond: 'myGuard',
-              target: 'active',
+    ),
+    withVersion(
+      5,
+      `
+      createMachine({
+        states: {
+          active: {
+            invoke: {
+              src: 'myService',
+              onDone: {
+                guard: function () {},
+                target: 'finished',
+              },
             },
           },
         },
+      })
+    `
+    ),
+    withVersion(
+      4,
+      `
+      createMachine(
+        {},
         {
           guards: {
             myGuard: () => {},
@@ -46,10 +79,11 @@ const tests = {
           },
         }
       )
-    `,
+    `
+    ),
   ],
   invalid: [
-    {
+    withVersion(4, {
       code: `
         createMachine({
           entry: choose([
@@ -82,9 +116,43 @@ const tests = {
         { messageId: 'guardCannotBeAsync' },
         { messageId: 'guardCannotBeAsync' },
       ],
-    },
+    }),
+    withVersion(5, {
+      code: `
+        createMachine({
+          entry: choose([
+            {
+              guard: async () => {},
+              actions: 'myAction',
+            },
+          ]),
+          states: {
+            active: {
+              invoke: {
+                src: 'myService',
+                onDone: {
+                  guard: async function () {},
+                  target: 'finished',
+                },
+              },
+            },
+          },
+          on: {
+            EVENT: {
+              guard: async () => {},
+              target: 'active',
+            },
+          },
+        })
+      `,
+      errors: [
+        { messageId: 'guardCannotBeAsync' },
+        { messageId: 'guardCannotBeAsync' },
+        { messageId: 'guardCannotBeAsync' },
+      ],
+    }),
     // async guard in machine options
-    {
+    withVersion(4, {
       code: `
         createMachine(
           {
@@ -109,7 +177,26 @@ const tests = {
         { messageId: 'guardCannotBeAsync' },
         { messageId: 'guardCannotBeAsync' },
       ],
-    },
+    }),
+    withVersion(5, {
+      code: `
+        createMachine(
+          {},
+          {
+            guards: {
+              myGuard: async () => {},
+              myGuard2: async function () {},
+              async myGuard3() {},
+            },
+          }
+        )
+      `,
+      errors: [
+        { messageId: 'guardCannotBeAsync' },
+        { messageId: 'guardCannotBeAsync' },
+        { messageId: 'guardCannotBeAsync' },
+      ],
+    }),
   ],
 }