Creating a component with hyphens generates an error

[fsgreco]

At the moment if we give a name with hyphens the CLI returns an error.
For example, at the moment this :

new-component a-component-with-hyphens

will return this kind of error:

SyntaxError: Unexpected token, expected "(" (3:12)
  1 | import React from 'react';
  2 |
> 3 | function a-component-with-hyphens() {
    |            ^
  4 |   return <div></div>;
  5 | }
  6 |
etc..

At the same time this commands will work, but will create the folder, the file and the function with the name provided:

new-component a_component_with_underscores
new-component aCamelCaseComponent
new-component "a component with spaces" # this will actually give you an error

I think this is a problem that could be easily solved
I'm already working on a fix to try to standardize any of this examples to a PascalCase convention.
Will send you a Pull Request as soon as I finish testing it.

[jelly8173]

Isn't that a complexity you would not want to maintain in the future?

Personally, I cant see any problem with current implementation, as React Components name should be CamelCased by default. Besides I can see a lot of possibilities that such a thing can lead to subtle bugs in the future.

[fsgreco]

@jelly8173 actually, React Components should be PascalCase not camelCase.
However, I think the bugs persist since, unfortunately, nothing stops the user to try to do this: new-component aCamelCaseComponent or this new-component a_snake_case_one.

The PR I created is solving that kind of bugs, since it's always forcing the component to have PascalCase no matter what kind of notation you use.

You can take a look at my implementation, I think it's not so complex after all, it basically parse the string via regex in one single function.

[jelly8173]

@fsgreco yeah, I checked your implementation and spotted a bug there -- 1 useless conversion of first letter lowercase and then uppercase, so you already showed that this is simple but somehow a complex problem 🤣

I think that any "covert" substitutions and conversions are bad things as program working as a black box may issue unpredictable results, so better give some error messages like: "React components should be PascalCase", because that is the thing, they should be and programmer must not be allowed to make typos like "aNewReactComponent" or "some-new-react-component".

BTW, what if I make a typo and your version that eats everything accepts it immediately? I would need to delete newly created component and start again!

[fsgreco]

@fsgreco yeah, I checked your implementation and spotted a bug there -- 1 useless conversion of first letter lowercase and then uppercase, so you already showed that this is simple but somehow a complex problem 🤣

It seems to me more like an excess of zeal than a bug, but if you can point it out better (or better still provide me the solution I will be more than happy to fix it) :)

I think that any "covert" substitutions and conversions are bad things as program working as a black box may issue unpredictable results, so better give some error messages like: "React components should be PascalCase", because that is the thing, they should be and programmer must not be allowed to make typos like "aNewReactComponent" or "some-new-react-component".

Yeah this is an alternative solution indeed. My PR deliberately choose to be more "error prone" because in that way it took less burden from the developer, no matter what name I gave I know it will be PascalCase.

BTW, what if I make a typo and your version that eats everything accepts it immediately? I would need to delete newly created component and start again!

This is a problem that also the actual implementation has. Actually at the moment it's worse (as I explained in the first message) with the actual state of the CLI a developer can do a typo like this: "new-component aCamelCaseComponent" or this "new-component a_component_with_underscores" and the component will be generated with that typo, so one need to delete and start again as you just pointed out.