Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(plugin-react): restore-jsx bug when component name is lowercase #6110

Conversation

cyco130
Copy link
Contributor

@cyco130 cyco130 commented Dec 14, 2021

Description

This PR fixes a bug in JSX restoration of the React plugin: React.createElement(aaa) is being transformed into <aaa /> which actually corresponds to React.createElement("aaa"). See the added test case. Of course I wouldn't give my React components lowercase names but minifiers are not always as considerate :)

Additional context

This fix opts out of the transform if the tag name doesn't start with an uppercase letter. I'm not exactly sure it's the best fix. But the ideal fix (renaming the identifier into something that starts with an uppercase letter) would require much more work and greatly complicate the JSX restoration plugin.


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the Commit Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.


it('should handle lowercase component names', () => {
expect(jsx('React.createElement(aaa)')).toMatchInlineSnapshot(
`"React.createElement(aaa);"`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not 100% sure if leaving it untouched will work. Have you tested this in a real scenario?

Another option is to not use libraries that minify themselves ;P

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not 100% sure if leaving it untouched will work. Have you tested this in a real scenario?

I tried in dev and build, in SSR and in the browser on a mid-sized project, works for me™ :)

In any case, I would consider it a bug if it didn't. It's not illegal to mix the new JSX runtime and React.createElement. In fact, createElement is still the recommended way in some cases. The blog post that introduced the new runtime specifically says:

If you need to manually create elements in your code, you should keep using React.createElement.

So things like React.createElement(...args) should (and does) keep working.

Another option is to not use libraries that minify themselves ;P

Fair, but they're still widespread in the ecosystem :)

@Shinigami92 Shinigami92 added plugin: react p3-minor-bug An edge case that only affects very specific usage (priority) labels Dec 15, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants