From 58296a8e7aad87c1519035dbe8b5eede6b990770 Mon Sep 17 00:00:00 2001 From: Newbie012 Date: Sun, 2 Oct 2022 12:39:32 +0300 Subject: [PATCH] Upgrade to React 18 --- package.json | 9 +-- src/angularjs/ReactUIViewAdapterComponent.tsx | 19 +++--- yarn.lock | 64 +++++++++++-------- 3 files changed, 51 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index 54d565ea..2dcddfd9 100644 --- a/package.json +++ b/package.json @@ -22,21 +22,22 @@ }, "peerDependencies": { "angular": "^1.5.0", - "react": ">=15.0.0" + "react": ">=18.0.0" }, "devDependencies": { "@rollup/plugin-commonjs": "^18.0.0", "@rollup/plugin-node-resolve": "^11.2.1", "@types/angular": "^1.8.2", "@types/jquery": "^3.5.6", - "@types/react": "^16.9.43", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", "@uirouter/publish-scripts": "^2.5.5", "angular": "^1.8.2", "husky": "^6.0.0", "prettier": "^2.3.2", "pretty-quick": "^3.1.1", - "react": "^16.14.0", - "react-dom": "^16.14.0", + "react": "^18.0.0", + "react-dom": "^18.0.0", "rollup": "^2.55.1", "rollup-plugin-sourcemaps": "^0.6.3", "rollup-plugin-terser": "^7.0.2", diff --git a/src/angularjs/ReactUIViewAdapterComponent.tsx b/src/angularjs/ReactUIViewAdapterComponent.tsx index ef695161..ce1a0cea 100644 --- a/src/angularjs/ReactUIViewAdapterComponent.tsx +++ b/src/angularjs/ReactUIViewAdapterComponent.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import { filter } from '@uirouter/core'; import { IPortalScope } from '../react/AngularUIView'; import { PortalView } from '../react/PortalView'; @@ -8,10 +8,10 @@ import { hybridModule } from './module'; import { debugLog } from '../debug'; // When an angularjs `ui-view` is instantiated, also create an react-ui-view-adapter (which creates a react UIView) -hybridModule.directive('uiView', function() { +hybridModule.directive('uiView', function () { return { restrict: 'AE', - compile: function(tElem, tAttrs) { + compile: function (tElem, tAttrs) { let { name, uiView } = tAttrs; name = name || uiView || '$default'; debugLog('angularjs', 'ui-view', '?', '.compile()', 'Creating react-ui-view-adapter', tElem); @@ -25,14 +25,15 @@ var id = 0; // This angularjs adapter (inside an angularjs ui-view) creates the react UIView and provides it the correct context // It also allows angularjs children created inside the react view (via angular2react or whatever) to access the correct // context from the react UIView -hybridModule.directive('reactUiViewAdapter', function() { +hybridModule.directive('reactUiViewAdapter', function () { return { restrict: 'E', - link: function(scope: IPortalScope, elem, attrs) { + link: function (scope: IPortalScope, elem, attrs) { const debug = (method: string, message: string, ...args) => debugLog('angularjs', 'react-ui-view-adapter', `${$id}/${attrs.name}`, method, message, ...args); const el = elem[0]; + const root = createRoot(el); let _ref = null; let destroyed = false; const $id = id++; @@ -99,8 +100,8 @@ hybridModule.directive('reactUiViewAdapter', function() { debug('.renderReactUIView()', `will createPortalToChildUIView({ name: '${childUIViewProps['name']}' })`, el); portalView.createPortalToChildUIView($id, { childUIViewProps, portalTarget: el }); } else { - debug('.renderReactUIView()', `ReactDOM.render()`, el); - ReactDOM.render(, el as any); + debug('.renderReactUIView()', `root.render()`, el); + root.render(); } } @@ -110,8 +111,8 @@ hybridModule.directive('reactUiViewAdapter', function() { if (portalView) { portalView.removePortalToChildUIView($id); } else { - const unmounted = ReactDOM.unmountComponentAtNode(el); - debug('.$on("$destroy")', `unmountComponentAtNode(): ${unmounted}`, el); + const unmounted = root.unmount(); + debug('.$on("$destroy")', `root.unmount(): ${unmounted}`, el); } // Remove using jQLite element for cross-browser compatibility. elem.remove(); diff --git a/yarn.lock b/yarn.lock index 1cd90682..4814a5d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -130,13 +130,21 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== -"@types/react@^16.9.43": - version "16.9.43" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.43.tgz#c287f23f6189666ee3bebc2eb8d0f84bcb6cdb6b" - integrity sha512-PxshAFcnJqIWYpJbLPriClH53Z2WlJcVZE+NP2etUtWQs2s7yIMj3/LDKZT/5CHJ/F62iyjVCDu2H3jHEXIxSg== +"@types/react-dom@^18.0.0": + version "18.0.6" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1" + integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA== + dependencies: + "@types/react" "*" + +"@types/react@*", "@types/react@^18.0.0": + version "18.0.21" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.21.tgz#b8209e9626bb00a34c76f55482697edd2b43cc67" + integrity sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA== dependencies: "@types/prop-types" "*" - csstype "^2.2.0" + "@types/scheduler" "*" + csstype "^3.0.2" "@types/resolve@1.17.1": version "1.17.1" @@ -145,6 +153,11 @@ dependencies: "@types/node" "*" +"@types/scheduler@*": + version "0.16.2" + resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" + integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== + "@types/sizzle@*": version "2.3.2" resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47" @@ -624,10 +637,10 @@ cross-spawn@^7.0.0: shebang-command "^2.0.0" which "^2.0.1" -csstype@^2.2.0: - version "2.6.10" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b" - integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w== +csstype@^3.0.2: + version "3.1.1" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" + integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== currently-unhandled@^0.4.1: version "0.4.1" @@ -1717,7 +1730,7 @@ process-nextick-args@~2.0.0: resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag== -prop-types@^15.6.1, prop-types@^15.6.2: +prop-types@^15.6.1: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -1756,29 +1769,25 @@ randombytes@^2.1.0: dependencies: safe-buffer "^5.1.0" -react-dom@^16.14.0: - version "16.14.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89" - integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw== +react-dom@^18.0.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" + integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.2" - scheduler "^0.19.1" + scheduler "^0.23.0" react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -react@^16.14.0: - version "16.14.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" - integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g== +react@^18.0.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" + integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.2" read-pkg-up@^1.0.1: version "1.0.1" @@ -1965,13 +1974,12 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1: resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== -scheduler@^0.19.1: - version "0.19.1" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196" - integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA== +scheduler@^0.23.0: + version "0.23.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" + integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" "semver@2 || 3 || 4 || 5", semver@^5.5.0: version "5.7.1"