feat(no-inline-implementation): detect inline implementations inside spawn call with xstate v5

Author: rlaffers

lib/rules/no-inline-implementation.js

@@ -13,6 +13,7 @@ const { getTypeProperty } = require('../utils/selectors')
 const { anyPass } = require('../utils/combinators')
 const getSettings = require('../utils/getSettings')
 const XStateDetector = require('../utils/XStateDetector')
+const isSpawnFromParametersCallExpresion = require('../utils/isSpawnFromParametersCallExpression')
 
 function isArrayWithFunctionExpressionOrIdentifier(node) {
   return (
@@ -247,7 +248,7 @@ module.exports = {
     }
 
     return {
-      ...xstateDetector.visitors,
+      ...(version === 4 ? xstateDetector.visitors : {}),
       [propertyOfEventTransition]: checkTransitionProperty,
       [propertyOfEventTransitionInArray]: checkTransitionProperty,
       [propertyOfAltEventTransitionInArray]: checkTransitionProperty,
@@ -309,7 +310,22 @@ module.exports = {
 
       'CallExpression[callee.name=/^createMachine$|^Machine$/] > ObjectExpression:first-child CallExpression':
         function (node) {
-          if (!xstateDetector.isSpawnCallExpression(node)) {
+          if (version === 4) {
+            if (
+              xstateDetector.isSpawnCallExpression(node) &&
+              node.arguments[0] &&
+              !isStringLiteral(node.arguments[0])
+            ) {
+              context.report({
+                node: node.arguments[0],
+                messageId: 'moveActorToOptions',
+              })
+            }
+            return
+          }
+
+          // In XState v5, spawn comes from arguments passed to the callback within assign()
+          if (!isSpawnFromParametersCallExpresion(node)) {
             return
           }
 

lib/utils/isSpawnFromParametersCallExpression.js

@@ -0,0 +1,40 @@
+const { getParentFunctionExpression } = require('./selectors')
+
+module.exports = function isSpawnFromParametersCallExpresion(node) {
+  const functionNode = getParentFunctionExpression(node)
+  if (!functionNode) {
+    return false
+  }
+
+  if (!functionNode.params[0]) {
+    return false
+  }
+
+  // populated when there is a destructured object for params
+  let spawnIdentifier = null
+  // populated when the whole first arg object is grabbed
+  let firstArgIdentifier = null
+
+  if (functionNode.params[0].type === 'Identifier') {
+    firstArgIdentifier = functionNode.params[0].name
+  } else if (functionNode.params[0].type === 'ObjectPattern') {
+    const spawnProperty = functionNode.params[0].properties.find(
+      (property) => property.key.name === 'spawn'
+    )
+    if (!spawnProperty) {
+      return false
+    }
+    spawnIdentifier = spawnProperty.value.name
+  } else {
+    return false
+  }
+
+  return (
+    (node.callee.type === 'Identifier' &&
+      node.callee.name === spawnIdentifier) ||
+    (node.callee.type === 'MemberExpression' &&
+      node.callee.object.name === firstArgIdentifier &&
+      (node.callee.property.name === 'spawn' ||
+        node.callee.property.value === 'spawn'))
+  )
+}

lib/utils/selectors.js

@@ -7,6 +7,23 @@ function getTypeProperty(node) {
   return node.properties.find(propertyHasName('type'))
 }
 
+function getParentFunctionExpression(node) {
+  let current = node.parent
+  while (true) {
+    if (!current) {
+      return null
+    }
+    if (
+      current.type === 'FunctionExpression' ||
+      current.type === 'ArrowFunctionExpression'
+    ) {
+      return current
+    }
+    current = current.parent
+  }
+}
+
 module.exports = {
   getTypeProperty,
+  getParentFunctionExpression,
 }

tests/lib/rules/no-inline-implementation.js

@@ -133,7 +133,7 @@ const tests = {
           states: {
             active: {
               entry: assign({
-                childActor: () => spawn('childActor'),
+                childActor: ({ spawn }) => spawn('childActor'),
               }),
               on: {
                 OFF: {
@@ -555,7 +555,7 @@ const tests = {
     withVersion(5, {
       code: `
         /* eslint no-inline-implementation: [ "warn", { "allowKnownActionCreators": true } ] */
-        const { createMachine, spawn } = require('xstate')
+        const { createMachine } = require('xstate')
         createMachine({
           states: {
             active: {
@@ -575,8 +575,8 @@ const tests = {
                 },
               },
               exit: assign({
-                childActor1: () => spawn(() => {}),
-                childActor2: () => spawn(childActor),
+                childActor1: ({ spawn }) => spawn(() => {}),
+                childActor2: ({ spawn }) => spawn(childActor),
               }),
             },
           },