From 073bcacbc454a68dec7ceeed4fa4384dd3779387 Mon Sep 17 00:00:00 2001 From: Mozafar Haider Date: Tue, 10 Sep 2024 20:09:36 +0100 Subject: [PATCH] feat: upgrade react to v18 --- .github/workflows/dhis2-verify-lib.yml | 6 +++--- adapter/package.json | 6 +++--- cli/config/init/App.test.jsx | 11 ++++++----- cli/src/commands/start.js | 3 +++ shell/package.json | 4 ++-- shell/src/App.test.jsx | 7 ++++--- shell/src/index.jsx | 12 ++++++++---- shell/src/plugin.index.jsx | 9 +++++---- 8 files changed, 34 insertions(+), 24 deletions(-) diff --git a/.github/workflows/dhis2-verify-lib.yml b/.github/workflows/dhis2-verify-lib.yml index 85235516..2407f474 100644 --- a/.github/workflows/dhis2-verify-lib.yml +++ b/.github/workflows/dhis2-verify-lib.yml @@ -29,7 +29,7 @@ jobs: - name: Build run: yarn build - - uses: actions/upload-artifact@v2 + - uses: actions/upload-artifact@v4 with: name: lib-build path: | @@ -61,7 +61,7 @@ jobs: with: node-version: 18.x - - uses: actions/download-artifact@v2 + - uses: actions/download-artifact@v4 with: name: lib-build @@ -83,7 +83,7 @@ jobs: with: node-version: 18.x - - uses: actions/download-artifact@v2 + - uses: actions/download-artifact@v4 with: name: lib-build diff --git a/adapter/package.json b/adapter/package.json index cddcc014..df749ea2 100644 --- a/adapter/package.json +++ b/adapter/package.json @@ -30,8 +30,8 @@ "@testing-library/react-hooks": "^8.0.1", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", - "react": "^16.8", - "react-dom": "^16.8" + "react": "^18", + "react-dom": "^18" }, "scripts": { "build": "d2-app-scripts build", @@ -44,7 +44,7 @@ "classnames": "^2", "moment": "^2", "prop-types": "^15", - "react": "^16.8", + "react": "^16.8 || ^18", "react-dom": "^16.8", "styled-jsx": "^4" }, diff --git a/cli/config/init/App.test.jsx b/cli/config/init/App.test.jsx index dc6c4ba5..b5846809 100644 --- a/cli/config/init/App.test.jsx +++ b/cli/config/init/App.test.jsx @@ -1,15 +1,16 @@ import { CustomDataProvider } from '@dhis2/app-runtime' import React from 'react' -import ReactDOM from 'react-dom' +import { createRoot } from 'react-dom/client' import App from './App.jsx' it('renders without crashing', () => { const div = document.createElement('div') - ReactDOM.render( + const root = createRoot(div) + + root.render( - , - div + ) - ReactDOM.unmountComponentAtNode(div) + root.unmount() }) diff --git a/cli/src/commands/start.js b/cli/src/commands/start.js index 8853489f..08c3e6b1 100644 --- a/cli/src/commands/start.js +++ b/cli/src/commands/start.js @@ -24,6 +24,9 @@ const handler = async ({ proxyPort, host, }) => { + // ToDo: remove before merging + reporter.info(' ::: using react@18 :::') + const paths = makePaths(cwd) const mode = 'development' diff --git a/shell/package.json b/shell/package.json index c9259076..e84fb08b 100644 --- a/shell/package.json +++ b/shell/package.json @@ -24,8 +24,8 @@ "moment": "^2.29.1", "post-robot": "^10.0.46", "prop-types": "^15.7.2", - "react": "^16.8.6", - "react-dom": "^16.8.6", + "react": "^18", + "react-dom": "^18", "source-map-explorer": "^2.1.0", "styled-jsx": "^4.0.1", "typeface-roboto": "^0.0.75", diff --git a/shell/src/App.test.jsx b/shell/src/App.test.jsx index 057087a4..51f2aae1 100644 --- a/shell/src/App.test.jsx +++ b/shell/src/App.test.jsx @@ -1,9 +1,10 @@ import React from 'react' -import ReactDOM from 'react-dom' +import { createRoot } from 'react-dom/client' import App from './App.jsx' it('renders without crashing', () => { const div = document.createElement('div') - ReactDOM.render(, div) - ReactDOM.unmountComponentAtNode(div) + const root = createRoot(div) + root.render() + root.unmount() }) diff --git a/shell/src/index.jsx b/shell/src/index.jsx index e68b5f43..017b4e75 100644 --- a/shell/src/index.jsx +++ b/shell/src/index.jsx @@ -1,14 +1,18 @@ import { CssReset } from '@dhis2/ui' import React from 'react' -import ReactDOM from 'react-dom' +import { createRoot } from 'react-dom/client' import App from './App.jsx' import 'typeface-roboto' import './index.css' -ReactDOM.render( +const container = document.getElementById('dhis2-app-root') +const root = createRoot(container) +root.render( <> - , - document.getElementById('dhis2-app-root') + ) + +// ToDo: remove before merging +console.log(' ::: using react@18 :::') diff --git a/shell/src/plugin.index.jsx b/shell/src/plugin.index.jsx index e5e3c43f..8e1c22a4 100644 --- a/shell/src/plugin.index.jsx +++ b/shell/src/plugin.index.jsx @@ -1,14 +1,15 @@ import { CssReset } from '@dhis2/ui' import React from 'react' -import ReactDOM from 'react-dom' +import { createRoot } from 'react-dom/client' import Plugin from './Plugin.jsx' import 'typeface-roboto' import './index.css' -ReactDOM.render( +const container = document.getElementById('dhis2-app-root') +const root = createRoot(container) +root.render( <> - , - document.getElementById('dhis2-app-root') + )