chore(react-router): migrate to eslint, add prettier (#26634)

.github/workflows/actions/build-react-router/action.yml

@@ -6,15 +6,6 @@ runs:
     - uses: actions/setup-node@v3
       with:
         node-version: 16.x
-    - name: Install Dependencies
-      run: npm install --legacy-peer-deps
-      shell: bash
-      working-directory: ./packages/react-router
-    - uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-react
-        path: ./packages/react
-        filename: ReactBuild.zip
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -26,7 +17,7 @@ runs:
         path: ./packages/react
         filename: ReactBuild.zip
     - name: Install Dependencies
-      run: npm install --legacy-peer-deps
+      run: npm ci
       shell: bash
       working-directory: ./packages/react-router
     - name: Sync

packages/react-router/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "@ionic/eslint-config/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "tsconfig.json",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint",
+  ],
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/prefer-optional-chain": "off",
+    "@typescript-eslint/ban-types": "off"
+  }
+};

packages/react-router/.prettierrc.json

@@ -1,8 +0,0 @@
-{
-  "printWidth": 100,
-  "semi": true,
-  "singleQuote": true,
-  "jsxSingleQuote": false,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}

packages/react-router/package.json

@@ -24,8 +24,10 @@
     "clean": "rimraf dist dist-transpiled",
     "compile": "npm run tsc && rollup -c",
     "release": "np --any-branch --no-cleanup",
-    "lint": "tslint --project .",
+    "eslint": "eslint src",
-    "lint.fix": "tslint --project . --fix",
+    "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\"",
+    "lint": "npm run eslint && npm run prettier -- --write --cache",
+    "lint.fix": "npm run eslint -- --fix && npm run prettier -- --write --cache",
     "tsc": "tsc -p .",
     "sync": "sh ./scripts/sync.sh"
   },
@@ -46,13 +48,18 @@
     "react-router-dom": "^5.0.1"
   },
   "devDependencies": {
+    "@ionic/eslint-config": "^0.3.0",
+    "@ionic/prettier-config": "^2.0.0",
     "@rollup/plugin-node-resolve": "^8.1.0",
     "@types/node": "^14.0.14",
     "@types/react": "16.14.0",
     "@types/react-dom": "^16.9.0",
     "@types/react-router": "^5.0.3",
     "@types/react-router-dom": "^5.1.5",
-    "prettier": "^2.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "eslint": "^7.32.0",
+    "prettier": "^2.8.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-router": "^5.0.1",
@@ -60,9 +67,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.26.4",
     "rollup-plugin-sourcemaps": "^0.6.2",
-    "tslint": "^6.1.3",
-    "tslint-ionic-rules": "0.0.21",
-    "tslint-react": "^5.0.0",
     "typescript": "^3.9.5"
-  }
+  },
+  "prettier": "@ionic/prettier-config"
 }

packages/react-router/src/ReactRouter/IonReactHashRouter.tsx

@@ -1,11 +1,8 @@
-import {
+import type { Action as HistoryAction, History, Location as HistoryLocation } from 'history';
-  Action as HistoryAction,
+import { createHashHistory as createHistory } from 'history';
-  History,
-  Location as HistoryLocation,
-  createHashHistory as createHistory,
-} from 'history';
 import React from 'react';
-import { BrowserRouterProps, Router } from 'react-router-dom';
+import type { BrowserRouterProps } from 'react-router-dom';
+import { Router } from 'react-router-dom';
 
 import { IonRouter } from './IonRouter';
 

packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx

@@ -1,6 +1,7 @@
-import { Action as HistoryAction, Location as HistoryLocation, MemoryHistory } from 'history';
+import type { Action as HistoryAction, Location as HistoryLocation, MemoryHistory } from 'history';
 import React from 'react';
-import { MemoryRouterProps, Router } from 'react-router';
+import type { MemoryRouterProps } from 'react-router';
+import { Router } from 'react-router';
 
 import { IonRouter } from './IonRouter';
 

packages/react-router/src/ReactRouter/IonReactRouter.tsx

