feat(no-inline-implementation): allow built-in higher level guards with xstate v5

Parse "guard" as the guard declaration in xstate v5. Always allow the built-in higher level guards
to be inlined. Change the option "serviceCreatorRegex" to "actorCreatorRegex".

BREAKING CHANGE: Option "serviceCreatorRegex" has been renamed to "actorCreatorRegex".

Author: rlaffers

docs/rules/no-inline-implementation.md

@@ -7,6 +7,16 @@ Suggest moving implementations of actions, guards, activities and services into
 Action/guard/activity/service implementation can be quickly prototyped by specifying inline functions directly in the machine config.
 Although this is convenient, this makes it difficult to debug, test, serialize and accurately visualize actions. It is recommended to refactor inline implementations into the machine options object.
 
+### XState v5
+
+In XState v5 some built-in action creators were removed, so this rule will report an error when they are inlined:
+- `respond`
+- `send`: removed in favor of `raise` and `sendParent`
+- `sendUpdate`
+- `start`
+
+XState v5 provides some built-in higher level guards: `and`, `or`, `not`, `stateIn`. These are always fine to use.
+
 Examples of **incorrect** code for this rule:
 
 ```javascript
@@ -104,42 +114,62 @@ createMachine({
 })
 
 // ✅ inlined guard creator calls are ok if they match guardCreatorRegex
-/* eslint no-inline-implementation: [ "warn", { "guardCreatorRegex": "^(and|or|not)$" } ] */
+/* eslint no-inline-implementation: [ "warn", { "guardCreatorRegex": "^customGuard$" } ] */
 createMachine({
   states: {
     inactive: {
       on: {
         BUTTON_CLICKED: {
-          cond: and(['isStartButton', 'isReady'])
+          cond: customGuard(['isStartButton', 'isReady']),
           target: 'active'
         }
       }
     }
   }
 })
 
-// ✅ inlined guard creator calls are ok if they match actionCreatorRegex
+// ✅ inlined built-in guards are ok with XState v5
+createMachine({
+  states: {
+    inactive: {
+      on: {
+        BUTTON_CLICKED: [
+          {
+            guard: and(['isStartButton', 'isDoubleClick']),
+            target: 'active'
+          },
+          {
+            guard: stateIn('mode.active'),
+            target: 'inactive'
+          },
+        ]
+      }
+    }
+  }
+})
+
+// ✅ inlined action creator calls are ok if they match actionCreatorRegex
 /* eslint no-inline-implementation: [ "warn", { "actionCreatorRegex": "^customAction$" } ] */
 createMachine({
   states: {
     inactive: {
       on: {
         BUTTON_CLICKED: {
-          target: 'active'
+          target: 'active',
           actions: customAction(),
         }
       }
     }
   }
 })
 
-// ✅ inlined service creator calls are ok if they match serviceCreatorRegex
-/* eslint no-inline-implementation: [ "warn", { "serviceCreatorRegex": "^customService$" } ] */
+// ✅ inlined actor creator calls are ok if they match actorCreatorRegex
+/* eslint no-inline-implementation: [ "warn", { "actorCreatorRegex": "^customActor" } ] */
 createMachine({
   states: {
     inactive: {
       invoke: {
-        src: createService()
+        src: customActor()
       }
     }
   }
@@ -153,7 +183,7 @@ createMachine({
 | `allowKnownActionCreators` | No       | `false` | Inlined action creators are visualized properly (but still difficult to test, debug and serialize). Setting this option to `true` will turn off the rule for [known action creators](https://xstate.js.org/docs/guides/actions.html) used inline. |
 | `guardCreatorRegex`        | No       | `''`    | Use a regular expression to allow custom guard creators.                                                                                                                                                                                          |
 | `actionCreatorRegex`       | No       | `''`    | Use a regular expression to allow custom action creators.                                                                                                                                                                                         |
-| `serviceCreatorRegex`      | No       | `''`    | Use a regular expression to allow custom service creators.                                                                                                                                                                                        |
+| `actorCreatorRegex`      | No       | `''`    | Use a regular expression to allow custom actor creators.                                                                                                                                                                                        |
 
 ## Example
 
@@ -182,7 +212,7 @@ createMachine({
 {
   "xstate/no-inline-implementation": [
     "warn",
-    { "serviceCreatorRegex": "^customService$" }
+    { "actorCreatorRegex": "^customActor$" }
   ]
 }
 ```

lib/rules/no-inline-implementation.js

@@ -12,6 +12,7 @@ const {
 } = require('../utils/predicates')
 const { getTypeProperty } = require('../utils/selectors')
 const { anyPass } = require('../utils/combinators')
