feat!: upgrade to react v18 (#998)

Author: kennethaasan

library/package.json

@@ -76,25 +76,25 @@
     "isomorphic-dompurify": "^0.13.0",
     "marked": "^4.0.14",
     "openapi-sampler": "^1.2.1",
-    "use-resize-observer": "^8.0.0"
+    "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@cypress/webpack-preprocessor": "^5.9.0",
     "@tailwindcss/typography": "^0.4.0",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^15.0.4",
     "@testing-library/user-event": "^12.8.3",
     "@types/dompurify": "^2.0.4",
     "@types/highlight.js": "^10.1.0",
     "@types/jest": "^26.0.23",
     "@types/marked": "^4.0.1",
     "@types/node": "^12.7.2",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "autoprefixer": "^10.2.5",
     "cross-env": "^7.0.3",
     "cssnano": "^4.1.11",
@@ -105,8 +105,8 @@
     "postcss-cli": "^8.3.1",
     "postcss-import": "^14.0.2",
     "postcss-scopify": "^0.1.9",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tailwindcss": "^2.1.1",
     "ts-jest": "^26.4.1",
     "ts-loader": "9.4.4",

library/src/components/Href.tsx

@@ -4,6 +4,7 @@ interface Props {
   href: string;
   title?: string;
   className?: string;
+  children: React.ReactNode;
 }
 
 export const Href: React.FunctionComponent<Props> = ({

library/src/components/Markdown.tsx

@@ -3,7 +3,9 @@ import { sanitize } from 'isomorphic-dompurify';
 
 import { renderMarkdown } from '../helpers';
 
-export const Markdown: React.FunctionComponent = ({ children }) => {
+export const Markdown: React.FunctionComponent<{
+  children: React.ReactNode;
+}> = ({ children }) => {
   if (!children) {
     return null;
   }

library/src/containers/Servers/Security.tsx

@@ -27,7 +27,7 @@ export const Security: React.FunctionComponent<Props> = ({
       );
     }
   } else {
-    const securities: React.ReactNodeArray = Object.values(security)
+    const securities: React.ReactNode[] = Object.values(security)
       .map((requirements) => requirements.all())
       .flat()
       .map((requirement) => {
@@ -74,8 +74,8 @@ export const Security: React.FunctionComponent<Props> = ({
 function collectSecuritySchemas(
   securitySchema: SecuritySchemeInterface | null,
   requiredScopes: string[] = [],
-): React.ReactNodeArray {
-  const schemas: React.ReactNodeArray = [];
+): React.ReactNode[] {
+  const schemas: React.ReactNode[] = [];
   if (securitySchema) {
     if (securitySchema.name()) {
       schemas.push(<span>Name: {securitySchema.name()}</span>);
@@ -114,7 +114,7 @@ const SecurityItem: React.FunctionComponent<SecurityItemProps> = ({
   protocol,
   requiredScopes,
 }) => {
-  const schemas: React.ReactNodeArray = collectSecuritySchemas(
+  const schemas: React.ReactNode[] = collectSecuritySchemas(
     securitySchema,
     requiredScopes,
   );

library/src/containers/Sidebar/Sidebar.tsx

@@ -388,6 +388,7 @@ const ServerItem: React.FunctionComponent<ServerItemProps> = ({
 
 interface ItemsByTagItemProps {
   tagName: string;
+  children: React.ReactNode;
 }
 
 const ItemsByTagItem: React.FunctionComponent<ItemsByTagItemProps> = ({

library/src/standalone-codebase.ts

@@ -1,12 +1,7 @@
 import React from 'react';
-import {
-  // eslint-disable-next-line react/no-deprecated
-  hydrate as hydrateComponent,
-  // eslint-disable-next-line react/no-deprecated
-  render as renderComponent,
-} from 'react-dom';
-
-function querySelector(selector: string): Element | DocumentFragment | null {
+import { hydrateRoot, createRoot } from 'react-dom/client';
+
+function querySelector(selector: string): Element | null {
   if (typeof document !== 'undefined') {
     return document.querySelector(selector);
   }
@@ -18,20 +13,19 @@ function querySelector(selector: string): Element | DocumentFragment | null {
  *
  * @param {Any} component of any kind
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function createRender<P extends object>(component: any) {
-  return (
-    props: P,
-    container?: Element | DocumentFragment | null,
-    callback?: () => void,
-  ) => {
+export function createRender<
+  Props extends Parameters<typeof React.createElement>[1],
+>(component: Parameters<typeof React.createElement>[0]) {
+  return (props: Props, container?: Element | DocumentFragment | null) => {
     container = container ?? querySelector('asyncapi');
+
     if (container === null) {
       return;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    renderComponent(React.createElement(component, props), container, callback);
+    const root = createRoot(container);
+
+    root.render(React.createElement(component, props));
   };
 }
 
@@ -40,23 +34,16 @@ export function createRender<P extends object>(component: any) {
  *
  * @param {Any} component of any kind
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function createHydrate<P extends object>(component: any) {
-  return (
-    props: P,
-    container?: Element | DocumentFragment | null,
-    callback?: () => void,
-  ) => {
+export function createHydrate<
+  Props extends Parameters<typeof React.createElement>[1],
+>(component: Parameters<typeof React.createElement>[0]) {
+  return (props: Props, container?: Element | Document | null) => {
     container = container ?? querySelector('asyncapi');
+
     if (container === null) {
       return;
     }
 
-    hydrateComponent(
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      React.createElement(component, props),
-      container,
-      callback,
-    );
+    hydrateRoot(container, React.createElement(component, props));
   };
 }