New rule proposal: require-components-imports-pascal-case

[jHuang30]

In alignment with the "no-arguments-for-html-elements." rule, we shall mandate that component imports in .gjs/.gts files follow PascalCase, instead of camelCase or any other casing. By following this approach, we can guarantee that we won't come across the error caused by casing at a later time.

Basically, by employing camelCase for component imports, we might encounter an error, ex:

// bad

import imageComponent from 'image/components/image-component';
import toggleButtonV2 from 'Buttons/components/toggles'
import something from 'x/components/y/z';

// good

import ImageComponent from 'image/components/image-component';
import { generateToken } from 'xxx/utils/tracking'; // not a component

The new rule will inspect whether the import pertains to a component. If it does, it will verify that the import is in PascalCase. Any component import in camel case or other casings will trigger an error.

Basically, the ImportDeclaration will be utilized to determine if an import comes from components (contains "components" in node.source.value) and subsequently assess whether the import (something like specifier.local.name)adheres to PascalCase.

Additional consideration: we have the option to allow configuration of the import path, with the default set to 'components.' rules: { 'ensure-components-imports-pascal-case': [ 'error', { importPaths:['**/components/**', 'xxx'] }, ], }

[NullVoxPopuli]

Thanks for proposing a new lint rule and providing such thorough reasoning / explanation / almost-implementation!!! it's super helpful <3

mandate that component imports in .gjs/.gts files follow PascalCase, instead of camelCase

This can be controlled by a library author to use named exports, so folks have to do something like:

import { Image } from 'iamge/components/image-component';

Additionally, in template linting, lower case components are totally valid! like this:

{{#let (do something) as |theComponent|}}

  <theComponent />

{{/let}}

If it's default exports that you want to discourage tho, there are existing lints from other plugins for that, probably

the import pertains to a component.

generally, we can't know this information, because components don't have to be imported from <foo>/components/*. For example, all the components here: https://ember-primitives.pages.dev/3-components/avatar

[chrisrng]

@NullVoxPopuli We may just want to then update the rule no-arguments-for-html-elements which would incorrectly assume a lowercase angle bracket component is not an Ember component but an HTML element.

See: https://github.com/ember-template-lint/ember-template-lint/blob/master/lib/rules/no-arguments-for-html-elements.js#L11C33-L11C33