Skip to content

Commit cb95669

Browse files
KManolov3KManolov3
authored
Merge pull request #3334 from scratchfoundation/react-18-integration
React 18 integration
2 parents a020fa7 + b8afed2 commit cb95669

15 files changed

Lines changed: 20485 additions & 16628 deletions

File tree

‎package-lock.json‎

Lines changed: 20150 additions & 16304 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,16 @@
3333
"prop-types": "^15.5.10"
3434
},
3535
"peerDependencies": {
36-
"react": "^16",
37-
"react-dom": "^16",
38-
"react-intl": "^2",
36+
"react": "^18",
37+
"react-dom": "^18",
38+
"react-intl": "^6",
3939
"react-intl-redux": "^0.7 || ^2.0.0",
4040
"react-popover": "^0.5",
41-
"react-redux": "^5",
42-
"react-responsive": "^5",
41+
"react-redux": "^8",
42+
"react-responsive": "^9",
4343
"react-style-proptype": "^3",
4444
"react-tooltip": "^4",
45-
"redux": "^3",
45+
"redux": "^4",
4646
"scratch-render-fonts": "^1.0.0"
4747
},
4848
"devDependencies": {
@@ -53,6 +53,7 @@
5353
"@babel/preset-react": "7.27.1",
5454
"@commitlint/cli": "17.8.1",
5555
"@commitlint/config-conventional": "17.8.1",
56+
"@testing-library/react": "8.0.0",
5657
"autoprefixer": "9.8.8",
5758
"babel-eslint": "10.1.0",
5859
"babel-jest": "29.7.0",
@@ -61,8 +62,6 @@
6162
"babel-plugin-transform-object-rest-spread": "6.26.0",
6263
"canvas": "2.11.2",
6364
"css-loader": "3.6.0",
64-
"enzyme": "3.11.0",
65-
"enzyme-adapter-react-16": "1.15.8",
6665
"eslint": "8.57.1",
6766
"eslint-config-scratch": "9.0.9",
6867
"eslint-plugin-import": "2.32.0",
@@ -79,28 +78,17 @@
7978
"postcss-loader": "3.0.0",
8079
"postcss-simple-vars": "5.0.2",
8180
"raf": "3.4.1",
82-
"react": "16.14.0",
83-
"react-dom": "16.14.0",
84-
"react-intl": "2.9.0",
85-
"react-intl-redux": "2.4.1",
86-
"react-popover": "0.5.10",
87-
"react-redux": "5.1.2",
88-
"react-responsive": "5.0.0",
89-
"react-style-proptype": "3.2.2",
90-
"react-test-renderer": "16.14.0",
91-
"react-tooltip": "4.5.1",
92-
"redux": "3.7.2",
81+
"react-test-renderer": "18.2.0",
9382
"redux-mock-store": "1.5.5",
9483
"redux-throttle": "0.1.1",
9584
"regenerator-runtime": "0.13.9",
9685
"rimraf": "2.7.1",
9786
"scratch-l10n": "5.0.309",
98-
"scratch-render-fonts": "1.0.218",
9987
"scratch-semantic-release-config": "3.0.0",
10088
"semantic-release": "19.0.5",
10189
"style-loader": "1.3.0",
10290
"svg-url-loader": "3.0.3",
103-
"tap": "14.11.0",
91+
"tap": "^21.0.1",
10492
"uglifyjs-webpack-plugin": "2.2.0",
10593
"url-loader": "2.3.0",
10694
"webpack": "4.47.0",
@@ -114,14 +102,17 @@
114102
},
115103
"jest": {
116104
"setupFiles": [
117-
"raf/polyfill",
118-
"<rootDir>/test/helpers/enzyme-setup.js"
105+
"raf/polyfill"
119106
],
107+
"testEnvironment": "jsdom",
120108
"testURL": "http://localhost",
121109
"moduleNameMapper": {
122110
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
123111
"\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
124-
}
112+
},
113+
"transformIgnorePatterns": [
114+
"/node_modules/(?!intl-messageformat|intl-messageformat-parser).+\\.js$"
115+
]
125116
},
126117
"jest-junit": {
127118
"outputDirectory": "./test/results"
@@ -131,4 +122,4 @@
131122
"Safari >= 8",
132123
"iOS >= 8"
133124
]
134-
}
125+
}

