58d217d0cf
Issue number: resolves #29178 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> [DefinitelyTyped removed the `onPointerEnterCaptured` and `onPointerLeaveCaptured` types for `@types/react`](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69006). This caused issues when multiple versions of `@types/react` are installed where an older version inlined these types, but they did not exist in newer versions. For Ionic React, we build with React 16 which did inline the types. In an Ionic React starter app we build with React 18 which does not want these types. As a result, there is a type mismatch. Note that this type change is being [reverted in React 16-17](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69006#discussioncomment-8826095) so presumably this issue will go away in its own for those versions. However, developers are building with React 18 too, so this issue will persist for those developers. However, React 17 should still have this problem (at least until the change is reverted), yet the build here passes. The main difference is that the `onPointer{Enter,Leave}Captured` event is no longer inlined. After talking with the Stencil team this is the current understanding of why the issue no longer reproduces. **Building with React 17** ```ts import type { JSX as LocalJSX } from '@ionic/core/components'; import React from 'react'; import type { IonicReactProps } from './IonicReactProps'; export declare const IonRouterOutlet: React.ForwardRefExoticComponent<Pick<LocalJSX.IonRouterOutlet & { basePath?: string | undefined; ref?: React.Ref<any> | undefined; ionPage?: boolean | undefined; } & IonicReactProps & Omit<React.HTMLAttributes<HTMLIonRouterOutletElement>, "style" | "placeholder">, "children" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof IonicReactProps | keyof LocalJSX.IonRouterOutlet | "basePath" | "ionPage"> & React.RefAttributes<HTMLIonRouterOutletElement>>; ``` **Building with React 18** ```ts export declare const IonRouterOutlet: React.ForwardRefExoticComponent<Omit<LocalJSX.IonRouterOutlet & { basePath?: string | undefined; ref?: React.Ref<any> | undefined; ionPage?: boolean | undefined; } & IonicReactProps & Omit<React.HTMLAttributes<HTMLIonRouterOutletElement>, "style" | "placeholder">, "ref"> & React.RefAttributes<HTMLIonRouterOutletElement>>; ``` ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated types in our React test apps and verified that the [issue reproduces there without this fix](https://github.com/ionic-team/ionic-framework/actions/runs/8345186602). - Updated Ionic React and Ionic React Router to build with React 17. ## Does this introduce a breaking change? - [ ] Yes - [x] No Ionic v7 expects React 17 or newer, so building with React 17 instead of React 16 is not a breaking change. <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `7.8.1-dev.11710859149.114e57ae` Verified with sample repro
React Router E2E Test Apps
Ionic Framework supports multiple versions of React Router. As a result, we need to verify that Ionic works correctly with each of these React Router versions.
Syncing Local Changes
The React test app supports syncing your locally built changes for validation.
- Build the
@ionic/core,@ionic/react, and@ionic/react-routerprojects usingnpm run build. - Build the React test app.
- Navigate to the built test app.
- Install dependencies using
npm install. - Sync your local changes using
npm run sync.
From here you can either build the application or start a local dev server. When re-syncing changes, you will need to wipe the build cache in node_modules/.cache and restart the dev server/re-build.
Test App Build Structure
Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application.
apps - This directory contains partial applications for each version of React we want to test. Typically these directories contain new package.json files, cypress.config.ts files, and more. If you have code that is specific to a particular version of React, put it in this directory.
base - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory.
build - When the apps and base directories are merged, the final result is put in this directory. The build directory should never be committed to git.
build.sh - This is the script that merges the apps and base directories and places the built application in the build directory.
Usage:
# Build a test app using apps/reactrouter5 as a reference
./build.sh reactrouter5
How to modify test apps
To add new tests, components, or pages, modify the base project. This ensures that tests are run for every tested version.
If you want to add a version-specific change, add the change inside of the appropriate projects in apps. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called test.e2e.ts in apps/reactrouter5, make sure you place the file in apps/react17/tests/e2e/test.e2e.ts.
Version-specific tests
If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the VersionTest component on each partial application. This ensures that tests for framework version X do not get run for framework version Y.
Adding New Test Apps
As we add support for new versions of React Router, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps:
- Navigate to the built app for the most recent version of React Router that Ionic tests.
- Update the application to the latest version of React Router.
- Make note of any files that changed during the upgrade (
package.json,package-lock.json, etc). - Copy the changed files to a new directory in
apps. - Add a new entry to the matrix for
test-react-router-e2ein./github/workflows/build.yml. This will allow the new test app to run against all PRs. - Commit these changes and push.