Upgrade React version - LFX Mentorship #998
Comments
|
Is this dependent on other upgrades like the ones we have for graph libs ? @yurishkuro I can analyze the deps to begin with otherwise. |
|
@ShaswatPrabhat I don't know |
Upgrade to React 18. ## Which problem is this PR solving? - Resolves #998 ## Short description of the changes - Upgrade to React 18 Signed-off-by: Sergio-Mira <sergio.mira@zendesk.com>
|
I think #1173 is only part of the story. A lot of dependabot attempts to upgrade other deps are failing, and among them several are failing due to an indirect upgrade of |
As per jaegertracing#998; also update the package's `peerDependencies` accordingly. I am not entirely sure why Dependabot was trying to update these typings separately because bumping them together appears to yield a successful build.
As per jaegertracing#998; also update the package's `peerDependencies` accordingly. I am not entirely sure why Dependabot was trying to update these typings separately because bumping them together appears to yield a successful build. Signed-off-by: Máté Szabó <mszabo@fandom.com>
## Which problem is this PR solving? Contributes towards #998 ## Short description of the changes Bump Plexus React typings to React 18 and also update the package's `peerDependencies` accordingly. I am not entirely sure why Dependabot was trying to update these typings separately because bumping them together appears to yield a successful build. Signed-off-by: Máté Szabó <mszabo@fandom.com>
|
Looks like there's a fun issue... the I'm thinking we could roll back the react typing versions for now and try to see how far ahead we can get with a TS upgrade. |
This is a conservative bump to minimize the amount of changes needed in
tooling and dependencies. Version 3.8.3 was chosen because it is the
version that implements support for type-only exports and imports (i.e.
`import type { TFoo } from '@types/foo';`, which is the major source of
incompatibility with upgraded type definitions in newer dependency
versions.
Notable changes:
* As noted in jaegertracing#998, the `@types/react` version used to type-check
`jaeger-ui` is a transitive dependency on version `16.8.7`, rather
than the expected `18`. Unfortunately, both newer `16.x` type
definitions as well as `18.x` type definitions are incompatible
with various dependencies such as `antd`. As a workaround, downgrade
the typing versions for now and add an explicit dependency on them
to the project. Only index.tsx was using a React 18-specific API
(createRoot), so convert it back to JS until the typings can be
updated again.
* TypeScript now enforces that `composite` projects must also generate
declaration files, since that's what the project references system
uses. Make it so.
* Make Plexus a project reference in the root tsconfig, per the
longstanding todo and per the changes above.
This is a conservative bump to minimize the amount of changes needed in
tooling and dependencies. Version 3.8.3 was chosen because it is the
version that implements support for type-only exports and imports (i.e.
`import type { TFoo } from '@types/foo';`, which is the major source of
incompatibility with upgraded type definitions in newer dependency
versions.
Notable changes:
* As noted in jaegertracing#998, the `@types/react` version used to type-check
`jaeger-ui` is a transitive dependency on version `16.8.7`, rather
than the expected `18`. Unfortunately, both newer `16.x` type
definitions as well as `18.x` type definitions are incompatible
with various dependencies such as `antd`. As a workaround, downgrade
the typing versions for now and add an explicit dependency on them
to the project. Only index.tsx was using a React 18-specific API
(createRoot), so convert it back to JS until the typings can be
updated again.
* TypeScript now enforces that `composite` projects must also generate
declaration files, since that's what the project references system
uses. Make it so. This required a small adjustment to the ErrorMessage
component, as the types of its Message and Details sub-components
could not be reflected in this declaration file; this was trivially
fixable by converting them to named exports instead (which is also
consistent with other areas of the codebase).
* Make Plexus a project reference in the root tsconfig, per the
longstanding todo and per the changes above.
This is a conservative bump to minimize the amount of changes needed in
tooling and dependencies. Version 3.8.3 was chosen because it is the
version that implements support for type-only exports and imports (i.e.
`import type { TFoo } from '@types/foo';`, which is the major source of
incompatibility with upgraded type definitions in newer dependency
versions.
Notable changes:
* As noted in jaegertracing#998, the `@types/react` version used to type-check
`jaeger-ui` is a transitive dependency on version `16.8.7`, rather
than the expected `18`. Unfortunately, both newer `16.x` type
definitions as well as `18.x` type definitions are incompatible
with various dependencies such as `antd`. As a workaround, downgrade
the typing versions for now and add an explicit dependency on them
to the project. Only index.tsx was using a React 18-specific API
(createRoot), so convert it back to JS until the typings can be
updated again.
* TypeScript now enforces that `composite` projects must also generate
declaration files, since that's what the project references system
uses. Make it so. This required a small adjustment to the ErrorMessage
component, as the types of its Message and Details sub-components
could not be reflected in this declaration file; this was trivially
fixable by converting them to named exports instead (which is also
consistent with other areas of the codebase).
* Make Plexus a project reference in the root tsconfig, per the
longstanding todo and per the changes above.
Signed-off-by: Máté Szabó <mszabo@fandom.com>
This is a conservative bump to minimize the amount of changes needed in
tooling and dependencies. Version 3.8.3 was chosen because it is the
version that implements support for type-only exports and imports (i.e.
`import type { TFoo } from '@types/foo';`, which is the major source of
incompatibility with upgraded type definitions in newer dependency
versions.
Notable changes:
* As noted in jaegertracing#998, the `@types/react` version used to type-check
`jaeger-ui` is a transitive dependency on version `16.8.7`, rather
than the expected `18`. Unfortunately, both newer `16.x` type
definitions as well as `18.x` type definitions are incompatible
with various dependencies such as `antd`. As a workaround, downgrade
the typing versions for now and add an explicit dependency on them
to the project. Only index.tsx was using a React 18-specific API
(createRoot), so convert it back to JS until the typings can be
updated again.
* TypeScript now enforces that `composite` projects must also generate
declaration files, since that's what the project references system
uses. Make it so. This required a small adjustment to the ErrorMessage
component, as the types of its Message and Details sub-components
could not be reflected in this declaration file; this was trivially
fixable by converting them to named exports instead (which is also
consistent with other areas of the codebase).
* Make Plexus a project reference in the root tsconfig, per the
longstanding todo and per the changes above.
Signed-off-by: Máté Szabó <mszabo@fandom.com>
This is a conservative bump to minimize the amount of changes needed in
tooling and dependencies. Version 3.8.3 was chosen because it is the
version that implements support for type-only exports and imports (i.e.
`import type { TFoo } from '@types/foo';`, which is the major source of
incompatibility with upgraded type definitions in newer dependency
versions.
Notable changes:
* As noted in jaegertracing#998, the `@types/react` version used to type-check
`jaeger-ui` is a transitive dependency on version `16.8.7`, rather
than the expected `18`. Unfortunately, both newer `16.x` type
definitions as well as `18.x` type definitions are incompatible
with various dependencies such as `antd`. As a workaround, downgrade
the typing versions for now and add an explicit dependency on them
to the project. Only index.tsx was using a React 18-specific API
(createRoot), so convert it back to JS until the typings can be
updated again.
* TypeScript now enforces that `composite` projects must also generate
declaration files, since that's what the project references system
uses. Make it so. This required a small adjustment to the ErrorMessage
component, as the types of its Message and Details sub-components
could not be reflected in this declaration file; this was trivially
fixable by converting them to named exports instead (which is also
consistent with other areas of the codebase).
* Make Plexus a project reference in the root tsconfig, per the
longstanding todo and per the changes above.
Signed-off-by: Máté Szabó <mszabo@fandom.com>
## Which problem is this PR solving? - Contributes towards #818 ## Short description of the changes This is a conservative bump to minimize the amount of changes needed in tooling and dependencies. Version 3.8.3 was chosen because it is the version that implements support for type-only exports and imports (i.e. `import type { TFoo } from '@types/foo';`, which is the major source of incompatibility with upgraded type definitions in newer dependency versions. Notable changes: * As noted in #998, the `@types/react` version used to type-check `jaeger-ui` is a transitive dependency on version `16.8.7`, rather than the expected `18`. Unfortunately, both newer `16.x` type definitions as well as `18.x` type definitions are incompatible with various dependencies such as `antd`. As a workaround, downgrade the typing versions for now and add an explicit dependency on them to the project. Only index.tsx was using a React 18-specific API (createRoot), so convert it back to JS until the typings can be updated again. * TypeScript now enforces that `composite` projects must also generate declaration files, since that's what the project references system uses. Make it so. This required a small adjustment to the ErrorMessage component, as the types of its Message and Details sub-components could not be reflected in this declaration file; this was trivially fixable by converting them to named exports instead (which is also consistent with other areas of the codebase). * Make Plexus a project reference in the root tsconfig, per the longstanding todo and per the changes above. Signed-off-by: Máté Szabó <mszabo@fandom.com>
## Which problem is this PR solving? Contributes towards jaegertracing#998 ## Short description of the changes Bump Plexus React typings to React 18 and also update the package's `peerDependencies` accordingly. I am not entirely sure why Dependabot was trying to update these typings separately because bumping them together appears to yield a successful build. Signed-off-by: Máté Szabó <mszabo@fandom.com>
## Which problem is this PR solving? - Contributes towards jaegertracing#818 ## Short description of the changes This is a conservative bump to minimize the amount of changes needed in tooling and dependencies. Version 3.8.3 was chosen because it is the version that implements support for type-only exports and imports (i.e. `import type { TFoo } from '@types/foo';`, which is the major source of incompatibility with upgraded type definitions in newer dependency versions. Notable changes: * As noted in jaegertracing#998, the `@types/react` version used to type-check `jaeger-ui` is a transitive dependency on version `16.8.7`, rather than the expected `18`. Unfortunately, both newer `16.x` type definitions as well as `18.x` type definitions are incompatible with various dependencies such as `antd`. As a workaround, downgrade the typing versions for now and add an explicit dependency on them to the project. Only index.tsx was using a React 18-specific API (createRoot), so convert it back to JS until the typings can be updated again. * TypeScript now enforces that `composite` projects must also generate declaration files, since that's what the project references system uses. Make it so. This required a small adjustment to the ErrorMessage component, as the types of its Message and Details sub-components could not be reflected in this declaration file; this was trivially fixable by converting them to named exports instead (which is also consistent with other areas of the codebase). * Make Plexus a project reference in the root tsconfig, per the longstanding todo and per the changes above. Signed-off-by: Máté Szabó <mszabo@fandom.com>
|
Another blocker will be the use of Enzyme in unit tests, which is not compatible with React 18. https://testing-library.com/docs/react-testing-library/migrate-from-enzyme/ |
|
Hey, would love to work on this @yurishkuro in LFX'23 cohort, can you tell me the approach, so that start working on this issue! |
|
@kirtanchandak I cannot suggest an approach, that's part of the project to figure out. There are a lot of open PRs by dependabot that do not pass CI for various reasons. One option would be to investigate each PR and address the issues blocking the upgrade. At some point it will probably lead you into some other dependency that is not upgraded and thus blocking the first upgrade, and so on. It would be nice to work out a full dependency tree for the upgrade path. Eventually upgrades will require code changes and migration (e.g. the enzyme issue #998 (comment)), so having a full dependency tree would be super useful as we can focus on the leaves and address those (with code changes or whatever), thus unblocking other upgrades. Some part of this investigation was done by @mszabo-wikia in #1261. |
|
I would like to work on this issue under LFX Fall 2023. Should I go ahead and dig out the issue and further create child issues to tackle it bit by bit. |
|
Further, I would suggest moving docs to Docasauras site under a subdomain |
|
@anshgoyalevil please see the parent issue for guidelines |
|
@yurishkuro |
|
@anj20 you need to submit an application to LFX if you want to participate as a mentee. For the application process please refer to jaegertracing/jaeger#4457. |
|
Hi @yurishkuro, |
You have better chances to have your application selected with a proposal than with CV only.
Not required, but recommended, simply because other candidates are doing that and it plays into the selection process. |
|
Hello @yurishkuro 👋 I'm Pranit Patil, a student pursuing a Bachelor's degree in Computer Science at Mumbai University. Recently, I completed my internship at hubx.ai, where I worked as a full-stack developer intern. Prior to that, I gained experience as a front-end developer intern at Tech Cryptors. My skills include JavaScript, ReactJS, Node, Express, MongoDB, and CSS libraries, such as Bootstrap. Through various projects, including full-stack ones, I have honed my expertise in full-stack development I'm keen on participating in the LFX mentorship program and becoming an active community member. I kindly request your assistance in guiding me through project discussions. Thank you. |
|
Greetings @yurishkuro , @yashrsharma44 , I'm eager to participate in the upcoming LFX mentorship for Fall 2023. As an open-source contributor and member at Layer5, I possess expertise in JavaScript, React.js, and Next.js. Additionally, I also know fundamentals of Golang and TypeScript, and I have familiarity with Docker and Kubernetes. Furthermore, I have a strong understanding of essential computer science topics such as object-oriented programming, data structures, and more. I look forward to contributing my skills and knowledge to this exciting project. |
|
Hi @yurishkuro , Thanks! |
|
Hi @yurishkuro and @yashrsharma44 |
|
Greetings, @yurishkuro and @yashrsharma44 |
|
Hey @yurishkuro and @yashrsharma44, |
|
Hi @Sanket-0510 @malaviya-parth @sagar-kashyap @himanshuaggar @hirentimbadiya @PranitPatil03, Thanks for reaching out, glad that we have so many folks interested in working on this project :) |
|
Hi @yurishkuro @yashrsharma44, I am Alwin T Varghese, an XR Open Source fellow, one among only 100 individuals selected for the program throughout India. During the fellowship, I built an editor introducing AR experiences for fashion designers, enabling them to upload 3D fashion models, edit various parts according to their preferences, alter designs using custom materials, add annotations directly to the model, and easily share their work with peers (also implemented an HD render feature). All of this was developed using React Three Fiber, TypeScript, and styled-components. Throughout the project's development from scratch, I have contributed nearly 170+ commits and also took the lead in developing the majority of the backend code using Node.js. I established a pipeline for the automatic deployment of the frontend to an S3 bucket and set up the backend on an EC2 instance. I am known for my determination to accomplish tasks without requiring extensive guidance, and I don't consider the work complete until I've achieved a state of perfection. Check out my work at XR Open Source here: https://github.com/alwinsDen/XROS-Fellowship-Contrib-2023.git |
|
@anshgoyalevil's application was selected for this project. Congratulations! |
|
Thanks for having me in 🚀 |
|
Congrats @anshgoyalevil. There's a lot to learn from you. |
….parse() (#1794) ## Which problem is this PR solving? - This PR upgrades the query-string dep from v6.3.0 to v8.1.0 - improved version of: #1789 - part of: #998 ## Description of the changes - In query-string v6.4.0, null type was introduced. sindresorhus/query-string@49d2203#diff-7aa4473ede4abd9ec099e87fec67fd57afafaf39e05d493ab4533acc38547eb8R36 - Further, in later versions, string[] type is changed to (string | null)[] - This PR adds a wrapper function for `queryString.parse()` function to modify its type as per our codebase. ## How was this change tested? - locally ## Checklist - [x] I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md - [x] I have signed all commits - [x] I have added unit tests for the new functionality - [x] I have run lint and test steps successfully - for `jaeger`: `make lint test` - for `jaeger-ui`: `yarn lint` and `yarn test` --------- Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
… definitions (#1803) ## Which problem is this PR solving? - part of: #998 - upgrade match-sorter to v6.3.1 | remove @types/match-sorter stub type definitions ## Description of the changes - This PR upgrades the `match-sorter` dependency to the latest version, i.e., v6.3.1. - `match-sorter` v6.3.1 now includes its own type definitions so an external package for that is not required ## How was this change tested? - locally ## Checklist - [x] I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md - [x] I have signed all commits - [x] I have added unit tests for the new functionality - [x] I have run lint and test steps successfully - for `jaeger`: `make lint test` - for `jaeger-ui`: `yarn lint` and `yarn test` Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
## Which problem is this PR solving? - part of: #998 - fixes #1703 ## Description of the changes - The Size of this PR may look big, but there were no breaking changes except the following: - ant-design v5.0.0 no longer supports less variables. That means we have to use the `seedToken` and `aliasToken` in place of less variables. - With this change, we also needed to use the default styling of ant-design v4. For that, ant-design team provides a `compatible` package. - The notification.`close` and `warn` have been renamed `destory` and `warning` respectively. - PR: https://github.com/jaegertracing/jaeger-ui/pull/1839/files is reversed in this PR, because we are not really on @types/react v18. We are locked on v16 due to yarn resolution. Having v18 written in package.json was creating conflict with the installation of antd v5 [screen-capture (5).webm](https://github.com/jaegertracing/jaeger-ui/assets/94157520/550a79b7-b333-497b-9b73-70d0e6a1a748) ## How was this change tested? - Manually, and unit tests ## Checklist - [x] I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md - [x] I have signed all commits - [x] I have added unit tests for the new functionality - [x] I have run lint and test steps successfully - for `jaeger`: `make lint test` - for `jaeger-ui`: `yarn lint` and `yarn test` --------- Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
## Which problem is this PR solving? - part of: #998 ## Description of the changes - This PR upgrades the `@types/react` dep to v18 latest ## How was this change tested? - yarn lint ## Checklist - [x] I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md - [x] I have signed all commits - [x] I have added unit tests for the new functionality - [x] I have run lint and test steps successfully - for `jaeger`: `make lint test` - for `jaeger-ui`: `yarn lint` and `yarn test` Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
For the application process please refer to this issue.
"@types/react": "16.8.7". It's also blocking upgrades of other dependencies. This project is likely to involve a substantial amount of code contribution, as certain upgrade require fixing the code to use the new APIs, and sometimes we may run into dependencies that are EOL and need to be replaced altogether.The text was updated successfully, but these errors were encountered: