The dialog for creating new lightning web component does not following naming convention

Issue #1231 resolved
Loeng Chen created an issue

Issue description When creating a new lightning web component, A dialog will open where I can enter the Name, Tag Name and Class Name. When I enter the name in the Name field, I will type in the name in Camel-Case. The fields Tag Name and Class Name will also be automatically populated, the naming style of Tag Name and Class Name are wrong. Tag name is automatically converted to all lower case. And Class Name is also automatically converted to lowercase, with the first letter in Capital.

If I do not correct the tag name or class name field then wrong files will be created

Create LWC Dialog.PNG

Tag Name. It seems like the component, and file names will use the tag name in order to create the file names. Because the files that are created are all in lower cases. I believe it is better to use the Name field (this is in Camel Case) in order create the file names.

Class Name. When I inspect the controller js file, I see that a class named 'Mycomponent' is created. This doesn't really follow the convention. It should be in Pascal Case. Use the Name field (which should be in camel case already), and convert the first letter to capital letter.

Comments (2)

  1. Scott Wells repo owner

    The tooltips for these fields describe their role (this is based on the update that will be released tomorrow which includes some enhancements):

    • Name - The component's display name which is also used as the value for masterLabel.
    • Tag/Service Name - The component's tag or service name which is how the component is referenced in markup and JavaScript.
    • Class Name - The component's JavaScript class name.
    • Description - A short description of the component, usually a single sentence. Appears in list views, like the list of Lightning Components in Setup, and in the Lightning App Builder. Also used for integrated component API documentation.

    The name you type should be end user facing, e.g., My Component, and from that the tag name will be myComponent and the class name MyComponent. Note that if you make any changes to these generated values, it will no longer try to generate them for you even if you change the value for "Name".

    I guess that because of kebab case, technically the description of "Tag/Service Name" is incorrect because it would actually be referenced as my-component. I may update things a bit there and perhaps even show the kebab case tag name as a read-only value based on the entered tag name.

  2. Log in to comment