fix: update react to 18 and react-tabs to 6 (#2547)

demo/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import styled from 'styled-components';
 import { RedocStandalone } from '../src';
 import ComboBox from './ComboBox';
@@ -179,7 +179,9 @@ const Logo = styled.img`
   }
 `;
 
-render(<DemoApp />, document.getElementById('container'));
+const container = document.getElementById('container');
+const root = createRoot(container!);
+root.render(<DemoApp />);
 
 /* ====== Helpers ====== */
 function updateQueryStringParameter(uri, key, value) {

demo/playground/hmr-playground.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import type { RedocRawOptions } from '../../src/services/RedocNormalizedOptions';
-import RedocStandalone from './hot';
+import { RedocStandalone } from '../../src';
 
 const big = window.location.search.indexOf('big') > -1;
 const swagger = window.location.search.indexOf('swagger') > -1;
@@ -13,4 +13,6 @@ const specUrl =
 
 const options: RedocRawOptions = { nativeScrollbars: false, maxDisplayedEnumValues: 3 };
 
-render(<RedocStandalone specUrl={specUrl} options={options} />, document.getElementById('example'));
+const container = document.getElementById('example');
+const root = createRoot(container!);
+root.render(<RedocStandalone specUrl={specUrl} options={options} />);

demo/playground/hot.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-// eslint-disable-next-line import/no-internal-modules
-import { hot } from 'react-hot-loader/root';
-import { RedocStandalone as RedocStandaloneOrig, RedocStandaloneProps } from '../../src';
-
-const RedocStandalone = function (props: RedocStandaloneProps) {
-  return <RedocStandaloneOrig {...props} />;
-}
-
-export default hot(RedocStandalone);

demo/webpack.config.ts

@@ -14,7 +14,7 @@ function root(filename) {
   return resolve(__dirname + '/' + filename);
 }
 
-export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) => ({
+export default (env: { playground?: boolean; bench?: boolean } = {}) => ({
   entry: [
     root('../src/polyfills.ts'),
     root(
@@ -51,12 +51,6 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
       fs: false,
       os: false,
     },
-    alias:
-      mode !== 'production'
-        ? {
-            'react-dom': '@hot-loader/react-dom',
-          }
-        : {},
   },
 
   performance: false,

package.json

@@ -55,14 +55,13 @@
     "build:demo": "webpack --mode=production --config demo/webpack.config.ts",
     "publish-cdn": "scripts/publish-cdn.sh",
     "deploy:demo": "aws s3 sync demo/dist s3://production-redoc-demo --acl=public-read",
-    "license-check": "license-checker --production --onlyAllow 'MIT;ISC;Apache-2.0;BSD;BSD-2-Clause;BSD-3-Clause;CC-BY-4.0;Python-2.0' --summary",
+    "license-check": "license-checker --production --onlyAllow 'MIT;ISC;Apache-2.0;BSD;BSD-2-Clause;BSD-3-Clause;CC-BY-4.0;CC0-1.0;Python-2.0 ' --summary",
     "docker:build": "docker build -f config/docker/Dockerfile -t redoc .",
     "prepare": "husky install",
     "pre-commit": "pretty-quick --staged && npm run lint"
   },
   "devDependencies": {
     "@cypress/webpack-preprocessor": "^5.17.1",
-    "@hot-loader/react-dom": "^17.0.2",
     "@size-limit/preset-app": "^8.2.6",
     "@types/chai": "^4.2.18",
     "@types/dompurify": "^2.2.2",
@@ -76,8 +75,8 @@
     "@types/node": "^15.6.1",
     "@types/prismjs": "^1.16.5",
     "@types/prop-types": "^15.7.3",
-    "@types/react": "^17.0.8",
+    "@types/react": "^18.0.0",
-    "@types/react-dom": "^17.0.5",
+    "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.1",
     "@types/tapable": "^2.2.2",
     "@types/webpack": "^5.28.0",
@@ -85,7 +84,6 @@
     "@types/yargs": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "beautify-benchmark": "^0.2.4",
     "conventional-changelog-cli": "^3.0.0",
     "copy-webpack-plugin": "^9.0.0",
@@ -97,8 +95,8 @@
     "esbuild-loader": "^3.0.1",
     "eslint": "^7.27.0",
     "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "fork-ts-checker-webpack-plugin": "^6.2.10",
     "html-webpack-plugin": "^5.3.1",
     "husky": "^7.0.0",
@@ -112,9 +110,8 @@
     "prettier": "^2.3.2",
     "pretty-quick": "^3.0.0",
     "raf": "^3.4.1",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
-    "react-hot-loader": "^4.13.0",
     "rimraf": "^3.0.2",
     "shelljs": "^0.8.4",
     "size-limit": "^8.2.6",
@@ -140,6 +137,7 @@
     "styled-components": "^4.1.1 || ^5.1.1 || ^6.0.5"
   },
   "dependencies": {
+    "@cfaester/enzyme-adapter-react-18": "^0.8.0",
     "@redocly/openapi-core": "^1.4.0",
     "classnames": "^2.3.2",
     "decko": "^1.2.0",
@@ -149,14 +147,14 @@
     "lunr": "^2.3.9",
     "mark.js": "^8.11.1",
     "marked": "^4.3.0",
-    "mobx-react": "^7.2.0",
+    "mobx-react": "^9.1.1",
     "openapi-sampler": "^1.5.0",
     "path-browserify": "^1.0.1",
     "perfect-scrollbar": "^1.5.5",
     "polished": "^4.2.2",
     "prismjs": "^1.29.0",
     "prop-types": "^15.8.1",
-    "react-tabs": "^4.3.0",
+    "react-tabs": "^6.0.2",
     "slugify": "~1.4.7",
     "stickyfill": "^1.1.1",
     "swagger2openapi": "^7.0.8",

src/common-elements/Tooltip.tsx

@@ -49,7 +49,7 @@ const Gap = styled.div`
   bottom: -20px;
 `;
 
-export interface TooltipProps {
+export interface TooltipProps extends React.PropsWithChildren<any> {
   open: boolean;
   title: string;
 }

src/common-elements/perfect-scrollbar.tsx

@@ -33,7 +33,9 @@ export interface PerfectScrollbarProps {
   updateFn?: (fn) => void;
 }
 
-export class PerfectScrollbar extends React.Component<PerfectScrollbarProps> {
+export class PerfectScrollbar extends React.Component<
+  React.PropsWithChildren<PerfectScrollbarProps>
+> {
   private _container: HTMLElement;
   private inst: PerfectScrollbarType;
 

src/components/SearchBox/SearchBox.tsx

@@ -37,6 +37,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
   activeItemRef: MenuItem | null = null;
 
   static contextType = OptionsContext;
+  declare context: React.ContextType<typeof OptionsContext>;
 
   constructor(props) {
     super(props);

src/components/SelectOnClick/SelectOnClick.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { ClipboardService } from '../../services';
 
-export class SelectOnClick extends React.PureComponent {
+export class SelectOnClick extends React.PureComponent<React.PropsWithChildren<any>> {
   private child: HTMLDivElement | null;
   selectElement = () => {
     ClipboardService.selectElement(this.child);

src/components/SideMenu/SideMenu.tsx

@@ -13,6 +13,7 @@ import RedoclyLogo from './Logo';
 @observer
 export class SideMenu extends React.Component<{ menu: MenuStore; className?: string }> {
   static contextType = OptionsContext;
+  declare context: React.ContextType<typeof OptionsContext>;
   private _updateScroll?: () => void;
 
   render() {

src/components/StickySidebar/StickyResponsiveSidebar.tsx

@@ -85,7 +85,7 @@ const FloatingButton = styled.div`
 
 @observer
 export class StickyResponsiveSidebar extends React.Component<
-  StickySidebarProps,
+  React.PropsWithChildren<StickySidebarProps>,
   StickySidebarState
 > {
   static contextType = OptionsContext;

src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Components SchemaView discriminator should correctly render SchemaView 1`] = `
-<wrappedComponent
+<Unknown
   discriminator={
     {
       "fieldName": "type",

src/components/testProviders.tsx

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
 import defaultTheme, { resolveTheme } from '../theme';
 
-export default class TestThemeProvider extends React.Component {
+import { PropsWithChildren } from 'react';
+
+export default class TestThemeProvider extends React.Component<PropsWithChildren<any>> {
   render() {
     return (
       <ThemeProvider theme={resolveTheme(defaultTheme)}>

src/setupTests.ts

@@ -1,5 +1,8 @@
 import * as Enzyme from 'enzyme';
-import * as Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import { TextEncoder, TextDecoder } from 'util';
+
+Object.assign(global, { TextDecoder, TextEncoder });
 
 import 'raf/polyfill';
 

src/standalone.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { hydrate as hydrateComponent, render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 import { configure } from 'mobx';
 
 import { Redoc, RedocStandalone } from './components/';
@@ -59,7 +59,8 @@ export function init(
     spec = specOrSpecUrl;
   }
 
-  render(
+  const root = createRoot(element!);
+  root.render(
     React.createElement(
       RedocStandalone,
       {
@@ -70,13 +71,12 @@ export function init(
       },
       ['Loading...'],
     ),
-    element,
   );
 }
 
 export function destroy(element: Element | null = querySelector('redoc')): void {
   if (element) {
-    unmountComponentAtNode(element);
+    createRoot(element).unmount();
   }
 }
 
@@ -91,7 +91,7 @@ export function hydrate(
 
   setTimeout(() => {
     debugTime('Redoc hydrate');
-    hydrateComponent(<Redoc store={store} />, element, callback);
+    hydrateRoot(element!, <Redoc store={store} />, { onRecoverableError: callback });
     debugTimeEnd('Redoc hydrate');
   }, 0);
 }