Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade React packages to v18 #45235

Merged
merged 37 commits into from Dec 1, 2022
Merged

Upgrade React packages to v18 #45235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
d4e140f
Upgrade React packages to v18
jsnajdr Oct 24, 2022
3cc35fd
Upgrade framer-motion to get React 18 support and updated types
jsnajdr Oct 25, 2022
7af9bf2
React Native: upgrade to 0.69.4
jsnajdr Oct 31, 2022
b9d3d28
React Native: upgrade libraries
jsnajdr Nov 28, 2022
ea93ff0
LinkControl: fix unit tests
jsnajdr Nov 16, 2022
05da41f
Components: fix unit tests
jsnajdr Oct 26, 2022
9408a92
Block Editor: fix unit tests
jsnajdr Oct 27, 2022
382359b
NUX: fix unit tests
jsnajdr Oct 27, 2022
61e8e7a
useSelect: fix unit tests (partially)
jsnajdr Oct 28, 2022
23fb060
LinkSettings test: fix finding blocks by label text
jsnajdr Oct 31, 2022
b712d42
BlockDraggable test: fix finding blocks by label text
jsnajdr Oct 31, 2022
d253cdb
React Native test helpers: fix getting blocks
jsnajdr Oct 31, 2022
637ce64
Block Library tests: fix finding blocks by label text
jsnajdr Oct 31, 2022
6da1678
ToggleGroupControl: fix unit test by waiting for tooltip
jsnajdr Nov 18, 2022
cd42397
File Block: update snapshots to account for empty children
jsnajdr Nov 18, 2022
9f7c332
Embed native tests: improve mocked API response
jsnajdr Nov 21, 2022
4de9c4a
Embed native tests: wait for rich preview to appear
jsnajdr Nov 21, 2022
c9b9bd6
Format Library: fix finding blocks by label text
jsnajdr Nov 21, 2022
7fb330c
Edit Post: fix finding blocks by label text
jsnajdr Nov 21, 2022
4edb25f
Update native snapshots
tyxla Nov 23, 2022
7774a2f
useNestedSettingsUpdate: deoptimize/unbatch dispatching the updateBlo…
jsnajdr Nov 27, 2022
78faaeb
Color Palette: wait for dropdown to appear
jsnajdr Nov 27, 2022
807bcea
Add custom Jest matcher: toBePositionedPopover
jsnajdr Nov 28, 2022
595ce61
Use toBePositionedPopover matcher in tests
jsnajdr Nov 28, 2022
bb2595d
Mobile - Update tests
geriux Oct 5, 2022
36de541
Mobile - Update gitignore
geriux Oct 5, 2022
34c9c7f
Mobile - Update ruby config
geriux Oct 5, 2022
3271c32
[Mobile] - React Native 0.69.4 Upgrade - Android (#43486)
geriux Oct 11, 2022
c0adb62
[Mobile] - React Native 0.69.4 Upgrade - iOS
derekblank Oct 18, 2022
c9c71e7
Mobile - Check for a local bundle running with metro and use a jsbund…
geriux Oct 21, 2022
d016b5d
Remove duplicated import of Gesture handler
geriux Oct 30, 2022
e7bacd7
Remove deprecated initialization for Reanimated
geriux Nov 2, 2022
d19e915
Update Podfile.lock after updating dependencies
geriux Nov 28, 2022
69444f7
Remove React peer deps from packages that don't need them
jsnajdr Nov 30, 2022
259e3bb
Add changelog entries about React 18 upgrade
jsnajdr Nov 30, 2022
16d1ec2
Extract useIsScreenReaderEnabled hook, set state only if enabled=true
jsnajdr Nov 30, 2022
6e704aa
Mobile - Update Podfile.lock
geriux Dec 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4,711 changes: 3,492 additions & 1,219 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

22 changes: 12 additions & 10 deletions package.json
View file
Open in desktop
Expand Up @@ -112,10 +112,10 @@
"@storybook/builder-webpack5": "6.5.7",
"@storybook/manager-webpack5": "6.5.7",
"@storybook/react": "6.5.7",
"@testing-library/jest-dom": "5.16.4",
"@testing-library/react": "12.1.5",
"@testing-library/react-native": "9.1.0",
"@testing-library/user-event": "14.2.0",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "13.4.0",
"@testing-library/react-native": "11.3.0",
"@testing-library/user-event": "14.4.3",
"@types/classnames": "2.3.1",
"@types/eslint": "7.28.0",
"@types/estree": "0.0.50",
Expand All @@ -126,7 +126,9 @@
"@types/npm-package-arg": "6.1.1",
"@types/prettier": "2.4.4",
"@types/qs": "6.9.7",
"@types/react": "18.0.21",
"@types/react-dates": "21.8.3",
"@types/react-dom": "18.0.6",
"@types/requestidlecallback": "0.3.4",
"@types/semver": "7.3.8",
"@types/sprintf-js": "1.1.2",
Expand Down Expand Up @@ -204,8 +206,8 @@
"lint-staged": "10.0.1",
"lodash": "4.17.21",
"make-dir": "3.0.0",
"metro-react-native-babel-preset": "0.66.2",
"metro-react-native-babel-transformer": "0.66.2",
"metro-react-native-babel-preset": "0.70.3",
"metro-react-native-babel-transformer": "0.70.3",
"mkdirp": "0.5.1",
"nock": "12.0.3",
"node-fetch": "2.6.1",
Expand All @@ -216,12 +218,12 @@
"postcss-loader": "6.2.1",
"prettier": "npm:wp-prettier@2.6.2",
"progress": "2.0.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.66.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.69.4",
"react-native-url-polyfill": "1.1.2",
"react-refresh": "0.10.0",
"react-test-renderer": "17.0.2",
"react-test-renderer": "18.2.0",
"redux": "4.1.2",
"resize-observer-polyfill": "1.5.1",
"rimraf": "3.0.2",
Expand Down
3 changes: 0 additions & 3 deletions packages/annotations/package.json
View file
Open in desktop
Expand Up @@ -33,9 +33,6 @@
"rememo": "^4.0.0",
"uuid": "^8.3.0"
},
"peerDependencies": {
"react": "^17.0.0"
},
"publishConfig": {
"access": "public"
}
Expand Down
4 changes: 4 additions & 0 deletions packages/block-directory/CHANGELOG.md
View file
Open in desktop
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Breaking Changes

- Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))

## 3.20.0 (2022-11-16)

## 3.19.0 (2022-11-02)
Expand Down
4 changes: 2 additions & 2 deletions packages/block-directory/package.json
View file
Open in desktop
Expand Up @@ -47,8 +47,8 @@
"change-case": "^4.1.2"
},
"peerDependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
"react": "^18.0.0",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In order for the rest of the ecosystem to update smoothly and at their own pace, should we support both 17 and 18 as peer deps in most packages? (As long as our code is still compatible with 17, that is)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if our code will be compatible, that's the problem.

For example, I suspect that we'll need to update the useSelect hook to use useSyncExternalStore from React 18, otherwise it will not work 100% reliably with v18. Then the @wordpress/data library has a non-negotiable dependency on React 18, and that transitively affects all other libraries...

Let's keep the v17 compat requirement in mind, and see what we can do. Libraries like react-redux use a compat shim for useSyncExternalStore, and that allows them to support older versions back to React 16.

"react-dom": "^18.0.0"
},
"publishConfig": {
"access": "public"
Expand Down
6 changes: 5 additions & 1 deletion packages/block-editor/CHANGELOG.md
View file
Open in desktop
Expand Up @@ -2,7 +2,11 @@

## Unreleased

### Enhancement
### Breaking Changes

- Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))

### Enhancements

- `URLInput`: the `renderSuggestions` callback prop now receives `currentInputValue` as a new parameter ([45806](https://github.com/WordPress/gutenberg/pull/45806)).

Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/package.json
View file
Open in desktop
Expand Up @@ -74,8 +74,8 @@
"traverse": "^0.6.6"
},
"peerDependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"publishConfig": {
"access": "public"
Expand Down
94 changes: 54 additions & 40 deletions packages/block-editor/src/components/block-draggable/index.native.js
View file
Open in desktop
Expand Up @@ -285,6 +285,58 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
);
};

