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

This commit is contained in:
Alex Varchuk 2024-06-06 17:03:18 +03:00 committed by GitHub
parent 72dd57d457
commit c664dd0d56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 1979 additions and 1098 deletions

View File

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { render } from 'react-dom'; import { createRoot } from 'react-dom/client';
import styled from 'styled-components'; import styled from 'styled-components';
import { RedocStandalone } from '../src'; import { RedocStandalone } from '../src';
import ComboBox from './ComboBox'; 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 ====== */ /* ====== Helpers ====== */
function updateQueryStringParameter(uri, key, value) { function updateQueryStringParameter(uri, key, value) {

View File

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

View File

@ -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);

View File

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

2990
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -2,7 +2,9 @@ import * as React from 'react';
import { ThemeProvider } from 'styled-components'; import { ThemeProvider } from 'styled-components';
import defaultTheme, { resolveTheme } from '../theme'; 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() { render() {
return ( return (
<ThemeProvider theme={resolveTheme(defaultTheme)}> <ThemeProvider theme={resolveTheme(defaultTheme)}>

View File

@ -1,5 +1,8 @@
import * as Enzyme from 'enzyme'; 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'; import 'raf/polyfill';

View File

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