@@ -1,11 +1,8 @@
-import {
+import type { Action as HistoryAction, History, Location as HistoryLocation } from 'history';
-  Action as HistoryAction,
+import { createBrowserHistory as createHistory } from 'history';
-  History,
-  Location as HistoryLocation,
-  createBrowserHistory as createHistory,
-} from 'history';
 import React from 'react';
-import { BrowserRouterProps, Router } from 'react-router-dom';
+import type { BrowserRouterProps } from 'react-router-dom';
+import { Router } from 'react-router-dom';
 
 import { IonRouter } from './IonRouter';
 
@@ -25,21 +22,21 @@ export class IonReactRouter extends React.Component<IonReactRouterProps> {
     this.registerHistoryListener = this.registerHistoryListener.bind(this);
   }
 
- /**
+  /**
-  * history@4.x passes separate location and action
+   * history@4.x passes separate location and action
-  * params. history@5.x passes location and action
+   * params. history@5.x passes location and action
-  * together as a single object.
+   * together as a single object.
-  * TODO: If support for React Router <=5 is dropped
+   * TODO: If support for React Router <=5 is dropped
-  * this logic is no longer needed. We can just assume
+   * this logic is no longer needed. We can just assume
-  * a single object with both location and action.
+   * a single object with both location and action.
-  */
+   */
   handleHistoryChange(location: HistoryLocation, action: HistoryAction) {
-   const locationValue = (location as any).location || location;
+    const locationValue = (location as any).location || location;
-   const actionValue = (location as any).action || action;
+    const actionValue = (location as any).action || action;
-   if (this.historyListenHandler) {
+    if (this.historyListenHandler) {
-     this.historyListenHandler(locationValue, actionValue);
+      this.historyListenHandler(locationValue, actionValue);
-   }
+    }
- }
+  }
 
   registerHistoryListener(cb: (location: HistoryLocation, action: HistoryAction) => void) {
     this.historyListenHandler = cb;

packages/react-router/src/ReactRouter/IonRouteInner.tsx

@@ -1,4 +1,4 @@
-import { IonRouteProps } from '@ionic/react';
+import type { IonRouteProps } from '@ionic/react';
 import React from 'react';
 import { Route } from 'react-router';
 

packages/react-router/src/ReactRouter/IonRouter.tsx

@@ -1,19 +1,16 @@
-import {
+import type {
   AnimationBuilder,
-  LocationHistory,
-  NavManager,
   RouteAction,
   RouteInfo,
-  RouteManagerContext,
   RouteManagerContextState,
   RouterDirection,
   ViewItem,
-  generateId,
-  getConfig,
 } from '@ionic/react';
-import { Action as HistoryAction, Location as HistoryLocation } from 'history';
+import { LocationHistory, NavManager, RouteManagerContext, generateId, getConfig } from '@ionic/react';
+import type { Action as HistoryAction, Location as HistoryLocation } from 'history';
 import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import type { RouteComponentProps } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 
 import { IonRouteInner } from './IonRouteInner';
 import { ReactRouterViewStack } from './ReactRouterViewStack';
@@ -25,9 +22,7 @@ export interface LocationState {
 }
 
 interface IonRouteProps extends RouteComponentProps<{}, {}, LocationState> {
-  registerHistoryListener: (
+  registerHistoryListener: (cb: (location: HistoryLocation<any>, action: HistoryAction) => void) => void;
-    cb: (location: HistoryLocation<any>, action: HistoryAction) => void
-  ) => void;
 }
 
 interface IonRouteState {
@@ -77,7 +72,9 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
   }
 
   handleChangeTab(tab: string, path?: string, routeOptions?: any) {
-    if (!path) { return; }
+    if (!path) {
+      return;
+    }
 
     const routeInfo = this.locationHistory.getCurrentRouteInfoForTab(tab);
     const [pathname, search] = path.split('?');
@@ -152,8 +149,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
         this.locationHistory.add(routeInfo);
       } else {
         const isPushed =
-          this.incomingRouteParams.routeAction === 'push' &&
+          this.incomingRouteParams.routeAction === 'push' && this.incomingRouteParams.routeDirection === 'forward';
-          this.incomingRouteParams.routeDirection === 'forward';
         routeInfo = {
           id: generateId('routeInfo'),
           ...this.incomingRouteParams,
@@ -183,7 +179,10 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
            * say that /home was pushed by /home which is not correct.
            */
           const currentPushedBy = currentRouteInfo?.pushedByRoute;
-          const pushedByRoute = (currentPushedBy !== undefined && currentPushedBy !== routeInfo.pathname) ? currentPushedBy : routeInfo.pushedByRoute;
+          const pushedByRoute =
+            currentPushedBy !== undefined && currentPushedBy !== routeInfo.pathname
+              ? currentPushedBy
+              : routeInfo.pushedByRoute;
 
           routeInfo.lastPathname = currentRouteInfo?.pathname || routeInfo.lastPathname;
           routeInfo.prevRouteLastPathname = currentRouteInfo?.lastPathname;
@@ -253,16 +252,13 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
         };
         if (
           routeInfo.lastPathname === routeInfo.pushedByRoute ||
-          (
+          /**
-            /**
+           * We need to exclude tab switches/tab
-             * We need to exclude tab switches/tab
+           * context changes here because tabbed
-             * context changes here because tabbed
+           * navigation is not linear, but router.back()
-             * navigation is not linear, but router.back()
+           * will go back in a linear fashion.
-             * will go back in a linear fashion.
+           */
-             */
+          (prevInfo.pathname === routeInfo.pushedByRoute && routeInfo.tab === '' && prevInfo.tab === '')
-            prevInfo.pathname === routeInfo.pushedByRoute &&
-            routeInfo.tab === '' && prevInfo.tab === ''
-          )
         ) {
           /**
            * history@4.x uses goBack(), history@5.x uses back()

packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx

@@ -1,11 +1,5 @@
-import {
+import type { RouteInfo, ViewItem } from '@ionic/react';
-  IonRoute,
+import { IonRoute, ViewLifeCycleManager, ViewStacks, generateId } from '@ionic/react';
-  RouteInfo,
-  ViewItem,
-  ViewLifeCycleManager,
-  ViewStacks,
-  generateId,
-} from '@ionic/react';
 import React from 'react';
 import { matchPath } from 'react-router';
 
@@ -19,12 +13,7 @@ export class ReactRouterViewStack extends ViewStacks {
     this.findViewItemByPathname = this.findViewItemByPathname.bind(this);
   }
 
-  createViewItem(
+  createViewItem(outletId: string, reactElement: React.ReactElement, routeInfo: RouteInfo, page?: HTMLElement) {
-    outletId: string,
-    reactElement: React.ReactElement,
-    routeInfo: RouteInfo,
-    page?: HTMLElement
-  ) {
     const viewItem: ViewItem = {
       id: generateId('viewItem'),
       outletId,
@@ -117,12 +106,7 @@ export class ReactRouterViewStack extends ViewStacks {
   }
 
   findLeavingViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string, mustBeIonRoute = true) {
-    const { viewItem } = this.findViewItemByPath(
+    const { viewItem } = this.findViewItemByPath(routeInfo.lastPathname!, outletId, false, mustBeIonRoute);
-      routeInfo.lastPathname!,
-      outletId,
-      false,
-      mustBeIonRoute
-    );
     return viewItem;
   }
 
@@ -131,12 +115,7 @@ export class ReactRouterViewStack extends ViewStacks {
     return viewItem;
   }
 
-  private findViewItemByPath(
+  private findViewItemByPath(pathname: string, outletId?: string, forceExact?: boolean, mustBeIonRoute?: boolean) {
-    pathname: string,
-    outletId?: string,
-    forceExact?: boolean,
-    mustBeIonRoute?: boolean
-  ) {
     let viewItem: ViewItem | undefined;
     let match: ReturnType<typeof matchPath> | undefined;
     let viewStack: ViewItem[];

packages/react-router/src/ReactRouter/StackManager.tsx

@@ -1,12 +1,5 @@
-import {
+import type { RouteInfo, StackContextState, ViewItem } from '@ionic/react';
-  RouteInfo,
+import { RouteManagerContext, StackContext, generateId, getConfig } from '@ionic/react';
-  RouteManagerContext,
-  StackContext,
-  StackContextState,
-  ViewItem,
-  generateId,
-  getConfig,
-} from '@ionic/react';
 import React from 'react';
 import { matchPath } from 'react-router-dom';
 
@@ -18,6 +11,7 @@ interface StackManagerProps {
   routeInfo: RouteInfo;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface StackManagerState {}
 
 const isViewVisible = (el: HTMLElement) =>
@@ -100,10 +94,7 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
       let leavingViewItem = this.context.findLeavingViewItemByRouteInfo(routeInfo, this.id);
 
       if (!leavingViewItem && routeInfo.prevRouteLastPathname) {
-        leavingViewItem = this.context.findViewItemByPathname(
+        leavingViewItem = this.context.findViewItemByPathname(routeInfo.prevRouteLastPathname, this.id);
-          routeInfo.prevRouteLastPathname,
-          this.id
-        );
       }
 
       // Check if leavingViewItem should be unmounted
@@ -119,10 +110,7 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
         }
       }
 
-      const enteringRoute = matchRoute(
+      const enteringRoute = matchRoute(this.ionRouterOutlet?.props.children, routeInfo) as React.ReactElement;
-        this.ionRouterOutlet?.props.children,
-        routeInfo
-      ) as React.ReactElement;
 
       if (enteringViewItem) {
         enteringViewItem.reactElement = enteringRoute;
@@ -156,10 +144,7 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
          * to find the leaving view item to transition between.
          */
         if (!leavingViewItem && this.props.routeInfo.prevRouteLastPathname) {
-          leavingViewItem = this.context.findViewItemByPathname(
+          leavingViewItem = this.context.findViewItemByPathname(this.props.routeInfo.prevRouteLastPathname, this.id);
-            this.props.routeInfo.prevRouteLastPathname,
-            this.id
-          );
         }
 
         /**
@@ -311,10 +296,7 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
          * As a result, we should not hide the view item here
          * as it will cause the current view to be hidden.
          */
-        if (
+        if (enteringViewItem !== leavingViewItem && enteringViewItem?.ionPageElement !== undefined) {
-          enteringViewItem !== leavingViewItem &&
-          enteringViewItem?.ionPageElement !== undefined
-        ) {
           const { ionPageElement } = enteringViewItem;
           ionPageElement.setAttribute('aria-hidden', 'true');
           ionPageElement.classList.add('ion-page-hidden');
@@ -379,17 +361,11 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
     const routerOutlet = this.routerOutletElement!;
 
     const routeInfoFallbackDirection =
-      routeInfo.routeDirection === 'none' || routeInfo.routeDirection === 'root'
+      routeInfo.routeDirection === 'none' || routeInfo.routeDirection === 'root' ? undefined : routeInfo.routeDirection;
-        ? undefined
-        : routeInfo.routeDirection;
     const directionToUse = direction ?? routeInfoFallbackDirection;
 
     if (enteringViewItem && enteringViewItem.ionPageElement && this.routerOutletElement) {
-      if (
+      if (leavingViewItem && leavingViewItem.ionPageElement && enteringViewItem === leavingViewItem) {
-        leavingViewItem &&
-        leavingViewItem.ionPageElement &&
-        enteringViewItem === leavingViewItem
-      ) {
         // If a page is transitioning to another version of itself
         // we clone it so we can have an animation to show
 
@@ -419,14 +395,9 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
     const ionRouterOutlet = React.Children.only(children) as React.ReactElement;
     this.ionRouterOutlet = ionRouterOutlet;
 
-    const components = this.context.getChildrenToRender(
+    const components = this.context.getChildrenToRender(this.id, this.ionRouterOutlet, this.props.routeInfo, () => {
-      this.id,
+      this.forceUpdate();
-      this.ionRouterOutlet,
+    });
-      this.props.routeInfo,
-      () => {
-        this.forceUpdate();
-      }
-    );
 
     return (
       <StackContext.Provider value={this.stackContextValue}>