+const getSettings = require('../utils/getSettings')
 
 function isArrayWithFunctionExpressionOrIdentifier(node) {
   return (
@@ -20,20 +21,25 @@ function isArrayWithFunctionExpressionOrIdentifier(node) {
   )
 }
 
-function isInlineAction(node, allowKnownActionCreators, actionCreatorRegex) {
+function isInlineAction(
+  node,
+  allowKnownActionCreators,
+  actionCreatorRegex,
+  version
+) {
   return (
     isFunctionExpression(node) ||
     isIdentifier(node) ||
     (isCallExpression(node) &&
       !(
-        (allowKnownActionCreators && isKnownActionCreatorCall(node)) ||
+        (allowKnownActionCreators && isKnownActionCreatorCall(node, version)) ||
         isValidCallExpression(node, actionCreatorRegex)
       ))
   )
 }
 
 function isValidCallExpression(node, pattern = '') {
-  if (pattern === '') {
+  if (pattern === '' || node.callee.type !== 'Identifier') {
     return false
   }
   return new RegExp(pattern).test(node.callee.name)
@@ -81,7 +87,22 @@ const defaultOptions = {
   allowKnownActionCreators: false,
   actionCreatorRegex: '',
   guardCreatorRegex: '',
-  serviceCreatorRegex: '',
+  actorCreatorRegex: '',
+}
+
+const guardPropName = {
+  4: 'cond',
+  5: 'guard',
+}
+
+const knownGuards = ['and', 'or', 'not', 'stateIn']
+
+function isKnownGuard(node) {
+  return (
+    node.type === 'CallExpression' &&
+    node.callee.type === 'Identifier' &&
+    knownGuards.includes(node.callee.name)
+  )
 }
 
 module.exports = {
@@ -112,10 +133,10 @@ module.exports = {
             format: 'regex',
             default: defaultOptions.guardCreatorRegex,
           },
-          serviceCreatorRegex: {
+          actorCreatorRegex: {
             type: 'string',
             format: 'regex',
-            default: defaultOptions.serviceCreatorRegex,
+            default: defaultOptions.actorCreatorRegex,
           },
         },
         additionalProperties: false,
@@ -128,74 +149,90 @@ module.exports = {
         'Move the action implementation into machine options and refer it by its name here.',
       moveActivityToOptions:
         'Move the activity implementation into machine options and refer it by its name here.',
-      moveServiceToOptions:
-        'Move the service implementation into machine options and refer it by its name here.',
+      moveActorToOptions:
+        'Move the actor implementation into machine options and refer it by its name here.',
     },
   },
 
   create: function (context) {
+    const { version } = getSettings(context)
     const options = context.options[0] || defaultOptions
-    function checkServiceSrc(node) {
+
+    // TODO also check what is passed to spawn
+    function checkActorSrc(node) {
+      if (isStringLiteral(node.value)) {
+        return
+      }
       if (
-        !isStringLiteral(node.value) &&
-        !isObjectExpression(node.value) &&
-        !(
-          isCallExpression(node.value) &&
-          isValidCallExpression(node.value, options.serviceCreatorRegex)
-        )
+        isCallExpression(node.value) &&
+        isValidCallExpression(node.value, options.actorCreatorRegex)
       ) {
-        context.report({
-          node,
-          messageId: 'moveServiceToOptions',
-        })
         return
       }
       if (node.value.type === 'ObjectExpression') {
         const typeProperty = getTypeProperty(node.value)
         if (typeProperty && !isStringLiteral(typeProperty.value)) {
           context.report({
             node: typeProperty,
-            messageId: 'moveServiceToOptions',
+            messageId: 'moveActorToOptions',
           })
         }
       }
+
+      context.report({
+        node,
+        messageId: 'moveActorToOptions',
+      })
     }
 
     function checkTransitionProperty(node) {
-      if (node.key.name === 'cond') {
+      if (node.key.name === guardPropName[version]) {
+        if (isStringLiteral(node.value)) {
+          return
+        }
         if (
-          isFunctionExpression(node.value) ||
-          isIdentifier(node.value) ||
-          (isCallExpression(node.value) &&
-            !isValidCallExpression(node.value, options.guardCreatorRegex))
+          version >= 5 &&
+          isCallExpression(node.value) &&
+          isKnownGuard(node.value)
+        ) {
+          return
+        }
+        if (
+          isCallExpression(node.value) &&
+          isValidCallExpression(node.value, options.guardCreatorRegex)
         ) {
-          context.report({
-            node,
-            messageId: 'moveGuardToOptions',
-          })
           return
         }
+        context.report({
+          node,
+          messageId: 'moveGuardToOptions',
+        })
+        return
       }
 
       if (node.key.name === 'actions') {
         if (
           isInlineAction(
             node.value,
             options.allowKnownActionCreators,
-            options.actionCreatorRegex
+            options.actionCreatorRegex,
+            version
           )
         ) {
           context.report({
             node,
             messageId: 'moveActionToOptions',
           })
-        } else if (isArrayExpression(node.value)) {
+          return
+        }
+        if (isArrayExpression(node.value)) {
           node.value.elements.forEach((element) => {
             if (
               isInlineAction(
                 element,
                 options.allowKnownActionCreators,
-                options.actionCreatorRegex
+                options.actionCreatorRegex,
+                version
               )
             ) {
               context.report({
@@ -217,14 +254,13 @@ module.exports = {
       [propertyOfChoosableActionObject]: checkTransitionProperty,
       [propertyOfChoosableActionObjectAlt]: checkTransitionProperty,
 
-      // TODO deprecated in xstate v5
       [activitiesProperty]: function (node) {
         if (
           isFunctionExpression(node.value) ||
           isIdentifier(node.value) ||
           isArrayWithFunctionExpressionOrIdentifier(node.value) ||
           (isCallExpression(node.value) &&
-            !isValidCallExpression(node.value, options.serviceCreatorRegex))
+            !isValidCallExpression(node.value, options.actorCreatorRegex))
         ) {
           context.report({
             node,
@@ -233,16 +269,17 @@ module.exports = {
         }
       },
 
-      [srcPropertyInsideInvoke]: checkServiceSrc,
+      [srcPropertyInsideInvoke]: checkActorSrc,
 
-      [srcPropertyInsideInvokeArray]: checkServiceSrc,
+      [srcPropertyInsideInvokeArray]: checkActorSrc,
 
       [entryExitProperty]: function (node) {
         if (
           isInlineAction(
             node.value,
             options.allowKnownActionCreators,
-            options.actionCreatorRegex
+            options.actionCreatorRegex,
+            version
           )
         ) {
           context.report({
@@ -255,7 +292,8 @@ module.exports = {
               isInlineAction(
                 element,
                 options.allowKnownActionCreators,
-                options.actionCreatorRegex
+                options.actionCreatorRegex,
+                version
               )
             ) {
               context.report({