Rule proposal: jsx-import

[sindresorhus]

Idea from: https://github.com/sindresorhus/refined-github/pull/1089/files#r168391471

When JSX is detected in the source, require the code to import one of the following imports:

• import React from 'react';
• import preact from 'preact';
• import {h} from 'preact';
• import {h} from 'dom-chef';
• … (We can fill this list out from need)

And if no JSX is is detect, disallow these imports.

Need suggestions for a better rule name.

Thoughts on the rule?

---

IssueHunt Summary

fisker has been rewarded.

Backers (Total: $40.00)

• issuehunt ($40.00)

Submitted pull Requests

• #1980 no-useless-spread: Check cloning immediate arrays

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[fregante]

I suppose this would have to figure out the pragma (inline and babel's config?) to suggest the right import name (but not the imported module).

Related: https://github.com/jmm/babel-plugin-jsx-pragmatic

[sindresorhus]

@bfred-it No, I was thinking we just ensure one of the list imports are used. I don't think anyone would use multiple of those, so should be good. No need to overcomplicate it.

[fregante]

How do you know it's correct though?

Is import {element} from 'dom-chef' valid?
Is import {h} from 'letters' valid?
Is import {h} from 'react-alternative-no-23' valid?

[sindresorhus]

Is import {element} from 'dom-chef' valid?

No, only named import h.

Is import {h} from 'letters' valid?

Nope, not from the list.

Is import {h} from 'react-alternative-no-23' valid?

Nope.

---

I think you're misunderstanding, I mean just from the curated list, not random h imports. There are not that many h type modules. I think we can easily cover them all.

[kevva]

Did you have a look at https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md? Only checks for React though but the pragma can be configured through it's settings.

[sindresorhus]

@kevva Yup, I'm using it here: https://github.com/xojs/eslint-config-xo-react/blob/6a88098c0a7adac42a3170ca75add48738831b5f/index.js#L37 But I want something that is not just tied to React. Yes you can set the pragma there, but you can't set multiple, and import preact from 'preact'; wouldn't be detected.

[wu-s-john]

I like this rule, it gives users the flexibility to use different libraries corresponding with jsx.

[sindresorhus]

There's a good starting point in https://github.com/sindresorhus/eslint-plugin-unicorn/pull/162/files if anyone wants to finish it.

[IssueHuntBot]

@issuehuntfest has funded $40.00 to this issue. See it on IssueHunt

[doniyor2109]

@sindresorhus Hi. I wanted work on it.

[sindresorhus]

@doniyor2109 Go ahead. Please continue based on #162.

[sindresorhus]

This is up for grabs again. If you want to work on this, you can continue where #220 left off. Make sure you address the review comments from that PR.

[fregante]

I think this will be made obsolete by "React’s automatic runtime"

https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

https://babeljs.io/docs/en/babel-plugin-transform-react-jsx

TypeScript issue: microsoft/TypeScript#34547

[fisker]

I don't use React, is it mean we can close this?

[fisker]

@sindresorhus Will you get the bounty back, If I close this directly?

[sindresorhus]

I can just move it. The bounty here now applies to #1482

[issuehunt-oss]

@sindresorhus has rewarded $36.00 to @fisker. See it on IssueHunt

• 💰 Total deposit: $40.00
• 🎉 Repository reward(0%): $0.00
• 🔧 Service fee(10%): $4.00