Skip to content

Commit c664dd0

Browse files
AlexVarchukAlexVarchuk
authoredJun 6, 2024··
fix: update react to 18 and react-tabs to 6 (#2547)
·
v2.4.0v2.1.5
1 parent 72dd57d commit c664dd0

16 files changed

+1986
-1105
lines changed
 

‎demo/index.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { render } from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import styled from 'styled-components';
44
import { RedocStandalone } from '../src';
55
import ComboBox from './ComboBox';
@@ -179,7 +179,9 @@ const Logo = styled.img`
179179
}
180180
`;
181181

182-
render(<DemoApp />, document.getElementById('container'));
182+
const container = document.getElementById('container');
183+
const root = createRoot(container!);
184+
root.render(<DemoApp />);
183185

184186
/* ====== Helpers ====== */
185187
function updateQueryStringParameter(uri, key, value) {

‎demo/playground/hmr-playground.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
2-
import { render } from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import type { RedocRawOptions } from '../../src/services/RedocNormalizedOptions';
4-
import RedocStandalone from './hot';
4+
import { RedocStandalone } from '../../src';
55

66
const big = window.location.search.indexOf('big') > -1;
77
const swagger = window.location.search.indexOf('swagger') > -1;
@@ -13,4 +13,6 @@ const specUrl =
1313

1414
const options: RedocRawOptions = { nativeScrollbars: false, maxDisplayedEnumValues: 3 };
1515

16-
render(<RedocStandalone specUrl={specUrl} options={options} />, document.getElementById('example'));
16+
const container = document.getElementById('example');
17+
const root = createRoot(container!);
18+
root.render(<RedocStandalone specUrl={specUrl} options={options} />);

‎demo/playground/hot.tsx

-10
This file was deleted.

‎demo/webpack.config.ts

+1-7
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function root(filename) {
1414
return resolve(__dirname + '/' + filename);
1515
}
1616

17-
export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) => ({
17+
export default (env: { playground?: boolean; bench?: boolean } = {}) => ({
1818
entry: [
1919
root('../src/polyfills.ts'),
2020
root(
@@ -51,12 +51,6 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
5151
fs: false,
5252
os: false,
5353
},
54-
alias:
55-
mode !== 'production'
56-
? {
57-
'react-dom': '@hot-loader/react-dom',
58-
}
59-
: {},
6054
},
6155

6256
performance: false,

‎package-lock.json

+1,945-1,059
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+10-12
Original file line numberDiff line numberDiff line change
@@ -55,14 +55,13 @@
5555
"build:demo": "webpack --mode=production --config demo/webpack.config.ts",
5656
"publish-cdn": "scripts/publish-cdn.sh",
5757
"deploy:demo": "aws s3 sync demo/dist s3://production-redoc-demo --acl=public-read",
58-
"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",
58+
"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",
5959
"docker:build": "docker build -f config/docker/Dockerfile -t redoc .",
6060
"prepare": "husky install",
6161
"pre-commit": "pretty-quick --staged && npm run lint"
6262
},
6363
"devDependencies": {
6464
"@cypress/webpack-preprocessor": "^5.17.1",
65-
"@hot-loader/react-dom": "^17.0.2",
6665
"@size-limit/preset-app": "^8.2.6",
6766
"@types/chai": "^4.2.18",
6867
"@types/dompurify": "^2.2.2",
@@ -76,16 +75,15 @@
7675
"@types/node": "^15.6.1",
7776
"@types/prismjs": "^1.16.5",
7877
"@types/prop-types": "^15.7.3",
79-
"@types/react": "^17.0.8",
80-
"@types/react-dom": "^17.0.5",
78+
"@types/react": "^18.0.0",
79+
"@types/react-dom": "^18.0.0",
8180
"@types/styled-components": "^5.1.1",
8281
"@types/tapable": "^2.2.2",
8382
"@types/webpack": "^5.28.0",
8483
"@types/webpack-env": "^1.18.0",
8584
"@types/yargs": "^17.0.0",
8685
"@typescript-eslint/eslint-plugin": "^5.55.0",
8786
"@typescript-eslint/parser": "^5.55.0",
88-
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
8987
"beautify-benchmark": "^0.2.4",
9088
"conventional-changelog-cli": "^3.0.0",
9189
"copy-webpack-plugin": "^9.0.0",
@@ -97,8 +95,8 @@
9795
"esbuild-loader": "^3.0.1",
9896
"eslint": "^7.27.0",
9997
"eslint-plugin-import": "^2.23.4",
100-
"eslint-plugin-react": "^7.25.1",
101-
"eslint-plugin-react-hooks": "^4.2.0",
98+
"eslint-plugin-react": "^7.34.2",
99+
"eslint-plugin-react-hooks": "^4.6.2",
102100
"fork-ts-checker-webpack-plugin": "^6.2.10",
103101
"html-webpack-plugin": "^5.3.1",
104102
"husky": "^7.0.0",
@@ -112,9 +110,8 @@
112110
"prettier": "^2.3.2",
113111
"pretty-quick": "^3.0.0",
114112
"raf": "^3.4.1",
115-
"react": "^17.0.2",
116-
"react-dom": "^17.0.2",
117-
"react-hot-loader": "^4.13.0",
113+
"react": "^18.0.0",
114+
"react-dom": "^18.0.0",
118115
"rimraf": "^3.0.2",
119116
"shelljs": "^0.8.4",
120117
"size-limit": "^8.2.6",
@@ -140,6 +137,7 @@
140137
"styled-components": "^4.1.1 || ^5.1.1 || ^6.0.5"
141138
},
142139
"dependencies": {
140+
"@cfaester/enzyme-adapter-react-18": "^0.8.0",
143141
"@redocly/openapi-core": "^1.4.0",
144142
"classnames": "^2.3.2",
145143
"decko": "^1.2.0",
@@ -149,14 +147,14 @@
149147
"lunr": "^2.3.9",
150148
"mark.js": "^8.11.1",
151149
"marked": "^4.3.0",
152-
"mobx-react": "^7.2.0",
150+
"mobx-react": "^9.1.1",
153151
"openapi-sampler": "^1.5.0",
154152
"path-browserify": "^1.0.1",
155153
"perfect-scrollbar": "^1.5.5",
156154
"polished": "^4.2.2",
157155
"prismjs": "^1.29.0",
158156
"prop-types": "^15.8.1",
159-
"react-tabs": "^4.3.0",
157+
"react-tabs": "^6.0.2",
160158
"slugify": "~1.4.7",
161159
"stickyfill": "^1.1.1",
162160
"swagger2openapi": "^7.0.8",

‎src/common-elements/Tooltip.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const Gap = styled.div`
4949
bottom: -20px;
5050
`;
5151

52-
export interface TooltipProps {
52+
export interface TooltipProps extends React.PropsWithChildren<any> {
5353
open: boolean;
5454
title: string;
5555
}

‎src/common-elements/perfect-scrollbar.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ export interface PerfectScrollbarProps {
3333
updateFn?: (fn) => void;
3434
}
3535

36-
export class PerfectScrollbar extends React.Component<PerfectScrollbarProps> {
36+
export class PerfectScrollbar extends React.Component<
37+
React.PropsWithChildren<PerfectScrollbarProps>
38+
> {
3739
private _container: HTMLElement;
3840
private inst: PerfectScrollbarType;
3941

‎src/components/SearchBox/SearchBox.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
3737
activeItemRef: MenuItem | null = null;
3838

3939
static contextType = OptionsContext;
40+
declare context: React.ContextType<typeof OptionsContext>;
4041

4142
constructor(props) {
4243
super(props);

‎src/components/SelectOnClick/SelectOnClick.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22

33
import { ClipboardService } from '../../services';
44

5-
export class SelectOnClick extends React.PureComponent {
5+
export class SelectOnClick extends React.PureComponent<React.PropsWithChildren<any>> {
66
private child: HTMLDivElement | null;
77
selectElement = () => {
88
ClipboardService.selectElement(this.child);

‎src/components/SideMenu/SideMenu.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import RedoclyLogo from './Logo';
1313
@observer
1414
export class SideMenu extends React.Component<{ menu: MenuStore; className?: string }> {
1515
static contextType = OptionsContext;
16+
declare context: React.ContextType<typeof OptionsContext>;
1617
private _updateScroll?: () => void;
1718

1819
render() {

‎src/components/StickySidebar/StickyResponsiveSidebar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const FloatingButton = styled.div`
8585

8686
@observer
8787
export class StickyResponsiveSidebar extends React.Component<
88-
StickySidebarProps,
88+
React.PropsWithChildren<StickySidebarProps>,
8989
StickySidebarState
9090
> {
9191
static contextType = OptionsContext;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Components SchemaView discriminator should correctly render SchemaView 1`] = `
4-
<wrappedComponent
4+
<Unknown
55
discriminator={
66
{
77
"fieldName": "type",

‎src/components/testProviders.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import * as React from 'react';
22
import { ThemeProvider } from 'styled-components';
33
import defaultTheme, { resolveTheme } from '../theme';
44

5-
export default class TestThemeProvider extends React.Component {
5+
import { PropsWithChildren } from 'react';
6+
7+
export default class TestThemeProvider extends React.Component<PropsWithChildren<any>> {
68
render() {
79
return (
810
<ThemeProvider theme={resolveTheme(defaultTheme)}>

‎src/setupTests.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import * as Enzyme from 'enzyme';
2-
import * as Adapter from '@wojtekmaj/enzyme-adapter-react-17';
2+
import Adapter from '@cfaester/enzyme-adapter-react-18';
3+
import { TextEncoder, TextDecoder } from 'util';
4+
5+
Object.assign(global, { TextDecoder, TextEncoder });
36

47
import 'raf/polyfill';
58

‎src/standalone.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { hydrate as hydrateComponent, render, unmountComponentAtNode } from 'react-dom';
2+
import { createRoot, hydrateRoot } from 'react-dom/client';
33
import { configure } from 'mobx';
44

55
import { Redoc, RedocStandalone } from './components/';
@@ -59,7 +59,8 @@ export function init(
5959
spec = specOrSpecUrl;
6060
}
6161

62-
render(
62+
const root = createRoot(element!);
63+
root.render(
6364
React.createElement(
6465
RedocStandalone,
6566
{
@@ -70,13 +71,12 @@ export function init(
7071
},
7172
['Loading...'],
7273
),
73-
element,
7474
);
7575
}
7676

7777
export function destroy(element: Element | null = querySelector('redoc')): void {
7878
if (element) {
79-
unmountComponentAtNode(element);
79+
createRoot(element).unmount();
8080
}
8181
}
8282

@@ -91,7 +91,7 @@ export function hydrate(
9191

9292
setTimeout(() => {
9393
debugTime('Redoc hydrate');
94-
hydrateComponent(<Redoc store={store} />, element, callback);
94+
hydrateRoot(element!, <Redoc store={store} />, { onRecoverableError: callback });
9595
debugTimeEnd('Redoc hydrate');
9696
}, 0);
9797
}

0 commit comments

Comments
 (0)
Please sign in to comment.