function useIsScreenReaderEnabled() {
const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
useState( false );

useEffect( () => {
let mounted = true;

const changeListener = AccessibilityInfo.addEventListener(
'screenReaderChanged',
( enabled ) => setIsScreenReaderEnabled( enabled )
);

AccessibilityInfo.isScreenReaderEnabled().then(
( screenReaderEnabled ) => {
if ( mounted && screenReaderEnabled ) {
setIsScreenReaderEnabled( screenReaderEnabled );
}
}
);

return () => {
mounted = false;

changeListener.remove();
};
}, [] );

return isScreenReaderEnabled;
}

function useIsEditingText() {
const [ isEditingText, setIsEditingText ] = useState( () =>
RCTAztecView.InputState.isFocused()
);

useEffect( () => {
const onFocusChangeAztec = ( { isFocused } ) => {
setIsEditingText( isFocused );
};

RCTAztecView.InputState.addFocusChangeListener( onFocusChangeAztec );

return () => {
RCTAztecView.InputState.removeFocusChangeListener(
onFocusChangeAztec
);
};
}, [] );

return isEditingText;
}

/**
* Block draggable component
*
Expand All @@ -308,9 +360,8 @@ const BlockDraggable = ( {
testID,
} ) => {
const wasBeingDragged = useRef( false );
const [ isEditingText, setIsEditingText ] = useState( false );
const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
useState( false );
const isEditingText = useIsEditingText();
const isScreenReaderEnabled = useIsScreenReaderEnabled();

const draggingAnimation = {
opacity: useSharedValue( 1 ),
Expand Down Expand Up @@ -365,43 +416,6 @@ const BlockDraggable = ( {
wasBeingDragged.current = isBeingDragged;
}, [ isBeingDragged ] );

const onFocusChangeAztec = useCallback( ( { isFocused } ) => {
setIsEditingText( isFocused );
}, [] );

useEffect( () => {
let mounted = true;

const isAnyAztecInputFocused = RCTAztecView.InputState.isFocused();
if ( isAnyAztecInputFocused ) {
setIsEditingText( isAnyAztecInputFocused );
}

RCTAztecView.InputState.addFocusChangeListener( onFocusChangeAztec );

const screenReaderChangedListener = AccessibilityInfo.addEventListener(
'screenReaderChanged',
setIsScreenReaderEnabled
);
AccessibilityInfo.isScreenReaderEnabled().then(
( screenReaderEnabled ) => {
if ( mounted ) {
setIsScreenReaderEnabled( screenReaderEnabled );
}
}
);

return () => {
mounted = false;

RCTAztecView.InputState.removeFocusChangeListener(
onFocusChangeAztec
);

screenReaderChangedListener.remove();
};
}, [] );

const onLongPressDraggable = useCallback( () => {
// Ensure that no text input is focused when starting the dragging gesture in order to prevent conflicts with text editing.
RCTAztecView.InputState.blurCurrentFocusedElement();
Expand Down
16 changes: 7 additions & 9 deletions packages/block-editor/src/components/block-draggable/test/helpers.native.js
View file
Open in desktop
Expand Up @@ -53,14 +53,14 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
const initialHtml = blocks.map( ( block ) => block.html ).join( '\n' );

const screen = await initializeEditor( { initialHtml } );
const { getByLabelText } = screen;
const { getAllByLabelText } = screen;

const waitPromises = [];
blocks.forEach( ( block, index ) => {
const a11yLabel = new RegExp(
`${ block.name } Block\\. Row ${ index + 1 }`
);
const element = getByLabelText( a11yLabel );
const [ element ] = getAllByLabelText( a11yLabel );
// "onLayout" event will populate the blocks layouts data.
fireEvent( element, 'layout', {
nativeEvent: { layout: block.layout },
Expand Down Expand Up @@ -91,13 +91,11 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
const nestedA11yLabel = new RegExp(
`${ nestedBlock.name } Block\\. Row ${ nestedIndex + 1 }`
);
fireEvent(
within( element ).getByLabelText( nestedA11yLabel ),
'layout',
{
nativeEvent: { layout: nestedBlock.layout },
}
);
const [ nestedElement ] =
within( element ).getAllByLabelText( nestedA11yLabel );
fireEvent( nestedElement, 'layout', {
nativeEvent: { layout: nestedBlock.layout },
} );
} );
}
} );
Expand Down