Lint against imported lowercase components

[gaearon]

If you import something lowercase from a package and then use it in JSX we can be confident you didn't mean a web component.

We should warn in this case. This should probably be a rule in eslint-plugin-react.

[alexzherdev]

I'd love to take a stab at this. @gaearon do you know if it's easy to get eslint-plugin-react maintainers to accept new rules into the repo? EDIT: oh, I see there can be local rules defined in the project.
Also by 'something lowercase' do you mean completely lowercase or starting with a lowercase letter? React docs are a little bit unclear in this, saying you can start the tag with a capital letter to indicate a React component, but on the other hand use 'lower-case tag names' for DOM elements. It's not clear how camelCase would be treated for instance.

[alexzherdev]

Actually, does this help? https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/jsx-pascal-case.js

[gaearon]

Hmm, not sure. Here’s what prompted me to create this issue. The code looks like this:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return <lol />;
  }
}

class lol extends Component {
  render() {
    return <h1>lol</h1>;
  }
}

export default App;

That rule doesn’t catch it.

[gaearon]

To be clear, <lol /> is valid React. It means “use a Web Component called lol”. But this is a super rare use case, and 99% times people don’t mean to use Web Components; they expect their classes to work.

What I propose: if lol exists in the scope, it is very likely the user didn’t mean a web component, and meant lol React component instead. We should warn in this case.

[gaearon]

Also by 'something lowercase' do you mean completely lowercase or starting with a lowercase letter?

Anything starting with a lowercase letter. So camelCase will also work super confusingly.

[gaearon]

jsx-eslint/eslint-plugin-react#726

[vjeux]

Beware, there are components like "i" that are likely going to be in scope

[gaearon]

Oh, good catch. This rule should have a good HTML tag whitelist I think, then it would be relatively safe.

[gaearon]

Updated the proposal.

[stephenkingsley]

I think HTML tag whitelist it a way to solve it. But takes some regex in webpack plugin is a good solution?

[gaearon]

Pretty sure we want to solve it in the linter, not as a webpack plugin.

[giuseppeg]

Custom elements must contain a hyphen - in the name so <lol /> is invalid* both in React and Web Components world.

[*] inherits from HTMLUnknownElement