From 71b222f9d0365efee0eafd8d2ae5e5c643fd092f Mon Sep 17 00:00:00 2001 From: Roman Date: Thu, 7 Apr 2022 17:23:52 +0300 Subject: [PATCH] Upgrade to React@18 (#5172) * upgrade to react@18 read more: https://reactjs.org/blog/2022/03/29/react-v18.html --- package.json | 6 +- src/renderer/bootstrap.tsx | 13 ++-- src/renderer/components/menu/menu.tsx | 4 +- .../init-cluster-frame/init-cluster-frame.ts | 5 +- .../init-root-frame/init-root-frame.ts | 6 +- yarn.lock | 61 ++++++++++--------- 6 files changed, 46 insertions(+), 49 deletions(-) diff --git a/package.json b/package.json index 67a49f9b0c..e0f077fa07 100644 --- a/package.json +++ b/package.json @@ -249,8 +249,8 @@ "p-limit": "^3.1.0", "path-to-regexp": "^6.2.0", "proper-lockfile": "^4.1.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.0", + "react-dom": "^18.0.0", "react-material-ui-carousel": "^2.3.11", "react-router": "^5.2.0", "react-virtualized-auto-sizer": "^1.0.6", @@ -281,7 +281,7 @@ "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4", "@sentry/types": "^6.19.3", "@testing-library/jest-dom": "^5.16.3", - "@testing-library/react": "^11.2.7", + "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", "@types/byline": "^4.2.33", "@types/chart.js": "^2.9.36", diff --git a/src/renderer/bootstrap.tsx b/src/renderer/bootstrap.tsx index 3d1f9abf3d..35a09eb0c7 100644 --- a/src/renderer/bootstrap.tsx +++ b/src/renderer/bootstrap.tsx @@ -12,7 +12,7 @@ import * as ReactRouter from "react-router"; import * as ReactRouterDom from "react-router-dom"; import * as LensExtensionsCommonApi from "../extensions/common-api"; import * as LensExtensionsRendererApi from "../extensions/renderer-api"; -import { render } from "react-dom"; +import { createRoot } from "react-dom/client"; import { delay } from "../common/utils"; import { isMac, isDevelopment } from "../common/vars"; import { HelmRepoManager } from "../main/helm/helm-repo-manager"; @@ -69,6 +69,7 @@ export async function bootstrap(di: DiContainer) { bindEvents(); const rootElem = document.getElementById("app"); + const rootNode = createRoot(rootElem); const logPrefix = `[BOOTSTRAP-${process.isMainFrame ? "ROOT" : "CLUSTER"}-FRAME]:`; // TODO: Remove temporal dependencies to make timing of initialization not important @@ -152,7 +153,7 @@ export async function bootstrap(di: DiContainer) { } try { - await initializeApp(rootElem); + await initializeApp(() => rootNode.unmount()); } catch (error) { console.error(`[BOOTSTRAP]: view initialization error: ${error}`, { origin: location.href, @@ -160,16 +161,12 @@ export async function bootstrap(di: DiContainer) { }); } - const history = di.inject(historyInjectable); - - render( + rootNode.render( - + {DefaultProps(App)} , - - rootElem, ); } diff --git a/src/renderer/components/menu/menu.tsx b/src/renderer/components/menu/menu.tsx index 8d5fb08c77..760504d521 100644 --- a/src/renderer/components/menu/menu.tsx +++ b/src/renderer/components/menu/menu.tsx @@ -144,7 +144,7 @@ export class Menu extends React.Component { } } - refreshPosition = () => { + refreshPosition = () => requestAnimationFrame(() => { if (!this.props.usePortal || !this.opener || !this.elem) { return; } @@ -187,7 +187,7 @@ export class Menu extends React.Component { left: renderMenuLeft ? menuOnLeftSidePosition : menuOnRightSidePosition, }, }); - }; + }); open() { if (this.isOpen) { diff --git a/src/renderer/frames/cluster-frame/init-cluster-frame/init-cluster-frame.ts b/src/renderer/frames/cluster-frame/init-cluster-frame/init-cluster-frame.ts index 4fe1081c02..2bc5202f40 100644 --- a/src/renderer/frames/cluster-frame/init-cluster-frame/init-cluster-frame.ts +++ b/src/renderer/frames/cluster-frame/init-cluster-frame/init-cluster-frame.ts @@ -10,7 +10,6 @@ import { Notifications } from "../../../components/notifications"; import type { AppEvent } from "../../../../common/app-event-bus/event-bus"; import type { CatalogEntity } from "../../../../common/catalog"; import { when } from "mobx"; -import { unmountComponentAtNode } from "react-dom"; import type { ClusterFrameContext } from "../../../cluster-frame-context/cluster-frame-context"; import { KubeObjectStore } from "../../../../common/k8s-api/kube-object.store"; import { requestSetClusterFrameId } from "../../../ipc"; @@ -30,7 +29,7 @@ const logPrefix = "[CLUSTER-FRAME]:"; export const initClusterFrame = ({ hostedCluster, loadExtensions, catalogEntityRegistry, frameRoutingId, emitEvent, clusterFrameContext }: Dependencies) => - async (rootElem: HTMLElement) => { + async (unmountRoot: () => void) => { // TODO: Make catalogEntityRegistry already initialized when passed as dependency catalogEntityRegistry.init(); @@ -80,7 +79,7 @@ export const initClusterFrame = `${logPrefix} Unload dashboard, clusterId=${(hostedCluster.id)}, frameId=${frameRoutingId}`, ); - unmountComponentAtNode(rootElem); + unmountRoot(); }; // TODO: Make context dependency of KubeObjectStore diff --git a/src/renderer/frames/root-frame/init-root-frame/init-root-frame.ts b/src/renderer/frames/root-frame/init-root-frame/init-root-frame.ts index 15d4ec1be7..a76cc6cc84 100644 --- a/src/renderer/frames/root-frame/init-root-frame/init-root-frame.ts +++ b/src/renderer/frames/root-frame/init-root-frame/init-root-frame.ts @@ -5,7 +5,6 @@ import { delay } from "../../../../common/utils"; import { broadcastMessage } from "../../../../common/ipc"; import logger from "../../../../common/logger"; -import { unmountComponentAtNode } from "react-dom"; import type { ExtensionLoading } from "../../../../extensions/extension-loader"; import type { CatalogEntityRegistry } from "../../../api/catalog-entity-registry"; import { bundledExtensionsLoaded } from "../../../../common/ipc/extension-handling"; @@ -34,10 +33,9 @@ export const initRootFrame = lensProtocolRouterRenderer, ipcRenderer, registerIpcListeners, - catalogEntityRegistry, }: Dependencies) => - async (rootElem: HTMLElement) => { + async (unmountRoot: () => void) => { catalogEntityRegistry.init(); try { @@ -72,6 +70,6 @@ export const initRootFrame = window.addEventListener("beforeunload", () => { logger.info(`${logPrefix} Unload app`); - unmountComponentAtNode(rootElem); + unmountRoot(); }); }; diff --git a/yarn.lock b/yarn.lock index 360e3ffa55..21a8949730 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1176,19 +1176,19 @@ lz-string "^1.4.4" pretty-format "^27.0.2" -"@testing-library/dom@^7.28.1": - version "7.30.3" - resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.30.3.tgz#779ea9bbb92d63302461800a388a5a890ac22519" - integrity sha512-7JhIg2MW6WPwyikH2iL3o7z+FTVgSOd2jqCwTAHqK7Qal2gRRYiUQyURAxtbK9VXm/UTyG9bRihv8C5Tznr2zw== +"@testing-library/dom@^8.0.0": + version "8.12.0" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.12.0.tgz#fef5e545533fb084175dda6509ee71d7d2f72e23" + integrity sha512-rBrJk5WjI02X1edtiUcZhgyhgBhiut96r5Jp8J5qktKdcvLcZpKDW8i2hkGMMItxrghjXuQ5AM6aE0imnFawaw== dependencies: "@babel/code-frame" "^7.10.4" "@babel/runtime" "^7.12.5" "@types/aria-query" "^4.2.0" - aria-query "^4.2.2" + aria-query "^5.0.0" chalk "^4.1.0" - dom-accessibility-api "^0.5.4" + dom-accessibility-api "^0.5.9" lz-string "^1.4.4" - pretty-format "^26.6.2" + pretty-format "^27.0.2" "@testing-library/jest-dom@^5.16.3": version "5.16.3" @@ -1205,13 +1205,14 @@ lodash "^4.17.15" redent "^3.0.0" -"@testing-library/react@^11.2.7": - version "11.2.7" - resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.7.tgz#b29e2e95c6765c815786c0bc1d5aed9cb2bf7818" - integrity sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA== +"@testing-library/react@^12.1.4": + version "12.1.4" + resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.4.tgz#09674b117e550af713db3f4ec4c0942aa8bbf2c0" + integrity sha512-jiPKOm7vyUw311Hn/HlNQ9P8/lHNtArAx0PisXyFixDDvfl8DbD6EUdbshK5eqauvBSvzZd19itqQ9j3nferJA== dependencies: "@babel/runtime" "^7.12.5" - "@testing-library/dom" "^7.28.1" + "@testing-library/dom" "^8.0.0" + "@types/react-dom" "*" "@testing-library/user-event@^13.5.0": version "13.5.0" @@ -4666,11 +4667,16 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" -dom-accessibility-api@^0.5.4, dom-accessibility-api@^0.5.6: +dom-accessibility-api@^0.5.6: version "0.5.9" resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.9.tgz#915f8531ba29a50e5c29389dbfb87a9642fef0d6" integrity sha512-+KPF4o71fl6NrdnqIrJc6m44NA+Rhf1h7In2MRznejSQasWkjqmHOBUlk+pXJ77cVOSYyZeNHFwn/sjotB6+Sw== +dom-accessibility-api@^0.5.9: + version "0.5.13" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.13.tgz#102ee5f25eacce09bdf1cfa5a298f86da473be4b" + integrity sha512-R305kwb5CcMDIpSHUnLyIAp7SrSPBx6F0VfQFB3M75xVMHhXJJIdePYgbPPh1o57vCHNu5QztokWUPsLjWzFqw== + dom-converter@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -10924,14 +10930,13 @@ react-beautiful-dnd@^13.1.0: redux "^4.0.4" use-memo-one "^1.1.1" -react-dom@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" - integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== +react-dom@^18.0.0: + version "18.0.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023" + integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler "^0.20.2" + scheduler "^0.21.0" react-input-autosize@^3.0.0: version "3.0.0" @@ -11063,13 +11068,12 @@ react-window@^1.8.6: "@babel/runtime" "^7.0.0" memoize-one ">=3.1.1 <6" -react@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" - integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== +react@^18.0.0: + version "18.0.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96" + integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" read-cmd-shim@^1.0.1, read-cmd-shim@^1.0.5: version "1.0.5" @@ -11628,13 +11632,12 @@ saxes@^5.0.1: dependencies: xmlchars "^2.2.0" -scheduler@^0.20.2: - version "0.20.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" - integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== +scheduler@^0.21.0: + version "0.21.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820" + integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" schema-utils@2.7.0: version "2.7.0"