diff --git a/package-lock.json b/package-lock.json index 454e5cded..67cc81c7e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,9 +38,8 @@ "r2-streamer-js": "^1.0.46", "r2-utils-js": "^1.0.35", "ramda": "^0.29.0", - "react": "^17.0.2", - "react-beautiful-dnd": "^13.1.1", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", "react-focus-lock": "^2.9.5", "react-redux": "^7.2.9", @@ -65,6 +64,7 @@ "yazl": "^2.5.1" }, "devDependencies": { + "@axe-core/react": "^4.7.3", "@babel/generator": "^7.22.10", "@electron/notarize": "^2.1.0", "@electron/rebuild": "^3.2.13", @@ -83,9 +83,8 @@ "@types/mime-types": "^2.1.1", "@types/node": "^18.17.1", "@types/ramda": "^0.29.3", - "@types/react": "^17.0.62", - "@types/react-beautiful-dnd": "^13.1.4", - "@types/react-dom": "^17.0.20", + "@types/react": "^18.2.21", + "@types/react-dom": "^18.2.7", "@types/react-redux": "^7.1.25", "@types/react-router": "^5.1.20", "@types/react-router-dom": "^5.3.3", @@ -140,7 +139,6 @@ "postcss-mixins": "^9.0.4", "postcss-nesting": "^12.0.1", "prettier": "^3.0.1", - "react-axe": "^3.5.4", "react-svg-loader": "^3.0.3", "remote-redux-devtools": "^0.5.16", "rimraf": "^5.0.1", @@ -190,6 +188,25 @@ "node": ">=6.0.0" } }, + "node_modules/@axe-core/react": { + "version": "4.7.3", + "resolved": "https://registry.npmjs.org/@axe-core/react/-/react-4.7.3.tgz", + "integrity": "sha512-dN2ZqUdaWJNmxEuedJKkAZBBQWs1qj/Aeby2x8ZKMhhcDBGkcT42MRlaOMWTvPG/YosP6RaGi160eFFZ3TiUMg==", + "dev": true, + "dependencies": { + "axe-core": "^4.7.0", + "requestidlecallback": "^0.3.0" + } + }, + "node_modules/@axe-core/react/node_modules/axe-core": { + "version": "4.8.1", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.1.tgz", + "integrity": "sha512-9l850jDDPnKq48nbad8SiEelCv4OrUWrKab/cPj0GScVg6cb6NbCCt/Ulk26QEq5jP9NnGr04Bit1BHyV6r5CQ==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/@babel/code-frame": { "version": "7.22.10", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz", @@ -4287,31 +4304,22 @@ "dev": true }, "node_modules/@types/react": { - "version": "17.0.64", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.64.tgz", - "integrity": "sha512-IlgbX/vglDTwrCRgad6fTCzOT+D/5C0xwuvrzfuqfhg9gJrkFqAGADpUFlEtqbrP1IEo9QLSbo41MaFfoIu9Aw==", + "version": "18.2.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz", + "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", "csstype": "^3.0.2" } }, - "node_modules/@types/react-beautiful-dnd": { - "version": "13.1.4", - "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.4.tgz", - "integrity": "sha512-4bIBdzOr0aavN+88q3C7Pgz+xkb7tz3whORYrmSj77wfVEMfiWiooIwVWFR7KM2e+uGTe5BVrXqSfb0aHeflJA==", - "dev": true, - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/react-dom": { - "version": "17.0.20", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz", - "integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==", + "version": "18.2.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz", + "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==", "dev": true, "dependencies": { - "@types/react": "^17" + "@types/react": "*" } }, "node_modules/@types/react-redux": { @@ -6096,15 +6104,6 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.12.0.tgz", "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==" }, - "node_modules/axe-core": { - "version": "3.5.6", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.5.6.tgz", - "integrity": "sha512-LEUDjgmdJoA3LqklSTwKYqkjcZ4HKc4ddIYGSAiSkr46NTjzg2L9RNB+lekO9P7Dlpa87+hBtzc2Fzn/+GUWMQ==", - "dev": true, - "engines": { - "node": ">=4" - } - }, "node_modules/axios": { "version": "0.18.1", "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz", @@ -8253,14 +8252,6 @@ "node": ">= 8" } }, - "node_modules/css-box-model": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", - "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", - "dependencies": { - "tiny-invariant": "^1.0.6" - } - }, "node_modules/css-functions-list": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.0.tgz", @@ -17466,11 +17457,6 @@ "node": ">= 4.0.0" } }, - "node_modules/memoize-one": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", - "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" - }, "node_modules/meow": { "version": "10.1.5", "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz", @@ -20779,11 +20765,6 @@ "yarn": ">=1.0" } }, - "node_modules/raf-schd": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz", - "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==" - }, "node_modules/ramda": { "version": "0.29.0", "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz", @@ -20836,46 +20817,16 @@ } }, "node_modules/react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" }, "engines": { "node": ">=0.10.0" } }, - "node_modules/react-axe": { - "version": "3.5.4", - "resolved": "https://registry.npmjs.org/react-axe/-/react-axe-3.5.4.tgz", - "integrity": "sha512-5xNO0QVCCEZnJiyhAGox0MGFyclgU3XL8se+5H+whdxV1VTtA9/uux9BSCF5mGNSgtSZkb+tQtrOaF+zGf/oWw==", - "deprecated": "deprecated", - "dev": true, - "dependencies": { - "axe-core": "^3.5.0", - "requestidlecallback": "^0.3.0" - } - }, - "node_modules/react-beautiful-dnd": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz", - "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==", - "dependencies": { - "@babel/runtime": "^7.9.2", - "css-box-model": "^1.2.0", - "memoize-one": "^5.1.1", - "raf-schd": "^4.0.2", - "react-redux": "^7.2.0", - "redux": "^4.0.4", - "use-memo-one": "^1.1.1" - }, - "peerDependencies": { - "react": "^16.8.5 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/react-clientside-effect": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz", @@ -20888,16 +20839,15 @@ } }, "node_modules/react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "dependencies": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" }, "peerDependencies": { - "react": "17.0.2" + "react": "^18.2.0" } }, "node_modules/react-dropzone": { @@ -21983,12 +21933,11 @@ "dev": true }, "node_modules/scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "node_modules/schema-utils": { @@ -24858,11 +24807,6 @@ "node": ">=16" } }, - "node_modules/tiny-invariant": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", - "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==" - }, "node_modules/titleize": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz", @@ -26406,14 +26350,6 @@ } } }, - "node_modules/use-memo-one": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz", - "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/use-sidecar": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", diff --git a/package.json b/package.json index 5af5b6729..a016b6248 100644 --- a/package.json +++ b/package.json @@ -279,9 +279,8 @@ "r2-streamer-js": "^1.0.46", "r2-utils-js": "^1.0.35", "ramda": "^0.29.0", - "react": "^17.0.2", - "react-beautiful-dnd": "^13.1.1", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", "react-focus-lock": "^2.9.5", "react-redux": "^7.2.9", @@ -306,6 +305,7 @@ "yazl": "^2.5.1" }, "devDependencies": { + "@axe-core/react": "^4.7.3", "@babel/generator": "^7.22.10", "@electron/notarize": "^2.1.0", "@electron/rebuild": "^3.2.13", @@ -324,9 +324,8 @@ "@types/mime-types": "^2.1.1", "@types/node": "^18.17.1", "@types/ramda": "^0.29.3", - "@types/react": "^17.0.62", - "@types/react-beautiful-dnd": "^13.1.4", - "@types/react-dom": "^17.0.20", + "@types/react": "^18.2.21", + "@types/react-dom": "^18.2.7", "@types/react-redux": "^7.1.25", "@types/react-router": "^5.1.20", "@types/react-router-dom": "^5.3.3", @@ -381,7 +380,6 @@ "postcss-mixins": "^9.0.4", "postcss-nesting": "^12.0.1", "prettier": "^3.0.1", - "react-axe": "^3.5.4", "react-svg-loader": "^3.0.3", "remote-redux-devtools": "^0.5.16", "rimraf": "^5.0.1", diff --git a/src/renderer/common/components/OutsideClickAlerter.tsx b/src/renderer/common/components/OutsideClickAlerter.tsx index 0615d8031..d3d499c3f 100644 --- a/src/renderer/common/components/OutsideClickAlerter.tsx +++ b/src/renderer/common/components/OutsideClickAlerter.tsx @@ -8,7 +8,7 @@ import * as React from "react"; // eslint-disable-next-line @typescript-eslint/no-empty-interface -interface IBaseProps { +interface IBaseProps extends React.PropsWithChildren { onClickOutside: () => void; disabled?: boolean; } diff --git a/src/renderer/common/components/dialog/publicationInfos/publicationInfoContent.tsx b/src/renderer/common/components/dialog/publicationInfos/publicationInfoContent.tsx index 8ae0fc61e..e7e80e7f6 100644 --- a/src/renderer/common/components/dialog/publicationInfos/publicationInfoContent.tsx +++ b/src/renderer/common/components/dialog/publicationInfos/publicationInfoContent.tsx @@ -329,7 +329,7 @@ const Progression = (props: { return (<>); }; -export const PublicationInfoContent: React.FC = (props) => { +export const PublicationInfoContent: React.FC = (props) => { // tslint:disable-next-line: max-line-length const { closeDialogCb, readerReadingLocation, pdfPlayerNumberOfPages, divinaNumberOfPages, divinaContinousEqualTrue, r2Publication: r2Publication_, manifestUrlR2Protocol, handleLinkUrl, publicationViewMaybeOpds, toggleCoverZoomCb, ControlComponent, TagManagerComponent, coverZoom, translator, onClikLinkCb, focusWhereAmI } = props; diff --git a/src/renderer/common/components/dialog/publicationInfos/publicationInfoManager.tsx b/src/renderer/common/components/dialog/publicationInfos/publicationInfoManager.tsx index 3cf333a32..f20e3bbd2 100644 --- a/src/renderer/common/components/dialog/publicationInfos/publicationInfoManager.tsx +++ b/src/renderer/common/components/dialog/publicationInfos/publicationInfoManager.tsx @@ -16,7 +16,7 @@ import Cover from "../../Cover"; import Loader from "../../Loader"; import Dialog from "../Dialog"; -export interface IProps extends TranslatorProps { +export interface IProps extends TranslatorProps, React.PropsWithChildren { publicationViewMaybeOpds: TPublication; coverZoom: boolean; toggleCoverZoomCb: (coverZoom: boolean) => void; @@ -52,8 +52,7 @@ const PublicationInfoManager: React.FC = (props) => { (e: React.KeyboardEvent) => e.key === "Enter" && toggleCoverZoomCb(coverZoom) } - > - + /> : <> { diff --git a/src/renderer/common/components/dialog/publicationInfos/tag/tagButton.tsx b/src/renderer/common/components/dialog/publicationInfos/tag/tagButton.tsx index 2a7ceb0d5..08b0f5ba8 100644 --- a/src/renderer/common/components/dialog/publicationInfos/tag/tagButton.tsx +++ b/src/renderer/common/components/dialog/publicationInfos/tag/tagButton.tsx @@ -11,7 +11,7 @@ import { IOpdsTagView } from "readium-desktop/common/views/opds"; import * as CrossIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px-blue.svg"; import SVG from "readium-desktop/renderer/common/components/SVG"; -export interface IProps { +export interface IProps extends React.PropsWithChildren { tag: string | IOpdsTagView; index?: number; __?: I18nTyped; diff --git a/src/renderer/common/components/hoc/translator.tsx b/src/renderer/common/components/hoc/translator.tsx index 1b682f1ec..947d3c463 100644 --- a/src/renderer/common/components/hoc/translator.tsx +++ b/src/renderer/common/components/hoc/translator.tsx @@ -14,7 +14,7 @@ export interface TranslatorProps { translator?: Translator; } -type TComponentConstructor

