feat: Implement automatic adding of jsxImportSource pragma definition

[iChenLei]

What: To fix #2070 and fix #2373

Why: when using the new fragma jsxImportSource - to automatically add the new pragma definition to the top of the file page, like already is implemented with the old pragma /* @jsx jsx */

How: Add eslint rule support.

Checklist:

• Documentation
• Tests
• Code complete
• Changeset

jsx-runtime

react official blog -> https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
babel support -> https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#customizing-the-automatic-runtime-import

Add jsxImportSource option

The default custom-automatic-runtime is @emotion/react, more jsx-runtime support detail you can found in @emotion/react source code like follows
https://github.com/emotion-js/emotion/blob/main/packages/react/src/jsx-dev-runtime.js
https://github.com/emotion-js/emotion/blob/main/packages/react/src/jsx-runtime.js

- "@emotion/jsx-import": "error"
+ "@emotion/jsx-import": [2, "jsxImportSource"]

// .eslintrc.js
module.exports = {
  root: true,
  plugins: [ '@emotion'],
  rules: {
    "@emotion/jsx-import": [2, "jsxImportSource"]
   }
}

It works as follows:

Add jsxImportSource custom jsx-runtime option

- "@emotion/jsx-import": "error"
+ "@emotion/jsx-import": [2, { jsxImportSource: "customreact/jsx-runtime"  }]

// .eslintrc.js
module.exports = {
  root: true,
  plugins: [ '@emotion'],
  rules: {
    "@emotion/jsx-import": [2, { jsxImportSource: "customreact/jsx-runtime"  }]
   }
}

It works as follows:

/cc @Andarist @mitchellhamilton

[changeset-bot]

🦋 Changeset detected

Latest commit: 6ada9d9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@emotion/eslint-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6ada9d9:

Sandbox	Source
Emotion	Configuration

[codecov]

Codecov Report

Merging #2353 (6ada9d9) into main (685bbec) will increase coverage by 0.03%.
The diff coverage is 100.00%.

Impacted Files	Coverage Δ
packages/eslint-plugin/src/rules/jsx-import.js	97.77% <100.00%> (+1.05%)	⬆️

[emmatown]

Could you change the config to be like this?

The default should be this:

{
  "runtime": "classic"
}

and to use the new runtime, it should be this

{
  "runtime": "automatic"
}

and with a custom importSource, it should be this:

{
  "runtime": "automatic",
  "importSource": "whatever"
}

[iChenLei]

After I changed the implemention:

{ "runtime": "automatic" }

{ "runtime": "automatic", "importSource": "whatever" }

If your config is not oneOf [{ "runtime": "xx" }, { "runtime": "xx", "importSource": "yy" }], your code will be treated by the previous @emotion/eslint-plugin. jsxImportSource support is a special deal.

/cc @mitchellhamilton @Andarist Hi, maintainers, do you have a little time to review my PR? Thanks

[osdiab]

Looking forward to using this!

[ryanrabello]

I'm not qualified to approve this PR. But I would love to be able to use the code in here

[avertin]

I really appreciate this PR. For now, I've copied this as a local eslint rule for my project. Hopefully it can be integrated soon.

I noticed one difference between classic and automatic options that I was hoping to understand better. For classic, once the jsx import rule is satisfied, these additional rules are also satisfied ( 'jsx' is defined but never used - no-unused-vars AND 'React' must be in scope when using JSX react/react-in-jsx-scope). With automatic, after the jsx import rule is satisfied, these errors are still present. I'm new to eslint rules and I was wondering what accounts for this difference?

[emmatown]

'jsx' is defined but never used - no-unused-vars

With the automatic runtime, that error is correct, it's unused and shouldn't be there.

'React' must be in scope when using JSX react/react-in-jsx-scope

That rule should be disabled when using the automatic runtime - https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md#when-not-to-use-it