Upgrade to React 18 (#2087) (#2110)

Upgrade to React 18

* replace ReactDOM.render with createRoot in index.ts
* fix new TS errors after upgrading @types
* replace ReactDOM.render in Preview.tsx
* replace ReactDOM.unmountComponentAtNode with root.unmount()
* remove ReactDOM import
* upgrade react testing library
* replace deprecated React.SFC type with React.FC

DefinitelyTyped/DefinitelyTyped#30364

* Fix TS errors in propTypes.children

propTypes.node results in TS errors. There doesn't seem to be a good alternative ( other than making the children propTypes more strict, which could result more errors)
Instead use something less restrictive (propTypes.any) for children and components.

* fix TS errors, extract props interfaces with children
* fix TS errors, add context types
* TS fix
* Fix React unmount error

Unmount asynchronously with setTimout
https://stackoverflow.com/questions/73459382/react-18-async-way-to-unmount-root

error message:
Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.

* make wrapper unmount test async

---------

Co-authored-by: Thomas Roest <[email protected]>

Author: ThomasRoest

package-lock.json

@@ -106,7 +106,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
+    "@testing-library/react": "^13.4.0",
     "@types/buble": "^0.19.2",
     "@types/copy-webpack-plugin": "^5.0.2",
     "@types/doctrine": "0.0.3",
@@ -119,8 +119,8 @@
     "@types/markdown-to-jsx": "^6.9.0",
     "@types/node": "^12.12.3",
     "@types/prismjs": "^1.16.0",
-    "@types/react": "^16.9.27",
-    "@types/react-dom": "^16.9.5",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "@types/terser-webpack-plugin": "^2.2.3",
     "@types/type-detect": "^4.0.1",
     "@types/webpack": "^5.28.0",
@@ -153,9 +153,9 @@
     "memfs": "~2.15.5",
     "prettier": "2.1.2",
     "raf": "^3.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "strip-shebang": "^1.0.2",
     "style-loader": "^3.3.1",
     "typescript": "^4.7.4",

package.json

@@ -1,7 +1,7 @@
 /* eslint-disable import/first */
 import './polyfills';
 import './styles';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 import renderStyleguide from './utils/renderStyleguide';
 import { getParameterByName, hasInHash, getHash } from './utils/handleHash';
 
@@ -33,14 +33,22 @@ const scrollToOrigin = () => {
 	}
 };
 
+let reactRoot: Root | null = null;
+
 const render = () => {
 	// eslint-disable-next-line @typescript-eslint/no-var-requires
 	const styleguide = require('!!../loaders/styleguide-loader!./index.js');
 
-	ReactDOM.render(
-		renderStyleguide(styleguide, codeRevision),
-		document.getElementById(styleguide.config.mountPointId)
-	);
+	if (!reactRoot) {
+		const rootNode = document.getElementById(styleguide.config.mountPointId);
+		if (rootNode) {
+			reactRoot = createRoot(rootNode);
+		}
+	}
+
+	if (reactRoot) {
+		reactRoot.render(renderStyleguide(styleguide, codeRevision));
+	}
 };
 
 window.addEventListener('hashchange', render);

src/client/index.ts

@@ -22,7 +22,7 @@ export const CodeRenderer: React.FunctionComponent<CodeProps> = ({ classes, chil
 };
 CodeRenderer.propTypes = {
 	classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
-	children: PropTypes.node.isRequired,
+	children: PropTypes.any.isRequired,
 };
 
 export default Styled<CodeProps>(styles)(CodeRenderer);

src/client/rsg-components/Code/CodeRenderer.tsx

@@ -27,7 +27,7 @@ export const ExamplesRenderer: React.FunctionComponent<ExamplesRendererProps> =
 ExamplesRenderer.propTypes = {
 	classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
 	name: PropTypes.string.isRequired,
-	children: PropTypes.node,
+	children: PropTypes.any,
 };
 
 export default Styled<ExamplesRendererProps>(styles)(ExamplesRenderer);

src/client/rsg-components/Examples/ExamplesRenderer.tsx

@@ -44,7 +44,7 @@ const HeadingRenderer: React.FunctionComponent<HeadingProps> = ({
 	children,
 	...props
 }) => {
-	const Tag = `h${level}` as ('h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6');
+	const Tag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 	const headingClasses = cx(classes.heading, classes[`heading${level}`]);
 
 	return (
@@ -57,7 +57,7 @@ const HeadingRenderer: React.FunctionComponent<HeadingProps> = ({
 HeadingRenderer.propTypes = {
 	classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
 	level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
-	children: PropTypes.node,
+	children: PropTypes.any,
 };
 
 export default Styled<HeadingProps>(styles)(HeadingRenderer);

src/client/rsg-components/Heading/HeadingRenderer.tsx

@@ -41,7 +41,7 @@ export const LinkRenderer: React.FunctionComponent<LinkProps> = ({
 
 LinkRenderer.propTypes = {
 	classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
-	children: PropTypes.node,
+	children: PropTypes.any,
 	className: PropTypes.string,
 	href: PropTypes.string,
 };

src/client/rsg-components/Link/LinkRenderer.tsx

@@ -12,7 +12,11 @@ const styles = ({ color, fontFamily, fontSize }: Rsg.Theme) => ({
 	},
 });
 
-export const LogoRenderer: React.FunctionComponent<JssInjectedProps> = ({ classes, children }) => {
+interface Props extends JssInjectedProps {
+	children?: React.ReactNode;
+}
+
+export const LogoRenderer = ({ classes, children }: Props) => {
 	return <h1 className={classes.logo}>{children}</h1>;
 };
 

src/client/rsg-components/Logo/LogoRenderer.tsx

@@ -32,7 +32,7 @@ export const BlockquoteRenderer: React.FunctionComponent<BlockquoteProps> = ({
 BlockquoteRenderer.propTypes = {
 	classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
 	className: PropTypes.string,
-	children: PropTypes.node.isRequired,
+	children: PropTypes.any.isRequired,
 };
 
 export default Styled<BlockquoteProps>(styles)(BlockquoteRenderer);

src/client/rsg-components/Markdown/Blockquote/BlockquoteRenderer.tsx

@@ -22,7 +22,7 @@ export const DetailsRenderer: React.FunctionComponent<DetailsProps> = ({ classes
 
 DetailsRenderer.propTypes = {
 	classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
-	children: PropTypes.node.isRequired,
+	children: PropTypes.any.isRequired,
 };
 
 export default Styled<DetailsProps>(styles)(DetailsRenderer);