= React.ComponentClass

| React.StatelessComponent

; +type TComponentConstructor

= React.ComponentClass

| React.FunctionComponent

; // React.StatelessComponent

; export function withTranslator(WrappedComponent: TComponentConstructor) { const WrapperComponent = class extends React.Component { diff --git a/src/renderer/common/components/menu/AccessibleMenu.tsx b/src/renderer/common/components/menu/AccessibleMenu.tsx index 011748cb1..cb640d719 100644 --- a/src/renderer/common/components/menu/AccessibleMenu.tsx +++ b/src/renderer/common/components/menu/AccessibleMenu.tsx @@ -10,7 +10,7 @@ import FocusLock from "react-focus-lock"; import OutsideClickAlerter from "readium-desktop/renderer/common/components/OutsideClickAlerter"; // eslint-disable-next-line @typescript-eslint/no-empty-interface -interface IBaseProps { +interface IBaseProps extends React.PropsWithChildren { className?: string; visible: boolean; toggleMenu: () => void; diff --git a/src/renderer/common/components/menu/MenuButton.tsx b/src/renderer/common/components/menu/MenuButton.tsx index 58077b764..b4c643ed6 100644 --- a/src/renderer/common/components/menu/MenuButton.tsx +++ b/src/renderer/common/components/menu/MenuButton.tsx @@ -8,7 +8,7 @@ import * as React from "react"; // eslint-disable-next-line @typescript-eslint/no-empty-interface -interface IBaseProps { +interface IBaseProps extends React.PropsWithChildren { menuId: string; open: boolean; toggle: () => void; diff --git a/src/renderer/common/components/menu/MenuContent.tsx b/src/renderer/common/components/menu/MenuContent.tsx index a45bcff71..8b1841275 100644 --- a/src/renderer/common/components/menu/MenuContent.tsx +++ b/src/renderer/common/components/menu/MenuContent.tsx @@ -11,7 +11,7 @@ import * as ReactDOM from "react-dom"; import AccessibleMenu from "./AccessibleMenu"; // eslint-disable-next-line @typescript-eslint/no-empty-interface -interface IBaseProps { +interface IBaseProps extends React.PropsWithChildren { id: string; open: boolean; dir: string; diff --git a/src/renderer/library/components/SecondaryHeader.tsx b/src/renderer/library/components/SecondaryHeader.tsx index 53b7c0890..5ee3130b6 100644 --- a/src/renderer/library/components/SecondaryHeader.tsx +++ b/src/renderer/library/components/SecondaryHeader.tsx @@ -11,7 +11,7 @@ import * as stylesHeader from "readium-desktop/renderer/assets/styles/header.css import { TranslatorProps, withTranslator } from "../../common/components/hoc/translator"; // eslint-disable-next-line @typescript-eslint/no-empty-interface -interface IBaseProps extends TranslatorProps { +interface IBaseProps extends TranslatorProps, React.PropsWithChildren { style?: React.CSSProperties; id?: string; } diff --git a/src/renderer/library/components/searchResult/AllPublicationPage.tsx b/src/renderer/library/components/searchResult/AllPublicationPage.tsx index 04a2b85b3..35d05fec3 100644 --- a/src/renderer/library/components/searchResult/AllPublicationPage.tsx +++ b/src/renderer/library/components/searchResult/AllPublicationPage.tsx @@ -1651,10 +1651,13 @@ export const TableView: React.FC { const arr: (Column & - UseTableColumnOptions & - UseSortByColumnOptions & - UseGlobalFiltersColumnOptions & - UseFiltersColumnOptions)[] = [ + UseTableColumnOptions & + UseSortByColumnOptions & + UseGlobalFiltersColumnOptions & + UseFiltersColumnOptions & + // FIXME Cell: any + { Cell?: any } + )[] = [ { Header: props.__("publication.cover.img"), accessor: "colCover", @@ -1874,20 +1877,20 @@ export const TableView: React.FC & - UseFiltersOptions & - UseGlobalFiltersOptions & - UseSortByOptions & - UsePaginationOptions = { + // FIXME be careful with defaultColumn : type broken + const opts = { columns: tableColumns, data: tableRows, defaultColumn, globalFilter: "globalFilter", filterTypes: filterTypes as unknown as FilterTypes, // because typing 'columnIds' instead of 'columnId' in FilterType ?! initialState: initialState as TableState, // again, typing woes :( - }; + } as TableOptions & + UseFiltersOptions & + UseGlobalFiltersOptions & + UseSortByOptions & + UsePaginationOptions; const tableInstance = useTable(opts, useFilters, useGlobalFilter, useSortBy, usePagination) as MyTableInstance; diff --git a/src/renderer/library/index_library.ts b/src/renderer/library/index_library.ts index a0b57000f..13f0031d4 100644 --- a/src/renderer/library/index_library.ts +++ b/src/renderer/library/index_library.ts @@ -7,7 +7,7 @@ import { ipcRenderer } from "electron"; import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDOM from "react-dom/client"; import { syncIpc, winIpc } from "readium-desktop/common/ipc"; import { ActionWithSender } from "readium-desktop/common/models/sync"; import { ActionSerializer } from "readium-desktop/common/services/serializer"; @@ -45,7 +45,7 @@ if (IS_DEV) { // devTron = require("devtron"); // eslint-disable-next-line @typescript-eslint/no-var-requires - axe = require("react-axe"); + axe = require("@axe-core/react"); } initGlobalConverters_OPDS(); diff --git a/src/renderer/library/redux/sagas/win.ts b/src/renderer/library/redux/sagas/win.ts index 586a6309d..64f7211d1 100644 --- a/src/renderer/library/redux/sagas/win.ts +++ b/src/renderer/library/redux/sagas/win.ts @@ -6,15 +6,12 @@ // ==LICENSE-END== import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDOM from "react-dom/client"; import { diLibraryGet } from "readium-desktop/renderer/library/di"; export function render() { // starting point to mounting React to the DOM - ReactDOM.render( - React.createElement( - diLibraryGet("react-library-app"), - null), - document.getElementById("app"), - ); + ReactDOM + .createRoot(document.getElementById("app")) + .render(React.createElement(diLibraryGet("react-library-app"), null)); } diff --git a/src/renderer/reader/index_reader.ts b/src/renderer/reader/index_reader.ts index 179c01fe4..f513f0e81 100644 --- a/src/renderer/reader/index_reader.ts +++ b/src/renderer/reader/index_reader.ts @@ -7,7 +7,7 @@ import { ipcRenderer } from "electron"; import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDOM from "react-dom/client"; import { readerIpc } from "readium-desktop/common/ipc"; import { IS_DEV } from "readium-desktop/preprocessor-directives"; import { winActions } from "readium-desktop/renderer/common/redux/actions"; @@ -29,7 +29,7 @@ if (IS_DEV) { // devTron = require("devtron"); // eslint-disable-next-line @typescript-eslint/no-var-requires - axe = require("react-axe"); + axe = require("@axe-core/react"); } initGlobalConverters_OPDS(); diff --git a/src/renderer/reader/redux/sagas/win.ts b/src/renderer/reader/redux/sagas/win.ts index 3ea38d1b8..c82630d6c 100644 --- a/src/renderer/reader/redux/sagas/win.ts +++ b/src/renderer/reader/redux/sagas/win.ts @@ -6,15 +6,12 @@ // ==LICENSE-END== import * as React from "react"; -import * as ReactDOM from "react-dom"; +import * as ReactDOM from "react-dom/client"; import { diReaderGet } from "readium-desktop/renderer/reader/di"; export function render() { // starting point to mounting React to the DOM - ReactDOM.render( - React.createElement( - diReaderGet("react-reader-app"), - null), - document.getElementById("app"), - ); + ReactDOM + .createRoot(document.getElementById("app")) + .render(React.createElement(diReaderGet("react-reader-app"), null)); }