‎src/components/color-picker/color-picker.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
3+
import {defineMessages, FormattedMessage, injectIntl} from 'react-intl';
4+
import intlShape from '../../lib/intl-shape.js';
45

56
import classNames from 'classnames';
67
import parseColor from 'parse-color';

‎src/components/coming-soon/coming-soon.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ See #13 */
44

55
import bindAll from 'lodash.bindall';
66
import classNames from 'classnames';
7-
import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
7+
import {defineMessages, injectIntl, FormattedMessage} from 'react-intl';
8+
import intlShape from '../../lib/intl-shape.js';
89
import PropTypes from 'prop-types';
910
import React from 'react';
1011
import ReactTooltip from 'react-tooltip';

‎src/components/fixed-tools/fixed-tools.jsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
1111
import Button from '../button/button.jsx';
1212
import ButtonGroup from '../button-group/button-group.jsx';
1313
import Dropdown from '../dropdown/dropdown.jsx';
14-
import {defineMessages, injectIntl, intlShape} from 'react-intl';
14+
import {defineMessages, useIntl} from 'react-intl';
1515
import Formats, {isVector} from '../../lib/format';
1616
import Input from '../forms/input.jsx';
1717
import InputGroup from '../input-group/input-group.jsx';
@@ -87,13 +87,14 @@ const messages = defineMessages({
8787
const FixedToolsComponent = props => {
8888
const redoDisabled = !props.canRedo();
8989
const undoDisabled = !props.canUndo();
90+
const intl = useIntl();
9091

9192
return (
9293
<div className={styles.row}>
9394
{/* Name field */}
9495
<InputGroup>
9596
<MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
96-
<Label text={props.intl.formatMessage(messages.costume)}>
97+
<Label text={intl.formatMessage(messages.costume)}>
9798
<BufferedInput
9899
className={styles.costumeInput}
99100
type="text"
@@ -128,7 +129,7 @@ const FixedToolsComponent = props => {
128129
onClick={props.onUndo}
129130
>
130131
<img
131-
alt={props.intl.formatMessage(messages.undo)}
132+
alt={intl.formatMessage(messages.undo)}
132133
className={classNames(
133134
styles.buttonGroupButtonIcon,
134135
styles.undoIcon
@@ -150,7 +151,7 @@ const FixedToolsComponent = props => {
150151
onClick={props.onRedo}
151152
>
152153
<img
153-
alt={props.intl.formatMessage(messages.redo)}
154+
alt={intl.formatMessage(messages.redo)}
154155
className={styles.buttonGroupButtonIcon}
155156
draggable={false}
156157
src={redoIcon}
@@ -164,16 +165,16 @@ const FixedToolsComponent = props => {
164165
<InputGroup className={styles.modDashedBorder}>
165166
<LabeledIconButton
166167
disabled={!shouldShowGroup()}
167-
hideLabel={hideLabel(props.intl.locale)}
168+
hideLabel={hideLabel(intl.locale)}
168169
imgSrc={groupIcon}
169-
title={props.intl.formatMessage(messages.group)}
170+
title={intl.formatMessage(messages.group)}
170171
onClick={props.onGroup}
171172
/>
172173
<LabeledIconButton
173174
disabled={!shouldShowUngroup()}
174-
hideLabel={hideLabel(props.intl.locale)}
175+
hideLabel={hideLabel(intl.locale)}
175176
imgSrc={ungroupIcon}
176-
title={props.intl.formatMessage(messages.ungroup)}
177+
title={intl.formatMessage(messages.ungroup)}
177178
onClick={props.onUngroup}
178179
/>
179180
</InputGroup> : null
@@ -184,16 +185,16 @@ const FixedToolsComponent = props => {
184185
<InputGroup className={styles.modDashedBorder}>
185186
<LabeledIconButton
186187
disabled={!shouldShowBringForward()}
187-
hideLabel={hideLabel(props.intl.locale)}
188+
hideLabel={hideLabel(intl.locale)}
188189
imgSrc={sendForwardIcon}
189-
title={props.intl.formatMessage(messages.forward)}
190+
title={intl.formatMessage(messages.forward)}
190191
onClick={props.onSendForward}
191192
/>
192193
<LabeledIconButton
193194
disabled={!shouldShowSendBackward()}
194-
hideLabel={hideLabel(props.intl.locale)}
195+
hideLabel={hideLabel(intl.locale)}
195196
imgSrc={sendBackwardIcon}
196-
title={props.intl.formatMessage(messages.backward)}
197+
title={intl.formatMessage(messages.backward)}
197198
onClick={props.onSendBackward}
198199
/>
199200
</InputGroup> : null
@@ -204,16 +205,16 @@ const FixedToolsComponent = props => {
204205
<InputGroup className={styles.row}>
205206
<LabeledIconButton
206207
disabled={!shouldShowBringForward()}
207-
hideLabel={hideLabel(props.intl.locale)}
208+
hideLabel={hideLabel(intl.locale)}
208209
imgSrc={sendFrontIcon}
209-
title={props.intl.formatMessage(messages.front)}
210+
title={intl.formatMessage(messages.front)}
210211
onClick={props.onSendToFront}
211212
/>
212213
<LabeledIconButton
213214
disabled={!shouldShowSendBackward()}
214-
hideLabel={hideLabel(props.intl.locale)}
215+
hideLabel={hideLabel(intl.locale)}
215216
imgSrc={sendBackIcon}
216-
title={props.intl.formatMessage(messages.back)}
217+
title={intl.formatMessage(messages.back)}
217218
onClick={props.onSendToBack}
218219
/>
219220
</InputGroup>
@@ -252,7 +253,7 @@ const FixedToolsComponent = props => {
252253
draggable={false}
253254
src={sendFrontIcon}
254255
/>
255-
<span>{props.intl.formatMessage(messages.front)}</span>
256+
<span>{intl.formatMessage(messages.front)}</span>
256257
</Button>
257258
<Button
258259
className={classNames(styles.modMenuItem, {
@@ -266,7 +267,7 @@ const FixedToolsComponent = props => {
266267
draggable={false}
267268
src={sendBackIcon}
268269
/>
269-
<span>{props.intl.formatMessage(messages.back)}</span>
270+
<span>{intl.formatMessage(messages.back)}</span>
270271
</Button>
271272

272273
{/* To be rotation point */}
@@ -285,7 +286,7 @@ const FixedToolsComponent = props => {
285286
}
286287
tipSize={.01}
287288
>
288-
{props.intl.formatMessage(messages.more)}
289+
{intl.formatMessage(messages.more)}
289290
</Dropdown>
290291
</InputGroup>
291292
</MediaQuery> : null
@@ -298,7 +299,6 @@ FixedToolsComponent.propTypes = {
298299
canRedo: PropTypes.func.isRequired,
299300
canUndo: PropTypes.func.isRequired,
300301
format: PropTypes.oneOf(Object.keys(Formats)),
301-
intl: intlShape,
302302
name: PropTypes.string,
303303
onGroup: PropTypes.func.isRequired,
304304
onRedo: PropTypes.func.isRequired,
@@ -321,4 +321,4 @@ const mapStateToProps = state => ({
321321

322322
export default connect(
323323
mapStateToProps
324-
)(injectIntl(FixedToolsComponent));
324+
)(FixedToolsComponent);

0 commit comments

Comments
 (0)