Rule proposal: `require-component-name`

[danielbastos11]

Please describe what the rule should do:

This rule warns you if the component's name property is undefined

What category of rule is this?

[x] Enforces code style
[ ] Warns about a potential error
[ ] Suggests an alternate way of doing something
[ ] Other (please specify:)

Provide 2-3 code examples that this rule will warn about:

// bad
export default {
  render(){
    return <div />
  }
}

// good
export default {
  name: 'div-component',
  render(){
    return <div />
  }
}

Why should this rule be included

Naming components is a good practice. It makes it easier to debug your code with Vue Devtools, and helps you to keep your code organized. So much so that at least 2 rules on the Style Guide address the issue of how to name your components - one of them is a essential rule.

[michalsnik]

Hey, thanks for posting this proposal. I think this might even be something worth to be mentioned in Styleguide itself / cc @chrisvfritz

[chrisvfritz]

Hmm, I would probably leave this out of the style guide and keep it in the uncategorized section here, because a name option is not actually useful in the vast majority of cases. For example:

• When registering a component locally, as the Vue devtools will use the component's local name.
• When registering a component globally, as providing a name is part of that process.
• When importing a .vue component to be used in a render function, as a name will be derived from the __file property that's added to the default export.

So now that I think about it actually, and especially since functional components can now be written in .vue files, I can't think of a real use case where a component needs the name option to be specified. Did I miss any common (or even uncommon) scenarios?

[LinusBorg]

The name is necessary when rendering a component recursively.

[chrisvfritz]

Yes, that's true! I think a rule to warn about recursive components without a name would be useful. I'd put that in strongly-recommended, but probably leave it out of the style guide still because it's a bit niche.

[danielbastos11]

My use case is slightly different.
I'm using babel-plugin-transform-vue-jsx, which makes my life extremely easier by allowing me not to register components locally and providing me with a Vue.js syntax that looks almost exactly like React (this is really important in my use case)

This is a extremely simplified version of one my files:

import Table from '../components/Table'

export default {
  name: 'SpList',
  props: {
    visits: { type: Array, default: [] }
  },
  render() {
    let { visits } = this
    return (
      <div>
        <Table
          header={['Location', 'Date', 'Users', 'Status']}
          items={visits} factory={rowFactory}
        />
      </div>
    )
  }
}

Notice how I never registered Table as a local component. This leads Vue devtools to display my component as "AnonymousComponent".

While I have to say that I probably said "my use case" too many times to make this proposal global to the Vue community, I think it is importante enough to people using babel-plugin-transform-vue-jsx (which is probably a lot of people!)

[chrisvfritz]

@danielbastos11 The problem isn't actually that that you're using JSX, but rather that you're not using a .vue file. Even if you're not using a template, I still recommend a .vue file for this reason, and because you may also want add scoped styles later. For example, if you're a fan of CSS modules:

<script>
import Table from '../components/Table'

export default {
  name: 'SpList',
  props: {
    visits: { type: Array, default: [] }
  },
  render() {
    let { visits, $style } = this
    return (
      <div class={$style.tableContainer}>
        <Table
          header={['Location', 'Date', 'Users', 'Status']}
          items={visits} factory={rowFactory}
        />
      </div>
    )
  }
}
</script>

<style lang="scss" module>
.tableContainer {
  /* ... */
}
</style>

I guess maybe a rule that's missing from the style guide is to use .vue files wherever possible. 😄

[LinusBorg]

@chrisvfritz I agree that using .vue files is preferable, but consider this scenario:

If I use a component someone published, a file that was bundled with rollup or webpck - that component will not have a name property, not a __filename (added only in dev mode), right?

And if I use it like @danielbastos11 does, I will end up with an anonymous component in the devtools - so I'm forced to register it locally just to get a name or manually add a name to it.

The same woudl happen if I passed such dynamically to <component :is="myComponent">, by the way. Sure,. I could register it locally and then do <component :is="$components.myComponent">, but now the template expression is longer than it needs to be, to force a name.

...or am I missing something?

[chrisvfritz]

@LinusBorg If __filename is only added in dev mode, then it sounds like 3rd-party component libraries would be an exception and a name property should be required in those codebases. 👍

This also makes me wonder if there should be a separate rules category (and maybe section of the style guide or completely separate page) for 3rd-party component libraries.

[danielbastos11]

@chrisvfritz Thanks a lot for your feedback!

I don't think a rule recommending the use of .vue is desirable, though.
I mean, I think it's pretty reasonable to assert that one of Vue's main goal is to allow for maximum flexibility - for instance, you can use Vue with render functions or templates, and it works great with both. Recommending Single Files Components over plain old JSX files would kill some of this flexibility, in my opinion.

[danielbastos11]

BTW, I'd agree that adding names to a library's component should be the library's author concern. If the 3rd-party components I'm using aren't named, I should either make a PR or live with it.

[chrisvfritz]

@danielbastos11 I might be misunderstanding, but how would the recommendation for .vue files be less flexible? If you're using JSX, you're already guaranteed to be using a build process, and they don't restrict your options in any way I'm aware of.

Also, "plain old JSX files" are already a special kind of file that requires preprocessing.

[danielbastos11]

@chrisvfritz I meant that by not making .vue an official style guide recommendation, we'd make life easier to people who don't want to include .vue on their build process, since they wouldn't need to adhere to this rule.

I know these people could just turn the rule off on their .eslintrc, but I've seen many great component libraries just assume everybody is using .vue and not bundle their assets at all. I'm afraid such recommendation might make this pattern even more widespread in the community.