Skip to content

Commit e9da5fc

Browse files
renovate[bot]renovate-botMethuselah96
authored
fix(deps): update react (major) (#1165)
* fix(deps): update react * Fix * Use createRoot * Update tests * Format * Fix test Co-authored-by: Renovate Bot <[email protected]> Co-authored-by: Nathan Bierema <[email protected]>
1 parent e60c2d3 commit e9da5fc

File tree

49 files changed

+1384
-1417
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1384
-1417
lines changed

‎extension/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,10 @@
4141
"jsan": "^3.1.14",
4242
"localforage": "^1.10.0",
4343
"lodash": "^4.17.21",
44-
"react": "^17.0.2",
45-
"react-dom": "^17.0.2",
44+
"react": "^18.1.0",
45+
"react-dom": "^18.1.0",
4646
"react-icons": "^4.4.0",
47-
"react-is": "^17.0.2",
47+
"react-is": "^18.1.0",
4848
"react-json-tree": "^0.17.0",
4949
"react-redux": "^8.0.2",
5050
"redux": "^4.2.0",
@@ -58,11 +58,11 @@
5858
"@babel/preset-typescript": "^7.17.12",
5959
"@babel/register": "^7.17.7",
6060
"@testing-library/jest-dom": "^5.16.4",
61-
"@testing-library/react": "^12.1.5",
61+
"@testing-library/react": "^13.3.0",
6262
"@types/chrome": "^0.0.188",
6363
"@types/lodash": "^4.14.182",
64-
"@types/react": "^17.0.45",
65-
"@types/react-dom": "^17.0.17",
64+
"@types/react": "^18.0.12",
65+
"@types/react-dom": "^18.0.5",
6666
"@types/styled-components": "^5.1.25",
6767
"babel-loader": "^8.2.5",
6868
"bestzip": "^2.2.1",

‎extension/src/browser/extension/devpanel/index.tsx‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { CSSProperties } from 'react';
2-
import { render, unmountComponentAtNode } from 'react-dom';
2+
import { createRoot, Root } from 'react-dom/client';
33
import { Provider } from 'react-redux';
44
import { Persistor } from 'redux-persist';
55
import { REMOVE_INSTANCE, StoreAction } from '@redux-devtools/app';
@@ -27,23 +27,21 @@ let naTimeout: NodeJS.Timeout;
2727

2828
const isChrome = navigator.userAgent.indexOf('Firefox') === -1;
2929

30-
function renderDevTools() {
31-
const node = document.getElementById('root');
32-
unmountComponentAtNode(node!);
30+
function renderDevTools(root: Root) {
31+
root.unmount();
3332
clearTimeout(naTimeout);
3433
({ store, persistor } = configureStore(position, bgConnection));
35-
render(
34+
root.render(
3635
<Provider store={store}>
3736
<PersistGate loading={null} persistor={persistor}>
3837
<App position={position} />
3938
</PersistGate>
40-
</Provider>,
41-
node
39+
</Provider>
4240
);
4341
rendered = true;
4442
}
4543

46-
function renderNA() {
44+
function renderNA(root: Root) {
4745
if (rendered === false) return;
4846
rendered = false;
4947
naTimeout = setTimeout(() => {
@@ -76,32 +74,31 @@ function renderNA() {
7674
);
7775
}
7876

79-
const node = document.getElementById('root');
80-
unmountComponentAtNode(node!);
81-
render(message, node);
77+
root.unmount();
78+
root.render(message);
8279
store = undefined;
8380
});
8481
} else {
85-
const node = document.getElementById('root');
86-
unmountComponentAtNode(node!);
87-
render(message, node);
82+
root.unmount();
83+
root.render(message);
8884
store = undefined;
8985
}
9086
}, 3500);
9187
}
9288

9389
function init(id: number) {
94-
renderNA();
90+
const root = createRoot(document.getElementById('root')!);
91+
renderNA(root);
9592
bgConnection = chrome.runtime.connect({
9693
name: id ? id.toString() : undefined,
9794
});
9895
bgConnection.onMessage.addListener(
9996
<S, A extends Action<unknown>>(message: PanelMessage<S, A>) => {
10097
if (message.type === 'NA') {
101-
if (message.id === id) renderNA();
98+
if (message.id === id) renderNA(root);
10299
else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });
103100
} else {
104-
if (!rendered) renderDevTools();
101+
if (!rendered) renderDevTools(root);
105102
store!.dispatch(message);
106103
}
107104
}

‎extension/src/browser/extension/options/index.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { render } from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import OptionsComponent from './Options';
44
import { Options } from './syncOptions';
55

