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

chore(react): use new JSX transformations and remove react-axe #1129

Merged
merged 3 commits into from
Oct 4, 2023

Conversation

tthvo
Copy link
Member

@tthvo tthvo commented Oct 3, 2023

Welcome to Cryostat! 👋

Before contributing, make sure you have:

  • Read the contributing guidelines
  • Linked a relevant issue which this PR resolves
  • Linked any other relevant issues, PR's, or documentation, if any
  • Resolved all conflicts, if any
  • Rebased your branch PR on top of the latest upstream main branch
  • Attached at least one of the following labels to the PR: [chore, ci, docs, feat, fix, test]
  • Signed all commits using a GPG signature

To recreate commits with GPG signature git fetch upstream && git rebase --force --gpg-sign upstream/main


Related to #1110
Related to #482

Description of the change:

  • Converted default imports to namespaced imports for react.
  • Use new JSX Transformation available in React >= 17.
  • Update eslint configurations to select react version that its detected instead of hardcoding (i.e. previously 16 tho we used 17).
  • Removed react-axe in dev environment.

Motivation for the change:

For references about namespaced/named imports and JSX transformation:

https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

In addition to cleaning up unused imports, this will also help you prepare for a future major version of React (not React 17) which will support ES Modules and not have a default export.

For react-axe, there is a hiccup about the requirement of default imports for React. I removed it here since we are not using in dev environment, at least until #947. There, perhaps we can explore axe cli (https://github.com/dequelabs/axe-core-npm/blob/develop/packages/cli/README.md).

This is one of the first steps to upgrade to React 18 and PF 5.

References

https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/#jsx-factories

@tthvo tthvo added the chore Refactor, rename, cleanup, etc. label Oct 3, 2023
@github-actions github-actions bot added the needs-triage Needs thorough attention from code reviewers label Oct 3, 2023
@tthvo tthvo changed the title chore(react): remove chore(react): use new JSX transformations and remove react-axe Oct 3, 2023
@tthvo tthvo added safe-to-test and removed needs-triage Needs thorough attention from code reviewers labels Oct 3, 2023
@tthvo tthvo requested review from aali309 and mwangggg October 3, 2023 09:10
@tthvo
Copy link
Member Author

tthvo commented Oct 3, 2023

/build_test

@github-actions
Copy link

github-actions bot commented Oct 3, 2023

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-1129-234fa722e1ba7463bfba36f6bfad26bda1c44376 sh smoketest.sh

@andrewazores andrewazores merged commit ed7c201 into cryostatio:main Oct 4, 2023
18 checks passed
@tthvo tthvo deleted the react-imports branch October 4, 2023 20:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chore Refactor, rename, cleanup, etc. safe-to-test
Projects
No open projects
Status: Done
Status: Done
Development

Successfully merging this pull request may close these issues.

2 participants