Removed react-helmet and added react-helmet-async.
1. Notable changes for react, react-dom:
Motivation: React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.
In V16, we had below to render the component:
import { render } from 'react-dom';
const container = document.getElementById('app');
render(, container);
In V18, we have below to render the component:
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render();
2. Notable changes for @types-react and @types-react-dom:
Motivation: The new types are safer and catch issues that used to be ignored by the type checker. The most notable change is that the children prop now needs to be listed explicitly when defining props
In old we have below
WrappedComponent: React.ComponentType
,
In new we have below
WrappedComponent: React.ComponentType<React.PropsWithChildren>,
Approach for type changes: So this Type changes are added using automation script https://github.com/eps1lon/types-react-codemod. This automation script is suggested in react18 migration document.
Added new package types-react-codemod.
After adding the package, executed yarn types-react-codemod preset-18 ./src in root, and then selected all option from the list of options.
This will transform all types of component type having child components to <React.PropsWithChildren
Updated test cases with createRoot for createRootMock instead of render and renderMock.
4. Notable changes for @fluentui/react from v8.x.x to v8.118.1
Existing fluent ui version does not support react18, test cases were failing, hence after checking v8.118.1 documentation, it supports react and react-dom v18. Hence upadated.
5. Notable changes for react-helmet-async:
Current react-helmet package throws error 'objects cannot be child, expected elements', for react18, Hence as alternative used react-helmet-async. For reference https://www.npmjs.com/package/react-helmet-async?activeTab=readme because react-helmet-async uses react18 as dependency.
Wrapped Helmet provider for root, as to pass context of react-helmet-async.
Created a variable to store data, and then this data was passed as JSX, instead of passing the data as it is. Because it will throw "Objects cannot be used as react elements".
For example:export const GuidanceTitle = NamedFC<GuidanceTitleProps>('GuidanceTitle', ({ name }) => { const titleValue =Guidance for ${name} - ${productName}`;
return (
<>
{titleValue}
<h1>{name}</h1>
</>
);
});`
6. Along with above
Made changes to mock helpers, because after react18 changes, the JSON structure of component was coming differently, so accordingly corrected the helpers, to get proper component name for snapshots.
Updated snapshots, because as we are using latest Fluent UI version, new props are introduced which can be seen in snapshots.
Refactored few test cases, which were wrong logically, like for example:
using of mockReactComponents in global and inside test case using of useOriginalComponents to get the props using getMockComponentClassPropsForCall which was wrong logically is fixed to use any one approach.
Updated report package with react, react-dom v18 to keep in sync with AI web.
Context
This PR includes all changes required for migration of AI web from react16 to react18.
It includes test cases fixes.
It includes lint issues fixes.
Pull request checklist
[ ] Addresses an existing issue: #0000
[x] Ran yarn fastpass
[x] Added/updated relevant unit test(s) (and ran yarn test)
[x] Verified code coverage for the changes made. Check coverage report at: <rootDir>/test-results/unit/coverage
[x] PR title AND final merge commit title both start with a semantic tag (fix:, chore:, feat(feature-name):, refactor:). See CONTRIBUTING.md.
[ ] (UI changes only) Added screenshots/GIFs to description above
[x] (UI changes only) Verified usability with NVDA/JAWS
Details
This feature updates below packages.
1. Notable changes for react, react-dom:
Motivation: React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.
In V16, we had below to render the component: import { render } from 'react-dom'; const container = document.getElementById('app'); render(
2. Notable changes for @types-react and @types-react-dom:
Motivation: The new types are safer and catch issues that used to be ignored by the type checker. The most notable change is that the children prop now needs to be listed explicitly when defining props
,
Approach for type changes: So this Type changes are added using automation script https://github.com/eps1lon/types-react-codemod. This automation script is suggested in react18 migration document.
>.
3. Notable changes for @testing-library/react:
4. Notable changes for @fluentui/react from v8.x.x to v8.118.1
5. Notable changes for react-helmet-async:
For example:
export const GuidanceTitle = NamedFC<GuidanceTitleProps>('GuidanceTitle', ({ name }) => { const titleValue =Guidance for ${name} - ${productName}`; return ( <>});`
6. Along with above
Context
This PR includes all changes required for migration of AI web from react16 to react18. It includes test cases fixes. It includes lint issues fixes.
Pull request checklist
yarn fastpassyarn test)<rootDir>/test-results/unit/coveragefix:,chore:,feat(feature-name):,refactor:). SeeCONTRIBUTING.md.