@@ -13,10 +13,8 @@ chrome.runtime.getBackgroundPage((background) => {
1313
};
1414

1515
const renderOptions = (options: Options) => {
16-
render(
17-
<OptionsComponent options={options} saveOption={saveOption} />,
18-
document.getElementById('root')
19-
);
16+
const root = createRoot(document.getElementById('root')!);
17+
root.render(<OptionsComponent options={options} saveOption={saveOption} />);
2018
};
2119

2220
syncOptions.subscribe(renderOptions);

‎extension/src/browser/extension/window/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { render } from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import { Provider } from 'react-redux';
44
import { PersistGate } from 'redux-persist/integration/react';
55
import { UPDATE_STATE } from '@redux-devtools/app';
@@ -25,13 +25,13 @@ chrome.runtime.getBackgroundPage((window) => {
2525
bg.onMessage.addListener(update);
2626
update();
2727

28-
render(
28+
const root = createRoot(document.getElementById('root')!);
29+
root.render(
2930
<Provider store={localStore}>
3031
<PersistGate loading={null} persistor={persistor}>
3132
<App position={position} />
3233
</PersistGate>
33-
</Provider>,
34-
document.getElementById('root')
34+
</Provider>
3535
);
3636
});
3737

‎extension/src/browser/extension/window/remote.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { render } from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import { Root } from '@redux-devtools/app';
44

55
import '../../views/remote.pug';
@@ -15,7 +15,8 @@ chrome.storage.local.get(
1515
},
1616
(options) => {
1717
const AppAsAny = Root as any;
18-
render(
18+
const root = createRoot(document.getElementById('root')!);
19+
root.render(
1920
<AppAsAny
2021
selectMonitor={options['select-monitor']}
2122
testTemplates={options['test-templates']}
@@ -30,8 +31,7 @@ chrome.storage.local.get(
3031
}
3132
: undefined
3233
}
33-
/>,
34-
document.getElementById('root')
34+
/>
3535
);
3636
}
3737
);

‎package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,12 @@
4242
"pnpm": {
4343
"overrides": {
4444
"@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process"
45+
},
46+
"peerDependencyRules": {
47+
"allowedVersions": {
48+
"react": "18",
49+
"react-dom": "18"
50+
}
4551
}
4652
}
4753
}

‎packages/react-dock/demo/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@
1010
"type-check": "tsc --noEmit"
1111
},
1212
"dependencies": {
13-
"react": "^17.0.2",
13+
"react": "^18.1.0",
1414
"react-bootstrap": "^2.4.0",
1515
"react-dock": "^0.6.0",
16-
"react-dom": "^17.0.2",
16+
"react-dom": "^18.1.0",
1717
"react-icons": "^4.4.0",
18-
"react-is": "^17.0.2",
18+
"react-is": "^18.1.0",
1919
"styled-components": "^5.3.5"
2020
},
2121
"devDependencies": {
@@ -24,8 +24,8 @@
2424
"@babel/preset-react": "^7.17.12",
2525
"@babel/preset-typescript": "^7.17.12",
2626
"@types/node": "^16.11.38",
27-
"@types/react": "^17.0.45",
28-
"@types/react-dom": "^17.0.17",
27+
"@types/react": "^18.0.12",
28+
"@types/react-dom": "^18.0.5",
2929
"@types/styled-components": "^5.1.25",
3030
"@typescript-eslint/eslint-plugin": "^5.27.0",
3131
"@typescript-eslint/parser": "^5.27.0",

‎packages/react-dock/demo/src/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import ReactDOM from 'react-dom/client';
33
import App from './App';
44

5-
ReactDOM.render(<App />, document.getElementById('root'));
5+
const root = ReactDOM.createRoot(document.getElementById('root')!);
6+
root.render(<App />);

‎packages/react-dock/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@
5555
"@babel/preset-typescript": "^7.17.12",
5656
"@types/jest": "^27.5.2",
5757
"@types/lodash.debounce": "^4.0.7",
58-
"@types/react": "^17.0.45",
59-
"@types/react-test-renderer": "^17.0.2",
58+
"@types/react": "^18.0.12",
59+
"@types/react-test-renderer": "^18.0.0",
6060
"@typescript-eslint/eslint-plugin": "^5.27.0",
6161
"@typescript-eslint/parser": "^5.27.0",
6262
"eslint": "^8.17.0",
@@ -65,8 +65,8 @@
6565
"eslint-plugin-react": "^7.30.0",
6666
"eslint-plugin-react-hooks": "^4.5.0",
6767
"jest": "^27.5.1",
68-
"react": "^17.0.2",
69-
"react-test-renderer": "^17.0.2",
68+
"react": "^18.1.0",
69+
"react-test-renderer": "^18.1.0",
7070
"rimraf": "^3.0.2",
7171
"ts-jest": "^27.1.5",
7272
"typescript": "~4.7.3"

‎packages/react-json-tree/examples/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020
},
2121
"dependencies": {
2222
"immutable": "^4.1.0",
23-
"react": "^17.0.2",
23+
"react": "^18.1.0",
2424
"react-base16-styling": "^0.9.1",
25-
"react-dom": "^17.0.2",
25+
"react-dom": "^18.1.0",
2626
"react-json-tree": "^0.17.0"
2727
},
2828
"devDependencies": {
@@ -31,8 +31,8 @@
3131
"@babel/preset-react": "^7.17.12",
3232
"@babel/preset-typescript": "^7.17.12",
3333
"@types/node": "^16.11.38",
34-
"@types/react": "^17.0.45",
35-
"@types/react-dom": "^17.0.17",
34+
"@types/react": "^18.0.12",
35+
"@types/react-dom": "^18.0.5",
3636
"@typescript-eslint/eslint-plugin": "^5.27.0",
3737
"@typescript-eslint/parser": "^5.27.0",
3838
"babel-loader": "^8.2.5",

0 commit comments

Comments
 (0)