Capitalization issues with component names
opened this issue ยท comments
1st Capitalization issue:
npx generate-react-cli component -f test --path src/components/base
Issue:
creates test.tsx, but test.test.tsx imports ./Test, which fails
Details:
results in files called
test.tsx
test.test.tsx
test.test.tsx looks like this
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Test from './Test';
describe('<Test />', () => {
test('it should mount', () => {
render(<Test />);
const test = screen.getByTestId('Test');
expect(test).toBeInTheDocument();
});
});
this line fails because ./Test doesn't exist
import Test from './Test';
2nd Capitalization issue:
npx generate-react-cli component -f ABTest --path src/components/base
Issues:
Changes component name to AbTest, with AbTestProps instead of ABTest
File name is ABTest.tsx, but ABTest.test.tsx imports ./AbTest, which fails
1st Capitalization issue:
npx generate-react-cli component -f test --path src/components/base
If you take a look at the template and the calls to replace(...)
you can see that this is intended behavior. By convention, in React, components are PascalCase
, which is true for the component filenames as well. (e.g. App.tsx)
2nd Capitalization issue:
npx generate-react-cli component -f ABTest --path src/components/base
What is your expected behavior in this case? Which do you consider to be correct, ABTest
or AbTest
, or do you only care if it's consistent?
You can create a custom template which uses templatename
vs TemplateName
for the import. (I would go this route for now)
You could submit a PR to allow the config file to keep certain replacements as is.
You could submit a pr to change filenames to PascalCase
.
Running into this right now. Been doing a find and replace. It seems like the right idea would be to honor whatever the user entered.
We only need to make sure the first letter is uppercased to enforce PascalCase. To change case further down the comp name seems like a overstep.
I'm leaning toward updating the GRC default templates to use templatename
instead of TemplateName
. This change will ensure the format matches how users type it in the command prompt.
I believe this should be the default behavior, regardless of React's PascalCase convention for component names.
If users want to create a custom template with their preferred casing, they must remember to type it that way in their terminal.
Let me know what you guys think.
@arminbro I love that idea, but I am not a maintainer of this codebase. We use it for a client.
๐ This issue has been resolved in version 8.4.4 ๐
The release is available on:
Your semantic-release bot ๐ฆ๐
Thanks for the feedback, @john-gill-acn. As we discussed, I've adjusted to using the templatename
casing. The update is available with the latest version of GRC.