[New] no-unstable-nested-components: Prevent creating unstable components inside components

[AriPerkkio]

Fixes #2749.

This is my first time playing with AST. Feel free to guide me in any way.

[AriPerkkio]

Ready for review. @ljharb could you take a look at this some point?

[ljharb]

Sorry for the long delay. Overall, this looks great!

[ljharb]

it'd be ideal to avoid hardcoding this, to avoid deviating from eslint-plugin-react-with-hooks. is there any way we could share hook detection code with that plugin?

[AriPerkkio]

At the moment, no. Currently they are not exporting the hook detection methods - I just decided to copy-paste the implementation. If they did export this, we could rely on that via dependencies/peerDependencies.

It's a shame hook related rules live in a separate package.

[AriPerkkio]

As the component detection in various patterns is tricky I think this rule should be run with eslint-remote-tester against 100-500 repositories before merging, once the implementation is reviewed and accepted. I could upload the results in another branch and check whether any false positives have been found.

[ljharb]

Please mark this PR as ready for review when you're confident in the results, and we can land it.

[AriPerkkio]

Final testing is now complete. I tested this against ~550 repositories. Fixed false positives of three rare minor cases. I'm confident to ship this now @ljharb.

There are two false positive cases remaining which I'm unable to fix for now. These are caused by component.get(node) falsely marking them as components. These cases are found from test cases as placeholders:

    /* TODO These minor cases are currently falsely marked due to component detection
    {
      code: `
      function ParentComponent() {
        const _renderHeader = () => <div />;
        return <div>{_renderHeader()}</div>;
      }
      `
    },
    {
      // https://github.com/emotion-js/emotion/blob/a89d4257b0246a1640a99f77838e5edad4ec4386/packages/jest/test/react-enzyme.test.js#L26-L28
      code: `
      const testCases = {
        basic: {
          render() {
            const Component = () => <div />;
            return <div />;
          }
        }
      }
      `
    },
    */